/*
Theme Name: Social Gallery
Theme URI: Arch
Author: Arch
Author URI: archcreative.co.uk
Description: 
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: 
*/

:root{
	--sidepadding:30px;
	--plyr-color-main: #000;
	--plyr-video-control-color:#fff;
	--grey-light:#f9f8f8;
	--serif:"fields-display", serif;
	--sans:'elza', sans-serif;
	--black:#393939;
	--green:#154248;
	--yellow:#e5a000;
}


/* ===== GENERAL ===== */

.cky-btn-revisit-wrapper { display:none !important; }

html, body { width:100%;margin:0;padding:0;overflow-x:hidden;font-family:var(--sans);font-weight:400; }
body { padding-top:60px; }
html.menuopen { overflow:hidden; }
.m-container-1600 { max-width:1500px;padding:0 var(--sidepadding); }
.m-container-1000 { max-width:1000px;padding:0 var(--sidepadding);margin:0 auto; }

img { display:block; }

.m-grid { margin:0; }

.pos-rel { position:relative; }
.pos-abs { position:absolute; }

.noverflow { overflow:hidden; }

h1,h2,h3,h4,h5,h6 { font-family:var(--serif);font-weight:400; }
h1 { font-size:clamp(4rem,9vw,6rem); }
h2 { font-size:clamp(3rem,3vw,5rem);line-height:clamp(2.3rem,3vw,3rem); }
h3 { font-size:clamp(1.8rem,5.5vw,2.25rem);line-height:clamp(2.4rem,5.5vw,2.5rem);margin:30px 0; }
h4 { font-size:2rem;margin:15px 0; }

h1,h2,h3,h4,h5,h6 { color:var(--green); }
.bg-black :is(h1,h2,h2,h3,h4,h5,h6), .project-slide h3 { color:#fff; }


p, ul, ol { font-size:clamp(1rem,3vw,1.5rem);line-height:clamp(1.5rem,3vw,2rem);font-family:var(--sans);font-size:1.125rem;line-height:2.25rem; }
p.large { font-size:clamp(1.5rem,3vw,2rem);line-height:clamp(2.3rem,3vw,3rem); }

ul, ol { padding-left:15px; }

a.button { line-height:1.5rem;color:var(--green);font-family:var(--sans);text-transform:uppercase;font-size: 0.875rem;font-style: italic;font-weight: 900;display:inline-block;padding:14px 15px 10px;border:2px solid var(--green);text-decoration:none; }
a.button.large { font-size:1.25rem; }
a.button.white { color:#fff;border-color:#fff; }
a.button:hover, a.button:focus { background:var(--yellow);border-color: var(--yellow);color:#fff;opacity:1; }
a.button.white:hover, a.button.white:focus { background:var(--yellow);color:#fff; }

a { color:#000; }
a:hover { opacity:0.5;opacity:1;color:var(--yellow); }
.bg-black a { color:#fff; }

.vertical { height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start; }
.vertical-align { display:block;top:0;left:0;width:100%;height:100%; }
.vertical-outer { display:table;width:100%;height:100%;vertical-align: middle;  }
.vertical-inner { display:table-cell;width:100%;height:100%;vertical-align: middle; }

.bg-grey-light, .bg-grey { background:#999999 url("/wp-content/themes/socialgallery/img/bg-texture-white.jpg") repeat;background-size:auto;background-blend-mode:screen;color:#000; }
.bg-black { background:var(--green)  url("/wp-content/themes/socialgallery/img/bg-texture-dark.jpg") no-repeat center center;background-size:cover;color:#fff;background-blend-mode: multiply; }
.bg-black.flat { background:var(--green); }
.bg-white { background:#fff; }
.bg-pattern { background:var(--green) url("/wp-content/themes/socialgallery/img/logo-icon.svg") repeat left center;background-size: 16% auto;}
.bg-half { position:absolute;top:0;left:50%;width:50%;height:100%; }

.sans, .elza { font-family:var(--sans); }
/*.fields, .fields p { font-family:var(--sans);font-size:clamp(1.2rem,3vw,1.5rem);line-height:180%;font-weight:600; }*/

/* ===== NAV MENU ===== */
nav { position:fixed;z-index:999;top:0;left:0;width:100%; }
nav::after { opacity:0;pointer-events:none;display:block;transition:opacity 0.4s ease-in-out;content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#000; }
nav.open::after { opacity:0.6; }
.navbar { z-inndex:1;text-align:center;padding:10px 15px;position:fixed;width:100%;top:0;left:0;background:#fff;box-shadow:0 0 5px 2px rgba(0,0,0,0.05); }
.logo img { display:inline-block; }

#navmenu { position:fixed;top:0;left:0;height:100%;background:var(--green);color:#fff;width:100%;max-width:750px;z-index:2;transform:translateX(-100%);transition:transform 0.4s ease-in-out;padding:90px 15px 15px clamp(15px,9vw,120px); }
#navmenu.visible { transform:translateX(0px); }
#navmenu .menu { list-style: none;padding:0;margin:0;width:100%;z-index:100;position:relative; }
#navmenu .menu li { display:inline-block;width:100%;margin-bottom:42px; }
#navmenu .menu li a { color:#fff;text-decoration:none;font-size:clamp(2rem, 10vw, 4rem);font-family:var(--serif); }
#navmenu .menu li a:hover { opacity:1;color:var(--yellow); }

.mobile-toggle { width:30px;height:18px;display:inline-block;position:absolute;top:20px;left:var(--sidepadding);z-index:3; }
.toggle-bar { width:100%;height:3px;background:var(--green);position:absolute;top:0;left:0; }
.toggle-bar:last-child { top:auto;bottom:0; }
.mobile-toggle.active .toggle-bar { background:#fff;transform:rotate(45deg);top:8px; }
.mobile-toggle.active .toggle-bar:last-child { transform:rotate(-45deg); }
.mobile-toggle:hover { opacity:0.4;cursor:pointer; }

footer { background:var(--green);color:#fff;padding:90px 0 clamp(90px, 15vw, 200px);text-transform:uppercase;font-family:var(--sans);font-size: 0.875rem;font-style: italic;font-weight: 900; }
#footermenu .menu { list-style: none;padding:0;margin:0; }
footer ul { font-size:0.9rem; }
footer .menu li a { color:#fff;text-decoration:none;line-height:2.5rem; }
footer .menu li a:hover { color:var(--yellow); }
.socials { display:inline-table;table-layout:fixed;width:100%;max-width:150px; }
.socials a { display:table-cell; }



/* ===== GENERAL ===== */
.polaroid { padding:clamp(5px,1vw,15px);background:#fff;box-shadow:3px 3px 3px 3px rgba(0,0,0,0.1);display:inline-block; }



/* ==========  HOMEPAGE =========== */
.video-header-overlay { position:absolute;top:0;left:0;width:100%;height:100%;background:#000; }
.video-header-overlay :is(img,video) { opacity:0.6;z-index:1;width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0; }
.video-header-overlay::before {  z-index:2;content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.4; }
.video-header-text { position:relative;z-index:3; }
.video-header-text h1 { color:#fff;font-size:clamp(3rem,9vw,9.375rem);font-weight:400; }
.video-header-overlay .play-button { position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(60px,8vw,120px);height:clamp(60px,8vw,120px);background:url("/wp-content/themes/socialgallery/img/play-button.svg") no-repeat center;background-size:contain;}
.video-header-overlay .play-button:hover { cursor:pointer;opacity:0.4; }

.home-header-text { padding:30px var(--sidepadding) 15px; }
.home-header-text h1 { margin-bottom:0px; }
.intro { padding:45px 0 30px;height:980px; }
.intro-text { background:rgba(255,255,255,0.8);position:relative;z-index:6;padding:15px;margin:-15px -15px; }
.intro-text h2 { font-size:clamp(1.5rem, 3vw, 2rem); }
.intro > div { height:100%; }
.intro-img { position:absolute;aspect-ratio:1/1; }
.img-5 { bottom:clamp(0px,30vw,50%);right:0;transform:translateY(50%); }
.img-5 img { width:678px;height:678px;object-fit:cover; }
.img-4 { top:-30px;left:calc(50% + 30px); }
.img-4 img { width:434px;height:434px;object-fit:cover; }
.img-2 { bottom:0;left:43%;transform:translateX(-50%);aspect-ratio:464/618; }
.img-2 img { width:464px;height:618px;object-fit:cover; }
.img-3 { bottom:1%;left:61%;transform:translateX(-50%) scale(0.9) rotate(2deg); }
.img-3 img { width:430px;height:430px;object-fit:cover; }
.img-1 { bottom:8%;left:8%; }
.img-1 img { width:430px;height:430px;object-fit:cover; }
.intro-img.swatch { width:35vw;bottom:0;max-width:700px; }
.intro-img.swatch img { width:100%;height:100%;object-fit:contain;object-position:bottom; }


.project-slider .slick-track { padding:30px 0;margin-bottom:60px; }
.project-slide-holder { padding:0px clamp(20px,4vw,60px);text-align:center;}
.slick-dots { bottom:-30px; }
.project-slide { position:relative;display:inline-block;width:auto; }
.project-slide::before { background:var(--green);opacity:0.8;z-index:2;position:absolute;width:100%;height:100%;bottom:clamp(10px,2vw,30px);;right:clamp(10px,2vw,30px);;content:"";display:block; }
.project-slide img { width:100%;max-width:600px;aspect-ratio:1/1;object-fit:cover;position:relative;top:clamp(10px,2vw,30px);left:clamp(10px,2vw,30px);;z-index:1; }
.project-slide-text { text-align:left;padding:clamp(30px,4vw,60px);position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;z-index:3; }
.project-slide-text h3 { max-width:350px;font-size:clamp(1.5rem,5vw,3rem);line-height:clamp(2.25rem,5vw,3.125rem);font-weight:400;margin:0; }
.project-slide-text a.button { position:absolute;bottom:clamp(20px,4vw,60px);right:clamp(20px,4vw,60px); }
.slick-slider { margin-bottom:45px; }
/*.slick-dots { bottom:-30px; }*/

.join-today { font-size:clamp(3.5rem,5.5vw,6.25rem);font-weight:400;margin:30px 0;font-family:var(--serif); }
.join-image { padding-left:60px; }

.upcoming { padding:60px 0px;color:#fff; }
.upcoming img { width:100%; }
.upcoming-overlay { z-index:2;width:46%;opacity:0.8;height:100%;display:block;position:absolute;top:0;left:0;background:var(--green); }
.upcoming-image { position:relative;z-index:1; }
.upcoming-text-holder { width:100%;padding:clamp(60px,7vw,120px);position:absolute;top:0;transform:translateX(-50%);height:100%;left:50%;z-index:3; }
.upcoming-text { width:39%;height:100%; }
.upcoming-text h3 { color:#fff;font-size:clamp(1.4rem,5vw,4.6875rem);line-height:clamp(1.6rem, 5vw, 5rem); }
.upcoming-text a.button { position:absolute;bottom:45px;right:0px; }

.quotes { padding:60px 0; }
.quote-slide { padding-bottom:30px; }
span.name { font-size:1.25rem;display:block;text-transform:uppercase;font-weight:900;font-style:italic;font-family:var(--sans); }
span.role { margin:10px 0;display:block;font-size: 1.25rem;font-style: normal;font-weight: 400;line-height: 1.5rem; }

.slick-dots li button:before { display:none; }
.slick-dots li { width:10px;height:10px; }
.slick-dots li button { background:var(--green);border-radius:100%;width:10px;height:10px;opacity:0.4; }
.slick-dots li.slick-active button { opacity:1; }

 
/* ===== MODULES ===== */
.module { display:block; }

.modular-intro { width:100%;max-width:1000px;padding-bottom:60px; }
/*.modular-intro p { font-family:var(--sans);font-size:clamp(1.2rem,3vw,1.5rem);line-height:180%;font-weight:600; }*/
.modular-intro p span { font-family:var(--sans);display:block;margin-top:30px;font-size:1.2rem;line-height:1.8rem; }
.modular-intro.no-intro { margin-bottom:-60px; }


.full_width_image img { width:100%;min-height:200px;max-height:950px;object-fit:cover; }

.two_column { padding:60px 0px; }
.two_column.double-padding { padding:120px 0px; }
.two_column img { width:100%;position:relative;}
.two_column .left div:not(.polaroid) img { left:-15px; }
.two_column .right div:not(.polaroid) img { right:-15px; }
.text-column { width:100%;max-width:600px;margin:0 auto;display:block; }
.text-column.elza p { font-size:1.125rem;line-height:2.25rem; }
.two_column ul li { font-family:var(--sans);font-weight:400;line-height:1.875rem;font-size:1.125rem;padding-bottom:30px; }


.logo_list { padding:0px 0 120px; }
.logo-grid { display:flex;align-items:center;width:100%;justify-content:space-evenly;flex-wrap:wrap; }
.logo-grid-item { padding:15px;max-width:300px;min-width:10vw; }
.logo-grid img { width:auto;max-width:100%;height:auto; }



.offset_images { max-height:300px; }
.offset-image { width:25%;min-width:200px;max-height:450px;object-fit:cover;max-width:450px;position:absolute;z-index:10;transform:translateX(-50%); }
.offset-image.top { top:0; }
.offset-image.middle { top:50%; }
.offset-image.bottom { bottom:0; }

.offset-image.left { left:10%; }
.offset-image.mid-left { left:32%; }
.offset-image.mid-right { left:65%; }
.offset-image.right { left:87%; }


.module.team { padding:60px 0; }
.team-grid { display:flex;gap:60px;align-items:flex-start;flex-direction:row;flex-wrap:wrap; }
.team-member { width:100%;flex:1 1 30%;max-width:calc(30% - 30px); }
.team-member p { font-size:1rem;line-height:1.875rem; }
.team-grid img { width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:30px; }
.team-intro { max-width:900px;padding:0 0px 30px; }


.module.quote { padding:60px 0; }
.quote p { font-size:1.4rem; }
.quote span b { font-size:1.4rem; }
.quote span { font-size:1.1rem;display:block;line-height:1.5rem; }
.bg-black .slick-dots li button { background:#fff; }


.module.images { padding:30px 0px; }
.images-module { display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-around; }
.images-module img { display:inline-block;width:100%;flex:1 1 auto;max-width:400px; }

.gallery { text-align:center; }
.gallery img { display:inline-block; }

.projects-grid { grid-gap:30px;grid-row-gap:60px; }
.project-holder { padding-bottom:60px;position:relative;height:100%; }
.project-holder img { width:100%;height:auto;aspect-ratio:5/3;object-fit:cover; }
.project-holder a.button { position:absolute;bottom:0;right:0; }
.project-holder span { display:block;padding:15px 15px 5px;font-size:1.6rem;line-height:120%;font-family:var(--serif);font-weight:500;color:var(--green); }
.project-holder p { margin-top:0px; }
.pagination { padding:60px 0px 30px; }



.project-holder { background:#fff;box-shadow:2px 2px 5px rgba(0,0,0,0.2);padding:15px 15px 90px; }
.project-holder a.button { bottom:15px;right:30px; }
.project-holder p { padding:0px 15px; }


.filter { padding:30px 0px;font-weight:600; }
.filter select { color:#000;background:url("/wp-content/themes/socialgallery/img/arrow-down.svg") no-repeat calc(100% - 15px) center;background-size:15px auto;border:1px solid var(--green);padding:10px 40px 10px 10px;appearance:none;margin-left:10px;font-size:1.125rem; }

form input, form textarea { font-family:var(--sans);font-size:1rem; }
form button { font-family:var(--sans) !important;font-style:italic !important;font-weight:700 !important;background:none !important;color:var(--green) !important;border:1px solid var(--green) !important;text-transform:uppercase; }
form button:hover { box-shadow:none !important;color:#fff !important;background:var(--yellow) !important; }

.signup { margin-top:30px;text-transform:none;font-weight:600;font-style:normal; }
.signup span { font-size:1rem;font-weight:600;display:block;margin-bottom:10px;  }
.signup input[type="email"] { width:100%;margin-bottom:10px;padding:10px 15px;border:none; }
.signup label { font-weight:300;padding-left:10px; }
.signup form button { border:1px solid #fff !important;color:#fff !important;padding:15px 15px 10px;margin-top:15px; }
.signup form button:hover { background:var(--yellow) !important;color:v#fff !important;border-color:var(--yellow) !important; }


.next-post { padding:90px 0 90px;background:#000;color:#fff; }
.post-nav { display:flex;width:100%;justify-content:space-evenly;flex-wrap:wrap;gap:30px;row-gap:60px; }
.project-nav-link { text-align:center; }
.project-nav-link span { font-size:1rem;font-weight:bold; }
.project-nav-link a { border:1px solid #fff;padding:10px 15px;text-decoration:none;color:#fff;font-size:clamp(1.1rem,5vw,1.6rem);display:inline-block;margin-top:30px; }
.project-nav-link a:hover { color:#000;background:#fff;opacity:1; }

.gallery-slider { padding:0 var(--sidepadding); }
.gallery-slider img { width:100%; }
.slick-prev:before, .slick-next:before { display:none; }
.slick-prev, .slick-next { border-radius:100%;left:15px;z-index:2;width:40px;height:40px;transform:rotate(90deg);background:#fff url("/wp-content/themes/socialgallery/img/arrow-down.svg") no-repeat center 65%;background-size:26px auto; }
.slick-next { transform:rotate(-90deg);left:auto;right:15px; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { background:#d1d1d1 url("/wp-content/themes/socialgallery/img/arrow-down.svg") no-repeat center 65%;background-size:26px auto;opacity:1; }
.gallery-slider .slick-dots { bottom:-60px; }

@media(max-width:1200px){
	.img-5 { transform:translateY(50%) scale(0.8);right:-60px; }
	.img-4 { transform:scale(0.8); }
	.img-2 { transform:translateX(-50%) scale(0.8);left:46%;bottom:7%; }
	.img-1 { transform:scale(0.8);left:-30px; }
	.img-3 { transform:translateX(-50%) scale(0.7) rotate(2deg);bottom:-12%;left:45%; }


	.team-grid { flex-wrap:wrap;}
	.team-member { display:flex;flex-basis:100%;max-width:100%; }
	.team-member .img { flex:0 0 35%; }
	.team-member .bio { padding:0 30px 30px; }


}



@media(min-width:561px){
	.offset_images { min-height:0px !important; }
}

/* Tablet Size */
@media(max-width:768px){
	.social-col { grid-column-start:5;}
	.video-header-overlay .play-button { top:auto;bottom:30px;left:auto;right:30px;transform:none; }
	.mob-half-bottom { top:75%;left:0;width:100%;height:50%; }

	.upcoming-text { width:45%; }
	.upcoming-overlay { width:55%; }


	.img-5 { transform:translateY(60%) translateX(19%) scale(0.6);right:-60px; }
	.img-4 { transform:scale(0.6) translateX(35%);top:22%;left:auto;right:0; }
	.img-2 { transform:translateX(-50%) scale(0.6);left:42%;bottom:7%; }
	.img-1 { transform:scale(0.6) translateX(-35%);left:0px; }
	.img-3 { transform:translateX(-50%) scale(0.5) rotate(2deg);bottom:-12%;left:30%; }
	.intro { height:890px; } 

		.team-member { flex-wrap:wrap; }
		.intro-text { background:rgba(255,255,255,0.8) }
		.hide-tablet { display:none; }
		.two_column .right div:not(.polaroid) img { right:0px; }
		.two_column .left div:not(.polaroid) img { left:0px; }
		.right-img, .left-img { grid-row-start:1; }
		.join-image { padding-left:0px; }
}
@media(max-width:767px){
/*	.project-slide-text h3 { font-size:3rem;line-height:3.125rem; }*/
	.project-slide-text { padding:50px; }
	.team-member .img { flex:0 0 300px; }
		.team-member .bio { padding:0 0px 0px; }
}


@media(max-width:700px){
	.img-5 { transform:translateY(60%) translateX(19%) scale(0.5);right:-60px; }
	.img-4 { transform:scale(0.5) translateX(47%);top:24%;left:auto;right:0; }
	.img-2 { transform:translateX(-50%) scale(0.5);left:29%;bottom:-1%; }
	.img-1 { transform:scale(0.5) translateX(-35%);left:-4%;bottom:-5%; }
	.img-3 { transform:translateX(-50%) scale(0.4) rotate(2deg);bottom:-23%;left:31%; }
	.intro { height:780px; }
}

/* Mobile Size */
@media(max-width:560px){
	h1 { font-size:2.5rem; }
	.modular-intro p { font-size:1.2rem; }
	.text-column.elza p, p { font-size:1.125rem;line-height:1.6rem; }
	.project-slide-text { padding:30px; }
	.social-col { grid-column-start:1;grid-row-start: 2;}
	.upcoming-text { width:100%; }
	.upcoming-overlay { width:100%; }
	.intro { overflow:hidden; }
	.hide-mobile { display:none; }
	.m-grid-gap-30 { grid-gap:15px; }
	.two_column { padding:30px 0; }
/*	.offset_images { min-height:180px; }*/
.logo img { transform:scale(0.7); }
.modular-intro { padding-bottom:30px; }
footer .socials { margin:15px 0 0; }
.signup { margin-bottom:30px; }
}