/* Handcoded by Floris Smitskamp - www.florissmitskamp.nl */

body, html{ width: 100%; height: 100%; font-family: 'bebas_neuebold'; }

/* TEXT  */
h1, h2, h3, h4{ font-family: 'bebas_neuebold'; text-transform: uppercase; line-height: 1.2;}
	h2 { font-size: 3rem; }
	.red { color: #aa0c00; }
	.strike { text-decoration: line-through; }

.ribbon { letter-spacing: 2px; text-transform: uppercase; line-height: 1.1; font-size: 1.3rem; font-family: 'bebas_neuebold'; text-align: center; -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); transform: rotate(-40deg);  position: absolute; padding: 11px 0; left: -81px; top: 51px; width: 345px; background-color: #7c4a96; color: #fff; }
	.mobile { display: none; }

/* HOME */
.home { width: 100%; height: 100%; max-height: 1080px; min-height: 700px; background: url(../img/ajuma_bg_2017.jpg) center center no-repeat; background-size: cover; position: relative; }
	.home h1 { font-size: 2.8rem; color: #7c4a96; text-align: center; padding:0; margin:0 1rem; padding-top: 30px; letter-spacing: 2px; }
	.home .buttons { text-align: center; width: 100%; position: absolute; bottom: 150px; z-index: 1; }
		.button { font-family: 'bebas_neuebold'; letter-spacing: 1px; display: inline-block; padding: .8rem 2.2rem; margin: 1rem; text-transform: uppercase; font-size: 1.2rem; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
			.button.purple { background: #7c4a96; color: #fff; }
			.button.white { background: #fff; color: #7c4a96; }
                .button:hover{ background: #f6d9d2; color:#7c4a96; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

/* SHARE */
.share { background: #f6d9d2; padding: 1.5rem 0; text-align: center; }
	.pluginButton{ background:#4c69ba;background:-webkit-gradient(linear,center top,center bottom,from(#4c69ba),to(#3b55a0));background:-webkit-linear-gradient(#4c69ba,#3b55a0);border:none;-webkit-border-radius:3px;color:#fff;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0;text-shadow:0 -1px 0 #354c8c;white-space:nowrap;-webkit-font-smoothing:antialiased;display:inline-block;font-family:helvetica,arial,sans-serif;font-size:11px;position:relative;top:-1px;text-decoration:none; }
		.pluginButton:hover{ background:#5b7bd5;background:-webkit-gradient(linear,center top,center bottom,from(#5b7bd5),to(#4864b1));background:-webkit-linear-gradient(#5b7bd5,#4864b1);border-color:#5874c3 #4961a8 #41599f;-webkit-box-shadow:inset 0 0 1px #607fd6;  }
		.pluginButtonImage{ display:inline-block; }
		.pluginButton button{ background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;font-weight:700;margin:-1px;outline:0;padding:0;text-shadow:0 -1px 0 #354c8c; }
		.sp_plugin-button{ background-image:url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/y1/r/LVx-xkvaJ0b.png);background-position:0 -42px;background-size:auto;background-repeat:no-repeat;display:inline-block;height:14px;width:14px; }
		.pluginButtonIcon{ height:14px;left:0;margin:0 4px;position:relative;top:3px;vertical-align:top;width:14px; }
		.pluginButton .pluginButtonLabel{ padding:0 5px 0 0;position:relative;vertical-align:top; }
	.fb-share-button{ position: relative; top: 0px; }
	.twitter-share-button{ position: relative !important; top: 2px; }

/* MOVIES */
.movies { max-width: 70rem; margin: 0 auto 4rem; }
	.movies h2 { text-align: center; color: #7c4a96; padding: 4rem 1rem 2rem; margin: 0; }
	.responsive-video { position: relative; padding-bottom: 56.25%; height: 0; }
		.responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* LINEUP */
.lineup { margin-bottom: 4rem; }
	.lineup h2 { text-align: center; color: #7c4a96; padding: 4rem 1rem 2rem; margin: 0; }
 	.lineup .artist { width:25%; float: left; text-align: center; position: relative; overflow: hidden; }
	 	.lineup .artist img.photo { width: 100%; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; }
	 		.lineup .artist:hover img.photo { -webkit-transform: scale(1.07); -moz-transform: scale(1.07); transform: scale(1.07); }
		.lineup .artist span.act { position: absolute; bottom: 79px; left: 30px; padding: .25rem .5rem; background: rgba(255,255,255,1); font-family: 'bebas_neuebold'; letter-spacing: 1px; font-size: 1rem; color: #7c4a96; }
	 	.lineup .artist span.name { position: absolute; bottom: 30px; left: 30px; padding: .5rem 1.2rem; background: rgba(255,255,255,0.8); font-family: 'bebas_neuebold'; letter-spacing: 1px; font-size: 1.5rem; color: #7c4a96; }
		
		.lineup .artist .listen{ opacity: 0; padding-top: 30%; transition: all .35s; top: 0; position: absolute; height: 100%; width: 100%; background: rgba(0,0,0,0.5);  }
			.lineup .artist:hover .listen {  transition: all .35s; opacity: 1; color: #fff; font-size: 1.5rem; }
			.lineup .artist .listen a{ color: #fff; text-decoration: none;  font-weight: normal; display: block;  }
				.lineup .artist .listen a:hover{ color: #7c4a96; }

			
/* TIMETABLE */
.timetable{ background: #fff; }
	.timetable h2{ text-align: center; color: #7c4a96; padding: 2rem 1rem 2rem; margin: 0; }
	.timetable-image { margin: 0 auto; max-width: 1260px; text-align: center; }
		.timetable-image a { color: #7c4a96; text-decoration: none; }
		.timetable-image img { max-width: 100%; } 


/* EXTRAS */
.extras { padding: 4rem 1rem 0; }
	.extras h2 { text-align: center; color: #7c4a96; padding: 0 1rem 2rem; margin: 0; }
	.extras ul { list-style: none; text-align: center; padding: 2rem 10rem 0; margin: 0 -1rem; max-width: 1600px; background: #f6d9d2; }
		.extras ul li { display: inline-block; padding: 0 2rem 2rem; font-family: 'bebas_neuebold'; letter-spacing: 1px; font-size: 2rem; color: #d2a2ba; }
			.extras ul li:last-child { padding-right: 0;}
	
	.extras .activities { margin: 0 -1rem;}
	.extras .activity { width:25%; float: left; text-align: center; position: relative; overflow: hidden; }
	 	.extras .activity img.photo { width: 100%; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; }
	 		.extras .activity:hover img.photo { -webkit-transform: scale(1.07); -moz-transform: scale(1.07); transform: scale(1.07); }
	 	.extras .activity span.name { position: absolute; bottom: 30px; left: 30px; max-width: calc(100% - 98px); padding: .5rem 1.2rem; background: rgba(255,255,255,0.8); font-family: 'bebas_neuebold'; letter-spacing: 1px; font-size: 1.5rem; color: #7c4a96; text-align: left; }
		
		.extras .activity .info{ opacity: 0; display: flex; align-items: center; justify-content: center; transition: all .35s; top: 0; position: absolute; height: 100%; width: 100%; background: rgba(0,0,0,0.5);  }
			.extras .activity:hover .info {  transition: all .35s; opacity: 1;  }
			.extras .activity .info p { color: #fff; padding: 0 2rem; font-size: 1.5rem; }


/* TICKETS */
.tickets { background: #fff; padding: 4rem 1rem; text-align: center; }
	.tickets h2 { color: #7c4a96; display: inline-block; margin: 0 2rem 0 0; padding: 0; vertical-align: middle;  }
		.tickets h2 div { font-size: 1.4rem; }
	.tickets .button { vertical-align: middle; }

/* ROUTE */
.route { background: #fff; position: relative; z-index: -1; }
	.route .overlay{ width: 100%; height: 450px; background:transparent; position:relative; z-index: 1; top:450px; margin-top: -450px; }
	.route h2 { text-align: center; color: #0b4760; padding: 0 0 2rem; margin: 0; }

/* SPONSORS */
.sponsors { text-align: center; background: #cfb2c4; padding: 4rem 15rem; }
	.sponsor { display: inline-block; margin: 2rem 2rem; vertical-align: middle; position: relative; top:0px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
        .sponsor:hover{ top: -10px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

/* RESPONSIVE */
@media screen and (max-width:900px) {
	.home h1 { font-size: 2rem; }
	h2 { font-size: 2.5rem; }
	.lineup .artist { width: 50%; }
	.extras .activity { width: 50%; }
	.sponsors{ padding: 4rem 0; }
}

@media screen and (max-width: 480px) {
	.home { background: url(../img/ajuma_bgmobile_2017.jpg) center center no-repeat; background-size: cover; min-height: auto; }
	.home h1 { font-size: 1.7rem; padding-top: 25px; line-height: 1.1; }
	.home .buttons { bottom: 100px; }
		.home .button { margin: .5rem; }
	h2 { font-size: 2.2rem; }
	.lineup .artist { width: 100%; }

	.tickets h2 { display: block; margin: 0 ;}
	.extras ul, .activities-timetable ul { padding: 2rem 2rem 0; }
		.extras ul li, .activities-timetable ul li { font-size: 1.5rem; padding: 0 0 1.5rem; display: block; }
		.extras .activity { width: 100%; }
	.ribbon { position: relative; width: 100%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); top: 0px; left: 0px; }
		.mobile { display: inline; }
}

/* FONTS */
@font-face {
    font-family: 'bebas_neueregular';
    src: url('fonts/bebasneue_regular-webfont.eot');
    src: url('fonts/bebasneue_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bebasneue_regular-webfont.woff') format('woff'),
         url('fonts/bebasneue_regular-webfont.ttf') format('truetype'),
         url('fonts/bebasneue_regular-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bebas_neuebold';
    src: url('fonts/bebasneue_bold-webfont.eot');
    src: url('fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bebasneue_bold-webfont.woff') format('woff'),
         url('fonts/bebasneue_bold-webfont.ttf') format('truetype'),
         url('fonts/bebasneue_bold-webfont.svg#bebas_neuebold') format('svg');
    font-weight: normal;
    font-style: normal;
}