/*!
 *  Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot?v=4.6.3");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.6.3") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.6.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.6.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }
  html {
      font-family: sans-serif;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%
  }
  h1{
    font-family:"soleil", sans-serif; font-weight:700 !important;
  }
  h2{
    font-family:"soleil", sans-serif; font-style:Regular; font-weight: 700 !important;
  }
  h3{
    font-family:"soleil", sans-serif; font-style:Regular; font-weight: 700 !important;
  }
  h5 { font-weight: 600 !important; }
  p, li, h4{
    font-family:"soleil", sans-serif;
  }
  body{
    background-color: #fff;
  }
  .header{
    z-index: 1000;
    overflow: visible;
  }
  .wrapper {
      max-width: 1300px;
      position: relative;
      margin: 0 auto;
      height: 100%;
  }
  .banner{
    position: relative;
    text-align: center;
    z-index: 1;

  }
  #captioned-gallery img{
    width: 100%;
  }
  #captioned-gallery p{
    display: block!important;
  }
  .banner img{
      /*max-width: 1920px;*/
      width:100%;
    }

 .banner-static {
      position: relative;
      text-align: center;
      z-index: 1;
  }

  body {
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: #292b2c;
     background-color: #fff;
 }
 .green-fade{
   background: #006857; /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(#006857, #004c40); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(#006857, #004c40)); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(#006857, #004c40)); /* For Firefox 3.6 to 15 */
   background: linear-gradient(#006857, #004c40)); /* Standard syntax */
   color:#fff;
 }
 .green-fade > div{
      padding: 45px 45px!important;
 }
 .green-fade a{
      color:white;
      text-decoration: underline;
 }
 .green-fade a:hover{
      color:#c09f72;
      text-decoration: underline;
 }

 hr{
    border: solid #ccc 1px;
  }
  .foot-ul{
    text-align: left;
    list-style-type: none;
    padding-left: 0px;
  }
  .foot h5{
    text-align: left;
  }

  .overwrite-block{
       position: absolute;
       left: 0;
       width: 100%;
       color: #fff;
 }

 .overwrite-block-timeline{
      position: absolute;
      left: 0;
      width: 100%;
      color: #fff;
}
 /* ======================================================================== */
 /* =========================  BUANNER   ============================== */
 /* ======================================================================== */



 .overwrite-block-banner-content{
   position: absolute;
   width:100%;
   height: 40%;
   /*bottom: 23%;*/
   top:40%;
   left:-50%;
   color: #fff;
   font-size: 1.5em;
   /*max-width: 610px;*/
 }
 .overwrite-block-banner-content .banner-static-copy{
   /*padding-top:180px;*/
 }
 .overwrite-block-banner-content h1,  .overwrite-block-banner-about h1{
    /*font-size: 3em;*/
        font-size: 4vw;
    text-shadow: 1px 1px 2px black;
 }


 .overwrite-block-banner-about{
   position: absolute;
   width:100%;
   /*
   height: 60%;
   bottom: 23%;
   */
   height: 40%;
   top:30%;
   left:-50%;
   color: #fff;
   font-size: 1.5em;
   /*max-width: 610px;*/

 }
 .overwrite-block-banner-about .banner-static-copy{
   /*padding-top:100px;*/
 }
  .overwrite-block-banner-about .banner-static-copy img{
    /*height:150px;
    width: auto;*/
    height: auto;
    width: 20%;
 }


 .overwrite-block-banner{
   position: absolute;

   max-height: 500px;
   height: 60%;

   /*left:-100%;*/

   background: rgba(0,104,87,0.9);
   color: #fff;
   font-size: 1.5em;
   max-width: 100%;
   font-weight: 300 !important;
   max-width: 1000px;
 }
 .overwrite-block-banner h1{
     font-weight: 300 !important;
 }
 .overwrite-block-banner-hanger{
   position: absolute;
   height: auto;
   background: rgba(255,255,255,1);
   color: #000;
   text-align: left;

 }
 .overwrite-block-banner-hanger a{
   color:#292b2c;
 }
.wrap-lite{
  position: absolute;
  width:100%;
  overflow: visible;
  top:0px;
  left: 50%;
  height: 100%;
}
 /* ======================================================================== */
 /* =========================  BUTTONS   ============================== */
 /* ======================================================================== */
 .green-button{

    background: #006756; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#006756, #004b3f); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#006756, #004b3f); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#006756, #004b3f); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#006756, #004b3f); /* Standard syntax */
    background-position: 0 0;
    max-width: 384px;
    width: 100%;
    height:auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
 }


 .green-button:hover{
   background: #004b3f; /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(#004b3f, #006756); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(#004b3f, #006756); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(#004b3f, #006756); /* For Firefox 3.6 to 15 */
   background: linear-gradient(#004b3f, #006756); /* Standard syntax */
 }


 .green-button:hover #playButton{
   background: #006756; /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(#006756, #004b3f); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(#006756, #004b3f); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(#006756, #004b3f); /* For Firefox 3.6 to 15 */
   background: linear-gradient(#006756, #004b3f); /* Standard syntax */
 }

 .gbt{
   color: #fff;
   width: 70%;
   position: relative;
   left: 0;
   height: 100%;
   padding: 20px 0 20px 20px;
   float: left;
 }



 #playButton {
    position: relative;
    background: #004b3f; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#004b3f, #006756); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#004b3f, #006756); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#004b3f, #006756); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#004b3f, #006756); /* Standard syntax */
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
    float: right;
}
.circle {
    border-radius: 50%;
    display: inline-block;
    margin-right: 20px;
}
i {
  border: solid #fff;
  border-width: 0 3px 3px 0;

  display: inline-block;
  padding: 10px;
  position:absolute;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
      border-top: #004b3f;/*removes ghost line*/
     outline: none;
}
.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    left:30px;
    outline: none;
}
 /* ======================================================================== */
 /* =========================  BUTTONS END   =============================== */
 /* ======================================================================== */




 /* ======================================================================== */
 /* =========================  TIMELINE   =============================== */
 /* ======================================================================== */
 .current-time{	border-bottom: solid 2px #ccc; }
 .timeline button.prev { left: -60px; }
 .timeline button.next { right: -60px; }
 .timeline button:hover, .timeline button:active { opacity: 1.0; outline:none; }
 .slider ul {
 margin: 0;
 padding: 0;
 list-style: none;
 position: absolute;
 width: 1400%; /*100 X NUM OF SLIDES*/
 height: 100%;
 top: 0;
 }
 .slider li {
 padding: 0;
 margin: 0;
 width: 33.333333%;
 height: 100%;
 overflow: hidden;
 position: absolute;
 top: 0;
 bottom: 0;
 }
 .slider li img { border: none; width: 100%; min-height: 100%; }
 /* ======================================================================== */
 /* =========================  TIMELINE   =============================== */
 /* ======================================================================== */




 /* ======================================================================== */
 /* =========================  Forms   =============================== */
 /* ======================================================================== */
  form label{
     font-weight: 700;
     text-transform: none;
     font-size: 14px;
 }
 form select {
     display: block;
     width: 100%;
     margin-bottom: 20px;
     padding: 11px;
     border: none;
     background: #ebebeb;
     font-size: 14px;
     -webkit-appearance: none;
 }
 form .ilb {
     display: inline-block;
     vertical-align: top;
 }
 form label {
     display: block;
     width: 100%;
     padding-bottom: 4px;
     margin-bottom: 0;
 }
 form div{
   width: 100%;
 }
 form input {
     display: block;
     width: 100%;
     margin-bottom: 20px;
     padding: 10px;
     border: none;
     background: #ebebeb;
     font-size: 16px;
 }
 form button.bottom {
   width: 100%;
   position: relative;
     padding: 15px;
     border: none;
     background: #006655;
     font-size: 16px;
     color: #fff;
     text-transform: none;
     font-family: neuzeit-grotesk, sans-serif;
 }

 /* ======================================================================== */
 /* =========================  TIMELINE SLIDER============================== */
 /* ======================================================================== */
.timeline-slide{
  width: 80%;
  position: relative;
  margin: 0 auto;
}
.timeline-slide a{
 color: #fff;
 text-decoration: underline;
}
.timeline{
  width:70%;
  position: relative;
  overflow: visible;
}
.timeline ul {
    width: 100%;
    list-style: none;
    padding:0;
    margin: 15px 0 5px 0;
}
.timeline li {
    float: left;
    width: 14.28%;
    margin: 12px 0 0 0;
    padding: 6px 0 6px 0;
}
.slider {
    width: 100%;
    overflow: hidden;
    height: 300px;
    position: relative;
    display: inline-block;
}
.timeline button {
				position: absolute;
				display: block;
				box-sizing: border-box;
				border: none;
				outline: none;
				top: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.3);
				color: #fff;
				margin: 0;
				padding: 0;
				text-align:center;
				opacity: .9;
				z-index: 2;
        outline: none;
	}
 .timeline button:hover {
     background-color: rgba(8, 178, 20, 0.3);
  }
 /* ======================================================================== */
 /* =========================  SPECIAL   =================================== */
 /* ======================================================================== */
  .margin-bt-80{ margin-bottom: 80px; margin-top: 50px;}
  .grey-bg{background-color: #f5f5f5;}
  .grey-bt{border-top: solid 1px #eaeaea;}
  .pt-80{padding-top:80px;}
  .pb-80{padding-bottom:80px;}
  .pt-40{padding-top:40px;}
  .pb-40{padding-bottom:40px;}
  .pb-20{padding-bottom:20px;}
  .pb-15{padding-bottom: 15px;}
  .pt-15{padding-top: 15px;}
  .margin-tb-60{margin:60px 0;}
  .margin-tb-50{margin:50px 0;}
  .margin-tb-30{margin:30px 0;}
  .p-15{padding: 15px;}

  /* ======================================================================== */
  /* =========================  SPECIAL END   =============================== */
  /* ======================================================================== */

  .sidebar-menu{
    padding-left: 0px;
  }
  .sidebar-menu li{
    list-style: none;
  }

  .content-box h2{
     margin:0 0 50px 0;
  }
  .content-box h4{
     margin:0 0 40px 0;
     font-size: 1.25rem;
  }
  .content-box h5{
     margin:0 0 20px 0;
     /*font-size: 1.0rem;*/
     font-size: 1.1rem;
  }
  .content-box p{
     margin:0 0 10px 0;
  }

  .content-left-column-sidebar h5{
    margin-bottom: .5rem;
    font-size: 1.0rem;
  }
  .sidebar-menu a{
    color:#4c4c4c;
  }
  .sidebar-menu a:hover{
    color:#006857;
  }
 /* ======================================================================== */
 /* =========================  IMAGE SLIDER   ============================== */
 /* ======================================================================== */

 @keyframes slidy {
 0% { left: 0%; }
 20% { left: 0%; }
 25% { left: -100%; }
 45% { left: -100%; }
 50% { left: -200%; }
 70% { left: -200%; }
 75% { left: -300%; }
 95% { left: -300%; }
 100% { left: -400%; }
 }
 * {
   box-sizing: border-box;
 }
 figure {
   margin: 0;
   font-family: Istok Web, sans-serif;
   font-weight: 100;
 }
 div#captioned-gallery {
   width: 100%; overflow: hidden;
 }
 figure.slider-home {
   position: relative;
   width: 500%;
   font-size: 0;
   animation: 30s slidy infinite;
 }
 figure.slider-home figure {
   width: 20%; height: auto;
   display: inline-block;  position: inherit;
 }
 figure.slider-home img { width: 100%; height: auto; }
 figure.slider-home figure figcaption {
   position: absolute;
   width:35%;
   height: 60%;
   bottom: 20%;
   left:12%;
   background: rgba(0,104,87,0.9);
   color: #fff;
   font-size: 2rem; padding: .6rem;
   display: none;
 }
 /* ======================================================================== */
 /* =========================  IMAGE SLIDER END ============================ */
 /* ======================================================================== */

.overwrite-pad-top{
  position: relative;
  min-height: 10px;
  width: 100%;
}
.home-bottom{
  position: relative;
  width: 80%;
  margin: 0 auto;
}
.home-bottom h4{font-size:1.5vw;}
.home-bottom h2{font-size:1.5vw;}





    /* ======================================================================== */
    /* ======================================================================== */
    /* ========================= MEDIA QUERIES   ============================== */
    /* ======================================================================== */
    /* ======================================================================== */

    /* ======================================================================== */
    /* =========================   XX Largest    ========================== */
    /* ======================================================================== */
    @media  (min-width : 2000px){
          .promo{float: left;position: relative;margin-right: 10px;}
          .promo img{width: 100%;}
          .promo-mobile{display: none;}
          .promo-mobile > img{display: none;}
          #logo{width:24%;}
          ul.menu{width:35%;}
          .promo{width:40%;}
          .overwrite-block-banner{
            font-size: 1.5em;
            padding: 0 7%;
            bottom:auto;
            left:-60%;
            width:70%;
            top:25%;
          }
          .overwrite-pad-top{height:15%;}
          .overwrite-block-banner h1{
             font-size: 2.6rem;
          }
          .overwrite-block-banner-hanger{
            width:60%;
            bottom: -10%;
            left:10%;
            font-size: 1.0em;
            padding: 4% 5%;
          }
          .wrap-lite{
            /*max-width: 610px;*/
            max-width: 50%;
          }
          .overwrite-block{top: 170px;}
          .overwrite-block h2{padding:0 5%;}
            /*.overwrite-block h4{font-size:1.6rem;}*/

          .overwrite-block-timeline{top: 170px;}
          .overwrite-block-timeline h4{ font-size: 1.5rem;}
          .timeline{margin: 80px  auto 20px auto;}
          .slider {margin-top: 50px; font-size: 1em;}
          .timeline button {width: 70px; height: 70px;}
          .timeline .left{top:24px; left:29px;}
          .timeline .right{top:24px; left:19px;}

          .content-box{ margin-bottom: 30px; margin-top: 50px;}
          .about-box{ margin-bottom: 80px; margin-top: 50px;}
          .slider {margin-top: 50px; font-size: 1em;}

          .gbt{ font-size: 1.4em; }
          #playButton {margin-top: 30px;width: 70px; height: 70px;}
          i{top:24px; left:19px;}
          .about-box div:first-child{ margin-bottom: 0;}
          .about-box div:nth-child(2){ margin-bottom: 0;}
          .three-pack{margin-bottom: 0;}
          .content-left-column{ text-align: right; margin-bottom: 0;}
          .content-left-column-sidebar{ text-align: left; margin-bottom: 0;}
    }

    /* ======================================================================== */
    /* =========================   X Largest    ========================== */
    /* ======================================================================== */
    @media  (min-width : 1601px) and (max-width : 1999px) {
            .promo{float: left;position: relative;margin-right: 10px;}
            .promo img{width: 100%;}
            .promo-mobile{display: none;}
            .promo-mobile > img{display: none;}
            #logo{width:24%;}
            ul.menu{width:35%;}
            .promo{width:40%;}
            .overwrite-block-banner{font-size: 1.3vw; padding: 0 7%; bottom:23%;left:-60%;  width:70%;top:auto;}
            .overwrite-pad-top{height:7%;}
            .overwrite-block-banner h1{font-size: 2.4vw;}
            .overwrite-block-banner-hanger{width:60%;bottom: -10%;left:10%;font-size: 1.2vw; padding: 4% 5%;}
            .wrap-lite{ /*max-width: 610px;*/ max-width: 50%;}
            .overwrite-block{top: 150px;}
            .overwrite-block h2{padding:0 5%;}
            /*.overwrite-block h4{font-size:1.6rem;}*/


            .overwrite-block-timeline{top: 150px;}
            .overwrite-block-timeline h4{ font-size: 1.5rem;}
            .timeline{margin: 60px  auto 20px auto;}
            .slider {margin-top: 50px; font-size: 1em;}
            .timeline button {width: 70px; height: 70px;}
            .timeline .left{top:24px; left:29px;}
            .timeline .right{top:24px; left:19px;}

            .content-box{ margin-bottom: 30px; margin-top: 50px;}
            .about-box{ margin-bottom: 80px; margin-top: 50px;}

            .gbt{ font-size: 1.4em; }
            #playButton {margin-top: 30px;width: 70px; height: 70px;}
            i{top:24px; left:19px;}
            .about-box div:first-child{ margin-bottom: 0;}
            .about-box div:nth-child(2){ margin-bottom: 0;}
            .three-pack{margin-bottom: 0;}
            .content-left-column{ text-align: right; margin-bottom: 0;}
            .content-left-column-sidebar{ text-align: left; margin-bottom: 0;}

    }

    /* ======================================================================== */
    /* =========================   Largest    ========================== */
    /* ======================================================================== */
    @media  (min-width : 1201px) and (max-width : 1600px) {
             .promo{float: left;position: relative;padding-left: 10px;}
             .promo img{width: 100%;}
             .promo-mobile{display: none;}
             .promo-mobile > img{display: none;}
             #logo{width:20%;}
             #logo img{width:100%; height: auto!important;}
             ul.menu{width:38%;}
             .promo{width:40%;}
             .overwrite-block-banner{
               font-size: 1.3vw;
               padding: 0 5%;
               bottom:23%;
               left:-60%;
               width:80%;
               top:auto;
             }
             .overwrite-pad-top{height:7%;}
             .overwrite-block-banner h1{
                font-size: 2.4vw;
             }
             .overwrite-block-banner-hanger{
               width:60%;
               bottom: -10%;
               left:8%;
               font-size: 1.3vw;
               padding: 4% 5%;
             }
             .wrap-lite{
               /*max-width: 500px;*/
               max-width: 50%;
             }
             .overwrite-block{top: 85px;}
             .overwrite-block h2{padding:0 5%;}
               /*.overwrite-block h4{font-size:1.6rem;}*/

             .overwrite-block-timeline{top: 55px;}
             .overwrite-block-timeline h4{ font-size: 1.5rem;}
             .timeline{margin: 50px  auto 20px auto;}
             .slider {margin-top: 50px; font-size: 1em;}
             .timeline button {width: 70px; height: 70px;}
             .timeline .left{top:24px; left:29px;}
             .timeline .right{top:24px; left:19px;}

             .content-box{ margin-bottom: 30px; margin-top: 50px;}
             .about-box{ margin-bottom: 80px; margin-top: 50px;}

             .gbt{ font-size: 1.4em; }
             #playButton {margin-top: 30px;width: 70px; height: 70px;}
             i{top:24px; left:19px;}
             .about-box div:first-child{ margin-bottom: 0;}
             .about-box div:nth-child(2){ margin-bottom: 0;}
             .three-pack{margin-bottom: 0;}
             .content-left-column{ text-align: right; margin-bottom: 0;}
             .content-left-column-sidebar{ text-align: left; margin-bottom: 0;}
    }

    /* ======================================================================== */
    /* ========================= Second Largest    =========================== */
    /* ======================================================================== */

    @media (min-width : 993px) and (max-width : 1200px) {
           .promo{float: left;position: relative;padding-left: 10px; margin-top: 8px;}
           .promo img{width: 100%;}
           .promo-mobile{display: none;}
           .promo-mobile > img{display: none;}
           .menu a{font-size: 15px!important; padding: 14px 15px;}
           #logo{width:20%;}
           #logo img{width:100%; height: auto!important;}
           ul.menu{width:38%;}
           .promo{width:38%;}
          .overwrite-block-banner{
            font-size: 1.3vw;
            padding: 0 5%;
            bottom:23%;
            left:-60%;
            width:80%;
            top:auto;
          }
          .overwrite-block-banner h1{
             font-size: 2.4vw;
          }
          .overwrite-pad-top{height:7%;}
          .overwrite-block-banner-hanger{
            width:60%;
            bottom: -10%;
            left:8%;
            font-size: 1.3vw;
            padding: 4% 5%;
          }
          .wrap-lite{

            /*max-width: 450px;*/
            max-width: 50%;
          }
          .overwrite-block{top: 65px;}
          .overwrite-block h2{padding:0 5%;}
          /*.overwrite-block h4{font-size:1.6rem;}*/

          .overwrite-block-timeline{top: 35px;}
          .overwrite-block-timeline h4{ font-size: 1.3rem;}
          .timeline{margin: 20px  auto 20px auto;}
          .slider {margin-top: 20px; font-size: .9em;}
          .timeline button {width: 50px; height: 50px;}
          .timeline .left{top:14px; left:19px;}
          .timeline .right{top:14px; left:9px;}

          .content-box{ margin-bottom: 20px; margin-top: 10px;}
          .about-box{ margin-bottom: 40px; margin-top: 10px;}

          .gbt{ font-size: 1.3em; }
          #playButton {margin-top: 30px;width: 70px; height: 70px;}
          i{top:24px; left:19px;}
          .about-box div:first-child{ margin-bottom: 10px;}
          .about-box div:nth-child(2){ margin-bottom: 30px;}
          .three-pack{margin-bottom: 0;}
          .content-left-column{ text-align: right; margin-bottom: 0;}
          .content-left-column-sidebar{ text-align: left; margin-bottom: 0;}
    }

    /* ======================================================================== */
    /* =========================   Second  Smallest  ========================== */
    /* ======================================================================== */
    @media (min-width : 769px) and (max-width : 992px) {
                .promo{display: none;}
                .promo-mobile{width: 100%; position: relative; margin-top: 40px;}
                .promo-mobile > img{width: 100%;}
                .row {
                  margin-right: 0px!important;
                  margin-left: 0px!important;
                }
                .overwrite-block-banner{
                  font-size: 1.3vw;
                  padding: 0 5%;
                  bottom:23%;
                  left:-60%;
                  width:80%;
                  top:auto;
                }
                .overwrite-pad-top{height:7%;}
                .overwrite-block-banner h1{
                   font-size: 2.4vw;
                }
                .overwrite-block-banner-hanger{
                  width:60%;
                  bottom: -10%;
                  left:8%;
                  font-size: 1.3vw;
                  padding: 4% 5%;
                }
                .wrap-lite{
                  /*max-width: 350px;*/
                  max-width: 50%;
                }
                .overwrite-block{top: 45px;}
                .overwrite-block h2{padding:0 5%;}
                  /*.overwrite-block h4{font-size:1.3rem;}*/


                .overwrite-block-timeline{top: 15px;}
                .overwrite-block-timeline h4{ font-size: 1.1rem;}
                .timeline{margin: 0  auto 20px auto;}
                .slider {margin-top: 20px; font-size: .8em;}
                .timeline button {width: 50px; height: 50px;}
                .timeline .left{top:14px; left:19px;}
                .timeline .right{top:14px; left:9px;}

                .content-box{ margin-bottom: 20px; margin-top: 10px;}
                .about-box{ margin-bottom: 40px; margin-top: 10px;}
                .about-box .green-button { border-radius: 8px 8px;}

                .gbt{ font-size: 1.4em; }
                #playButton {margin-top: 30px;width: 70px; height: 70px;}
                i{top:24px; left:19px;}
                .about-box div:first-child{ margin-bottom: 10px;}
                .about-box div:nth-child(2){ margin-bottom: 30px;}
                .three-pack{margin-bottom: 0;}
                .three-pack .white-bg { background: #fff; padding: 20px; }
                .content-left-column{ text-align: right; margin-bottom: 0;}
                .content-left-column-sidebar{ text-align: left; margin-bottom: 0;}
    }

    /* ======================================================================== */
    /* =========================        Smallest    =========================== */
    /* ======================================================================== */
    @media (min-width : 421px) and (max-width : 768px) {
             .promo{display: none;}
             .promo-mobile{width: 100%; position: relative; margin-top: 40px;}
             .promo-mobile > img{width: 100%;}
             .row {
               margin-right: 0px!important;
               margin-left: 0px!important;
             }
             .content-box{ margin-bottom: 10px; margin-top: 50px;}
             .about-box{ margin-bottom: 30px; margin-top: 50px;}
             .gbt{ font-size: 1.03em; }
             #playButton {margin-top: 22px;width: 50px; height: 50px;}
             i{top:14px; left:9px;}
             .about-box div:first-child{ margin-bottom: 10px;}
             .about-box div:nth-child(2){ margin-bottom: 30px;}
             .three-pack{margin-bottom: 35px;}
             .content-left-column{ text-align: left; margin-bottom: 20px;}
             .content-left-column-sidebar{ text-align: left; margin-bottom: 20;}
    }

    /* ======================================================================== */
    /* =========================  XXx   Smallest    =========================== */
    /* ======================================================================== */
    @media (max-width : 420px) {
               .promo{display: none;}
               .promo-mobile{width: 100%; position: relative; margin-top: 40px;}
               .promo-mobile > img{width: 100%;}
               .row {
                 margin-right: 0px!important;
                 margin-left: 0px!important;
               }
               .content-box{ margin-bottom: 10px; margin-top: 50px;}
               .about-box{ margin-bottom: 30px; margin-top: 50px;}
               .gbt{ font-size: 1.03em; }
               #playButton {margin-top: 22px;width: 50px; height: 50px;}
               i{top:14px; left:9px;}
               .about-box div:first-child{ margin-bottom: 10px;}
               .about-box div:nth-child(2){ margin-bottom: 30px;}
               .three-pack{margin-bottom: 35px;}
               .content-left-column{ text-align: left; margin-bottom: 20px;}
               .content-left-column-sidebar{ text-align: left; margin-bottom: 20;}
    }
