/*
Theme Name: Brew Beats
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: 
*/


@font-face {
    font-family: 'Gilroy';
    src: url('/wp-content/themes/brews_arch/font/Gilroy-Extrabold.woff2') format('woff2'),
        url('/wp-content/themes/brews_arch/font/Gilroy-Extrabold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('/wp-content/themes/brews_arch/font/Gilroy-Regular.woff2') format('woff2'),
        url('/wp-content/themes/brews_arch/font/Gilroy-Regular.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('/wp-content/themes/brews_arch/font/Gilroy-Light.woff2') format('woff2'),
        url('/wp-content/themes/brews_arch/font/Gilroy-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


:root { 
    --red:#FA001A;
    --cream:#f7e6bf;
    --yellow:#ffba00;
    --plyr-color-main: var(--cream);
    --square-size: 150px;
    --border:  var(--cream);
    --border-light:  rgba(255,255,255,0.3);
 }



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

html, body { width:100%;margin:0;padding:0;overflow-x:hidden;font-family: "Gilroy", sans-serif;font-weight: 500;background:#000;color:var(--cream); }

img { display:block; }

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


.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; }

.m-grid { margin-bottom:0 }

.bg-black { background:#000; }

.text-center { text-align:center; }
.text-black { color:#000; }
.text-yellow { color:var(--yellow) }
.text-red { color:var(--red); }

p { font-size:1.1em;line-height:1.5em; }

p a { font-weight:bold;text-transform: uppercase;color:var(--cream);text-decoration: none;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
p a:hover { color:#000; }

a.privacy { color:var(--cream);text-decoration: none;font-size:0.8em;font-weight:bold; }
a.privacy:hover { color:var(--red); }

a { color:var(--cream);text-decoration:none;}
a:hover { color:var(--yellow); }

b, strong { -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }

/* ===== NAV MENU ===== */
nav { padding:15px 15px; }
#navmenu .menu { list-style: none;padding:0;margin:0;display:table;table-layout: fixed;width:100%;z-index:100;position:relative; }
#navmenu .menu li { display:table-cell;text-align:center;padding:15px 10px;position:relative; }
#navmenu .menu li a { border-bottom: 5px solid #000;color:var(--cream);text-decoration: none;text-transform: uppercase;font-weight:bold;display:inline-block;width:auto;padding:0 5px;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
#navmenu .menu li a:hover { color:var(--yellow) }
#navmenu .menu li.current_page_item a { border-color:var(--yellow);color:var(--yellow) }

/*#navmenu .sub-menu { display:none;position:absolute;width:100%;top:100%;left:0;background:var(--cream);list-style: none;padding:0;margin:0; }
#navmenu .sub-menu li { display:inline-block;width:100%; }
#navmenu .menu li:hover .sub-menu { display:inline-block; }*/

.mobile-toggle { width:30px;height:30px;display:none; }
.toggle-bar { width:100%;height:3px;margin-bottom:5px;background:var(--cream); }
.mobile-toggle.active .toggle-bar, .mobile-toggle:hover .toggle-bar { background:#000; }

#footermenu .menu { list-style: none;padding:0;margin:0; }


.announcement-bar { background:#000;color:var(--cream);text-align:center;font-weight:bold;padding:10px 15px;font-size:0.9em;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }

.icon { margin:0 15px; }
.icon img { width:40px;height:auto;display:inline-block; }
.icon:hover { opacity:0.7; }


.topbar { width:100%;height:107px; }
.topbar-left, .topbar-right { width:calc(50% - 106px);height:107px;background:url("/wp-content/themes/brews_arch/img/topbar@2x.png") repeat-x;background-size: auto 107px;display:inline-block;transform:translateY(-75%); }
.topbar-left { background-position:right top; }
.topbar-right { background-position:left top; }
.topbar-logo { width:212px;height:107px;display: inline-block;background:url("/wp-content/themes/brews_arch/img/logo@2x.png") repeat-x;background-size: auto 107px; }
.bottombar { width:100%;height:107px;background:url("/wp-content/themes/brews_arch/img/topbar@2x.png") repeat-x center top;background-size: auto 107px; }

footer { background:#000;display:inline-block;width:100%;padding:30px 15px; }
footer::before { transform:translate(30%,-35%);position:absolute;top:0;right:0;content:"";display:block;width:300px;height:300px;background:url("/wp-content/themes/brews_arch/img/deco-footer.svg") no-repeat center center;background-size:contain; }
footer img { max-width:100%;max-height:100px;display:inline-block;max-width:250px; }
.footer-col { vertical-align: middle; }
.footer-col a { display:block; }

.alt-grid-col { padding:100px 15px; }
.smicons { text-align:center;padding:0 15px;margin-bottom:30px; }
.footer-col-1 { background:var(--yellow); }
.footer-col-3 { background:var(--cream); }
.footer-col-4 { background:var(--red); }
.footer-col-1 h4 , .footer-col-3 h4 { color:var(--red); }
.footer-col-2 h4, .footer-col-4 h4 { color:var(--yellow); }

.footer-edges { position:relative; }
.footer-edges::before { content:"";display:block;position:absolute;top:0;right:100%;width:1000px;height:100%;background:var(--yellow); }
.footer-edges::after { content:"";display:block;position:absolute;top:0;left:100%;width:1000px;height:100%;background:var(--red); }


h1 { color:var(--yellow);font-family: "Gilroy", sans-serif;font-size:7em;margin:0;line-height:1em;opacity:0;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
h1 span { opacity:0; }
h2 { color:var(--cream);text-transform: uppercase;font-size:3em;margin-bottom:15px;margin-top:0px;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
h3 { color:var(--cream);text-transform: uppercase;font-size:2.5em;margin-bottom:15px;margin-top:0px;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
h4 { color:var(--cream);text-transform: uppercase;text-align:left;font-size:2em;margin:15px 0;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.module.line_up h4, h5 { color:var(--cream);text-transform: uppercase;text-align:left;font-size:1.3em;margin-top:-15px; }
.alt-grid h4 { text-align:center; }
h6 { color:var(--cream);text-transform: uppercase;text-align:left;font-size:1.3em;margin:0px;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }

.home_intro h1 { color:var(--cream); }


.plyr__control--overlaid.plyr__control svg { fill:#000; }
/*.plyr__control--overlaid { background:var(--cream); }*/



/* ===== MODULES ===== */
.module { display:block; }
.full-site { text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 15px;margin:60px 0px; }
footer .full-site { border-top:none;margin-top:0;padding-top:15px; }
.main { padding:120px 15px 0px; }
.divider { width:100%;display:block;height:0px;border-bottom:1px solid var(--border);margin:60px 0 0px; }

.module.home_intro { padding:60px 15px;position:relative;aspect-ratio:96/47;width:100%; }
#home-video-player { width:100%;height:100%;position: absolute;top:0;left:0;object-fit:cover; }

.home-video-overlay { width:100%;height:100%;position: absolute;top:0;left:0;background:rgba(0,0,0,0.5); }
.home-video-text { position:relative;z-index:2; }

.module.page_title { text-align:center;text-transform: uppercase;padding:15px 15px 30px; }

.module.two_column { padding:30px 15px 30px; }
.module.two_column p:first-child { margin-top:0; }
.module.two_column img { width:100%; }

.module.business_list { padding:30px 15px 60px;text-align:center; }
/*.module.business_list .list { columns:4 }*/
.module.business_list .list-item { display:block;text-transform: uppercase;text-decoration: none;color:var(--cream);font-weight:bold;font-size:1.5em;padding:5px; }
.module.business_list a.list-item:hover { color:#000; }
.list-item img { width:auto;max-height: 120px;height: auto;max-width: 200px;height:auto;display:inline-block; }

.module.full_width_image { position:relative; }

.top-squares { position:absolute;top:0;right:0; }
.top-squares .square-1 { width:var(--square-size);height:var(--square-size);position:absolute;display:block;background:var(--red);top:0;right:var(--square-size); }
.top-squares .square-2 { width:var(--square-size);height:var(--square-size);position:absolute;display:block;background:#000000;top:0;right:0px; }
.top-squares .square-3 { width:var(--square-size);height:var(--square-size);position:absolute;display:block;background:var(--red);top:var(--square-size);right:0px; }

.bottom-squares { position: absolute;bottom: 0;left:0; }
.bottom-squares .square-1 { width:var(--square-size);height:var(--square-size);position:absolute;display:block;background:var(--red);bottom:0;left:0px; }
.bottom-squares .square-2 { width:var(--square-size);height:var(--square-size);position:absolute;display:block;background:#000000;bottom:0;left:var(--square-size); }
.bottom-squares .square-3 { width:var(--square-size);height:var(--square-size);position:absolute;display:block;background:var(--red);bottom:0;left:calc(var(--square-size) * 2); }


.module.line_up { padding:30px 15px; }
.act { font-weight:bold;display:inline-block;width:100%;padding:7px 0;border-bottom:1px solid var(--border-light);text-transform: uppercase; }
.act:nth-child(1) { border-top:1px solid var(--border-light); }
.act span { font-weight:300; }
.act-list { margin-bottom:30px; }
.line_up h3 { color:var(--yellow); }
.module.line_up h4 { color:var(--red); }

#map { display: block;height: 700px;width: 100%;margin-top:30px; }
.gm-style .gm-style-iw-d { overflow:auto !important;  }
.gm-style .gm-style-iw-c { background:var(--red);background-color:var(--red);padding-bottom:15px !important; }
.poi-info-window div, .poi-info-window a { background-color:var(--red);color:var(--cream); }
.gm-style .gm-style-iw-t::after { background:var(--red); }
.info-window-content { padding:15px 30px 15px 15px;width:100%;max-width:300px; }
.map-link { color:var(--cream);text-transform: uppercase;text-decoration: none;font-weight:bold; }
.map-link:hover { color:#000; }
/*.gm-style img { opacity:0; }*/
.gm-style-iw-c button { top:2px !important;right:2px !important; }
.map-locations { padding:60px 15px 0px; }
.map-location-holder { border-bottom:1px solid var(--border-light);padding-bottom:10px;height:100%; }
.map-locations a { text-decoration: none;color:var(--cream);text-transform: uppercase;font-weight:bold; }
.map-locations a:hover { color:#000; }



#static_map { width:100%;height:550px;overflow: hidden; }
#static_map img { width: 100%;object-fit: cover;height:100%;object-position:left center; }


.faqs { margin-top:30px; }
.faqs .q { font-size:2em;font-weight:bold;text-transform: uppercase; }
.faqs .faq { margin-bottom:60px; }


.lineup-logo { width:auto;max-height:100px;display:block;margin-bottom:15px; }
.act a { color:var(--cream);text-decoration: none; }
.act a:hover { color:var(--yellow); }

.module.text_columns { padding:30px 15px 0px; }
.module.text_columns .cols { columns:2;column-gap:30px;border-top:1px solid var(--border);padding-top:60px; }
.module.text_columns .cols p:first-child { margin-top:0 }

.no100 { width:auto !important; }

#cookie-notice .cn-button.wp-default { background:var(--red); }
#cookie-notice .cn-button.wp-default:hover { background:var(--cream);color:#000; }



.homepage .module.text_columns { padding:0px 15px 30px; }
.homepage .module.text_columns .cols { border-top:none;padding-top:0;padding-bottom:30px; }


.module.form { text-align:center;padding:30px 15px 90px; }
.module.form form { background:#000;padding:30px;display:inline-block;width:auto; }
.module.form form input[type="text"], .module.form form input[type="email"] { width:100%;padding:10px 15px; }
.checkbox-251 { margin-top:15px;display:block; }
.module.form form label.basic-label  { text-transform: uppercase;display:block; }
.module.form form label.basic-label input { margin-top:5px; }
.module.form form input[type="submit"] { border:1px solid var(--cream);background:none;color:var(--cream);text-transform: uppercase;display:inline-block;padding:10px 20px; }
.module.form form input[type="submit"]:hover { background:var(--cream);color:#000; }
.wpcf7 .ajax-loader { margin:0 auto;display:block; }
.module.form h3 { font-size:2em; }
.module.form h5 { max-width:640px;width:100%;margin:0 auto;text-align:center;margin-bottom:30px;line-height:1.5em; }





.trail-list { list-style: none;padding-left:0; }
.trail-list li { border-bottom:1px solid var(--cream);display:block;padding:10px 0px; }
.trail-list li:first-child { border-top:1px solid var(--cream); }



.image-holder { position:relative;padding-top:40px;padding-left:40px }
.image-holder img { position:relative; }
.image-holder::before { width:90%;height:90%;background:url("/wp-content/themes/brews_arch/img/deco-img-small-1.svg") no-repeat left top;background-size:contain;content:"";display:block;position:absolute;top:0;left:0; }
.image-holder::after { width:50%;height:70%;background:url("/wp-content/themes/brews_arch/img/deco-img-small-2.svg") no-repeat right bottom;background-size:contain;content:"";display:block;position:absolute;bottom:0;right:0; }
.full-image-squares { position:absolute;top:0;left:0;transform:translateY(-50%); }
.module.full_width_image::before { z-index:2;width:50%;height:100%;background:url("/wp-content/themes/brews_arch/img/deco-img-full-2.svg") no-repeat left bottom;background-size:contain;position:absolute;bottom:0;left:0;content:"";display:block; }
.module.full_width_image::after { z-index:2;width:50%;height:100%;background:url("/wp-content/themes/brews_arch/img/deco-img-full-3.svg") no-repeat right top;background-size:contain;position:absolute;top:0;right:0;content:"";display:block; }



.module.full_width_image { margin-top:60px;position:relative; }

.food_vendors { padding:60px 30px; }
.food_vendors img { width:300px;height:300px;object-fit:contain; }
.vendor { width:100%;max-width:500px; }
.food_vendors .m-grid > div { border-bottom:1px solid var(--cream);padding-bottom:30px; }

@media(max-width: 1300px){
    h1  { font-size:6em; }
}
@media(max-width: 1100px){
    h1  { font-size:5em; }
}

@media(max-width: 768px){

	:root { 
	    --square-size: 100px;
	 }

		/* Move this to it's own query if it needs to break down earlier */
		nav { text-align:right; }
		.mobile-toggle { display:inline-block; }
		#navmenu { display:none;text-align:center; }
		#navmenu .menu li { display:inline-block;width:100%;padding:10px 15px; }
		#navmenu .menu a { display:inline-block;width:100%;padding:10px; }
		#navmenu .sub-menu { display: none;width:100%;position:static; }
		#navmenu .menu li:hover .sub-menu { display:none; }
	/* ---------------------- */
    .main { padding:60px 15px 0px; }
    h2 { font-size:2em }


.alt-grid-col { padding:30px 15px; }
	 .module.business_list .list { columns:3 }
     .module.text_columns .cols { columns:1;column-gap:30px;max-width:500px; }

     .list-item img { max-width:100%;width:auto; }

     .full-image-squares { position:absolute;top:0;left:0;transform:translateY(-50%) translateX(-25%) scale(0.5); }
}

@media(max-width: 560px){

	:root { 
	    --square-size: 40px;
	 }
footer::before { transform:translate(50%,-35%) scale(0.8) }

    h1 { font-size:3em; }
    .m-grid-gap-30 { grid-gap:15px }

      
	 .module.business_list .list { columns:2 }

     #map { height:500px; }

      #static_map { height:440px; }
     #static_map img {     width:300%;transform: translateX(-33%);object-fit: cover;height:100%;object-position:left center; }

     .full-image-squares { position:absolute;top:0;left:0;transform:translateY(-50%) translateX(-35%) scale(0.3); } 
 

}