html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:var(--main);text-shadow:none;color:#fff;}::selection{background:var(--main);text-shadow:none;color:#fff;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}


:root {

  --grey: #262626;
  --darkergrey: #53565A;
    --pink: #CE0058;
    --main: #AB254C;

}
    @font-face {
    font-family: 'Gilroy-Bold ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Bold ☞'), url('fonts/Gilroy-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Heavy ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Heavy ☞'), url('fonts/Gilroy-Heavy.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Light ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Light ☞'), url('fonts/Gilroy-Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Medium ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Medium ☞'), url('fonts/Gilroy-Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Regular ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Regular ☞'), url('fonts/Gilroy-Regular.woff') format('woff');
    }



body::-webkit-scrollbar {
    width: 0.5rem;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--main);
    border-radius: 0.7rem;
}

body::-webkit-scrollbar-track {
    background-color: var(--darkergrey);
    border-radius: 0.7rem;
}

/* Browsers without `::-webkit-scrollbar-*` support */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--darkergrey) var(--main);
    }
}

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
a{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;
text-decoration: none;
color: #00AEEF;}
a img{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
.smoothie{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
h1,h2,h3,h4,h5,h6{margin: 0 0 10px 0; color:#3d3d3b; text-transform: uppercase;}
p{margin: 0 0 10px 0;}
strong{ color: #00AEEF;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body{font-family:'Gilroy-Medium ☞';}
            .container{width: 100%; padding: 20px;}
           
            
            .header{width: 100%; padding: 0 0 20px;}
            .logo{width: 200px;}
        .postercontainer {width: 100%;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;align-items: center;justify-items: center;grid-gap: 30px;margin: 0 auto;}
            
            
            .posterholder{width: 100%; height: auto; overflow: hidden;box-shadow:
  1.2px 1.2px 2.2px rgba(0, 0, 0, 0.02),
  3px 3px 5.3px rgba(0, 0, 0, 0.028),
  5.6px 5.6px 10px rgba(0, 0, 0, 0.035),
  10.1px 10.1px 17.9px rgba(0, 0, 0, 0.042),
  18.8px 18.8px 33.4px rgba(0, 0, 0, 0.05),
  45px 45px 80px rgba(0, 0, 0, 0.07)
;transition:all 0.3s ease;}
.posterholder:hover{box-shadow:
  2.1px 3.2px 2.2px rgba(0, 0, 0, 0.02),
  5.1px 7.6px 5.3px rgba(0, 0, 0, 0.028),
  9.5px 14.4px 10px rgba(0, 0, 0, 0.035),
  17px 25.7px 17.9px rgba(0, 0, 0, 0.042),
  31.8px 48px 33.4px rgba(0, 0, 0, 0.05),
  76px 115px 80px rgba(0, 0, 0, 0.07)
;}
        .poster {width: 100%;padding: 1%;position: relative;box-sizing: border-box;/*background-color: #fff;filter: saturate(70%) contrast(85%);*/}
.poster img {width: 100%;display: block;z-index: 1;}
/*.poster:before,
.poster:after {content: '';width: 100%;left: 0;position: absolute;
}
.poster:before {height: 4%;bottom: -4%;background-repeat: no-repeat;background-image: linear-gradient(177deg, rgba(0,0,0,0.22) 10%, transparent 50%), linear-gradient(-177deg, rgba(0,0,0,0.22) 10%, transparent 50%);background-size: 49% 100%;background-position: 2% 0, 98% 0;}
.poster:after {height: 100%;top: 0;z-index: 2;background-repeat: no-repeat;
  background-image: linear-gradient(to right, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(265deg, rgba(0,0,0,0.2), transparent 10%), linear-gradient(5deg, rgba(0,0,0,0.2), transparent 15%), linear-gradient(-5deg, rgba(0,0,0,0.1), transparent 10%), linear-gradient(5deg, rgba(0,0,0,0.1), transparent 10%), linear-gradient(-265deg, rgba(0,0,0,0.2), transparent 10%), linear-gradient(-5deg, rgba(0,0,0,0.2), transparent 15%), linear-gradient(266deg, rgba(0,0,0,0.2), transparent 10%);
  background-size: 50% 100%, 100% 33.3333%, 100% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%;
  background-position: right top, left center, left bottom, left top, left top, right top, left center, right center, right center, left bottom;}*/

            .ph1{grid-column: 1 / 3; grid-row: 1 / 3;}

.footer{width: 100%; padding: 20px 20px; background: var(--grey); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}

.footerlogo{width: 200px; margin-bottom: 20px;}
.footertext{text-align: left; font-size: 12px; color: #fff; padding: 20px 0;}

.contactband{width: 100%; padding: 40px 20px; background: var(--pink); display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}

.contacttext{}
.contactupper{color: #fff; font-size: 32px; font-family:'Gilroy-Bold ☞'; margin-bottom: 10px;}
.contactlower{color: #fff; font-size: 18px; }
.contactbutton{padding: 20px 0;}
.contactbtn{ padding: 10px 20px; background: #fff; color: var(--main); border-radius: 20px;}
.contactbtn:hover{background: var(--main); color: #fff;}


.quizcontent{width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; min-height: calc(100vh - 150px);}
.quizimage{width: 50%;box-shadow: 0 3px 12px rgba(0,0,0,0.2);}
.quiznotes{width: 50%; padding-left: 40px;}

.quiztitle{font-size:32px; margin-bottom: 10px;}
.quizlocation{font-size: 24px;}
.quiznote{font-size: 18px;}

.accessform{width: 100%; display: flex; justify-content: center; align-content: center; padding: 20px 20px; flex-wrap: wrap; min-height: calc(100vh - 150px);}

.quizlinks{width: 100%; padding-top: 20px;}
.round {
  border-radius: 50%;text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
 background: #f1f1f1;
    color: #000;
   
}
.round:hover{background:var(--pink); color: #fff;}



/* ==========================================================================
   FORM
   ========================================================================== */

.theform{width:100%; max-width: 500px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0;}
.halfinput{width:  49%; position: relative;}
.fullinput{width: 100%; position: relative;}
.theform .fullinput label{font-size: 16px; margin-bottom: 15px; color: #fff;}
.textinput{width: 100%; border:1px solid #f9f9f9; padding: 10px; font-size: 0.8rem; background: rgba(0,0,0,0.05); background: #fff; outline: 1px solid #aaa; color: #0C0C0B; margin: 10px 0 20px;}
.textinput:focus{outline: 1px solid #0f0f0f; background: #f6f6f6;}
.submitbutton{width: 100%; border:1px solid #1a1a1a; border-radius: 2px; color: #fff; padding: 10px; transition: 0.4s; cursor: pointer; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; background: #1a1a1a}
.submitbutton:hover{background: #fff; color: #1a1a1a;}
textarea{height: 200px; text-align: left;}



/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */


 @media only screen and (max-width: 1000px) {
     .postercontainer {grid-template-columns: 1fr 1fr;}
     .quizcontent{display: block;}
     .quizimage{width: 100%; margin-bottom: 40px;}
.quiznotes{width: 100%; padding-left: 0px;}
     .footertext{width: 100%;}   
     .footer{padding: 40px 20px 20px;}
            }

.hidden{display:none!important}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*,*:before,*:after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}