form {
display:inline
}
:root {
--main-color:#447ab5;
--background-color:black;
--secondary-color:white;
--centered:{
text-align:center;
width:100%
}
}
/* --- Set sweeAlert2 styling --- */
/* --- sweetAlert2 colors --- */
.swal2-popup {
background-color:var(--background-color);
color:var(--secondary-color)
}
.swal2-title {
color:var(--main-color)
}
.swal2-content {
color:var(--secondary-color)
}
.swal2-actions {
color:var(--secondary-color)
}
.swal2-styled {
color:var(--main-color)
}
.swal2-confirm {
color:#FFFFFF
}
.swal2-cancel {
color:var(--main-color)
}
.swal2-close {
color:var(--main-color)
}
.swal2-icon {
color:var(--main-color)
}
.swal2-input {
color:var(--secondary-color);
background-color:var(--background-color);
border:1px solid var(--main-color)
}
.swal2-file {
color:var(--secondary-color);
background-color:var(--background-color);
border:1px solid var(--main-color)
}
.swal2-validation-message {
color:var(--main-color);
background-color:var(--background-color)
}
.swal2-container{
z-index:10000
}
.centered {
text-align:center;
width:100%
}
body{
direction:rtl;
font-family:"Alef",sans-serif;
/* font-family:'Suez One',sans-serif;
*/
/* font-family:'Gladiaclm Bold',sans-serif;
*/
background-color:#168BF3;
background-image:url(../../../design/tozeret/css/bg.jpg);
background-size:100% auto;
background-position:top center
}
body *{
font-family:"Alef",sans-serif;
/* font-family:'Suez One',sans-serif;
*/
/* font-family:'Gladiaclm Bold',sans-serif;
*/
}
/* add smooth slide transition */
html {
scroll-behavior:smooth
}
.sys_connected.tutorial_body{
direction:ltr;
overflow-x:hidden
}
/* .demo{
position:absolute;
background:url(../../../design/tozeret/css/demo.jpg) top center no-repeat;
background-size:auto;
top:0;
right:0;
left:0;
bottom:0;
z-index:1;
height:4415px;
width:100%
} */
.real{
position:relative;
z-index:2;
opacity:1
}
/* --- Menu style --- */
.menu_wrapper{
position:fixed;
top:0;
right:0;
width:0;
height:100vh;
z-index:1000;
background-color:rgba(0,0,0,0.8);
padding:10px 0;
text-align:center;
overflow-x:hidden;
overflow-y:auto;
transition:all 0.5s ease-in-out
}
.menu_wrapper.opened{
width:80%
}
.menu_wrapper .links{
display:block;
width:100%;
margin:0;
padding:10px 0;
color:#fff;
font-size:20px;
text-decoration:none;
cursor:pointer
}
.menu_wrapper .links .link{
display:block;
width:100%;
margin:0 0 10px 0;
border-bottom:1px solid #fff;
padding:10px 0;
color:#fff;
font-size:38px;
text-decoration:none;
cursor:pointer
}
.menu_wrapper .links .submenu_title{
display:block;
width:100%;
margin:0 0 10px 0;
border-bottom:1px solid #fff;
padding:10px 0;
color:#fff;
font-size:44px;
font-weight:bold;
text-decoration:none;
cursor:pointer;
text-decoration:underline
}
.menu_wrapper .links .submenu{
float:right;
width:100%;
height:0;
overflow:hidden;
box-sizing:border-box;
transition:height 0.25s linear
}
.wrap{
float:none;
width:95%;
margin:0 auto;
min-width:320px;
max-width:768px
}
.wrap a{
color:var(--main-color);
text-decoration:underline
}
.wrap .header{
float:right;
width:100%;
height:1px;
overflow-y:visible;
overflow-x:hidden
}
.wrap .header .menu_btn{
position:fixed;
top:10px;
right:10px;
width:50px;
height:50px;
margin:0;
padding:10px;
z-index:10;
cursor:pointer;
border-radius:15px;
background-color:rgba(255,255,255,0.8)
}
.wrap .header .menu_btn img{
display:inline-block;
width:100%;
height:auto
}
.wrap .header .qr_scanner_btn{
position:fixed;
top:10px;
left:10px;
width:50px;
height:50px;
margin:0;
padding:10px;
z-index:10;
cursor:pointer;
border-radius:15px;
background-color:rgba(255,255,255,0.8)
}
.wrap .header .qr_scanner_btn img{
display:inline-block;
width:100%;
height:auto
}
.wrap .header .nfc_btn{
position:fixed;
top:90px;
left:10px;
width:50px;
height:65px;
margin:0;
padding:10px;
z-index:10;
cursor:pointer;
border-radius:15px;
background-color:rgba(255,255,255,0.8)
}
.wrap .header .nfc_btn img{
display:inline-block;
width:100%;
height:auto
}
.content{
float:right;
width:100%
}
.sys_connected.tutorial_body .wrap{
direction:rtl
}
.section{
float:right;
width:100%
}
.borderBottom{
position:absolute;
bottom:0;
right:0;
left:0;
z-index:3;
width:100%;
height:3px;
margin:0;
padding:0;
background-color:#cd7713
}
.section .logo{
float:right;
width:100%;
margin:34px 0 0 0;
padding:0;
text-align:center;
position:relative
}
.section .logo img{
float:none;
width:21%;
display:inline-block
}
.section .mainTitleHolder{
float:right;
width:100%;
margin:16px 0 0 0;
padding:0;
text-align:center;
position:relative
}
.section .mainTitleHolder .mainTitle{
float:right;
width:100%;
margin:0;
padding:0;
font-size:46px;
color:#cd7713;
font-weight:bold;
background-color:transparent
}
.section .mainTitleHolder .subTitle{
float:right;
width:72%;
margin:0 14%;
padding:0;
font-size:14px;
line-height:1.5;
background-color:transparent
}
.section .mainTitleHolder .subTitle .location{
float:right;
margin:0 5px 0 0;
padding:0;
font-size:38px;
color:#cd7713;
line-height:1.5;
background-color:transparent
}
.section .mainTitleHolder .subTitle .date{
float:left;
margin:0;
padding:0;
font-size:70px;
color:#fff;
line-height:1;
background-color:transparent;
font-weight:bold
}
.section .textHolder{
float:right;
width:55%;
margin:64px CALC( 25% / 2) 0;
text-align:center;
position:relative;
padding:0 10%;
background-color:#000
}
.section .textHolder.sectionBGHolder{
padding:0 10% 336px
}
.section .textHolder .sectionBGImage{
position:absolute;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
background-size:100% auto;
background-position:bottom center;
background-color:black;
background-repeat:no-repeat;
z-index:1
}
.section .textHolder .textTitle{
float:right;
width:100%;
margin:26px 0 0 0;
padding:0;
font-size:36px;
color:#cd7713;
font-weight:bold;
background-color:transparent;
position:relative;
z-index:2
}
.section .textHolder .textContent{
float:right;
width:95%;
margin:10px 2.5% 20px;
padding:0;
font-size:22px;
color:#fff;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2
}
.section .btn{
float:right;
width:70%;
margin:65px 15% 15px;
padding:26px 0;
text-align:center;
text-decoration:none;
position:relative;
z-index:2;
color:#000;
font-size:30px;
font-weight:bold;
background-color:#cd7713;
box-shadow:10px 10px 7px 0 #000
}
.section .textHolder .locationGallery{
float:right;
width:92.5%;
margin:61px 3.5% 64px;
padding:0;
position:relative;
z-index:2;
min-height:310px;
background-color:transparent;
overflow-x:hidden
}
.section .textHolder .locationGallery .arrw_right{
position:absolute;
top:50%;
right:0;
width:50px;
height:50px;
margin:-25px 0 0 0;
padding:0;
cursor:pointer;
z-index:2
}
.section .textHolder .locationGallery .arrw_right::before{
content:"";
position:absolute;
top:50%;
right:0;
width:0;
height:0;
margin:-10px 0 0 0;
padding:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid #cd7713
}
.section .textHolder .locationGallery .gallerySlider{
position:absolute;
top:0;
right:0;
width:10000px;
transition:all 0.5s ease-in-out
}
.section .textHolder .locationGallery .gallerySlider .galleryItem{
float:right;
width:486px;
height:100%;
margin:0
}
.section .textHolder .locationGallery .gallerySlider .galleryItem img{
display:inline-block;
width:100%
}
.section .textHolder .locationGallery .arrw_left{
position:absolute;
top:50%;
left:0;
width:50px;
height:50px;
margin:-25px 0 0 0;
padding:0;
cursor:pointer;
z-index:2
}
.section .textHolder .locationGallery .arrw_left::before{
content:"";
position:absolute;
top:50%;
left:0;
width:0;
height:0;
margin:-10px 0 0 0;
padding:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-right:20px solid #cd7713
}
.section .coopGallery{
float:right;
width:100%;
margin:0;
padding:0;
position:relative;
z-index:2
}
.section .coopGallery .coopHolder{
float:right;
width:100%;
margin:0;
padding:0;
position:relative;
z-index:2;
text-align:center
}
.section .coopGallery .coopHolder .coopItem{
display:inline-block;
width:134px;
height:134px;
margin:0 10px 30px
}
.section .coopGallery .coopHolder .coopItem img{
display:inline-block;
width:100%;
height:100%
}
.wrap .section .footerImage{
float:right;
width:100%;
text-align:center
}
.wrap .section .footerImage img{
display:inline-block;
width:100%
}
#overlay{
position:fixed;
top:0;
left:0;
right:0;
margin:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:999;
display:none
}
.ticketsPurchaseWrapper{
float:none;
position:absolute;
width:648px;
top:15px;
right:0;
left:0;
margin:0 auto;
padding:45px 0 0 0;
z-index:3;
text-align:center;
background-color:#000;
max-height:88%;
height:fit-content
}
.ticketsPurchaseWrapper .ticketsPurchaseClose{
position:absolute;
top:25px;
right:20px;
width:35px;
height:35px;
margin:0;
padding:0;
font-size:35px;
border-radius:35px;
color:#000;
line-height:35px;
text-align:center;
cursor:pointer;
z-index:3;
background:#FFFFFF 0% 0% no-repeat padding-box
}
.ticketsPurchaseWrapper .ticketsPurchaseClose::after{
content:"\00d7"
}
.ticketsPurchaseWrapper .ticketsPurchase{
display:inline-block;
width:100%;
margin:0;
padding:0;
position:relative;
z-index:2;
text-align:center
}
.ticketsPurchaseWrapper .ticketsPurchase .ticketsPurchaseTitle{
float:right;
width:100%;
margin:0;
padding:0;
font-size:30px;
color:#cd7713;
font-weight:bold;
background-color:transparent;
position:relative;
z-index:2
}
.ticketsPurchaseWrapper .ticketsPurchaseText{
float:right;
width:100%;
margin:0;
padding:0;
font-size:20px;
color:#FFFFFF;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2
}
.ticketsPurchaseWrapper .ticketsPurchaseForm{
float:right;
width:100%;
margin:25px 0 0 0;
padding:0;
position:relative;
z-index:2;
text-align:center
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper{
float:right;
width:84%;
margin:0 8% 25px;
padding:0;
position:relative;
z-index:2;
text-align:right
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper label{
float:right;
width:25%;
margin:0;
padding:0;
font-size:22px;
color:#cd7713;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2;
text-align:left
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper input[type="text"],
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper input[type="email"],
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper input[type="tel"],
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper input[type="number"]{
float:left;
width:68%;
margin:0;
padding:0;
font-size:22px;
color:#000;
line-height:31.5px;
background-color:#FFFFFF;
position:relative;
border:none;
z-index:2
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper textarea{
float:left;
width:68%;
margin:0;
padding:0;
font-size:22px;
color:#000;
line-height:31.5px;
background-color:#FFFFFF;
position:relative;
border:none;
z-index:2;
resize:none
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper select{
float:left;
width:68%;
margin:0;
padding:0;
font-size:22px;
color:#000;
line-height:31.5px;
background-color:#FFFFFF;
position:relative;
border:none;
z-index:2
}
/* --- checkboxes are built with the label and input reversed,and the label envelopes the input --- */
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper.checkboxInput{
float:right;
width:84%;
margin:0 8% 25px;
padding:0;
position:relative;
z-index:2;
text-align:right
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper.checkboxInput label{
float:right;
width:68%;
margin:0 32% 0 0;
padding:0;
font-size:22px;
color:#cd7713;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper.checkboxInput label span{
float:right;
width:90%;
margin:0 10px 0 0;
padding:0;
font-size:22px;
color:#cd7713;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2;
text-align:right
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper.checkboxInput input[type="checkbox"]{
float:right;
width:25px;
height:25px;
margin:0;
padding:0;
font-size:22px;
color:#000;
line-height:31.5px;
background-color:#FFFFFF;
position:relative;
border:none;
z-index:2
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper.submit{
float:right;
width:100%;
margin:0;
padding:0;
position:relative;
z-index:2;
text-align:center
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .previewSum{
float:right;
width:100%;
margin:0;
padding:0;
position:relative;
z-index:2;
text-align:center
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .previewSum .previewSumTitle{
float:right;
width:100%;
margin:0;
padding:0;
font-size:22px;
color:#cd7713;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2;
font-weight:bold
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .previewSum .previewSumContent{
float:right;
width:100%;
margin:0;
padding:0;
position:relative;
z-index:2;
text-align:center
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .previewSum .previewSumContent .previewSumContentItem{
float:right;
width:100%;
margin:0;
padding:0;
position:relative;
z-index:2;
text-align:center
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .previewSum .previewSumContent .previewSumContentItem .previewSumContentItemTitle{
float:right;
width:50%;
margin:0;
padding:0;
font-size:22px;
color:#cd7713;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2;
font-weight:bold
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .previewSum .previewSumContent .previewSumContentItem .previewSumContentItemValue{
float:right;
width:50%;
margin:0;
padding:0;
font-size:22px;
color:#cd7713;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .previewSum .previewSumContent .previewSumContentItem .previewSumContentItemValue span{
float:right;
width:100%;
margin:0;
padding:0;
font-size:22px;
color:#cd7713;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2
}
.ticketsPurchaseWrapper .ticketsPurchaseForm .inputWrapper input[type="submit"]{
float:right;
width:78%;
margin:0 11%;
padding:0;
font-size:22px;
color:#000;
line-height:31.5px;
background-color:#cd7713;
position:relative;
z-index:2;
border:none
}
.ticketsPurchaseWrapper .payment_frame{
float:right;
width:100%;
min-height:680px;
margin:20px 0 0 0;
padding:0;
position:relative;
z-index:2;
text-align:center;
display:none
}
.wrap .section.footer{
float:right;
width:100%;
margin:-6px 0 50px 0;
padding:0;
position:relative;
z-index:2;
text-align:center;
background-color:transparent
}
.wrap .section.footer .footerColumn{
float:right;
width:100%;
margin:0;
padding:10px 0;
background-color:#000;
position:relative;
z-index:2;
text-align:center
}
.wrap .section.footer .footerColumn:first-child{
padding:20px 0 0 0
}
.wrap .section.footer .footerColumn .footerColumnTitle{
float:right;
width:20%;
margin:0 5% 0 0%;
padding:0;
text-align:right;
font-size:20px;
color:#cd7713;
font-weight:bold;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2
}
.wrap .section.footer .footerColumn .footerColumnTxt{
float:right;
width:72%;
margin:0;
padding:0;
font-size:16px;
color:#FFFFFF;
text-align:right;
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2
}
.wrap .section.footer .footerColumn .footerColumnTxt a{
color:#FFFFFF;
text-decoration:underline
}
.wrap .section.footer .footerColumn:last-child{
width:100%;
background:white;
color:#000 !important
}
.wrap .section.footer .footerColumn:last-child .footerColumnTitle{
background:white;
color:#000 !important
}
.wrap .section.footer .footerColumn:last-child .footerColumnTxt{
background:white;
color:#000 !important
}
.wrap .section.footer .footerColumn:last-child .footerColumnTxt a{
background:white;
color:#000 !important
}
.credit{
float:right;
width:100%;
padding:0 0 30px 0;
font-size:14px;
color:white;
text-align:center
}
.credit a{
color:white;
text-decoration:none
}
.credit a img{
width:20px;
height:20px;
margin:0 2px
}
.floatingFormBtn{
position:fixed;
bottom:230px;
right:10px;
top:auto;
left:auto;
padding:0;
margin:0;
background-color:transparent;
z-index:999;
cursor:pointer
}
.floatingFormBtn img{
display:inline-block;
width:108px;
height:auto
}
.popupCloser{
position:absolute;
top:25px;
right:20px;
width:35px;
height:35px;
margin:0;
padding:0;
font-size:35px;
border-radius:35px;
color:#000;
line-height:35px;
text-align:center;
cursor:pointer;
z-index:3;
background:#FFFFFF 0% 0% no-repeat padding-box
}
.popupCloser::after{
content:"\00d7"
}
/* --- event punchcards styling throughout the site --- */
.punchcard_wrapper{
float:none;
display:block;
width:100%;
max-width:320px;
margin:0 auto;
padding:0;
text-align:center
}
.punchcard{
float:right;
width:CALC(100% - 20px);
margin:0 0 20px 0;
padding:0 10px 20px;
border-radius:10px
}
.punchcard_title{
float:right;
width:100%;
margin:15px 0;
padding:0;
text-align:center;
font-weight:bold;
font-size:24px
}
/* There are multiple types of punchcards with different amount of punches,so we want to utilize flex to make them always look good */
.punches_wrapper{
float:right;
width:100%;
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
justify-content:center
}
.punch{
float:right;
width:20%;
margin:0;
padding:0;
text-align:center;
font-size:1.5em;
font-weight:bold;
padding:10px;
margin:5px;
border:1px solid #000;
background-color:white;
position:relative;
cursor:pointer
}
/* .punch::before{
content:'V';
color:green;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:1.5em;
font-weight:bold
} */
.punch label{
float:right;
width:100%;
height:100%;
position:relative;
z-index:10;
cursor:pointer
}
.punch label img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
max-width:100%;
width:auto;
height:auto;
max-height:100%;
display:none
}
.punch label input{
visibility:hidden
}
.punch.used,
.punch:hover,
.punch label input:checked + .punch label{
background-color:white;
color:white
}
.punch.used::before,
.punch:hover::before,
.punch label input:checked + .punch label::before{
color:white
}
.punch.used label img,
.punch:hover label img,
.punch label input:checked + .punch label img{
display:block
}
/* .punch.used::before{
content:'X';
color:red
} */
.punches_left{
float:right;
width:100%
}
.punchcard_transfer{
float:right;
width:CALC(100% - 40px);
text-align:center;
margin:20px 20px;
padding:10px 0;
color:var(--secondary-color);
background-color:var(--main-color);
border-color:var(--main-color);
font-size:24px;
box-sizing:border-box;
border-radius:15px;
text-decoration:none;
cursor:pointer
}
.qr_scanner_popup_overlay{
position:fixed;
top:0;
right:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:9999;
display:none
}
.qr_scanner_popup_overlay .qr_scanner_popup{
position:absolute;
top:25%;
right:0;
left:0;
width:90%;
margin:0 auto;
padding:0;
background-color:var(--secondary-color);
border-radius:10px;
z-index:9999;
text-align:center
}
.qr_scanner_popup_overlay .qr_scanner_popup .title{
float:right;
width:100%;
margin:20px 0 0;
padding:0;
font-size:24px;
color:var(--main-color);
font-weight:bold;
background-color:transparent
}
.qr_scanner_popup_overlay .qr_scanner_components{
float:right;
width:100%
}
.qr_scanner_popup_overlay .qr_scanner_components .qr_wrapper{
float:right;
width:100%
}
.qr_scanner_popup_overlay .qr_scanner_components .qr_wrapper #qr-video{
float:right;
width:100%
}
.qr_scanner_popup_overlay .qr_scanner_components .qr_wrapper #qr-canvas{
display:none
}
.nfc_scanner_popup_overlay{
position:fixed;
top:0;
right:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:9999;
display:none
}
.nfc_scanner_popup_overlay .nfc_scanner_popup{
position:absolute;
top:25%;
right:0;
left:0;
width:90%;
margin:0 auto;
padding:0;
background-color:var(--secondary-color);
border-radius:10px;
z-index:9999;
text-align:center
}
.nfc_scanner_popup_overlay .nfc_scanner_popup .title{
float:right;
width:100%;
margin:20px 0 0;
padding:0;
font-size:24px;
color:var(--main-color);
font-weight:bold;
background-color:transparent
}
.nfc_scanner_popup_overlay .nfc_scanner_popup .img_wrapper{
float:right;
width:100%;
margin:20px 0;
padding:0;
text-align:center
}
.nfc_scanner_popup_overlay .nfc_scanner_popup .img_wrapper img{
float:right;
width:100%;
height:auto;
margin:0 auto;
padding:0
}
.story_popup_overlay{
position:fixed;
top:0;
right:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:9999;
display:none
}
.story_popup_overlay .story_popup{
position:absolute;
top:5%;
right:0;
left:0;
width:90%;
margin:0 auto;
padding:0;
background-color:var(--secondary-color);
border-radius:10px;
z-index:9999;
text-align:center
}
.story_popup_overlay .story_popup .title{
float:right;
width:100%;
margin:20px 0 0;
padding:0;
font-size:36px;
color:var(--main-color);
font-weight:bold;
background-color:transparent
}
.story_popup_overlay .story_popup .story_components{
float:right;
width:100%
}
.story_popup_overlay .story_popup .story_components #photoInput{
float:right;
width:100%;
margin:20px 0;
padding:0;
text-align:center
}
.story_popup_overlay .story_popup .story_components .pre-share{
float:right;
width:100%;
margin:20px 0;
padding:0;
text-align:center
}
.story_popup_overlay .story_popup .story_components .pre-share #pre-share-img{
float:right;
width:100%;
margin:0;
padding:0
}
.story_popup_overlay .story_popup .story_components .pre-share .button{
display:inline-block;
width:50%;
margin:20px auto;
padding:0;
text-align:center;
border:1px solid var(--background-color);
color:var(--background-color);
background-color:var(--main-color);
font-size:36px;
border-radius:15px
}
.punchcard_transfer_overlay{
position:fixed;
top:0;
right:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:9999;
display:none
}
.punchcard_transfer_overlay .punchcard_transfer_popup{
position:absolute;
top:5%;
right:0;
left:0;
width:90%;
margin:0 auto;
padding:0;
background-color:#000;
border:1px solid var(--main-color);
border-radius:10px;
z-index:9999;
text-align:center
}
.punchcard_transfer_overlay .punchcard_transfer_popup .closer{
position:absolute;
top:10px;
right:10px;
z-index:2;
color:#FFFFFF;
font-size:60px;
line-height:60px;
text-align:center;
cursor:pointer
}
.punchcard_transfer_overlay .punchcard_transfer_popup .title{
float:right;
width:100%;
margin:20px 0 0;
padding:0;
font-size:36px;
color:var(--main-color);
font-weight:bold;
background-color:transparent
}
.punchcard_transfer_overlay .punchcard_transfer_popup .content{
float:right;
width:100%
}
.punchcard_transfer_overlay .punchcard_transfer_popup .content p{
float:right;
width:100%;
text-align:center;
font-size:24px;
font-weight:bold;
color:#FFFFFF;
margin:20px 0 0;
padding:0 10%;
box-sizing:border-box
}
.punchcard_transfer_overlay .punchcard_transfer_popup .content input[type="email"]{
float:right;
width:80%;
margin:20px 10%;
padding:10px;
font-size:22px;
color:#000;
line-height:31.5px;
background-color:#FFFFFF;
position:relative;
border:none;
z-index:2;
box-sizing:border-box
}
.punchcard_transfer_overlay .punchcard_transfer_popup .content .button{
float:right;
width:80%;
margin:20px 10%;
padding:10px;
font-size:22px;
color:#FFFFFF;
background-color:var(--main-color);
line-height:31.5px;
position:relative;
border-radius:15px;
border:none;
z-index:2;
box-sizing:border-box
}
.alcoholo_disclaimer_wrapper{
float:right;
width:100%;
margin:30px 0;
text-align:center
}
.alcoholo_disclaimer_wrapper .alcoholo_disclaimer{
float:right;
width:80%;
margin:0 10% 10px;
font-size:16px;
color:black;
border:2px solid black;
background-color:white;
padding:10px 5px;
box-sizing:border-box
}
.alcoholo_disclaimer_wrapper .leon_disclaimer{
float:right;
width:80%;
margin:0 10% 10px;
font-size:15.5px;
color:white;
border:2px solid white;
background-color:black;
padding:10px 5px;
box-sizing:border-box
}
.invite_popup_overlay{
position:fixed;
top:0;
right:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:9999;
display:none
}
.invite_popup_overlay .invite_popup{
position:absolute;
top:5%;
right:0;
left:0;
width:90%;
margin:0 auto;
padding:0;
background-color:var(--secondary-color);
border-radius:10px;
z-index:9999;
text-align:center
}
.invite_popup_overlay .invite_popup .closer{
position:absolute;
top:10px;
right:10px;
z-index:2;
color:#000;
font-size:35px;
line-height:35px;
text-align:center;
cursor:pointer
}
.invite_popup_overlay .invite_popup .title{
float:right;
width:100%;
margin:20px 0 0;
padding:0;
font-size:36px;
color:var(--main-color);
font-weight:bold;
background-color:transparent
}
.invite_popup_overlay .invite_popup .content{
float:right;
width:100%;
margin:20px 0 0;
padding:0;
font-size:22px;
color:var(--main-color);
line-height:31.5px;
background-color:transparent;
position:relative;
z-index:2
}
.invite_popup_overlay .invite_popup .button{
display:inline-block;
width:50%;
margin:20px auto;
padding:0;
text-align:center;
border:1px solid var(--background-color);
color:var(--background-color);
background-color:var(--main-color);
font-size:36px;
border-radius:15px;
cursor:pointer
}
#overlay{
position:fixed;
top:0;
left:0;
right:0;
margin:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:999;
display:none
}
/* =========================
Login / Signup Modal UI
========================= */
.login_modal_wrapper{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
width:90%;
height:100%;
margin:0 auto;
z-index:10001;
/* מעל sweetalert (10000) */
overflow-y:auto
}
.login_modal{
float:none;
width:92%;
max-width:560px;
margin:7vh auto 5vh;
padding:18px 16px 20px;
background-color:var(--background-color);
color:var(--secondary-color);
border:1px solid var(--main-color);
border-radius:16px;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
animation:modalIn 320ms cubic-bezier(.2,.8,.2,1) both
}
.login_modal .close_btn{
position:absolute;
top:10px;
left:10px;
width:36px;
height:36px;
line-height:1em;
display:grid;
place-items:center;
cursor:pointer;
transition:transform 120ms ease;
font-size:3em
}
.login_modal .close_btn:hover{ transform:scale(1.05)
}
.login_modal .close_btn img{ width:20px;
height:20px
}
.login_modal .title{
float:right;
width:100%;
text-align:center;
font-size:2.8em;
font-weight:700;
color:var(--main-color);
margin:4px 0 12px
}
/* blocks */
.login_modal .intro{ color:#cfcfcf;
font-size:1.7em;
text-align:center;
margin-bottom:12px
}
.login_modal .or{ color:#9aa4ad;
font-size:1.7em;
margin:12px 0;
text-align:center;
position:relative
}
.login_modal .or::before,
.login_modal .or::after{
content:'';
position:absolute;
top:50%;
width:40%;
height:1px;
background:#696969
}
.login_modal .or::before{ left:0
}
.login_modal .or::after{ right:0
}
.login_modal .switch{ color:#cfcfcf;
font-size:1.5em;
margin-top:14px;
text-align:center
}
.login_modal .switch a{ color:var(--main-color);
text-decoration:underline
}
.login_modal .options{ display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:center;
flex-direction:column;
align-items:stretch
}
.login_modal .option.btn{ display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:10px;
border:1px solid #2a2a2a;
background:#0d0d0d;
color:var(--secondary-color);
cursor:pointer;
transition:transform 120ms ease,box-shadow 120ms ease,background 120ms ease;
justify-content:center;
font-size:1.7em
}
.login_modal .option.btn:hover{ transform:translateY(-1px);
box-shadow:0 6px 18px rgba(0,0,0,0.35)
}
.login_modal .option.btn.social.google{ background:#fff;
color:#000;
border-color:#e7e7e7
}
.login_modal .option.btn.social.facebook{ background:#1877f2;
color:#fff;
border-color:#1877f2
}
.login_modal .option.btn img{ width:20px;
height:20px
}
/* form */
.login_modal .input_wrapper{ float:right;
width:100%;
margin:0 0 10px;
text-align:center
}
.login_modal .input_wrapper label{ float:right;
width:100%
}
.login_modal .input_title{ color:var(--main-color);
font-size:1.5em;
margin-bottom:6px
}
.login_modal input.input,
.login_modal input[type="text"],
.login_modal input[type="email"],
.login_modal input[type="password"],
.login_modal input[type="tel"]{
width:100%;
box-sizing:border-box;
padding:11px 12px;
border-radius:12px;
border:1px solid #2a2a2a;
background:#0f0f10;
color:#fff;
outline:none;
font-size:1.5em;
transition:border-color 160ms ease,box-shadow 160ms ease
}
.login_modal input.input:focus,
.login_modal input[type="text"]:focus,
.login_modal input[type="email"]:focus,
.login_modal input[type="password"]:focus,
.login_modal input[type="tel"]:focus{
border-color:var(--main-color);
box-shadow:0 0 0 3px rgba(68,122,181,0.25)
}
.login_modal .forgot_password{ display:inline-block;
margin-top:6px;
color:var(--main-color);
text-decoration:underline;
font-size:1.5em
}
.login_modal .submit{
display:inline-block;
padding:12px 25px;
border-radius:12px;
border:0;
background:var(--main-color);
color:#fff;
font-size:1.5em;
font-weight:600;
cursor:pointer;
transition:transform 120ms ease,box-shadow 120ms ease
}
.login_modal .submit:hover{ transform:translateY(-1px);
box-shadow:0 10px 24px rgba(0,0,0,0.35)
}
.login_modal .checkbox_wrapper label{ display:inline-flex;
align-items:center;
gap:8px;
cursor:pointer;
color:#cfcfcf
}
.login_modal .checkbox_wrapper input[type="checkbox"]{ width:18px;
height:18px;
accent-color:var(--main-color)
}
.login_modal .txt{ color:#cfcfcf;
font-size:1.2em;
margin-bottom:8px
}
.login_modal .other_options > .title{ font-size:1.4em;
font-weight:600;
color:var(--main-color);
margin:10px 0 8px;
text-align:right
}
/* default views state */
.login_modal .checkbox_wrapper{ margin:8px 0 12px
}
.login_modal .signup_form{
display:none;
flex-direction:column;
gap:12px;
padding:12px 0;
border-top:1px solid rgba(0,0,0,0.08)
}
/* login is visible by default;
signup hidden via .hidden class on markup */
.login_modal .other_options{ margin-top:14px
}
/* Signup "other options" block */
.login_modal .signup_form .other_options{
margin-top:0;
padding-top:0;
text-align:center;
display:flex;
flex-direction:column;
align-items:stretch
}
.login_modal .signup_form .other_options .title{
font-size:14px;
font-weight:600;
color:var(--main-color);
margin:8px 0 10px;
text-align:center
}
.login_modal .signup_form .other_options .options{
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap
}
.login_modal .signup_form .other_options .option.btn{
min-width:180px
}
/* hidden helper and iframe default */
.hidden{ display:none !important
}
#login_forms_target{ display:none
}
/* Animations */
@keyframes overlayFade {
from { background-color:rgba(0,0,0,0.0)
}
to   { background-color:rgba(0,0,0,0.72)
}
}
@keyframes modalIn {
0% { opacity:0;
transform:translateY(14px) scale(0.98)
}
100% { opacity:1;
transform:translateY(0) scale(1)
}
}
/* Responsive tweaks for large screens */
@media screen and (min-width:1024px){
.login_modal{ max-width:600px;
padding:22px 20px 24px
}
.login_modal .title{ font-size:26px
}
}
/* desktop version */
@media screen and (min-width:1024px) {
html{
font-size:62.5%
}
body{
font-size:1.6rem
}
.wrap{
width:1024px
}
.section .textHolder{
width:90%;
margin:60px 5% 0;
padding:0
}
.section .textHolder.sectionBGHolder{
padding:0 0 576px
}
.section .textHolder .locationGallery{
min-height:532px
}
.section .textHolder .locationGallery .gallerySlider .galleryItem{
width:853px
}
.section .coopGallery .coopHolder .coopItem{
width:175px;
height:175px;
margin:0 20px 30px
}
.wrap .section.footer{
background-color:transparent;
width:100%;
padding:0
}
.ticketsPurchaseWrapper .payment_frame{
width:95%;
margin:0 2.5%
}
}
/* if screen height under 800px and isn't mobile,then set .ticketsPurchaseWrapper to have vertical scrollbar (overflolw-y) */
@media screen and (max-height:800px) and (min-width:1024px) {
.ticketsPurchaseWrapper{
overflow-y:scroll
}
}
.accessibility_menu{
position:fixed;
top:0;
left:0;
width:68px;
background:none;
height:102px;
overflow:hidden;
color:white;
font-size:18px;
font-weight:bold;
z-index:1000;
text-align:center;
padding:0;
cursor:pointer;
display:block
}
.accessibility_menu .arrw{
position:absolute;
top:128px;
right:25px;
width:21px;
height:11px;
z-index:2
}
.accessibility_menu .accessibility_menu_btn{
position:absolute;
left:0;
z-index:1;
width:68px;
height:69px
}
.accessibility_menu_title{
float:right;
width:90%;
text-align:right;
font-size:28px;
color:white;
margin:0 0 0 0
}
.active .accessibility_menu_title{
margin:30px 10px 0 0;
height:28px
}
.outer_holder{
position:absolute;
right:0;
background:#292929;
padding:5px 5px 15px 5px;
width:288px;
display:none
}
.active.outer_holder{
border-radius:0;
display:block
}
.accessibility_menu .items_holder{
display:none;
float:left;
width:267px;
padding:5px 10px 0;
background:#f8f8f8;
margin:8px 0 0 0
}
.accessibility_menu .items_holder .item{
float:right;
width:100%;
font-size:16px !important;
border-bottom:1px solid #292929;
margin:5px 0;
padding:0 0 3px 0
}
.accessibility_menu .items_holder .item img{
float:right;
width:50px;
border-left:1px solid #292929;
padding-left:10px
}
.accessibility_menu .items_holder .item span{
float:right;
margin:12px 10px 0;
font-size:20px !important;
color:black !important;
background:#f8f8f8 !important
}
.credit{
float:right;
width:100%;
text-align:center;
font-size:16px;
color:white
}
@media (max-width:767px){
.accessibility_menu {
width:58px;
height:59px;
bottom:75px;
top:auto
}
.accessibility_menu .accessibility_menu_btn {
width:58px;
height:59px
}
.accessibility_menu .items_holder {
margin:31px 0 0 0
}
}
/*
* span {
display:inline-block
}
*/
/*
#lbuttons,
#lbuttons div,
#lbuttons a,
#lbuttons img,
.fxc #subtoolbar,
.fxc #admin_panel {
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
transform:2DValue(val) 3DValueSetToNull(0);
transform:2DValue(val);
-webkit-transform :translateZ(0);
-o-transform :translateZ(0);
-webkit-transform :translateZ(0);
transform :translateZ(0);
-webkit-transition:all 0.5s linear
}
.fxc #admin_pusher,
.fxc #sys_website {
-webkit-transition:all 0.5s linear
}
*/
body {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
min-width:100%;
min-height:100%;
padding:0;
margin:0
}
p {
padding:0;
margin:0
}
div.bs {
float:right
}
.seoform span {
float:left;
width:100px
}
.seoform div input {
width:500px
}
.seoform div {
float:left;
width:100%;
margin-bottom:15px
}
/* css fixes */
ol {
position:relative;
right:20px
}
a{
outline:0
}
input[type="image"],
input[type="submit"],
input[type="button"],
button {
cursor:pointer
}
.ie a img {
border:0
}
.hidden {
position:absolute;
left:0;
top:-100000px
}