@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');

html * { -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; box-sizing:border-box; text-rendering:optimizeLegibility; }
html { scroll-behavior:smooth; }

body { font-family:Tahoma, Arial, Helvetica, sans-serif; color:#404040; font-style:normal; font-weight:normal; font-size:17px; line-height:1.5em; position:relative; }
body.menu-open { height:100vh; overflow-y:hidden; }
  
/* General */
img { max-width:100%; height:auto; margin-bottom:16px; }
a { color:inherit; text-decoration:underline; cursor:pointer; transition:color 0.3s ease; }
a:hover { color:#D51E00; }
a img { text-decoration:none; }
hr { border-top:1px solid #000; width:100%; }
strong { font-weight:normal; font-style:normal; font-family:'bnpp_sansbold', sans-serif; }
body ::selection { background:#000; color:#FFF; }
body ::-moz-selection { background:#000; color:#FFF; }
ol { counter-reset:item; }
ol li { display:block; position:relative; margin:1em 0; }
ol li:before { content:counters(item, ".")"."; counter-increment:item; position:absolute; margin-right:100%; right:10px; /* space between number and text */ }
.text-center { text-align:center; }
.clear { clear:both; }
.lozenge { border:4px solid #326EBD; border-radius:15px; padding:20px; margin-bottom:16px; }
.lozenge img { margin-bottom:0; }
.hr { margin:40px 0; height:1px; width:100%; background:#D51E00; background:-webkit-linear-gradient(left, rgb(255,255,255) 0%, rgb(213,30,0) 50%, rgb(255,255,2550) 100%); }

/* Typography */
h1 { font-size:20px; font-weight:700; font-style:normal; line-height:1.2em; margin:1.2em 0; }
strong { font-weight:700; }
p { margin-top:0; padding-top:0; }
ul { padding-left:26px; }
ul li { margin-bottom:14px; }

/* Layout */
.content { width:100%; max-width:1020px; padding:0 15px; margin:auto; }

/* Header bar */
.header { background:#FFF; border-top:15px solid #326EBD; padding:15px 0; font-family:'Lato', Tahoma, Arial, Helvetica, sans-serif; font-weight:700; position:sticky; top:0; z-index:99; }
.header .logo { display:inline-block; float:left; }
.header .logo img { width:300px; margin-bottom:0; }
.header .strap { color:#D51E00; font-size:25px; line-height:1.3em; text-align:right; float:right; margin-top:10px; }
.header .strap a { text-decoration:none; }
.header nav { float:right; margin-top:15px; }
.header nav a { text-decoration:none; padding:0 7px; transition:color 0.3s ease; font-weight:400; }
.header nav div { display:inline; }
.header nav a:hover, .header nav a.on { color:#D51E00; }
.header nav a.last { padding-right:0; }

/* Mobile menu icon */
.mobile-menu-icon { display:none; position:absolute; top:17px; right:20px; width:32px; height:23px; transform:rotate(0deg); transition:.5s ease-in-out; cursor:pointer; }
.mobile-menu-icon .label { position:absolute; bottom:-20px; left:-2px; font-size:14px; line-height:1em; }
.mobile-menu-icon span { display:block; position:absolute; height:3px; width:100%; background:#326EBD; border-radius:5px; opacity:1;
  left:0; transform:rotate(0deg); transition:.25s ease-in-out; }
.mobile-menu-icon span:nth-child(1){ top:0px; transform-origin:left center; }
.mobile-menu-icon span:nth-child(2){ top:10px; transform-origin:left center; }
.mobile-menu-icon span:nth-child(3){ top:20px; transform-origin:left center; }
.mobile-menu-icon.open span:nth-child(1){ transform:rotate(45deg); top:-3px; left:8px; }
.mobile-menu-icon.open span:nth-child(2){ width:0%; opacity:0; }
.mobile-menu-icon.open span:nth-child(3){ transform:rotate(-45deg); top:20px; left:8px; }

/* Banner */
.banner { margin-top:15px; background:#326EBD; color:#FFF; padding:15px 0 20px 0; font-family:'Lato', Tahoma, Arial, Helvetica, sans-serif; font-weight:700; font-size:25px; line-height:1.3em; text-align:center; }

/* Page Specifics */
.slider-area { overflow:hidden; padding:0; }
.yell-review { font-weight:700; text-align:center; }
.sky-logo { width:90%;}
.contact-info .row { margin-bottom:16px; }
.testimonials i { display:inline-block; margin-bottom:5px; margin-top:20px; }
.enquiry-thanks { display:none; }
.slider-alt { display:none; }
.grecaptcha-badge { bottom:67px!important; opacity:0; pointer-events:none; }

/* Footer bar */
.footer { background:#326EBD; color:#FFF; padding:20px 0; }
.footer .content { max-width:100%; }
.footer nav { text-align:right; }
.footer nav a { text-decoration:none; }
.footer nav a:hover { color:#FFF; text-decoration:underline; }

/* Form elements */
.input-wrapper { --padding:8px; --focus-color:#000; position:relative; display:flex; align-items:center; margin-top:16px; }
.input-wrapper input { padding:var(--padding); border:2px solid #999; outline:none; border-radius:6px; width:100%; }
.input-wrapper textarea { padding:var(--padding); border:2px solid #999; outline:none; border-radius:6px; width:100%; height:95px; }
.input-wrapper .placeholder { position:absolute; top:7px; background-color:#FFF; color:#666; left:var(--padding); padding:0 4px; transition:all 0.2s ease-in; -webkit-user-select:none; -ms-user-select:none; user-select:none; }
input:is(:focus), textarea:is(:focus), .inputfilled { border:2px solid var(--focus-color); }
input:is(:focus) + .placeholder, textarea:is(:focus) + .placeholder, .inputfilled + .placeholder { top:-12px; font-size:14px; color:var(--focus-color); }
.input-wrapper.error input, .input-wrapper.error textarea { border:2px solid #FF0000; }

/* Submit */
input[type='submit'] { border:2px solid #326EBD; background:#326EBD; color:#FFF; font-weight:700; padding:10px; border-radius:6px; cursor:pointer; margin-top:16px; transition:all 0.3s ease; }
input[type='submit']:hover { background:#FFF; color:#326EBD; }
input[type='submit'].processing { opacity:0.5; pointer-events:none; }

/* Error checking */
.field-error { width:100%; }
.field-error span { font-size:14px; color:#FF0000; }
.form-feedback { line-height:1.3em; width:90%; }
.form-feedback .error { color:#FF0000; margin-top:16px; }

/* Large */
@media (max-width:990px){
	.mobile-menu-icon { display:block; }
	.header .logo { float:initial; }
	.header .logo img { width:260px; }
	.header .strap { display:block; width:100%; text-align:center; float:initial; font-size:18px; }
	.footer nav { text-align:left; }
	
	.header nav { position:fixed; z-index:100; top:61px; right:-300px; background:#FFF; padding:20px; margin:0; text-align:right; opacity:0; transition:all 0.4s ease; }
	.header nav.open { right:0; opacity:1; }
	.header nav div { display:block; }
	.header nav span { display:none; }
	.header nav a.last { padding-right:15px; }
	.header nav a { display:inline-block; padding:5px 15px; }
}

/* Medium */
@media (max-width:768px){
	.banner { padding:10px 0 15px 0; font-size:18px; line-height:1.3em; }
	.sky-logo { width:100%; }
}

/* Small */
@media (max-width:576px){
	.header .logo img { width:220px; }
	.footer { font-size:14px; line-height:1.5em; }
	.slider-alt { display:block; }
	.slider-alt img { width:100%; margin-bottom:0; }
	.slider-area { display:none; }
}

/* Small */
@media (max-width:476px){
	.header .strap { font-size:15px; }
}
