/* 
    Document   : styles
    Created on : Nov 27, 2013, 1:19:04 PM
    Author     : avalera
    Description:
        Purpose of the stylesheet follows.
*/


/* --------------------------------------------------
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */

root { display: block;}
body {color: #4C4C4C; height: 100%;}
#nav-bg {position: fixed; z-index: 333; width: 100%; height: 50px; background: #1F1F1F; display: none;}

.bg-white {background-color: #fff;}
.bg-light-grey {background-color: #efefef;}
.bg-medium-grey {background-color: #444;}
.bg-dark-grey {background-color: #333333;}
.bg-red {background-color: #720000;}
.bg-orange {background-color: #EA5729;}

.white-text {color: #FFF;}
.highlight-text {color: #EA5729;}

.section-padding {padding: 30px 0;}
.padding-height {padding-top: 5%; padding-bottom: 5%;}
.padding-height-bottom {padding-bottom: 10%;}
.padding-height-top {padding-top: 10%;}
.padding-height-medium {padding-top: 5%; padding-bottom: 5%;}
.padding-height-bottom-medium {padding-bottom: 5%;}

.banner-block {position:absolute; z-index:222; top:20%; width:100%;}
.banner-text {font-size: 54px; border: 1px solid #858585; display: inline-block; padding: 10px 30px; letter-spacing:2px; font-weight:100; text-transform: uppercase; line-height: 100%;}
.banner-text span {color: #666;}

.footer {color: #999;}
.footer-contact {display: inline-block; padding: 10px; vertical-align: middle;}
.text-divider {padding: 10px 1%; color: #999;}
.copyright-text {color: #888;}

.thumb-overlay {position: absolute; z-index: 222; top: 0; background: rgba(72,144,181, 0.9); width: 100%; height: 100%; display:none;}
.thumb-company {font-size: 16px; padding: 13% 0 0; text-transform: uppercase;}
.thumb-title {font-size: 30px; font-weight: lighter; padding: 0 0 5%;}
.thumb-cta {border: 1px solid #fff; padding: 2% 4%;}
.thumb-hover:hover .thumb-overlay {display: block; cursor: pointer;}

.logo-banner {display: none;}
.logo-banner-individuals {display: none;}


/* Bootstrap overwrite */
h3 {line-height: 160%; font-size: 22px;}
.navbar {background: none; border: none; }
/*.navbar-inverse {background-color: #1F1F1F; border-color: #080808;}
.navbar-inverse .navbar-nav > li > a {color: #999; background-color: #1F1F1F;}*/

.btn, .btn-default, .btn-lg {background: none; border-radius: 0;}
.btn:hover, .btn-default:hover, .btn-lg:hover {color: #EA5729; border-color: #EA5729; background: rgba(255, 255, 255, .10); }
.dark-bg-btn .btn:hover, .dark-bg-btn .btn-default:hover, .dark-bg-btn .btn-lg:hover {color: #fff; border-color: #fff; background: rgba(255, 255, 255, .10); }

a:link {text-decoration:none; color: inherit;}
a:visited {text-decoration:none; color: inherit;}
a:hover {text-decoration:none; color: #EA5729;}
a:active {text-decoration:none; color: inherit;}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #EA5729;
  /*border-bottom: 2px solid #EA5729;*/
}

.navbar-brand {
  height: 50px;
  padding: 11px 15px;
}

.collapse, .navbar-collapse {
    overflow: hidden;
}
.collapse, .navbar-collapse.in {
    overflow: hidden;
}

 h1,
.h1 {
  font-size: 30px;
  /*line-height: 100%;*/
}
h2,
.h2 {
  font-size: 26px;
}
h3,
.h3 {
  font-size: 20px;
  line-height: 120%;
}
h4,
.h4 {
  font-size: 14px;
}
h5,
.h5 {
  font-size: 10px;
}
h6,
.h6 {
  font-size: 8px;
}

.header-text-width {max-width: 700px; margin-left: auto; margin-right: auto;}
.section-max-width {max-width: 800px; margin-left: auto; margin-right: auto;}

.carousel-control {text-shadow: 0 1px 2px rgba(0, 0, 0, .8); filter: alpha(opacity=80); opacity: .8;}
.carousel-control.left {background: none; filter: none; margin-top: -32px}
.carousel-control.right {background: none; filter: none; margin-top: -32px}
/*.carousel-inner {min-height: 220px;}*/
.carousel-inner .item p {width: 70%; margin: 0 auto; font-size: 18px;}
.cc-carousel-cycle .item p {width: 100%; margin: 0;}
.carousel-indicators {bottom: 0px;}
.carousel-indicators li {margin: 5px;}
.carousel-indicators .active {margin: 4px;}

.text-uppercase {text-transform: uppercase;}




/* -----------------------------------------
   Home Page
----------------------------------------- */

.padding-icon {padding-bottom: 10%;}
.padding-thumb {padding-bottom: 28px;}
.icon-text {max-width: 140px; height: 50px; margin: 0 auto; line-height: 100%; font-size: 14px; }
.section-padding-team {padding: 80px 0;}
.bg-banner {padding-left: 0; padding-right: 0; margin: -45px 0 0; display: block;}
.banner-block-team {position:absolute; z-index:222; top:25%; width:100%;}

/* -----------------------------------------
   About
----------------------------------------- */

.about-thumb-overlay {position: absolute; z-index: 222; bottom: 0; background: rgba(72,144,181, 0.9); width: 100%; height: 20%; overflow:hidden;}
.about-thumb-name {font-size: 18px; padding: 2% 0 0 0; text-transform: uppercase;}
.about-thumb-title {font-size: 22px; font-weight: lighter;}
.about-thumb-cta {padding: 0 4%; text-align: center; display: none;}
.about-thumb-line {padding: 5%}
.about-thumb-line hr {border-color:#E0E0E0; width:20%; margin: 0 auto;}
.about-thumb-hover:hover .about-thumb-overlay {height: 100%; cursor: pointer;}
.about-thumb-hover:hover .about-thumb-name {padding: 30% 0 0 0;}
.about-thumb-hover:hover .about-thumb-cta {display: block;}

.about-anniv img {width: 100%;}
.about-counter {background: #fff url('../img/about/Background_1280x550.png') center top; background-size: 100%;}
.about-counter img {width: 100%; max-width: 828px;}
.about-milestones .about-milestone-heading {text-align: left; border: 1px solid; font-size: 29px; font-weight: bold; display: inline-block; padding: 1% 2%;}
.about-milestones h1 {text-align: left; font-size: 29px; font-weight: bold;}
.about-milestones ul, .about-milestones li {list-style: none; text-indent: none; padding: 0; margin: 0;}
.about-milestones span {font-size: 18px; vertical-align: middle; margin-left: 6px; font-weight: 500;}
.about-milestones .about-timeline > li {background: url('../img/about/timeline-line.png') top left repeat-y; height: 100%;}
.about-milestones .about-timeline-date {background: url('../img/about/timeline-bullet.png') top left no-repeat; height: 100px; padding-top: 3px; padding-left: 58px; font-size: 18px; color: #3f3f3f; font-weight: bold; width: 125px; vertical-align: top; display: inline-block;}
.about-milestones .about-timeline li:last-child {background: none;}
.about-milestones .about-timeline-description {display: inline-block; width: 65%;}
.about-charts h1 {text-align: left; font-size: 24px; font-weight: bold;}
.about-charts span {font-size: 16px; vertical-align: top; margin-left: 6px; font-weight: 500;}
.about-chart-img {width: 80%;}


.social-icon-padding {padding: 5px; width: 30%;}
.social-max-width {max-width: 60px;}


/* -----------------------------------------
   Services
----------------------------------------- */

.section-max-width-summary {max-width: 600px; margin: 0 auto;}
.results-padding {padding-left: 3%; padding-right: 3%;}



/* -----------------------------------------
   Work
----------------------------------------- */

.work-thumb-overlay {position: absolute; z-index: 222; top: 0; background: rgba(33, 33, 33, 0.8); width: 100%; height:100%;}
.work-thumb-cta {text-transform: uppercase; border: 1px solid #858585; font-size: 54px; margin: 20% 0; color: #fff; font-weight:100; display: inline-block; padding: 10px 30px; }
.work-thumb-cta span {color: #666}
.work-thumb-hover:hover .work-thumb-overlay {cursor: pointer; background: rgba(33, 33, 33, 0.9);}
.work-thumb-hover:hover .work-thumb-cta {background: rgba(77, 77, 77, 0.5);}

/*
.video-container {position: relative;}
video, canvas {top: 0; left: 0; width: 100%; max-width: 100%; height: auto;  }
#work-video {width: 100%; height: 100%; position: absolute; top: 0;}
*/

#work-video {width: 100%; background: #fff;}


/* -----------------------------------------
   Contact
----------------------------------------- */

.padding-height-contact {padding-top: 10%; padding-bottom: 5%;}
.contact-height {height: 60px;}
.phone-divider {padding: 0 3%;}



/* -----------------------------------------
   Responsive
----------------------------------------- */
@media (max-width: 767px) {
    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {border-color: #101010; background-color: rgba(31, 31, 31, 1);}
    
    #banner-spacer {height: 395px;}
    .banner-block {top:35%;}
    .banner-image {overflow: hidden;}
    .banner-image img {width: 767px; margin-left: -200px;}
    .banner-text {font-size: 24px;}
    /*.banner-text {font-size: 16px;}*/
    
    /*.icon-text {font-size: 12px;}*/
    
    .thumb-company {padding: 12% 0 0; font-size: 28px;}
    .thumb-title {font-size: 32px;}
    .thumb-cta {font-size: 22px}
    
    .work-thumb-cta {font-size: 24px; }
    
    .section-max-width-related {max-width: 400px; margin: 0 auto;}
    
    .banner-block-team {top: 20%;}
    
    .about-thumb-overlay {height: 30%;}
    .about-thumb-name {font-size: 9px; padding: 4% 0 0 0; text-transform: uppercase;}
    .about-thumb-title {font-size: 10px; font-weight: lighter;}
    .about-thumb-cta {padding: 0 1%; text-align: center; display: none;}
    .about-thumb-line hr {border-color:#E0E0E0; width:20%; margin: 0 auto;}
    .about-thumb-hover:hover .about-thumb-overlay {height: 100%; cursor: pointer;}
    .about-thumb-hover:hover .about-thumb-name {padding: 20% 0 0 0;}
    .about-thumb-hover:hover .about-thumb-cta {display: block;}

    .about-anniv img {width: 80%;}
    .about-milestones .about-milestone-heading {font-size: 20px;}
    .about-milestones .about-timeline-description {display: inline-block; width: 50%;}
    .about-charts h1 {font-size: 16px;}
    .about-charts span {font-size: 10px; vertical-align: middle;}
    .about-chart-img {width: 40%;}
    
    h1,
    .h1 {
      font-size: 30px;
    }
    h2,
    .h2 {
      font-size: 26px;
    }
    h3,
    .h3 {
      font-size: 18px;
    }
    h4,
    .h4 {
      font-size: 16px;
    }
    h5,
    .h5 {
      font-size: 8px;
    }
    h6,
    .h6 {
      font-size: 6px;
    }
    
    .logo-banner-individuals {display: block;}
    .logo-banner-individuals img {width: 60%;}
}

@media (max-width: 567px) {
    .thumb-company {padding: 11% 0 0; font-size: 26px;}
    .thumb-title {font-size: 28px;}
    .thumb-cta {font-size: 20px}

    .about-chart-img {width: 50%;}
}

@media (max-width: 467px) {
    .thumb-company {padding: 10% 0 0; font-size: 24px;}
    .thumb-title {font-size: 26px;}
    .thumb-cta {font-size: 18px}

    .about-chart-img {width: 60%;}
}

@media (max-width: 400px) {
    .thumb-company {padding: 8% 0 0; font-size: 18px;}
    .thumb-title {font-size: 20px;}
    .thumb-cta {font-size: 14px}
}

@media (max-height: 320px) {
    .banner-block {top:20%;}
}

@media (min-width: 450px) {
    .about-thumb-name {font-size: 12px; padding: 6% 0 0 0;}
    .about-thumb-title {font-size: 13px; }
    .about-thumb-cta {padding: 0 4%;}
    
    .banner-image img {margin-left: -100px;}
}

@media (min-width: 600px) {
    .about-thumb-name {font-size: 16px; padding: 6% 0 0 0;}
    .about-thumb-title {font-size: 18px; }
    .about-thumb-cta {padding: 0 4%;}
    
    .banner-image img {margin-left: 0;}
}

@media (min-width: 768px) {    
    #banner-spacer {height: 390px;}
    /*.banner-block {top:25%;}*/
    .banner-text {font-size: 32px;}
    .logo-banner {display: block;}
    
    .work-thumb-cta {font-size: 24px; }
    
    .thumb-company {padding: 8% 0 0; font-size: 12px;}
    .thumb-title {font-size: 16px; padding-bottom: 5%;}
    .thumb-cta {font-size: 10px; }
    
    .about-thumb-name {padding: 2% 0 0 0;}
    
    .collapse, .navbar-collapse.collapsing {
        height: auto !important;
        -webkit-transition: none;
          transition: none;
    }
    
    .collapse, .navbar-collapse.in {
        height: auto !important;
        -webkit-transition: none;
          transition: none;
    }
}

@media (min-width: 992px) {
    #banner-spacer {height: 450px;}
    .banner-text {font-size: 48px;}
    
    .work-thumb-cta {font-size: 54px; }
    
    .thumb-company {padding: 8% 0 0; font-size: 18px;}
    .thumb-title {font-size: 24px;}
    .thumb-cta {font-size: 16px}
}

@media (min-width: 1100px) {
    #banner-spacer {height: 550px;}
}

@media (min-width: 1200px) {
    #banner-spacer {height: 610px;}
    .banner-text {font-size: 54px;}
}

@media (min-width: 1300px) {
    #banner-spacer {height: 660px;}
}

@media (min-width: 1400px) {
    #banner-spacer {height: 700px;}
}

@media (min-width: 1500px) {
    #banner-spacer {height: 760px;}
}

@media (min-width: 1600px) {
    #banner-spacer {height: 800px;}
}

@media (min-width: 1700px) {
    #banner-spacer {height: 860px;}
}

@media (min-width: 1800px) {
    #banner-spacer {height: 900px;}
}

@media (min-width: 1900px) {
    #banner-spacer {height: 960px;}
}

@media (min-width: 2000px) {
    #banner-spacer {height: 1000px;}
}

@media (min-width: 2100px) {
    #banner-spacer {height: 1060px;}
}

@media (min-width: 2100px) {
    #banner-spacer {height: 1100px;}
}

@media (min-width: 2200px) {
    #banner-spacer {height: 1160px;}
}

@media (min-width: 2300px) {
    #banner-spacer {height: 1200px;}
}

@media (min-width: 2400px) {
    #banner-spacer {height: 1260px;}
}

@media (min-width: 2500px) {
    #banner-spacer {height: 1300px;}
}

@media (min-width: 2600px) {
    #banner-spacer {height: 1360px;}
}