@font-face {
  font-family: 'Gotham A';
  src: url("../fonts/Gotham-Light.eot?") format("eot"), url("../fonts/Gotham-Light.woff") format("woff"), url("../fonts/Gotham-Light.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: 'Raleway Thin';
  src: url("../fonts/Raleway-Thin.ttf") format("truetype");
  font-style: normal;
}

body {margin: 0;}


.gallery {opacity: 0;}


/*FIXED ELEMENTS */
.logo {width: 166px; height: 63px; 
		background-image: url(../img/logo_home.png); position: absolute; background-size:contain; background-repeat: no-repeat; bottom: 80px; left:14.53%; z-index: 10000;
		-webkit-transition: background-image 0.2s ease-in-out;
		transition: background-image 0.2s ease-in-out;}
.logo_dark {background-image: url(../img/logo_home_dk.png)!important;}

.fade {
    background: linear-gradient( rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.2) );
    position: absolute;
    width: 100%;
    height: 452px;
    z-index: 1000;
    pointer-events: none;
    bottom: 0;
}


.slide_cta {
    position: absolute;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    /* top: 0; */
    bottom: 80px;
    left: 0;
    right: 0;
    width: 396px;
    font-size:35px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    z-index: 20000;
    padding-left: 50px;
}
.cta {}
.arrow {
    font-family: 'Raleway Thin';
    font-size: 150px;
    line-height: 0px;
    letter-spacing: -20px;
    position: absolute;
}


/*SLIDES*/

.gallery-cell {
  width: 100%;
  height: 100%; /* inherit height from gallery */
  margin-right: 10px!important;
  background: #8C8;
  counter-increment: gallery-cell;
}

.content-box {float:left; height:100%; width:33.85%;  padding-top:50px; padding-bottom: 50px; padding-left: 2.60%; padding-right: 2.60%; font-size: 100%;}
.content-box p {margin:0; }
.asset {background: #eee; float:left; width:60.93%; position: relative;}

/*Content Area Colors */

.green {background: #97c93c; color:#FFF;}
.grey {background: #666666; color: #FFF;}
.white {background: #fff; color: #97c93c!important;}
.white-g {background: #fff; color: #666!important; text-shadow: none;}
.trans {color: #FFF!important;}

/*Content typography */

.second {
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity:1;
 direction: none;
  
}
.second p {position:absolute; width:649px; font-family: 'Gotham A';  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.17); letter-spacing: -0.07em;}

.headline {font-size:5.25vw!important; line-height: 8vh!important;}
.interior {
    font-size: 4.4vw!important;
    line-height: 7vh!important;
}
p.description {position: absolute; line-height: 30px; font-size: 22px!important;}
p.built {bottom:285px; color: #333; }
p.then {bottom:260px; color: #FFF; }
p.built2 {bottom:231px; color: #FFF; }
p.welcome {bottom:287px; color: #666; }

/***** ANNOTATIONS ******/

.hexagon {
  position: relative;
  width: 41px; 
  height: 23.67px;
  background-color: #97c93c;
  margin: 11.84px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 20.5px solid transparent;
  border-right: 20.5px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 11.84px solid #97c93c;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 11.84px solid #97c93c;
}

.cross svg{
  max-width: 40px;
}

svg .vertical,
svg .horizontal{
  -webkit-transform-origin: 50% 50%;
     -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
       -o-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}


.large-hexagon {z-index: 1;}
.large-hexagon p {
    /* padding: 20px; */
    font-family: Gotham A;
    color: #FFF;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
}
/*callout containers */

.hexagon_1 {
    position: relative;
    width: 330px;
    background-color: #97c93c;
    margin: 95.26px 0;
    left: 134px;
    display: none;
    top: 64px;
}
.hexagon_1:before,
.hexagon_1:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_1:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_1:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}

.hexagon_2 {
    position: relative;
    width: 330px;
    height: 190.53px;
    background-color: #97c93c;
    margin: 95.26px 0;
    left: 367px;
    display: none;
    top: 499px;
}

.hexagon_2:before,
.hexagon_2:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_2:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_2:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}

.hexagon_3 {
    position: relative;
    width: 330px;
    background-color: #97c93c;
    margin: 95.26px 0;
    left: 737px;
    display: none;
    top: 349px;
}

.hexagon_3:before,
.hexagon_3:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_3:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_3:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}

.hexagon_4 {
    position: relative;
    width: 330px;
    background-color: #97c93c;
    margin: 95.26px 0;
    left: 14px;
    display: none;
    top: 450px;
}

.hexagon_4:before,
.hexagon_4:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_4:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_4:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}


.hexagon_5 {
    position: relative;
    width: 330px;
    height: 190.53px;
    background-color: #97c93c;
    margin: 95.26px 0;
    left: 500px;
    display: none;
    top: 218px;
}

.hexagon_5:before,
.hexagon_5:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_5:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_5:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}



.hexagon_6 {
    position: relative;
    width: 330px;
    height: 190.53px;
    background-color: #97c93c;
    margin: 95.26px 0;
    right: 152px;
    display: none;
    top: 446px;
}

.hexagon_6:before,
.hexagon_6:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_6:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_6:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}



.hexagon_7 {
    position: relative;
    width: 330px;
    background-color: #97c93c;
    margin: 95.26px 0;
    left: 123px;
    display: none;
    top: 357px;
}

.hexagon_7:before,
.hexagon_7:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_7:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_7:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}


.hexagon_8 {
    position: relative;
    width: 330px;
    height: 190.53px;
    background-color: #97c93c;
    margin: 95.26px 0;
    left: 384px;
    display: none;
    top: 239px;
}

.hexagon_8:before,
.hexagon_8:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_8:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_8:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}



.hexagon_9 {
    position: relative;
    width: 330px;
    height: 190.53px;
    background-color: #97c93c;
    margin: 95.26px 0;
    right: 128px;
    display: none;
    top: 526px;
}

.hexagon_9:before,
.hexagon_9:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_9:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_9:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}


.hexagon_10 {
    position: relative;
    width: 330px;
    height: 190.53px;
    background-color: #97c93c;
    margin: 95.26px 0;
    left: 143px;
    display: none;
    top: 479px;
}

.hexagon_10:before,
.hexagon_10:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_10:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_10:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}



.hexagon_11 {
    position: relative;
    width: 330px;
    height: 190.53px;
    background-color: #97c93c;
    margin: 95.26px 0;
    left: 434px;
    display: none;
    top: 664px;
}

.hexagon_11:before,
.hexagon_11:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_11:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_11:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}


.hexagon_12 {
    position: relative;
    width: 330px;
    background-color: #97c93c;
    margin: 95.26px 0;
    left: 721px;
    display: none;
    top: 337px;
}

.hexagon_12:before,
.hexagon_12:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 165px solid transparent;
  border-right: 165px solid transparent;
}

.hexagon_12:before {
  bottom: 100%;
  border-bottom: 95.26px solid #97c93c;
}

.hexagon_12:after {
  top: 100%;
  width: 0;
  border-top: 95.26px solid #97c93c;
  position: absolute;
  left: 0;
}



/*annotation positions*/


.anno {position:absolute;}

/*SLIDE 3*/
#cross_3_1 {
	position: absolute;
    top: 300px;
    left: 115px;
    z-index: 2;
}

#cross_3_2 {
	  position: absolute;
    top: 735px;
    left: 348px;
        z-index: 2;

}

#cross_3_3 {
	  position: absolute;
    right: 86px;
    top: 495px;
        z-index: 2;
}

/*SLIDE 4  */
#cross_4_1 {
	  position: absolute;
    top: 600px;
    left: 323px;
            z-index: 2;

}
#cross_4_2 {
	  position: absolute;
    top: 455px;
    left: 481px;
            z-index: 2;

}
#cross_4_3 {
	  position: absolute;
    top: 491px;
    right: 134px;
            z-index: 2;

}
/*SLIDE 5  */
#cross_5_1 {
	  position: absolute;
    top: 400px;
    left: 105px;
            z-index: 2;

}
#cross_5_2 {
	  position: absolute;
    right: 436px;
    top: 285px;
            z-index: 2;

}

#cross_5_3 {
	  position: absolute;
    right: 107px;
    top: 668px;
            z-index: 2;

}

/*SLIDE 6  */
#cross_6_1 {
	  position: absolute;
    top: 716px;
    left: 125px;
            z-index: 2;

}
#cross_6_2 {
	  position: absolute;
    left: 414px;
    top: 900px;
            z-index: 2;

}
#cross_6_3 {
	  position: absolute;
    right: 100px;
    top: 570px;         z-index: 2;
}