/* General Blueprint Style */ @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;margin:0;padding:0; } body, html { font-size: 100%; padding: 0; margin: 0;} .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearBoth {clear:both;} a:hover {text-decoration:underline;} body {font-family: 'Lato', Calibri, Arial, sans-serif;color: #fff;background: #47a3da;} .pageWrapper {border-top:solid 80px #ffffff;overflow: hidden;} /*###################################################### HEADER */ .header {position:fixed;border-bottom:solid 2px #256f79;background: rgba(255,255,255,0.8);top:0;left:0;width:100%;height:80px;padding:10px;z-index:50999;} #logo {width:60px;display:block;float:right;} #logo img {max-width:100%;} #logo:hover {opacity:0.7} .marker {top: 0;left: 0;width: 100%;position:absolute;top:200px;border: 0px solid #ccc;} .lineArt {position:absolute;text-align:center;width:100%;overflow:hidden;display:none;} .svgWrapper {position:relative;width:500px;left:50%;margin-left:-250px;} .lineArt svg {width:100%;} .timelineZone .theWho p {font-size:17px;} .timelineZone .theWho h2 {color:#256f79;font-size:22px;} /*###################################################### NAVIGATION */ nav {float:left;} nav ul {display:inline-block;margin-top:15px;} nav ul li {display:inline-block;} nav ul li a {color:#5e7c9d;padding:8px 10px;font-size:13px;text-decoration:none;} nav ul li a:hover {background:#256f79;color:#ffffff;text-decoration:underline;} #nav-trigger {display: none;width:10%;float:left;padding:30px 25px 0 0;text-align:right;height:45px} #nav-trigger span {display: inline-block;color: #256f79;cursor: pointer;text-transform: uppercase; } nav#nav-mobile {position: relative;display: none;z-index:110 } nav#nav-mobile ul {display: none;top:10px;text-align: center;z-index:110;width:100%;list-style-type: none;position: relative;text-align: center;background-color: #256f79; } nav#nav-mobile li {display: block;border-bottom: solid 1px #ffffff; } nav#nav-mobile li:last-child {border-bottom: none; } nav#nav-mobile a {display: block;line-height:25px;color:#ffffff; } nav#nav-mobile {position: relative;display: none; } nav#nav-mobile li {display: block;padding: 5px 0;margin: 0 5px;border-bottom: solid 1px #ffffff; } nav#nav-mobile li:last-child {border-bottom: none; } nav#nav-mobile a {display: block;color: #ffffff;padding: 10px 30px; } nav#nav-mobile a:hover {color: #fff; } .error {background:red;position:fixed;top:80px;width:100%;text-align:center;height:auto;color:#ffffff;z-index:120002;padding:10px 0;} .error a {color:#ffffff!important;} h1 {font-size:1px;color:#256f79;} .logo {max-width:450px;/*-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-name: bounceIn;animation-name: bounceIn;*/margin:-40px 50px 0 0;z-index:2;float:right;} .logo img {width:100%;} #contact p a {color:#256f79} #introduction h2 {clear:right;float:right;font-size:32px;font-weight:bold;width:450px;margin-right:50px;text-align:center;} /*###################################################### ROTATING TEXT FIRST SLIDE */ .rslides {margin: 0 auto 0;clear:both;position: absolute;list-style: none;overflow: hidden;width: 100%;padding: 0;margin: 0;left:0;background: url(../../pix/header.jpg) no-repeat right top;z-index:-1;} .rslides li {-webkit-backface-visibility: hidden;text-align:center;position: absolute;display: none;width: 100%;height:600px;left: 0;top: 0;font-weight:bold;font-size:3em;border-bottom:solid #256f79 3px;} .overlay {position: absolute;color:#40919c;list-style: none;overflow: hidden;width: auto;height:auto;padding: 8px 50px;margin: 0;bottom:0;z-index:10;background:#256f79;font-family: 'Lato', Calibri, Arial, sans-serif;font-weight:normal;right:0;font-size:20pt;border-top-left-radius:50px;} .rslides li:first-child {position: relative;display: block;float: left;} .overlay h2 {font-size:28px;color:#ffffff;} /*###################################################### HORIZONTAL ZONES */ .timelineZone {min-height:800px;padding-top:80px;z-index:1} .timelineZone:before, .timelineZone:after {content: " ";display: table;} .timelineZone:after {clear: both;} .timelineZone h2 {font-size: 5em;font-weight: 300;line-height: 1;margin-bottom:20px;} .timelineZone p {font-size: 1.8em;font-weight: 300;} .white {background:#ffffff;min-height:0!important;} .green {background:#256f79;min-height:0!important;} .center {text-align:center} .white p {color:#256f79!important;} .white h3 {font-size:3.2em;color:#256f79!important} .fullZone2 {max-width:1200px;text-align:center;margin:0 auto;} /*###################################################### ZONES */ #introduction {text-align:center;margin:0 auto;height:inherit;z-index:2;min-height:600px} #point1 {background:#ffffff;color:#256f79;height:inherit;} #point2 {background:#256f79;} #point3, #point5 {background:#ffffff;color:#256f79;height:inherit;} #point4 {background:#256f79;} #point4 img {float:right;} #point4 .about {text-align:left;margin:0 auto;width:80%;font-size:9pt;} #point4 .about p {margin:8px 0;} #point6 {background:#256f79;} #point6 .about ul {list-style-position:inside;} #point6 .about ul li {font-size:2em;font-weight:300;} #point6 .about h3 {font-size:18pt;margin-top:10px;} #point6 .halfZoneLeft .about img {margin-left:20px;margin-bottom:30px;} #point6 .halfZoneLeft h3 {clear:both;} #contact {background: #ffffff url(../../pix/contact.png) no-repeat left bottom;color:#256f79} #contact .halfZoneLeft {padding:3em 4% 0 0} #contact .input {background:#256f79;color:#ffffff;} .bot {text-align:center;width:50%;display:inline-block;} .bot div {margin:0 auto;display:inline-block;} .timelineZone #bgvid {max-width:850px;width:75%;margin:0 auto;text-align:center;} #point5 .halfZoneLeft, #point5 .halfZoneRight {text-align:center;} #point5 .halfZoneLeft p, #point5 .halfZoneRight p {width:90%;margin:0 auto;} .fullZone {width:100%;text-align:center;} .fullZone h2 {background:#ffffff;position:relative;z-index:16001} #point4 h2, #point4 p {background:#256f79;color:#ffffff;} .fullZone h3 {background:#256f79;position:relative;z-index:16001;font-size:5em;font-weight:300;} #point6 .fullZone h3 {position:relative;z-index:16001;font-size:5em;font-weight:300;} #point6 .about {font-size: 9pt;margin: 0 auto;text-align: left;width: 80%;} #point6 .moreinfo {} #point6 .moreinfo a {} .alex p, .adam p {margin:5px 0;} .about h3 {font-size:2em;} .fullZone p {background:#ffffff;position:relative;z-index:16001} .fullZone figure p {font-size:16pt;} .halfZone {width: 50%;float: left;margin: 0;padding: 3em 4% 0 4%;min-height: 12em;-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;-moz-transition: -moz-transform 0.5s, opacity 0.5s;transition: transform 0.5s, opacity 0.5s;} figure.halfZone {width: 50%;float: left;margin: 0;padding: 3em 0 0 0;min-height: 12em;-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;-moz-transition: -moz-transform 0.5s, opacity 0.5s;transition: transform 0.5s, opacity 0.5s;} /* Clear floats of children */ .halfZone:before, .halfZone:after {content: " ";display: table;} .halfZone:after {clear: both;} .halfZoneRight {text-align: left;} .halfZoneLeft {text-align: right;} .halfZoneRight img {float: right;} .halfZoneLeft img {float: left;} .about a {color:#ffffff;text-decoration:none;} .max img {width:100%;} /*###################################################### CONTACT */ .input {width:50%;padding:10px 10px;margin:12px 0;font-size:16px;font-family: 'Lato', Calibri, Arial, sans-serif;} .button {background:#256f79;color:#ffffff;border:none;box-shadow:none;} .contactUs {background:#256f79;color:#ffffff;border:none;box-shadow:none;margin-top:20px;padding:10px 25px;line-height:30px;width:200px;float:right;text-align:center} .contactUs a {color:#256f79;text-decoration:none;} .contactUsW {background:#ffffff;color:#256f79;border:none;box-shadow:none;margin-top:20px;padding:10px 25px;line-height:30px;width:200px;float:left;text-align:center} .contactUsW a {color:#256f79;text-decoration:none;} #point4 .contactUsMain {display:inline-block;position:relative;background:#ffffff;color:#256f79;border:none;box-shadow:none;margin-top:20px;padding:10px 25px;line-height:30px;width:400px;text-align:center;z-index:50100;margin-bottom:30px;} .contactUsMain {display:inline-block;position:relative;background:#256f79;color:#ffffff;border:none;box-shadow:none;margin-top:20px;padding:10px 25px;line-height:30px;width:400px;text-align:center;z-index:50100;margin-bottom:30px;} .contactUsMain a {color:#ffffff;text-decoration:none;} #point4 .contactUsMain a {color:#256f79;text-decoration:none;} #point1 .contactUs a {color:#ffffff;} #point2 .contactUs {float:left;background:#ffffff;} #point2 .contactUs a {color:#256f79} #point3 .contactUs a {color:#ffffff;} /*###################################################### POPUPS - ANIMATION */ .blocker {-webkit-transition: opacity .5s;-moz-transition: opacity .5s;-ms-transition: opacity .5s;-o-transition: opacity .5s;transition: opacity .5s;} .solutions1, .solutions2, .solutions3 {-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -webkit-transition: opacity .5s, top .5s;-moz-transition: opacity .5s, top .5s;-ms-transition: opacity .5s, top .5s;-o-transition: opacity .5s, top .5s;transition: opacity .5s, top .5s;} /*###################################################### POPUPS - CONTROL */ .blocker {background-color: rgba(0, 0, 0, 0.6);bottom: 0;cursor: default;left: 0;opacity: 0;position: fixed;right: 0;top: 0;visibility: hidden;z-index: 1;z-index:56001;} .blocker:target {visibility: visible;opacity: 1;} .solutions1, .solutions2, .solutions3 {background-color: #ffffff;border: 6px solid #256f79;display: inline-block;left: 50%;opacity: 0;padding: 15px;position: fixed;text-align: center;top: 40%;visibility: hidden;z-index: 56002;width:70%;color:#256f79;overflow-y:scroll;overflow-x:hidden;height:80vh;font-size:15pt;} .solutions1 a, .solutions2 a, .solutions3 a {font-size:13pt;} .solutions1 h2, .solutions2 h2, .solutions3 h2 {background:#256f79;color:#ffffff;padding:10px 0;margin:0 0 10px 0;} .blocker:target+.solutions1, .blocker:target+.solutions2, .blocker:target+.solutions3 {top: 50%;opacity: 1;visibility: visible;} .solutions1 .contactUs, .solutions2 .contactUs, .solutions4 .contactUs {position:relative;width:400px;display:inline-block;float:none;clear:both;margin-bottom:30px;} .close {background-color: rgba(0, 0, 0, 0.8);height: 30px;line-height: 30px;position: absolute;right: -1px; text-align: center;text-decoration: none;top: 0;width: 30px;z-index:56002;} .close:before {color: rgba(255, 255, 255, 0.9);content: "X";font-size: 24px;text-shadow: 0 -1px rgba(0, 0, 0, 0.9);} .close:hover {background-color: rgba(64, 128, 128, 0.8);} .closer {width:100%;position:fixed;top:0;background: rgba(0,0,0,0.6);z-index:56003;text-align:center;padding:5px 0;} .closer a {color:#ffffff;} a.start {line-height:167px;height:167px;width:75px;display:block;} .moreinfo {width:300px;background:#ffffff;padding:10px 25px;margin:20px auto;text-align:center;} .moreinfo a {color:#256f79} /*###################################################### POPUPS - CONTENT */ .box {width:95%;float:left;margin:0 1.5%;font-size:15pt;text-align:left;margin-bottom:50px;} .box img {max-width:200px;float:left;margin-right:20px;} /*###################################################### FOOTER */ footer {background:#256f79;width:100%;color:#ffffff;display:inline-block;height:100px;padding:25px 0;font-size:14px;line-height:20px;} .footerLeft {float:left;width:50%;padding-left:2%;overflow:hidden;} .footerRight {float:right;width:50%;padding-right:2%;overflow:hidden;text-align:right} footer a {color:#ffffff} @media all and (max-width: 1440px) { .solutions1, .solutions2, .solutions3 {width:90%;} .logo {max-width:350px;} } @media all and (max-width: 1240px) { #introduction h2 {font-size:32px;width:450px;margin-right:50px;text-align:center;} .overlay h2 {font-size:24px;color:#ffffff;} .rslides {background: url(../../pix/header.jpg) no-repeat right top;} } @media all and (max-width: 1040px) { #introduction h2 {font-size:28px;width:350px;margin-right:50px;text-align:center;} .overlay h2 {font-size:24px;color:#ffffff;} .rslides {background: url(../../pix/header.jpg) no-repeat right top;} } @media all and (max-width: 770px) { #introduction h2 {font-size:28px;width:350px;margin-right:50px;text-align:center;float:none;margin:0 auto;} .overlay {width:100%;border-top-left-radius:0} .overlay h2 {font-size:20px;color:#ffffff;} .rslides {background: url(../../pix/header.jpg) no-repeat right top;} .logo {margin:0 auto; float:none;} } @media all and (max-width: 770px) { .rslides {} } @media all and (max-width: 900px) { #nav-trigger {display: block;z-index:10000; } nav#nav-main {display: none; } nav#nav-mobile {display: inline-block;width:100%;float:left;} .svgWrapper, .blink_me {display:none;} .halfZoneRight, .halfZoneLeft {text-align: center;} .contactUs, .contactUsW {float:none;margin:20px auto;} .timelineZone {padding-top:0px;} .timelineZone h2 {font-size:3em;} #point3 #bgvid {max-width:850px;width:90%} #point5 #bgvid {max-width:850px;width:90%} .box {width:95%;clear:both;} .solutions1, .solutions2, .solutions3 {max-height:95%;overflow-y:scroll;overflow-x:hidden;} .solutions1 .contactUs, .solutions2 .contactUs, .solutions3 .contactUs {width:95%;} #contact {background: #ffffff;color:#256f79} .input {width:90%;} .logo {margin:70px auto 0 auto;} .green figure.halfZone, .white article.halfZone, .green article.halfZone, .white figure.halfZone, .theWho {width:90%!important;margin:0 auto;float:none;} .green img, .white img {float:none;} } .tooltip {position: relative;display: inline-block;background:#256f79;width:30px;height:30px;top:0;border-radius: 1em;-moz-border-radius: 1em;-webkit-border-radius: 1em;line-height: 30px;text-align: center;margin-right:15px;} .tooltip img {width:26px;height:30px;padding:3px 0 4px 3px;} /* INLINE TEXT*/ .tooltip .tooltiptext {visibility: hidden;width: 300px;background-color: #555;color: #fff;text-align: center;padding: 15px 10px;border-radius: 6px;position: absolute;z-index: 55000;bottom: 125%;left: 50%;margin-left: -150px;opacity: 0;transition: opacity 1s;font-size:80%;} /* ARROW */ .tooltip .tooltiptext::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #555 transparent transparent transparent;z-index:5000} /* SHOW ONHOVER */ .tooltip:hover .tooltiptext {visibility: visible;opacity: 1;z-index:5000} .tooltiptext {z-index:50001;} #consent {display:none;} #CancelButton {margin-bottom:15px;} .gdterms {max-width:50%;display:inline-block;clear:both;} .gdterms p {font-size:16px;} @media all and (max-width: 700px) { #introduction {background-image:none;} .remove {display:none!important;} .rslides {background: #ffffff;} .gdterms {max-width:80%;width:100%;} }