/*************************************************/
/******************** GENERAL ********************/
/*************************************************/
html{
  height:100%;
}
body {
  color: #000;
  text-decoration: none;
  font-size: 15px;
  font-weight: lighter;
  font-family: Arial, sans-serif; 
  min-height:99%;
  position:relative;
}

h1{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight:lighter;
  font-size: 30px;
  text-align: center;
}

h1 strong{
  font-weight:normal;
}

h2{
  font-family: 'Roboto Condensed', sans-serif;
  font-size:42px;
  font-weight:normal;
}

h3{
  font-family: 'Roboto Condensed', sans-serif;
  font-size:30px;
  font-weight:normal;
  margin-bottom:1.2em;
}

h4{
  font-family: 'Roboto Condensed', sans-serif;
  color:#f19a27;
  font-size:22px;
  margin-bottom:1.2em;
}

a, a:hover{
  text-decoration: none;
  color:#f19a27;
}

img{
  max-width:100% !important;
  height:auto !important;
}

.left{
  float:left;
}

.right{
  float:right;
}

.white, .white *{
  color:#FFF;
}

.black, .black *{
  color:#000;
}

.font27, .font27 *{
  font-size:27px;
}

.font18, .font18 *{
  font-size:18px;
}

.quote-button{
  padding:20px;
  text-transform: uppercase;
  background:#f19a27;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight:bold;
  font-size:24px;
  border:none;
  box-shadow:1px 1px 1px #bc6000;
  border-radius:2px;
  color:black;
}

.quote-button:hover{
  background:#DB820D;;
}

.quote-button span{
  padding: 6px 0;
  background: #de7604;
  border-radius: 50%;
  width: 32px;
  overflow: hidden;
  font-weight:lighter;
  font-size:20px;
  height: 32px;
  float:left;
  display:block;
  margin:0 10px 0 0;
}

@media (min-width: 768px){
  h1{
    font-size:40px;
    text-align:left;
  }

  h2{
    font-size:42px;
  }

  h3{
    font-size:30px;
  }

  h4{
    font-size:22px;
  }

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

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

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

  .quote-button{
    font-size:30px;
  }

  .quote-button span{
    margin:3px 10px 0 0
  }

}

@media (min-width: 992px){
  h1{
    font-size:50px;
  }

  h2{
    font-size:42px;
  }

  h3{
    font-size:30px;
  }

  h4{
    font-size:22px;
  }

}

@media (min-width: 1200px){
  h1{
    font-size:60px;
  }

  h2{
    font-size:42px;
  }

  h3{
    font-size:30px;
  }

  h4{
    font-size:22px;
  }
  
}

/*************************************************/
/******************** 01 and setup ********************/
/*************************************************/
#TopBand{
  position:absolute;
  top:0;
  right:0;
  left:0;
  background:rgba(0,0,0,0.8);
  padding:10px 0;
}

#TopBand .top-links{
  text-align:right;
  padding:8px 0 0 0;
}


/************** BANNER ****************/
#Banner{
  background-image:url(../assets/banner01.png);
  background-repeat: no-repeat;
  background-position:center 0;
  padding:110px 0 17px 0;
}

#Banner .logo{
  margin-bottom:10px;
}

#Banner .font18{
  text-align:right;
}

#Banner ul{
  margin:30px 0 0 0;
}

#Banner li{
  background-image:url(../assets/checkmark.png);
  background-repeat:no-repeat;
  background-position:0px 6px;
  padding:0 0 0 40px;
  margin:5px 0;
  list-style:none;
  font-family: 'Roboto Condensed', sans-serif;
  font-size:24px;
}

#Banner .button-container{
  padding: 30px 0 0 0;
  text-align:center;
}



/************** ORANGE ****************/
#Orange{
  background:#f19a27;
  padding:20px 0 0 0;
}

#Orange a, #Orange a:link, #Orange a:hover{
  color:white;
}

#Orange .image-container{
  text-align: center;
  padding-top:20px;
}

/************** WHITE ****************/
#White{
  padding:20px 0;
  background:white;
}

#White .button-container{
  text-align:center;
}

/************** FOOTER ****************/
#Footer{
  padding:20px 0 0 0;
}

#Footer .footer-bottom{
  font-size:12px;
  padding:40px 15px 20px 15px;
}


@media (min-width: 768px){
  #Banner .row:first-child{
    margin-bottom:70px;
  }

  #Banner .button-container{
    padding: 350px 0 0 0;
    text-align:right;
  }
}

@media (min-width: 992px){
  #Banner .row:first-child{
    margin-bottom:30px;
  }

  #Orange .image-container{
    padding-top:224px;
  }

  #Banner .button-container{
    padding: 320px 0 0 0;
  }

  #White .button-container{
    text-align:right;
    margin-top:200px;
  }

}

@media (min-width: 1200px){
  #Banner .row:first-child{
    margin-bottom:30px;
  }

  #Orange .image-container{
    padding-top:73px;
  }

  #Banner .button-container{
    padding: 350px 0 0 0;
  }

}





/*************************************************/
/******************** 02 ********************/
/*************************************************/
.second h1{
  font-size:30px;
  color:#FFF;
}

.second #TopBand{
  background:#f2a43c;
}

.second #TopBand .top-links a:hover{
  color:#000;
}

.second #BottomBand{
  padding:88px 0 30px 0;
}

.second #BottomBand .align-right{
  text-align:right;
}

.second #Banner{
  background-image:url(../assets/banner02.png);
  padding:20px 0 0px 0;
}

.second #Banner ul{
  padding:0;
}

.second #Banner .container > .row:first-child{
  margin-bottom: 40px;
}

.second #Banner .button-container {
  padding: 90px 15px 0 15px;
}

.second #Blue{
  background:#d0dbe0;
  padding:20px 0 0 0;
}

.second #Blue .image-container{
  padding:40px 0px 0px 0px;
}

.second #DarkBlue{
  background:#3c5868;
  padding:20px 0;
}

.second #DarkBlue .align-center{
  text-align:center;
}


@media (min-width: 768px){
  .second h1{
    font-size:48px;
  }

  .second #Banner .container > .row:first-child{

  }

  .second #Banner .col-md-8 > .row:first-child{
    margin-bottom:0;
  }

  .second #Banner{
    padding:22px 0 33px 0;
  }

  .second #Banner .button-container {
    padding: 0px 15px 0 15px;
  }

  .second #Blue .image-container{
    padding:40px 0px 0px 0px;
  }
}

@media (min-width: 992px){
  .second #Banner .button-container {
    padding: 200px 15px 0 15px;
  }

  .second #Blue .image-container{
    padding:81px 0px 0px 0px;
  }
}

@media (min-width: 1200px){
  .second #Banner .button-container {
    padding: 210px 15px 0 15px;
  }

  .second #Blue .image-container{
    padding:40px 0px 0px 0px;
  }
}



/******************** 03 ********************/
/*************************************************/
.third h1{
  font-size:30px;
  color:#FFF;
}

.third #TopBand{
  background:#f2a43c;
}

.third #TopBand .top-links a:hover{
  color:#000;
}

.third #BottomBand{
  padding:88px 0 30px 0;
}

.third #BottomBand .align-right{
  text-align:right;
}

.third #Banner{
  background-image:url(../assets/banner02.png);
  padding:20px 0 0px 0;
}

.third #Banner ul{
  padding:0;
}

.third #Banner ul.second{
  margin:0;
}

.third #Banner li{
  font-size:20px;
  background-position:0 4px;
}

.third #Banner .container > .row:first-child{
  margin-bottom: 40px;
}

.third #Banner .button-container {
  padding: 20px 15px 50px 15px;
}

.third #Blue{
  background:#d0dbe0;
  padding:20px 0 0 0;
}

.third #Blue .image-container{
  padding:40px 0px 0px 0px;
}

.third #DarkBlue{
  background:#3c5868;
  padding:20px 0;
}

.third #DarkBlue .align-center{
  text-align:center;
}


@media (min-width: 768px){
  .third h1{
    font-size:27px;
  }

  .third #Banner .container > .row:first-child{

  }

  .third #Banner .col-md-8 > .row:first-child{
    margin-bottom:0;
  }

  .third #Banner{
    padding:22px 0 33px 0;
  }

  .third #Banner ul.second{
    margin:30px 0 0 0;
  }


  .third #Banner li{
  font-size: 16px;
  background-position: 0 0px;
  }

  .third #Banner .button-container {
    padding: 260px 15px 0 15px;
    text-align:left;

  }

  .third #Blue .image-container{
    padding:40px 0px 0px 0px;
  }
}

@media (min-width: 992px){
  .third h1{
    font-size:36px;
  }

  .third #Banner li{
  font-size:20px; 
  background-position:0 4px;
  }

  .third #Banner .button-container {
    padding: 40px 15px 0 15px;
  }

  .third #Blue .image-container{
    padding:81px 0px 0px 0px;
  }
}

@media (min-width: 1200px){
  .third h1{
    font-size:44px;
  }

  .third #Banner li{
  font-size:24px; 
  }

  .third #Banner .button-container {
    padding: 10px 15px 0 15px;
  }

  .third #Blue .image-container{
    padding:40px 0px 0px 0px;
  }
}