/*=========================================================================
//
// 	███╗   ██╗ ██████╗██╗   ██╗██████╗ 
// 	████╗  ██║██╔════╝██║   ██║██╔══██╗
// 	██╔██╗ ██║██║     ██║   ██║██████╔╝
// 	██║╚██╗██║██║     ╚██╗ ██╔╝██╔══██╗
// 	██║ ╚████║╚██████╗ ╚████╔╝ ██║  ██║
// 	╚═╝  ╚═══╝ ╚═════╝  ╚═══╝  ╚═╝  ╚═╝     
//                                                                                                            
//	NCVR - Neo Coliseum VR
//  www.neocoliseumvr.com
//
//=======================================================================*/


/*================================================
	MEYERWEB RESET
	http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain)
================================================*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*================================================
    Colors
================================================*/

:root {
    --main-color:#00ff79; 
    --highlight-color: #FFF800;
    --dark-color: #000000;
    --white-color: #dddddd;
}


/*================================================
    General Page Code
================================================*/

/*===========General Input Fixes==================*/
/* SAFARI Input rounded corners fix */
textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

/*===========General==================*/

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, div {
	position: relative;
}

a,
a:visited {
    color: var(--main-color);
    text-decoration: none;
    cursor: pointer;
}

a:hover { 
    color: var(--highlight-color);
    -webkit-transition: all .3s; /* Safari */
    transition: all .3s;
}

.btn,
.btn:visited {
    font-family: 'Barlow-Bold', Helvetica, sans-serif;
    background-color: var(--main-color);
    color: var(--dark-color);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.4em;
    text-align: center;

    border: none;
    cursor: pointer;
    -webkit-transition: all .3s; /* Safari */
    transition: all .3s;

    display: inline-block;
    padding: .5em;
}

.btn.white,
.btn.white:visited {
    background-color: var(--white-color);
    color: var(--dark-color);
}

.btn:hover {
    background-color: var(--highlight-color);
    color: var(--dark-color);
}

.flex-col {
    display: flex;
    flex-direction: column;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    align-items: center;
    padding: 4px;
}
.flex-col > * { margin: 4px; }

.flex-row {
    display: flex;
    flex-direction: row;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    align-items: center;
    padding: 4px;
}
.flex-row > * { margin: 4px; }

.just-left { justify-self: left; }
.just-center { justify-self: center; }
.just-right { justify-self: right; }

hr {
    border: 0;
    width: 40%;
    color: var(--main-color);
    background-color: var(--main-color);
    height: 5px;
}

.sml {
    font-size: .8em;
}

.green {
    color: var(--main-color);
}

.vertical-center {
    margin: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.col-span-2 { grid-column: span 2;}
.col-span-3 { grid-column: span 3;}
.col-span-4 { grid-column: span 4;}
.col-span-5 { grid-column: span 5;}

.no-access {
    /* opacity: .3 !important;
    pointer-events: none !important; */
}

.no-access-time {
    opacity: .3 !important;
    pointer-events: none !important;
    text-decoration: line-through;
}

.hidden { display: none !important; }


/*================================================
    Building the page
================================================*/

body {
    color: var(--white-color);
    background-color: var(--dark-color);
    font-family: 'BarlowCondensed-Regular', Helvetica, sans-serif;
}


.main-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "video"
    "intro"
    "feature"
    "games"
    "try-now"
    "news"
    "footer";
}

.inner {
    max-width: 1920px;
    margin: 0 auto;
}

.section-container {
    display: block;
    position: relative;
    /* add hight in the actual section, it varies*/
    width: 100%;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.section-header {
    text-align: center;
    margin-bottom: 5em;
}

.section-title {
    font-family: 'ShareTechMono-Regular', Helvetica, sans-serif;
    text-align: center;
    font-size: 2em;
    padding: 8px;
    text-transform: uppercase;
    color: var(--main-color);
    font-weight: bold;
}

.section-sub-title {
    text-align: center;
    color: #ffffff;
    display: inline-block;
    padding: 8px;
    text-transform: uppercase;
    font-size: 1.3em;
}

.title-wrapper {
    color: var(--main-color);
    font-family: 'Barlow-Regular', Helvetica, sans-serif;
    font-size: 2.6em;
    text-transform: uppercase;
    text-align: center;
}

.divider-hr {
    background: url('../img/divider-icon-min.png') no-repeat;
    background-position: center center;
    background-size: contain;
    margin: 0 auto;
    padding-top: 4px;
    width: 231px;
    margin-top: 1em;
}

/* .hero-title {
    font-family: 'BarlowCondensed-SemiBold', Helvetica, sans-serif;
    font-size: 3em;
    font-weight: normal;
    padding: 4px 8px;
    margin-bottom: 1em;
    color: #ffffff;
}

.hero-title span.green { color: var(--main-color); line-height: 1.3em; padding: 0 10px; }
.hero-title span.highlight { background-color: #081315; line-height: 1.3em; padding: 0 10px; } */

.hero-title {
    display: block;
    margin-bottom: 2em;
}

.hero-title-wrapper {
    font-family: 'BarlowCondensed-SemiBold', Helvetica, sans-serif;
    font-size: 3em;
    font-weight: normal;
    color: var(--white-color);

    display: inline;
    padding: 0;
    text-align: left;
    line-height: 1.35em;
    background: var(--dark-color);
    box-shadow: 10px 0 0 var(--dark-color), -10px 0 0  var(--dark-color);
}

.hero-title .green { color: var(--main-color); }

.hero-text {
    font-family: 'BarlowCondensed-Medium', Helvetica, sans-serif;
    display: inline;
    font-size: 1.5em;
    padding: 0;
    text-align: left;
    line-height: 1.35em;
    background: var(--main-color);
    box-shadow: 10px 0 0 var(--main-color), -10px 0 0  var(--main-color);
    color: #000000;
}

#hero-btn{
    box-shadow: 10px 0 0 var(--highlight-color), -10px 0 0 var(--highlight-color);
    background-color: var(--highlight-color);
}

#hero-btn:hover {
    color: var(--highlight-color);
    box-shadow: 10px 0 0 var(--dark-color), -10px 0 0 var(--dark-color);
    background-color: var(--dark-color);
}

#submit-button-paynow { background-color: var(--highlight-color); }
#submit-button-paynow:hover {
    border: 1px solid var(--highlight-color);
    color: var(--highlight-color);
    background-color: var(--dark-color);
}



.social-icon-row { 
    align-self: center;
    display: grid;
    grid-template: 1fr / repeat(3, 1fr);
    grid-column-gap: 8px;
}

.social-icon-row .social-icon {
    background-size: contain;
    width: 40px;
    height: 40px;
}

.social-icon-svg {
    display: block;
    position: relative;
    width: 3em;
}

.facebook-svg .face-st0:hover {
    fill: var(--highlight-color) !important;
}
.facebook-svg .face-st0, .facebook-svg .face-st0:visited {
    fill: var(--main-color) !important;
}

.instagram-svg .insta-st3:hover {
    fill: var(--highlight-color) !important;
}
.instagram-svg .insta-st3, .instagram-svg .insta-st3:visited {
    fill: var(--main-color) !important;
}

.linkedin-svg .link-st3:hover {
    fill: var(--highlight-color) !important;
}
.linkedin-svg .link-st3, .linkedin-svg .link-st3:visited {
    fill: var(--main-color) !important;
}


.twitter-svg .twit-st3:hover {
    fill: var(--highlight-color) !important;
}
.twitter-svg .twit-st3, .twitter-svg .twit-st3:visited {
    fill: var(--main-color) !important;
}

/* .social-icon-row .facebook .face-st0,
.social-icon-row .facebook:visited .face-st0,
.social-icon-row .facebook:active .face-st0 { fill: var(--main-color) !important; } */

/* .social-icon-row .linkedin:hover { background-image: url(../img/linkedin-yellow-min.png) !important; }
.social-icon-row .linkedin,
.social-icon-row .linkedin:visited,
.social-icon-row .linkedin:active { background-image: url(../img/linkedin-green-min.png); }

.social-icon-row .instagram:hover { background-image: url(../img/instagram-yellow-min.png) !important; }
.social-icon-row .instagram,
.social-icon-row .instagram:visited,
.social-icon-row .instagram:active { background-image: url(../img/instagram-green-min.png); } */

.popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    z-index: 20;
}

.popup .container {
    margin: 0 auto;
    display: inline-block;
    position: relative;
    background-color: var(--dark-color);
    padding: 16px;
    width: 100%;
    max-width: 220px;

    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.popup .container > * {
    margin-bottom: 24px;
}

.popup .container img {
    display: block;
    position: relative;
    width: 70%;
    margin: 0 auto 32px auto;
}

.popup .container > *:last-child {
    margin-bottom: 0;
}

.popup .container .title {
    font-weight: bold;
    font-size: 1.4em;
}


#nav-pop-up {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* starts as a hidden element - toggled in jquery*/
    display: none;
    
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 15;

    text-align: center;
}

#nav-pop-up .wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6em;

    background-color: rgba(0, 0, 0, 0.7);
}

#nav-pop-up .wrapper .nav-list {
    color: var(--white-color);
    font-family: 'Barlow-Regular', Helvetica, sans-serif;
    font-size: 2em;
    text-transform: uppercase;
}

#nav-pop-up .wrapper .nav-list li {
    border-bottom: 1px solid var(--white-color);
    padding: .5em 0;
}

#nav-pop-up .wrapper .nav-list li:last-child {
    border: none;
}

#nav-pop-up .wrapper .nav-list li:hover {
    color: var(--highlight-color);
} 

#nav-pop-up .close-pop-up {
    position: absolute;
    top: 0;
    right: 0;
}



/*================================================
    Header Container
================================================*/

#sticky-header-container {
    grid-area: sticky-header;
    position: fixed;
    
    z-index: 10;
    width: 100%;
    padding: .5em 0 .3em 0;
    background-color: rgba(0, 0, 0, .8)
}

#sticky-header-container .inner {
    display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);
    grid-template-areas:
    ". header-logo header-logo header-logo . . . . . util util util util .";
    align-items: center;
}

#sticky-header-container .utility-wrapper {
    grid-area: util;
    text-align: right;
}

#sticky-header-container .logo-wrapper {
    grid-area: header-logo;
}

#sticky-header-container .logo {
    display: block;
    position: relative;
    max-width: 160px;
}

#sticky-header-container .logo img{
    width: 100%;
}

.nav-wrapper {
    grid-area: nav;
    justify-self: end;
    display: inline-block;
}

.nav-btn { font-family: 'Barlow-Medium', Helvetica, sans-serif; }
.nav-btn img {}

.lang-wrapper {
    grid-area: lang;
    justify-self: end;
    justify-self: flex-end;

    display: inline-block;
}


/*================================================
    Intro Container
================================================*/

#intro-container {
    grid-area: intro;
}

#intro-container .inner {
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);
    grid-template-rows: 65px 1fr auto 2em auto 1fr auto;
    grid-template-areas: 
    ". . . . . . . . . . . . . ."
    ". . . . . . . . . . . . . ."
    ". . hero hero hero hero hero hero hero hero . . . ."
    ". . . . . . . . . . . . . ."
    ". . reserv reserv reserv reserv reserv reserv reserv reserv . . . ."
    ". . . . . . . . . . . . . ."
    ". . . . scroll-mouse scroll-mouse scroll-mouse scroll-mouse scroll-mouse scroll-mouse . . . .";
    align-items: center;
}

.parallax-bg {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    z-index: 0;
}

#hero-bg {
    background-image: url(../img/bg1-min.jpg);
    box-shadow: inset 0px 0px 200px 50px #000000;
}

#games-bg {
    background-image: url(../img/bg2-min.jpg);
    height: initial;
    top: 220px;
    bottom: 0;
    box-shadow: inset 0px 0px 100px 10px #000000;
}

.parallax-front-1,
.parallax-front-2 {
    display: block;
    position: absolute;
    z-index: 5;
}

#zombie1 {
    left: 45%;
    bottom: -20px;
    width: 41vh;
    /* 312px is the image true width*/
}

#zombie1 .zombie-img {
    background-image: url(../img/zombie1-a-min.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; 
    margin: 0;
    width: 100%;
    height: 0;
    padding-bottom: 228%;
}

#zombie2 {
    left: 51%;
    transform: translateX(-30vh);
    bottom: -20px;
    /* display: block; */
    /* margin: 0 auto; */
    width: 80vh;
    /* 708px is the image true width*/
}

#zombie2 .zombie-img {
    background-image: url(../img/zombie2-a-min.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; 
    margin: 0;
    width: 100%;
    height: 0;
    padding-bottom: 98.44%;
}

.reserv-btn-wrapper {
    grid-area: reserv;
    justify-self: start;
}

.hero-wrapper {
    grid-area: hero;
    z-index: 10;

    max-width: 500px;
}

.scroll-wrapper {
    grid-area: scroll-mouse;
    cursor: pointer;
    z-index: 10;
}

.scroll-wrapper .scroll-text {
    padding-bottom: .5em;
}

.scroll-wrapper .scroll-btn {
    display: block;
    position: relative;
    cursor: pointer;
    width: 30px;

    /* call bouncing animation for arrow */
    -webkit-animation:3s arrow infinite ease;
    animation:3s arrow infinite ease;
}

.scroll-wrapper .scroll-btn img { width: 100% }

@-webkit-keyframes arrow {
    0%,100% { top:0px; }
    50% { top:10px; }
}

@keyframes arrow {
    0%,100% { top:0px; }
    50% { top:10px; }
}


/*================================================
    Feature Container
================================================*/

#feature-container {
    grid-area: feature;
}

#feature-container .inner {
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);
    grid-template-rows: 65px auto 1fr auto 1fr 30px;
    grid-template-areas: 
    ". . . . . . . . . . . . . ."
    ". feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title ."
    ". . . . . . . . . . . . . ."
    ". feature1 feature1 feature1 feature1 feature2 feature2 feature2 feature2 feature3 feature3 feature3 feature3 ."
    ". . . . . . . . . . . . . ."
    ". . . . . . . . . . . . . .";
    align-items: center;
}

#feature-container .title-wrapper {
    grid-area: feature-title;
    justify-self: center;
}

.feature1 { grid-area: feature1; justify-self: right; }
.feature2 { grid-area: feature2; justify-self: center; }
.feature3 { grid-area: feature3; justify-self: left; }

.feature-wrapper {
    max-width: 240px;
    align-items: flex-start;
    align-self: flex-start;
}
.feature-wrapper .title {
    font-family: 'BarlowCondensed-Medium', Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 1.6em;
}
.feature-wrapper .title span { color: var(--main-color); }

.feature-icon {
    display: block;
    position: relative;
    width: 120px;
    align-self: center;
}

.feature-icon img { width: 100%; }

.feature-text {}



/*================================================
    Games Container
================================================*/

#games-container {
    grid-area: games;   
}

#games-container .inner {
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);
    grid-template-rows: 65px auto 50px 1fr 30px;
    grid-template-areas: 
    ". . . . . . . . . . . . . ."
    ". games-title games-title games-title games-title games-title games-title games-title games-title games-title games-title games-title games-title ."
    ". . . . . . . . . . . . . ."
    ". . . games-info games-info games-info games-info games-info games-info . games-detail games-detail . ."
    ". . . . . . . . . . . . . .";
    align-items: center;
}

#games-container .title-wrapper {
    grid-area: games-title;
    justify-self: center;
}

#games-container .game-info-wrapper {
    grid-area: games-info;
    z-index: 10;

    max-width: 400px;
}

#games-container .game-detail-wrapper {
    font-family: 'ShareTech-Regular', Helvetica, sans-serif;
    grid-area: games-detail;
    max-width: 6em;
    z-index: 10;

}

#games-container .game-detail-wrapper .detail-container {
    text-align: center;
    padding-bottom: 1em;
}

#games-container .detail-label {
    display: block;
    font-size: 1.2em;
    text-transform: uppercase;
    background-color: #081315;
    margin-bottom: .5em;
    padding: .1em 0 0 0;
}

#games-container .detail-circle span {
    color: var(--main-color);
    font-size: 2.6em;
 }

.circle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding-bottom: 100%;
    border-radius: 50%;
    position: relative;
    /* border: 2px solid var(--main-color); */
    background: url(../img/circle-min.png) no-repeat center center;
    background-size: contain;
}

.circle span {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;

    width: 90%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(8, 19, 21, .8);
    border-radius: 50%;

}


/*================================================
    Video Container
================================================*/

#video-container {
    grid-area: video;
}

#video-container .inner {
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);
    grid-template-rows: 65px auto 1fr;
    grid-template-areas: 
    ". . . . . . . . . . . . . ."
    ". video-title video-title video-title video-title video-title video-title video-title video-title video-title video-title video-title video-title ."
    ". . . . . . . . . . . . . .";
    align-items: center;
}

#video-container .title-wrapper {
    grid-area: video-title;
    justify-self: center;
}

.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
}

.video-wrapper .sound-btn {
    display: block;
    position: absolute;
    background: url(../img/sound-off.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 30px;
    height: 30px;
    bottom: 20px;
    right: 20px;
}


/*================================================
    Try Now Container
================================================*/

#try-now-container {
    grid-area: try-now;

    background-color: var(--dark-color);
}

#try-now-container .inner {
    display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);
    grid-template-rows: 65px auto 60px auto 60px;
    grid-template-areas:
    ". . . . . . . . . . . . . ."
    ". try-now-title try-now-title try-now-title try-now-title try-now-title try-now-title try-now-title try-now-title try-now-title try-now-title try-now-title try-now-title ."
    ". . . . . . . . . . . . . ."
    /* ". . . . . try-now-btn try-now-btn try-now-btn try-now-btn . . . . ." */
    ". text text text text  text text text text text text text text  ."
    ". . . . . . . . . . . . . .";
    align-items: center;
    justify-items: center;
}

#try-now-container .title-wrapper {
    grid-area: try-now-title;
}

#try-now-container .text-wrapper {
    grid-area: text;

    text-align: center;
    font-size: 1.5em;
}

#try-now-container .text-wrapper span {
    font-size: 2.5em;
    color: var(--main-color);
}

#try-now-container .btn {
    grid-area: try-now-btn;
}

/*================================================
    News Article Container
================================================*/

#news-container {
    grid-area: news;

    background-color: var(--dark-color);
}

#news-container .inner {

    min-height: 70vh;
    background-image: url(../img/blacksand.jpg);
    background-position: center top;
    box-shadow: inset 0px 0px 200px 50px #000000;

    display: flex;
    justify-content: center;
    align-items: center;

    /* display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);
    grid-template-rows: 65px auto 60px auto 60px;
    grid-template-areas:
    ". . . . . . . . . . . . . ."
    ". news-title news-title news-title news-title news-title news-title news-title news-title news-title news-title news-title news-title ."
    ". . . . . . . . . . . . . ."
    ". text text text text  text text text text text text text text  ."
    ". . . . . . . . . . . . . .";
    align-items: center;
    justify-items: center; */
}

#news-container .title-wrapper {
    grid-area: news-title;
}

#news-container .text-wrapper {
    grid-area: text;

    text-align: center;
    font-size: 1.5em;
}

.news-display {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 2fr;
    max-width: 1000px;
    padding: 60px 40px;
    margin: 0 20px;

    border: 1px solid #555;
    background-color: rgb(200,200,200,.1);
    box-shadow: inset -15px -10px 10px #333;
}

.news-img {
    background-image: url(../img/gereralidad-logo-green.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    
}

#news-container .text-wrapper span {
    font-size: 2.5em;
    color: var(--main-color);
}

#news-container .btn {
    grid-area: news-btn;
}

/*================================================
    Res Container
================================================*/

#res { grid-area: res; }

#res .inner {
    /* height: 100vh; */
    display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);
    grid-template-rows: 65px auto 50px auto 50px auto 50px auto 30px;
    grid-template-areas:
    ". . . . . . . . . . . . . ."
    ". step-1-title step-1-title step-1-title step-1-title step-1-title step-1-title step-1-title step-1-title step-1-title step-1-title step-1-title step-1-title ."
    ". . . . . . . . . . . . . ."
    ". resumen resumen resumen resumen resumen resumen resumen resumen resumen resumen resumen resumen  ."
    ". . . . . . . . . . . . . ."
    ". res res res res res res res res res res res res ."
    ". . . . . . . . . . . . . ."
    ". submit submit submit submit submit submit submit submit submit submit submit submit ."
    ". . . . . . . . . . . . . .";
    align-items: center;
    justify-items: center;
}

#res .title-wrapper {
    grid-area: step-1-title;
}

#res .game-wrapper {
    grid-area: game;

    -webkit-transition: all .3s; /* Safari */
    transition: all .3s;
}

.game-wrapper .img-wrapper {
    width: 500px;
    border: 2px solid var(--main-color);
    cursor: pointer;
}

.game-wrapper .img-wrapper:hover::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .1);
}

.game-wrapper .img-wrapper img { width: 100%; }

.game-wrapper .game-info-bar {
    display: flex;
    justify-content: space-between;
    padding-top: 1em;

    font-size: .8em;
}

.game-wrapper .game-info-bar .game-name {
    font-family: 'BarlowCondensed-Medium', Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    color: var(--main-color);
}

.game-wrapper .game-info-bar .btn {
    background-color: var(--white-color);
    font-size: 1.2em;
    padding: .3em .5em;
}

#res .player-wrapper {
    grid-area: player;

    display: grid;
    grid-template: auto / repeat(2, 1fr); /* 2 for only two players right now*/
    grid-gap: 2em;

    font-size: 3em; /* change this to change the size of the player boxes*/
}

.player-wrapper .box {
    display: grid;
    grid-template: auto auto /auto auto;
    grid-column-gap: 8px;

    padding: 0 8px;
    color: var(--main-color);
    cursor: pointer;
    border-left: 1px solid var(--white-color);
}

.player-wrapper .box:hover {
    background-color: rgba(255, 255, 255, .1);
}

.player-wrapper .box .number {
    font-size: 2em;
    font-family: 'ShareTech-Regular', Helvetica, sans-serif;
}

.player-wrapper .box .icon {
    display: block;
    position: relative;
    background: url(../img/icon-player-min.png) no-repeat;
    background-size: contain;
    width: 1.5em;
}

.player-wrapper .box .text {
    text-transform: uppercase;
}

#res .res-wrapper {
    grid-area: res;

    display: grid;
    grid-template: auto / 1fr 1fr;
    gap: 10px;

    width: 100%;
    max-width: 1920px;
}

/* calendar */

#res .date-wrapper {
    /* grid-area: date; */

    display: grid;
    grid-template: auto / auto auto;
    gap: 1em;
    align-items: stretch;

    font-size: 1.2em;
}

.date-wrapper .calendar-wrapper {
    /* grid-area: calendar; */
    display: block;

    padding: 10px;
    border: 1px solid #182E22;
}

.date-wrapper .time-wrapper {
    /* grid-area: time; */
    display: block;

    padding: 10px;
    border: 1px solid #182E22;
    min-width: 90px;
}

.time-wrapper ul {}
.time-wrapper ul li {
    display: block;
    padding: .1em 0;
    text-align: center;
    cursor: pointer;

    border: 1px solid var(--dark-color);
}

.time-wrapper ul li.selected {
    background-color: var(--highlight-color);
    color: var(--dark-color);
}

.time-wrapper ul li:hover {
    border: 1px solid var(--highlight-color);
}



#res .form-wrapper {
    /* grid-area: form; */
    width: 100%;
}


#res .resumen-wrapper {
    grid-area: resumen;

    display: grid;
    grid-template: auto / 1fr 1fr;
    grid-gap: 8px;
    gap: 8px;

    width: 100%;
    max-width: 1920px;
}

.resumen-wrapper .info {

    display: grid;
    position: relative;
    grid-template: 1fr 1fr  / 1fr 1fr;
    gap: 10px;

    width: 100%;
}

.resumen-wrapper .img-wrapper {
    width: 500px;
    border: 1px solid #182E22;
    background: url(../img/zombie-station-tn-min.png) no-repeat;
    background-position: top center;
    background-size: cover;
    /* border: 2px solid var(--main-color); */

    width: 100%;
}
.resumen-wrapper .img-wrapper img { width: 100%; }



.resumen-wrapper .game-name {
    font-family: 'BarlowCondensed-Medium', Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    color: var(--main-color);

    position: absolute;
    bottom: 1em;
    left: .5em;
    background-color: rgba(000, 000, 000, .7);
    width: 100%;
}


.resumen-wrapper .box {
    display: block;
    position: relative;
    box-sizing: border-box;
    /* background: url(../img/box-min.png) no-repeat;
    background-size: contain; */
    border: 1px solid #182E22;

    padding: .5em;
    font-family: 'Barlow-Light', Helvetica, sans-serif;
}

.resumen-wrapper .box .title {
    
    text-transform: uppercase;
    font-size: 1.4em;
    color: var(--main-color);

    padding-bottom: 1em;
}

.progress-wrapper {
    grid-area: progress;
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: stretch;

    width: 50em;
    font-size: .8em;
}

.progress-wrapper .box {
    display: block;
    position: relative;
    box-sizing: border-box;
    /* background: url(../img/box-min.png) no-repeat;
    background-size: contain; */
    border: 1px solid #182E22;

    width: 100%;
    padding: .5em;
    font-family: 'Barlow-Light', Helvetica, sans-serif;
}

.progress-wrapper .box.active {
    border: 1px solid var(--main-color);
}

.progress-wrapper  .box.selected::before {
    content: "";
    position: absolute;
    border-top: 5px solid var(--main-color);
    box-sizing: border-box;

    width: 100%;
    top: -1em;
    left: 0;
    
}

.progress-wrapper .box .title {
    
    text-transform: uppercase;
    font-size: 1.4em;
    color: var(--main-color);

    padding-bottom: 1em;
}



#reservation-form .form-grid {
    display: grid;
    grid-template: 1fr 1fr 1fr 1fr / auto 1fr auto;

    margin-bottom: 1em;

    border-right: 1px solid #3a3a3a;
    border-bottom: 1px solid #3a3a3a;

    width: 100%;
}

#reservation-form .form-grid >* {
    padding: 8px;
    border: none;
    background-color: var(--dark-color);
    color: var(--white-color);

    border-top: 1px solid #3a3a3a;
    border-left: 1px solid #3a3a3a;
}

#reservation-form .form-grid .total-text {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}

#reservation-form .form-grid .total {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 5;
}

.form-grid .input-highlight {
    border: 1px solid var(--highlight-color) !important;
    color: var(--highlight-color) !important;
}

#reservation-form .field-label {
    color: var(--main-color);
}

#reservation-form .total-text {
    background-color: var(--main-color);
    color: var(--dark-color);
    font-weight: bold;
    font-family: 'Barlow-Medium', Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 1.5em;
    text-align: center;
}

#reservation-form .total .all {
    font-size: 1.6em;
    padding-bottom: 5px;
}

.discounted {
    text-decoration: line-through;
    color:red;
    padding-bottom: 5px;
    font-size: .7em;
}

.discount {}

.discount .desc {
    font-size: .8em;
}

/*================================================
    Policy Box
================================================*/

.policy-box {
    border: 1px solid #3a3a3a;
    display: grid;
    grid-template: auto auto / auto auto;
    gap: 10px;
    padding: 10px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/*================================================
    Submit button
================================================*/

#res .submit-wrapper {
    grid-area: submit;
    text-align: center;
}

#submit-button-paynow {
    font-family: 'Barlow-Light', Helvetica, sans-serif;
}

#submit-button-paynow span {
    font-family: 'Barlow-Bold', Helvetica, sans-serif;
}

#submit-button-paylater {
    font-family: 'Barlow-Light', Helvetica, sans-serif;
    background-color: var(--dark-color);
    border: 1px solid var(--main-color);
    color: var(--white-color);
}

#submit-button-paylater span {
    font-family: 'Barlow-Bold', Helvetica, sans-serif;
}

#submit-button-paylater:hover {
    border: 1px solid var(--highlight-color);
    color: var(--highlight-color);
}

label.error { 
    display: none !important;	/* hide the form label error fields generated by jQuery validation*/
}


.rc-anchor-light { 
    background: #000000!important; 
    color: #ffffff !important;
}

.rc-anchor-normal{
    background: #000000 !important; 
    color: #ffffff !important;
}

.captcha-container {
    margin-bottom: .5em;
}

/*================================================
    Reservation page special coloring
================================================*/

.date-wrapper .calendar-wrapper {
 border: 1px solid var(--highlight-color);
 -webkit-transition: all .3s; /* Safari */
 transition: all .3s;
}

.time-wrapper {
    -webkit-transition: all .3s; /* Safari */
    transition: all .3s;
}

.form-wrapper {
    -webkit-transition: all .3s; /* Safari */
    transition: all .3s;
}

#submit-button-paynow {
    background-color: var(--main-color);
    -webkit-transition: all .3s; /* Safari */
    transition: all .3s;
}

/*================================================
    Booking-ok Container
================================================*/

#booking-ok { grid-area: booking-ok; }

#booking-ok .inner {
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);
    grid-template-rows: 65px auto 1fr auto 1fr;
    grid-template-areas:
    ". . . . . . . . . . . . . ."
    ". title title title title title title title title title title title title ."
    ". . . . . . . . . . . . . ."
    ". confirm confirm confirm confirm confirm confirm confirm confirm confirm confirm confirm confirm ."
    ". . . . . . . . . . . . . .";
    align-items: center;
    justify-items: center;
}

#booking-ok .title-wrapper {
    grid-area: title;
}

.booking-confirm-wrapper {
    grid-area: confirm;

    text-align: center;
}

.booking-confirm-wrapper .ok-message {
    font-size: 2em;
    padding: 2em .5em;
}


/*================================================
    Contact Container - old archive section not in use
================================================*/

#contact-container {
    grid-area: contact;
    background-repeat: repeat;

    display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);;
    grid-template-rows: 1fr;
    grid-template-areas:
    ". . . . . . . . . . . . . .";

    /* container disabled temporarliy*/
    display: none;
}

.content-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.contact-text {
    margin-bottom: 1em;
}

#contact-form {
    display: flex;
    flex-direction: row;
    margin-bottom: 3em;
}

#contact-form .input-email {
    border: none;
    outline: none;
    padding: 8px;

    /* NEEDED TO REPOSITION AFTER ANIVIEW*/
    box-sizing: border-box;
    width: 100%;
}

#contact-form #email-input-error {
    display: block;
    position: absolute;
    top: 40px;
    color: var(--highlight-color);
}

#contact-form .input-submit {
    /* NEEDED TO REPOSITION AFTER ANIVIEW*/
    box-sizing: border-box;
    padding: 8px 16px;
    text-transform: uppercase;
    font-weight: bold;
}

.map-container {
    display: none;
}

.map-container iframe {
    width: 100%;
    height: 250px;
}

/*================================================
    Footer
================================================*/

#footer-container {
    grid-area: footer;
    position: relative;
    
    background-color: #060f11;
}

#footer-container .inner {
    display: grid;
    grid-template-columns: minmax(15px, auto) repeat(12, 1fr) minmax(15px, auto);
    grid-template-rows: 50px auto 50px auto 10px;
    column-gap: 1em; /* added to footer only */
    grid-template-areas:
    ". . . . . . . . . . . . . ."
    ". footer-logo footer-logo footer-logo contact contact contact hours hours hours social social social ."
    ". . . . . . . . . . . . . ."
    ". copyright copyright copyright copyright copyright copyright . . . privacy privacy privacy ."
    ". . . . . . . . . . . . . .";
    justify-items: center;
}

#footer-container .item {
    font-family: 'Barlow-Light', Helvetica, sans-serif;
    line-height: 1.5em;
}

#footer-container .item .label {
    font-family: 'Barlow-Medium', Helvetica, sans-serif;
}

#footer-container .logo-wrapper {
    grid-area: footer-logo;
}

#footer-container .logo {
    display: block;
    position: relative;
    max-width: 160px;
}

#footer-container .logo img{
    width: 100%;
}

#footer-container .contact-wrapper {
    grid-area: contact;
}

#footer-container .hours-wrapper {
    grid-area: hours;
}

#footer-container .social-wrapper {
    grid-area: social;
    align-items: flex-start;
}

.social-wrapper a {}


.social-wrapper .facebook { background-image: url("../img/facebook-icon-min.png"); }
.social-wrapper .facebook:hover { background-image: url("../img/facebook-icon-highlight-min.png"); }

.social-wrapper .instagram { background-image: url("../img/instagram-icon-min.png"); }
.social-wrapper .instagram:hover { background-image: url("../img/instagram-icon-highlight-min.png"); }

.social-wrapper .linkedin { background-image: url("../img/linkedin-icon-min.png"); }
.social-wrapper .linkedin:hover { background-image: url("../img/linkedin-icon-highlight-min.png"); }

.social-wrapper .youtube { background-image: url("../img/youtube-icon-min.png"); }
.social-wrapper .youtube:hover { background-image: url("../img/youtube-icon-highlight-min.png"); }



#footer-container .copyright-wrapper {
    grid-area: copyright;
    justify-self: start;
    font-size: .8em;
}

#footer-container .privacy-policy {
    grid-area: privacy;
    justify-self: end;
    font-size: .8em;
}

#footer-container .privacy-policy a { color: var(--white-color); }




/*================================================
    Animation Styles
================================================*/

.long-first {
    animation-duration: .5s;
    animation-delay: 0s
}

.first {
    animation-duration: .25s;
    animation-delay: 0s;
}
.second {
    animation-duration: .25s;
    animation-delay: .25s;
}
.third {
    animation-duration: .25s;
    animation-delay: .5s;
}
.fourth {
    animation-duration: .25s;
    animation-delay: .75s;
}
.fifth {
    animation-duration: .25s;
    animation-delay: 1s;
}

.fast {
    -vendor-animation-duration: 1s;
    -vendor-animation-delay: 0s;
}
.slow {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 1s;
}
.reallyslow {
    -vendor-animation-duration: 6s;
    -vendor-animation-delay: 3s;
}


/*================================================
    Media Queries
================================================*/

/* Optimized for 1920px screen */

/* Large screen ----------- 
@media only screen and (min-width : 1800px) {}*/

/* Smartphones (portrait) ----------- */
@media (max-width: 1200px) {
  
    body { font-size: .8em; }

}

/* Smartphones (portrait) -----------*/
@media (max-width: 900px) {
    
    body { font-size: .7em; }

    #sticky-header-container .inner {
        grid-template-areas:
        ". header-logo header-logo header-logo header-logo header-logo . . util util util util util .";
    }

    #footer-container .inner {
        grid-template-rows: 50px auto 2em auto 1.5em auto 10px;
        column-gap: 1em; /* added to footer only */
        grid-template-areas:
        ". . . . . . . . . . . . . ."
        ". footer-logo footer-logo footer-logo footer-logo contact contact contact contact hours hours hours hours ."
        ". . . . . . . . . . . . . ."
        ". . . . . . . . . . . . . ."
        ". . . . . . . . . . . . . ."
        ". social social social copyright copyright copyright copyright copyright copyright privacy privacy privacy ."
        ". . . . . . . . . . . . . .";
    }

    #footer-container .copyright-wrapper { align-self: center; justify-self: center; }
    #footer-container .privacy-policy { align-self: center; }

    .scroll-wrapper { display: none; }
    
}

/* Smartphones (portrait) ----------- */
@media (max-width: 650px) {

    body { font-size: .8em; }
    #zombie1, #zombie2 { display: none; }

    .video-wrapper .sound-btn {
        bottom: unset;
        top: 80px;
    }

    .lang-wrapper { display: none; }

    #intro-container .inner {
        grid-template-rows: 2fr auto 1fr auto 1fr;
        grid-template-areas:         
        ". . . . . . . . . . . . . ."
        ". hero hero hero hero hero hero hero hero hero hero hero hero ."
        ". . . . . . . . . . . . . ."
        ". reserv reserv reserv reserv reserv reserv reserv reserv reserv reserv reserv reserv ."
        ". . . . . . . . . . . . . .";
        align-items: center;
        text-align: center;
    }

    .hero-wrapper { justify-self: center; }

    .reserv-btn-wrapper { justify-self: center; }

    #feature-container .inner {

        grid-template-rows: 65px auto 1fr auto 1fr auto 1fr;
        grid-template-areas: 
        ". . . . . . . . . . . . . ."
        ". feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title ."
        ". . . . . . . . . . . . . ."
        ". feature1 feature1 feature1 feature1 feature1 feature1 feature2 feature2 feature2 feature2 feature2 feature2 ."
        ". . . . . . . . . . . . . ."
        ". feature3 feature3 feature3 feature3 feature3 feature3 feature3 feature3 feature3 feature3 feature3 feature3 ."
        ". . . . . . . . . . . . . .";
        align-items: center;
    }

    .feature1 { justify-self: center; }
    .feature3 { justify-self: center; }


    #games-container .inner {

        grid-template-rows: 65px auto 2em auto 2em auto 2em;
        grid-template-areas: 
        ". . . . . . . . . . . . . ."
        ". games-title games-title games-title games-title games-title games-title games-title games-title games-title games-title games-title games-title ."
        ". . . . . . . . . . . . . ."
        ". games-info games-info  games-info games-info games-info games-info games-info games-info games-info games-info games-info games-info  ."
        ". . . . . . . . . . . . . ."
        ". games-detail games-detail games-detail games-detail games-detail games-detail games-detail games-detail games-detail games-detail games-detail games-detail ."
        ". . . . . . . . . . . . . .";
        justify-items: center;
        text-align: center;
    }

    #games-container .game-detail-wrapper {
        display: grid;
        grid-template: auto / 1fr 1fr 1fr;
        max-width: none;
    }

    #games-container .game-detail-wrapper .detail-container {
        padding: 1em;
    }

    #games-container .inner,
    #feature-container .inner {
        height: inherit; 
    }

    #feature-container .feature-wrapper {
        display: grid;
        padding: 20px 0;
        grid-template: auto auto /auto auto;
    }

    #feature-container .title {
        grid-column: span 2;
    }
    
    .discounted {
        font-size: 1em;
    }

    /*========RESERVATIONS PAGE============*/

    #res .inner {
        grid-template-rows: 65px auto 30px auto 30px auto 30px auto 30px;
    }

    #res .res-wrapper {
        grid-template: auto auto /1fr;
    }

    #reservation-form .form-grid {
        grid-template: auto auto auto auto auto / auto 1fr;
    }

    #reservation-form .form-grid .total-text {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 5;
        grid-row-end: 6;
    }

    #reservation-form .form-grid .total {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 5;
        grid-row-end: 6;

        display: flex;
    }

    #reservation-form .form-grid .total .all {
        margin-right: 1em;
    }

    #news-container .news-display {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        font-size: 140%;
    }
    #news-container .news-display .news-img {
        width: 100%;
        height: 150px;
        padding-bottom: 25px;

    }


}

@media (max-width: 450px) {

    .hero-title-wrapper { font-size: 3em; }

    #feature-container .inner {

        grid-template-rows: 65px auto 1fr auto 1fr auto 1fr auto 1fr;
        grid-template-areas: 
        ". . . . . . . . . . . . . ."
        ". feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title feature-title ."
        ". . . . . . . . . . . . . ."
        ". feature1 feature1 feature1 feature1 feature1 feature1 feature1 feature1 feature1 feature1 feature1 feature1 ."
        ". . . . . . . . . . . . . ."
        ". feature2 feature2 feature2 feature2 feature2 feature2 feature2 feature2 feature2 feature2 feature2 feature2 ."
        ". . . . . . . . . . . . . ."
        ". feature3 feature3 feature3 feature3 feature3 feature3 feature3 feature3 feature3 feature3 feature3 feature3 ."
        ". . . . . . . . . . . . . .";
        align-items: center;
    }

    #footer-container .inner {
        grid-template-rows: 50px auto auto 2em auto 2em auto auto ;
        column-gap: 1em; /* added to footer only */
        grid-template-areas:
        ". . . . . . . . . . . . . ."
        ". footer-logo footer-logo footer-logo footer-logo footer-logo footer-logo footer-logo footer-logo footer-logo footer-logo footer-logo footer-logo ."
        ". social social social social social social social social social social social social ."
        ". . . . . . . . . . . . . ."
        ". contact contact contact contact contact contact hours hours hours hours hours hours ."
        ". . . . . . . . . . . . . ."
        ". privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy ."
        ". copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright .";
        justify-items: center;
    }

    #footer-container .privacy-policy { justify-self: start; }
    #footer-container .copyright-wrapper { align-self: center; justify-self: start; }

    /*========RESERVATIONS PAGE============*/

    #res .resumen-wrapper {
        grid-template: auto / auto;
    }

    .resumen-wrapper .img-wrapper {
        display: none;
    }

    @media (max-width: 400px) {

        #res .date-wrapper {
            grid-template: auto auto / auto;
        }

        .date-wrapper .time-wrapper {
            font-size: 1.2em;
        }

    }







   

}