@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100');

@font-face{font-family:SwisBold;font-display:swap;src:url(fonts/sharpgrotesk-bold20-webfont.woff) format("woff")}
@font-face{font-family:SwisRegular;font-display:swap;src:url(fonts/sharpgrotesk-book20-webfont.woff) format("woff")}
@font-face{font-family:SwisLight;font-display:swap;src:url(fonts/sharpgrotesk-light20-webfont.woff) format("woff")}
@font-face{font-family:SwisOutline;font-display:swap;src:url(fonts/swiss721boldoutlinebt-webfont.woff) format("woff")}

:root{
	--primary-color: #000000;
	--secondary-color:#005f94;
	--primary-font: 'SwisLight';
	--primary-font-weight:300;
	--title-font: 'SwisBold';
	--title-font-weight: 700;
}

html,body {font-family: var(--primary-font); font-weight:  var(--primary-font-weight); /*overflow: hidden;*/ color:#444; font-size: 14px;}
body {overflow: hidden!important;}

 html, body, .block {
        height: 100%;
      }
      nav ul li a:hover, nav ul li a.active {
        background-color: rgba(0,0,0,.1);
      }
      footer {
        padding-left: 0;
      }


a {color:#50af31; transition: all 0.4s; -moz-transition: all 0.4s; -webkit-transition: all 0.4s;}

h1,h2,h3,h4,h5,h6 {var(--title-font); var(--title-font-weight);}

h1 {font-size: 3.0rem;  margin: 1.8rem 0 0.8rem 0;}
h2 {font-size: 2.56rem; margin: 1.3rem 0 0.5rem 0;}
h3 {font-size: 1.8rem;  margin: 1.0rem 0 0.2rem 0;}
h4 {font-size: 1.58rem; margin: 1.0rem 0 0.2rem 0;}
i.right {margin-left: 5px;}

.spinner-white-only {border-color: #FFF;}


b, strong {color:var(--primary-color); font-weight: bolder;}

/* BTN */
.btn, .btn-large, .btn-small {border-radius: 0px; background-color: var(--primary-color); box-shadow:0 0px 0px 0 rgba(0,0,0,0.14); -webkit-box-shadow:0 0px 0px 0 rgba(0,0,0,0.14);}
.btn:hover, .btn-large:hover, .btn-small:hover {background-color: var(--secondary-color); box-shadow:0 0px 0px 0 rgba(0,0,0,0.14); -webkit-box-shadow:0 0px 0px 0 rgba(0,0,0,0.14);}
.btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus {background-color: var(--primary-color);}


.btn.inverted, .btn-large.inverted, .btn-small.inverted {border-radius: 0px; background-color: #FFF; box-shadow:0 0px 0px 0 rgba(0,0,0,0.14); -webkit-box-shadow:0 0px 0px 0 rgba(0,0,0,0.14); color:var(--primary-color)}
.btn.inverted:hover, .btn-large.inverted:hover, .btn-small.inverted:hover {background-color: #efefef; box-shadow:0 0px 0px 0 rgba(0,0,0,0.14); -webkit-box-shadow:0 0px 0px 0 rgba(0,0,0,0.14);}
.btn.inverted:focus, .btn-large.inverted:focus, .btn-small.inverted:focus, .btn-floating.inverted:focus {background-color: #FFF;color:var(--primary-color);}


/* Home main content */
section.home-main-content {
	width:100%;
	position:relative;
	margin:0px;
	padding:0px;
}
section.home-main-content h1 {margin:0px; padding:0px;}

section.home-main-content .fixed-box {position: absolute; background:var(--primary-color); width:100%; height: 100%;}

.head-pin {width:100%; bottom: 0px; top:0px!important;}


.section--bg {background-color:var(--primary-color); color:#FFF; background-size: cover; background-repeat: no-repeat; background-position: center center;}
section.block {padding: 0; margin:0; height: 100%; position: relative;}
section.blockz {padding: 0; margin:0; height: auto; position: relative;}
/*section.pad-sect .container{padding-top: 80px;}*/

.pinned {width: 100%;}
/* Home main content */

.has-fixed-sidenav .my-scrollbar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 220px; 
}		
/*
section {margin-top:80px; margin-bottom: 80px;}
section.section-first {margin-top:0px!important;}
*/
.pad-sect {padding-top: 80px!important; padding-bottom: 80px!important;}


/* PRELOADER */
.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: var(--primary-color);
    /*
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(vendor/img/loader.gif);
    background-size: 66px 66px;
    */
	}	
.preloader .preloader-wrapper {top:50%; left: 50%; margin-top:-25px; margin-left: -25px;}
.preloader .preloader-wrapper.big {top:50%; left: 50%; margin-top:-32px; margin-left: -32px;}
.preloader .preloader-wrapper.small {top:50%; left: 50%; margin-top:-18px; margin-left: -18px;}
.spinner-green, .spinner-green-only {border-color:#50af31}
/* PRELOADER */


/* HEADER */
header {position: fixed; z-index: 999; width: 100%;}
header nav ul a,
header nav a {color:#FFF;}

header nav.positive ul a,
header nav.positive a {color:#333;}
header nav.positive .brand-logo {color:#333;} 

nav .brand-logo img {height: 48px; margin-top: 6px; transition: all 0.4s; -moz-transition: all 0.4s; -webkit-transition: all 0.4s;}
header nav {background:transparent; color:#444;}

header .dropdown-content li{min-height: 44px;}
header .dropdown-content li>a, header .dropdown-content li>span {color:#444;font-size:12px;line-height:16px}
header nav .dropdown-menu i {font-size: 12px; margin-left: 10px;}

nav img.whitelog {display: block;}
nav img.color {display: none;}

nav.navresize {padding-top: 0px; background:var(--primary-color);}
nav.navresize .brand-logo img {height: 40px; margin-top: 11px}

@media only screen and (min-width: 601px){
	nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
	    /*height: 100px;
	    line-height: 100px;*/
	    transition: all 0.4s; -moz-transition: all 0.4s; -webkit-transition: all 0.4s;
	}

	nav.navresize .dropdown-menu i {height: 60px!important;}
	
	nav.positive, nav.positive .nav-wrapper i, nav.positive a.sidenav-trigger, nav.positive a.sidenav-trigger i {
	    background:#FFF;
	}	
	nav.positive img.whitelog {display: none;}
	nav.positive img.color {display: block;}
	
	nav {padding-top: 30px;}

}
header .dropdown-content,
nav {box-shadow: none; -webkit-box-shadow:none;}

.sidenav li>a {padding:0 16px;}

.sidenav .logo-container img {height: 80px;}
.sidenav a.logo-container {height: auto; text-align: center;}
.sidenav a.logo-container:hover {background:transparent;}

header nav ul a:hover { background-color: transparent;}

header .dropdown-content {top: 75px!important;}

ul.langlist {float: right; margin-left: 30px; color:#FFF;}
ul.langlist li.selec span{border:1px solid #FFF; color:#FFF;}

ul.langlist li.selec span,ul.langlist li a {width: 20px; display: inline; padding:5px 10px; }

@media only screen and (max-width: 991px){
	ul.langlist {margin-left: 0px; margin-right: 20px;}
}
/* HEADER /


/* IMAGES CROP */
.poster { position: relative; overflow: hidden;}
.poster figure { position: relative; height: auto; overflow: hidden; margin:0px;}
.poster figure:before { content: ""; display: block; padding-top: 134.83146%;}
.poster figure img{ position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 1;}
.poster--flexible figure:before {display: none;}
.poster--square figure:before { padding-top: 100%;}
.poster--horizontal figure:before {padding-top: 68.57143%;}
.poster--hero figure:before {padding-top: 30%;}
.poster--title figure:before {padding-top: 46%;}
.poster--features-landscape figure::before {padding-top: 62.47191%;}
.poster--features-portrait figure::before { padding-top: 141.57303%;}
.poster--cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none;}
.poster--cover:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transition:-webkit-transform 0.5s;transition:-webkit-transform 0.5s;transition:transform 0.5s;transition:transform 0.5s,-webkit-transform 0.5s;-webkit-transform-origin:top center;transform-origin:top center;background-color:#eff0f1;will-change:transform}
.poster--cover:after{-webkit-transform:none;transform:none}
.poster--cover:after{-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:bottom center;transform-origin:bottom center}
/*
.hero .poster--cover {background:#e2e2e2;}
*/
.hero-top {width:100%; display: grid;}
/* IMAGES CROP */


/*MODULES*/
 /* --- Divider--- */
hr.divide {border:0px; height: 1px; border-bottom:1px; border-color: var(--primary-color);}
 /* --- Divider--- */
 
 
 /* --- Image Title --- */
	 .poster--title figure:before {padding-top: 46%;}
	 .poster--title h1, .poster--title h3, .poster--title h4 {color: #FFF; }
	 .poster--title .textual {width: 100%; position: absolute; bottom: 0px;}
	 .textual-2 {margin-top: 25px;}
	 .poster--title .poster--cover {background: rgba(0,0,0,0.38);}
	 .hero-component .poster--title .textual {width: 100%; position: absolute; bottom: 0px; top:0px;}
	 
@media only screen and (max-width: 568px){
	.poster--title figure:before {padding-top: 100%;}
	.poster--title h1 {font-size: 2.5rem}
	.poster--title h4 {font-size: 1.3rem}
}	 
	 
 /* --- Image Title --- */


 /* --- Cards --- */
 	 .poster .card-title {color:red}	
 	 .poster .card-title {position: absolute; z-index: 1; bottom: 20px; left: 20px;} 	 
 	 .poster .card-title.black {background:transparent!important; color:#000;}
 	 .poster .card-title.white {background:transparent!important; color:#FFF;}
 	 .poster .card-title.red {background:transparent!important; color:var(--primary-color);}
 	 
 	 .card:hover img {transform:scale(1.1)}
 	 .card img {-moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; transform-origin: center;} 
 	 
 	 .card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating)	{color:var(--primary-color)} 
 	 .card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating):hover { color: #9e4a41;}
 	 
 	 .card h4 {margin: 1.0rem 0 0.6rem 0;}
 	 
     .flexme {display: flex;flex-wrap: wrap;}
 /* --- Cards --- */


 /* --- Banner --- */
section .banner { display: block;}
section.container .banner {padding:40px 15px;}
section.container-fluid .banner {padding:40px 0px;}

section .banner h3 {margin:0px; margin-top: 6px;}
section .banner .row {margin-bottom:  0px;}
section .banner.grayban {background: #efefef;}
section .banner.blackban {background: #000;} 
section .banner.blackban h3 {color:#FFF;}

section .banner.redban {background: var(--primary-color);} 
section .banner.redban h3 {color:#FFF;}

@media only screen and (max-width: 600px) {
    section .banner h3 {margin-bottom: 20px;}
}


 /* --- Banner --- */

@media only screen and (max-width: 600px) {
    .mod_image {order:1;}
}
/*MODULES*/



/*SLIDER*/
.slidenav {position: absolute; background: red; width:40px; height: 40px; z-index: 99; top:50%; margin-top:-20px; text-align: center; color:#333; background:#FFF;}
.slidenav i {margin-top: 5px;}
.slidenav.left  {left:10px;}
.slidenav.right {right:10px;}
.slider .indicators {bottom:60px; z-index: 99;}
.slider .indicators .indicator-item.active {background-color: var(--primary-color);}
.slider .indicators .indicator-item {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 6px;
    background-color: #e0e0e0;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    border-radius: 50%;
}
.slider .textual {width: 100%; position: absolute; bottom: 0px; top:0px;}
.slider .textual h3 {color:#FFF;}
.slider .textual h4 {color:#FFF; margin-top:0.4rem;}
.slider .textual a {margin-top: 20px;}
/*
	.slider .slides li:before {content:''; width:100%; top:0px; bottom:0px; left:0px; background:rgba(0,0,0,0.38); position: absolute;}
*/
/*SLIDER*/


/*OWL CAROUSEL*/
.owl-theme .owl-nav {margin-top: 10px;text-align: center;-webkit-tap-highlight-color: transparent;}
.owl-theme .owl-nav [class*='owl-'] {
    color: #FFF;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: #D6D6D6;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px; 
}
.owl-theme .owl-nav [class*='owl-']:hover {background: #869791;color: #FFF;text-decoration: none;}
.owl-theme .owl-nav .disabled {opacity: 0.5;cursor: default;}
.owl-theme .owl-nav.disabled + .owl-dots {margin-top: 10px;}

.owl-theme .owl-dots {text-align: center;-webkit-tap-highlight-color: transparent;}
.owl-theme .owl-dots .owl-dot {display: inline-block;zoom: 1;*display: inline;}
.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #869791;}
.owl-carousel .item {padding:0px 5px;}
/*OWL CAROUSEL*/


/* SIDE NAVIGATION */

main {flex: 1 0 auto;}
.sidenav li>a {font-weight: 100;}
.collapsible-header i {font-size: 0.9rem}
.sidenav .collapsible>li.waves-effect {display: block;}

.sidenav .collapsible .collapsible-header .la-angle-left,
.sidenav .collapsible .collapsible-header .chevron {
    float: right;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 13px 0 0 0;
    transition: transform .2s;
}

.sidenav .collapsible>.active .collapsible-header .la-angle-left,
.sidenav .collapsible>.active .collapsible-header .chevron {transform: rotate(-90deg);}
.sidenav .collapsible .collapsible-body {background-color: transparent;}
.sidenav {width: 220px;}

.sidenav li>a>i, .sidenav li>a>[class^="mdi-"], .sidenav li>a li>a>[class*="mdi-"], .sidenav li>a>i.material-icons, .sidenav li>a>i.las {
    float: left;
    height: 48px;
    line-height: 48px;
    margin: 0 12px 0 0;
    width: 24px;
    color: rgba(0,0,0,0.54);
}

.sidenav .collapsible-body li a, .sidenav.fixed .collapsible-body li a {padding: 0 19.5px 0 18px;}

@media only screen and (min-width: 993px){
	body.has-fixed-sidenav { padding-left: 220px;}
	.container {width: 80%}
	/*.go-carousel {display: block!important}*/
}

@media only screen and (max-width: 993px){
	.go-carousel .col {width: 100%!important;}
}


/* SIDE NAVIGATION */
.navbar.white a {color:#212121}

.dropdown-content {
    background-color: #fff;
    margin: 0;
    display: none;
    min-width: 170px;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    -webkit-transform-origin: 100% 0; 
    transform-origin: 100% 0; 
    transform: scaleX(1) scaleY(1);
}

.valign-wrapper,
body .themes-section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

body .full-pic {width:100%}

body .themes-section.right-aligned {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}


.valign-wrapper, body.themes .themes-section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.themes-section .theme-preview {
    width: 100%;
}


@media only screen and (max-width: 600px) {
    body .themes-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    body .themes-section.right-aligned {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

}

.content {position: relative; top:100vh;}

.poster--cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
}

.poster--cover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    background-color: #eff0f1;
    will-change: transform;
}
.poster--horizontal img {
    height: auto;
    max-width: 100%;
}

/* WRITE */

.sentence {background:#FFF; min-height: 500px; width: 100%; text-align: center;}
.sentence h1 {font-weight: 200; width: 100%; text-align: center; }
.sentence h1:after {
    content: '®';
    position: absolute;
    font-size: 18px;
    height: 18px;
    line-height: normal;
}

.sentence svg {width: 100%;}
.sentence .intern {position: relative; margin:0 auto;  width:600px; }

#science .st0{fill:none;stroke:#444;stroke-width:0.25;stroke-miterlimit:10;}	

#science-end .st0 {fill:#000}

#science-end  {
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease 1s;
  transition: opacity 0.5s ease, transform 0.5s ease 1s;
  transition: opacity 0.5s ease, transform 0.5s ease 1s, -webkit-transform 0.5s ease 1s;
}
#science-end.is-active {
  opacity: 1;
}

@media only screen and (max-width: 768px) {
 .sentence .intern {width: 90%;}
}
/* WRITE */


/* Hero */
.hero .intern {position: relative; margin:0 auto;  }
.hero {background:#fbfbfb; min-height: 400px; width: 100%; text-align: center; background-size: cover; margin-bottom: 80px;}
.hero h2 {font-weight: 200; width: 100%; text-align: center; margin-top: 0px; margin-bottom: 0px;}

.hero ul.page-tree li {display: inline-block; text-transform: uppercase; font-size: 12px;}
.hero ul.page-tree li:after {content:'/'; margin-left: 5px;}
.hero ul.page-tree li:last-child:after {content:'';}
/* Hero */


/* Footer */
.page-footer {background-color:#edebeb; color:#000;}
.page-footer .footer-copyright {color:#000; text-align: center; font-size: 12px; background-color: transparent;}
.page-footer .footer-copyright  a {color:#000;}
.page-footer .footer-copyright  a:hover {text-decoration: underline;}
/* Footer */



/* Ajax Page Transition Test */

body::after {
    content: '';
    height: 100vh;
    width: 100%;
    position: fixed;
    left: 0;
    background-color: #fff;
    z-index: 9999;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform .4s .4s;
    -moz-transition: -moz-transform .4s .4s;
    transition: transform .4s .4s
}

body::before {
    top: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%)
}

body::after {
    bottom: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    background-color:var(--primary-color);
}

body.page-is-changing::after {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform .4s 0s;
    -moz-transition: -moz-transform .4s 0s;
    transition: transform .4s 0s
}

.cd-main-content {height: 100%;}

.cd-cover-layer {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    height: calc(100% - 0px);
    width: calc(100% - 0px);
    opacity: 0;
    visibility: hidden;
    background-color: #FFF;
    -webkit-transition: opacity .4s .4s, visibility 0s .8s;
    -moz-transition: opacity .4s .4s, visibility 0s .8s;
    transition: opacity .4s .4s, visibility 0s .8s;
    z-index:9999;
}

.cd-about .cd-cover-layer {
    background-color: #283040
}

.page-is-changing .cd-cover-layer {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s
}

@media only screen and (min-width:768px) {
    .cd-cover-layer {
        height: calc(100% - 0px);
        width: calc(100% - 0px)
    }
}

.cd-loading-bar {
    position: fixed;
    z-index: 3;
    left: 50%;
    top: 50%;
    height: 2px;
    width: 90%;
    background-color: var(--primary-color);
    visibility: hidden;
    -webkit-transition: visibility 0s .4s, -webkit-transform .4s 0s ease-in;
    -moz-transition: visibility 0s .4s, -moz-transform .4s 0s ease-in;
    transition: visibility 0s .4s, transform .4s 0s ease-in;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.cd-about .cd-loading-bar {
    background-color: #283040
}

.cd-about .cd-loading-bar::before {
    background-color: var(--primary-color)
}

.cd-loading-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #283040;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center
}

.page-is-changing .cd-loading-bar {
    visibility: visible;
    -webkit-transform: translateX(-50%) translateY(-50%) scaleX(.3);
    -moz-transform: translateX(-50%) translateY(-50%) scaleX(.3);
    -ms-transform: translateX(-50%) translateY(-50%) scaleX(.3);
    -o-transform: translateX(-50%) translateY(-50%) scaleX(.3);
    transform: translateX(-50%) translateY(-50%) scaleX(.3);
    -webkit-transition: visibility 0s .3s, -webkit-transform .4s .4s;
    -moz-transition: visibility 0s .3s, -moz-transform .4s .4s;
    transition: visibility 0s .3s, transform .4s .4s
}

.page-is-changing .cd-loading-bar::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform .8s .8s ease-in;
    -moz-transition: -moz-transform .8s .8s ease-in;
    transition: transform .8s .8s ease-in
}

@media only screen and (min-width:768px) {
    .cd-loading-bar {
        width: calc(100% - 40px)
    }
}
/* Ajax Page Transition Test */

.caption ol,
.caption ul {padding:0px; padding-left:20px; }
.caption ul li {list-style-type: disc;}

.flexbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.flexbox .col {
  flex: 1;
}