/****************************************************************/
/***********************  COLOURS USED  ************************/
/****************************************************************

RED #EC3642
BLACK #484848

/****************************************************************/
/***********************  COLOURS USED  ************************/
/****************************************************************/





/****************************************************************/
/**********************  GENERAL STYLES  ************************/
/****************************************************************/

body {
  font-size: 16px;
  background-color: #f5f5f5;
}

header {
    /*padding-bottom: 25px;*/
    padding-top: 15px;
    background-color: #f5f5f5;
}


.btn-primary {
    background-color: #003D4D;
    border-color: #003D4D;
}
.btn-primary:hover {
    background-color: #CFCFCF;
    border-color: #003D4D;
    color: #003D4D;
    font-weight: bold;
}

span.fa a {
    padding-left: 10px;
}

.page-title {
  margin: 50px 0;
  text-align: center;
}

.services-page h2 {
  margin-top: 0;
}

/*404 PAGE STYLES*/

.jumbotron.center {
  margin: 100px 0;
}

.jumbotron.center h1 {
  /*font-family: impact, Arial, sans-serif;*/
  font-size: 50px;
  font-weight: bold;
}

 .center {
  text-align: center; 
  margin-left: auto; 
  margin-right: auto; 
  margin-bottom: auto; 
  margin-top: auto;
}

/****************************************************************/
/**********************  GENERAL STYLES  ************************/
/****************************************************************/



/****************************************************************/
/**********************  HOMEPAGE STYLES  ************************/
/****************************************************************/

#main-banner {
  background: url("../images/homepage/home-main.png") center top no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 400px;
  padding: 20px 0;
}





#homepage-welcome, #homepage-testimonials, #services-page, #projects-page {
  margin-top: 80px;
  margin-bottom: 80px;
}

#homepage-enquire {

}

#projects-page-first {
  margin-top: 0px;
  margin-bottom: 80px;
}

h2.installation-name {
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  margin-bottom: 20px;
}

.text {
  padding-top: 50px;
}



#homepage-welcome img {
  margin-bottom: 0px;
}

.homepage-enquire .overlay {
    position: relative;
    width: 100%;
    height: 350px;
    top: 0px;
    background-color: rgba(52, 152, 219, 0.8);
    padding-top: 30px;
    padding-bottom: 30px;
}

.homepage-enquire {
    background-color: #333;
    padding: 70px 0 70px 0;
    min-height: 230px;              
}

#homepage-services {
    background-color: #EC3642;
    padding: 100px 0 100px 0;    
    margin-bottom: 80px;
    min-height: 300px;                 
}

#homepage-services h3 a{
    color: #333;
    font-size: 38px;
    font-family: 'Oswald', sans-serif;
    line-height: 48px;
    /*font-weight: bold;*/
    text-transform: uppercase;
    margin-bottom: 40px;
    padding-top: 0px;
    margin-top: 0px;
}

#homepage-enquire h1, #homepage-enquire h2 {
    color: #EC3642;
    font-size: 28px;
    font-family: 'Oswald', sans-serif;
    line-height: 48px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 40px;
    padding-top: 0px;
    margin-top: 0px;
}

section#homepage-partners {
  margin-bottom: 200px;
}

.partners h2{
  color: #EC3642;
  font-family: 'Oswald', sans-serif;
  font-size: 38px;
  margin-bottom: 60px;
}

 #testimonials-row h2{
  color: #EC3642;
  font-family: 'Oswald', sans-serif;
  font-size: 38px;
}





#homepage-services .thumbnail {
  height: 500px;
}

#homepage-services button {
    position: absolute;
    bottom: 7%;
    left: 7%;
}


    
    @media only screen and (min-width : 768px) {

          #homepage-services button {
              position: absolute;
              bottom: 7%;
              left: 3.5%;
          }
    }  

   
    @media only screen and (min-width : 1024px) {

          #homepage-services button {
              position: absolute;
              bottom: 7%;
              left: 7.5%;
          }      

    }


    @media only screen and (min-width : 1440px) {

          #homepage-services button {
              position: absolute;
              bottom: 7%;
              left: 6.5%;
          }      

    }







#homepage-services button a {
  color: #fff;
}

#homepage-services button a:hover {
  text-decoration: none;
}

.more-services h3 a {
  font-family: 'Oswald', sans-serif;  
  font-size: 32px;
  color: #333;
}

.more-services h3 a:hover {
  text-decoration: none;
}


/*PARTNERS*/

.partner {
  height: 200px;
}

.partner img {
  vertical-align: middle;
}

.partners img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}



/****************************************************************/
/**********************  HOMEPAGE STYLES  ************************/
/****************************************************************/





/****************************************************************/
/*******************  SERVICES PAGE STYLES  *********************/
/****************************************************************/

#services .thumbnail {
  height: 450px;
}

.thumbnail {
    padding: 0;
}


/****************************************************************/
/*******************  SERVICES PAGE STYLES  *********************/
/****************************************************************/




/****************************************************************/
/***********************  FOOTER STYLES  ************************/
/****************************************************************/

footer .footer-background {
    background-color: #333;
}

.footer-1-1 {
    padding-top: 60px;
    padding-bottom: 20px;
}

h3.footer-email {
  text-align: center;
}

.footer-webpages, .footer-contact, .footer-certificates {
  margin-top: 20px;
}

.footer-webpages ul li a {
    color: #fff;
    text-transform: capitalize;
}

.footer-contact span.fa {
  color: #fff;
}

#copyright {
  background-color: #EC3642;
}

.copyright {
  padding: 20px 0;
  color: #fff;
}

/****************************************************************/
/**********************  FOOTER STYLES  ************************/
/****************************************************************/





.thumbnail h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 23px;
}

a img.limit-size {
  max-height: 111px;
}

.modal-content a img.limit-size {
  max-height: 100%;
}










/****************************************************************/
/************************  TYPOGRAPHY  **************************/
/****************************************************************/

h1.page-title {
    margin-top: 0;
    color: #EC3642;
    font-family: 'Oswald', sans-serif;
    font-size: 44px;
}

p {
  color: #757575;
  font-size: 17px;
}

header h4.services {
  color: #fff;
  font-size: 14px;
  letter-spacing: 2px;
  font-style: italic;
  text-align: center;
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 12px;
  line-height: 20px;
}

h3.phone, h3.email {
    padding: 0px;
    margin: 0;
    text-align: center;
    font-size: 20px;
}

button.book-online {
  margin-top: 14px;
  margin-left: 29.33%;
}

.btn-danger a {
    color: #fff;
    font-weight: bold;
    /*background-color: #5cb85c;
    border-color: #4cae4c;*/
    text-decoration: none;
}

h3.phone a, h3.email a,  {
  color: #FFBE1C;
}

.contact-1 .contact-info li, .contact-1 .contact-info li a {
   color: #333;
   font-size: 20px;
}


span.fa, .contact-1 .contact-info span {
    color: #EC3642;
}



li.phone {
  font-size: 25px;
  font-weight: bold;
  /*margin-bottom: 10px;*/
}

#main-banner h1 {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  padding: 20px 10px;
  background-color: rgba(0,0,0, 0.2);
}

#main-banner h2 {
  font-weight: 600;
  color: #ffffff;
}

#main-banner a {
  margin-top: 40px;
}

#homepage-welcome h1 {
  margin-top: 0;
  color: #EC3642;
  font-family: 'Oswald', sans-serif;
  font-size: 29px;
  font-weight: bold;
}

#homepage-welcome h1.customer-satisfaction {
  margin-top: 20px;
}





/****************************************************************/
/************************  TYPOGRAPHY  **************************/
/****************************************************************/






/****************************************************************/
/*****************  NAVBAR BRAND (LOGO) STYLES ******************/
/****************************************************************/


a.navbar-brand img {
    /*width: 100%;
    margin-bottom: 100px;*/
}

.navbar-brand {  
    height: 86px;
    padding: 0;
    padding-bottom: 20px;
}


/****************************************************************/
/*****************  NAVBAR BRAND (LOGO) STYLES ******************/
/****************************************************************/



/****************************************************************/
/*****************  NAVBAR STYLES ********************/
/****************************************************************/
.navbar-header {
  padding:10px;
  
}

.navbar-default {
    background-color: #fff;
    border-color: #FFF;
}

.navbar {
    min-height: 0px;
    margin-bottom: 0px;
}

.navbar-toggle {
     position: relative;
     float: none;
     padding: 0px;
     margin-top: 0px;
     margin-right: 0px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-default .navbar-nav>li>a {
    color: #fff;
    font-weight: bold;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
  color: #fff;
  background-color: #484848;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #fff;
    background-color: #484848;
}

.btn-outline {
    color: #000;
    padding: 12px 20px;
    margin: 0;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.1em;
    text-shadow: none;
    /*border: none;*/
    text-transform: uppercase;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
}

.btn-outline.outline-light, .icon.outline-light {
    color: #fff;
    background: none;
    border: 2px solid #ffffff;
}
.btn-outline-lg {
    padding: 8px 30px;
    font-size: 15px;
}

.btn-outline.outline-light:hover, .icon.outline-light:hover {
    color: #2c3e50;
    background: #ffffff;
}

.btn.active, .btn:active {
    background-color: #ddd;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}



span.icon-bar {
    background-color: #ff0000;
}

.navbar-collapse {
    margin-top: 0px;
}

/****************************************************************/
/*************************  NAVBAR STYLES ***********************/
/****************************************************************/





/****************************************************************/
/************************  CONTACT PAGE  **************************/
/****************************************************************/


address {
  margin-bottom: 0;
}

address p {
  color: #333;
  font-size: 20px;
  font-weight: bold;
}




/****************************************************************/
/************************  CONTACT PAGE  **************************/
/****************************************************************/






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

/*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 320px) {

      a img.limit-size {
        max-height: 170px;
      }

      .contact {            
            padding-top: 60px;
          }

      /*MODAL STYLES*/
      .modal-dialog {width: 95%;}
      .thumbnail {margin-bottom:25px;}


    }


        /* Extra Small Devices, Phones */
    @media only screen and (max-width : 480px) {

          header {
                padding-top: 5px;
            }

           .contact {            
            padding-top: 18px;
          }

          span.fa {
              margin-bottom: 7px;
          }

          button.book-online {
              margin-bottom: 10px;
              margin-top: 7px;
          }          

          .navbar-default {
              background-color: #d9534f;
              border-color: #d9534f;
          }

          .navbar-default .navbar-toggle,  {
              background-color: #f5f5f5;
          }

          .navbar-header {
              padding: 5px;
          }

    }



   @media only screen and (max-width : 768px) {

           .services-row-2 .thumbnail, .services-row-3 .thumbnail  {
        height: 350px;
      }

      .services-row-1 .thumbnail {
        height: 420px;
      }




           /*404 PAGE STYLES*/

            .jumbotron.center {
              margin: 20px 0;
            }

            .jumbotron.center h1 {
              font-size: 30px;
              font-weight: bold;
            }

    }








    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {


      a.navbar-brand img {
          width: 100%;
      }

            .navbar-brand {
          height: 0px;
          padding: 0;
          padding-top: 0px;
          /*padding-bottom: 50px;*/
      }

      .contact {            
            padding-top: 0px;
          }

          
          #main-banner h1 {
            font-size: 60px;
            font-weight: bold;
            color: #fff;
            padding: 20px 10px;
            background-color: rgba(0,0,0, 0.2);
          }        

          

          h3.phone, h3.email {
              text-align: right;
              font-size: 24px;
          }


          header button.btn-danger {    
            margin-left: 66.33%;
        }



          .page-title {
            margin: 50px 0;
            text-align: left;
          }
          

          #main-banner {
            /*background: url("../images/main-banner.jpg") center top no-repeat;*/
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            min-height: 700px;
            padding: 37px 0;
          }

          #main-banner h1 {
            font-size: 60px;
            font-weight: bold;
            color: #fff;
            padding: 20px 10px;
            background-color: rgba(0,0,0, 0.5);
          }



          .navbar-default {
              background-color: #EC3642;
              border-color: #484848;
          }

          header {
              padding-bottom: 20px;
              padding-top: 30px;
          }

          header h4.services {
            text-align: left;
          }

          #non-phone-social-media {
              margin-top: 80px;
          }

          #homepage-welcome img {
            margin-bottom: 50px;
          }

          .homepage-enquire .overlay {
              position: relative;
              width: 100%;
              height: 350px;
              top: 0px;
              background-color: rgba(0, 61, 77, 0.8);
              padding-top: 100px;
              padding-bottom: 100px;
          }

          .homepage-enquire h2 {
              color: #fff;
              font-size: 30px;
              font-weight: 600;
              text-transform: uppercase;
              padding-top: 20px;
              margin-bottom: 20px;
          }

          

          h3.footer-email {
            text-align: left;
          }

          /*404 PAGE STYLES*/

            

            .jumbotron.center h1 {
              font-size: 50px;
              font-weight: bold;
            }

/****************************************************************/
/****************MODAL STYLES******************/
/****************************************************************/

.modal-dialog {width: 60%;}
.thumbnail {
  margin-bottom:25px;}

a img.limit-size {
        max-height: 105px;
      }

/****************************************************************/
/****************MODAL STYLES******************/
/****************************************************************/

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

      .copyright {
        padding: 5px 0;
        float: right;
      }

      .copyright h4{
        float: right;
        font-size: 15px;
      }

      /*#homepage-services .thumbnail {
        min-height: 400px;
      }*/

      #homepage-services .caption p {
        min-height: 85px;
      }

      



    }

 /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1024px) {

      header button.btn-danger {    
            margin-left: 75%;
        }

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

      header button.btn-danger {    
            margin-left: 80%;
        }