html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,
sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td {border:0;margin:0;padding:0}
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,
section,video,object {display:block}
a img{border:0}
figure{position:relative}
figure img{width:100%}
p {margin-bottom:10px;}
body {
	padding:0px;
	margin:0px;
	font-family: refrigerator-deluxe, sans-serif;
	font-weight:400;
	color:#fff;
    font-size:20px;
    line-height:30px;
}
html {
    scroll-behavior: smooth !important;
}
* {margin:0px;padding:0px;font-size:100%;font-style:inherit;font-weight:inherit;vertical-align: baseline;}
.clearfix:before, .clearfix:after, .pad:before, .pad:after {content: '.'; display: block;overflow: hidden;visibility: hidden;font-size: 0;line-height: 0;width: 0;height: 0;}
.clearfix:after, .pad:after {clear: both;}

.container {max-width:1400px;
margin:0px auto;
padding:150px 60px;
}
.onlymob {displaY:none !important;}
ul {margin-bottom:30px;}
ul li {margin-left:30px;}
p {margin-bottom:20px;}
h1, h2 {
    font-weight:900;
    font-sizE:60px;
    text-transform: uppercase;
    line-height:70px;
    margin-bottom:25px;
    color:#fff;
}
h3 {
    color:#fff;
    font-weight:900;
    font-size:30px;
    line-height:40px;
    text-transform: uppercase;
}

.henk {text-align:center;position:relative;}
.henk h3, .henk a, .henk img, .henk p {position:relative;z-index:5;}
.henk:before {
    content:'';
    background:rgba(0,0,0,0.8);
    position:absolute;
    lefT:0;
    top:0;
    right:0;
    bottom:0;
}
#crew .col-4:nth-child(2) .henk {
    background-image:url(images/juuso.jpg);
    background-blend-mode:luminosity;
    background-position:center;
}
#crew .col-4:nth-child(3) .henk {
    background-image:url(images/venla.jpg);
    background-blend-mode:luminosity;
    background-position:center;
}
#crew .col-4:nth-child(4) .henk {
    background-image:url(images/huuhka.jpg);
    background-blend-mode:luminosity;
    background-position:center;
}
.henk img {max-width:50%; width:auto;}
.henk {text-align:center;
    padding:80px 50px;
    background:#222;
    margin:10px;
}
.early {
    background:#ed1c24;
    padding:30px;
    color:#fff;
}
.hinnat {padding-top:40px;}
.hinnat h3 {
    color:#ed1c24;
    font-size:30px;
    line-height:35px;
    margin-top:50px;
    margin-bottom:0px;
}

#early {padding:50px 0; text-align:center;background:#ed1c24;}
#early .early p {font-size:30px;margin:0;line-height:30px;}
.early h3 {
    color:#fff;
    margin:0;
}
.hinnat .early p {font-size:20px;margin:0;}
.hinnat ul.hinta-list {
   padding: 0;
   margin:0; 
   margin-bottom:30px;
}
.hinnat p strong {
    font-weight:900;
    font-size:22px;
}
.hinnat ul.hinta-list li, #sijainti li {
    text-align:left;
    list-style-type:none;
    font-weight:900;
    font-size:22px;
    line-height:30px;
    text-transform: uppercase;
    margin-left:0;
}
#sijainti li {
    text-align:center;
    list-style-type:none;
    font-weight:900;
    font-size:30px;
    line-height:30px;
    text-transform: uppercase;
    margin-left:0;
}
.hinnat ul li strong {
    text-align:right;
    float:right;
}#sijainti li strong {
    font-size:60px;
    line-height:60px;
    displaY:block;
}
#sijainti ul {margin-bottom:50px;}
.col-6 {width:50%;float:left;}
#partners {text-align:center;}

#partners ul li {
    list-style-type:none;
    margin:0.5%;
    width:49%;
    float:left;
    display:inline-block;
    background:#333;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding:10px;
}
#partners ul {padding:20px 50px;}

.col-4 {width:33.33%;float:left;}
.pull {float:right;}
body {height:auto;background:#000;}
    html {height:auto;}
    #nav {position:absolute;
        left:0;
        right:0;
        top:110px;
        z-index:15000;
    }
    #nav ul li {
        list-style-type:none;
        margin:0;
        display:inline-block;
    }
    #nav ul {text-align:center;}
    #nav ul li a {
        display:block;
        padding:10px 25px;
        color:#fff;
        font-weight:900;
        font-size:18px;
        text-transform: uppercase;
        text-decoration: none;
    }
    #nav ul li:nth-child(3) {margin-right:300px;}
    #showcase {position:relative;
        height:100vh;
        overflow:hidden;
        background:#212121;
}
    	.backgroundVideo {
    		position:absolute;
    		left:0;
    		right:0;
    		bottom:0;
    		top:0;
    		filter:grayscale(100%);
    		opacity:0.2;
    	}
    	#video {
    		position:absolute;
    		left:50%;
    		top:50%;
    		-moz-transform: translate(-50%, -50%);
    		-webkit-transform: translate(-50%, -50%);
    		transform: translate(-50%, -50%);
    	}
    	#video.land {
    		width:100%;
    		height:auto;
    	}
    	#video.port {
    		height:100%;
    		width: auto;
    	}
    	.boxiLogo {
    		position:absolute;
    		left:50%;
    		top:70px;
    		-moz-transform: translateX(-50%);
    		-webkit-transform: translateX(-50%);
    		transform: translateX(-50%);
    	}
    	.boxiLogo img {
    		width:120px;
    		height:auto;
    	}
    
    	.bigText {
    		font-weight:900;
    		text-transform: uppercase;
    		position:absolute;
    		top:50%;
    		-moz-transform: translateY(-50%);
    		-webkit-transform: translateY(-50%);
    		transform: translateY(-50%);
        }
        .bigText h2 {
    		font-size:130px;
    		line-height:125px;
    	}
    	.bigText.noshow {
    		left:150px;
    		text-align:left;
    	}
    	.bigText.showup {
    		right:150px;
    		text-align:right;
    	}
    	.blackBox.boxTop {
    		width:50vh;
    		height:50vh;
    		position:absolute;
    		left:50%;
    		top:0;
    		margin-left:-25vh;
    	}
    	.blackBox.boxTop:before {
    		content: '';
		position: absolute;
		background: #000;
		width: 200%;
		height: 200%;
		transform: rotate(45deg);
		transform-origin: bottom right;
		right: 50%;
		bottom: 0;
    	}
    	.blackBox.boxBottom {
    		width:50vh;
    		height:50vh;
    		position:absolute;
    		left:50%;
    		bottom:0;
    		margin-left:-25vh;
    		
    	}
    	.blackBox.boxBottom:before {
    		content: '';
		position: absolute;
		background: #000;
		width: 200%;
		height: 200%;
		transform: rotate(45deg);
		transform-origin: top left;
		left: 50%;
		top: 0;
    	}
    	
	.lineVert {
		position:absolute;
		top:100px;
		bottom:100px;
		width:5px;
		background:#ed1c24;
		z-index:200;
	}
	.lineVert.lineLeft {
		left:30px;
	}
	.lineVert.lineRight {
		right:30px;
	}


	.lineHor {
		position:absolute;
		left:100px;
		right:100px;
		height:5px;
		background:#ed1c24;
		z-index:200;
	}
	.lineHor.lineTop {
		top:30px;
	}
	.lineHor.lineBottom {
		bottom:30px;
	}
	.countdown h3 {
		font-size:30px;
		line-height:30px;
		margin-bottom:20px;
	}
	.countdown {
		position:absolute;
		left:50%;
		bottom:75px;
		z-index:500;
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		text-align:center;
		font-size:14px;
		line-height:16px;
		text-transform:uppercase;
	}
	.countdown .area {
		display:inline-block;
		width:100px;
	}
	.countdown .num {
		font-weight:900;
		font-size:70px;
		line-height:70px;
	}
	
	.bigX {
		width:80vh;
		height:80vh;
		position:absolute;
		left:50%;
		top:50%;
		-moz-transform: translate(-50%,-50%) rotate(45deg);
		-webkit-transform: translate(-50%,-50%) rotate(45deg);
		transform: translate(-50%,-50%) rotate(45deg);
	}
	.bigX:before {
		content:'';
		displaY:block;
		position:absolute;
		left:0;
		right:0;
		top:50%;
		height:40px;
		margin-top:-20px;
		background:#ed1c24;
	}
	.bigX:after {
		content:'';
		displaY:block;
		position:absolute;
		left:50%;
		top:0;
		bottom:0;
		margin-left: -20px;
		width:40px;
		background:#ed1c24;
	}
	h4 {
		color:#ed1c24;
		font-size:20px;
		text-transform:uppercase;
		margin-top:25px;
		displaY:block;
		background:#000;
		padding:10px 30px;
	}
	.but {
        background: #ed1c24;
        color: #fff;
        text-transform: uppercase;
        padding: 15px;
        display: inline-block;
        font-weight: 700;
        text-decoration: none;
        margin-top:15px;
        font-size:18px;
    }
    .but.black {
        background:#000;
        color:#fff;
    }
	
    .popup {
    	position:fixed;
    	left:0;
    	right:0;
    	top:0;
    	bottom:0;
    	z-index:50000;
    	background:rgba(0,0,0,0.7);
    	display:none;
    }
    .popup-wrap {
    	position:absolute;
    	height:auto;
    	width:360px;
    	background:#222;
    	color:#fff;
    	text-align:center;
    	padding:40px 20px;
    	left:50%;
    	top:50%;
    	-moz-transform: translate(-50%, -50%);
    	-webkit-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%);
    }
    
    .popup h3 {
        font-weight:700;
        font-size:30px;
        margin-bottom:20px;
    }
    .popup ol {
        text-align:left;
        display:inline-block;
        width:300px;
        margin:20px auto;
    }

#main-content, #pienryhmat, #crew, #partners, #footer, #sijainti, #hinnasto {position:relative;}
    #main-content:before,
    #pienryhmat:before,
    #crew:before,
    #hinnasto:before,
    #partners:before,
    #footer:before,
    #sijainti:before {
            content:'';
            position:absolute;
            top:100px;
            bottom:100px;
            width:5px;
            background:#333;
            z-index:200;
            left:30px;
    }
    #main-content:after,
    #pienryhmat:after,
    #crew:after,
    #hinnasto:after,
    #partners:after,
    #footer:after,
    #sijainti:after {
        content:'';
        position:absolute;
        top:100px;
        bottom:100px;
        width:5px;
        background:#333;
        z-index:200;
        right:30px;
}
.cut {
    margin-left:100px;
    margin-right:100px;
    height:5px;
    background:#333;
    z-index:200;
}
.img-area, .slide-area {
    background:url(images/x.png) center no-repeat;
    background-size: 100% Auto;
    margin-left:10%;
    position:relative;
}
.slide-area {
    padding:5%;
    margin-left:10%;
}
.text-area {padding:20px 20px 80px 20px;}
.col-6.pull + .col-6 .slide-area {margin-left:0;margin-right:10%;}
.img-area:before {
    content:'';
    displaY:block;
    padding-top:100%;
}
.img-area img {
    position:absolute;
    left:10%;
    top:10%;
    max-width:80%;
    width:auto;
    display:block;
}
.cut.foot {margin-bottom:150px;}
#partners h2, #hinnasto h2, #sijainti h2 {
    text-align:center;
}
#main-content h3, #pienryhmat h3 {
    color:#ed1c24;
}

.avoinna li {
    list-style-type:none;
    margin-left:0;
    displaY:inline-block;
    width:50%;
    float:left;
}

.icons {text-align:center;margin-top:30px; position:absolute; z-index:10000;
    top:190px; left:50%;
    width:200px;
    margin-left:-100px;
    vertical-align:middle;}
.icons a {color:#fff !important ;display:inline-block;margin:5px 10px;font-size:30px !important;}
.icons a {font-size:37px !important; line-height:37px !important;vertical-align:middle;}
.icons a:first-child  {font-size:30px !important; line-height:30px !important;}
.icons svg {color:#fff !important ;}
.icons a:hover, .icons svg:hover {color:#ed1c24 !important;}

.yhteydet {margin-bottom:50px;}
.yhteydet a {
    displaY:block;
    text-align:center;
    color:#ed1c24;
    font-weight:900;
    text-decoration:none;
    padding:15px 15px;
    font-size:30px;
}
.yhteydet a:hover {
    color:#888;
}

.yhteydet .col-6:nth-child(1) a {text-align:right;}

.yhteydet .col-6:nth-child(2) a {text-align:left;}

.mappi {width:100% !important;}


@media (max-width:1450px) {
    #nav ul li a {
        display:block;
        padding:10px 18px;
        color:#fff;
        font-weight:900;
        font-size:17px;
        text-transform: uppercase;
        text-decoration: none;
    }
    #nav ul li:nth-child(3) {margin-right:250px;}

}


	@media (max-width:1200px) {
		.bigText h2 {
	    		font-size:70px;
	    		line-height:65px;
	    	}
	    	.bigText.noshow {
	    		left:50px;
	    		text-align:left;
	    	}
	    	.bigText.showup {
	    		right:50px;
	    		text-align:right;
	    	}
	    	.lineVert {
			top:50px;
			bottom:50px;
		}
		.lineVert.lineLeft {
			left:12px;
		}
		.lineVert.lineRight {
			right:12px;
		}
        #main-content:after, #pienryhmat:after, #crew:after, #hinnasto:after, #partners:after, #footer:after, #sijainti:after {
            right:12px;
            top:50px;
            bottom:50px;
        }
        #main-content:before, #pienryhmat:before, #crew:before, #hinnasto:before, #partners:before, #footer:before, #sijainti:before {
            left:12px;
            top:50px;
            bottom:50px;
        }
        .container {padding:50px 40px;}
        #sijainti li strong {font-size:48px;}
		.lineHor {
			left:50px;
			right:50px;
		}
		.lineHor.lineTop {
			top:12px;
		}
		.lineHor.lineBottom {
			bottom:12px;
		}
        #nav ul li a {
            display:block;
            padding:10px 12px;
            color:#fff;
            font-weight:900;
            font-size:17px;
            text-transform: uppercase;
            text-decoration: none;
        }
    #nav ul li:nth-child(3) {margin-right:160px;}
        h1, h2 {
            font-weight:900;
            font-sizE:40px;
            text-transform: uppercase;
            line-height:50px;
            margin-bottom:25px;
            color:#fff;
        }
        h3 {
            color:#fff;
            font-weight:900;
            font-size:24px;
            line-height:30px;
            text-transform: uppercase;
        }
	}
    @media (max-width:1024px) {
        .onlymob {displaY:block !important;}
        #nav .nav-list {display:none;}
        .mobile-opener {position:fixed;
            top:30px;
            right:30px;
            background:#ed1c24;
            width:70px;
            height:70px;
            z-index: 15000;
        }
		.button-lines {padding:10px 15px;margin-top:10px;}
		.m-line {
            background:#fff;
            height:5px;
            width:100%;
            margin-top:7px;
        }
        .nav-list {
            position:fixed;
            z-index:2000;
            background:#111;
            top:0;
            left:0;
            right:0;
            bottom:0;
            displaY:none;
        }
        .m-line.line1 {margin-top:0;}
        .m-line.line2 {}
        .m-line.line3 {}
        #sijainti li strong {
            font-size:35px;
        }
        .slide-area {margin-left:0;}
        .col-6.pull + .col-6 .slide-area {margin-right:0;}
        .text-area {
            padding: 40px 20px;
        }

        .hinnat, .henk {
            padding:40px 20px;
        }
        #partners ul li {width:100%; margin:5px;}
        #nav ul {
            position:absolute;
            left:0;
            right:0;
            top:50%;
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        #nav ul li a {text-align:center;display:block;}
        #nav ul li {width:100%;margin:0 !important;}
    }
    @media (max-width:900px) {
        #main-content .col-6, #pienryhmat .col-6, #crew .col-6, #hinnasto .col-6 {
            width:100%;
        }
    }
	@media (max-width:800px) {
		.countdown h3 {
			font-size:24px;
			line-height:30px;
			margin-bottom:10px;
		}
		.countdown {
			font-size:13px;
			line-height:13px;
			bottom:30px;
			width:400px;
		}
		.countdown .area {
			display:inline-block;
			width:70px;
		}
		.countdown .num {
			font-weight:900;
			font-size:50px;
			line-height:50px;
		}
		h4 {margin-top:50px;}
		.bigX {
			height:50vh;
			width:50vh;
		}
		.bigX:before {
			height:20px;
			margin-top:-10px;
		}
		.bigX:after {
			margin-left: -10px;
			width:20px;
		}
		.boxiLogo {top:100px;}
		.boxiLogo img {width:100px;}

        #hinnasto .col-4 {width:100%;}
        
        .hinnat {
            padding:20px;
        }
		 #hinnasto h3 {text-align:left;}
        #crew .col-4 {width:100%;}
	}
	@media (max-width:600px) {
		.bigText h2 {
	    		font-size:40px;
	    		line-height:35px;
	    	}
	    	.bigX:before {
			height:16px;
			margin-top:-8px;
		}
		.bigX:after {
			margin-left: -8px;
			width:16px;
		}
        .mobile-opener {position:fixed;
            top:30px;
            right:30px;
            background:#ed1c24;
            width:50px;
            height:50px;
        }
		.button-lines {padding:10px 10px;margin-top:5px;}
		.m-line {
            background:#fff;
            height:4px;
            width:100%;
            margin-top:4px;
        }

        #early .early p {font-size:20px;margin:0;line-height:22px;}
        .hinnat .early {padding:20px;}
        .hinnat .early h3 {font-size:24px; line-height:26px; margin-bottom:20px;}

        .m-line.line1 {margin-top:0;}
        h1, h2 {font-size:30px; line-height:35px;}
        h3 {font-size:16px;}
        .text-area {padding:30px 0px;}
        body {font-size:16px; line-height:23px;}
	    #partners .col-6 {width:100%;padding-bottom:30px;}
        #partners ul {padding:10px 0;}
        #sijainti li {font-size:18px;}
        #sijainti li strong {
            font-size: 35px;
            line-height:45px;
        }
        .yhteydet .col-6:nth-child(1) a {text-align:center;}

        .yhteydet .col-6:nth-child(2) a {text-align:center;}
        .yhteydet .col-6 {width:100%;}

	}
	@media (max-width:420px) {
		.bigX {
			height:35vh;
			width:35vh;
		}

        #sijainti li {
            width:100%;
            margin-bottom:20px;
        }
		.lineVert {
			top:30px;
			bottom:30px;
			width:3px;
		}
		.lineVert.lineLeft {
			left:5px;
		}
		.lineVert.lineRight {
			right:5px;
		}
        a.but {font-size:16px;}
	
		.lineHor {
			left:30px;
			right:30px;
			height:3px;
		}
		.lineHor.lineTop {
			top:5px;
		}
		.lineHor.lineBottom {
			bottom:5px;
		}
        .hinnat ul.hinta-list li, #sijainti li {
            font-size:16px;
        }
        .countdown h3 {
    font-size: 20px;
}
		.bigText.noshow {
	    		left:30px;
	    		text-align:left;
	    	}
	    	.bigText.showup {
	    		right:30px;
	    		text-align:right;
	    	}
	    	h4 {margin-top:20px;}
	    	.countdown {bottom:50px;}
	    	.countdown .area {
			width:60px;
		}
		.countdown .num {
			font-size:40px;
			line-height:40px;
		}
		.popup-wrap {
		    width:90%;
		    -moz-box-sizing: border-box;
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		    height:auto;
		}
		.popup ol {width:100%;}
        .hinnat h3 {font-size:40px;}
        .hinnat ul li {font-size:16px;line-height:30px;}
	}