/* Sprayfoam Header  */
.sprayfoam_header_main {
background-image: url(../images/sprayfoam_bg.jpg);
  background-size: cover;
  height: 300px;
  text-align: center;
}

.tran_sprayfoam {
 /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

 /* IE 5-7 */
  filter: alpha(opacity=80);

 /* Netscape */
  -moz-opacity: 0.8;

 /* Safari 1.x */
  -khtml-opacity: 0.8;

 /* Good browsers */ 
  opacity: .8;
 
 height: 100px;
 background-color: #3e860f;
 position: relative;
 top: 100px;
}

@media (max-width: 650px) {
.tran_sprayfoam {
 /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

 /* IE 5-7 */
  filter: alpha(opacity=80);

 /* Netscape */
  -moz-opacity: 0.8;

 /* Safari 1.x */
  -khtml-opacity: 0.8;

 /* Good browsers */ 
  opacity: .8;
 
 height: 150px;
 background-color: #3e860f;
 position: relative;
 top: 80px;
}

}


.tran_sprayfoam h2 {
 font-family: 'Arial';
 text-transform: uppercase;
 font-size: 45px;
 position: relative;
 top: 10px;
 color: #fff;
}

.sprayfoam_grey {
  background-color: #a5a6a5;
  height: 310px;
}


/* Intro  */
/* Main_Left */
.intro_container_left {
 width: 55%;
}

@media (max-width: 767px) {
.intro_container_left {
 width: 100%;
}
}

.main_content_container {
 padding: 30px 0 30px 0;
}

@media (max-width: 767px) {
.main_content_container {
 padding: 10px 0 30px 0;
}

}

.main_left {
 position: relative;
 left: 100px;
 width: 80%;
}

@media (min-width: 1200px) {
.main_left {
 left: 25px;
 width: 80%;
}
}

@media (min-width: 992px) and (max-width: 1199px) {
.main_left {
 left: 25px;
 width: 90%;
}
}

@media (min-width: 768px) and (max-width: 991px) {
.main_left {
 left: 25px;
 width: 100%;
}
}

@media (max-width: 767px) {
.main_left {
 left: 0px;
 text-align: center;
 width: 100%;
}
}

.main_left h2 {
 color: #347630;
 font-weight: bold;
 font-size: 25px;
 position: relative;
}

.main_left h3 {
 color: #347630;
 font-weight: bold;
 font-size: 25px;
 position: relative;
 bottom: 10px;
}

.main_left h8 {
 font-weight: bold;
 font-size: 1.3em;
 position: relative;
}

.main_left p {
 font-size: 1.2em;
 padding-bottom: 15px;
}

.leaf {
 position: absolute;
 bottom: 0px;
 left: 140px;
}

/* Main_Right */
.intro_container_right {
 width: 45%;
}

@media (max-width: 767px) {
.intro_container_right {
 width: 100%;
}
}

.main_right_wrapper {
 position: relative;
 left: 50px;
}

.main_right {
 border-left: medium solid #347630;
 padding-left: 50px;
 padding-top:0px;
 position: relative;
 width:75%;
}

.main_right ul {
 list-style-type: square;
 font-size: 1.2em;
}

.main_right h8 {
 font-weight: bold;
 font-size: 1.3em;
 position: relative;
 right: 15px;
}

.main_right p {
 font-size: 1.2em;
 padding-bottom: 15px;
}

@media (min-width: 1200px) {
.main_right {
 padding-left: 50px;
 width:80%;
}

}

@media (min-width: 992px) and (max-width: 1199px) {
.main_right {
 padding-left: 50px;
 width:90%;
}

}

@media (min-width: 768px) and (max-width: 991px) {
.main_right {
 padding-left: 50px;
 width:100%;
}

}

@media (max-width: 767px) {
.main_right {
 border-top: medium solid #347630;
 border-left: none;
 text-align: center;
 width: 100%;
 padding-left: 0px; 
}

.main_right ul {
 list-style-type: none;
}

.main_right h8 {
 right: 0px;
}
}

/* DIAGONAL SECTIONS */

.diagonal_tab {
  cursor: pointer;
  float: left;
  width: 50%;
  padding-left: 50px;
  font-size: 24px;
  line-height: 38px;
  color: #ffffff;
  background: #639021;
}

.diagonal_tab.active {
  background: #0a4f9b;
}

.diagonal_section {
  display: none;
}

.diagonal_section.active {
  display: block;
}
/* shared between both insulation technology & energy */

.diagonal_container {
  overflow: hidden;
  position: relative;
  height: 744px;
  background: #f0f0f0;
  font-size: 1.2em;
}

.diagonal_container p {
  padding-bottom: 20px;
}

@media (max-width: 920px) {
  .diagonal_container {
    font-size: 1em;
  }
}

@media (max-width: 600px) {
  .diagonal_container {
    font-size: .9em;
  }
}


/* Insulation Technology Specific */

.insulation_technology .text_wrapper {
  margin: 70px 0px 0px 24px;
}
.insulation_technology img {
  position: absolute;
  top: 0;
  right: -18px;
}

@media (max-width: 790px) {
  .insulation_technology .diagonal_container {
    height: 704px;
  }
  .insulation_technology .diagonal_adjust {
    width: 890px;
  }
  .insulation_technology img {
    right: -200px;
    top: -40px;
  }
}

@media (max-width: 600px) {
  .insulation_technology .diagonal_adjust {
    width: 700px;
  }
  .insulation_technology .text_wrapper {
    margin-top: 35px;
  }
}

@media (max-width: 440px) {
  .insulation_technology .diagonal_container {
    height: 684px;
  }
  .insulation_technology .text_wrapper {
    margin-top: 25px;
    margin-left: 20px; 
  }
  .insulation_technology img {
    right: -225px;
    top: -60px;
  }
}

/* If your resolution is this low, the quality degrades */

@media (max-width: 375px) {
  .insulation_technology .diagonal_container {
    height: 684px;
  }
  .insulation_technology .text_wrapper {
    margin-top: 15px;
    margin-left: 10px; 
  }
  .insulation_technology img {
    right: -300px;
    top: -60px;
  }
}


/* Energy Specific */

.energy .text_wrapper {
  margin: 50px 24px 0 0;
}

.energy ul {
  list-style-type:disc;
}

.energy img {
  position: absolute;
  top: -15px;
  left: -15px;
}

@media (max-width: 1260px) {
  .energy .diagonal_container {
    font-size: 1.1em;
  }
}

@media (max-width: 1100px) {
  .energy .diagonal_container {
    font-size: 1em;
  }
}

@media (max-width: 1000px) {
  .energy .diagonal_adjust {
    margin-left: -65px;
  }
  .energy img {
    margin-left: -50px;
  }
}

@media (max-width: 850px) {
  .energy .diagonal_adjust {
    margin-left: -165px;
  }
  .energy img {
    margin-left: -130px;
  }
}

@media (max-width: 730px) {
  .energy .diagonal_container {
    font-size: .9em;
  }
  .energy .text_wrapper {
    margin-top: 25px;
    margin-right: 10px;
  }
  .energy p {
    padding-bottom: 12px;
  }
}


@media (max-width: 600px) {
  .energy p {
    padding-bottom: 8px;
  }
  .energy .diagonal_container {
    font-size: .8em;
  }
  .energy .text_wrapper {
    margin-top: 18px;
    margin-right: 5px;
  }
}

@media (max-width: 460px) {
  .energy p {
    padding-bottom: 4px;
    margin-bottom: 4px;
  }
  .energy .diagonal_adjust {
    margin-left: -195px;
  }
  .energy .text_wrapper {
    margin-left: 30px;
  }
  .energy img {
    margin-left: -150px;
  }
}