/* Coco Loco Festival landing Stylesheet

	 info@alwaysawake.be

*/

/* Basics */

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

html { color: #4E2784; font-family: Poppins, Helvetica, Arial, sans-serif; font-weight: normal; font-size: 14px; 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%; height: 100%; }
#ft-pixels { position: absolute; left: 0; bottom: 0; width: 1px; }

.btn { position: relative; text-align: center; display: inline-block; vertical-align: top; margin: 5px; }
.btn a { position: relative; font-family: 'Poppins', sans-serif; font-size: 24px; text-transform: uppercase; font-weight: 700; color: #4E2784; padding: 18px; background: #fefefe; }
.btn a:hover { color: #ffc494; }
.btn a i { margin-right: 0.5em; }

#savethedate { position: relative; padding: 20px; text-align: center; }
#savethedate h1 { padding: 0; margin: 0; font-size: 18px; font-weight: 700; text-transform: uppercase; color: #fefefe; }
#savethedate h1 span { color: #4E2784; }

#logo { position: relative; padding: 20px; text-align: center; }
#logo img { position: relative; display: inline-block; max-width: 100%; }

#tickets { position: relative; margin: 0 auto; text-align: center; padding: 20px 0px; }
#tickets iframe { width: 600px; height: 700px; }

#vid-responsive { position: relative; padding: 20px; text-align: center; width: 30vw; min-width: 300px; margin: 0 auto; }
#vid { position: relative; padding: 20px; text-align: center; width: 60vw; margin: 0 auto; }

.video-box-landscape {  position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; }
.video-box-landscape iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.video-box-portrait {  position: relative; padding-bottom: 177.8%; padding-top: 0px; height: 0; overflow: hidden; }
.video-box-portrait iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#social { position: relative; padding: 20px; text-align: center; }
#social .icon { position: relative; text-align: center; display: inline-block; margin: 5px; z-index: 11; }
#social .icon i { display: inline-block; font-size: 32px; color: #fefefe; background: #FB3E74; text-align: center; width: 32px; padding: 18px; border-radius: 50%; -webkit-border-radius: 50%; }
#social .icon:hover i { color: #fefefe; background: #4E2784; }
#social .icon.soundcloud i { padding: 24px 28px 24px 20px; }

#forward { position: relative; padding: 20px; text-align: center; }
#forward .icon { position: relative; display: inline-block; }
#forward .icon a { position: relative; text-align: center; display: block; margin: 5px; z-index: 11; padding: 18px; background: #000000; color: #FFFFFF; }
#forward .icon i { position: relative; display: inline-block; float: left; font-size: 32px; color: #FFFFFF; background: 0; }
#forward .icon h4 { position: relative; display: inline-block; font-family: 'Poppins', sans-serif; font-size: 24px; padding: 0px 10px; margin: 0px; text-transform: uppercase; font-weight: 700; color: #fefefe; background: 0; }
#forward .icon a:hover { color: #000000; background: #FFFFFF; }
#forward .icon a:hover i, #forward .icon a:hover h4 { color: #000000; }
#forward .icon.soundcloud i { padding: 24px 28px 24px 20px; }

#tba { position: relative; padding: 20px; text-align: center; }
#tba p { padding: 0; margin: 0; font-size: 16px; font-weight: 400; color: #fefefe; }

@media only screen and (min-width:640px) and (max-width: 800px) {
	#social .icon i { font-size: 24px; width: 24px; padding: 16px; }
	#forward .icon a { padding: 14px; }
	#forward .icon i { font-size: 20px; }
	#forward .icon h4 { font-size: 16px; }
}

@media only screen and (min-width: 640px) {
	#bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: url('/2026-landing/bg.png') no-repeat center center; background-size: cover; }
}

@media only screen and (max-width: 640px) {
	#savethedate h1 { font-size: 15px; }
	#social .icon i { font-size: 24px; width: 24px; padding: 16px; }
	#forward .icon a { padding: 14px; }
	#forward .icon i { font-size: 20px; }
	#forward .icon h4 { font-size: 16px; }
}

@media only screen and (max-width: 640px) and (orientation: portrait) {
	#bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: url('/2026-landing/bg-mobile.png') no-repeat center center; background-size: cover; }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
	#bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: url('/2026-landing/bg.png') no-repeat center center; background-size: cover; }
}

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