@import "_xbase.less";

/* LESS ELEMENTS
.drop-shadow(0, 1px, 2px, 0.2);
.rounded(5px);
.border-radius(5px, 0, 0, 5px);
.opacity(0.8);
.box-shadow(0 1px 2px #999);
.columns(250px, 0, 50px, #EEE, solid, 1px);
.user-select(none); 

-webkit-filter: blur(15px);
-webkit-transition: -webkit-filter .50s; */

/* FONTS */
@font-face {
    font-family: 'Knockout49';
    src: url('fonts/Knockout-HTF49-Liteweight.eot');
    src: url('fonts/Knockout-HTF49-Liteweight.eot?#iefix') format('embedded-opentype'),
        url('fonts/Knockout-HTF49-Liteweight.woff') format('woff'),
        url('fonts/Knockout-HTF49-Liteweight.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Knockout92';
    src: url('fonts/Knockout-HTF92-UltmtCruiserwt.eot');
    src: url('fonts/Knockout-HTF92-UltmtCruiserwt.eot?#iefix') format('embedded-opentype'),
        url('fonts/Knockout-HTF92-UltmtCruiserwt.woff') format('woff'),
        url('fonts/Knockout-HTF92-UltmtCruiserwt.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}




@fontlight : 'Knockout49';
@fontbold : 'Knockout92';

::selection { background: black; color:white;}
::-moz-selection { background: black; color:white;}
a, a:hover {text-decoration: none;}
strong {font-family: @fontbold;}

/* INIT */
body {color:black; font-size:22px; line-height:100%; font-family: @fontlight, 'Sans-Serif'; overflow-x: hidden; background: url('../img/ostendbeach2018_bg.jpg') no-repeat center center; background-size: cover; background-attachment: fixed;}
.page_height {position: fixed; left: -1px; top: 0px; bottom: 0px; width: 1px; font-size: 0px; line-height: 0px;}

.xmain_holder {top:140px; right:140px; bottom:140px; left:140px;}
.xmain {top:0px; right:0px; bottom:0px; left:0px; background-color: white;}

.xlabel {left:0px; right:0px; text-align: center; text-transform: uppercase; letter-spacing: 6px; font-family: @fontlight, 'Sans-Serif';}
.xlabel.top {top:0px; margin-top: 50px;}
.xlabel.bottom {bottom:0px; margin-bottom: 50px;}

.xlogo_holder {}
.xlogo {width: 120px; height: 100px;}

.xtitle_holder {text-transform: uppercase; margin-top: 30px; height: 200px;}
.xtitle_part {font-family: @fontbold; font-size:90px; line-height: 85%; }
.xtitle_part.one {display: block; top:30px;}
.xtitle_part.two {display: block; .opacity(0);}
.xtitle_part .small {font-size:56px; line-height: 85%; padding-top: 3px;}
.xtitle_part .mob {display: none;}

.xcta_holder {margin-top: 60px;}
.xcta, .xcta:visited {background: black; color:white; text-transform: uppercase; padding:22px 30px 18px 30px; font-size:30px; letter-spacing: 3px; .transition();}
.xcta:hover, .xcta:active, .xcta:focus {padding-left:40px; padding-right:40px;}

.xcta_message {font-family:@fontlight; font-size: 34px; line-height: 100%; text-transform: uppercase; color:black; letter-spacing: 2px;}

.xlinks {font-family:@fontlight; margin-top: 30px; text-transform: uppercase; color:black; letter-spacing: 1px;}

.xlink {width: 30px; height: 40px; position: relative; padding:0px 8px;}
.xlink_ico {background-image: url('../img/ostendbeach_sprite.svg'); top:10px; left:50%; width: 30px; height: 20px; margin-left: -15px; .transition();}
.xlink:hover .xlink_ico, .xlink:active .xlink_ico {top:5px;}
.facebook .xlink_ico {background-position: -24px -20px; width: 10px; margin-left: -5px;}
.youtube .xlink_ico {background-position: -62px -20px; width: 27px; margin-left: -14px;}
.instagram .xlink_ico {background-position: -115px -20px; width: 20px; margin-left: -10px;}
.twitter .xlink_ico {background-position: -160px -20px; width: 22px; margin-left: -11px;}
.mail .xlink_ico {background-position: -213px -20px; width: 22px; margin-left: -11px;}

@media screen and (max-width:1300px), screen and (max-height: 1000px){
	.xmain_holder {top:100px; right:100px; bottom:100px; left:100px;}
	.xcta_message {font-size: 30px; line-height: 100%;}
}

@media(max-width:1100px){	
	
}

@media screen and (max-width:1100px), screen and (max-height: 900px){
	.xtitle_holder {height: 170px;}
	.xtitle_part {font-size:75px; line-height: 85%;}
	.xtitle_part .small {font-size:47px; line-height: 85%;}
}

@media screen and (max-width:1000px), screen and (max-height: 850px){
	.xmain_holder {top:70px; right:70px; bottom:70px; left:70px;}
	.xlabel.top {margin-top: 40px;}
	.xlabel.bottom {margin-bottom: 40px;}
	
	.xlabel.top {margin-top: 30px;}
	.xlabel.bottom {margin-bottom: 30px;}
	.xlabel {font-size:18px; letter-spacing: 3px;}
}

@media screen and (max-width:780px), screen and (max-height: 750px){
	.xtitle_holder {height: 133px; margin-top:30px;}
	.xtitle_part {font-size:60px; line-height: 85%;}
	.xtitle_part .small {font-size:35px; line-height: 85%;}	
	.xtitle_part.one {top:15px;}
	
	.xlogo {width: 80px; height: 67px;}
	.xcta_holder {margin-top:30px;}
	.xcta {font-size:26px; letter-spacing: 2px; padding:17px 25px 15px 25px;}
	.xcta:hover, .xcta:active, .xcta:focus {padding-left:30px; padding-right:30px;}
}

@media screen and (max-width:670px), screen and (max-height: 650px){
	.xtitle_part.two .mob {display: block;}
	.xtitle_part.two .desk {display: none;}
	.xtitle_holder {height: 138px; margin-top:20px;}
	.xtitle_part {font-size:45px; line-height: 85%;}
	.xtitle_part .small {font-size:28px; line-height: 85%;}	
	.xtitle_part.one {top:25px;}
	
	.xlinks {font-size:18px; line-height: 90%; margin-top: 20px}
	.xlink {padding:0px 5px;}
	
	.xcta_message {font-size: 24px; line-height: 100%; letter-spacing: 1px;}
}

@media(max-width:700px){
	.xmain_holder {top:50px; right:50px; bottom:50px; left:50px;}
	.xlabel.top {margin-top: 25px;}
	.xlabel.bottom {margin-bottom: 25px;}
}

@media(max-width:500px){
	.xmain_holder {top:40px; right:40px; bottom:40px; left:40px;}
	.xlabel.top {margin-top: 20px;}
	.xlabel.bottom {margin-bottom: 20px;}
	.xlabel {font-size:18px;}
	
	.xtitle_part.one .mob {display: block;}
	.xtitle_part.one .desk {display: none;}
	
	.xtitle_holder {height: 142px; margin-top:20px;}
	.xtitle_part {font-size:44px; line-height: 90%;}
	.xtitle_part .small {font-size:26px; line-height: 90%;}	
	.xtitle_part.one {top:15px;}
	
	.xcta_holder {margin-top:20px;}
	.xcta {font-size:22px; letter-spacing: 1px; padding:12px 15px 10px 15px;}
	.xcta:hover, .xcta:active, .xcta:focus {padding-left:20px; padding-right:20px;}
	
	.xcta_message {font-size: 20px; line-height: 100%;}
}

@media(max-width:350px){
	.xtitle_holder {height: 115px; margin-top:10px;}
	.xtitle_part {font-size:35px; line-height: 90%;}
	.xtitle_part .small {font-size:20px; line-height: 90%;}	
}




/* ----- TICKETS -------- */
.xbodycontent {margin:100px; background: white; padding:100px; text-align: center;}

.xcontent_logo_holder {text-align: center; margin-bottom: 30px;}
.xcontent_logo {width: 120px; height: 100px; background:url('../img/ostendbeach_octopus.svg') center center no-repeat; background-size: contain;}

.xhead_title {font-family: @fontbold; font-size:90px; line-height: 80%; text-transform: uppercase;}
.xhead_title .small {font-size: 40px; line-height: 85%; margin-bottom: 15px;}

.xtickets_holder {margin-top: 80px;}

.xtickets_frame {padding:0px; margin:0px; border:none; width: 100%; height: 720px;}

@media(max-width:1250px){
	.xbodycontent {margin:75px; padding: 75px;}
}

@media(max-width:950px){
	.xbodycontent {margin:50px; padding: 50px;}
	.xhead_title {font-size:75px; line-height: 80%;}
	.xhead_title .small {font-size: 36px; line-height: 85%; margin-bottom: 10px;}
	.xtickets_holder {margin-top: 50px;}
}

@media(max-width:750px){
	.xbodycontent {margin:40px; padding: 40px;}
	.xhead_title {font-size:65px; line-height: 80%;}
	.xhead_title .small {font-size: 32px; line-height: 85%; margin-bottom: 6px;}
	.xtickets_holder {margin-top: 40px;}
}

@media(max-width:550px){
	.xbodycontent {margin:30px; padding: 30px;}
	.xhead_title {font-size:55px; line-height: 80%;}
	.xhead_title .small {font-size: 28px; line-height: 85%; margin-bottom: 6px;}
	.xtickets_holder {margin-top: 40px;}
	.xcontent_logo_holder {margin-bottom: 20px;}
	.xcontent_logo {width: 100px; height: 84px;}
}

@media(max-width:450px){
	.xbodycontent {margin:25px; padding: 25px;}
	.xhead_title {font-size:45px; line-height: 80%;}
	.xhead_title .small {font-size: 24px; line-height: 85%; margin-bottom: 6px;}
	.xtickets_holder {margin-top: 30px;}
}

@media(max-width:380px){
	.xbodycontent {margin:20px; padding:30px 20px;}
	.xhead_title {font-size:40px; line-height: 80%;}
	.xhead_title .small {font-size: 22px; line-height: 85%; margin-bottom: 6px;}
	.xtickets_holder {margin-top: 30px;}
}