@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

html,body{
  height:100%;
  width:100%;
  margin:0px;
  padding:0px;
  font-family:'Poppins',sans-serif;
  color: #222;
}

.navbar{
  padding: .1rem;
}
.navbar-nav li{
  padding-right:20px;
}
.nav-link{
  font-size: 1.1em !important;
}

/* For First Carousel */
#slides .carousel-inner img{
 max-height: 850px;
 width: 100%;
}
#slides .carousel-caption{
  position: absolute;
  display:block;
  background-color: black;
  opacity: 0.7;
  width: 28%;
  height: 25%;
  top:70%;
  transform: translateX(180%);
}

#slides .carousel-item.active{
  float:left;
}

.carousel-caption h1{
  font-size:200%;
  text-transform: uppercase;
  text-shadow:1px 1px 10px #000;
}

.carousel-caption h3{
  margin-top:30px;
  font-size: 100%;
  font-weight:100;
  text-shadow: 1px 1px 10px #000;
  padding-bottom: 1rem;
}

/* End For the First Carousel */

.jumbotron{
  padding:0rem;
  border-radius:0;
}

span{
  color: #5271ff;
}

span.status{
  color: #D3D3D3;
}

.padding{
  padding-bottom:2rem;
}

.circle i{
  text-align: center;
}

.fa-info-circle {
  font-size:3em;
  transform: translateY(30%);
  color:#5271ff;
}
.welcome{
  width: 75%;
  margin:0 auto;
  padding-top:2rem;
}

.welcome hr{
  border-top:2px solid #b4b4b4;
  width: 95%;
  margin-top:.3rem;
  margin-bottom:1rem;
}
.fa-pencil-alt{
  color:#e54d26;
}
.fa-building{
  color:#563d7c;
}
.fa-paint-roller{
  color:#2163af;
}
.fa-pencil-alt, .fa-building, .fa-paint-roller{
  font-size:4em;
  margin:1rem;
}

.fa-toolbox{
  font-size:3em;
  transform: translateY(20%);
  color:#5271ff;
}

.fa-bolt{
  font-size:3em;
  transform: translateY(20%);
  color:#5271ff;
}

/* Card section */
.card{
  height: 500px;
  width: 100%;
}

.card-body{
  align-items: flex-start;
}
/* Second Carousel */
.slick-slide{
  margin-right: 15px;
  margin-left: 15px;
}

.slick-slider{
    margin: 0 auto;
}

.slick-prev:before, .slick-next:before { 
    font-family: "slick"; 
    font-size: 100px; 
    line-height: 0;
    color: white; 
    opacity: 0.35; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev, .slick-next{
  top:45%;
}
 
.slick-next:before {
    content: "›";
}

.slick-next {
    right: 43px;
}
.slick-prev:before {
    content: "‹";
}

.slick-prev {
    left: 30px;
    z-index: 1;
}

.textbtn{
 width: 100%;
}
/* Social Media Section */

.social a{
  font-size: 2.5em;
  padding: 3rem;
}
.fa-facebook{
  color:#3b5998;
}
.fa-twitter{
  color:#00aced;
}
.fa-google-plus-g{
  color: #dd4b39;
}

.fa-facebook:hover,
.fa-twitter:hover,
.fa-google-plus-g:hover{
  color: #d5d5d5;
}

footer{
  background-color: #3f3f3f;
  color: #d5d5d5;
  padding-top: 2rem;
}
hr.light{
  border-top:1px solid #d5d5d5;
  width:75%;
  margin-top: .8rem;
  margin-bottom: 1rem;
}
footer a{
  color: #d5d5d5;
}
hr.light-100{
  border-top:1px solid #d5d5d5;
  width:100%;
  margin-top: .8rem;
  margin-bottom: 1rem;
}
/* Contact Form */


/*---Media Queries --*/
@media (max-width: 992px) {
      .social a{
        font-size:4em;
        padding:2rem;
      }
      
    #slides .carousel-caption{
      top:60%;
      width: 35%;
      height: 30%;
      transform: translateX(130%);
    }

    .carousel-caption h1{
      font-size:100%;
    }

    .carousel-caption h3{
      font-size: 80%;
      font-weight:100;
      padding-bottom: .2rem;
    }

    /* Card section */
.card{
  height: 100%;
  width: 100%;
}

.card-body{
  align-items: flex-start;
}

    .buttonSubmit{
      left:-18px;
    }


}


@media (max-width: 768px) {
/* First Carousel */
    .carousel-caption{
    top:45%;
  }

  .carousel-caption h1{
    font-size:350%;
  }

  .carousel-caption h3{
    font-size: 140%;
    font-weight:400;
    padding-bottom: .2rem;
  }

  .carousel-caption .btn{
    font-size:95%;
    padding:8px 14px;
  }/* End of First Carousel */


  .display-4{
    font-size:200%;
  }

  .social a{
      font-size:2.5em;
      padding:1.2rem;
    }

    .buttonSubmit{
      left:20px;
    }

}

@media (max-width: 576px) {
/*  First Carousel */
   .carousel-caption{
    top:40%;
  }

  .carousel-caption h1{
    font-size:250%;
  }

  .carousel-caption h3{
    font-size: 110%;
  }

  .carousel-caption .btn{
    font-size:90%;
    padding:4px 8px;
  }

  .carousel-indicators{
    display:none;
  }/*  End of First Carousel */

   .display-4{
    font-size:160%;
  }

  .social a{
      font-size:2em;
      padding:.7rem;
    }
}

/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}

/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/