/*
 * Globals
 */
html,
body {
  height:100%;
  background:#f9f9f9;
}

body {	
      color: #5f6062; 
      font-family: 'Raleway', sans-serif;
      font-size: 14px;
      line-height:23px;
}
h1, h2, h3, h4, h5, h6{font-family: 'Raleway', sans-serif;}


p {    margin:0px 0px 15px 0;}


/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritence from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}

.preloadImgs{display:none !important;}


/*
 * Base structure
 */

.navPhoneNum{float:right; color:#ffffff; color: #c4dcce; font-weight:600; font-size:20px; margin:50px 0 0 12px;}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;  
  /*background: url("../images/bg-homepage.jpg") no-repeat center center;  background-size: cover;
  background: url("../images/bg-homepage-new-2.jpg") no-repeat center center;  background-size: cover;*/
  background: url("../images/bg-homepage-new-3.jpg") no-repeat center center;  background-size: cover; 
}
.site-wrapper.bg-2{background: url("../images/bg-homepage-2.jpg") no-repeat center center;  background-size: cover; }
.site-wrapper.bg-3{background: url("../images/bg-homepage-3.jpg") no-repeat center center;  background-size: cover; }
.site-wrapper.bg-4{background: url("../images/bg-homepage-4.jpg") no-repeat center center;  background-size: cover; }
.site-wrapper.bg-5{background: url("../images/bg-homepage-5.jpg") no-repeat center center;  background-size: cover; }


.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.scrollDown{
  position:absolute;
  bottom:50px;
  clear:both;
  width:100%;
  height:20px;
  display:block;  
  text-align:center;
}
.scrollDown.toProfile{
  position:relative;
  bottom:30px;
  clear:both;
  width:100%;
  height:20px; height:1px;
  display:block;  
  text-align:center;
}
  .scrollLink{
    display:block;
    width:auto;
    color:#ffffff;
    font-size: 14px;
    line-height: 30px;
  }
  .scrollLink a:hover{color: #fb5e31;}
  
  .scrollDown a:hover,
  .scrollDown.toProfile a:hover{color: #fb5e31;}
  
  .theArrow {
    display: block;
    width: 14px;
    height: 8px;
    margin: 0 auto;
    background: url('img/scrollArrow.png') no-repeat 0 0;
  }
  .theArrow:hover{background: url('img/scrollArrowHover.png') no-repeat 0 0;}
  .cover-container {
    margin-right: auto;
    margin-left: auto;
  }
  .scrollAnchor{height:0px; position:relative; top:30px;}

.siteLogo{width:100%; position:absolute; top:30%; top:65%;  }
.bigLogo{width:900px; margin:0 auto; }
.bigLogo h1{
  font-family: 'Raleway', sans-serif;
  font-size:88px;
  line-height: 1.1; line-height: 66px;
  color:#222222; color:#ffffff;
  font-weight:400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  text-transform:none;
}
.bigLogo h1 .makeSmaller{
  font-size:44px;
  padding-left:250px;
  }

/*.inner.cover .siteLogo h1{
  font-family: 'Raleway', sans-serif;
  font-size:88px;
  color:#222222; color:#ffffff;
  font-weight:400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  text-transform:none;
  }*/


/* Padding for spacing */
.inner {
  padding: 30px;
}


/*  Projects links */
.projectLinks{clear:both; width:100%; padding-top:0px; border-top: 120px solid #F9F9F9;}
.projectRow{clear:both; width:100%; min-height:400px;}
.projectLeft{float:left;display:block; width:50%; height:400px; border:1px solid #ffffff; border: 40px solid #F9F9F9; border-left: 80px solid #F9F9F9;}
.projectRight{float:right; display:block; width:50%; height:400px; border:1px solid #ffffff; border: 40px solid #F9F9F9; border-right: 80px solid #F9F9F9;}

.projectLeft.imgLink-1{background: url("../images/projectLink-1.jpg") no-repeat center center;  background-size: cover;}
.projectLeft.imgLink-1:hover{background: url("../images/projectLink-1-Hov.jpg") no-repeat center center;  background-size: cover;}

.projectRight.imgLink-2{background: url("../images/projectLink-2.jpg") no-repeat center center;  background-size: cover;}
.projectRight.imgLink-2:hover{background: url("../images/projectLink-2-Hov.jpg") no-repeat center center;  background-size: cover;}

.projectLeft.imgLink-3{background: url("../images/projectLink-3.jpg") no-repeat center center;  background-size: cover;}
.projectLeft.imgLink-3:hover{background: url("../images/projectLink-3-Hov.jpg") no-repeat center center;  background-size: cover;}

.projectRight.imgLink-4{background: url("../images/projectLink-4.jpg") no-repeat center center;  background-size: cover;}
.projectRight.imgLink-4:hover{background: url("../images/projectLink-4-Hov.jpg") no-repeat center center;  background-size: cover;}

.projectLeft.imgLink-5{background: url("../images/projectLink-5.jpg") no-repeat center center;  background-size: cover;}
.projectRight.imgLink-6{background: url("../images/projectLink-6.jpg") no-repeat center center;  background-size: cover;}

.projectLeft h2,
.projectRight h2{
  width:100%;
  margin:0 auto;
  padding:10px 0;
  color:#ffffff;
  font-size:24px; font-size:18px;
  text-transform:uppercase;
  font-weight:500;
  text-align:center;
  position:relative;
  top:45%;
  background-color: rgba(0, 0, 0, 0.45);
}
.projectLeft h2:hover,
.projectRight h2:hover{color: #c4dcce; }

.studio{clear:both; width:100%; padding-top:0px;}

.studio h3{width:100%; margin:0 0 45px 0; padding:0; text-align:center; font-size:47px; font-weight:300; text-transform:none;}

.contentWrap{clear:both; width:100%; min-height:500px;}
.studio .contentWrap{min-height:600px;}
.content-L{float:left; display:block; width:50%; padding-right:30px;}
.content-R{float:right; display:block; width:50%;}
.content-R img{width:100%; margin-top:10px;}

.contentWrap ul{margin: 0 0 0 15px; padding:0;}
.contentWrap li{margin:0; padding:0;}

.content-L h4,
.content-R h4{
  float:left;
  width:100%;
  margin:0 0 15px 0;
  padding:0 0 15px 0;
  font-size:18px;
  font-weight:700;
  text-transform:none;
  border-bottom:1px solid #c4dcce;
}

.contentWrap.guyB{margin-top:100px;}
.contentWrap.guyB .content-L{float:left; display:block; width:50%; padding:0;}
.contentWrap.guyB .content-R{float:right; display:block; width:50%; /*padding-left:30px;*/}

.contentWrap.guyB .content-L img{width:100%; margin-top:10px; padding-right: 30px;}

.contentWrap.designP{margin-top:43px;}

section.testimonials{
  display:block;
  min-height:250px;
  background: url("../images/bg-testimonials.jpg") no-repeat center center;
  background-size: cover;
}
section.testimonials.drawing{display:block;
  min-height:250px;
  background: url("../images/bg-testimonials-2.jpg") no-repeat center center;
  background-size: cover;
  }

.testimonials .contentWrap{ min-height:250px;}

.testimonials h3{
  width:100%;
  margin: 50px 0 5px 0;
  padding:0;
  text-align:center;
  font-size:47px;
  font-weight:300;
  text-transform:none;
  color:#ffffff;
}
.thumbnail p,
.thumbnail h5{width:100%; text-align:center; color:#ffffff;}

.thumbnail p.lead{font-size:18px;}

.thumbnail h5{ font-size: 18px;font-weight: 700; text-transform:none;}

.plansWrap img {width:100%; border:1px solid grey;}

.plansWrap  a{display:block; clear:both; width:100%; margin-bottom:10px; padding-top:60px; color: #5f6062;font-size: 18px;font-weight: 700;}

section.contact{
  display:block;
  min-height:250px;
  background: #f9f9f9;
}
.contact .contentWrap{ min-height:250px;}

.contact h3{
  width:100%;
  margin: 0 0 50px 0;
  padding:0;
  text-align:center;
  font-size:47px;
  font-weight:300;
  text-transform:none;  
}


.col-lg-6.contactDetails{max-width:330px; max-width:100%; padding-left:0px;}



.contactDetails h3,
.contactDetails h4,
.contactDetails a{
  font-size:30px;
  font-weight: 100;
  text-align:left;
  color: #5f6062;
}
.contactDetails h3{margin:0 0 20px 0; padding:0; text-transform:none;font-size:30px;}
.contactDetails h4{width:100%; margin:0; padding:0; text-transform:none;}

.contactDetails a{clear:both;  /*width:100%;*/}
.contactDetails a:hover{}

.col-lg-6.contactForm{float:left; } /* defined for max width = 1199px - reverts to float right below @ query for min-width 1200*/
.col-lg-6.contactForm .col-lg-12{padding-left:0px; padding-right:0px;}

.col-lg-6.contactForm .form-control{border-radius: 0px;}

.innerpageWrap{clear:both; width:100%; margin:200px 0 0 0; padding:0px;}

.projects{clear:both; width:100%; padding-top:0px; padding-left: 15px; padding-right: 15px;}
.projects .row{border-bottom:solid 1px #c4dcce; }


.projects h1{width:100%; margin:0 0 45px 0; padding:0; text-align:center; font-size:47px; font-weight:300; text-transform:none;}

.projects .contentWrap{clear:both; width:100%; min-height:300px; padding-bottom: 90px;}

.galleryDescription{width:100%; padding-bottom:20px;}
.galleryDescription h2{font-size:21px; font-weight:300; line-height:1.4; text-transform:none;}

.galleryWrap{clear:both; width:100%; min-height:200px;}

section.contact.inner-P {padding-top: 0px !important;}

.photogalleryTable tbody,
.photogalleryTable tr{width:100%;}

.photogalleryTable .photogalleryItem{width:25%;}
.photogalleryTable .photogalleryItem img{width:100%;}

.photogalleryNavigation a{color: #5f6062;}
.photogalleryNavigation a:hover{color: #c4dcce;}

/*
 * Cover
 */

.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}


/*
 * Footer
 */

/*make image display white so as not to see it but maintain layout integrity*/
#imageData #numberDisplay {color: #ffffff;}

/*
 * Affix and center
 */

@media (min-width: 768px) {
 
  
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */ 
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media(max-width:1024px) {
  nav.navbar .container {padding-left:0px; padding-right:0px;}
  .bigLogo {width: 800px; text-align: center; line-height: 48px;}
  .bigLogo h1 {font-size: 64px; line-height: 48px; }
  .bigLogo h1 .makeSmaller{font-size:33px; padding-left:0px;}
  .projectRow{min-height:250px;}
  .projectLeft,
  .projectRight{/*height:250px;*/ /*height:300px;*/ border: 20px solid #F9F9F9; }
  .projectLeft{ border-left: 40px solid #F9F9F9;}
  .projectRight{ border-right: 40px solid #F9F9F9;}

  .content-L {padding-left: 15px;}
  .contentWrap.guyB .content-R {padding-right: 15px;}
  .col-lg-6.contactDetails {padding-left: 15px; padding-right: 15px;}
  .thumbnail p.lead {font-size: 16px;}
}

@media (min-width: 992px) {  
  .cover-container {
    width: 700px;
  }
}

.mobileOn{display:none !important;}
.mobileOff{display:block !important;}
.justPhone{display:none !important;}

/* *********** MOBILE DEVICES ************************* */

@media(max-width:768px) {
    .mobileOn{display:block !important;}
    .mobileOff{display:none !important;}
    /*DROPDOWN CUSTOMIZATION*/
    nav.navbar .container {padding-left:15px; padding-right:15px;}
    .navbar-nav > li:last-child{padding-bottom:20px;}
   .navbar-default .navbar-nav > .open > a,
   .navbar-default .navbar-nav > .open > a:focus,
   .navbar-default .navbar-nav > .open > a:hover {
    color: #ffffff; 
    }
    .navbar-default .navbar-nav>.active>a {color:#ffffff;}
    .navbar-default.navbar-shrink .dropdown-menu{ background-color:#2A81B8;}
    
    .byLine{display:none;}
    section.aboutRGC{padding:50px 0;}
    .innerBanner {margin-top: 50px;}
    .innerBanner h1 {padding-left: 13px;}
    .bigLogo{width:100%; margin:0; text-align:center; }
    /*.projectLeft{ border:none; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff; border-right:1px solid #ffffff; border-left:none;}*/
    .projectLeft{ height:250px; border:none; border-top:20px solid #F9F9F9; border-bottom:20px solid #F9F9F9; border-right:20px solid #F9F9F9; border-left:40px solid #F9F9F9;}
    /*.projectRight{border:none; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff; border-left:1px solid #ffffff; border-right:none;}*/
    .projectRight{height:250px; border:none; border-top:20px solid #F9F9F9; border-bottom:20px solid #F9F9F9; border-left:20px solid #F9F9F9; border-right:40px solid #F9F9F9;}

    .content-L {width: 100%;}
    .content-R {float: left;width:100%;}
    .contentWrap.guyB .content-L {width: 100%;}
    .contentWrap.guyB .content-L img {margin-top: 10px;padding-right:0px;}
    .contentWrap.guyB .content-R {float: left;width: 100%;padding-left: 15px;}
    .content-R h4 {margin: 15px 0 15px 0;}
    .innerpageWrap {margin: 100px 0 0 0; margin: 120px 0 0 0;}
    .galleryDescription h2 {font-size: 20px;}
    .inner-P .contactDetails h3,
    .inner-P .contactDetails h4{font-size: 20px;}   
    .projects h1 {padding: 0; text-align: left; font-size: 30px;}    
    footer .copyright {width:100%;}
    footer .siteby {clear:both; float:none; width:100%;}
}

@media(max-width:600px) {
  .bigLogo h1 { line-height: 68px;}
}



    



/* *********** PHONE STYLES ************************* */

@media(max-width:480px) {
    .justPhone{display:block !important;}
    .site-wrapper {height: 60%;min-height: 60%;    
      background: url("../images/bg-homepage-small.jpg") no-repeat center center;
      background: url("../images/bg-homepage-small-new.jpg") no-repeat center center;
      background-size: cover; 
    }
    .siteLogo {top: 24%; top:35%;}        
    .bigLogo h1{font-size:30px; line-height: 28px; font-weight:600; }    
    
    .bigLogo h1 .makeSmaller {font-size: 18px; padding-left:0px;}
    
    /*.scrollDown{display:none;}*/
    
    section.justPhone.contact{
        padding: 20px 0;
        height:20px;
    }
    section.justPhone.contact h3,
    section.justPhone.contact h4,
    section.justPhone.contact h4 a{
        font-size: 20px;
        margin:0;
        padding: 0;
        text-align: center;
        font-family: 'Raleway', sans-serif;
        font-weight: 400;
        text-transform: none;
        color: #5f6062;
    }
    section.justPhone.contact h3{
      margin-top: 50px;
    }
    .scrollDown.toProfile{display:none;}
    
    .scrollAnchor {    
        position: relative;
        top: 230px;
    }
    
    .projectLinks{border-top:20px solid #F9F9F9;}

    
    .projectLeft,
    .projectRight{clear:both;float:none; width:100%; height:250px;}
    .projectLeft{border:2px solid #F9F9F9; border-right:none; border-left:none;}
    .projectRight{border:2px solid #F9F9F9; border-left:none; border-right:none;}
    
    .studio .contentWrap {
        min-height: 350px;
    }
    
    .designP .content-R,
    .studioProfile .content-R{display:none;}
  
    .carousel-caption {left:5%; right: 5%;}
    .carousel-caption h1{font-size:18px; /*color:#ffe600;*/}
    
    .innerBanner {height:150px;margin-top: 50px;}
    .innerBanner h1 {
	position: relative;
	top: 50px;
	font-size: 24px;
	font-weight:700;
	width: 100%;
	padding-left: 13px;
    }
    .innerContentWrap .statement-wrap h2{font-size: 20px;line-height: 24px;}
    section.aboutHDS{padding-top:50px;}
    .statement-wrap h1 {font-size: 20px; line-height:24px;}
    .statement-wrap h2 {font-size: 16px; line-height:20px;}
    .statement-wrap h3 {font-size: 16px; line-height:20px;}
    /*.statement-wrap h2,
    .statement-wrap h3,
    .statement-wrap p{padding-left:10px; padding-right:10px;}*/
    
    .contactDetails h3,
    .contactDetails h4,
    .contactDetails a{font-size:20px;}
    
   section.contactWrap {padding: 50px 0px 100px 0px;}
   .contactWrap h3 {/*text-align:left;*/ font-size: 20px;}
   
   .content-L {padding-right: 15px;}
   .content-R h4 {margin: 30px 0 15px 0;}
   
   .studio h3,
   .testimonials h3,
   .contact h3{font-size: 30px; padding: 0 15px; text-align:left;}
   .testimonials h3{text-align:center;}
   .contactDetails h3{font-size: 20px; padding: 0 ;}
   section.testimonials .row { max-width: 99%;}
   
   .testimonials h3 {margin: 0px 0 5px 0;}
   
   
    .col-lg-6.contactForm .col-md-12.cntrl4mobile,
    .col-lg-6.contactForm .col-lg-12.subButton.cntrl4mobile {
        width: 100%;
        text-align: center;
        margin-top:0px;
    }
    .btn-xl {width:100%;}
    
    
    .form-group.name-F {width:100%; padding:0;}
    .form-group.name-L {float:left; width:100%; padding:0;}
    footer .row {max-width: 90%; padding: 20px 0; text-align:center;}
    

}
/*end*/