/* Colours */

:root
{
    --white: #ffffff;
    --blue: #0092c8;
    --light-blue: #63bde0;
    --grey: #5e7784;
}

/* Fonts */

@font-face {
    font-family: "GillSans";
    src: url("/library/fonts/GillSans/Regular.otf")
      format("opentype");
  }
  @font-face {
    font-family: "GillSansBold";
    src: url("/library/fonts/GillSans/Bold.otf")
      format("opentype");
  }
  @font-face {
    font-family: "GillSansLight";
    src: url("/library/fonts/GillSans/Light.otf")
      format("opentype");
  }
  @font-face {
    font-family: "KalamRegular";
    src: url("/library/fonts/Kalam/regular.otf")
      format("opentype");
  }

/* CSS reset */

* {background-repeat: no-repeat;background-position: center center;box-sizing: border-box;}
body { margin: 0px; padding: 0px; width: 100%; height: auto; background-color: var(--white); color: var(--darkblue); font-family: GillSans; font-size: 110%; line-height: 1.4; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: #000000; text-decoration: none; font-weight: normal; }
a:hover {text-decoration: underline;}
ul, ol { padding: 0px; margin: 0px; }
li { list-style-type: none; vertical-align: top; }
h1, h2, h3, h4, h5, h6 { padding: 10px 10px 10px 0px; margin: 0px; font-size: 100%; font-weight: normal; line-height: 1; }
h2, h3, h4, h5, h6 {font-family: GillSansBold; }
fieldset { padding: 0px; margin: 0px; border: none; }
input, textarea, select { font-family: GillSans; font-size: 90%; border: none; background-color: #ffffff; padding: 5px; color: #000000; box-sizing: border-box; }
input[type=text], input[type=password]  { height: 30px; }
input[type=button], input[type=submit] { cursor: pointer; background-color: #4c9bd0; color: #ffffff; padding: 10px 20px 10px 20px; }
select { height: 30px; padding-right: 30px; background-image: none; background-repeat: no-repeat; background-position: right 10px center; }
p {padding: 10px 0px 0px 0px;margin: 0px;}
strong, b { font-weight: normal; font-family: GillSansBold; }
td, th { padding: 0px; text-align: left; vertical-align: top; }
th { font-family: AvenirBold; font-weight: normal; }
.hidden { display: none; }
.spacer { clear: both; height: 0px; }
img {max-width: 100%;height: auto;}
table { border-spacing: 0px; }
td, th { padding: 0px; }


.page_standarda h1 { font-family: KalamRegular;}
.page_standarda li {list-style-type: disc;padding: 5px 0px;}
.page_standarda ul { padding-left: 20px;}

.landingpage { max-width: 800px; margin: 0px auto 0px auto; padding: 20px; }
.layout_standard {margin: 0px auto 0px auto;}

.about, .getintouch, .measurewindows, .measuredoors, .pagenotfound, .upvcwindows, .slidingsash, .windows, .bgbpage, .flushfit, .conservatories, .windowglass, .windowbenefitspage, .aluminium, .doors, .upvcdoors, .xtremedoor, .xtremedoorstyles, .patiomaster, .equinox, .roofline, .coastline, .atlas, .stratus, .cedral {max-width: 1240px;margin: 0px auto 0px auto; text-align: center; }
.privacypolicy, .termsofuse, .cookiepolicy, .complaints, .sitemap { max-width: 1240px; margin: 0px auto 0px auto;}
.sitemap .toggle { display: none;}

.pagetitle { font-family: GillSansBold; font-size: 200%; }
.pagecontent {padding-bottom: 20px;}

.layoutmiddle .pageheader h1 { text-align: center; font-size: 180%; padding-top: 40px; color: var(--blue);}
.pagecontent_inner { padding: 0px 20px;}
.beachshore { display: none; }

.feat_carousel .carousel {overflow: hidden;}
.feat_carousel .carousel ul {width: 20000em;position: relative;height: 350px;}
.feat_carousel .carousel ul li { float: left; list-style-type: none;}

/* landing page */

.surv_standard .intro { padding: 0px 0px 20px 0px; }
.surv_standard .message { padding: 0px 0px 20px 0px; color: #ff0000; }
.surv_standard .form { max-width: 400px; padding: 20px; background-color: #eeeeee; margin: 0px auto 0px auto; text-align: left; border-radius: 20px; }
.surv_standard input[t], .surv_standard textarea { width: 100%; }
.surv_standard .field { padding-bottom: 10px; }
.surv_standard .label { font-size: 90%; }
.surv_standard p { text-align: center;}

/* header general */

.layoutheader { background-image: url(/images/XejFtajVhIX3bc9RPt6X1jk111.jpg); }
.layoutheader { background-position: center 75%; }
.layoutheader_inner .headerlogo { text-align: center;}
.layoutheader_inner .headeremail { text-transform: uppercase; font-family: GillSans; }
.layoutheader_inner .headeremail i { color: var(--blue); padding: 0px 10px 0px 5px;}
.layoutheader_inner .headerquote { background-color: var(--blue); border-radius: 20px; text-align: center; padding: 10px; }
.layoutheader_inner .headerquote a { color: white; text-transform: uppercase; font-family: GillSansBold; }

.layoutheader .nav_multilevel { font-family: GillSansBold; background-color: var(--blue);text-transform: uppercase;}
.layoutheader .nav_multilevel a {color: #ffffff;}

.nav_multilevel .level3 {display: none;}

@media ( min-width: 1100px) /* header desktop */
{
.layoutheader {background-size: cover;} 
.layoutheader_inner {  margin: 0px auto 0px auto; background-color: rgba(255, 255, 255, 0.3);}

.layoutheader_inner .headerlogo { padding: 20px 0px 20px 0px;}
.layoutheader_inner .headerphone { position: absolute; margin-top: 80px; right: 30px; width: 180px; text-align: right;}
.layoutheader_inner .headeremail { position: absolute; margin-top: 150px; right: 30px; width: 180px; text-align: right;}
.layoutheader_inner .headeremail i { font-size: 130%;}
.layoutheader_inner .headeremail a:hover {text-decoration: underline;}
.layoutheader_inner .headerphone p img { max-height: 20px; width: auto;}

.layoutheader_inner .headerquote { position: absolute; margin-top: 20px; right: 20px;}
.layoutheader_inner .headerquote:hover { background-color: var(--light-blue);}

.layoutheader .nav_multilevel { display: inline-block; height: 50px; width: 100%; margin: 0px auto; }
.layoutheader .toggle {display: none;} 

.layoutheader .nav_multilevel .level1 { text-align: center; }
.layoutheader .nav_multilevel .level1>li { display: inline-block; }
.layoutheader .nav_multilevel li:hover { background-color: var(--light-blue); }

.layoutheader .nav_multilevel .level2 { text-align: left; text-transform: none; position: absolute; top: 289px; display: none; background-color: var(--blue); z-index: 20; }
.layoutheader .nav_multilevel .level2 li { height: 40px; }
.layoutheader .nav_multilevel .level2 li a { width: 280px; line-height: 40px; }
.layoutheader .nav_multilevel .level1>li:hover .level2 { display: block; }

.layoutheader .nav_multilevel.toggleoff .level2 { display: none; }

.layoutheader .nav_multilevel a { display: block; padding: 0px 15px 0px 15px; line-height: 50px; }
}

@media  (max-width: 1099px) /* header mobile */
{
  .layoutheader {background-size: 150%;} 
  .layoutheader_inner { background-color: rgba(255, 255, 255, 0.7); }
  .layoutheader_inner .headerquote, .headeremail {display: none;}
  .layoutheader_inner .headerlogo { padding: 25px 0px 10px 0px;}
  .layoutheader_inner .headerphone {text-align: center; width: 300px; padding-top: 10px;}
  /*.layoutheader_inner .headeremail i { font-size: 110%;}
  .layoutheader_inner .headeremail a { font-size: 90%;}*/
  .layoutheader_inner .headerphone p img { max-height: 15px; width: auto;}

  .layoutheader .toggle {position: absolute; top: 20px; right: 20px; width: 45px; height: 45px; cursor: pointer; } 
  .layoutheader .toggleon ul.level1 {display:block; position: absolute; top: 70px; width: 100%; background-color: var(--blue); opacity: 1; z-index: 50; text-align: left;}
  .layoutheader .toggleon li {padding: 10px 0px 10px 20px;} 
  .layoutheader .toggleoff ul.level1 {display:none;} 
  .layoutheader svg path {fill: var(--blue);} 
  .layoutheader svg {width: 30px; height: 30px;} 

  .nav_multilevel .level2 { padding-left: 20px; }
}

@media (max-width: 300px)
{
  .layoutheader_inner .headerphone {width: 150px; text-align: right;}
}

/* footer general */

.layoutfooter { background-image: url(/images/XejFtajVhIX3bc9RPt6X1jk111.jpg); background-size: cover; }
.layoutfooter_inner .footermenu { text-align: center; }
.layoutfooter_inner .footermenu li { text-transform: uppercase; font-size: 80%;}
.layoutfooter_inner .socialmedia { text-align: center; padding: 20px 0px 0px 0px; }
.layoutfooter_inner .socialmedia li { display: inline; }
.layoutfooter_inner .socialmedia a { font-size: 150%; padding-right: 10px; padding-left: 10px;}
.layoutfooter_inner .footercopyright { text-align: center;}
.layoutfooter_inner .footermenu li:hover { text-decoration: underline;}

@media ( min-width: 1100px) /* footer desktop */
{
  .layoutfooter_inner { height: 300px; background-color: rgba(255, 255, 255, 0.3);}
  .layoutfooter { background-position: center 70%; }
  .layoutfooter_inner .footermenu {  padding: 80px 0px 0px 0px; width: 520px; margin: 0px auto 0px auto; }
  .layoutfooter_inner .footermenu li { display:inline; padding: 0px 10px;}
  .layoutfooter_inner .footercopyright { padding-top:20px; font-size: 85%;}
}

@media ( max-width: 1099px) /* footer mobile */
{
  .layoutfooter_inner { height: 450px; background-color: rgba(255, 255, 255, 0.5);}
  .layoutfooter { background-position: center; }
  .layoutfooter_inner .footermenu { padding: 50px 0px 40px 0px;}
  .layoutfooter_inner .footermenu li {padding: 5px 0px 5px 0px; }
  .layoutfooter_inner .footercopyright { padding-top:70px; font-size: 70%;}
  .layoutfooter_inner .footercopyright p { padding: 0px 0px 0px 0px;}
}

/* Homepage general */

.ui-widget-overlay { position: fixed; background: #00000077; width: 100%; height: 100%; top: 0px; }
.ui-front { z-index: 2; }
.ui-dialog { background-color: #ffffff; padding: 10px; }
.ui-dialog-titlebar { text-align: right; }
.ui-dialog .ui-dialog-titlebar { width: 40px; float: right; }
.ui-dialog .ui-button {margin: -10px 5px 0px 0px;}
.ui-dialog .ui-dialog-content { text-align: center; font-family: GillSans; color: var(--blue); font-size: 90%;}
.ui-dialog .ui-dialog-content h2 { font-family: KalamRegular; color: var(--blue); font-size: 120%; border-bottom: 1px solid grey;}
.ui-dialog .ui-dialog-content p { margin: 15px 0px;}
.ui-dialog .ui-dialog-content p a { background-color:var(--blue); border-radius: 20px; text-align: center; padding: 10px; color: #ffffff; }
.ui-dialog .ui-dialog-content p a:hover { background-color: var(--light-blue);}

.homepage .titleimg img { width: 100%; }
.homepage .homeabout .content { text-align: center; }
.homepage .homeabout .content h2 { color: var(--blue); font-family: KalamRegular; }
.homepage .homeabout .content p:first-of-type { padding: 0px; }
.homepage .homeabout .content p:last-of-type {background-color: var(--blue);border-radius: 10px;text-align: center;padding: 5px;}
.homepage .homeabout .content a { text-transform: uppercase; color: white; font-family: GillSansBold;}
.homepage .homeabout .content p:last-of-type:hover {background-color: var(--light-blue);}

.homepage .homeproducts h2 { color: var(--blue); font-size: 180%; padding: 40px 0px; text-align: center; font-family: KalamRegular;}
.homepage .homeproducts { padding: 20px 0px 50px 0px;}
.homepage .homeproducts .items { display: flex; flex-wrap: wrap; justify-content: center;}

.homepage .homewindows { height: 300px; margin: 10px 10px; background-position: center; background-size: 500px; }
.homepage .homewindows:hover {background-color: var(--grey); opacity: 0.7;}
.homepage .homewindows .link { position: absolute; margin-top: 260px;text-transform: uppercase; background-color: var(--white); opacity: 0.7; font-family: GillSansBold; height: 40px;padding: 10px 0px 0px 10px; }
  
.homepage .homedoors { height: 300px; margin: 10px 10px; background-position: right; background-size: 500px; }.homepage .homedoors:hover {background-color: var(--grey); opacity: 0.7;}
.homepage .homedoors .link { position: absolute; margin-top: 260px;text-transform: uppercase; background-color: var(--white); opacity: 0.7; font-family: GillSansBold; height: 40px; padding: 10px 0px 0px 10px;}

.homepage .homeconservatories { height: 300px; margin: 10px 10px; background-position: center; background-size: 600px;}
.homepage .homeconservatories:hover {background-color: var(--grey); opacity: 0.7;}
.homepage .homeconservatories .link { position: absolute; margin-top: 260px;text-transform: uppercase; background-color: var(--white); opacity: 0.7; font-family: GillSansBold; height: 40px; ;padding: 10px 0px 0px 10px;}

.homepage .homealuminium { height: 300px; margin: 10px 10px; background-position: center; background-size: 700px;}
.homepage .homealuminium:hover {background-color: var(--grey); opacity: 0.7;}
.homepage .homealuminium .link { position: absolute; margin-top: 260px;text-transform: uppercase; background-color: var(--white); opacity: 0.7; font-family: GillSansBold; height: 40px; padding: 10px 0px 0px 10px;}

.homepage .homeroofline {  height: 300px; margin: 10px 10px; background-position: center top; background-size: 700px;}
.homepage .homeroofline:hover {background-color: var(--grey); opacity: 0.7;}
.homepage .homeroofline .link { position: absolute; margin-top: 260px;text-transform: uppercase; background-color: var(--white); opacity: 0.7; font-family: GillSansBold; height: 40px; padding: 10px 0px 0px 10px;}

.homepage .hometeam { height: 300px; margin: 10px 10px; }
.homepage .hometeam:hover {background-color: var(--grey); opacity: 0.7;}
.homepage .hometeam .link { position: absolute; margin-top: 260px;text-transform: uppercase; background-color: var(--white); opacity: 0.7; font-family: GillSansBold; height: 40px; padding: 10px 0px 0px 10px;}

.homepage .homepartners { padding: 40px 20px 60px 20px; border-bottom: 1px solid rgb(189, 185, 185); border-top: 1px solid rgb(189, 185, 185);}
.homepage .homepartners .titletxt { text-align: center; font-size: 180%; color: var(--blue); padding-bottom: 60px; font-family: KalamRegular; }
.homepage .homepartners .introduction {color: #696969; font-size: 100%; text-align: center; }
.homepage .homepartners .carousel { height: 100px; max-width: 950px; margin: 0px auto 0px auto; }
.homepage .homepartners .carousel li {height: 100px;width: 200px !important;text-align: center;margin: 0px 20px;vertical-align: middle;background-position: center center;background-size: contain;}

.homepage .quotesurvey {padding-bottom: 40px;}
.homepage .quotesurvey .titletxt { color: var(--blue); font-size: 180%; text-align: center; padding: 40px 0px 40px 0px; font-family: KalamRegular;}
.homepage .surv_standard .intro { text-align: center; }
.homepage .surv_standard .message { padding: 0px 0px 20px 0px; color: #ff0000; }
.homepage .surv_standard .form { max-width: 1000px; padding: 20px; background-color: #eeeeee; margin: 0px auto 0px auto; text-align: left; border-radius: 20px;}
.homepage .surv_standard input[type=text], .surv_standard textarea { width: 100%; }
.homepage .surv_standard .field { padding-bottom: 10px; }
.homepage .surv_standard .field_multiselect .label { font-family: GillSansBold;}
.homepage .surv_standard .field_multiselect li {font-size: 90%; }
.homepage .surv_standard .label { font-size: 90%; }
.homepage .surv_standard p { text-align: center;}
.homepage .quotesurvey li { list-style-type: none;}

@media ( min-width: 1100px) /* homepage desktop */
{
  .homepage .homeabout .content { width: 1240px; margin: 0px auto;}
  .homepage .homeproducts { width: 1320px; margin: 0px auto;}
  .homepage .homewindows, .homepage .homedoors, .homepage .homeconservatories, .homepage .homealuminium, .homepage .homeroofline, .homepage .hometeam { width: 420px;}
  .homepage .homewindows .link, .homepage .homedoors .link, .homepage .homeconservatories .link, .homepage .homealuminium .link, .homepage .homeroofline .link, .homepage .hometeam .link {min-width: 420px;}

  .homepage .homeabout .content img { width: 100%; height: auto;}
  .homepage .homeabout .content h2 { font-size: 200%; padding: 40px 0px;}
  .homepage .homeabout .content p {padding: 10px 50px;}
  .homepage .homeabout .content p:last-of-type { width: 20%; margin: 20px auto;}
  
  .homepage .homeproducts .items { flex-direction: row; }
}

@media ( max-width: 1099px) /* homepage mobile */
{
  .homepage .homeabout .content h2 { font-size: 130%; padding: 20px 20px; }
  .homepage .homeabout .content p { padding: 10px 20px;}
  .homepage .homeabout .content p:last-of-type {margin: 30px 20px 0px 20px;}

  .homepage .homeproducts .items { flex-direction: column; max-width:300px; margin:0px auto;}
  .homepage .homeproducts h2 { padding: 30px 20px 20px 20px;}
  .homepage .homewindows, .homepage .homedoors, .homepage .homeconservatories, .homepage .homealuminium, .homepage .homeroofline, .homepage .hometeam {width: 250px;}
  .homepage .homewindows .link, .homepage .homedoors .link, .homepage .homeconservatories .link, .homepage .homealuminium .link, .homepage .homeroofline .link, .homepage .hometeam .link {width: 250px; text-align: center;}

  .homepage .homepartners .carousel { max-width: 250px; margin: 0px auto 0px auto; }

  .homepage .quotesurvey {padding: 0px 20px 20px 20px;}
}

/* about general */

.about a { text-decoration: underline;}
.about .aboutresidental, .about .aboutcommercial, .about .aboutbespoke { background-color: var(--blue); color: white; }
.about .aboutresidental .titletxt, .about .aboutcommercial .titletxt, .about .aboutbespoke .titletxt { font-family: GillSansBold; padding: 20px 20px; }
.about .util_textbox .content { padding: 0px 20px;}
.about .aboutcaring .titletxt {padding: 20px 20px 0px 20px; }

.about .aboutquote, .about .aboutcallus { border: 2px solid var(--blue); padding: 20px 20px; width: 300px; text-align: center; }
.about .aboutquote .content p a, .about .aboutcallus .content p { text-transform: uppercase; font-family: GillSansBold; font-size: 80%;}
.about .aboutcallus, .about .aboutquote a { color: var(--blue);}
.about .aboutquote a:hover {color:white;}

@media ( min-width: 1100px) /* about desktop */
{
  .aboutcontainer {width: 1240px;margin: 0px auto;}
  .about .aboutresidental, .about .aboutcommercial, .about .aboutbespoke { min-height: 535px; max-width: 375px; float: left; margin: 0px 10px 0px 10px; }
  .about .util_textbox .imagetop { max-width: 375px; }
  .about .aboutcaring {clear: left;}

  .about .aboutcallus { float: left; clear: right; margin: 30px 0px 30px 200px; }
  .about .aboutquote { float: right; margin: 30px 200px 30px 0px; }
  .about .aboutquote:hover, .about .aboutcallus:hover { background-color: var(--blue); color: white;}
  .about .aboutquote .content p a:hover{color: white;}
}

@media ( max-width: 1099px) /* about mobile */
{
  .about .aboutresidental, .about .aboutcommercial, .about .aboutbespoke { min-height: 500px; margin: 10px 20px 10px 20px; }
  .about .util_textbox .imagetop { max-width: 400px; }

  .about .aboutcallus { margin: 30px auto; }
  .about .aboutquote { margin: 30px auto; }

  .about .aboutcontainer { text-align: left;}
}

/* get in touch */

.getintouch .pagecomponents_inner .surv_standard .intro { display: none; }

@media ( min-width: 601px) /* get in touch desktop */
{
  .getintouch .pagecontent_inner { width: 50%; float: left; }
  .getintouch .pagecomponents_inner .surv_standard { clear: right; margin-top: -10px; padding-bottom: 50px; }
  
  .getintouch .pagecomponents_inner .surv_standard input { width: 500px;}
  .getintouch .pagecomponents_inner .surv_standard #fb-5, .getintouch .pagecomponents_inner .surv_standard #fb-4{ width: 500px;}
  .getintouch .surv_standard .form { max-width: 600px; text-align: center;}
}

@media ( max-width: 600px) /* get in touch mobile */
{
  .getintouch .pagecomponents_inner .surv_standard input { width: 300px;}
  .getintouch .pagecomponents_inner .surv_standard #fb-5, .getintouch .pagecomponents_inner .surv_standard #fb-4{ width: 300px;}
  .getintouch .surv_standard {padding: 0px 20px 20px 20px;}
  
}

/* Window Product Carousels and Text boxes */

.carousel {margin: 0px auto 0px auto;}
.carousel li {text-align: center;margin: 0px 10px;vertical-align: middle;background-size: cover;background-position: center;}
.feat_carousel .buttons .fas { color: var(--grey); padding: 0px 15px;}
.feat_carousel .buttons { font-size: 130%; padding-top: 10px;}
.upvcwindows .casement .buttons .fas, .upvcwindows .rioflushfit .buttons .fas, .upvcwindows .bayandbow .buttons .fas {color: white;}

.upvcwindows .carousel {max-height: 400px;max-width: 1200px;}
.upvcwindows .carousel li { height: 400px; max-width: 400px;}
.slidingsash .carousel { max-height:300px; }
.slidingsash .carousel li { min-height: 300px; max-width: 300px;}
.slidingsash .carousel li img { max-height: 300px; max-width: 300px;}
.flushfit .feat_carousel .carousel { max-height:400px; max-width: 1200px;}
.flushfit .feat_carousel .carousel li {min-height: 400px ;max-width: 400px;}
.bgbpage .feat_carousel .carousel { max-height:350px; max-width: 1200px; }
.bgbpage .feat_carousel {padding-bottom: 30px;}
.bgbpage .feat_carousel .carousel li {min-height: 350px; max-width: 400px;}
.aluminium .feat_carousel .carousel { max-height:500px; max-width: 1200px; }
.aluminium .feat_carousel .carousel li {min-height: 400px; min-width: 400px;}
.aluminium .feat_carousel {padding-bottom: 30px;}

.upvcwindows .tiltandturn .carousel { display: none; } 
.upvcwindows .windowsintro { padding: 20px;}
.upvcwindows .rioflusfittext .titletxt { display: none;}
.flushfit .rioflushfit .titletxt { display: none;}

.upvcwindows .casement, .upvcwindows .tiltandturn { background-color: var(--blue); margin-top: 30px; }
.upvcwindows .casement h2, .upvcwindows .tiltandturn h2 { padding:20px 0px 30px 0px; color: white;}
.upvcwindows .casementtext, .upvcwindows .tiltandturntext { background-color: var(--blue); color: white; padding: 0px 20px 20px 20px; }

.upvcwindows .rioflushfit, .upvcwindows .bayandbow { background-color: var(--grey); margin-top: 30px;}
.upvcwindows .rioflushfit h2, .upvcwindows .bayandbow h2 { padding:20px 0px 30px 0px; color: white;}
.upvcwindows .rioflusfittext, .upvcwindows .bayandbowtext { background-color: var(--grey); color: white; padding: 0px 20px 20px 20px;}

.slidingsash .util_textbox, .flushfit .util_textbox { padding: 20px;}
.slidingsashrose { background-color: var(--grey); color: white;}
.slidingsash li { list-style-position: inside;}
.aluminium .aluminiumextratext .content { background-color: var(--grey); margin-top: 30px; color: white; padding: 20px; }

/* CTA */

.cta { background-color: var(--blue); color: white; padding: 30px; margin: 30px auto; font-size: 110%;}
.cta a { color: white; background-color: var(--grey); padding: 12px 10px 8px 10px; border-radius: 20px; text-transform: uppercase; }
.cta a:hover {font-family: GillSansBold; text-decoration: underline;}

@media (max-width: 600px)
{
  .cta .content a { line-height: 3;}
  .cta .titletxt, .cta h2 { line-height: 1.5;}
  .cta .content h2 {padding: 0px 10px;}
  .cta {padding: 40px;}
}

/* Windows */

.windows ul {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-evenly;}
.windows .windowsnav li {list-style-type: none; width: 300px; text-align: center; margin: 0px 20px; padding-bottom: 30px;}
.windows .windowsnav li img {border-radius: 16px;}
.windows .windowsnav .textlink { font-size: 120%;} 

/* Sliding Galleries */

.windowsgallery { background: none; margin-bottom: 30px;}
.feat_slidinggallery .wt-gallery { width: 100% !important; border: none; background: none; }
.feat_slidinggallery .main-screen { border: none; background: none; max-width: 100%; }
.feat_slidinggallery .wt-gallery .cpanel { width: 100% !important; }
.feat_slidinggallery .wt-gallery .cpanel .thumbnails { max-width: 1240px;}
.feat_slidinggallery .wt-gallery .cpanel .thumbnails li div { border: none; background: none; }
.feat_slidinggallery .wt-gallery .cpanel .thumbnails li img { background:none; }
.feat_slidinggallery .wt-gallery .desc {  background:none; height: 50px; ;text-align: center; font-family: GillSansBold; font-size: 110%; color: black;}

/* Gallery Grid */

.feat_gallery {width: 100%;margin: 0px auto 0px auto;padding: 0px 20px 0px 20px;}
.feat_gallery .util_imgslide {clear: left;left: 0px;text-align: center;}
.util_imgslide { display: inline-block; }

.util_imgslide {  padding: 0px 0px 0px 0px;}
.util_imgslide ul { max-width: 955px;}
.util_imgslide li {float: left;margin: 10px 5px 10px 5px;list-style-type: none; left:0px;}
.util_imgslide li a {left: 0px;}
.util_imgslide li .caption { text-align: center; height: 300px; line-height: 300px; padding: 0px 20px; }
.util_imgslide li .caption span {display: inline-block;vertical-align: middle;line-height: normal;text-align: center;  transition: opacity .6s; opacity:0;}

.util_imgslide .flip { cursor: pointer; width:300px;height:300px; -webkit-perspective: 900px; perspective: 900px;  }
.stylesgallery .util_imgslide .flip { width:112px;height:250px;}

.util_imgslide .flip .front, .util_imgslide .flip .back {-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-o-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden !important;width:300px;height:300px;transition:all .6s;position:absolute;z-index: -0;}
.stylesgallery .util_imgslide .flip .front, .stylesgallery .util_imgslide .flip .back {width:112px;height:250px;}
.util_imgslide .flip .backnoflip .caption { display: none; } 
.util_imgslide .flip .front {background-size: cover;}
.util_imgslide .frontflip {  background-size: cover; }
.stylesgallery .util_imgslide .flip .front {background-size: contain;}
.stylesgallery .util_imgslide .frontflip {  background-size: contain; }
.util_imgslide .backflip { font-size: 150%; background-color: white; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); }
.stylesgallery .util_imgslide .backflip {font-size: 110%;}
.util_imgslide .flip.hover .frontflip { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); z-index:-999; cursor:pointer; }
.util_imgslide .flip.hover .backflip { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); z-index:999; cursor:pointer; }
.util_imgslide .flip.hover .caption span { opacity : 1; }

@media ( min-width: 1100px)
{
  .feat_gallery {max-width: 1240px;}
}

@media (max-width: 1099px) and (min-width: 401px)
{
  .feat_gallery {max-width: 900px; }
}

@media (max-width: 400px)
{
  .feat_gallery {max-width: 375px;}
}

/* uPVC Windows */

.upvcwindows .upvcotherlinks {margin-top: 20px;}
.upvcwindows .upvcotherlinks .link a, .windowsbrochure .link a { background-color: var(--grey); color:white; border-radius: 20px; font-family:GillSansBold;}
.upvcwindows .upvcotherlinks .link a:hover, .windowsbrochure .link a:hover { background-color: var(--blue);}

@media (min-width: 401px)
{
  .upvcwindows .upvcotherlinks .util_textbox { margin-bottom: 20px;}
  .upvcwindows .upvcotherlinks .link a, .windowsbrochure .link a {  padding: 20px; }
}
@media (max-width: 400px)
{
  .upvcwindows .windowglasslink .link a, .windowsbrochure .link a {font-size: 80%; padding: 10px;}
  .upvcwindows .upvcotherlinks { margin-bottom: 20px;}
}

/* Window Benefits */

.util_container .items { padding: 20px; }
.util_expandtext { background-color: var(--blue); border-bottom: 1px solid white; }
.util_expandtext .link a {display: block; color: white;padding: 20px 0px 20px 0px;font-size: 120%; font-family: GillSansBold; }
.util_expandtext .text p { padding: 20px; text-align: left; color:white;}
.util_expandtext .text li { color: white; text-align: left; padding-left: 20px;}
.util_expandtext .link { background-image: url(/images/97jGEvboogdQloJYIChN02s02s.png); background-position: 99%; background-size: 30px;}
.util_expandtext.open .link {background-image: url(/images/CC3bMQG3SJd0oY8cymxH02s02s.png);background-position:99%; background-size: 40px;}

.benefitsimages .carousel { max-height:300px; padding: 20px; }
.benefitsimages .carousel li { max-height: 300px; max-width: 300px;}
.benefitsimages .carousel li img { max-height: 300px; max-width: 300px;}

/* Between Glass Blinds */ 

.bgbpage .bgblogo li { list-style-type: none; }
.bgbpage .bgblogo img { max-height: 60px; width: auto; }
.bgbpage .util_textbox .content { padding: 0px 20px;}

.bgbpage .magneticblinds, .bgbpage .hardwiredblinds {background-color: var(--grey); color: white; margin: 20px auto 0px auto; }
.bgbpage .motorisedblinds { background-color: var(--blue); color: white; margin: 10px auto; padding-bottom: 20px;}
.bgbpage .magneticblinds h2, .bgbpage .motorisedblinds h2, .bgbpage .hardwiredblinds h2 {padding: 20px 0px;}
.bgbpage .magneticblinds p, .bgbpage .motorisedblinds p, .bgbpage .hardwiredblinds p {font-size:95%; padding: 5px 0px; text-align: left;}
.bgbpage .magneticblinds li, .bgbpage .motorisedblinds li, .bgbpage .hardwiredblinds li {text-align: left; font-size: 95%; padding: 5px 10px;}
.bgbpage .magneticblindsvideo { background-color: var(--grey); color: white; padding: 0px 20px 20px 20px;}
.bgbpage .imageleft img { padding: 10px 10px; background-color: white; margin: 20px 10px 10px 10px;}
.bgbpage .bgbwiredextra { background-color: var(--grey); color: white; padding: 20px; margin-bottom: 30px;}
.bgbpage .bgbwiredextra .content { text-align: left;}
.bgbpage .util_textbox a { color:white; font-family:GillSansBold;}
.bgbpage .util_textbox a:hover {text-decoration: underline;}

@media (min-width: 1100px)
{
  .bgbpage .bgblogo img { position:absolute; margin-top: -70px; right: 30px;}
  
  .bgbpage .util_textbox .imageleft { float: left; width: 50%; }
  .bgbpage .magneticblinds .content, .bgbpage .hardwiredblinds .content { float: right; padding: 20px; width: 50%; }
  .bgbpage .motorisedblinds .content { float: left; padding: 20px; width: 50%; }
  .bgbpage .bgbwiredextra .imageleft { margin: 20px;}
}
@media ( max-width: 1099px) /* between glass blinds mobile */
{
  .bgbpage .imageleft, .bgbpage .imageright{ max-width: 400px; margin: 0px auto;}
}

@media (min-width: 900px)
{
  .bgbpage .magneticblindsvideo iframe { min-width: 800px; min-height: auto; text-align: left;}
}

@media ( max-width: 899px)
{
  .bgbpage .magneticblindsvideo iframe { max-width: 300px; height: auto; text-align: left;}
}

/* Doors */

.doors ul {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-evenly;}
.doors .doorsnav li {list-style-type: none; width: 300px; text-align: center; margin: 0px 20px; padding-bottom: 30px;}
.doors .doorsnav li img {border-radius: 16px;}
.doors .doorsnav .textlink { font-size: 120%;} 

/* Door Product Carousels and Text boxes */

.upvcdoors .carousel {max-height: 400px;}
.upvcdoors .carousel li { min-height: 400px; max-width: 400px;}
.upvcdoors .upvcdoorcolours .carousel {max-height: 140px; margin: 20px 0px; }
.upvcdoors .upvcdoorcolours .carousel li { min-height: 135px; max-width: 135px;}
.upvcdoors .upvcdoorsglass .carousel {max-height: 200px;}
.upvcdoors .upvcdoorsglass .carousel li { min-height: 190px; max-width: 45px;}

.upvcdoors .util_textbox { padding: 20px;}
.upvcdoors .upvcdoorstext2 { background-color: var(--grey); color: white; margin-top: 30px; }
.upvcdoors .upvcdoorstext3 { background-color: var(--blue); color: white; margin-top: 30px; }
.upvcdoors .porchimages { background-color: var(--grey); color: white; margin-top: 30px; }
.upvcdoors .porchimages h2 { padding:20px 0px 30px 0px;}
.upvcdoors .porchimages .buttons .fas { color: white;}
.upvcdoors .porchtext { background-color: var(--grey); color: white; }

@media (min-width: 1230px)
{
  .upvcdoors .upvcimages .carousel {max-width: 1240px;}
  .upvcdoors .upvcdoorcolours .carousel {max-width: 1240px; }
  .upvcdoors .upvcdoorsglass .carousel {max-width: 600px;}
  .upvcdoors .upvcdoorsglass .carousel li {margin: 0px 30px;}
}

@media ( max-width: 1299px)
{
  .upvcdoors .upvcimages .carousel {max-width: 1240px;}
  .upvcdoors .upvcdoorcolours .carousel li { margin: 0px 10px;}
  .upvcdoors .upvcdoorsglass .carousel {max-width: 325px;}
  .upvcdoors .upvcdoorsglass .carousel li {margin: 0px 5px;}
}

/* Xtremedoor */

.xtremedoor .xtremedoorimages .carousel {max-height: 380px; }
.xtremedoor .xtremedoorimages .carousel li { min-height: 380px; width: 380px;}
.xtremedoor .xtremelogo li { list-style-type: none; }
.xtremedoor .xtremelogo img { max-height: 60px; width: auto; }

.xtremedoor .util_textbox { padding: 20px;}
.xtremedoor .xtremedoorglazing { background-color: var(--blue); color: white; }
.xtremedoor .xtremedoorvideo { background-color: var(--grey); color: white; margin-top: 30px; }
.xtremedoor .xtremedoorsecurity { background-color: var(--blue); color: white; margin-top: 30px; }
.xtremedoor .xtremedoorsecurity p img { padding-right: 10px;}

.xtremedoorstyles .feat_gallery .util_imgslide .slip .front { background-size: contain;}

.xtremedoor .xtremedoorlink { margin: 30px 0px;}
.xtremedoor .xtremedoorlink  li { list-style-type: none !important;}
.xtremedoor .xtremedoorlink .link a { background-color: var(--grey); color:white; border-radius: 20px; font-family:GillSansBold; padding: 20px; }
.xtremedoor .xtremedoorlink .link a:hover { background-color: var(--blue);}

.xtremedoorstyles .xtremedoorglaze, .xtremedoorstyles .xtremedoorglazegallery {background-color: var(--grey); color:white;}
.xtremedoorstyles .xtremedoorglaze { margin-top: 30px; padding: 20px;}
.xtremedoorstyles .xtremedoorglazegallery { padding-bottom: 30px; }

@media (min-width: 1100px)
{
  .xtremedoor .xtremelogo img { position:absolute; margin-top: -70px; right: 30px;}
}

@media (min-width: 900px)
{
  .xtremedoor .xtremedoorvideo iframe { min-width: 800px; min-height: auto; text-align: left;}
}

@media ( max-width: 899px)
{
  .xtremedoor .xtremedoorvideo iframe { max-width: 300px; height: auto; text-align: left;}
  .xtremedoor .xtremedoorvideo img { max-height: 250px; width: auto;}
  .xtremedoor .xtremedoorlink {font-size: 75%; padding: 10px;}
}

/* Aluminium */

.aluminium .aluminiumtext { padding: 0px 20px; margin-bottom: 30px;}

/* PatioMaster */

.patiomaster .carousel {max-height: 380px; max-width: 1200px;}
.patiomaster .carousel li { height: 380px; max-width: 380px;}
.patiomaster .patiomaster_tripletrack { background-color: var(--blue); color: white; margin-top: 30px; }
.patiomaster .patiomaster_tripletrack .buttons .fas { color: white;}
.patiomaster .patiomastertext2 { background-color: var(--blue); color: white; margin-bottom: 30px; }
.patiomaster .patiomaster_tripletrack h2 { padding:20px 0px 30px 0px; }
.patiomaster .patiomastertext2 li {list-style-position: inside;}
.patiomaster .patiomasterhandles { background-color: var(--grey); color: white;}
.patiomaster .patiomasterhandles .buttons .fas { color: white;}
.patiomaster .patiomasterhandles h2 { padding:20px 0px 30px 0px; }
.patiomaster .patiomasterhandlestext { background-color: var(--grey); color: white;}
.patiomaster .patiomastertext2, .patiomaster .patiomasterhandlestext { padding: 0px 20px 20px 20px;}
.patiomaster .patiomasterlogo li { list-style-type: none; }

@media (min-width: 1100px)
{
  .patiomaster .patiomasterlogo img { position:absolute; margin-top: -50px; right: 30px;}
}

@media ( max-width: 899px)
{
  .patiomaster .util_textbox { padding: 20px;}
}

/* Conservatories */

.conservatories .carousel {max-height: 380px; max-width: 1200px;}
.conservatories .carousel li { height: 380px; max-width: 380px;}
.conservatories .util_textbox .content {padding: 0px 20px 20px 20px;}

.conservatories .gableimages { background-color: var(--blue); color: white; margin-top: 30px;}
.conservatories .gableimages .buttons .fas { color: white;}
.conservatories .gableimages h2 { padding:20px 0px 30px 0px; }
.conservatories .gabletext { background-color: var(--blue); color: white;}

.conservatories .georgianimages { background-color: var(--grey); color: white;margin-top: 30px;}
.conservatories .georgianimages .buttons .fas { color: white;}
.conservatories .georgianimages h2 { padding:20px 0px 30px 0px; }
.conservatories .georgiantext { background-color: var(--grey); color: white;}

.conservatories .victorianimages { background-color: var(--blue); color: white; margin-top: 30px;}
.conservatories .victorianimages .buttons .fas { color: white;}
.conservatories .victorianimages h2 { padding:20px 0px 30px 0px; }
.conservatories .victoriantext { background-color: var(--blue); color: white;}

.conservatories .leantoimages { background-color: var(--grey); color: white;margin-top: 30px;}
.conservatories .leantoimages .buttons .fas { color: white;}
.conservatories .leantoimages h2 { padding:20px 0px 30px 0px; }
.conservatories .leantotext { background-color: var(--grey); color: white;}

/* Equinox */

.equinox .carousel {max-height: 380px; max-width: 1200px;}
.equinox .carousel li { height: 380px; max-width: 380px;}

.equinox .equinoxtiledimages { background-color: var(--blue); color: white; margin-top: 30px;}
.equinox .equinoxtiledimages .buttons .fas { color: white;}
.equinox .equinoxtiledimages h2 { padding:20px 0px 30px 0px; }
.equinox .equinoxtext2 { background-color: var(--blue); color: white; margin-bottom: 30px; }

.equinox .equinoxvegaimages {background-color: var(--grey); color: white; margin-top: 30px;}
.equinox .equinoxvegaimages .buttons .fas { color: white;}
.equinox .equinoxvegaimages h2 { padding:20px 0px 30px 0px; }
.equinox .equinoxtext3 { background-color: var(--grey); color: white; margin-bottom: 30px; }

.equinox .util_textbox .content {padding: 0px 20px 20px 20px;}
.equinox .equinoxlogo li { list-style-type: none; }

@media (min-width: 900px)
{
  .equinox iframe { min-width: 800px; min-height: auto; text-align: left;}
}

@media ( max-width: 899px)
{
  .equinox iframe { max-width: 300px; height: auto; text-align: left;}
}

@media (min-width: 1100px)
{
  .equinox .equinoxlogo img { position:absolute; margin-top: -50px; right: 30px;}
}
/* Roofline */

.roofline ul {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-evenly;}
.roofline .rooflinenav li {list-style-type: none; width: 300px; text-align: center; margin: 0px 20px; padding-bottom: 30px;}
.roofline .rooflinenav li img {border-radius: 16px;}
.roofline .rooflinenav .textlink { font-size: 120%;}

/* Atlas  */

.atlas .atlaslogo li { list-style-type: none; }
.atlas .carousel {max-height: 200px; max-width: 1200px;}
.atlas .carousel li { height: 200px; max-width: 200px;}
.atlas .util_textbox .content {padding: 0px 20px 20px 20px;}
.atlas .atlaswhy { background-color: var(--grey); color: white; }
.atlas .atlasbenefits { background-color: var(--grey); color: white; }
.atlas .atlaswhy h2, .atlas .atlasbenefits h2 {padding: 20px 0px;}
.atlas li { list-style-position: inside;}

@media (min-width: 1100px)
{
  .atlas .atlaslogo img { position:absolute; margin-top: -60px; right: 30px;}
  .atlas .atlaswhy { width: 49%; }
  .atlas .atlasbenefits { width: 49%; float: right; }
}

@media (max-width: 1099px)
{
  .atlasbenefits { margin-bottom: 20px;}
}

/* Cedral */

.cedral .carousel {max-height: 300px; max-width: 1200px;}
.cedral .carousel li { height: 300px; max-width: 300px;}
.cedral .util_textbox .content {padding: 0px 20px 20px 20px;}
.cedral .cedrallogo li { list-style-type: none; }


.cedrallapcolours .util_imgslide .flip { width:80px;height:80px;}
.cedralclickcolours .util_imgslide .flip { width:80px;height:80px;}
.cedrallapcolours .util_imgslide .flip .front, .cedrallapcolours .util_imgslide .flip .back {width:80px;height:80px;}
.cedralclickcolours .util_imgslide .flip .front, .cedralclickcolours .util_imgslide .flip .back {width:80px;height:80px;}
.cedrallapcolours .util_imgslide .flip .front {background-size: contain;}
.cedralclickcolours .util_imgslide .flip .front {background-size: contain;}
.cedrallapcolours .util_imgslide .frontflip {  background-size: contain; }
.cedralclickcolours .util_imgslide .frontflip {  background-size: contain; }
.cedrallapcolours .util_imgslide .backflip {font-size: 80%;}
.cedralclickcolours .util_imgslide .backflip {font-size: 80%;}

.cedral .util_imgslide li .caption {  height: 80px; line-height: 80px; padding: 0px 5px; }
.cedral .util_imgslide .flip {width:80px;height:80px !important; }

@media (min-width: 1100px)
{
  .cedral .cedrallogo img { position:absolute; margin-top: -80px; right: 30px;}
}

/* Coastline Cladding */

.coastline .carousel {max-height: 380px; max-width: 1200px;}
.coastline .carousel li { height: 380px; max-width: 380px;}
.coastline .util_textbox .content {padding: 0px 20px 20px 20px;}

.coastline .coastlinelogo li { list-style-type: none; }

@media (min-width: 1100px)
{
  .coastline .coastlinelogo img { position:absolute; margin-top: -50px; right: 30px;}
}

/* Stratus */

.stratus .carousel {max-height: 380px; max-width: 1200px;}
.stratus .carousel li { height: 380px; max-width: 380px;}
.stratus .util_textbox .content {padding: 0px 20px 20px 20px;}

.stratus .stratusbuiltbetter{ background-color: var(--blue); color: white; margin-top: 30px; }
.stratus .stratusbuiltbetter h2 { padding:20px 0px 20px 0px; }
.stratus .stratusdesigncolour { background-color: var(--grey); color: white; margin-top: 30px; margin-bottom: 30px;}
.stratus .stratusdesigncolour h2 { padding:20px 0px 20px 0px; }

.stratus .stratusdesigns .util_imgslide .flip { width:120px;height:120px;}
.stratus .stratusdesigns .util_imgslide .flip .front, .stratus .stratusdesigns .util_imgslide .flip .back {width:120px;height:120px;}
.stratus .stratusdesigns .util_imgslide .flip .front {background-size: contain;}
.stratus .stratusdesigns .util_imgslide .frontflip { background-size: contain; }

.stratus .stratuslogo li { list-style-type: none; }

@media (min-width: 1100px)
{
  .stratus .stratuslogo img { position:absolute; margin-top: -60px; right: 30px;}

}
@media (min-width: 900px)
{
  .stratus iframe { min-width: 800px; min-height: auto; text-align: left;}
}

@media ( max-width: 899px)
{
  .stratus iframe { max-width: 300px; height: auto; text-align: left;}
}