.clearfix{clear: both;}
body{margin: 0px; font-family: 'Open Sans', sans-serif;}
.page-container{margin-top: 135px;}
.container{width: 1400px; margin: 0 auto; overflow: hidden;}
a{text-decoration:  none;}


/* Header */
.header-container{width: 100%;padding-bottom: 7px; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; background-color: white; box-shadow: 0px 1px 9px 1px #828282;}
.header-container .top-bar{background-color: #f58d1d;color: white;padding: 5px 0px;margin-bottom: 10px;}
.header-container .top-bar .statistics-container{float: left; width: 50%;}
.header-container .top-bar .statistics-container ul{padding: 0px; margin: 0px; list-style: none;}
.header-container .top-bar .statistics-container ul li{display: inline-block;margin-right: 15px;font-size: 16px;}
.header-container .top-bar .statistics-container ul li i{margin-right: 5px;}
.header-container .top-bar .contact-container{float: left; width: 50%; text-align: right;}
.header-container .top-bar .contact-container .phone{float: right; border-right: 1px solid white; padding-right: 10px;}
.header-container .top-bar .contact-container .email{float: right; padding-left: 10px;}
.header-container .top-bar .contact-container a{color: white;font-size: 16px;}
.header-container .top-bar .contact-container a i{margin-right: 5px;}
.header-container .logo-container{float: left; width: 250px;}
.header-container .logo-container img{width: 100%;}
.header-container .nav-container{float: left; width: calc(60% - 250px);}
.header-container .nav-container ul{padding-left: 20px; margin: 0px; list-style: none;}
.header-container .nav-container ul li{display: inline-block;line-height: 86px;margin-right: 29px;font-size: 20px;}
.header-container .nav-container ul li a{color: #404040;text-transform: uppercase;}
.header-container .quote-start-container{float: left; width: calc(40%); text-align: right;}
.header-container .quote-start-container a{border: 2px solid #f58d1d;color: #f58d1d;text-transform: uppercase;padding: 10px 10px;display: inline-block;margin-top: 20px; transition: all 300ms;}
.header-container .quote-start-container a:hover{background-color: #f58d1d; color: white; transition: all 300ms;}

/* Home Page */
.homepage-container .banner-container{overflow: hidden; position:relative; margin: 0 auto; height: 600px;}
.homepage-container .banner-container ul.banners{padding: 0px; margin: 0px; transition: all 300ms;}
.homepage-container .banner-container ul.banners li{height: 100%; list-style: none; background-size:cover; background-position: 0px 77%; position:relative; float: left; height: 600px;}
.homepage-container .banner-container ul.banners li img{width:100%; height:auto; max-height:600px;}
.homepage-container .banner-container ul.banners li a{height: 100%; width:100%; display:block;}
.homepage-container .banner-container .banner-gallery-controls{position: absolute; width: 100%; top: calc(50% - 55px); pointer-events: none;}
.homepage-container .banner-container .banner-gallery-controls div{width: 50%; font-size: 55px; color: black;}
.homepage-container .banner-container .banner-gallery-controls div i{padding: 0px 8px; line-height: 42px; pointer-events: all;}
.homepage-container .banner-container .banner-gallery-controls #left{text-align: left; float: left;}
.homepage-container .banner-container .banner-gallery-controls #right{text-align: right; float: right;}
.homepage-container .banner-container ul.banner-thumbnails{display: block; list-style: none; padding: 0px; margin: 0px;}
.homepage-container .banner-container ul.banner-thumbnails li{display: inline-block; height: 10px; width: 10px; background-color: #e2eaec; margin: 20px 10px 0px; border-radius: 5px;}
.homepage-container .banner-container ul.banner-thumbnails li.active{background-color: #343a42;}
.homepage-container .introduction-container{display: flex; flex-wrap: wrap; margin: 125px 0px;}
.homepage-container .introduction-container .introduction-image{float: left; width: 300px; margin-right: 40px; background-size: cover;}
.homepage-container .introduction-container .introduction{float: left;width: calc(100% - 340px);color: #404040;}
.homepage-container .introduction-container .introduction h1{text-transform: uppercase; color: #f58d1d; margin-top: 5px;}
.homepage-container .introduction-container .introduction p{font-size: 18px;}
.homepage-container .introduction-container .introduction a{color: #f58d1d;}
.homepage-container .category-container{margin: 60px 0px;}
.homepage-container .category-container .category{position: relative; background-color: #ececec;float: left;width: calc(33.33% - 10px);height: 400px;margin-bottom: 20px;background-size: cover;background-position: center; transition: all 300ms;}
.homepage-container .category-container .category:nth-of-type(1), .homepage-container .category-container .category:nth-of-type(3), .homepage-container .category-container .category:nth-of-type(5), .homepage-container .category-container .category:nth-of-type(7){margin-right: 20px;}
.homepage-container .category-container .category.large{background-color: #ececec;width: calc(66.66% - 10px);background-size: cover;background-position: center;}
.homepage-container .category-container .category .overlay{position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0;  transition: all 300ms; z-index: 99; background-color: rgba(245, 141, 29, 0.51); color: white;}
.homepage-container .category-container .category:hover .overlay{opacity: 1; transition: all 300ms;}
.homepage-container .category-container .category .overlay h3{color: white; font-weight: 100; position: absolute; bottom: 10px; width: 100%; left: 0px; text-align: center;}
.homepage-container h3{text-transform: uppercase; color: #f58d1d; font-size: 2em; width: 100%; text-align: center;}
.homepage-container .our-accreditations-container{background-color: #ececec;}
.homepage-container .our-accreditations-container ul{padding: 20px 0px; margin: 20px 0px; text-align: center;}
.homepage-container .our-accreditations-container ul li{display: inline-block;width: calc(16.66667% - 14px);height: 100px;background-color: #ececec;margin-right: 10px;background-size: cover;}
.homepage-container .our-accreditations-container ul li:nth-last-child(){margin-right: 0px;}

.homepage-container .category-slider-container{overflow: hidden;position: relative;margin: 75px 0px;}
.homepage-container .category-slider-container ul.categories{padding: 0px; margin: 0px; transition: all 300ms;}
.homepage-container .category-slider-container ul.categories li{height: 100%; list-style: none; background-size:cover; background-position:center; position:relative; float: left; height: 600px;}
.homepage-container .category-slider-container ul.categories li h2{color: #f58d1d;text-transform: uppercase;text-align: center;font-size: 35px;margin: 20px 0px;}
.homepage-container .category-slider-container ul.categories li .image-container{float: left;width: 300px;margin-right: 30px;min-height: 500px;background-size: contain;background-repeat: no-repeat;}
.homepage-container .category-slider-container ul.categories li .category-wrapper{display: flex; flex-wrap: wrap;}
.homepage-container .category-slider-container ul.categories li .information-container{float: left;width: calc(100% - 330px);color: #404040; font-size: 18px;}
.homepage-container .category-slider-container ul.categories li .colours-container{margin-top: 30px;}
.homepage-container .category-slider-container ul.categories li .colours-container .title{font-weight: 600;}
.homepage-container .category-slider-container ul.categories li .colours-container ul.colours-main{padding: 0px; margin: 10px 0px;}
.homepage-container .category-slider-container ul.categories li .colours-container ul.colours-main li{height: 60px; width: 60px; margin: 0px 10px 10px 0px; background-color: #343a42;; float: left;}
.homepage-container .category-slider-container ul.categories li .colours-container ul.colours-main li:hover{border: 1px solid grey; opacity: 0.8;}
.homepage-container .category-slider-container ul.categories li a.enquire{border-radius: 5px; background-color: #f58d1d; color: white; padding: 5px 15px; text-transform: uppercase; margin-top: 25px; display: inline-block;  transition: all 300ms;}
.homepage-container .category-slider-container ul.categories li a.enquire:hover{opacity: 0.8; transition: all 300ms;}

/* Main PVC Windows Colours */
.white{border: 1px solid grey; background-color: white!important;}
.simply-white{background-image: url('../img/simply-white.jpg');}
.clotted-cream{background-image: url('../img/clotted-cream.jpg');}
.pearl-grey{background-image: url('../img/pearl-grey.jpg');}
.slate-grey{background-image: url('../img/slate-grey.jpg');}
.anthracite-grey{background-image: url('../img/anthracite-grey.jpg');}
.black-brown{background-image: url('../img/black-brown.jpg');}
.irish-oak{background-image: url('../img/irish-oak.jpg');}
.golden-oak{background-image: url('../img/golden-oak.jpg');}
.mahogany{background-image: url('../img/mahogony.jpg');}
.rosewood{background-image: url('../img/rosewood.jpg');}
.chartwell-green{background-image: url('../img/chartwell-green.jpg');}
.ral-colours{  background-color: #f58d1d; background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);}

.homepage-container .category-slider-container ul.categories li .colours-container ul.colours li{height: 40px; width: 40px; margin: 0px 10px 10px 0px; background-color: #343a42;; float: left;}
.homepage-container .category-slider-container .categories-gallery-controls{position: absolute; width: 100%; top: calc(50% - 55px); pointer-events: none;}
.homepage-container .category-slider-container .categories-gallery-controls div{width: 50%; font-size: 55px; color: black;}
.homepage-container .category-slider-container .categories-gallery-controls div i{padding: 0px 8px; line-height: 42px; pointer-events: all;}
.homepage-container .category-slider-container .categories-gallery-controls #left{text-align: left; float: left;}
.homepage-container .category-slider-container .categories-gallery-controls #right{text-align: right; float: right;}
.homepage-container .category-slider-container ul.categories-thumbnails{display: block; list-style: none; padding: 0px; margin: 0px; text-align: center;}
.homepage-container .category-slider-container ul.categories-thumbnails li{display: inline-block; height: 10px; width: 10px; background-color: #e2eaec; margin: 20px 10px 0px; border-radius: 5px;}
.homepage-container .category-slider-container ul.categories-thumbnails li.active{background-color: #343a42;}

.homepage-container .map-container{height: 450px;}

.homepage-container .contact-form-container{background-color: #cfcfcf;}
.homepage-container .contact-form-container span{float: left;width: calc(50% - 10px);margin-right: 20px;margin-bottom: 20px;}
.homepage-container .contact-form-container span:nth-of-type(2n){margin-right: 0px;}
.homepage-container .contact-form-container span:nth-of-type(5){width: 100%; margin-right: 0px; margin-bottom: 40px;}
.homepage-container .contact-form-container span input{width: calc(100% - 20px);padding: 10px 10px;border: none;font-size: 16px;color: #404040;}
.homepage-container .contact-form-container span.ajax-loader{width: 100%;}
.homepage-container .contact-form-container span select{width: 100%;padding: 9px;border: none;font-size: 16px;color: #404040;}
.homepage-container .contact-form-container span textarea{width: calc(100% - 20px);padding: 10px;border: none;font-size: 16px;color: #404040;}
.homepage-container .contact-form-container input[type='submit']{border: 2px solid #f58d1d;color: white;background-color: #f58d1d;text-transform: uppercase;padding: 10px 50px;display: block;margin: 0 auto;font-size: 18px; transition: all 300ms;}
.homepage-container .contact-form-container input[type='submit']:hover{opacity: 0.8; transition: all 300ms;}

.call-back-button{background-color: #f58d1d;color: white; text-align: center; text-transform: uppercase; padding: 7px 15px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; position: fixed; bottom: 10px; right: 0px;  transition: all 300ms;}
.call-back-button:hover{transition: all 300ms;}
.call-back-button i{margin-right: 5px;}

.footer-container{background-color: #ececec; padding: 50px 0px;}
.footer-container .logo-container{float: left; width: 250px;}
.footer-container .logo-container img{width: 100%;}
.footer-container .nav-container{float: left;width: calc(100% - 500px);padding-left: 50px;}
.footer-container .nav-container ul{width: 30%; float: left; margin: 0px; padding: 0px; list-style: none;}
.footer-container .nav-container ul>li{font-weight: 400;font-size: 20px;text-transform: uppercase;color: #404040;}
.footer-container .nav-container ul a{font-weight: normal;font-size: 17px;text-transform: none;color: #404040; transition: all 300ms;}
.footer-container .nav-container ul a:hover{color: #f58d1d;}

.footer-container .social-container{float: left; width: 200px;}
.footer-container .social-container ul.social{margin: 15px 0px; padding: 0px; list-style: none;}
.footer-container .social-container ul a{color: black; font-size: 62px; float: left; transition: all 300ms;}
.footer-container .social-container ul a:hover{color: #f58d1d; transition: all 300ms;}

.footer-container .social-container ul a:nth-of-type(1){margin-right: 15px;}
.footer-container .social-container .quote-start-container a{border: 2px solid #f58d1d; color: white; background-color: #f58d1d; text-transform: uppercase; padding: 10px 10px; display: inline-block; transition: all 300ms;}
.footer-container .social-container .quote-start-container a:hover{opacity: 0.8; transition: all 300ms;}

.nwd-footer{background-color: #2F2F2F; text-align: center; color: white; padding: 5px;}
.nwd-footer a{color: #c8f16e;}

@media only screen and (max-width: 1400px) {
    .container{width: 1200px;}
}

@media only screen and (max-width: 1200px) {
    .container{width: 992px;}
}

@media only screen and (max-width: 992px) {
    .container{width: 768px;}
}

@media only screen and (max-width: 768px) {
    .container{width: 100%;}
    .header-container{position: fixed; top: 0px; left: 0px; background-color: white; z-index: 999;}
    .header-container .nav-container{width: calc(80% - 100px);}
    .header-container .quote-start-container{width: 20%;}
    .header-container .top-bar{padding: 3px 5px;}
    .header-container .top-bar .statistics-container{display: none;}
    .header-container .top-bar .contact-container{float: none; width: 100%; text-align: right;}
    .homepage-container .introduction-container{margin: 50px 0px; padding: 0px 10px;}
    .homepage-container .introduction-container .introduction-image{display: none;}
    .homepage-container .introduction-container .introduction{float: none; width: 100%;}
    .homepage-container .introduction-container .introduction h1{text-align: center;}
    .homepage-container .category-container .category{width: 100%!important; margin: 0px 0px 20px 0px;}
    .homepage-container .our-accreditations-container ul li{width: 100%; background-size: contain; background-position: center; background-repeat: no-repeat;}
    .homepage-container .category-slider-container ul.categories li{height: auto;}
    .homepage-container .category-slider-container ul.categories li .image-container{width: 100%; float: none; margin-right: 0px; background-position: center;}
    .homepage-container .category-slider-container ul.categories li .information-container{width: 100%; float: none; padding: 25px;}
    .homepage-container .category-slider-container ul.categories li a.enquire{margin: 35px auto 0px;}
    .homepage-container .contact-form-container{padding: 0px 15px;}
    .homepage-container .contact-form-container span{float: left;width: 100%; margin-right: 0px;margin-bottom: 10px;}
    .footer-container .logo-container{display: none;}
    .footer-container .nav-container{float: none; width: 100%; padding-left: 0px; padding: 0px 15px;}
    .footer-container .nav-container ul{float: left; width: 50%; margin-bottom: 20px;}
    .footer-container .social-container{float: right; width: auto; padding: 0px 15px;}
    .footer-container .social-container .quote-start-container a{display: none;}
    .header-container .quote-start-container{display: none;}
}