@import url('https://fonts.googleapis.com/css?family=Lato:300');

/*********************** HEADER ***********************/

html, body {
  background-color: #333333;
  margin:0;
  height:100%;
  font-family: 'Lato', Helvetica, Arial, Sans-Serif;
  overflow-x: hidden;
}

#theheader {
  padding:25px;
  background-color: #fcfcfa;
}

#thestripe {
  height:25px;
  background-color: #fcfcfa;
  background-repeat: repeat-x;
  background-position: bottom;
  margin:0;
  position:relative;
  z-index: 1;
}

.centerbody {
  max-width:1200px;
  margin:0 auto;
}

#thelogo {
  transition: .6s ease;
  max-width:500px;
  float:left;
}

#thelogo:hover {
  opacity: .75;
}

#thelogo img {
  width:100%;
}

#thenav {
  text-align:right;
  float:right;
  margin:0;
  vertical-align:middle;
}

#thenav a{
  transition: 1s ease;
  display:inline-block;
  line-height:40px;
  text-decoration: none;
  font-size: 12px;
  color: #7b6f55;
  vertical-align:middle;
  margin: 29px 22px 0 0;
  text-transform: uppercase;
  font-weight:bold;
}

#thenav a:hover{
  color: #e0702a;
}

#thenav img {
  transition: 1s ease;
  width:20px;
  display:inline-block;
  float:left;
  margin-left:-9px;
}

#thenav img:hover {
  opacity: .7;
}

.clear {
  clear:both;
}

#aboutlink {
  position:relative;
  display:inline-block;
}

#theaboutmenu {
  position:absolute;
  display:none;
  background-color: #FFFFFF;
  z-index: 99999;
}

#aboutlink:hover #theaboutmenu {display: block;}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {display: block;}

#theaboutmenu a{
  display:block;
  line-height:30px;
  text-decoration: none;
  font-size: 12px;
  color: #7b6f55;
  vertical-align:middle;
  padding: 15px;
  margin: 0px;
  text-transform: uppercase;
  background-color: #FFFFFF;
  min-width: 160px;
  margin-left:-130px;
  font-weight:bold;
}

#theaboutmenu a:hover{
  background-color: #e0702a;
  color: #FFFFFF;
}

body.page-template-archive-newbuildings .navnewbuildings, body.single-newbuildings .navnewbuildings {
  color: #e0702a !important;
}

body.page-template-archive-renovations .navrenovations, body.single-renovations .navrenovations {
  color: #e0702a !important;
}

body.blog .navblog {
  color: #e0702a !important;
}

body.single-post .navblog {
  color: #e0702a !important;
}

body.archive .navblog {
  color: #e0702a !important;
}

body.page-template-about .navabout {
  color: #e0702a !important;
}

body.page-template-contact .navcontact {
  color: #e0702a !important;
}


/*********************** MOBILE HEADER ***********************/

@media screen and (max-width: 1100px) {
  #thenav {
    display:none;
  }
}

#themobilenav {
  padding:28px 0 0 0;
  position:relative;
  display:inline-block;
  float:right;
  z-index:99999;
}

#themobilenav img{
  transition: 1s ease;
  width:20px;
  display:inline-block;
  background-color: #FFF;
  border:1px solid #FFF;
  border-radius: 4px;
}

#themobilenav img:hover {
  opacity: .7;
}

@media screen and (min-width: 1100px) {
  #themobilenav {
    display:none;
  }
}

#mobilemenu {
  position:absolute;
  background-color: #FFF;
  min-width: 160px;
  margin-left:-160px;
  z-index:99999;
}

#mobilemenu a{
  display:block;
  padding:20px;
  text-decoration: none;
  font-size: 12px;
  color: #7b6f55;
  font-weight: bold;
  z-index:99999;
}

#mobilemenu a:hover{
  color: #FFF;
  background-color: #e0702a;
}

/* #themobilenav:hover #mobilemenu {display: block;} */

#menubutton {
  width:40px;
  height:40px;
  background-image: url('/wp-content/themes/a5TBDA/img/menu.png');
  background-size: contain;
  text-align:right;
  float:right;
  z-index:99999;
}

@media screen and (max-width: 600px) {
  #themobilenav {
    padding:14px 0 0 0;
  }

  #thelogo img {
    width:100%;
  }

  #thelogo {
    max-width:350px;
  }
}

.mobilesocial {
  float:left;
}

/*********************** HOME ***********************/

#homepic {
  height:75%;
  width:100%;
  background-repeat: no-repeat;
  background-position: 50% 80%;
  background-size: cover;
  margin:-25px 0 0 0;
  background-color: #333333;
}

#homecontent {
  width:30%;
  background-color:rgba(51, 51, 51, 0.8);
  padding: 50px;
  color: #FFFFFF;
}

#homecontent h1{
  font-size: 19px;
  line-height:1.2em;
  margin-top: 30px;
  font-weight: normal;
}

#homepic a{
  display:block;
  min-width:100%;
  min-height:75%;
  position: absolute;
  margin:0;
}


/*********************** MOBILE HOME ***********************/

@media screen and (max-width: 1100px) {
  #homecontent {
    width:50%;
  }

  #homecontent h1{
    font-size: 15px;
  }

}

@media screen and (max-width: 600px) {
  #homecontent {
    width:70%;
  }

}

/*********************** SWIPER ***********************/


.swiper-container {
    max-width: 840px;
    height: 600px;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      background-size: cover;
      background-position:center;
    }


    @media screen and (max-width: 900px) {
      .swiper-container {
        height: 500px;
      }
    }

    @media screen and (max-width: 750px) {
      .swiper-container {
        height: 450px;
      }
    }

    @media screen and (max-width: 600px) {
      .swiper-container {
        height: 400px;
      }
    }

    @media screen and (max-width: 500px) {
      .swiper-container {
        height: 400px;
      }
    }

    @media screen and (max-width: 400px) {
      .swiper-container {
        height: 400px;
      }
    }



/*********************** SLIDER ***********************/
#slider {
  max-width:840px;
  overflow: hidden;
  margin: 0 auto;
  z-index: 2;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}

#slider ul li {
  display: block;
  margin: 0;
  padding: 0;
  width: 840px;
  height: 600px;
  background-size: cover;
  background-position:center;
  float:right;
  z-index: 4;
}

a.control_prev, a.control_next {
  position:relative;
  margin-top:-65px;
  color: #FFFFFF;
  width:100px;
  height:65px;
  display:block;
  background-color: #000000;
  text-decoration: none;
  font-size:50px;
  z-index: 9999;
  text-align: center;
  opacity: .4;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  left:0;
  float:left;
  border-radius: 0 5px 5px 0;
}

a.control_next {
  right:0;
  float:right;
  border-radius: 5px 0 0 5px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}



/*********************** PROJECT PAGE (INDIVIDUAL) ***********************/

#projectdata {
  float:left;
  width:30%;
  color: #FFF;
  padding: 40px 0px 0px 0px;
}

#projectdata ul{
  margin: 0px;
  padding: 10px 0px 10px 0px;
  list-style: none;
}

#projectdata h1 {
  font-size: 20px;
}

#projectdata h2 {
  font-size: 14px;
  color: #cccccc;
}

#projectdatainner {
  padding-right:40px;
}

#projectdatainner p{
  font-size: 15px;
  line-height: 1.5em;
}

#projectslides {
  float:right;
  width:70%;
}

#projectdetails {
  background-image: url('/wp-content/themes/a5TBDA/img/detailstripe.png');
  background-position: center;
  background-color: #f3f2e0;
  font-size: 12px;
  padding-top:40px;
  padding-bottom:40px;
  margin:0;
}

#projectdetails p {
  margin: 5px 0px 5px 0px;
}

.projectdetailsinner {
  width: 30%;
  float:left;
}

.projectdetailsouter {
  width: 70%;
  float:left;
}

.projectdetailsouter img {
  width: 100%;
  height:auto;
}

.sketch {
  width:100%;
  height:500px;
  background-position: center;
  background-size: contain;
  background-repeat:no-repeat;
}

.darkbuffer {
  clear:both;
  height:30px;
  width:100%;
}

/*********************** PROJECT PAGE (INDIVIDUAL) MOBILE ***********************/



@media screen and (max-width: 1200px) {
  #projectdatainner {
    padding:0px 200px 40px 200px;
  }
  #projectdata {
    width:100%;
    float:left;
  }
  #projectslides {
    width:100%;
    float:left;
    overflow:hidden;
  }
  #slider ul li {
    max-width:1200px;
  }
  #projectdetails {
    background-image:url();
  }
  .projectdetailsinner {
    width: 100%;
    padding:0px 200px 40px 200px;
    float:left;
  }

  .projectdetailsouter {
    width: 100%;
    float:left;
  }
  #projectdata h2 {
    margin:5px;
  }
  #projectdetails p {
    margin: 3px 0px 3px 0px;
  }

}


@media screen and (max-width: 900px) {
  #slider ul li {
    max-width:900px;
    height: 500px;
  }
  #projectdatainner {
    padding:0px 100px 20px 100px;
  }
  .projectdetailsinner {
    padding:0px 100px 20px 100px;
  }
  .sketch {
    height:400px;
  }
}

@media screen and (max-width: 750px) {
  #slider ul li {
    max-width:750px;
    height: 450px;
  }
}

@media screen and (max-width: 600px) {
  #slider ul li {
    max-width:600px;
    height: 400px;
  }
  #projectdatainner {
    padding:0px 25px 0px 25px;
  }
  .projectdetailsinner {
    padding:0px 25px 0px 25px;
  }
  .sketch {
    height:300px;
  }
}

@media screen and (max-width: 500px) {
  #slider ul li {
    max-width:500px;
    height: 400px;
  }
}

@media screen and (max-width: 400px) {
  #slider ul li {
    max-width:400px;
    height: 400px;
  }
}




/*********************** PROJECTS GALLERY PAGE ***********************/

#projectbg {
  background-color: #fcfcfa;
  padding-bottom:50px;
}

.projectpic {
  float:left;
  height:360px;
  width:49%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  margin:.5%;
  background-color: #333333;
  overflow:hidden;
}

.projectpic a {
  transition: .4s ease;
  opacity:0;
  display:block;
  width:100%;
  height:100%;
  background-color: #333333;
  text-decoration: none;
  color: #FFFFFF;
  padding:40px;
}

.projectpic a:hover{
  opacity: .95;
}

.projectpic h3 {
  font-size: 25px;
  margin:0px 0px 10px 0px;
  text-transform: uppercase;
  color: #e4701e;
  padding-right:100px;
}

.projectpic h4 {
  font-size: 15px;
  margin-bottom:-10px;
}

.pagehalf {
  width:48%;
  margin:1%;
  float:left;
  line-height:1.5em;
  color: #333333;
  margin-top: 30px;
  margin-bottom: 50px;
}

.pagehalf h1{
  font-size:30px;
  color: #333333;
  margin:0px;
  line-height:1.2em;
}

.pagehalf h2{
  line-height:1.5em;
}

.pagehalf p {
  margin:0;
  font-size: 16px;
}

.pagehalf a{
  transition: 1s ease;
  text-decoration:none;
  font-weight:bold;
  color: #e4701e;
}

.pagehalf a:hover {
  color: #333333;
}




/*********************** PROJECTS GALLERY PAGE MOBILE ***********************/


@media screen and (max-width: 1100px) {
  .pagehalf h1{
    font-size:25px;
  }
  .pagehalf p {
    font-size: 12px;
    line-height:1.4em;
  }
  .pagehalf {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .projectpic {
    height:300px;
  }
  .projectpic h3 {
    font-size: 18px;
  }
}

@media screen and (max-width: 600px) {
  .pagehalf h1{
    font-size:16px;
  }

  .pagehalf p {
    font-size: 12px;
  }
  .projectpic h3 {
    font-size: 12px;
    margin-bottom:0px;
  }
  .projectpic h4 {
    font-size: 10px;
    margin-bottom:0px;
  }
  .projectpic {
    height:250px;
  }
  .projectpic a {
    padding:10px;
  }
  #aboutassoc2 {
    padding-left:0px;
  }
  .pagehalf h3 {
    font-size:10px;
  }
}

/*********************** CONTACT ***********************/

.contacthalf {
  width:50%;
  float:right;
  color: #FFFFFF;
}

.contacthalf p {
  margin:10px;
  font-size:12px;
  line-height:1.5em;
}

.contacthalf h1 {
  margin:0px 30px 30px 30px;
  font-size:20px;
}

.contacthalf h2 {
  margin:30px;
  font-size:14px;
}

.orange {
  color:#e4701e;
}

.contacthalf h3 {
  margin:30px;
  font-size:13px;
}

input[type=submit] {
    width:100%;
    padding:20px;
    background:#e4701e;
    color:#FFFFFF;
    border:0 none;
    cursor:pointer;
}

input[type=text] {
    width:100%;
    padding:5px;
    border:0 none;
}

input[type=email] {
    width:100%;
    padding:5px;
    border:0 none;
}

input[type=tel] {
    width:100%;
    padding:5px;
    border:0 none;
}

textarea {
    width:100%;
    padding:5px;
    border:0 none;
}

.pad50 {
  padding: 50px 0px 50px 0px;
}

.hear {
  display:block;
  margin:0px 0px 20px 10px;
}

.contacthalfright {
  width:50%;
  float:left;
}

/*********************** CONTACT MOBILE ***********************/


@media screen and (max-width: 1200px) {
  .contacthalf {
    width:100%;
    float:right;
  }
  .contacthalfright {
    width:100%;
    float:left;
  }
  .pad50 {
    padding: 50px 20px 20px 20px;
  }
  input[type=submit] {
      width:100%;
  }

  input[type=text] {
      width:100%;
  }

  input[type=email] {
      width:100%;
  }

  input[type=tel] {
      width:100%;
  }

  textarea {
      width:100%;
  }
}

@media screen and (max-width: 600px) {
  .pad50 {
    padding: 50px 10px 20px 10px;
  }
}

embed, iframe, object, video {
    display:block;
    max-width: 100%;
    margin:0 auto;
}


/*********************** BLOG ***********************/

.blogg {
  background-image: url('/wp-content/themes/a5TBDA/img/blogbg.jpg');
  background-size:contain;
  background-position: top;
  background-repeat: no-repeat;
  margin: 0;
  padding:50px;
}

.blogg p {
  font-size: 20px;
  line-height: 1.5em;
}

.blogg h1 {
  font-size:3em;
  color: #e0702a;
}

.blogg a {
  transition: 1s ease;
  color: #e0702a;
  text-decoration:none;
  font-weight: bold;
}

.blogg a:hover {
  color: #333333;
}

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

tr td {
  border-bottom:1pt solid #999999;
  padding:10px;
}

.eachblog {
  background-image: url('/wp-content/themes/a5TBDA/img/eachblogbg.jpg');
  background-position: top;
  background-repeat: no-repeat;
  background-color: #fcfcfa;
  padding: 80px 200px 80px 200px;
  margin-bottom:50px;
}

.next-posts {
  display:block;
  float:right;
}

.prev-posts {
  display:block;
  float:left;
}

figure {
  margin:0px;
}

#thearchive {
  text-align:right;
  padding-bottom:50px;
  color: #FFFFFF;
}

#thearchive a{
  margin-left:50px;
  line-height:40px;
}

#thearchive a:hover{
  color:#FFFFFF;
}

/*********************** BLOG MOBILE ***********************/

@media screen and (max-width: 1200px) {
  .eachblog {
    padding: 80px 100px 80px 100px;
  }
  .blogg p {
    font-size: 18px;
  }
}

@media screen and (max-width: 600px) {
  .eachblog {
    padding: 40px 40px 40px 40px;
  }
  .blogg p {
    font-size: 16px;
  }
}

@media screen and (max-width: 600px) {
  .blogg h1 {
    font-size:1.5em;
    color: #e0702a;
  }
  .blogg {
    padding:10px;
  }
  #thearchive a{
    display:block;
    margin-left:20px;
    line-height:40px;
  }
}


/*********************** ABOUT ***********************/

.abouth1 {
  margin:0px 0px 20px 0px;
}

.pagehalf h2{
  font-size:24px;
  color: #333333;
  margin:30px 0px 30px 0px;
  line-height:1.4em;
}

h6 {
  font-size:16px;
}

#aboutteam p {
  margin-top:20px;
  margin-bottom:20px;
  text-align:left;
}

#aboutassoc2 {
  padding-left:50px;
}

@media screen and (max-width: 600px) {
  #aboutassoc2 {
    padding-left:5%;
  }
}

#aboutassoc p {
  margin-top:20px;
  margin-bottom:20px;
  text-align:left;
}

#aboutother p {
  margin-top:20px;
  margin-bottom:20px;
  text-align:left;
}

#aboutawards p {
  margin-top:20px;
  margin-bottom:20px;
}

.pagehalf img{
  max-width:100%;
	width: 100%;
  height: auto;
}

.leftbio {

}

.rightbio {

}


/*********************** ABOUT MOBILE ***********************/

@media screen and (max-width: 1200px) {
  #aboutawards {
    width:45%;
    margin:2%;
    float:left;
  }
  #aboutteam {
    width:45%;
    margin:2%;
    float:left;
 }
}


@media screen and (max-width: 600px) {
  #aboutawards, #aboutother {
    margin:0 auto;
    padding-left: 5%;
    width:90%;
  }
  #aboutteam {
   width:90%;
   margin:0 auto;
   padding-left: 5%;
 }
  #aboutawards p {
    margin-top:15px;
    display:block;
    font-size: 12px;
  }
  #aboutteam p {
    margin-top:15px;
   display:block;
   font-size: 12px;
 }
}


/*********************** FOOTER ***********************/

#thefooter {
  margin: 0px;
  background: #333333;
  padding: 25px;
  color: #ffffff;
  z-index:9999;
  font-size: 14px;
}

#thefooter a {
  transition: 1s ease;
  color: #FFF;
  text-decoration:none;
}

#thefooter a:hover {
  color: #e0702a;
}



/* NEW EDITS / FINAL EDITS */

.wp-caption .alignnone{
width:100% !important;
}