/*
	Theme Name: RU Coated 2025
	Theme URI: http://www.peterhintondesign.co.uk
	Description: Tailored WordPress Theme
	Version: 1.3
	Author: Peter Hinton (@peterhinton)
	Author URI: https://www.peterhintondesign.co.uk
	Tags: HTML5, CSS3
*/

/*------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style: none;
}

:root {
	--rucoated-font-01: 'Poppins', sans-serif;
	--rucoated-fontsize-h1: 46px;
	--rucoated-fontsize-h2: 38px;
	--rucoated-fontsize-h3: 28px;
	--rucoated-fontsize-normal: 18px;
	--rucoated-fontsize-small: 14px;
	--rucoated-fontsize-large: 28px;
	--rucoated-lineheight-small: 1.5;
	--rucoated-lineheight-normal: 1.5;
	--rucoated-lineheight-large: 1.5;
	--rucoated-fontweight-normal: 400;
	--rucoated-outerwidth: 1280px;
	--rucoated-outerwidth-narrow: 800px;
	--rucoated-outerwidth-wide: 1400px;
	--rucoated-color-lightgrey: #F1F2F2;
	--rucoated-color-midgrey: #A6AFBA;
	--rucoated-color-darkgrey: #231F20;
	--rucoated-color-blue-dark: #010040;
	--rucoated-color-blue: #4040ff;
	--rucoated-color-blue-light: #8080ff;
	--rucoated-color-white: #fff;
	--rucoated-color-black: #000;
	--rucoated-box-dropshadow: 0px 20px 100px 0px rgba(0,0,0,0.16);
	--rucoated-contentpadding: 100px;
	--rucoated-contentpadding-small: 30px;
}

.has-rucoated-blue-color {color: var(--rucoated-color-blue); } 
.has-rucoated-blue-dark-color {color: var(--rucoated-color-blue-dark); } 
.has-rucoated-blue-light-color {color: var(--rucoated-color-blue-light); } 
.has-rucoated-dark-grey-color { color: var(--rucoated-color-darkgrey); }
.has-rucoated-mid-grey-color { color: var(--rucoated-color-midgrey); }
.has-rucoated-light-grey-color { color: var(--rucoated-color-lightgrey); }
.has-white-color { color: var(--rucoated-color-white); }
.has-black-color { color:  var(--rucoated-color-black); }
.bg-blue, .has-rucoated-blue-background-color { background-color: var(--rucoated-color-blue); color: var(--rucoated-color-white);}
.bg-blue-dark, .has-rucoated-blue-dark-background-color { background-color: var(--rucoated-color-blue-dark); color: var(--rucoated-color-white);}
.bg-blue-light, .has-rucoated-blue-light-background-color { background-color: var(--rucoated-color-blue-light);}
.bg-blue h1, .has-rucoated-blue-background-color h1, 
	.bg-blue h2, .has-rucoated-blue-background-color h2, 
	.bg-blue h5, .has-rucoated-blue-background-color h3, 
	.bg-blue h4, .has-rucoated-blue-background-color h4,
	.bg-blue a, .has-rucoated-blue-background-color a{color: #fff;}
.bg-blue-dark h1, .has-rucoated-blue-dark-background-color h1, 
	.bg-blue-dark h2, .has-rucoated-blue-dark-background-color h2, 
	.bg-blue-dark h5, .has-rucoated-blue-dark-background-color h3, 
	.bg-blue-dark h4, .has-rucoated-blue-dark-background-color h4,
	.bg-blue-dark a, .has-rucoated-blue-dark-background-color a{color: var(--rucoated-color-blue-light);}
.bg-darkgrey, .has-rucoated-dark-grey-background-color { background-color: var(--rucoated-color-darkgrey); color: var(--rucoated-color-white);}
.bg-darkgrey h1, .has-rucoated-darkgrey-background-color h1, 
	.bg-darkgrey h2, .has-rucoated-darkgrey-background-color h2, 
	.bg-darkgrey h5, .has-rucoated-darkgrey-background-color h3, 
	.bg-darkgrey h4, .has-rucoated-darkgrey-background-color h4,
	.bg-darkgrey a, .has-rucoated-darkgrey-background-color a{color: #fff;}
.bg-white, .has-white-background-color { background-color: var(--rucoated-color-white); }
.bg-lightgrey, .has-rucoated-light-grey-background-color { background-color: var(--rucoated-color-lightgrey); }
.bg-midgrey, .has-rucoated-mid-grey-background-color { background-color: var(--rucoated-color-midgrey); }
.bg-black, .has-black-background-color { background-color:  var(--rucoated-color-black); }
.bg-logo-01 {background-image: url(images/arrows-white.svg); background-position: center right 10%; background-size: auto 50%; background-repeat: no-repeat;}

body{margin: 0; padding: 0; background: #fff; color: var(--rucoated-color-darkgrey); font-size: var(--rucoated-fontsize-normal); font-weight: var(--rucoated-fontweight-normal); line-height: var(--rucoated-lineheight-normal); font-family: var(--rucoated-font-01);}

.wrapper{display: block; width: 100%; margin: 0 auto;}
.wrapper-content{display: block; width: 100%; margin: 0 auto; position: relative;}

h1{font-size: var(--rucoated-fontsize-h1); font-family: "Poppins", sans-serif; font-weight: 600; text-transform: uppercase; line-height: 1.2; padding: 0 0 var(--rucoated-contentpadding-small) 0; color: var(--rucoated-color-darkgrey); transition: all 0.2s ease-out 0s;}
h2{font-size: var(--rucoated-fontsize-h2); font-family: "Poppins", sans-serif; font-weight: 600; text-transform: uppercase; line-height: 1.2; padding: 0 0 var(--rucoated-contentpadding-small) 0; color: var(--rucoated-color-darkgrey); transition: all 0.2s ease-out 0s;}
h3{font-size: var(--rucoated-fontsize-h3); font-family: "Poppins", sans-serif; font-weight: 600; line-height: 1.2; padding: 0 0 var(--rucoated-contentpadding-small) 0; color: var(--rucoated-color-darkgrey);}

p{padding: 0 0 var(--rucoated-contentpadding-small)  0; max-width: var(--rucoated-outerwidth);}

a{text-decoration: none; color: var(--rucoated-color-blue); transition: all 0.2s ease-out 0s; text-decoration: none;}
a:hover{color: var(--rucoated-color-darkgrey); text-decoration: underline;}
em, i{font-style: italic;}
b, strong{font-weight: 700;}
ul{margin: 0 auto 10px auto; padding: 0;}
ul li{list-style: disc; margin: 0 0 16px 16px; list-style-position: inside; list-style: circle;}
ol{margin: 10px auto; padding: 0 0 0 15px;}
ol li{list-style: decimal; margin: 0 0 16px 16px; list-style-position: inside;}
ol ol li{list-style-type: lower-roman;}
img{display: block; max-width: 100%; height: auto;}
iframe{max-width: 100%; width: 100%;}
blockquote{font-weight: 700; border-left: 2px solid #009dca; padding: 30px 0 0 20px; margin: 0 auto 30px auto; font-style: italic;}
hr{display: block; width: 100%; height: 1px; margin: 30px auto; overflow: hidden; background: var(--rucoated-color-midgrey); max-width: var(--rucoated-outerwidth); border: 0;}
hr.small{margin: 30px auto;}
hr.large{margin: 100px auto;}
iframe{min-height: 700px;}

input, select, button{font-size: 15px; font-size: var(--rucoated-fontsize-normal); font-weight: var(--rucoated-fontweight-normal); line-height: var(--rucoated-lineheight-normal); font-family: var(--rucoated-font-01); display: inline-block; width: 100%; padding: 10px 10px; margin: 6px auto 20px auto; box-sizing: border-box; border-radius: 0px; max-width: none; border: none; background: var(--rucoated-color-lightgrey);}
textarea{font-size: 15px; font-family: 'Roboto', sans-serif;  display: inline-block; width: 100%; height: 110px; box-sizing: border-box; padding: 10px 10px; margin: 6px auto 20px auto; border-radius: 0px; max-width: none; border: none; background: var(--rucoated-color-lightgrey);}
input[type="checkbox"],
	.wpcf7-list-item-label{display: inline-block; vertical-align: middle; width: auto; margin: 0 15px 0 0}
input[type="submit"], input[type="button"], button{background: var(--rucoated-color-blue); color: var(--rucoated-color-white);  display: inline-block; width: auto; line-height: normal; cursor: pointer; padding: 10px 25px; border-radius: 0px; transition: all 0.25s linear 0s; font-size: var(--rucoated-fontsize-normal); font-weight: var(--rucoated-fontweight-normal); line-height: var(--rucoated-lineheight-normal); font-family: var(--rucoated-font-01); margin: 0px auto 20px auto; border: none;}
input[type="submit"]:hover, input[type="button"]:hover, button:hover{background: var(--rucoated-color-darkgrey); color: var(--rucoated-color-white);}
input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 24px; min-width: 24px; height: 24px; min-height: 24px; border: 2px solid var(--rucoated-color-blue); background: none; cursor: pointer; position: relative; display: block; margin-right: 10px; vertical-align: middle; padding: 0; overflow: hidden; } 
input[type="checkbox"]:checked { background-color: var(--rucoated-color-blue); } 
input[type="checkbox"]:checked::after { content: '\2714'; font-size: 14px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#header{display: block; transition: all 0.3s ease-in-out 0s; }
#header .content{margin: 0 auto; padding: 20px 0; position: relative; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease-in-out 0s;}
#header .logo{width: 100%; max-width: 180px;  transition: all 0.3s ease-in-out 0s;}
#header #nav{display: block; position: relative; transition: all 0.3s ease-in-out 0s;}
#header #nav ul{display: flex; align-items: flex-end; justify-content: center; flex-direction: row; margin: 0; padding: 0;}
#header #nav ul li{display: block; padding: 20px 0 20px 40px; margin: 0;}
#header #nav a{transition: all 0.3s ease-in-out 0s;}

#btn-nav{width: 50px; height: 50px; display: none; position: fixed; top: 30px; right: 20px; z-index: 999; background: none;}
#btn-nav-bg{width: 90px; height: 60px; display: none; position: fixed; top: 25px; right: 0; z-index: 991; background: none; background: #fff;}
#btn-nav .relative{display: block; height: 100%; width :100%;}
#btn-nav .line{width: 40px; height: 3px; display: block; background: var(--rucoated-color-blue); position: absolute; left: 50%; transform: translateX(-50%); transition: all 0.2s linear 0s; margin-top: -1px; top: 50%;}
#btn-nav .line-01{transform: translateX(-50%) translateY(-13px);}
#btn-nav .line-03{transform: translateX(-50%) translateY(13px);}
#btn-nav:hover .line-01{transform: translateX(-50%) translateY(-18px);}
#btn-nav:hover .line-03{transform: translateX(-50%) translateY(18px);}
#btn-nav.open .line{background: var(--rucoated-color-blue);}
#btn-nav.open .line-01{transform: translateX(-50%) rotate(45deg); transition: all 0.25s linear 0s;}
#btn-nav.open .line-02{opacity: 0; transition: all 0.25s linear 0s;}
#btn-nav.open .line-03{transform: translateX(-50%) rotate(-45deg); transition: all 0.25s linear 0s;}
#btn-nav.nav-open:hover{background-position: center -50px;}

#hero {display: flex; align-items: center; justify-content: center; position: relative; min-height: 80vh; overflow: hidden;}
#hero h1{font-size: var(--rucoated-fontsize-h2); }
#hero .hero-photos {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; }
#hero .hero-photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2s ease-in-out; }
#hero .hero-photo.active {opacity: 1;}
#hero .hero-photo .hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#hero .hero-photos::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); background: linear-gradient(0deg,rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.7) 100%); z-index: 1; }
#hero .col{max-width: 50%; background: var(--rucoated-color-white); padding: calc(var(--rucoated-contentpadding-small) * 1.5); box-sizing: border-box;}
#hero .content {position: relative; z-index: 2;}
#hero .btn-box{margin: 0;}

#hero-default{display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;}
#hero-default h1{padding: 0; margin: 0;}

.btn-box, .wp-block-button__link{ position: relative; display: inline-block; color: var(--rucoated-color-blue-dark); min-width: 200px; text-align: center; border: 2px solid var(--rucoated-color-blue-dark); box-sizing: border-box; width: auto; background: none; border-radius: 0; height: auto; line-height: auto; text-decoration: none; padding: 15px 20px; transition: all 0.3s ease; margin: var(--rucoated-contentpadding-small) 0 0 0;} 
.btn-box:hover, .wp-block-button__link:hover{background-color: var(--rucoated-color-blue); border-color: var(--rucoated-color-blue); color: var(--rucoated-color-white); cursor: pointer; text-decoration: none;}
.bg-blue .btn-box,
	.bg-blue-dark .btn-box,
	.bg-darkgrey .btn-box,
	.bg-black .btn-box{color: var(--rucoated-color-white); border-color: var(--rucoated-color-white);}
.bg-blue .btn-box:hover,
	.bg-blue-dark .btn-box:hover,
	.bg-darkgrey .btn-box:hover,
	.bg-black .btn-box:hover{color: var(--rucoated-color-blue-dark); background-color: var(--rucoated-color-white); border-color: var(--rucoated-color-white);}
	
.btn-box-small{ position: relative; display: inline-block; min-width: auto; box-sizing: border-box; width: auto; background: none; border-radius: 0; height: auto; line-height: normal; color: var(--rucoated-color-blue); text-decoration: none; padding: 0 40px 0 0; transition: all 0.3s ease; } 
.btn-box-small::after{ position: absolute; right: 20px; top: 50%; transition: all 0.3s ease; transform: translateY(-50%); width: 20px; height: 12px; content: ''; background-color: var(--rucoated-color-blue); mask: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="31.4px" height="24.1px" viewBox="0 0 31.4 24.1"><g><line fill="none" stroke="black" stroke-width="2" stroke-miterlimit="10" x1="0" y1="12.1" x2="30" y2="12.1"/><polyline fill="none" stroke="black" stroke-width="2" stroke-miterlimit="10" points="18.6,0.7 30,12.1 18.6,23.4"/></g></svg>'); mask-size: contain; mask-repeat: no-repeat; mask-position: center;} 
.btn-box-small:hover{color: var(--rucoated-color-black); cursor: pointer;}
.btn-box-small::after{transform: translate(25%, -50%);}

.call-out-box{display: flex; width: 100%;  min-height: 250px;  max-width: var(--rucoated-outerwidth-wide); flex-direction: row; align-items: center; padding: 0 40px 0 400px; margin: 0 auto; gap: 40px; box-sizing: border-box; position: relative;}
.call-out-box .call-out-image{display: block; width: 350px; height: 100%;overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0;}
.call-out-box .call-out-image img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.call-out-box .content-inner{padding: 50px 0;}
.call-out-box .content-inner p:last-of-type{padding-bottom: 0;}
.call-out-box .col-container{align-items: center;}
.call-out-box .btn-box, .call-out-box .wp-block-button__link{margin: 0;}

.sub-pages-block .sub-page-image{display: block; width: 100%; min-width: 100%;}
.sub-pages-block.has-1-columns .wp-block-column{flex-basis: 100% !important;}
.sub-pages-block.has-2-columns .wp-block-column{flex: 1 1 calc(50% - 20px) !important;}
.sub-pages-block.has-3-columns .wp-block-column{flex: 1 1 calc(33.33% - 27px) !important;}

.lightbox-image-gallery {}
.lightbox-grid{display: grid; gap: 20px; grid-template-columns: repeat(5, 1fr); }
.lightbox-item{position: relative; overflow: hidden; cursor: pointer; }
.lightbox-item a{display: block; position: relative; }
.lightbox-item img{width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; transition: transform 0.3s ease; }
.lightbox-item:hover img{transform: scale(1.05);}
.lightbox-overlay{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.lightbox-item:hover .lightbox-overlay{opacity: 1;}
.lightbox-modal{display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); animation: anim_lightbox_fadeIn 0.3s; }
.lightbox-content{position: relative; margin: auto; padding: 0px; width: 90%; max-width: 1200px; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.lightbox-image{max-width: 100%; max-height: 80vh; object-fit: contain;}
.lightbox-caption{color: #fff; text-align: center; margin-top: 20px;}
.lightbox-close{position: absolute; top: 40px; right: 0; width: 50px; height: 50px; cursor: pointer; z-index: 10000; background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:none;stroke:%23ffffff;stroke-width:6;stroke-miterlimit:10;%7D%3C/style%3E%3Cline class='st0' x1='3' y1='3' x2='47' y2='47'/%3E%3Cline class='st0' x1='47' y1='3' x2='3' y2='47'/%3E%3C/svg%3E"); background-size: 60%; background-repeat: no-repeat; background-position: center; background-color: rgba(0,0,0,0.4); border-radius: 50%; overflow: hidden; transition: all 0.3s ease; font-size: 0; color: transparent; }
.lightbox-close:hover{transform: rotate(90deg); background-color: rgba(0,0,0,0.8);}
.lightbox-prev { position: absolute; top: 50%; left: 0px; transform: translate(-50%, -50%); width: 50px; height: 50px; border: none; cursor: pointer; border-radius: 50%; transition: all 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:none;stroke:%23ffffff;stroke-width:6;stroke-miterlimit:10;%7D%3C/style%3E%3Cpolyline class='st0' points='35.9,3.2 14.1,25 35.9,46.8 '/%3E%3C/svg%3E"); background-size: 60%; background-repeat: no-repeat; background-position: center; background-color: rgba(0,0,0,0.4); text-indent: -9999px; overflow: hidden; color: transparent; }
.lightbox-next { position: absolute; top: 50%; right: 0px; transform: translate(50%, -50%) scaleX(-1); width: 50px; height: 50px; border: none; cursor: pointer; border-radius: 50%; transition: all 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:none;stroke:%23ffffff;stroke-width:6;stroke-miterlimit:10;%7D%3C/style%3E%3Cpolyline class='st0' points='35.9,3.2 14.1,25 35.9,46.8 '/%3E%3C/svg%3E"); background-size: 60%; background-repeat: no-repeat; background-position: center; background-color: rgba(0,0,0,0.4); text-indent: -9999px; overflow: hidden; color: transparent; }
.lightbox-prev:hover,
	.lightbox-next:hover{background-color: rgba(0,0,0,0.8);}
@keyframes anim_lightbox_fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.testimonial-container{display: block; position: relative; z-index: 0;}
.testimonial-container::before{display: block; width: 100%; height: 150px; content: ' '; position: absolute; top: 100%; left: 0; right: 0; z-index: -1; background: var(--rucoated-color-darkgrey);}
.testimonial-individual{display: block; width: 100%; box-sizing: border-box; padding: 0 0 0 150px; position: relative;}
.testimonial-individual::after{display: block; width: 120px; height: 120px; position: absolute; top: 0; left: 0; content: ' '; background: url(images/rucoated-quote.svg) top left no-repeat; background-size: contain;}
.testimonial-individual .testimonial-quote{font-size: var(--rucoated-fontsize-large); line-height: var(--rucoated-lineheight-large);}
.testimonial-individual .testimonial-details{color: var(--rucoated-color-midgrey); padding-top: 22px;}

ul.services-list{border-top: 1px solid var(--rucoated-color-blue); list-style: none; margin: 0; padding: 0;}
ul.services-list li{border-bottom: 1px solid var(--rucoated-color-blue); list-style: none; margin: 0; padding: 15px 0; box-sizing: border-box;}
ul.services-list p{padding: 0; margin: 0;}

.feature-col{display: flex; flex-direction: column; height: 100%; padding-bottom: var(--rucoated-contentpadding-small); box-sizing: border-box;}
.feature-col img{display: block; width: 100%;}
.feature-col .content-inner{box-sizing: border-box; padding: 25px;}
.feature-col-inner{display: flex; flex-direction: column; height: 100%; box-shadow: var(--rucoated-box-dropshadow); background-color: var(--rucoated-color-white);}

.col-container{display: flex; width: 100%; justify-content: space-between; align-items: flex-start; gap: 50px; margin: var(--rucoated-contentpadding-small) auto;}
.col-02 .col{flex: 1 1 50%; position: relative;}
.col-03 .col{flex: 1 1 33.33%; position: relative;}
.col-04 .col{flex: 1 1 25%; position: relative; }
.col-auto .col{width: auto;}

nav a{color: var(--rucoated-color-blue-dark);}
nav .current_page_item a{color: var(--rucoated-color-blue);}

.wp-block-group{display: block; width: 100%;}
.wp-block-columns{align-items: stretch; gap: 40px;}
.wp-block-spacer{display: block; width: 100%; height: 1px !important; background: var(--rucoated-color-midgrey); overflow: hidden; margin: var(--rucoated-contentpadding-small) auto;}
.content,
	.content .wp-block-group,
	.wp-block-group .wp-block-group{display: block; width: 90%; max-width: var(--rucoated-outerwidth); padding: var(--rucoated-contentpadding) 0; margin: 0 auto;}
.content-narrow{display: block; width: 100%; max-width: var(--rucoated-outerwidth-narrow); padding: var(--rucoated-contentpadding) 0; margin: 0 auto;}
.content .content-narrow{margin: 0; padding: 0;}

.tagline{margin: 0; padding: 0;}
.text-large{font-size: var(--rucoated-fontsize-large); line-height: var(--rucoated-lineheight-large);}
.text-small{font-size: var(--rucoated-fontsize-small); line-height: var(--rucoated-lineheight-small);}
.text-right{text-align: right;}
.text-left{text-align: left;}
.text-center{text-align: center;}

#footer {display: block; margin-top: var(--rucoated-contentpadding-small) 0;}
#footer .content{padding: var(--rucoated-contentpadding-small) 0;}
#footer .logo{display: inline-block; max-width: 218px;}
#footer-nav{display: flex; justify-content: flex-end; position: relative; transition: all 0.3s ease-in-out 0s;}
#footer-nav::after { content: ''; position: absolute; bottom: 0; right: 0; width: 150%; transition: all 0.3s ease-in-out 0s; height: 1px; background: rgba(255,255,255,0.2); background: linear-gradient(90deg,rgba(255,255,255, 0) 0%, rgba(255,255,255,0.7) 30%); z-index: 1; }
#footer-nav ul{display: flex; align-items: flex-end; justify-content: center; flex-direction: row; margin: 0; padding: 0;}
#footer-nav ul li{display: block; padding: 20px 0 20px 40px; margin: 0;}
#footer-nav a{transition: all 0.3s ease-in-out 0s;}
.footer-contact p{margin: 0; padding: 0;}
.social-container .social { display: inline-block; margin: 5px 8px 5px 0; width: 40px; height: 40px; border-radius: 40px; background: url(images/social-media.svg) no-repeat; border: none; background-size: 200px; text-indent: -9999px; overflow: hidden; }
.social-container .social:hover{background-color: var(--rucoated-color-lightgrey);}
.social-container .social.twitter{background-position: -40px 0;}
.social-container .social.linkedin{background-position: 0 0;}
.social-container .social.facebook{background-position: -80px 0;}
.social-container .social.youtube{background-position: -160px 0;}
.social-container .social.instagram{background-position: -120px 0;}
.footer-copyright .content{padding: var(--rucoated-contentpadding-small) 0; font-size: var(--rucoated-fontsize-small);}
.footer-copyright p{padding: 0; margin: 0;}


@media screen and (min-width: 1120px) {
	
	#header #nav {display: flex; position: static; width: auto; height: auto; background: none; transform: translate(0); overflow: visible; align-items: center; flex-direction: row; justify-content: flex-start; list-style: none; margin: 0; padding: 0;}
	#header #nav ul {display: flex; align-items: flex-start; flex-direction: row; justify-content: space-between; list-style: none; margin: 0; padding: 0;}
	#header #nav ul li {display: block; position: relative; z-index: 9;}
	#header #nav ul li a {display: flex; box-sizing: border-box; flex-direction: row-reverse; align-items: center;  position: relative; z-index: 99;}
	#header #nav ul li > a {box-sizing: border-box;}

	body.scrolled #header{background:  var(--rucoated-color-blue);}
	body.scrolled  #header .content{padding: 5px 0;}
	body.scrolled #header .logo{max-width: 120px;}
	body.scrolled  #header #nav::after{opacity: 0;}
	body.scrolled  #header #nav a{font-size: var(--rucoated-fontsize-normal); line-height: var(--rucoated-lineheight-normal);}
	body.scrolled  .logo-tagline-01,
		body.scrolled  .logo-tagline-02{opacity: 0;}
	body.scrolled .logo-line{transform: translateY(-10%);}
	body.scrolled #logo-header{transform: translateY(18%);}

}


@media screen and (min-width: 0px) and (max-width: 1119px) {

	#header{min-height: 70px;}
	#header .logo{max-width: 150px;}

	#btn-nav,
		#btn-nav-bg{display: block;}

	#header #nav {width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; position: fixed; box-sizing: border-box; padding: 120px 30px 30px 30px; overflow: scroll; top: 0; left: 0; right: 0; bottom: 0; z-index: 990; margin: 0; transform: translateX(100%); transition: all 0.3s ease-out 0s; background: var(--rucoated-color-blue); } 
	#header #nav div{display: block; width: 100%;}
	#header #nav.open { opacity: 1; transform: translateX(0); visibility: visible; } 
	#header #nav img { display: none; } 
	#header #nav ul { display: block; width: 100%; } 
	#header #nav ul li { display: block; width: 100%; text-align: left; margin: 0; padding: 3px 0; border: none; border-bottom: 1px solid #fff;} 
	#header #nav ul .menu-item-has-children{ border-bottom: 1px solid rgba(255,255,255,0.2);} 
	#header #nav ul li a { display: block; height: auto; line-height: normal; font-size: 18px; padding: 15px 0; color: #fff; position: relative;  border: none !important; font-size: var(--rucoated-fontsize-large); line-height: var(--rucoated-lineheight-large);}
	#header #nav ul li > a:hover{color: #fff; border: none;}
	#header #nav ul li:hover,
	#header #nav ul li:hover a{color: #fff; background: none;}
	#header #nav ul li a:hover {background: none;  border: none;}
	#header #nav::after{display: none;}

	.text-right,
	.text-left,
	.text-center{text-align: left;}

	#footer-nav{justify-content: flex-start; }
	#footer-nav ul li{display: block; padding: 20px 20px 20px 0; margin: 0;}

}


@media screen and (min-width: 700px) and (max-width: 1119px) {

	#hero .col{max-width: 60%;}

	.col-container{flex-wrap: wrap;}
	.col-02 .col,
		.col-03 .col,
		.col-04 .col,
		.col-03 .col-large,
		.col-03 .col-small,
		.woocommerce ul.products.columns-3 li.product{}



}


@media screen and (min-width: 0px) and (max-width: 699px) {

	:root {
		--rucoated-fontsize-h1: 32px;
		--rucoated-fontsize-h2: 26px;
		--rucoated-fontsize-h3: 20px;
		--rucoated-fontsize-normal: 15px;
		--rucoated-fontsize-small: 12px;
		--rucoated-fontsize-large: 20px;
		--rucoated-contentpadding: 75px;
		--rucoated-contentpadding-small: 30px;
	}

	#btn-nav{display: block;}

	#hero,.hero-section {min-height: 50vh;}
	#hero .col{max-width: 100%;}

	.call-out-box{display: flex;  flex-direction: column; align-items: flex-start; padding: var(--rucoated-contentpadding) var(--rucoated-contentpadding-small); gap: var(--rucoated-contentpadding-small);}
	.call-out-box .call-out-image{display: block; width: 100%; height: auto; position: relative;}
	.call-out-box .call-out-image img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
	.call-out-box .content-inner{padding: 50px 0;}

    .sub-pages-block.has-2-columns .wp-block-column,
    .sub-pages-block.has-3-columns .wp-block-column{flex-basis: 100% !important;}

	.lightbox-grid {grid-template-columns: repeat(3, 1fr);}
    .lightbox-prev{left: 10px;}
    .lightbox-next{right: 10px;}
    .lightbox-close{right: 20px;}

	.col-container{flex-wrap: wrap;}
	.col-02 .col,
		.col-03 .col,
		.col-04 .col,
		.col-overview .col,
		.woocommerce ul.products.columns-3 li.product,
		.col-large,
		.col-sidebar,
		.col-03 .col-large,
		.col-03 .col-small,
		#footer-cols,
		#footer-accreditation{width: 100%; max-width: 100%}

}