@charset "utf-8";
/* CSS Document */

/* 
  height: 100vh;  
  height: calc(var(--vh, 1vh) * 100); 
*/

/*

font-family:'CircularStd-Book', sans-serif;
font-family:'CircularStd-BookItalic', sans-serif;
font-family:'CircularStd-Medium', sans-serif;
font-family:'CircularStd-MediumItalic', sans-serif;
font-family:'CircularStd-Bold', sans-serif;
font-family:'CircularStd-BoldItalic', sans-serif;
font-family:'CircularStd-Black', sans-serif;
font-family:'CircularStd-BlackItalic', sans-serif;

*/

html {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased; 
  text-rendering:optimizeLegibility; 
  -moz-osx-font-smoothing:grayscale;
  font-family:'CircularStd-Book', sans-serif;
}
*, *:before, *:after {
  -webkit-box-sizing:inherit;
  -moz-box-sizing:inherit;
  box-sizing:inherit;
}
body {background:#fff;}
body, html {height:100%; width:100%; margin:0;}
body, p, h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}
sup {vertical-align:baseline; position:relative; top:-0.4em; font-size:60%;}
.clearfix {}
.clearfix:after {content:" "; clear:both; display:table;}

#page {background:#eee; z-index:1; position:relative}

#page_content {background:#fff; z-index:1; position:relative;}

#nav_holder {z-index:2; position:fixed; top:0; right:0; width:100%; height:66px;}
#nav_bar {background:#86D199; z-index:1; position:absolute; top:0; bottom:0; right:0; width:100%; height:66px;}

#nav_window {width:100%; position:fixed; top:0; bottom:0; right:0; background:#fff; z-index:2; overflow:auto; transform:translateX(100%);}

#nav_window::-webkit-scrollbar {
  width:8px;
}
#nav_window {
  scrollbar-width:thin;
  scrollbar-color:#000 #eee;
}
#nav_window::-webkit-scrollbar-track {
  background:#eee;
}
#nav_window::-webkit-scrollbar-thumb {
  background-color:#000 ;
  border-radius:4px;
  border:2px solid #eee;
}

#nav_content {padding:80px 20px 100px 25px; position:relative;
min-height: 100vh;  
min-height: calc(var(--vh, 1vh) * 100); 
}

#nav_lists {font-family:'CircularStd-Book', sans-serif; font-size:15px; line-height:24px;}
#nav_lists h3 {font-family:'CircularStd-Bold', sans-serif; font-weight:400; margin:0; padding:0; font-size:15px; line-height:24px; text-transform:uppercase;}
.nav_section {margin:0 0 28px 0; color:inherit;}
#nav_lists ul {list-style:none; margin:0; padding:0; color:inherit;}
#nav_lists ul li {margin:0; padding:0; color:inherit;}
#nav_lists a {color:inherit; text-decoration:none;}
#nav_lists a:hover {color:#000; text-decoration:none;}

#nav_header {color:#000;}

#nav_foreword {color:#C5DB42;}
#nav_overview {color:#B0D85F;}
#nav_framework {color:#9BD47C;}
#nav_trends {color:#86D199;}
#nav_about {color:#70CEB5;}
#nav_board {color:#5BCAD2;}
#nav_facts {color:#6EC5EC;}


#nav_logo {width:178px; position:absolute; left:25px; bottom:24px;}
#nav_logo img {width:100%; height:auto;}

#nav_toggle-holder {z-index:9; width:40px; height:26px; position:absolute; top:20px; left:50%; transform:translateX(-50%);}

#nav_toggle {display:block; width:40px; height:26px; line-height:26px; outline:none; border:none; background-color:transparent; cursor:pointer;}
#nav_toggle:hover {outline:none; border:none; background-color:transparent;}
#nav_toggle span {display:block; width:40px; height:4px; background:#000; position:absolute; left:0; top:11px;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition:all 0.3s ease;
}
#nav_toggle:before {
content: "";
position: absolute;
left:0;
top:0px;
width:40px;
height:4px;
background:#000;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition:all 0.3s ease;
}
#nav_toggle:after {
content: "";
position: absolute;
left:0;
top:22px;
width:40px;
height:4px;
background:#000;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition:all 0.3s ease;
}


body.nav_opened #nav_toggle span {
  background: transparent;
}
body.nav_opened #nav_toggle:before {
	-ms-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition:all 0.3s ease;
	top:11px;
}
body.nav_opened #nav_toggle:after {
	-ms-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition:all 0.3s ease;
	top:11px;
}

body.nav_opened {overflow:hidden;}


body.nav_opened #nav_window {transform:translateX(0);

-moz-transition:transform 0.3s ease;
-o-transition:transform 0.3s ease;
-webkit-transition:transform 0.3s ease;
transition:transform 0.3s ease;

}

body.nav_closed #nav_window {
-moz-transition:transform 0.3s ease;
-o-transition:transform 0.3s ease;
-webkit-transition:transform 0.3s ease;
transition:transform 0.3s ease;
}

#nav_dismiss-bg {display:none; width:100%; height:100%; position:fixed; top:0; left:0; right:0; bottom:0;}
body.nav_opened #nav_dismiss-bg {display:block; z-index:99999;}
body.nav_opened #nav_holder {z-index:999999;}


/* Footer */
#page_footer {background:#f2faf4; position:relative; z-index:1;}
#footer_link-holder {max-width:1200px; width:calc(100% - 38px); position:relative; z-index:1; padding:45px 0;}

#footer_link {position:relative; display:block; float:right; text-decoration:none; height:50px; padding:4px 60px 0 0; text-align:right;}
#footer_link strong {display:block; color:#86D199; font-family:'CircularStd-Bold', sans-serif; font-size:10px; line-height:10px; font-weight:400;}
#footer_link span {display:block; color:#000; font-family:'CircularStd-Black', sans-serif; font-size:14px; line-height:14px;}
#footer_link:after {content:"\25B6 \FE0E"; display:block; color:#86D199; position:absolute; right:0; font-family:sans-serif; font-size:65px; line-height:65px;
top:66%; transform:translateY(-50%);
-moz-transition:right 0.3s ease;
-o-transition:right 0.3s ease;
-webkit-transition:right 0.3s ease;
transition:right 0.3s ease;
}

#footer_link:hover:after {right:-20px;}


/* Media Queries */
@media only screen and (min-width: 370px) {


}

@media only screen and (min-width: 384px) {

}

@media only screen and (min-width: 480px) {

}

@media only screen and (min-width: 720px) {

}

@media only screen and (min-width: 960px) {

}

@media only screen and (min-width: 1024px) {

#page_content {width:calc(100% - 104px);}

#nav_holder {top:0; bottom:0; right:0; width:104px; height:auto;}
#nav_bar {top:0; bottom:0; right:0; width:104px; height:auto;}

#nav_toggle-holder {top:30px;}

#nav_window {width:371px; position:absolute; top:0; bottom:0;}

#nav_content {padding:80px 20px 100px 40px;}

#nav_header {margin:0; position:absolute; left:40px; top:25px;}

#nav_lists {font-size:18px; line-height:26px;}
#nav_lists h3 {font-size:18px; line-height:26px;}
.nav_section {margin:0 0 30px 0;}

#nav_logo {left:40px; bottom:24px;}

/* Footer */
#page_footer {width:calc(100% - 104px);}
#footer_link-holder {padding:120px 0 125px;}

#footer_link {position:relative; display:block; float:right; text-decoration:none; height:65px; padding:10px 70px 0 0; text-align:right;}
#footer_link strong {font-size:12px; line-height:12px;}
#footer_link span {font-size:20px; line-height:20px;}
#footer_link:after {font-size:76px; line-height:66px; right: -6px;}

#footer_link:hover:after {right:-40px;}		


}

@media only screen and (min-width: 1080px) {

}

@media only screen and (min-width: 1240px) {

}

@media only screen and (min-width: 1320px) {

}

@media only screen and (min-width: 1900px) {  
 
}