/* Author: RON GRIFFO */
/* Version: TND V1 */
/* Global CSS */

body { margin: 0; padding: 80px 0 0; background: #FFF; line-height: 1.8em; font-size: 16px; font-family: 'Open Sans', sans-serif; color: #494949; min-height: 100%; }
*, *:before, *:after { box-sizing: border-box; }
.btn, button { border-radius: 3px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; font-family: 'OpenSans', sans-serif; cursor: pointer; color: #ffffff; background: #0c5b9f; font-size: 16px; padding: 15px 25px; font-weight: 600; border: 0 none; letter-spacing: 0.05em; text-align: center; }
.btn:hover { background: #358bd6; }
button:hover { background: #358bd6; }
h1, h2, h3, h4, h5 { font-family: "Raleway", san-serif; color: #494949; font-weight: bold; color: #494949; }
h1, .intro .subHead { font-size: 57px; }
h2 { font-size: 40px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; line-height: 27px; }
a { color: #0c5b9f; text-decoration: none; outline: none; }
#main { margin: 0 auto; padding: 0; overflow: hidden; }
.contentWrap { width: 1300px; margin: 40px auto 40px; color: #494949; overflow: hidden; }
.inner { width: 1300px; margin: 0 auto; }
input, textarea { font-family: 'OpenSans', 'Helvetica Neue', Helvetica, Arial, sans-serif; border-radius: 3px; font-size: 16px; background: #FFF; border: 1px solid #ccc; padding: 15px 20px; width: 100%; margin: 0 0 20px; }
.btn.secondary { font-family: 'OpenSans', sans-serif; border: 2px solid #0c5b9f; cursor: pointer; color: #ffffff; background: transparent; font-size: 13px; padding: 15px 40px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 33px; -moz-border-radius: 33px; -khtml-border-radius: 33px; -webkit-border-radius: 33px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; }
.btn.secondary:hover { background-color: #0c5b9f; color: #FFF; transform: scale(1.07); -ms-transform: scale(1.07); -webkit-transform: scale(1.07); }
#main.contentPage { font-size: 16px; line-height: 1.6em; font-family: "Open Sans", sans-serif; }
.noList { list-style: none; padding: 0; margin: 0; }
.sep { border-bottom: 2px solid #6cd800; border-right: 0; border-left: 0; width: 100px; border-top: 0; margin: 0 auto 40px; }
.threeCols li { padding: 0 10px; min-height: 500px; }
.threeCols strong { text-align: center; display: block; font-size: 18px; margin: 0 0 10px; }
.threeCols .women { width: 180px; margin: 0; }
p.heroIntro { margin: 70px 0 -20px; font-size: 20px; color: #666; }
.sectionTitle { font-weight: 200; font-size: 2.2rem; padding-bottom: 30px; margin: 20px 0 42px; line-height: 1em; text-align: center; width: 100%; position: relative; }
.sectionTitle:after { content: ""; display: block; background: #0c5b9f; height: 2px; width: 80px; margin-left: -40px; top: 100%; left: 50%; position: absolute; }
.feature#contact { text-align: center; background: #F2F2F2; margin: 0; padding: 30px 15px; }
form.contactForm { width: 470px; margin: 60px auto; text-align: left; }
form.contactForm label { font-weight: 600; }

/* Device Navigation */
.mobNav { display: none; }
.mobNav li { cursor: pointer; list-style: none; background: #2765d8 none repeat scroll 0 0; border-bottom: 1px solid #1a52b2; border-top: 1px solid #2870ed; color: #fff; display: block; width: 100%; }
.navOpen { left: 70%; width: 70%; position: absolute; z-index: 888888; top: 52px; }
#panelToggle { height: auto; }
#panelToggle.navOpen .mobNav { display: block; z-index: 9; background: #FFF; height: 100%; width: 300px; position: fixed; left: 0; top: -35px; }
.navOpen, .panelOpen { left: 300px; }
.mobNav a { width: 100%; display: block; padding: 20px; border-bottom: 1px solid #eee; }
.mobNav a:hover { background: #eee; }
.social a { font-size: 30px; margin: 0 5px 0 0; }

/* Gallery */
#gallery img { width: 100%; border-radius: 4px; }
ul.noList.gallery { width: 1300px; margin: 70px auto; text-align: center; column-count: 4; line-height: 3; }

/* Header */
header { height: 100px; top: 0; width: 100%; background: #FFF; position: fixed; z-index: 5; }
header .fa-bars { color: #0c5b9f; font-size: 24px; float: left; margin: 38px 22px 0 25px; display: none; cursor: pointer; }
nav { float: right; margin: 35px 0 0; }
nav a { color: #0c5b9f; margin: 0 25px 0 0; text-transform: uppercase; font-family: "Raleway", sans-serif; font-weight: 500; letter-spacing: 0.08em; font-size: 16px; }
nav a:hover { color: #0c5b9f; }
nav a:last-child { margin-right: 0; }
.logo { margin: 15px 0 0; width: 260px; float: left; }
.logo img { width: 100%; }
.icon-logo, .icon-logo-footer { float: left; width: 130px; margin: 20px 5px; height: 60px; }
.icon-logo-footer { float: none; margin: 0; }

/* Info Section  */
.feature { position: relative; width: 100%; background: #F2F2F2; float: left; height: auto; margin: 0 0 50px; text-align: center; padding-bottom: 50px; }
.feature img { width: 11%; margin: 36px 2.29% -50px; opacity: 0.8; }
.badge { text-align: center; background: #0c5b9f; color: #FFF; width: 300px; margin: 0 auto; text-transform: uppercase; font-family: "Raleway", sans-serif; font-weight: bold; font-size: 18px; position: absolute; left: 0; right: 0; padding: 10px; top: -20px; }
.feature.dark { background: url(../img/subtle-prism.png); margin-bottom: 40px; text-align: center; }

/* Team */
.teamPic { width: 250px; border-radius: 50%; box-shadow: 10px 10px 18px #ccc; }

/* About Section  */
a.btn.videoBtn { margin: 10px 0 30px; float: left; }
.threeCols { column-count: 3; clear: both; column-gap: 2em; margin: 30px 0 0; }
.threeCols img { width: 100%; margin: 10px 0 0; }

/* At A Glance  */
.feature.dark.glance { margin-bottom: 0; }
.feature.dark.glance .badge { width: 270px; }
.feature.dark.glance .placeholder { height: 600px; }

/* Icon Modules/Token Features */
.iconModule li { min-height: 300px; color: #ccc; float: left; width: 33.3%; padding: 20px; text-align: center; margin: 0 0 30px; }
.iconModule li img { width: 80px; display: block; margin: 0 auto 20px; }
.iconModule h4 { margin: 0 0 10px; color: #FFF; }
.feature.dark.tokenFeatures { padding: 50px 0 30px; }

/* Expandable Panels */
.boxExpand .panelVisible, .panel { cursor: pointer; position: relative; background: #F2F2F2; margin: 20px 0 0; }
.boxExpand.noExpand { color: #494949; }
.boxExpand { clear: both; }
.boxExpand:last-child { margin-bottom: 20px; }
.panelVisible strong, .panel { padding: 20px 60px 20px 30px; width: 100%; display: block; margin: 0; }
.panelVisible.active strong { margin: 0; }
.panelVisible.active { background: #0c5b9f; color: #FFF; }
.panelVisible.active .fa { color: #FFF; }
.boxExpand .panelHidden { display: none; margin: 0; padding: 30px; background: #F2F2F2; }
.boxExpand .fa { color: #0c5b9f; font-size: 24px; position: absolute; right: 27px; top: 23px; }
.panelVisible.active .fa { -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; }

/* Contact Modal */
.white-popup h3 { font-size: 24px; border-bottom: 3px solid #eee; padding: 0 0 10px; }
.white-popup .mfp-close { width: 37px; }
.white-popup button { width: 100%; }
.white-popup p { line-height: 1.6em; color: #494949; }
.white-popup { z-index: 900000000000000; position: relative; background: #FFF; width: auto; max-width: 420px; margin: 20px auto; padding: 10px 40px 40px 30px; }
.white-popup input[type=text], .white-popup input[type="password"], .white-popup input[type="tel"], .white-popup textarea { font-size: 16px; width: 100%; border: 1px solid #ccc; padding: 15px 20px; margin: 0 0 20px; }
.white-popup textarea { margin: 0 0 15px; }
#contactModal.white-popup { padding: 10px 30px 30px; }

/* Hero */
.hero { width: 100%; height: 600px; padding: 180px 15px; background: url(../img/hero-1.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center 80px; color: #FFF; }
.hero form { width: 700px; position: relative; margin: 0 auto; height: 55px; }
.hero h1 { margin: 0; display: block; font-size: 50px; line-height: 1.4em; width: 650px; color: #FFF; }
.hero p { margin: 10px 0 20px; font-size: 18px; font-weight: normal; }
.hero input { width: 100%; height: 100%; }
.hero .inner { text-align: left; padding: 0 5px; }
.hero ul { padding: 0 20px; }
.hero .btn { margin: 10px 0 0; display: inline-block; }
.hero form button { border-radius: 0; position: absolute; right: 0; top: 0; height: 100%; font-size: 18px; width: 55px; padding: 0; }
a.btn.contact.secondary.open-popup-link { border: 2px solid #FFFFFF; }
a.btn.contact.secondary.open-popup-link:hover { background: none; border: 2px solid #0c5b9f; transform: none; -ms-transform: none; -webkit-transform: none; }
.hero .btn { margin-right: 10px; }

/* Info Heros */
.infoHero.hero { overflow: hidden; padding: 0; }
.infoHero .contentWrap { margin: 0 auto; color: #FFF; padding: 60px 15px; }
.infoHero .contentWrap h3 { color: #FFF; }

/* Team */
.teamList li { float: left; width: 33.3%; padding: 20px; text-align: center; margin: 0 0 30px; }
.teamList li img { width: 100px; display: block; margin: 0 auto 20px; }
.teamList .circle { border-radius: 50%; }
.teamList h4 { margin: 0; }
.teamList h5 { font-size: 14px; font-weight: normal; margin: 0; color: #999; }
#aboutSection { padding-bottom: 10px; }

/* Menu Read */
#menu strong { display: block; }
#menuRead p { width: auto; margin: 20px 0; }
#menuRead p .fa { color: #0c5b9f; font-size: 10px; overflow: hidden; margin: 0 0 0 4px; }
#menuRead.hero, .infoHero#business { background: url(../img/lightpaperfibers.png); height: auto; background-repeat: repeat; background-attachment: fixed; }
#menuRead ul { padding: 0; list-style: none; }
.menuTitle { font-size: 18px; margin: 30px 0 20px; }
.cost { margin: 10px 0 0; }
.infoHero#menuRead .contentWrap { color: #494949; }
.infoHero#menuRead .contentWrap h3 { color: #0c0c0c; }

/* Participate */
#contact .btn { display: inline-block; margin: 10px 0 30px; }

/* How It Works */
#how h4 { font-size: 20px; margin-bottom: 0; font-weight: 500; }
#how p { margin-top: 0; }
#how .fas { color: #0c5b9f; margin: 0 5px 0 0; }
#how .half .btn { display: block; text-align: center; }
#how .btnBox { border-top: 1px dotted #ccc; padding-top: 30px; }

/* Split Col */
.split { padding: 0; overflow: hidden; }
.split .half { color: #666; width: 48%; height: auto; float: left; margin: 0 4% 0 0; list-style: none; text-align: center; }
.split .half h3 { margin: 15px 0 5px; border: 0 none; float: none; text-align: center; padding: 0; font-weight: 600; font-size: 22px; text-transform: uppercase; }
.split li:last-child { margin-right: 0; }
.split li ul { padding: 0; list-style: none; }
.split li ul li { margin: 0 0 20px; width: 100%; padding-bottom: 30px; border-bottom: 3px solid #66CC00; float: left; }
.split div:last-child { margin-right: 0; }

/* Gellery */

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img { padding: 0; }

/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after { top: 0; bottom: 0; }

/* padding for main container */
.mfp-no-margins .mfp-container { padding: 0; }

/* 

for zoom animation 
uncomment this part if you haven't added this code anywhere else

*/

/*

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}
*/

/* Footer */
footer { background: #292929; color: #FFFFFF; float: left; width: 100%; clear: both; bottom: 0; position: relative; padding: 40px 15px 50px; }
footer a { color: #FFF; }
footer img { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ }
footer a:hover { color: #eee; }
footer ul { width: 23%; list-style: none; margin: 0 5% 0 0; padding: 0; float: left; line-height: 1.8em; }
footer ul li:first-child { text-transform: uppercase; display: block; color: #FFF; font-size: 16px; margin: 0 0 20px; font-family: "Raleway", sans-serif; font-weight: 600; letter-spacing: 0.05em; }
footer .logo { margin: 0; }
.help { width: 100%; background: #111111; text-align: center; padding: 50px 15px 60px; }
.help h3 { color: #FFF; font-size: 27px; font-weight: normal; margin: 0 0 45px; line-height: 1.4em; }

/* Media Queries */
@media (max-width:1300px) {
	.hero form { width: 90%; }
	.inner, .contentWrap { width: 100%; }
	.contentWrap { padding: 0 15px; }
	header nav { margin-right: 30px; }
	.hero { background-attachment: scroll; background-position: center center; }
	ul.noList.gallery { width: 100%; padding: 20px; }
}

/* Hide Navigation Mobile for Desktop */
@media (min-width:1065px) {
	#panelToggle.navOpen .mobNav { display: none; }
	#panelToggle.navOpen { left: 0; width: 100%; }
}
@media (max-width:1065px) {
	header nav { display: none; }
	header .fa-bars { display: block; }
}
@media (max-width:980px) {
	#menuRead.hero { background-attachment: scroll; }
	.feature img { width: 20%; }
}
@media (max-width:800px) {
	.navOpen .hero { background-size: cover; }
}
@media (max-width:767px) {
	.split .half { width: 100%; margin: 0 0 30px; }
	footer ul.noList { width: 100%; margin: 0 4% 30px 0; text-align: center; }
	footer ul.noList.social { width: 182px; margin: 0 auto; float: none; }
	footer ul.noList.social li a { float: none; margin: 0 5px; }
	footer .social li:last-child a { margin: 0; }
	ul.copyright { width: 100%; text-align: center; margin: 0 0 30px; }
	.teamList li { width: 50%; }
	.hero h1, .hero p { width: 100%; }
	#how .row, #how .half { width: 100%; }
	.iconModule li { width: 50%; }
	.half.plan { margin-top: 30px; }
	ul.noList.gallery { column-count: 2; }
}
@media (max-width:680px) {
	.hero { height: auto; padding: 55px 15px; }
	.hero h1 { font-size: 54px; }
	#featured li { width: 100%; margin: 0 5% 30px 0; }
	.teamList li { width: 100%; }
	.iconModule li { width: 100%; }
	.hero .btn { margin-right: 0; width: 100%; }
	.hero .btn:first-of-type { margin-bottom: 10px; }
	.feature img { width: 40%; }
	.threeCols { column-count: 1; column-gap: 0; }
	.threeCols li { min-height: auto; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
	.threeCols .women { margin: 10px 0 0 -5px; }
	.threeCols p { margin-bottom: 0; }
	form.contactForm { width: 100%; }
}
@media (max-width:480px) {
	.hero { height: auto; padding: 50px 15px 60px; }
	.hero h1 { font-size: 34px; }
}
@media (max-width:380px) {
	.logo { margin: 25px 0 0; width: 190px; }
}
@media (max-width:340px) {
	ul.noList.gallery { column-count: 1; }
}