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

/* Colours
red: #db1010;
blue: #1d9ab1;
grey: #6f6b6b;	
dark grey: #2e2d2d;

*/

@-moz-viewport { width: device-width; scale: 1;}
@-ms-viewport { width: device-width; scale: 1;}
@-webkit-viewport { width: device-width; scale: 1;}
@-o-viewport { width: device-width; scale: 1;}
@viewport { width: device-width; scale: 1;}

*, *:before, *:after {
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
    text-size-adjust: 100%;
	font-family: 'Open Sans', sans-serif;
	color: #000000;
    cursor: pointer;
}

body {
    margin: 0;
}

a {
	display: inline-block;
	text-decoration: none;
	color: #fff;
}

.nf {
    position: absolute;
    top: 8%;
    right: 2rem;
    z-index: 5;
    width: 46%;
    max-width: 40rem;
    
}


div.fancybox-opened{
     transition: none;
}

/* ---------- br {
    display: none;
} ------------------------------------------------------------------ */

.deck {
    font-family: 'Playfair Display', serif;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    max-width: 34.5rem;
}

.deck-hr {
    margin: auto;
    border-color: #1d9ab1;
}

.lanier-hr {
    margin: .25rem auto .5rem;
    border-color: #1d9ab1;
    width: 70%;
}

.lanier-rt-img {
    margin: auto;
    display:block;
    padding:1rem 1rem .25rem;
}

.quote {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    line-height: 2.25rem;
    text-align: center;
    margin: 2rem auto;
    max-width: 33rem;
    color: #136b77;
}

.fadein, .fadein-slow {
  opacity: 0;
   
}

.img-flex {
    width: 100%;
    background-size: cover;
    margin: 1rem auto;
}


.timer-set, .timer-set li {
  display: inline;
  font-size: 3.5rem;
  color:#e0e0e0;
  margin: -.5rem;
}

.close {
    color: #000000;
    text-align: center;
    font-size: 1.5rem;
    border: 1px solid #000000;
    padding: .85rem 1rem;
    max-width: 20rem;
}

/* ---------- Transitions ------------------------------------------------------------------ */

.ease-all, .creds, .creds:hover, .creds-2:hover {
	-webkit-transition: all 450ms ease-in-out;
	-moz-transition: all 450ms ease-in-out;
	-ms-transition: all 450ms ease-in-out;
	-o-transition: all 450ms ease-in-out;
	transition: all 450ms ease-in-out;
}

 
/* ---------- Section Styles --------------------------------------------------------------- */

   .section-home {
	
	height: 43rem;
	padding-top: 10rem;
    margin-bottom: 5rem;
}

.canvas {
    position: absolute;
}



video#bgvid { 
    position: fixed;
    top: 20%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(images/black.jpg) no-repeat;
    background-size: cover; 
}
       
    .cold-fact {
    float: right;
    color: #6f6b6b;
    
    padding: 1rem;
    width: 15rem;
    margin: 1rem 5rem 1rem 1rem;
    border-radius: 5px;
    -webkit-box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
    -moz-box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
    box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
}
   .map-fact {
    z-index: 30;
    right: 0;
    margin-top:-.75rem;
    background-color: #FFFFFF;
    position: absolute;
    color: #6f6b6b;
    padding: 1rem;
    width: 15rem;
    border-radius: 5px;
    -webkit-box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
    -moz-box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
    box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
}

    .audiobox {
    color: #6f6b6b;
    padding: .25rem 1rem 2rem .5rem;
    max-width: 33rem;
    margin: 2rem auto;
    border-radius: 5px;
    -webkit-box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
    -moz-box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
    box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
}

 .profilebox {
     background-color: #ffffff;
    color: #6f6b6b;
    padding: 1rem 1.5rem 1.5rem 11rem;
    max-width: 40rem;
    margin: 2rem auto;
    border-radius: 5px;
    -webkit-box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
    -moz-box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
    box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
}

.profilebox p, .profilebox h6 {
    padding:0;
    margin: 0;
    
}

.cred-h1 {
    font-size:1.5rem;
    color:#000000;
    text-transform:uppercase;
}

.cred-img {
    width: 20rem;
    margin: -3rem -4rem -4rem;
}

.creds, .creds-2 {
    height: 15rem;
    width: 15rem;
    background-color: #63aeb4;
    margin: auto;
}

.creds-2 {
    background-color: #389096; 
}

.creds p, .creds-2 p {
    text-align: center;
    color: #FFFFFF;
    text-transform: uppercase;
    font-size: 1.25rem;
    padding-top: 11rem;
    width: 100%;
}

.creds img, .creds-2 img {
    position: absolute;
    width: 13rem;
    margin: 1rem;
    margin-top: -.05rem;
}

.creds:hover, .creds-2:hover{
    background-color: #10575d;
}

.max {
    max-width: 20rem;
}

.scroll-btn {
    width:10rem;
    display:block;
    margin: auto;
    bottom: 1rem;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.scroll-btn:hover {
    width: 12rem;
}

.helper {
    position: absolute;
    z-index: 60;
    bottom: 4rem;
    margin-left: 4rem;
    max-width: 14rem;
    opacity: 0;
      -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

/* ---------- Type ------------------------------------------------------------------------- */


h1, h2, h3, h4, h5, h6,
p, ol, dl, dd, figure,
blockquote, details, hr,
fieldset, pre, table {
  margin: 0 0 1.5rem;
}

p {
    text-align: left;
    line-height: 1.5rem;
    font-size: rem;
    max-width: 43rem;
    margin: 1rem auto;
    padding: 0 1.5rem;
}

.yotta {
  font-size: 7.4784rem;
  line-height: 1.0029;
}

.zetta {
  font-size: 5.6102rem;
  line-height: 1.0695;
}

h1, .exa {
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 0rem;
    margin-top: 5rem;
    text-align: center;
    color: #ffffff;
    letter-spacing: .15rem;
}

h2, .peta {
    text-transform: uppercase;
    font-size: .84rem;
    line-height: 1.4;
    margin-bottom: .25rem;
    letter-spacing: .75rem;
    text-align: center;
    color: white;
   
}

h3, .tera {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: .75rem;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
}

h4, .giga {
    font-size: 1.7769rem;
    line-height: 1.6883;
    text-align: center;
    text-transform: uppercase;
}

h5, .mega {
    font-size: 1.25rem;
    margin: 1.5rem 0 0;
    color: #000000;
    padding-left: 1.5rem;
}

h6, .kilo {
  font-size: 1.1rem;
  line-height: 1.5000;
  font-weight: 400;
  color: #000000;
}

small, .milli {
  font-size: 0.7502rem;
  line-height: 1.9995;
}

.micro {
  font-size: 0.5628rem;
  line-height: 2.6653;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center, .text-center p {
  text-align: center;
}

.text-justify {
	text-align: justify;
}

.normal {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.push {
  margin-bottom: 1.5rem;
}

.push-none, .push-0 {
  margin-bottom: 0;
}

.push-double, .push-2 {
  margin-bottom: 3.0000rem;
}

.push-half, .push-1-2 {
  margin-bottom: 0.7500rem;
}

.pad-top, .pad-t {
  padding-top: 1.5rem;
}

.pad-bottom, .pad-b {
  padding-bottom: 1.5rem;
}

.pad-top-double, .pad-t-2 {
  padding-top: 3.0000rem;
}

.pad-top-triple, .pad-t-3 {
  padding-top: 4.5rem;
}

.pad-bottom-double, .pad-b-2 {
  padding-bottom: 3.0000rem;
}

.pad-top-half, .pad-t-1-2 {
  padding-top: 0.7500rem;
}

.pad-bottom-half, .pad-b-1-2 {
  padding-bottom: 0.7500rem;
}

.island {
  padding: 1.5rem;
}

.island-half, .island-1-2 {
  padding: 0.7500rem;
}

.island-double, .island-2 {
  padding: 3.0000rem;
}

.gutter-half, .gutter-1-2 {
  padding-left: 0.7500rem;
  padding-right: 0.7500rem;
}

.gutter-double, .gutter-2 {
  padding-left: 3.0000rem;
  padding-right: 3.0000rem;
}

/* ---------- Map + Captions ------------------------------------------------------------------------- */

.stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    background-color: #0f4e5a;
    color: #FFFFFF; 
    border-radius: 5px;
    position: absolute;
    top: 2rem;
    left: 1rem;
    z-index: 20;
    padding: 0rem .5rem .5rem 2.5rem;
}

.hover {
    width: 1.5rem;
    height: 1.5rem;
    background-color: #136676;
    color: #FFFFFF; 
    border-radius: 20px;
    position: absolute;
    top: 3rem;
    left: 1.5rem;
    z-index: 30;
     cursor: pointer;
}

.hover p {
    text-align: center;
    top: -1rem;
    position: relative;
    padding: 0;
}

.hover:hover + .stuff {
    opacity: 1.0;
}

.hover-2:hover + .thing-2, .hover-3:hover + .thing-3, .hover-4:hover + .thing-4, .hover-5:hover + .thing-5, .hover-6:hover + .thing-6, .hover-7:hover + .thing-7 {
    opacity: 1.0;
    z-index: 60;
}

.hover-2, .hover-3, .hover-4, .hover-5, .hover-6, .hover-7 {
    width: 5rem;
    height: 1.5rem;
    position: absolute;
    top: 6%;
    left: 12%;
    z-index: 30;
    -webkit-transition: all 450ms ease-in-out;
	-moz-transition: all 450ms ease-in-out;
	-ms-transition: all 450ms ease-in-out;
	-o-transition: all 450ms ease-in-out;
	transition: all 450ms ease-in-out;
}

.hover-2:hover, .hover-3:hover, .hover-4:hover, .hover-5:hover, .hover-6:hover, .hover-7:hover {
    width:6rem;
    
}

.hover-3 {
    top: 24%;
    left: 10%;
}

.hover-4 {
    top: 61%;
    left: 40%;
}

.hover-5 {
    top: 64%;
    left: 49%;
}

.hover-6 {
    top: 25%;
    left: 80%;
}

.hover-7 {
    top: 63%;
    left: 62%;
}

.thing-2, .thing-3, .thing-4, .thing-5, .thing-6, .thing-7 {
    opacity: 0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    background-color: #FFFFFF;
    color: #6f6b6b;
    border-radius: 5px;
    position: absolute;
    top: 9%;
    left: 20%;
    z-index: 20;
    padding: 0rem 1rem; 
    max-width: 18rem;
     -webkit-box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
    -moz-box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
    box-shadow: 2px 9px 51px -19px rgba(0,0,0,0.63);
}

.thing-2 p, .thing-3 p, .thing-4 p, .thing-5 p, .thing-6 p, .thing-7 p {
    text-align: left;
    top: -1rem;
    position: relative;
}

.thing-3 {
    top: 38%;
    left: 10%;
}

.thing-4 {
    top: -9%;
    left: 5%;
}

.thing-5 {
    top: -13%;
    left:10%;
}

.thing-6 {
    top: 15%;
    left: 8%;
}

.thing-7 {
    top: 1%;
    left: 5%;
}

.credit {
    color: #bebebe;
    font-size: .8rem;
}

@media only screen and (min-width: 28em) {
.hover-2 {
    top: 9%;
    left: 14%;
}    

.hover-3 {
    top: 28%;
    left: 11%;
}

.hover-4 {
    top: 65%;
    left: 40%;
}

.hover-5 {
    top: 70%;
    left: 49%;
}

.hover-6 {
    top: 30%;
    left: 80%;
}

.hover-7 {
    top: 69%;
    left: 62%;
}

.thing-4 {
    top: 12%;
    left: 5%;
}

.thing-5 {
    top: 12%;
    left:10%;
}

.thing-6 {
    top: 15%;
    left: 27%;
}

.thing-7 {
    top: 21%;
    left: 23%;
} 

.lanier-rt-img {
    float:right;
} 
    
}

@media only screen and (min-width: 29em) {
    .max {
    max-width: 34.5rem;
}
    
}

@media only screen and (min-width: 32em) {
.helper {
        opacity: 1;
    }
    .timer-set, .timer-set li {
    font-size: 5rem;
    }
}

@media only screen and (min-width: 44em) {
.hover-2 {
    top: 10%;
    left: 14%;
}    

.hover-3 {
    top: 29%;
    left: 11%;
}

.hover-4 {
    top: 66.5%;
    left: 40%;
}

.hover-5 {
    top: 71%;
    left: 49%;
}

.hover-6 {
    top: 31%;
    left: 80%;
}

.hover-7 {
    top: 70%;
    left: 62%;
}
    
.thing-4 {
    top: 37%;
    left: 15%;
}

.thing-5 {
    top: 40%;
    left:25%;
}

.thing-6 {
    top: 15%;
    left: 42%;
}

.thing-7 {
    top: 61%;
    left: 25%;
}  
    
.thing-2, .thing-3, .thing-4, .thing-5, .thing-6, .thing-7 {
    padding: auto 1.5rem;
}

    .helper {
        bottom: 8rem;
    }

    
}

@media only screen and (min-width: 50em) {
    
.hover-2 {
    top: 12%;
    left: 14%;
}    

.hover-3 {
    top: 30%;
    left: 11%;
}

.hover-4 {
    top: 68%;
    left: 41%;
}

.hover-5 {
    top: 72%;
    left: 49%;
}

.hover-6 {
    top: 32%;
    left: 80%;
}

.hover-7 {
    top: 71%;
    left: 63%;
}
    
}

@media only screen and (min-width: 57em) {
.hover-2 {
    top: 12%;
    left: 14.5%;
}    

.hover-3 {
    top: 31%;
    left: 11%;
}

.hover-4 {
    top: 69%;
    left: 41%;
}

.hover-5 {
    top: 73%;
    left: 49%;
}

.hover-6 {
    top: 33%;
    left: 80%;
}

.hover-7 {
    top: 72%;
    left: 62%;
}
    
    .helper {
        bottom: 15rem;
    }
    
}

@media only screen and (min-width: 61.7em){
  .max {
        max-width: 50rem;
    }
}


@media only screen and (min-width: 67em) {
        .hover-2, .hover-3, .hover-4, .hover-5, .hover-6, .hover-7 {
    width: 7rem;
    
    }
    
    .hover-2:hover, .hover-3:hover, .hover-4:hover, .hover-5:hover, .hover-6:hover, .hover-7:hover {
    width:8rem;
}
.hover-2 {
    top: 12%;
    left: 13%;
}    

.hover-3 {
    top: 30%;
    left: 9%;
}

.hover-4 {
    top: 71%;
    left: 42%;
}

.hover-5 {
    top: 72%;
    left: 49%;
}

.hover-6 {
    top: 31%;
    left: 78%;
}

.hover-7 {
    top: 72%;
    left: 64%;
}
    
.thing-4 {
    top: 47%;
    left: 15%;
}

.thing-5 {
    top: 50%;
    left:25%;
}

.thing-6 {
    top: 15%;
    left: 52%;
}

.thing-7 {
    top: 61%;
    left: 35%;
}  
    

}

@media only screen and (min-width: 85em) {
    
    .hover-2 {
    top: 13%;
    left: 13%;
} 
    
    .hover-3 {
    top: 31%;
    left: 10%;
}

.hover-4 {
    top: 73%;
    left: 43%;
}

.hover-5 {
    top: 75%;
    left: 49%;
}

.hover-6 {
    top: 32%;
    left: 79%;
}

.hover-7 {
    top: 72%;
    left: 64%;
}
    
.thing-4 {
    top: 57%;
    left: 20%;
}

.thing-5 {
    top: 56%;
    left:39%;
}

.thing-6 {
    top: 15%;
    left: 62%;
}

.thing-7 {
    top: 58%;
    left: 55%;
} 
     .helper {
        bottom: 25rem;
    }
    
}

@media only screen and (min-width: 100em) {
.hover-2 {
    top: 13%;
    left: 15%;
}    

.hover-3 {
    top: 32%;
    left: 10%;
}

.hover-4 {
    top: 74%;
    left: 43%;
}

.hover-5 {
    top: 77%;
    left: 49%;
}

.hover-6 {
    top: 33%;
    left: 80%;
}

.hover-7 {
    top: 73.5%;
    left: 64%;
}
    
.thing-4 {
    top: 67%;
    left: 28%;
}

.thing-5 {
    top: 60%;
    left:39%;
}

.thing-6 {
    top: 25%;
    left:60%;
}

.thing-7 {
    top: 63%;
    left: 55%;
} 
    
}


/* ---------- Footer --------------------------------------------------------------- */

.section-footer {
	background-color: #000;
	color: #FFF;
    margin-top: -1.5rem;
}

.section-footer li a:hover {
    text-decoration: underline;
}

#second, #closer {
    display:none;
}

#closer {
    position:relative;
    top:-4rem;
    left: 2rem;
}

.footer-content {
    max-width: 55rem;
    margin: auto;
}

.footer-text p {
    margin: 0;
    font-size: .75rem;
    line-height: 1.25rem;
    padding-bottom: .5rem;
    margin-bottom: .4rem;
    padding-left: 0;

}

hr {
    border-color: red;
    display: inline-grid;
    width: 120px;
    border-style: solid
}

ul {
    display: inline-table;
    margin-top: 0;
    width: 10rem;
    margin-bottom: .5rem;
}

ul li {
	list-style-type: square;
    font-size: .75rem;
    font-family: arial;
    padding-bottom: .75rem;
}

.bullet-hr {
    margin-left: 28px;
    width: 58px;
    display:block;
}

fieldset {
    border: none;  
    text-align: left;
}

.footer input {  
    width: 11.5rem;
    padding: .5rem 2.2rem .5rem .5rem;
    font-size: .8rem;
    border-radius: 3px;
    border: none;
}

.footer-bottom {
    background:url(../images/bg-add-section.png);
    padding: .75rem .5rem;
    margin: 1rem;
}

.footer-bottom ul, .footer-bottom ul li {
    display: block;
    padding: 0 3.25rem 0 0;
    width: 100%;
}

.footer-bottom ul li:last-child {
    padding-right: 0;
}

.footer-bottom a:link {
     color: #cec9c9;  
}

/* ---------- Grids ------------------------------------------------------------------------- */

.grid {
    overflow: hidden;
	clear: both;
}

.gutter {
    padding-left: 1em;
    padding-right: 1em;
}

.unit {
    float: left;
    width: 33.3333%;
    
}

.unit-s-1 {
	width: 100%;
}

.unit-s-1-2 {
	width: 50%
}

.unit-s-1-3 {
	width: 33%;
}

.unit-footer-1-3 {
    width: 100%;
}

.footer-list {
    width: 100%;
}

.footer-1 {
    width: 100%;
}


@media only screen and (min-width: 34em) {
     
    .footer-2 {
        width: 50%;
    }
    
    fieldset {
        text-align: right;
    }
    
    .footer-list {
        width: 20%;
    }
    
    .footer-bottom ul, .footer-bottom ul li {
        display: inline;
    } 
} 


@media only screen and (min-width: 46em) {
    
      h1 {
        font-size: 5rem;
    }
    
     p {
        padding: 0 0;
    }
    
    h5 {
        padding: 0;
    }
    
}

@media only screen and (min-width: 49em) {
	
	.unit-m-1 {
		width: 100%;
	}
	
	.unit-m-1-2 {
		width: 50%;
	}
	
	.unit-m-1-3 {
		width: 33.3333%;
	}
	
	.unit-m-2-3 {
		width: 66.6666%;
	}
    
    .unit-footer-1-3 {
		width: 40%;
	}
    
    br {
        display: block;
    }
    
    p {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}


@media only screen and (min-width: 62em) {
    
      h1 {
        font-size: 6.5rem;
        letter-spacing: -.01rem;
    }
    
}

@media only screen and (min-width: 62em) {
	
	.unit-l-1-3 {
		width: 33.3333%;	
	}
	
	.unit-2-3 {
    	width: 66.6666%;
	}
}

@media only screen and (min-width: 30em) {
	
	.unit-m-1 {
		width: 100%
	}
	
	.unit-m-1-2 {
		width: 50%;
	}
	
	.unit-m-1-3 {
		width: 33.3333%;
	}
	
	.unit-m-2-3 {
		width: 66.6666%;
	}
	
}

@media only screen and (min-width: 62em) {
	
	.unit-l-1-3 {
		width: 33.3333%;	
	}
	
	.unit-2-3 {
    	width: 66.6666%;
	}
	
	.grid p {
		margin-right: 10%;
	}
	
}