@charset "utf-8";
/* CSS Document */

html * { margin: 0; padding: 0; background-repeat: no-repeat!important; }
body { color: black; font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 150%; min-height: 100vh; min-width: 300px; }
a { color: black; text-decoration: none; }
ul { list-style-type: none; }
img { display: block; }
div { box-sizing: border-box; }
hr { visibility: hidden; height: 0px; border: none; clear: both; }
h1 { font-size: 250%; font-family: 'Raleway', sans-serif; letter-spacing: -0,03em; font-weight: 700; line-height: 90%; }
h2 { font-family: 'Raleway', sans-serif; }


/* layout ------------------- */
#mainlogo { height: 41px; margin: -27px 5% 0 0; padding-top: 12px; }
#mainlogo img { height: 100%; }
header, main, footer, #ticketinfo { max-width: 1280px; width: 75%; margin: 0 auto; }
main#eventpage { width: 100%; max-width: 100%; }

header { display: flex; justify-content: center; align-items: center; padding: 1.5% 0 0 0; }
#mobilemenu, #mobilemenu-items, .event-sidemenu { padding-top: 0; display: none; z-index:3;}
.rightside { display: flex; min-width: 150px; justify-content: flex-end; }
#page-home { background: #d8d8d8 url("/img/footer-home.webp") center bottom; background-size: 45% auto; }
#page-event { background: #d8d8d8 url("/img/footer-faq.webp") 90% bottom; background-size: 45% auto; }
#page-contact { background: #d8d8d8 url("/img/footer-kontakt.webp") center bottom; background-size: 66% auto; }
#page-booking { background: #d8d8d8 url("/img/footer-booking.webp") center bottom; background-size: 66% auto; }
#page-cookies { background-color: #d8d8d8; }
#page-history { background: #d8d8d8 url("/img/footer-historia.webp") center bottom; background-size: 66% auto; }

main { min-height: 75vh; box-sizing: border-box; }

/* menu ------------------- */
header a { display: block; font-family: 'Raleway', sans-serif; font-weight: 900; letter-spacing: -0.03em; padding-top: 12px; }
header #menu a::before { content:"I"; margin-right: 20px; }
header #menu .events a::before { content:""; margin-right: 0; }

.events img { margin: 10px 10px 0 0; float: left; }
.events img::after { content:""; clear: left; }
#menu { margin-right: 3%; }
#menu li { display: inline-block; margin-right: 20px; }
.socialmenu li { display: inline-block; margin-left: 10px; }
.socialmenu li:first-child { margin-left: 0; }
.socialmenu a { display: block; width: 30px; height: 31px; text-indent: -9000px; }
.socialmenu a#ig { background: url("/img/icon-instagram.webp") center 3px; background-size: auto 100%; }
.socialmenu a#fb { background: url("/img/icon-facebook.webp") center 2px; background-size: auto 100%; }
.socialmenu a#eve { background: url("/img/icon-cart.webp") center top; background-size: auto 100%; display: none; }
.langmenu { margin: 0 0 0 20px; }

header #menu a:hover, .langmenu a:hover { color: #aaa; -moz-transition: color 0.3s; -o-transition: color 0.3s; -webkit-transition: color 0.3s; transition: color 0.3s; }
.socialmenu a:hover { opacity: 0.66; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }

/* footer */
footer { display: flex; justify-content: center; padding: 40px 0 80px 0; font-size: 90%; position: relative; }
.footermenu { position: relative; }
.footermenu li { display: inline-block; margin: 0 20px 0 0; }
.footermenu a { display: block; font-weight: 700; }
.footermenu li.copyright { margin-right: 25px; }

.eventsfooter img { margin: 9px 10px 0 0; float: left; }
.eventsfooter img::after { content:""; clear: left; }

/* uvod ------------------- */
#page-home footer { padding: 100px 0 100px 0; }
#homeslide-img { display: none; }
.homecard-1 { display: flex; flex-wrap: wrap; gap: 25px 25px; justify-content: center; margin: 5% 0 0 0; }

.cardbox { background: transparent; width: 300px; line-height: 100%; position: relative; perspective: 1500px; }
.cardbox:hover  .cardbox-body { transform: rotateY(180deg); }
.cardbox:hover .cart-btn { transform: rotateY(360deg); }

.cardbox.flipped  .cardbox-body { transform: rotateY(180deg); }
.cardbox.flipped .cart-btn { transform: rotateY(360deg); }

.cardbox-body { display: flex; padding: 25px 45px 120px 15px; position: relative; height: 600px; box-sizing: border-box; transition: transform 1s;
  transform-style: preserve-3d; background: white; box-shadow: 0 0 10px 10px rgba(0,0,0,0.05); }
.cardbox-body.historical { background: #d8d8d8; border: 1px solid #6c6c6c; }
.cart-btn { transition: transform 0.6s; transform-style: preserve-3d; }

.cardbox-front { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.historical .cardbox-front { opacity: 0.5; }
.cardbox-back { display: flex; flex-wrap: wrap; text-align: center; align-items: flex-end; position: absolute; width: 100%; height: 100%; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: white; transform: rotateY(180deg); }
.historical .cardbox-back { background: #d8d8d8; opacity: 1; filter: grayscale(100%); }

.event-name h2, .event-name-2 h2 { font-size: 230%; line-height: 90%; font-weight: 700; letter-spacing: -0.03em; height: 150px; margin-top: 16px; }
.event-name-2 h2 { height: auto; margin-bottom: 66%; }
.event-name-2 { width: 100%; padding: 0 10%; }
.event-date-2 { width: 100%; position: absolute; top: 25px; }

.event-date strong, .event-date-2 strong { font-size: 125%; }
.event-desc { padding: 20px 0; }
.event-venue p { font-size: 80%; }
.event-desc p { font-size: 70%; }
.event-desc p.clickinfo { display: block; font-size: 90%; font-weight: 900; margin-top: 30px; }
.cart-btn { display: block; position: absolute; right: 25px; bottom: 0; width: 60px; height: 60px; }
.cart-btn img { width: 100%; height: 100%; }

.cardbox.history { background: #d8d8d8; border: 1px solid #6c6c6c; position: relative; height: 600px; }
.cardbox.history:hover { background: #c6c6c6; border: 1px solid #6c6c6c; position: relative; }
.cardbox.history a { display: flex; align-items: flex-end; position: absolute; bottom: 20%; left: 20px; width: 100%; height: 80%; }
.cardbox.history h2 { font-size: 250%; line-height: 66%; margin-bottom: 60px; }
.cardbox.history h2 span { display: block; font-size: 33%; }
.cardbox.history img { width: 66%; }

.cardbox-back.tstm { background: black url("/img/tstm.webp") center center; background-size: cover; color: white; }
.cardbox-back.cds { background: black url("/img/cds.webp") center center; background-size: cover; color: white; }
.cardbox-back.rodstewart { background: black url("/img/rodstewart.webp") center center; background-size: cover; color: white; }
.cardbox-back.sting { background: black url("/img/sting.webp") center center; background-size: cover; color: white; }
.cardbox-back.andrerieu { background: black url("/img/andrerieu.webp") center center; background-size: cover; color: white; }
.cardbox-back.rammstein { background: black url("/img/rammstein.webp") center center; background-size: cover; color: white; }
.cardbox-back.depechemode { background: black url("/img/depechemode.webp") center center; background-size: cover; color: white; }

/* eventmenu */
.footermenu .eventmenu { position: absolute; bottom: 0; padding: 0 0 40px 0;  }
.eventmenu { position: absolute; z-index: 100; color: white; max-width: 250px; padding-top: 10px; display:none;}
#menu li ul.eventmenu li { margin-right: 0; display: block; }
.event-menu-item { position: relative; }
a.eventclick { display: block; background: #000; padding: 12px 0 15px 20px; border-bottom: 1px solid #3e3e3e; color: white; width: 250px; box-sizing: border-box; }
a.eventclick:hover { background: #1f1d1d; }
.eventmenu .event-name { font-family: 'Raleway', sans-serif; font-weight: 900; font-size: 150%; max-width: 75%; margin-top: -4px; }
.eventmenu .event-day { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 150%; }
.eventmenu .event-month, .eventmenu .event-place { font-size: 80%; }
.eventmenu .event-month { color: #fdca00; font-family: 'Roboto', sans-serif; font-weight: 700; margin-left: 2px; }
.eventmenu .event-place { color: #737373; font-family: 'Roboto', sans-serif; font-weight: 700; }
.cartclick { position: absolute; bottom: 23px; right: 20px; }
.cartclick:hover { opacity: 0.5; }
.countdown { font-family: 'Roboto', sans-serif; font-weight: 700; background: #fdca00; color: black; font-size: 11px; padding: 8px 0 10px 10px; }
.countdown p { line-height: 120%;}
.countdown p.cd-numbers { font-size: 14px; }
.countdown img { margin: -7px 0 0 0; float: left; }

/* eventy ------------------- */
#page-event header { margin-bottom: 1.5%; }
#maininfo { display: flex; }
.event-img { width: 50%; background: black; }
.event-img img { height: auto; max-width: 100%; aspect-radio: 1/1; }
.event-text { width: 50%; color: white; background: #042300; padding: 5% 8% 10% 5%; display: flex; align-items: center; }
.detail-event-name h1 { font-size: 375%; width: 350px; }
.event-text p { font-size: 90%; }
.detail-event-date { margin-bottom: 10px; }
.detail-event-date span { font-size: 200%; font-weight: 700; }
.detail-event-venue { margin: 15px 0 50px 0; line-height: 120%; }

.event-text a { font-weight: 900; font-family: 'Raleway', sans-serif; border-radius: 10px; letter-spacing: -0.03em; padding: 8px 30px 10px 30px; margin-top: 8%; display: flex; align-items: center; }
.event-text img { height: 25px; margin: -2px 10px 0 0; }
.event-text img.mobileinfo { display: none; }
.detail-cart-btn { background: #ffcc1a; color: black; border: 2px solid #ffcc1a; margin-right: 20px; float: left; }
.detail-cart-btn:hover { background: #ffe400; border: 2px solid #ffe400; -moz-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; transition: background 0.3s; }
.detail-info-btn { background: none; color: white; border: 2px solid #fff; float: left; }
.detail-info-btn:hover { background: rgba(255,255,255,0.1); -moz-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; transition: background 0.3s; }

#ticketinfo { padding: 5% 0 15% 0; }
.faq { margin: 5px 0; }
.faq div { display: none; }
.faq.opened div { width: 50%; padding: 0 0 15px 0; }
.faq.opened div a { text-decoration: underline; }
.faq.opened div a:hover { opacity: 0.75; }
.faq h2 { font-size: 200%; line-height: 100%; }
.faq.opened h2 { font-size: 300%; margin: 15px 0 15px -50px; padding-left: 50px; background: url("/img/icon-arrow.webp") left center; background-size: auto 50%; }
h2.striped a { color: #898989; }

#page-event footer { justify-content: flex-start; padding-bottom: 120px; }
.event-additional-info { display: none; }

.info-sting { background: #0b0c0c; }
.info-tstm { background: #332c28; } 
.info-andre { background: #010010; } 
.info-starmus { background: #010010; }  
.info-rod { background: #0d1940; } 


#page-cookies main { width: 80%; padding: 8% 0 80px 8%; max-width: 900px; }

/* booking ------------------- */
#page-booking main { width: 80%; padding: 8% 0 80px 8%; max-width: 900px; }
#bookingpage h1 img { float: left; width: 60px; padding: 0 30px 40px 0; margin: -20px 0 0 -10px; }
.bookingpage h1 img::after { content:""; clear: left; }
#bookingpage p { font-size: 90%; padding: 10px 0 0 80px; line-height: 140%; }
#bookingpage div { padding: 30px 0 0 80px; }
#bookingpage a:hover { opacity: 0.75; text-decoration: underline; }

#bookingpage h2 { color: #565656; }
#bookingpage h2 span { display: block; }
#bookingpage h3 { font-size: 666%; font-weight: 900; line-height: 100%; letter-spacing: -0.03em; text-indent: -8px; }
h3 strong { letter-spacing: -0.2em; }

/* historia ------------------- */
#page-history main { width: 75%; padding: 5% 0 8% 9%; max-width: 860px; background: url("/img/rayoflight.webp") 25% top; }
#page-history h1 { margin-bottom: 7%; }
#historypage div { width: 50%; float: left; }
#page-history .group p { font-size: 180%; font-family: 'Raleway', sans-serif; line-height: 105%; letter-spacing: -0.05em; }
#page-history .group p.lighter a { color: #929292; }
#page-history .group a:hover { opacity: 0.75; }

/* foto overlay */
#page-history div.overlay-img { width: 700px; max-width: 80%; background: #d8d8d8; border: 1px solid gray; padding: 16px 39px 23px 39px; position: absolute; top: 23%; left: 50%; box-sizing: border-box; transform: translateX(-50%);}
#page-history div.overlay-img p { font-family: 'Roboto', sans-serif; font-size: 14px;  }
#page-history div.overlay-img img { width: 100%; margin: 12px 0; }
#page-history div.overlay-img img:hover { filter: contrast(125%); }
#page-history div.overlay-img a:hover { text-decoration: underline; }
#close-img { display: block; position: absolute; right: 0; top: 0; width: 40px; height: 40px; }
#page-history #close-img img { margin: 0 0 0 0; }

/* kontakt ------------------- */
#page-contact main { width: 75%; padding: 5% 0 80px 3%; max-width: 760px; }
.contactheader h1 img { float: left; width: 40px; padding: 0 40px 20px 0; }
.contactheader h1 img::after { content:""; clear: left; }
.contactheader p { font-size: 90%; padding: 10px 0 0 0; line-height: 140%; display: none; }
.contactheader p br { display: none; }

.contactform { margin: 25px 0 0 70px; padding: 4px 0 0 0; border-top: 2px solid #acacac; }
.contactform form { display: flex; flex-wrap: wrap; }
input, textarea, select { display: block; box-sizing: border-box; min-width: 47%; margin-left: 3%; background: #d8d8d8; outline: none; border: none; border-bottom: 2px solid #acacac; padding: 10px 15px 14px 15px; font-family: 'Roboto', sans-serif; color: black; }
::placeholder, select { color: gray; }
textarea { min-width: 100%; height: 150px; margin-left: 0; }
.nomargin { margin-left: 0; min-width: 50%; }
#submit-btn { margin-left: 0; border: none; background: black; color: white; border-radius: 12px; padding: 15px 50px 18px 50px; font-weight: 700; font-size: 75%; min-width: auto; margin-top: 40px; cursor: pointer; }
#submit-btn:hover { background: #595959; cursor: pointer; box-shadow: 0 0 20px 10px rgba(0,0,0,0.15) }


@media only screen and (max-width: 1500px){
body { font-size: 15px; }
.langmenu { padding-top: 5px; }
.events img { margin: 8px 10px 0 0; }
.events .countdown img { margin: -7px 0 0 0; }
.eventsfooter img { margin: 8px 10px 0 0; }
    
/* booking */
#page-booking main { padding: 8% 0 80px 11%; }
    
/* historia */ 
#page-history main { max-width: 660px; }
}

@media only screen and (max-width: 1200px){
body { font-size: 14px; }
header, main, footer, #ticketinfo { width: 95%; margin: 0 auto; }
.events img { margin: 7px 10px 0 0; }
.events .countdown img { margin: -7px 0 0 0; }
.eventsfooter img { margin: 7px 10px 0 0; }
    
/* eventy */
.detail-event-name h1 { font-size: 300%; width: auto; }
.detail-event-date { margin-bottom: 5px; }
.detail-event-venue { margin: 5px 0 30px 0; }
.event-img { width: 46%; }
.event-text { width: 54%; padding: 3% 10% 7% 5%; }
.event-text a { padding: 8px 20px 10px 15px; }
.event-text img { height: 20px; margin: -3px 10px 0 0; }
    
#ticketinfo { padding: 8% 0 15% 15%; }
#page-event footer { padding: 40px 0 120px 15%; }
    
/* historia */ 
#page-history main { width: 75%; padding: 5% 0 8% 9%; max-width: 660px; background: url("/img/rayoflight.webp") 25% top; }
}

@media only screen and (max-width: 992px){
#mainlogo { height: 35px; margin: -20px 5% 0 0; }
    
/* eventy */
#maininfo { display: block; }
.event-img { width: 100%; }
.event-text { width: 100%; display: block; padding: 12% 10% 16% 10%; color: black; background: #d8d8d8; position: relative; }
    
.event-text a.detail-info-btn {  text-indent:-9000px; border-radius: 50%; width: 60px; height: 60px; background: #d8d8d8;  padding: 0; margin-top: 0;  justify-content: center; float: none; border: none; position: absolute; top: -30px; right: 30px; }
.event-text a.detail-info-btn img { margin: 0 auto; }
.event-text img.mobileinfo { display: block; height: 50px; }
.event-text img.desktopinfo { display: none; }
    
.event-additional-info { display: block; padding: 5% 0 10% 0; }
.eventlinks { clear: left; padding-top: 40px; }  
.eventlinks li { display: inline-block; }  
.eventlinks a { margin: 0; padding: 0; }  
.eventlinks img { width: 42px; height: 41px; }
.eventlinks li.link-www  { display: block; margin-top: 8px; font-size: 130%; }
#instructions { margin: 23px 0 40px 0; padding: 0 0 7px 0; border-bottom: 3px solid black; border-radius: 0px; display: inline-block; min-width: 194px; box-sizing: border-box; text-align: center; }
    
#ticketinfo { padding: 8% 0 25% 15%; background: #2c2c2c; color: white; }
#ticketinfo a { color: white; }
.faq.opened h2 { background: #2c2c2c url("/img/icon-arrow-white-mobile.webp") left center; background-size: auto 50%; }
#ticketinfo h2.striped a { color: #898989; }
.faq.opened p { width: 80%; }

/* booking */
#page-booking main { padding: 12% 0 80px 8%; max-width: 750px; }
}

@media only screen and (max-width: 768px){
#menu { display: none; }  
#mobilemenu { display: block; }
#mobilemenu-items { position: fixed; left: 0; top: 0; background: black; height: 100vh; padding-top: 60px; }
#mobilemenu-items ul a { display: block; font-family: 'Raleway', sans-serif; color: white; padding: 8px 75px 8px 50px; width: 180px; box-sizing: border-box; }
.closemenu-left { position: absolute; left: 180px; top: 2%; display: block; width: 20px; height: 94px; z-index: 9999; }
.closemenu-left img { width: 100%;  }
    
/* eventside menu */
.event-sidemenu { background: #000; position: fixed; height: 100vh; right: 0; top: 0; width: 250px; overflow: scroll; }
.closemenu-right { display: block; position: fixed; right: 250px; top: 2%; width: 20px; height: 94px; background: yellow; z-index: 9999; }
.closemenu-right img { width: 100%; }
    
.socialmenu a#eve { display: block; width: 40px; height: 40px; }  
.rightside { min-width: 72%; padding-right: 20px; }
header { width: 100%; box-shadow: 0 5px 10px 6px rgba(0,0,0,0.05); padding: 0 0 0 0; justify-content: flex-start; }
footer { padding: 40px 0 40px 0; }

#page-home { background-size: 60% auto; }
#page-event { background-size: 60% auto; }
#page-contact { background-size: 85% auto; }
#page-booking { background-size: 85% auto; }
#page-history { background-size: 85% auto; }
    
/* homepage */
.cardbox { width: 240px; }
.cardbox-body { height: 480px; }
.event-name h2, .event-name-2 h2 { height: 120px; }
    
/* event */
.faq.opened div { width: 100% }
    
/* booking */
#bookingpage h1 img { display: none; }
#bookingpage p { padding: 10px 0 0 0; }
#bookingpage div { padding: 30px 0 0 0; }
    
/* historia */ 
#page-history main { width: 100%; padding: 15% 0 180px 15%; background: url("/img/rayoflight.webp") left -15%; }
#page-history .group { width: 50%; }
    
/* kontakt */
#page-contact main { width: 85%; padding: 80px 0 80px 0; }
.contactheader h1 img { padding: 0 40px 60px 0; }
input, textarea, select { min-width: 100%; margin-left: 0; }
.nomargin { min-width: 100%; }
}

@media only screen and (max-width: 576px){
footer { display: none; }
.rightside { min-width: 68%; padding-right: 15px; }
    
/* homepage */
#page-home main { width: 100%; }
.homecard-1 { gap: 10px 10px; }
.event-desc p { display: none; }
#homepage { padding-bottom: 120px; }
.cardbox { width: 45%; }
.cardbox:hover .cardbox-body { transform: rotateY(0deg); }
.cardbox:hover .cart-btn { transform: rotateY(0deg); }

.cardbox.flipped .cardbox-body { transform: rotateY(0deg); }
.cardbox.flipped .cart-btn { transform: rotateY(0deg); }

.cardbox-body { padding: 25px 45px 120px 15px; height: 250px; background: #d8d8d8; }
.cardbox-body.historical { background: #898989; }
.event-name h2, .event-name-2 h2 { font-size: 200%; height: auto; margin-bottom: 10px; }
.cardbox.history h2 { font-size: 200%; line-height: 80%; }
.cardbox.history h2 span { font-size: 50%; }
.event-desc p.clickinfo { margin-top: 0; }
.cardbox.history img { width: 33%; }
.cardbox.history { height: 250px; }
    
/* homeslider */
#homeslide-img { display: block; padding-top: 15px; margin-bottom: 30px; position: relative; }
#homeslide-img img { max-width: 100%; }
#homeslide-img ul { position: absolute; bottom: -10px; width: 100%; left: 0; display: flex; justify-content: center; }
#homeslide-img li { display: inline-block; background: #d8d8d8; margin-left: 18px; border-radius: 50%; }
#homeslide-img li:first-child { margin-left: 0; }
#homeslide-img li a { display: block; width: 10px; height: 10px; background: #acacac; border: 4px solid #d8d8d8; border-radius: 50%; }
#homeslide-img li a.activeimg { background: #ffcc1a; transform: scale(150%);}
    
/* eventy */
#ticketinfo { padding: 12% 0 30% 10%; background: #2c2c2c url("/img/bg-faq-mobile.webp") center 80%; background-size: 100% auto; }
.faq.opened h2 { font-size: 225%; margin: 0 0 20px 0; padding-left: 0; background: none; }
.faq h2 { font-size: 150%; line-height: 100%; }
    
/* booking */
#page-booking main { padding: 18% 0 80px 0; }
#bookingpage h3 { font-size: 480%; text-indent: -3px; }
#bookingpage p { max-width: 80%; }
    
/* historia */
#page-history h1 { margin-bottom: 12%; padding-left: 17%; }
#page-history .group { width: 66%; float: none; margin: 0 auto; }
#page-booking { background: #d8d8d8; background-image: url("/img/footer-booking.webp"), url("/img/bg-booking-pencil-mobile.webp"); background-position: center bottom, right 60%; background-size: 75% auto, 60% auto; }
   
/* kontakt */
.contactheader h1 img { display: none; }
.contactform { margin: 25px 0 0 0; }
}

@media only screen and (max-width: 480px){
#mainlogo { height: 28px; margin: -20px 5% 0 0; }
h1 { font-size: 200%; }
.footermenu li { margin: 0 10px 0 0; }
.eventsfooter img { display: none; }
.rightside { min-width: 54%; }
.langmenu { margin: 0 0 0 10px; }
.socialmenu a#ig { background-position: center 4px;  }
.socialmenu a#fb { background-position: center 3px; }
.socialmenu a { width: 25px; height: 29px; }
.socialmenu li { margin: 0 0 0 4px; }
    
/* homepage */
.cardbox { width: 45%; max-width: 190px; }    
.cardbox.history { width: 45%; max-width: 190px; height: 250px; }
    
/* booking */
#page-booking main { padding: 22% 0 80px 0; }
#bookingpage h3 { font-size: 420%; }
    
/* historia */
#page-history h1 { padding-left: 6%; }
#page-history .group { width: 88%; }
#page-history .group p { font-size: 150%; line-height: 120%; }

/* kontakt */
.contactheader p br { display: inline-block; }
}

@media only screen and (max-width: 400px){
.cardbox { width: 80%; max-width: 300px; }    
.cardbox.history { width: 80%; max-width: 300px; }
}

.eventmenumobile {display:block;}

.modalwindow { width: 700px; max-width: 80%; background: #d8d8d8; border: 1px solid gray; padding: 16px 39px 23px 39px; position: fixed; top: 23%; left: 50%; box-sizing: border-box; transform: translateX(-50%); }
.modalwindow p {font-family: 'Roboto', sans-serif; font-size: 14px; }
.modalwindow img { width: 100%; margin: 12px 0; }
.modalwindow img:hover { filter: contrast(125%); }
.modalwindow a:hover { text-decoration: underline;  }
#close-img { display: block; position: absolute; right: 0; top: 0; width: 40px; height: 40px; }
.modalwindow #close-img img { margin: 0 0 0 0; }

#overlay {position:fixed; height:100vh; width:100vw; top:0; left:0;}

.modaltickets {  box-shadow: 0 0 4px 4px rgba(0,0,0,0.1); width: 400px; max-width: 80%; background: #d8d8d8; border: 0px; padding: 0px; position: fixed; top: 23%; left: 50%; box-sizing: border-box; transform: translateX(-50%); z-index: 9999; }
.modaltickets h2 {    font-family: 'Raleway', sans-serif;
  font-weight: 900; text-transform: uppercase;  text-align:center; color:white; background-color: black; padding:8px; font-size: 18px;}
.modaltickets a:hover {opacity:.5}
.modaltickets a {display:block; text-align:center; padding:8px; font-size: 16px;}
.modaltickets .second {border-top: 1px solid white;}

.cookies-icon {display:none;position:fixed; bottom:40px; left:40px; width:40px; height:40px; border-radius: 100px;; background-color: white; padding:10px; box-shadow: 0 0 10px 10px rgba(0,0,0,0.05);}
.cookies-icon img {height:40px;}


.countdown-main {text-align:center; font-family: 'Roboto', sans-serif; font-weight: 700; background: #fdca00; color: black; font-size: 11px; padding: 10px 0 8px 0px; }
.countdown-main .title {font-size:19px; text-transform: uppercase; font-weight:400;}
.countdown-main b {  font-weight: 900; }
.countdown-main sup {  font-size:12px; }
.countdown-main p.cd-numbers { display:inline-block;font-size: 19px;font-weight: 900; }
.countdown-mobile {display:none;}


@media only screen and (max-width: 768px){

  .countdown-main {display:none;}
  .countdown-mobile {display:block; }
  .countdown-mobile .title {display:block; }
}