@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
/*----------------------------------------------------------------
  BUTTONS & FORMS
----------------------------------------------------------------*/
.btn,
.formbuilder-form input#submit-form,
#extraFormsContainer .modal-dialog input#submit-form{
    background-color: #FF8B71;
    color: #fff;
    text-transform:uppercase;
    border-radius:5px;
    text-shadow: none;
    text-decoration: none;
}
.btn:hover{
    background-color: #142346;
    color:#fff;
    text-decoration: none;
}
.form, #quote_form_form,
#extraFormsContainer .modal-dialog{
    background-color: #fff;
    color:#000;
}
.formbuilder-form input,
.formbuilder-form textarea{
    background-color: #fafafa;
}
.formbuilder-form label{
    color: #000;
}
/*----------------------------------------------------------------
  Hide Blocks
----------------------------------------------------------------*/
#content6,
#contact1b,
#contact2d,
#contact2f,
#contact2g{
    display:none;
}

/*----------------------------------------------------------------
  Custom Styles
----------------------------------------------------------------*/

p, ul li{}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    font-weight:700;
    text-transform:uppercase;
}

/*----------------------------------------------------------------
  Header
----------------------------------------------------------------*/
#header{
    padding: 20px 0;
}
#header1 {
}
header a,
header a, 
header span, 
#header2a:before, 
#header2a a 
{
    color: #4DB1CC;
    content: '\f098';
    font-size: 34px;
    line-height: 0;
}

#header2{
}
#header2b a{
    font-weight: 300;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
}
#header2a{
    line-height:0.8em;
}
/*----------------------------------------------------------------
  Banner
----------------------------------------------------------------*/

.banner_cover {
    background: #142346;
    height: 100px;
    opacity: 1;
    border-top:solid 5px #4DB1CC;
}
#banner {
    padding: 200px 0 180px;
    margin:auto;
}
#banner1 h1,
#banner1 h2,
#banner1 h3,
#banner1 p,
#banner1 hr{
    color: #fff;

}
#banner1 h1 {
    font-size: 50px;
    font-weight:700;
    line-height: 1em;
}
#banner1 strong{
    font-size:70px;
    font-weight: 600;
}
#banner1 p {
    font-size: 24px;
}
#banner1 hr{
    border: solid 0.7px #fff;
    width:50%;
    margin-left:0;
}
#banner1 {
    animation:move 2s ease;
    width: 100%;
    text-shadow: 3px 3px 9px #000;
}
@-webkit-keyframes move {
  from {transform: scale(0.8);opacity:0;}
  to {transform: scale(1.0);opacity:1;}}

/*----------------------------------------------------------------
  Content
----------------------------------------------------------------*/
#content{
    background-color: #fff;
}
#content h1,
#content h2,
#content h3{
    color: #142346;
    line-height: 1em;
    font-size: 35px;
}

#content p, 
#content ul li{
    color: #333;
    font-weight: 300;
}
#content hr{
    width: 100%;
    border: solid 0.7px #5c4465;
    margin-left:0;
}
#content p.img img{
    box-shadow:none;
    transition: all 0.4s ease 0s;

}
.content_block{
    padding-bottom: 60px;
}
@media (min-width:991px) {
  #content1b,
  #content2a,
  #content3b,
  #content4a,
  #content5b,
  #content6a{
    padding-top:40px;
  }
}

#content p.img img:hover {
    transform: scale(1.1);
}
/*----------------------------------------------------------------
  SERVICES
----------------------------------------------------------------*/
#services{
  background-color: #4DB1CC;
  padding:10px 0 0 0;
}

#services h4 {
    color: #fff;
}

#services p {
    color: #fff;
}

#service1,
#service2,
#service3,
#service4 {
    padding: 5% 4% 5% 4%;
    transition: all 0.4s ease 0s;
}

#service1:hover,
#service2:hover,
#service3:hover,
#service4:hover {
    transform: scale(1.1);
    
}
.serviceImg {
    background-color: #eee;
    border-radius: 50%;
    padding:50px;
    transition: all 0.4s ease 0s;

}
/*----------------------------------------------------------------
  Service Circle
----------------------------------------------------------------*/
@media (min-width:992px){
    #services p {
    margin: 0 -18% 0 -18%;
    }
}
@media only screen and (max-width: 991px) and (min-width: 768px)  {  
    #service1,
    #service2,
    #service3,
    #service4 {
        padding:0% 1% 0% 1%;
    }
    .serviceImg {
        padding:25%;
    }
    #services {
        padding:40px 0 20px;
    }
}
@media (max-width: 767px) {  

    #service1,
    #service2,
    #service3,
    #service4 {
        padding:0% 5% 0% 5%;
    }
    #services p {
        margin: 0 2% 0 1%;
    }
    .serviceImg {
        margin:0% 15% 0% 10%;
    }
    #services {
        padding:40px 0 20px;
    }  
    #service1:hover,
    #service2:hover,
    #service3:hover,
    #service4:hover {
        transform: scale(1.0);
    }
}
@media (max-width: 580px) {
    .serviceImg {
        margin:0% 5% 0% 5%;
    }
}  
@media (max-width: 480px) {  
    #service1,
    #service2,
    #service3,
    #service4 {
        padding:0% 25% 0% 25%;
    }
    #services p {
        margin: 0 -20% 0 -20%;
    }
    .serviceImg {
        padding:20%;
    }
}
/*----------------------------------------------------------------
  CONTACT
----------------------------------------------------------------*/

#contact{
    background-color: #fff;
}
#contact1{
    width:30%;
}
#contact2{
    width:70%;
}
#contact h1,
#contact h2,
#contact h3{
    color: #142346;

}
#contact h3{
    font-size: 35px;
}
#contact h1{
    font-size:25px;
}
#contact p,
#contact ul li,
#contact a{
    color: #333;
    font-weight: 300;
    text-decoration: none;
}
#contact2f{
    margin-bottom:0;
}
#contact2c:before{
    content: '\f098';
}
.contact_detail{
    color: #333;
    font-weight: 300;
}


/*----------------------------------------------------------------
  FOOTER
----------------------------------------------------------------*/

footer {
    background: #142346;
    padding: 15px;
} 

footer a, 
footer p {
    color: #fff;
}

/*----------------------------------------------------------------
    Animation & Extras
----------------------------------------------------------------*/
#wrapper {
    display: flex; 
    flex-direction: column;   
}
#services {
    order: 2;
}
#banner { 
    order: 1; 
    
}
#content { 
    order: 3; 
    
}
#contact { 
    order: 4; 
    
}
footer { 
    order: 5; 
    
}
/*----------------------------------------------------------------
  Media Queries
----------------------------------------------------------------*/

@media only screen and (min-width: 1200px){
    #content1a, 
    #content2b, 
    #content3a,
    #content4b,
    #content5a,
    #content6b{
       width: 60%;
    }

    #content1b, 
    #content2a, 
    #content3b,
    #content4a,
    #content5b,
    #content6a
    {
        width: 40%;
    }

    #content img {
        width:100%;
    }
}
@media (max-width: 991px) {
    #banner{
        padding: 95px 0 80px;
    }
    #contact1,
    #contact2{
        width:50%;
    }
}
@media (max-width: 767px) {
    .banner_cover{
        height: 135px;
    }
    #banner1 h1,
    #banner1 h2,
    #banner1 h3,
    #banner1 p{
        text-align:center;
    }
    #banner1 h1{
    }
    #banner{
        padding: 95px 0 85px;
    }
    .content_block{
        padding-bottom:30px;
    }
    #contact1,
    #contact2{
        width:100%;
        margin-left:0%;
    }
    #header2{
        padding-top:10px;
    }
    #banner1 hr{
        margin-left:auto;
    }
    #header{
    }
}
@media (max-width: 480px) {
    #header{
        background-position-x:20%;
    }
    #banner1 h1{
        font-size:40px;
    }
}
@media (max-width: 375px) {
    #banner1 h1{
        font-size:35px;
    }
}
@media (max-width: 320px) {
    #banner1 h1{
        font-size:30px;
    }
}