@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Tahoma');
/*----------------------------------------------------------------
    Branding Colour
----------------------------------------------------------------*/
#header2b a,
#header2a a, 
#header2a a:hover,
footer a:hover, 
.btn,  
.contact_detail a, 
.contact_detail a:hover,
.btn:hover, 
.btn:focus, 
.btn:active, 
.formbuilder-form input#submit-form,
.formbuilder-form input#submit-form:hover, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form:hover {
    text-decoration: none;
}

/*----------------------------------------------------------------
    Custom Styles
----------------------------------------------------------------*/
h1, 
h2, 
h3,
h4,
h5,
.btn, 
.formbuilder-form input#submit-form, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form {
    font-family: 'Tahoma', sans-serif;
} 

/*----------------------------------------------------------------
- Form
----------------------------------------------------------------*/

.form, #quote_form_form, 
#extraFormsContainer .modal-dialog {
    background-color: #ccc;
    border-radius:0px;
    border:1px solid #f1f1f1;
}

.formbuilder-form label, .rqrd  {
    color: #000;
}
.formbuilder-form input, 
.formbuilder-form textarea, 
.formbuilder-form select, 
.formbuilder-form select option {
    background-color:#fff;
    color:#333;
    border:1px solid #f1f1f1;
}
/*----------------------------------------------------------------
- Buttons
----------------------------------------------------------------*/
#banner .btn,
#content .btn,
.formbuilder-form input#submit-form, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form {
    background-color: #000;
    color: #fff;
    border-radius:0px;
    white-space:normal;
    transition: all 0.9s ease 0s;
    border:none;
}

#banner .btn:hover
#content .btn:hover,
.formbuilder-form input#submit-form:hover, 
#extraFormsContainer .modal-dialog .formbuilder-form input#submit-form:hover {
    background-color: #444;
    color:#fff;
    transition: all 0.9s ease 0s;
}

#content .btn:before,
#banner .btn:before {
    font-family:'FontAwesome';
    content:'\f095';
    padding-right:5px;
}

/*----------------------------------------------------------------
- Header
----------------------------------------------------------------*/

#header2b a, 
#header2b a:hover {
  color:#444;
}

#header2a {
    font-weight:400;
}

#header2b{
    line-height:20px;
    font-weight: 100;
}

#header2a:before {
    display:none;
}

#header1 img {
    background-color:#fff;
    padding:10px;
    margin-top:6px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

#header{
    padding-top:0;
}

#header2 {
      padding-bottom: 25px;
}

/*----------------------------------------------------------------
- Banner 
----------------------------------------------------------------*/
#banner {
  padding: 70px 0 85px 0;
}

header span, 
#header2a a,
#banner h1,
#banner hr,
#banner p   {
    color: #000;
}

#banner h1 {
    font-size: 45px;
}

#banner p {
    font-weight: 100;
}

#banner strong {
    font-weight:bold;
}

#banner hr {
    border:1px solid #000;
    width:70%;
}


.banner_cover {
    opacity: 0.5;
    background-color: rgb(255, 255, 255);
}

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

#services {
    padding:80px 0 30px 0;
    background-color:#fff;
    border-bottom:4px solid #fff;
}

#services h3 {
    color: #444;
    padding:5px;
    transition: all 0.4s ease 0s;
}

#services hr {
    border:1px solid #afafaf;
    width:30%;
}
#services p {
    color: #000;
    font-weight:100;
}

#service1,
#service2,
#service3,
#service4 {
    transition: all 0.4s ease 0s;
    padding:20px;
}

#service1:hover,
#service2:hover,
#service3:hover,
#service4:hover {
    background-color:rgba(0,0,0,0.1);
}

/*----------------------------------------------------------------
- Content
----------------------------------------------------------------*/

#content {
    background-color: #353535;
}

#content h1,
#content h2,
#content h3,
#content h4 {
    color: #fff;
} 
 body #content  {
         color: #9d9b9b;
 }

#contact h1,
#contact h2,
#contact h3 {
  color:#000;
}

#content .btn {
    width:100%;
}
#contact hr, 
#content hr {
  color: #fff;
  /* border: 1px solid #fff; */
}

#content body, 
#content ul li {
    color: #8e8a8a;
    font-weight: 100;
}


#content img {
    transition: all 0.4s ease 0s;
}

#content ul li:before{
    content:'\f111';
    font-size:10px;
}

blockquote {
    color:#444;
    border-color:#444;
    background-color: #fff;
}

#content1b, #content2a, #content3b,#content4a, #content5b, #content6a {
    background-color: none;
    padding:15px;
}

#contact2f {
    margin-bottom:20px;
}
/*----------------------------------------------------------------
    Contact
----------------------------------------------------------------*/
#contact {
    background-color: #fff;
}

.contact_detail {
    color: #444;
}
/*----------------------------------------------------------------
    Hide Blocks
----------------------------------------------------------------*/
#contact1b,
#contact2d,
#contact2e,
#contact2c,
#content5,
#content6 {
    display: none;
}

/*----------------------------------------------------------------
    Footer
----------------------------------------------------------------*/

footer *, 
footer a , 
footer a:hover, 
footer {
    color: #fff;
}

footer {
    background: #444;
    padding: 15px 0 15px;
}

/*----------------------------------------------------------------
  Media Queries
----------------------------------------------------------------*/
 
@media (max-width: 1025px){
    .container {
     width: 95%;
    }
}
 
@media only screen and (max-width:  1024px) and (min-width: 0px)  {
    #banner1,
    #content1b, 
    #content1a,
    #content2a, 
    #content2b,
    #content3b,
    #content3a,  
    #content4a, 
    #content4b,
    #content5b, 
    #content5a,
    #content6a,
    #content6b {
        width: 100%;
    }
    .content_block{
      padding-bottom:20px;
    }
    #content1b ul li:before, 
    #content2a ul li:before, 
    #content3b ul li:before, 
    #content4a ul li:before, 
    #content5b ul li:before,
    #content6a ul li:before {
        position: relative;
        top: auto;
        left: auto;
    }
    
    #banner {
        padding:25px 0 50px 0;
    }
    
    #banner h1 {
      font-size:40px;
    }

    #banner strong {
      font-size:39px;
    }

    #header2a:before {
      font-size:32px;
    }
    
    header span {
      font-size:36px;
    }
}
@media (min-width: 1024px) {
    #content1a, #content2b, #content3a, #content4b, #content5a, #content6b {
        width: 55%;
    }
    #content1b, #content2a, #content3b,#content4a, #content5b, #content6a {
        width: 45%;
    }
    #content img {
        width:100% !important;
    }  
}
@media (max-width:450px){
    #banner h1{
        font-size:30px;
    }
    #banner strong{
        font-size:32px;
    }
}
@media (max-width:767px){
    .content_block > div div { 
		width: 100%; 
	}
    .formbuilder-form input#submit-form, 
    #extraFormsContainer .modal-dialog .formbuilder-form input#submit-form {
        width:100% !important;
    }
    
    #contact1 {
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
    }

    #banner {
        padding:30px 0 20px 0;
    }
    #banner h1 {
        line-height:45px;
    }
    .banner_cover {
        opacity:0.6;
    }
}
@media (min-width:768px){
    #banner hr {
      margin-left:0;
    }
    #content2a,
    #content4a,
    #content6a {
        text-align:right;
    }    
}
/*----------------------------------------------------------------
  Service Circle
----------------------------------------------------------------*/
@media (max-width: 767px) {  

    #services {
        padding:70px 0 20px;
    }  
    #service3 {
        clear:left;
    }
    #service1:hover,
    #service2:hover,
    #service3:hover,
    #service4:hover {
        transform: scale(1.0);
    }
}

/*----------------------------------------------------------------
- Animation & Extras
----------------------------------------------------------------*/
#wrapper {display: flex; flex-direction: column;}
#services { order: 2; }
#banner { order: 1; }
#content { order: 3; }
#contact { order: 4; }
footer { order: 5; }
#banner1 {
    animation:move 2s ease;
}

@-webkit-keyframes move {
    from {transform: scale(0.8);opacity:0;}
    to {transform: scale(1.0);opacity:1;}
}

#banner .btn:hover, 
#banner .btn:focus, 
#banner .btn:active, 
#banner .btn.active, 
.open>.dropdown-toggle.btn {
    transform: scale(1.1);
    transition: all 200ms ease-in;
}

body::-webkit-scrollbar {
  background-color: #e2e1e1;
    width: 10px;    
}
 
body::-webkit-scrollbar-thumb {
  background-color: #444444;
}