/* 

	 Rampage Amsterdam 2025 landing Stylesheet

	 info@alwaysawake.be

*/

@import url(https://fonts.bunny.net/css?family=roboto:400,400i,700,700i);
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

/* Basics */

html { color: #fefefe; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 17px; width: 100%; height: 100%; margin: 0px; padding: 0px; }
body { margin: 0px; padding: 0px; height: 100%;	background: #000000; }
img { border: 0; display: block; }
h1, h2, h3, p, a { padding: 0; margin: 0; font-weight: normal; }
b, strong { font-weight: 700; }
a { text-decoration: none; }
.clear { clear: both; }
.responsive-show { display: none !important; }

#cn { position: relative; width: 100%; min-height: 100%; text-align: center; box-sizing: border-box; padding: 20px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; }
#countdown-title h3 { text-transform: uppercase; font-weight: 700; font-size: 24px; }
#countdown-title { padding-bottom: 10px; }
#logo { position: relative; padding: 0px; max-width: 100%; }
#logo img { position: relative; display: inline-block; width: 100%; height: auto; max-height: 70vh; }
#location h3 { text-transform: uppercase; font-weight: 700; font-size: 24px; }
#tickets { position: relative; padding: 20px 20px 40px 20px; }
#tickets a { background: #FFFF00; color: #000000; padding: 18px 36px; font-size: 24px; text-transform: uppercase; font-weight: 700; }
#tickets a:hover { background: #FFFFFF; color: #000000; }
#social { position: absolute; bottom: 10px; left: 10px; right: 10px; text-align: center; }
#social .icon { position: relative; display: inline-block; vertical-align: middle; margin: 0px 10px; }
#social a { position: relative; display: inline-block; vertical-align: middle; color: #FFFFFF; font-size: 32px; padding: 10px; width: 40px; height: 40px; text-align: center; background: 0; border-radius: 32px; transition: all 200ms ease-in-out; }
#social a:hover { background: #BC38AF; transition: all 100ms ease-in-out; }

#theme-home-bg-video { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
#theme-home-bg-video video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%,-50%); }

a { color: #FFFFFF; }
a:hover { color: #86D231; }

@media only screen and (min-width: 2800px) and (orientation: landscape) {
	
}

@media only screen and (min-width: 640px) {
	#logo { max-width: 100%; }
}

@media only screen and (max-width: 640px) {
	.responsive-hide { display: none !important; }
}

@media only screen and (max-width: 820px) and (orientation: portrait) {
}

@media only screen and (max-height: 640px) and (orientation: landscape) {
}



/* Colorbox */

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/

#colorbox, #cboxOverlay, #cboxWrapper { position:absolute; top:0; left:0; z-index:9999; overflow:hidden; }
#cboxWrapper { max-width:none; }
#cboxOverlay { position:fixed; width:100%; height:100%; }
#cboxMiddleLeft, #cboxBottomLeft { clear:left; }
#cboxContent { position:relative; }
#cboxLoadedContent { overflow:auto; -webkit-overflow-scrolling: touch; }
#cboxTitle { margin:0; }
#cboxLoadingOverlay, #cboxLoadingGraphic { position:absolute; top:0; left:0; width:100%; height:100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor:pointer; }
.cboxPhoto { float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic; }
.cboxIframe { width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent { box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; }

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/

#cboxOverlay { background:#000;}
#colorbox { outline:0;}
    #cboxContent { margin-top:40px;}
        .cboxIframe { background:#f5f5f5;}
        #cboxError { padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{ }
        #cboxTitle { position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent { position:absolute; top:-20px; right:40px; color:#ccc; visibility: hidden !important; }
        #cboxLoadingGraphic{ }
        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline:0; }
        #cboxSlideshow {position:absolute; top:-20px; right:90px; color:#f5f5f5;}
        #cboxPrevious, #cboxNext { position:absolute; top:50%; margin-top:-50px; width:50px; height:100px; background: rgba(0,0,0,0.6); color: #ccc; outline: none; }
        #cboxPrevious { left: 0px; }
        #cboxPrevious:before { font-size: 72px; font-family: FontAwesome; content: "\f104"; }
        #cboxNext:hover, #cboxPrevious:hover { color: #f5f5f5; background: rgba(0,0,0,0.8); }
        #cboxNext { right:0px; }
        #cboxNext:before { font-size: 72px; font-family: FontAwesome; content: "\f105"; }
        #cboxClose { position:absolute; top: -45px; right: -14px; display:block; width:45px; height:45px; color: #ccc; outline: 0; }
        #cboxClose:before { font-family: FontAwesome; font-size: 24px; content: "\f00d"; }
        #cboxClose:hover { color: #f5f5f5; }

/*
	Countdown
	https://github.com/Dazix/SimpleCountDown
*/
		
.countDown__cont { font-family: Lato, Arial, Gadget, sans-serif; font-size: 13px; display: flex; color: #333; }
.countDown__interval_cont { display: flex; justify-content: space-around; width: auto; }
.countDown__interval_cont:nth-child(n+1):not(:last-child) { margin-right: 1em; }
.countDown__interval_basic_cont { display: flex; flex-direction: column; }
.countDown__interval_basic_cont_description { display: flex; margin-left: .3em; margin-top: 0.3em; font-size: 1.2em; font-weight: bold; color: #333; }
.countDown__digit_cont { perspective: 3.2em; box-shadow: 0em 0em 0.1em rgba(0, 0, 0, 0.2); width: 1em; height: 1.6em; position: relative; line-height: 1.6em; font-size: 5em; font-weight: bold; border-radius: 0.08em; }
.countDown__digit_cont:nth-child(n+1):not(:last-child) { margin-right: 0.05em; }
.countDown__digit_last_placeholder, .countDown__digit_new_placeholder { position: absolute; left: 0; width: 100%; height: 50%; text-align: center; overflow: hidden; }
.countDown__digit_last_placeholder { bottom: 0; background: white; border-radius: 0 0 0.08em 0.08em; }
.countDown__digit_last_placeholder_inner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; bottom: 50%; position: absolute; }
.countDown__digit_new_placeholder { top: 0; background: #f7f7f7; border-radius: 0.08em 0.08em 0 0; }
.countDown__digit_last_rotate, .countDown__digit_new_rotate { display: flex; justify-content: center; width: 100%; height: 50%; font-weight: bold; position: absolute; top: 0; overflow: hidden; animation-duration: 0.4s; animation-timing-function: linear; border-radius: 0.08em 0.08em 0 0; animation-fill-mode: forwards; transform-origin: 100% 100%; }
.countDown__digit_last_rotate:after, .countDown__digit_new_rotate:after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 100%; border-bottom: 0.01em solid rgba(0, 0, 0, 0.1); }
.countDown__digit_last_rotate { animation-name: countDown_flip_1; background: #f7f7f7; }
.countDown__digit_new_rotate { animation-name: countDown_flip_2; background: white; }
.countDown__digit_new_rotated { transform: rotateX(180deg); width: 100%; height: 100%; }
.countDown__digit_new_rotated_inner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; bottom: 50%; position: absolute; }
@keyframes countDown_flip_1 { 0% { transform: rotateX(0deg); z-index: 1; } 100% { transform: rotateX(-180deg); z-index: 0; } }
@keyframes countDown_flip_2 { 0% { transform: rotateX(0deg); z-index: 0; } 100% { transform: rotateX(-180deg); z-index: 1; } }

.dark .countDown__cont { color: #FFFFFF; }
.dark .countDown__interval_basic_cont_description { color: #777777; }
.dark .countDown__digit_cont { box-shadow: 0em 0em 0.1em rgba(0, 0, 0, 0.2); }
.dark .countDown__digit_last_placeholder { background: #000000; }
.dark .countDown__digit_new_placeholder { background: #1A1A1A; }
.dark .countDown__digit_last_rotate:after, .dark .countDown__digit_new_rotate:after { border-bottom: 0.01em solid rgba(0, 0, 0, 0.1); }
.dark .countDown__digit_last_rotate { background: #1A1A1A; }
.dark .countDown__digit_new_rotate { background: #000000; }

@media only screen and (max-width: 820px) {
	.countDown__cont { font-size: 13px; }
	.countDown__interval_cont:nth-child(n+1):not(:last-child) { margin-right: .75em; }
	.countDown__interval_basic_cont_description { margin-left: .1em; margin-top: 0.3em; font-size: 1em; }
	.countDown__digit_cont { perspective: 2.4em; width: .75em; height: 1.2em; line-height: 1.2em; font-size: 3.75em; border-radius: 0.06em; }
	.countDown__digit_cont:nth-child(n+1):not(:last-child) { margin-right: 0.0375em; }
	.countDown__digit_last_placeholder { border-radius: 0 0 0.06em 0.06em; }
	.countDown__digit_new_placeholder { border-radius: 0.06em 0.06em 0 0; }
	.countDown__digit_last_rotate, .countDown__digit_new_rotate { border-radius: 0.06em 0.06em 0 0; }
}

@media only screen and (max-width: 420px) {
	.countDown__cont { font-size: 13px; }
	.countDown__interval_cont:nth-child(n+1):not(:last-child) { margin-right: .6em; }
	.countDown__interval_basic_cont_description { margin-left: .18em; margin-top: 0.18em; font-size: .72em; }
	.countDown__digit_cont { perspective: 1.92em; width: .65em; height: 1.2em; line-height: 1.2em; font-size: 3em; border-radius: 0.048em; }
	.countDown__digit_cont:nth-child(n+1):not(:last-child) { margin-right: 0.03em; }
	.countDown__digit_last_placeholder { border-radius: 0 0 0.048em 0.048em; }
	.countDown__digit_new_placeholder { border-radius: 0.048em 0.048em 0 0; }
	.countDown__digit_last_rotate, .countDown__digit_new_rotate { border-radius: 0.048em 0.048em 0 0; }
}