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

section { position:relative; }
h1 { font-family: 'Quicksand', sans-serif; color: #d31c23; line-height: 1.25; margin: 0 0 10px; font-size: 40px; font-weight: bold; }
h1 span { font-weight: 500; display: block; }
h2 { font-family: 'Open Sans', sans-serif; font-weight: 500; font-size: 3rem; }
h3 { font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 300; line-height: 1.5625; margin-bottom: 4rem; }
p { font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 300; line-height: 1.5625; }
.fa-1-4x { font-size: 1.4em; }

.btn-default { background-color: rgb(222, 186, 133); color: rgb(255, 255, 255); border-color: rgb(222, 186, 133) !important; margin-top: 20px;transition: all .2s ease-in-out; }
.btn-default:hover, .btn-default:active, .btn-default:focus  { background-color: rgb(172, 136, 83) !important; color: rgb(255, 255, 255) !important; }


#navigation nav { padding-right: 20px; }

#navigation .navbar-custom,
#navigation .navbar-custom .navbar-collapse {
  padding-top: .125rem;
  border-width: 2px 0 2px;
  border-color: rgb(222, 186, 133); 
  background-color: rgb(30, 30, 30);
  color: rgb(255, 255, 255);
}

#navigation .navbar-custom a { color: rgb(255, 255, 255); }

#navigation .navbar-brand {
  padding: 0;
  position: fixed;
  z-index:9;
}

@media (max-width: 335px) {
  .navbar-toggle { margin-right: 2px; }
}

#navigation .navbar-nav:nth-child(1) { padding: 0 0 0 274px; }

#navigation .nav>li:focus,
#navigation .nav>li:hover {
  background-color: rgba(30, 30, 30, 0);
}

#navigation .nav>li.highlight {
  background-color: rgb(222, 186, 133);
  transition: all .5s ease-in-out;
}
#navigation .nav>li.highlight:focus,
#navigation .nav>li.highlight:hover { background-color: rgb(172, 136, 83); }

#navigation .nav>li>a:focus::after,
#navigation .nav>li>a:hover::after {
  content: "";
  position: absolute;
  bottom: 10px;
  width: 40px;
  height: 1px;
  background-color: rgb(222, 186, 133);
  left: 50%;
  margin-left: -20px;
}

.navbar-nav>li>a { padding-bottom: 13px; }


@media (max-width: 1100px) {
  #navigation nav { padding-right: 0px; }
    .navbar-header { float: none;display: block!important; }
    .navbar-toggle { display: block; }
    .navbar-collapse { border-top: 1px solid transparent;box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);text-align:center; }
    .navbar-fixed-top .navbar-collapse { max-height: 400px; }
    .navbar-collapse.collapse { display: none!important; }
    .navbar-nav { float: none!important;margin: 7.5px -15px;padding: 0!important; }
    .navbar-nav>li { float: none; }
    .navbar-nav>li>a { padding-top: 10px;padding-bottom: 10px; }
    .navbar-text { float: none;margin: 15px 0; }
    .navbar-collapse.collapse.in { display: block!important; }
    .collapsing { overflow: hidden!important; }
    .navbar-nav { margin: 0 -15px; }
    .navbar-nav:nth-child(1) { padding-top: 4rem !important; }
}


.hero-panel {
  background: rgb(165,165,165);
  background: -moz-radial-gradient(center, circle cover, rgb(125,125,125) 0%, rgb(19,19,19) 50%, rgb(19,19,19) 100%);
  background: -webkit-radial-gradient(center, circle cover, rgb(125,125,125) 0%,rgb(19,19,19) 50%,rgb(19,19,19) 100%);
  background: radial-gradient(circle at center, rgb(125,125,125) 0%,rgb(19,19,19) 50%,rgb(19,19,19) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7d7d', endColorstr='#131313',GradientType=1 );
  background-image: url('/images/hero-bkg.png'),radial-gradient(circle at center, rgb(125,125,125) 0%,rgb(19,19,19) 50%,rgb(19,19,19) 100%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 20%, cover;
  color: rgb(255, 255, 255);
  padding-top: 120px;
  padding-bottom: 40px;
}

.hero-panel a.learn-more { color:rgb(222, 186, 133); padding-top: 40px; padding-bottom: 20px; font-size: 2rem; display: block; text-decoration: none; }
.hero-panel a.learn-more:hover { color: rgb(172, 136, 83); }
.hero-panel a.learn-more .fa-circle { color:rgb(222, 186, 133); transition: all .5s ease-in-out; }
.hero-panel a.learn-more:hover .fa-circle { color: rgb(172, 136, 83); }
.hero-panel a.learn-more .fa-inverse { color:rgb(255, 255, 255); }
.hero-panel .fa-stack { margin-left:10px;height: 2.2em; }

.hero-panel .hero-image {
  width:100%;
  max-width:700px;
  position: absolute;
  right: 0%;
  bottom: 0%;
  z-index: 3;
  width: 50%;
}

.services-panel {
  padding-top: 60px;
  padding-bottom: 40px;
}


.electrical {
  background: rgb(19,19,19);
  color: rgb(255, 255, 255);    
  background: -moz-linear-gradient(to top, rgb(125,125,125) -35%,rgb(19,19,19) 30%,rgb(19,19,19) 100%);
  background: -webkit-linear-gradient(to top, rgb(125,125,125) -35%,rgb(19,19,19) 30%,rgb(19,19,19) 100%);
  background: linear-gradient(to top, rgb(125,125,125) -35%,rgb(19,19,19) 30%,rgb(19,19,19) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7d7d', endColorstr='#131313',GradientType=1 );
}

.fire {
  background: rgb(255, 255, 255);
  color: rgb(19,19,19);    
  background: -moz-linear-gradient(to top, rgb(19,19,19) -75%,rgb(255,255,255) 15%,rgb(255,255,255) 100%);
  background: -webkit-linear-gradient(to top, rgb(19,19,19) -75%,rgb(255,255,255) 15%,rgb(255,255,255) 100%);
  background: linear-gradient(to top, rgb(19,19,19) -75%,rgb(255,255,255) 15%,rgb(255,255,255) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#131313',GradientType=1 );
}

.panels {
  background: rgb(19,19,19);
  color: rgb(255, 255, 255);    
  background: -moz-linear-gradient(to top, rgb(125,125,125) -35%,rgb(19,19,19) 30%,rgb(19,19,19) 100%);
  background: -webkit-linear-gradient(to top, rgb(125,125,125) -35%,rgb(19,19,19) 30%,rgb(19,19,19) 100%);
  background: linear-gradient(to top, rgb(125,125,125) -35%,rgb(19,19,19) 30%,rgb(19,19,19) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7d7d', endColorstr='#131313',GradientType=1 );
}


.services-panel img {
  width:100%;
  max-width:700px;
  position: absolute;
  bottom: 0%;
  z-index: 3;
  width: 50%;
}

.services-panel .electrical-image, .services-panel .panels-image  {
  left: 0%;
}

.services-panel .fire-image {
  right: 0%;
}

@media (max-width: 991px) {
  .hero-panel .container { padding-bottom: 55vw; }
  .hero-panel .hero-image { width:90%;max-width:unset; }

  .services-panel .container { padding-bottom: 55vw; }
  .services-panel .electrical-image, .services-panel .panels-image, .services-panel .fire-image { width:90%;max-width:unset; }
}


.info-panel {
  background-color: #fff;
  padding-top: 40px;
  background: rgb(255, 255, 255);
  color: rgb(19,19,19);    
  background: -moz-linear-gradient(to top, rgb(19,19,19) -75%,rgb(255,255,255) 15%,rgb(255,255,255) 100%);
  background: -webkit-linear-gradient(to top, rgb(19,19,19) -75%,rgb(255,255,255) 15%,rgb(255,255,255) 100%);
  background: linear-gradient(to top, rgb(19,19,19) -75%,rgb(255,255,255) 15%,rgb(255,255,255) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#131313',GradientType=1 );
}

.alert-default {
  text-align: center;
  color: #7d7d7d;
  background-color: #f1f1f1;
  border-color: #bfbfbf;
}

.point-up { display: none; }

@media only screen and (max-width: 991px) {
  .point-left { display: none; }

  .point-up { display: block; margin-left: auto; margin-right: auto; }
}


.contact-panel {
  background-color: #f1f1f1;
  padding-top: 40px;
  padding-bottom: 40px;
  background-image: url('/images/contact-bkg.png');
  background-repeat: no-repeat;
  background-position: right calc(5vw + 100px) bottom 0%;
  background-size: 500px;
}
@media (max-width: 991px) {
  .contact-panel {
    background-size: 80%;
    background-position: right -50% bottom -40vw;
  }
}

.phone { color:rgb(222, 186, 133); transition: all .5s ease-in-out; }
.phone:hover { color: rgb(172, 136, 83); text-decoration: none; }



.hero-panel-contact {
  min-height: 100vh;
  background: rgb(165,165,165);
  background: -moz-linear-gradient(to top, rgb(125,125,125) -35%,rgb(19,19,19) 30%,rgb(19,19,19) 100%);
  background: -webkit-linear-gradient(to top, rgb(125,125,125) -35%,rgb(19,19,19) 30%,rgb(19,19,19) 100%);
  background: linear-gradient(to top, rgb(125,125,125) -35%,rgb(19,19,19) 30%,rgb(19,19,19) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7d7d', endColorstr='#131313',GradientType=1 );
  color: rgb(255, 255, 255);
  padding-top: 120px;
  padding-bottom: 40px;
}






.section-content {
  text-align: center; 
}
.contact-section {
padding-top: 0rem;
}

.form-line {
border-right: 1px solid #B29999;
}

.form-group {
margin-top: 10px;
}

label {
font-size: 1.1em;
line-height: 1em;
font-weight: normal;
}

.form-control {
font-size: 1.1em;
color: #080808;
}

textarea.form-control {
  height: 135px;
}

.submit {
font-size: 1.5em;
float: right;
color: #fff;
}

.input-error {
  border-left: 5px solid red;
}

@media only screen and (max-width: 991px) {
  .form-line {
    border-right: none;
  }
}


.flashMsg li {
  padding: .5rem 0;
}


.circle-loader {
  margin-bottom: 2.5em;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left-color: rgb(222, 186, 133);
  animation: loader-spin 1.2s infinite linear;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: 7em;
  height: 7em;
}

.load-complete {
  -webkit-animation: none;
  animation: none;
  border-color: #5cb85c;
  transition: border 500ms ease-out;
}

.checkmark {
  display: none;
}
.checkmark.draw:after {
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
  opacity: 1;
  height: 3.5em;
  width: 1.75em;
  transform-origin: left top;
  border-right: 3px solid #5cb85c;
  border-top: 3px solid #5cb85c;
  content: '';
  left: 1.75em;
  top: 3.5em;
  position: absolute;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
  }
  40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
  100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
}