/*
Theme Name: boilerplate 
Theme URI: https://hall-mark.au
Author: Joshua Hall
Author URI: https://hall-mark.au
Description: Boilerplate powered by Hallmark.
Tags: responsive-layout,one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar,custom-background,custom-colors,featured-images,full-width-template,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready
Version: 1.4
*/

@font-face {
    font-family: 'Nathan Script';
    src: url('/wp-content/themes/boilerplate/fonts/NathanScript.woff2') format('woff2'),
        url('/wp-content/themes/boilerplate/fonts/NathanScript.woff') format('woff'),
        url('/wp-content/themes/boilerplate/fonts/NathanScript.svg#NathanScript') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('/wp-content/themes/boilerplate/fonts/GeneralSans-Regular.woff2') format('woff2'),
        url('/wp-content/themes/boilerplate/fonts/GeneralSans-Regular.woff') format('woff'),
        url('/wp-content/themes/boilerplate/fonts/GeneralSans-Regular.svg#GeneralSans-Regular') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('/wp-content/themes/boilerplate/fonts/GeneralSans-Semibold.woff2') format('woff2'),
        url('/wp-content/themes/boilerplate/fonts/GeneralSans-Semibold.woff') format('woff'),
        url('/wp-content/themes/boilerplate/fonts/GeneralSans-Semibold.svg#GeneralSans-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('/wp-content/themes/boilerplate/fonts/GeneralSans-Italic.woff2') format('woff2'),
        url('/wp-content/themes/boilerplate/fonts/GeneralSans-Italic.woff') format('woff'),
        url('/wp-content/themes/boilerplate/fonts/GeneralSans-Italic.svg#GeneralSans-Italic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('/wp-content/themes/boilerplate/fonts/GeneralSans-Bold.woff2') format('woff2'),
        url('/wp-content/themes/boilerplate/fonts/GeneralSans-Bold.woff') format('woff'),
        url('/wp-content/themes/boilerplate/fonts/GeneralSans-Bold.svg#GeneralSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}




html, body{ overflow-x: hidden; background: var(--white)}
/* html:before { content: '';background: url('../boilerplate/images/402107790_STATIC_NOISE_400.gif');position: fixed;top: 0;left: 0;width: 100%;height: 100%; z-index: 999;mix-blend-mode: overlay;opacity: 0.1;pointer-events: none;} */

body{font-weight:normal;margin: 0;}


/* Structure*/

.container { position: relative; height: 100%; width: 100%;}
.row { height: 100%; position: relative;}
.full-width { width: 100%;  margin: 0 auto;}
.row-width-95 { width: 95%; max-width: 95%; margin: 0 auto; }
.row-width-90 { width: 90%; max-width: 90%; margin: 0 auto; }
.row-width-80 { width: 80%; max-width: 80%; margin: 0 auto; }
.row-width-70 { width: 70%; max-width: 70%; margin: 0 auto; }
.row-width-60 { width: 60%; max-width: 60%; margin: 0 auto; }
.row-width-50 { width: 50%; max-width: 50%; margin: 0 auto; }
.row-width-40 { width: 40%; max-width: 40%; margin: 0 auto; }
.row-width-30 { width: 30%; max-width: 30%; margin: 0 auto; }
.row-width-20 { width: 20%; max-width: 20%; margin: 0 auto; }
.row-width-10 { width: 10%; max-width: 10%; margin: 0 auto; }


/* Widths */

.col1{width: 8.33%;box-sizing: border-box;}
.col2{width: 16.66%;box-sizing: border-box;}
.col2-5{width: 20.00%;box-sizing: border-box;}
.col3{ width: 25%;box-sizing: border-box;}
.col4{width: 33.33%;box-sizing: border-box;}
.col5{width: 41.33%;box-sizing: border-box;}
.col6{width: 50%; position: relative;box-sizing: border-box;}
.col7{width: 58.33%;box-sizing: border-box;}
.col8{width: 66.66%; box-sizing: border-box;}
.col9{width: 75%;box-sizing: border-box;}
.col10{width: 83.88%;box-sizing: border-box;}
.col11{width: 91.66%; box-sizing: border-box;}
.col12{width: 100%;  box-sizing: border-box;}

.gap-10 .col1  { width: calc((100% - (10px * 11)) / 12); }
.gap-10 .col2  { width: calc((100% - (10px * 5)) / 6); }
.gap-10 .col3  { width: calc((100% - (10px * 3)) / 4); }
.gap-10 .col4  { width: calc((100% - (10px * 2)) / 3); }
.gap-10 .col5  { width: calc((100% - (10px * 1.5)) / 2.4); }
.gap-10 .col6  { width: calc((100% - (10px * 1)) / 2); }
.gap-10 .col7  { width: calc((100% - (10px * 0.71)) / 1.71); }
.gap-10 .col8  { width: calc((100% - (10px * 0.5)) / 1.5); }
.gap-10 .col9  { width: calc((100% - (10px * 0.33)) / 1.33); }
.gap-10 .col10 { width: calc((100% - (10px * 0.2)) / 1.2); }
.gap-10 .col11 { width: calc((100% - (10px * 0.1)) / 1.09); }
.gap-10 .col12 { width: 100%; }

.gap-20 .col1  { width: calc((100% - (20px * 11)) / 12); }
.gap-20 .col2  { width: calc((100% - (20px * 5)) / 6); }
.gap-20 .col3  { width: calc((100% - (20px * 3)) / 4); }
.gap-20 .col4  { width: calc((100% - (20px * 2)) / 3); }
.gap-20 .col5  { width: calc((100% - (20px * 1.5)) / 2.4); }
.gap-20 .col6  { width: calc((100% - (20px * 1)) / 2); }
.gap-20 .col7  { width: calc((100% - (20px * 0.71)) / 1.71); }
.gap-20 .col8  { width: calc((100% - (20px * 0.5)) / 1.5); }
.gap-20 .col9  { width: calc((100% - (20px * 0.33)) / 1.33); }
.gap-20 .col10 { width: calc((100% - (20px * 0.2)) / 1.2); }
.gap-20 .col11 { width: calc((100% - (20px * 0.1)) / 1.09); }
.gap-20 .col12 { width: 100%; }

.gap-30 .col1  { width: calc((100% - (30px * 11)) / 12); }
.gap-30 .col2  { width: calc((100% - (30px * 5)) / 6); }
.gap-30 .col3  { width: calc((100% - (30px * 3)) / 4); }
.gap-30 .col4  { width: calc((100% - (30px * 2)) / 3); }
.gap-30 .col5  { width: calc((100% - (30px * 1.5)) / 2.4); }
.gap-30 .col6  { width: calc((100% - (30px * 1)) / 2); }
.gap-30 .col7  { width: calc((100% - (30px * 0.71)) / 1.71); }
.gap-30 .col8  { width: calc((100% - (30px * 0.5)) / 1.5); }
.gap-30 .col9  { width: calc((100% - (30px * 0.33)) / 1.33); }
.gap-30 .col10 { width: calc((100% - (30px * 0.2)) / 1.2); }
.gap-30 .col11 { width: calc((100% - (30px * 0.1)) / 1.09); }
.gap-30 .col12 { width: 100%; }

.gap-40 .col1  { width: calc((100% - (40px * 11)) / 12); }
.gap-40 .col2  { width: calc((100% - (40px * 5)) / 6); }
.gap-40 .col3  { width: calc((100% - (40px * 3)) / 4); }
.gap-40 .col4  { width: calc((100% - (40px * 2)) / 3); }
.gap-40 .col5  { width: calc((100% - (40px * 1.5)) / 2.4); }
.gap-40 .col6  { width: calc((100% - (40px * 1)) / 2); }
.gap-40 .col7  { width: calc((100% - (40px * 0.71)) / 1.71); }
.gap-40 .col8  { width: calc((100% - (40px * 0.5)) / 1.5); }
.gap-40 .col9  { width: calc((100% - (40px * 0.33)) / 1.33); }
.gap-40 .col10 { width: calc((100% - (40px * 0.2)) / 1.2); }
.gap-40 .col11 { width: calc((100% - (40px * 0.1)) / 1.09); }
.gap-40 .col12 { width: 100%; }


.height-0 { height:0vh; box-sizing: border-box;}
.height-20 { height:20vh;box-sizing: border-box; }
.height-40 { height:40vh;box-sizing: border-box; }
.height-60 { height:60vh;box-sizing: border-box; }
.height-80 { height:80vh;box-sizing: border-box; }
.height-100 { height:100vh; box-sizing: border-box; }
.height-auto { height: auto; }

.absolute-center {position: absolute;top: 0;left: 0; right: 0; bottom: 0; margin: auto}
.absolute-top {position: absolute;top: 0;left: 0; right: 0; bottom: auto; margin: auto}
.absolute-left {position: absolute;top: 0;left: 0; right: auto; bottom: 0; margin: auto}
.absolute-right {position: absolute;top: 0;left: auto; right: 0; bottom: 0; margin: auto}
.absolute-bottom {position: absolute;top: auto;left: 0; right: 0; bottom: 0; margin: auto}

.position-relative { position: relative; }

.flex-row {display: flex;flex-direction: row;}
.flex-row-reverse {display: flex;flex-direction: row-reverse;}
.flex-column { display: flex; flex-direction: column;}
.justify-center { display: flex; justify-content: center; }
.justify-bottom { display: flex; justify-content: flex-end;}

.flex-wrap {flex-wrap: wrap}
.justify-left {  justify-content: left }
.justify-right { justify-content: right }
.justify-spaced { justify-content: space-between;}
.align-top { align-items: flex-start; }
.align-bottom { align-items: flex-end;}
.align-left {  align-items: flex-start }
.align-center  {align-items: center; }
.align-right {  align-items: flex-end;}
.text-center { text-align:center;}
.text-right { text-align:right;}
.text-left { text-align:left;}

.float-left { float: left;}
.float-right { float: right;}


.padding-0 {padding:0 !important}
.padding-b-0 {padding-bottom: 0px}
.padding-t-0 {padding-top: 0px}
.padding-l-0 {padding-left: 0px}
.padding-r-0 {padding-right: 0px}
.padding-10 {padding:10px 0}
.padding-b-10 {padding-bottom: 10px}
.padding-t-10 {padding-top: 10px}
.padding-l-10 {padding-left: 10px}
.padding-r-10 {padding-right: 10px}
.padding-20 {padding:20px 0}
.padding-b-20 {padding-bottom: 20px}
.padding-t-20 {padding-top: 20px}
.padding-l-20 {padding-left: 20px}
.padding-r-20 {padding-right: 20px}
.padding-40 {padding:40px 40px}
.padding-b-40 {padding-bottom: 40px}
.padding-t-40 {padding-top: 40px}
.padding-l-40 {padding-left: 40px}
.padding-r-40 {padding-right: 40px}
.padding-60 {padding:60px 0}
.padding-b-60 {padding-bottom: 60px}
.padding-t-60 {padding-top: 60px}
.padding-l-60 {padding-left: 60px}
.padding-r-60 {padding-right: 60px}
.padding-80 {padding:80px 0}
.padding-b-80 {padding-bottom: 80px}
.padding-t-80 {padding-top: 80px}
.padding-l-80 {padding-left: 80px}
.padding-r-80 {padding-right: 80px}
.padding-100 {padding:100px 0}
.padding-b-100 {padding-bottom: 100px}
.padding-t-100 {padding-top: 100px}
.padding-l-100 {padding-left: 100px}
.padding-r-100 {padding-right: 100px}
.padding-120 {padding:120px 0}
.padding-b-120 {padding-bottom: 120px}
.padding-t-120 {padding-top: 120px}
.padding-l-120 {padding-left: 120px}
.padding-r-120 {padding-right: 120px}
.padding-140 {padding:140px 0}
.padding-b-140 {padding-bottom:140px}
.padding-t-140 {padding-top:140px}
.padding-l-140 {padding-left:140px}
.padding-r-140 {padding-right:140px}

.gap-0 {gap:0 !important}
.gap-1 {gap:8.33%}
.gap-2 {gap:16.33%}
.gap-5 {gap:5px}
.gap-10 {gap:10px}
.gap-20 {gap:20px}
.gap-30 {gap:30px}
.gap-40 {gap:40px}
.gap-60 {gap:60px}
.gap-80 {gap:80px}
.gap-100 {gap:100px}
.gap-120 {gap:120px}
.gap-140 {gap:140px}

.margin-auto { margin:0 auto; }
.margin-0 {margin:0 !important}
.margin-b-0 { margin-bottom: 0; }
.margin-t-0 { margin-top: 0; }
.margin-5 {margin:5px !important}
.margin-b-5 { margin-bottom: 5px; }
.margin-t-5 { margin-top: 5px; }
.margin-10 {margin:10px !important}
.margin-b-10 { margin-bottom: 10px; }
.margin-t-10 { margin-top: 10px; }
.margin-20 {margin:20px 0}
.margin-b-20 { margin-bottom: 20px; }
.margin-t-20 { margin-top: 20px; }
.margin-30 {margin:30px 0}
.margin-b-30 { margin-bottom: 30px; }
.margin-t-30 { margin-top: 30px; }
.margin-40 {margin:40px 0}
.margin-b-40 { margin-bottom: 40px; }
.margin-t-40 { margin-top: 40px; }
.margin-60 {margin:60px 0}
.margin-b-60 { margin-bottom: 60px; }
.margin-t-60 { margin-top: 60px; }
.margin-80 {margin:80px 0}
.margin-b-80 { margin-bottom: 80px; }
.margin-t-80 { margin-top: 80px; }
.margin-100 {margin:100px 0}
.margin-b-100{ margin-bottom: 100px; }
.margin-t-100 { margin-top: 100px; }
.margin-120 {margin:120px 0}
.margin-b-120  { margin-bottom: 120px; }
.margin-t-120  { margin-top: 120px; }

.border-r-05 { border-radius:5px }
.border-r-10 { border-radius:10px }
.border-r-15 { border-radius:15px }
.border-r-20 { border-radius:20px }
.border-r-30 { border-radius:30px }
.border-r-40 { border-radius:40px }

.cap, .uppercase { text-transform: uppercase;}

.xmicro-text, .xmicro-text p { font-size: var(--xmicro);}
.micro-text, .micro-text p { font-size: var(--micro);}
.xxsm-text, .xxsm-text p { font-size: var(--xxsmall);}
.xsm-text, .xsm-text p { font-size: var(--xsmall);}
.sm-text, .sm-text p {font-size: var(--small); }
.med-text, .med-text p {font-size: var(--medium);}
.xmed-text, .xmed-text p {font-size: var(--xmedium);}
.lrg-text, .lrg-text p {font-size: var(--large);}
.xlrg-text, .xlrg-text p {font-size: var(--xlarge);}
.xxlrg-text, .xxlrg-text p {font-size: var(--xxlarge);}


.primary-font {  font-family: 'Teko',sans-serif !important; font-weight: bold; letter-spacing:0; line-height: 0.8}
.secondary-font { font-family: 'General Sans', sans-serif !important;font-weight: 500; font-style: normal; letter-spacing:0; line-height: 1.1;}
.tertiary-font { font-family: 'Nathan Script', sans-serif; font-weight: 500;}

.image-fill {object-fit: cover; object-position: center;}

a, button, .text-link { cursor: pointer;text-decoration: none;}
a:hover { text-decoration: none;}

h1, h2, h3, h4, h5, h6 { z-index: 2; margin: 0; line-height: 1}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none; color: inherit; }
h1 {  font-size: var(--xlarge); font-family: 'Teko'; font-weight: bold }
h2{ font-size: var(--large); font-family: 'Teko'; font-weight: bold }
h3{ font-size: var(--medium); font-family: 'Teko'; font-weight: bold }
h4{ font-size: var(--small); font-family: 'Teko'; font-weight: bold}
h5{ font-size: var(--small); font-family: 'Teko'; font-weight: bold}
h6{ font-size: var(--xxsmall); font-family: 'General Sans'; font-weight: normal}
body,p  { font-size: var(--xxsmall); font-family: 'General Sans'; font-weight: 300}
span { font-family:inherit;}
iframe {border: 0;}

img, svg {width: 100%;}
li, ul {list-style: none; padding: 0;}
.icon, .icon svg { width: 25px; height: 25px; }

.hide, .hidden { display:none; transition: opacity 0.7s ease-in; opacity: 0;}
.mobile { display: none }
/* Colours */

.white, .white p { color: var(--white);}
.whitebg { background: var(--white);}
.black, .black p { color: var(--black);}
.blackbg { background: var(--black);}
.primary, .primary p { color: var(--primary);}
.primarybg { background: var(--primary);}
.secondary, .secondary p { color: var(--secondary);}
.secondarybg { background: var(--secondary);}
.tertiary, .tertiary p { color: var(--tertiary);}
.tertiarybg { background: var(--tertiary);}
.quartiary, .quartiary p { color: var(--quartiary);}
.quartiarybg { background: var(--quartiary);}
.quinary, .quinary p { color: var(--quinary);}
.quinarybg { background: var(--quinary);}
.hexiary, .hexiary p { color: var(--hexiary);}
.hexiarybg { background: var(--hexiary);}
.septiary, .septiary p { color: var(--septiary);}
.septiarybg { background: var(--septiary);}

/* Input */

input.text, input.title, input[type=email], input[type=password],input[type=number], input[type=tel], input[type=text], select, textarea {padding: 20px 20px !important;  -webkit-appearance: none; border-radius: 0;  box-sizing: border-box;  width: -webkit-fill-available;}
::-webkit-input-placeholder, :-ms-input-placeholder, ::placeholder, ::input-placeholder {
 }

/* Buttons */
.button-wrapper {}

.badge-button {border-radius: 100%;padding: 15px 40px 8px;color: var(--white);transform: rotate(-6deg) !important;display: flex;width: fit-content;}

.primary-button {background: var(--primary);cursor: pointer;color: var(--secondary);padding: 15px 20px 10px;font-family: 'Teko';text-transform: uppercase;font-weight: 800;font-size: var(--medium);text-decoration: none;line-height: 1;transform: rotate(-0deg); transition: 0.3s ease all}
.primary-button:hover { background: var(--tertiary); color: var(--primary); transform: rotate(-2deg); transition: 0.3s ease all}

.secondary-button, .primary-button:nth-child(2), .cta-block:nth-child(2) .primary-button { background: var(--tertiary); cursor: pointer;color: var(--primary);padding: 15px 20px 10px; font-family: 'Teko';text-transform: uppercase; font-weight: 800; font-size: var(--medium);text-decoration: none;line-height: 1;  transition: 0.3s ease all}
.secondary-button:hover, .primary-button:nth-child(2):hover, .cta-block:nth-child(2) .primary-button:hover { background: var(--primary); color: var(--secondary); transition: 0.3s ease all}
.secondary-button a {}

.tertiary-button { cursor: pointer; }
.tertiary-button:hover {}
.tertiary-button a {}

.text-link { cursor: pointer; font-size: var(--xsmall); }
.text-link:hover {  }
.text-link a {}

button { background: transparent;border: 0;padding: 0;margin: 0;}

/* Menu */
header {margin: 0 auto; padding: 0;z-index: 100;position: fixed; top: 0;left: 0; right: 0;background: var(--white);}
header .row {padding: 15px 0 ; justify-content: space-between;}

.hero {position: relative;}
.header-row {margin: 0 40px;}
.menu { display: flex;padding: 15px 0;margin: 0; align-items: center;}
.current-menu-item a { text-decoration: none !important }


.logocontainer { width: 250px;  position: absolute; left: 0; right: 0; margin: auto; top: 60px; z-index: 99;}
.sitelogo {transition: opacity 0.7s ease-in;}
.sitelogo svg {width: auto; height: 60px;}
.logo img { max-height: 50px;width: auto;}

.secondary-menu {width: auto;align-items: center;}

.hamburger-box {width: 100%; height: 30px; display: flex; align-items: center;justify-content: center;}
.hamburger-container {width: 30px; height: 30px;  z-index: 999; display: flex; justify-content: center; align-items: center;}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 30px;height: 4px;background-color: var(--primary);border-radius: 0;}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: var(--primary); }
.hamburger-inner::before {top: -8px;}
.hamburger-inner::after { bottom: -9px;}

.menuslide {position: absolute; left: -100%;}
.menuslide.active { z-index: 8; overflow: scroll; position: fixed; left: 0px;top: 94px; height: 100%; min-height: 100vh;width: 100%;}
.menuslide.active:before {content: '';position: fixed;width: 100%;z-index: -1;background: #0000005e;height: 100%;left: 0;top: 94px;margin: auto;}
.menu-modal-container{width: 35%; min-height: 100vh;}

.menuslide .main-brand {padding: 20px 0; margin: 0 40px; box-sizing: border-box;}
.menuslide .menu {flex-direction: column; padding: 0;}
.menuslide .menu-item {position: relative;background: var(--primary);width: 100%;padding: 20px 20px;box-sizing: border-box;}
.menuslide .menu-item a {color: var(--secondary); text-transform: uppercase;font-family: 'Teko';font-weight: 900;font-size: var(--large);line-height: 1; display: flex; transform: translateX(0px);transition: 0.3s ease all;}
.menuslide .menu-item:hover a {transform: translateX(10px);transition: 0.3s ease all;position: relative;}
.menuslide .menu-item:nth-child(3n+2) {background: var(--quartiary);}
.menuslide .menu-item:nth-child(3n+3) { background: var(--tertiary);}

.announcement-swiper { box-sizing: border-box }
.announcement-row:hover .swiper-icon svg path { fill: var(--hexiary); transition: 0.3s ease all; }
.announcement-row {display: flex; width: 100%; box-sizing: border-box;}
.announcement-swiper .swiper-slide { padding-right: 20px; box-sizing: border-box; }
.announcement-swiper .swiper-slide svg { transform: translateX(0px); transition: 0.3s ease all; }
.announcement-swiper .swiper-slide:hover svg { transform: translateX(10px); transition: 0.3s ease all; }


/* Loader */
#loader {position: fixed;top: 0; left: 0;width: 100%; height: 100%;background: var(--white);display: flex;align-items: center;justify-content: center;z-index: 9999;transition: opacity 0.5s ease, visibility 0.5s ease;}
.loader-content {text-align: center;width: 300px;position: absolute;bottom: 20px;left: 40px;display: flex; gap: 20px;align-content: center;}
.loader-bar {width: 100%;height: 12px; background: #eee;overflow: hidden;}
.loader-fill {height: 100%;width: 0%; background: var(--primary); transition: width 0.1s ease;}
#loader.hidden {opacity: 0;visibility: hidden;}
.loader-icons { display: flex; flex-wrap: wrap; width:100%; height:100%;}
.loader-icons svg { width: 17vw;  position: absolute;}
.loading-logo { position: absolute;top: 0; left: 0;opacity: 0;z-index: 5;pointer-events: none;right: 0; bottom: 0;margin: auto; display: flex;justify-content: center; align-items: center;}
.loading-logo svg, .loading-logo img {width: 30vw; height: auto; max-width: 33vw;}

.loader-icons svg:nth-child(1) { top: 8%; left:32%; }
.loader-icons svg:nth-child(2) { top: 10%; left:13%;}
.loader-icons svg:nth-child(3) { top: 21%; left:40%;}
.loader-icons svg:nth-child(4) { top: 26%; left:18%;}
.loader-icons svg:nth-child(5) { top: 39%; left:33%;}
.loader-icons svg:nth-child(6) {top: 4%;right: 30%;}
.loader-icons svg:nth-child(7) { top: 24%; right: 21%;}
.loader-icons svg:nth-child(8) {top: 41%;right: 34%;}
.loader-icons svg:nth-child(9) {top: 5%;right: 12%;}
.loader-icons svg:nth-child(10) { top: 51%;left: 18%;}
.loader-icons svg:nth-child(11) { top: 49%;right: 16%;}
.loader-icons svg:nth-child(12) {top: 60%;left: 35%;}
.loader-icons svg:nth-child(13) {top: 71%;right: 20%;}

/* Coming Soon */
.page-coming-soon header, .page-coming-soon footer { display: none;}
.landing-underlay img { min-height: 100vh; object-fit: cover;}
.landing-overlay { position: absolute; inset: 0;margin: auto; z-index: 1; height: fit-content; width: fit-content;}
.landing-overlay h2 {font-family: sans-serif; font-weight: bold;color: white;letter-spacing: -1px;}
.landing-overlay img {max-width: 380px; height: auto;}


/* Module Elements */
.tilt {transform: rotate(-5deg); transform-origin: left; }
.module-bg-block {position: absolute;top: 0;left: auto;z-index:2;transform: rotate(-1deg);right: -8%;width: 107%;height: 100%;}
.module-bg-block svg { width: 100%;height: 100%;}

.module-decor { width: 16.66vw; position: absolute;bottom: -20px; z-index: 4; right: 50px;}
.module-border {height: auto;width: 100%;margin-top: -50px; z-index: 1;position: absolute;}
.module-border svg {width: 100%; height: auto; min-height: 127px}

.bg-script { pointer-events: none;font-size: 200px;opacity: 0.08; position: absolute;z-index: 0; top: 0; bottom: 0; margin: auto;height: fit-content;width: fit-content;left: 0;right: 0;text-align: center;}
.sm-bg-script { pointer-events: none;font-size: 80px;opacity: 0.08; position: absolute;z-index: 0; top: 0; bottom: 0; margin: auto;height: fit-content;width: fit-content;left: 0;right: 0;text-align: center;}

.spin {animation: spin 7s linear infinite;}

 /* Swiper */
.swiper-pagination-progressbar {width: 200px !important;height: 10px !important;top: auto !important;left: 0 !important;right: 0 !important; margin: auto; bottom: 0 !important; background: #ea32002b !important;}
.swiper-pagination-progressbar-fill { background: var(--tertiary) !important;}
.hero-swiper .swiper-slide {transition: none;}
.loaded .hero-swiper .swiper-slide { transition: 0.3s ease all; }
.hero-swiper .swiper-slide-prev {transform: scale(0.92) rotate(-4deg) translateZ(0) !important;transition: 0.3s ease all;}
.hero-swiper .swiper-slide-next {transform: scale(0.92) rotate(4deg) translateZ(0) !important;transition: 0.3s ease all;}

/* Home Page */
.introduction-media .media { z-index:3;position: relative; display: flex;align-items: center;padding: 40px; box-sizing: border-box;transform: rotate(3deg);}

.about-media .media { z-index: 3;position: relative; display: flex;align-items: center;padding: 40px; box-sizing: border-box;transform: rotate(-3deg);}
.about-media  .module-bg-block {position: absolute;top: 0;left: -8%;z-index:0;transform: rotate(-1deg);right: auto;width: 107%;height: 100%;}
.about-media .module-bg-block path {fill: var(--tertiary);}
.about-media .module-decor { width: 24vw; position: absolute;bottom: -20px; z-index: 4; left: 60px; right: auto}

/* About Page */

.catering-media .media { z-index: 3;position: relative; display: flex;align-items: center;padding: 40px; box-sizing: border-box;transform: rotate(-4deg);}


/* Whats On */

.toggle.active {font-weight: 600;opacity: 1;}
.toggle {opacity: 0.5;}
.whatson-item {position: relative;width: 100%;}
.whatson-item .event-date { width: 10%; }
.whatson-item .button-wrapper { z-index: 9;}
.item-media {position: absolute;top: 0;left: 0;transform: translate(-50%, -50%); transition: opacity 0.25s ease, transform 0.05s linear;pointer-events: none;z-index: 1;}             
.item-media.hidden {opacity: 0;}
.item-media img {max-width: 250px;height: auto;display: block;}

.locations-row { display: flex; align-items: stretch;}

.location-icon svg {width: 120px;}
.location-icon {display: flex;flex-wrap: no-wrap; z-index:1;}
.location-icon svg:nth-child(2) {margin-left: -80px; z-index: -1;margin-top: 20px;}
.location-icon svg:nth-child(3) {margin-left: -80px; z-index: -1;margin-top: -10px;}

.location-media img {transform: rotate(0deg); transition:0.3s ease all}
.location-media:hover img {transform: rotate(-1deg); transition:0.3s ease all}
.location-card__meta { margin-top:-10px }

.location-card:nth-child(1) .secondary-button { background: var(--secondary);}
.location-card:nth-child(1) .secondary-button:hover {background: var(--hexiary);}
.location-card:nth-child(2) .primary-button { background: var(--hexiary);}
.location-card:nth-child(2) .primary-button:hover {background: var(--tertiary);}
.location-card:nth-child(3) .primary-button { background: var(--quinary);}
.location-card:nth-child(3) .primary-button:hover {background: var(--tertiary);}


/* Pepes Pesos Club */
.pesos-club-header svg {width: 10vw;position: absolute;top: -40px; z-index: 9;right: 100px;transform: rotate(-20deg);}
.pesos-club-swiper .swiper-slide {   max-width: 890px; box-sizing: border-box; -webkit-mask: url('https://pepesmexican.com.au/wp-content/themes/boilerplate/images/card_bg.svg') no-repeat center;mask: url('https://pepesmexican.com.au/wp-content/themes/boilerplate/images/card_bg.svg') no-repeat center;-webkit-mask-size: cover;mask-size: cover;}
.pesos-club-swiper .swiper-slide svg {width: 100%;height: auto;}
.pesos-club-swiper .card-media img { min-height: 28vh;}
.pesos-club-swiper .card-footer .primary-button { width: fit-content; }

.pesos-club-swiper .swiper-slide-next, .pesos-club-swiper .swiper-slide-prev {filter: brightness(0.96) !important; transition:0.3s ease all }
.pesos-club-swiper .swiper-slide:not(.swiper-slide-active) {filter: brightness(0.92);  transition:0.3s ease all}

/* Contact */
.contact-form .module-bg-block {z-index: 0;}
.contact .button-wrapper { flex-wrap: wrap; gap: 10px;}
.form-wrapper .gform_wrapper {z-index: 1;position: relative;}
.form-wrapper {transform: rotate(-1deg);}
.form-wrapper.newsletter-form {transform: rotate(0deg);}

.form-wrapper input, .form-wrapper select, .form-wrapper textarea {background: var(--primary); padding: 20px 20px !important; border:0; font-family: 'Teko';color: var(--white);font-weight: bold;text-transform: uppercase;font-size: var(--medium) !important;}
::placeholder {font-family: 'Teko';color: var(--white);font-weight: bold;text-transform: uppercase;font-size: var(--medium);}
.gform_required_legend {display: none;}
.gform_button, .gform-button { padding: 20px 20px !important; background: var(--tertiary) !important;  box-sizing: border-box; margin: 0 !important;}
.gform-footer { padding: 0 !important; margin: 0 !important; justify-content: end;}

.form-wrapper input:focus-visible {outline: none;border-bottom: 2px solid var(--tertiary);box-sizing: border-box;}
.gform_confirmation_message {color: var(--white); font-family: 'Teko';  font-size: var(--medium);text-transform: uppercase;  font-weight: bold; text-align: center; line-height: 1;}

.status {width: 15px;height: 15px;display: flex; border-radius: 20px;}
.open .status {background: #12E46D;}
.closed .status {background: var(--hexiary);}

/* Maps */
.map { width:100%; height: 75vh; border: 30px solid var(--primary); box-sizing: border-box;}

/* Modals */
.mfp-content { }
.mfp-close {background: white !important;color: var(--primary) !important; opacity: 1; box-sizing: border-box !important;  top: 20px; right: 20px; border-radius: 26px;}
.mfp-content form { }

/* Marquee */
.marquee-wrapper {overflow: hidden;white-space: nowrap;position: relative; pointer-events: none}
.marquee-track {display: inline-block;white-space: nowrap; animation: marquee 25s linear infinite;}
.marquee-item { padding: 0 40px;box-sizing: border-box;}
.marquee-track svg { width: 55px; height: 55px;}

.primary-marquee {transform: rotate(-4deg);}
.secondary-marquee {transform: rotate(1deg);}
.tertiary-marquee {transform: rotate(-3deg);}

.primary-marquee .marquee-track .marquee-item:nth-of-type(even) {color: var(--tertiary);}
.secondary-marquee .marquee-track .marquee-item:nth-of-type(even) {color: var(--quartiary);}
.secondary-marquee .marquee-track svg path:first-of-type { fill: var(--white);}

.tertiary-marquee .marquee-track .marquee-item:nth-of-type(even) {color: var(--primary);}
.tertiary-marquee .marquee-track svg path:first-of-type { fill: var(--primary);}
.tertiary-marquee .marquee-track svg path:nth-child(1n + 2) { fill: var(--white);}

/* Keyframes */
@keyframes spin {0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);}}
@keyframes marquee {0%   { transform: translateX(0); }100% { transform: translateX(-100%); }}

/* Newsletter */
.newsletter .gform-button {width: 100%;}
.newsletter-row { box-sizing: border-box }

/* Accordion */
.far-wrapper {display: flex;align-items: flex-start;}
.accordion-panel {max-height: 0;overflow: hidden;transition: all 0.3s ease; padding: 0 20px 0;}
.accordion-panel.active { max-height: 500px; padding: 0 20px 20px; transition: all 0.3s ease;}

/* Popups */
.popup-overlay.active { position: fixed; top: 0;backdrop-filter: blur(5px);  bottom: 0; z-index: 999; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.popup-content { box-sizing: border-box; position: relative;width: 50%; min-height: 400px;display: flex;flex-direction: column;justify-content: center;align-items: center; -webkit-mask: url('https://pepesmexican.com.au/wp-content/themes/boilerplate/images/card_bg.svg') no-repeat center;mask: url('https://pepesmexican.com.au/wp-content/themes/boilerplate/images/card_bg.svg') no-repeat center;-webkit-mask-size: cover;mask-size: cover;}
.close-popup svg rect { fill: var(--secondary); }
.close-popup {position: absolute;top: 40px;right: 40px;}

.booking-card__title { margin-top: -12px;}

/* Footer */
footer .menu {flex-direction: column;align-items: flex-start;}
footer .menu-item a {font-family: 'General Sans';font-size: var(--xsmall);color: var(--primary);}
footer .menu-item a:hover {color: var(--hexiary);font-weight: 600;}

.footer-script {width: 50vw;line-height: 1;right: -50px;left: auto;transform: rotate(-15deg);bottom: -100px;top: auto;}
.footer-container { overflow: hidden;}

footer .icon, footer .icon svg {width: 30px;height: 30px;}



@media (max-width: 768px) {


:root {
    --xxlarge: 50px;
    --xlarge: 46px;
    --large: 40px;
    --xmedium: 32px;
    --medium: 20px;
    --small: 16px;
    --xsmall: 14px;
}

.desktop {display: none !important;} 
.mobile { display: block !important}
 
.m-flex-column { flex-direction: column }
.m-flex-column > .col2 { width: 100%; box-sizing: border-box;}
.m-flex-column > .col3 { width: 100%; box-sizing: border-box;}
.m-flex-column > .col4 { width: 100%; box-sizing: border-box; } 
.m-flex-column > .col5 { width: 100%; box-sizing: border-box;}
.m-flex-column > .col6 { width: 100%; box-sizing: border-box;}
.m-flex-column > .col7 { width: 100%; box-sizing: border-box; }
.m-flex-column > .col8 { width: 100%; box-sizing: border-box;}
.m-flex-column > .col9 { width: 100%; box-sizing: border-box; }
.m-flex-column .button-wrapper { flex-direction: row; margin-top: 30px; align-items: flex-start;}

.loader-icons svg { width: 21vw;}

.header-container {display: flex;justify-content: center;}
.header-row {box-sizing: border-box; margin: 0;}
.mastermenu .button-wrapper {gap: 10px !important;}

.main-brand {width: 100%;box-sizing: border-box;justify-content: flex-start;}
.menuslide .main-brand {margin: 0 10px;}
.logo img { max-height: 30px;}

.menu-modal-container {width: 100%; min-height: 80vh;}
.menuslide .menu-item { padding: 15px 20px;}
.menuslide.active { top: 85px;  overflow: scroll;}

.button-wrapper {gap: 20px;}
.primary-button { padding: 15px 15px 10px; }
.secondary-button { padding: 15px 15px 10px; }

.form-wrapper input, .form-wrapper select, .form-wrapper textarea {padding: 10px 20px !important;}

.bg-script { font-size: 100px }

.cta-wrapper {flex-wrap: wrap;display: flex;justify-content: center; gap: 40px;width: 90%;max-width: 90%;}
.cta-block.col3 { width: 100%;}
.cta-block h2 {width: 70%;}

.introduction-content, .about-content, .catering-content, .function-content, .contact-content {padding: 0 40px;}
.introduction-media .media, .about-media .media, .content-media .media, .function-media .media, .contact-form {padding: 20px;}
.module-decor {width: 50vw !important;}


.whatson-item {flex-wrap: wrap;flex-direction: column;align-items: flex-start; gap:10px}
.whatson-item h3 {width: 100% !important;}
.location-icon.col2 {width: 100% !important;}
.whatson-item .event-description {width: 100% !important;}
.whatson-item .event-date { width: 100% !important }

.history-row {max-width: 90%;width: 90%;padding: 0;}

.pesos-club-container {padding-top: 0;}
.pesos-club-row { max-width: 90%;width: 90%;}
.pesos-club-swiper .introduction-slide {padding: 0 !important; min-height: 500px;}
.pesos-club-swiper .introduction-slide .lrg-text {padding: 0 20px; font-size: 32px;}
.card-footer .lrg-text { font-size: var(--medium);}
.pesos-club-swiper .swiper-slide {padding: 40px; min-height: 500px;}
.pesos-club-swiper .card-media img {min-height: 28vw;max-height: 175px;}
.pesos-club-header svg { width: 14vw;position: absolute;top: -15px;right: 50px;}

.marquee-track svg {width: 34px; height: 34px;}
.marquee-stack-container {padding: 0;}

.locations-row {flex-direction: column;}
.locations-container .locations-row {gap:0 !important}
.location-card {width: 100%;}
.locations-header, .location-row {width: 90%;max-width: 90%;}

.newsletter-row {flex-direction: column; padding: 40px 20px; gap: 20px;}
.newsletter-row h2, .newsletter-row .form-wrapper { width: 100%;}

.popup-content {width: 90%;padding: 40px 0;}
.close-popup { position: absolute;top: 20px;right: 20px;}
.popup-content h2 {width: 66%;}
.locations-row {gap: 40px;}
.booking-item { width: 100%;}

.far-wrapper {gap: 10px;}
.accordion-wrapper {width: 100% !important;}

.map {border-width: 10px;}

.footer-row {flex-direction: column; width: 90%;}
.footer-introduction { width: 100%;}
.book-now {margin: 40px 0;}
.footer-row .col9 {width: 90%;}
.footer-menus { width: 100%; flex-wrap: wrap; flex-direction: row;gap: 20px 0;}
.footer-menus .col4 { width: 50%;}
.footer-information { width: 100%; margin: 0; }
.legal-footer {margin: 40px auto 0;width: 90%; max-width: 90%;justify-content: space-between;}
.footer-script {width: 100vw;bottom: 200px;}

}