html,body {background:#fff;padding:0px;margin:0px;font-family: neue-haas-grotesk-display, sans-serif, "Helvetica Neue", sans-serif;}

.headerTitle {padding-left:36px;}
.headerTitle h1 {font-size: 6.5vw;line-height: 1.1;margin-bottom:0px;padding-right:36px;}
.headerTitle p {font-size: 3vw;line-height: 1.5;margin-top:0px;padding-right:36px;}
.headerFooter p {font-size: 1.5vw;text-align:center;margin:0px;line-height:1.2;}
h2 {font-size: 5vw;line-height: 1.1;padding-right:36px;margin-bottom: 18px;}
h3 {padding-right:36px;}
p {font-size: 1.5vw;line-height: 1.4;}
a {text-decoration:none;color:#000;}
a:hover {text-decoration:underline;color:#000;}

.hihat .contentHolder.headerTitle {text-align: center;}
.hihat .contentHolder.headerTitle h2 {font-size: 6.5vw;line-height: 1.1;margin:0px;padding:0px;}
.hihat .headerTitle.dark p {color: #fff;font-size: 2vw;margin:0px;padding:0px;}


/* video basics */
/*
.fullHeight.youtube.active {
    height: auto !important;
    border-top: 1px solid #fff;
}
.fullHeight.youtube > .sectionHolder {
    width: 100% !important;
    margin: 0px !important;
}
.fullHeight.youtube > .sectionHolder .contentHolder.cover {
    margin: 0px !important;
    width: 100% !important;
}
*/
.desktopVid {display:block;}
.mobileVid {display:none;}

.videoHolder {width:100%;margin:0px;}

.videoHolder.desktopVid {width: 80%;margin: 0px auto;}
.videoHolder.mobileVid {width: 90%;margin: 0px auto;}

.videoHolder video {width: 100%;height: auto;}



/* arrows */
a.arrow {
	display:block;width:60%;aspect-ratio:1/1;
    background-color: #fc4703!important;
    background-image:url("../media/Front_bigarrow-04.svg");
	background-repeat:no-repeat;
	background-size:66%;
	background-position: center center;
	margin-top:0px;margin-bottom:0px;
	transition:0.3s;
}
a.arrow.up {transform:rotate(180deg);}
a.arrow:hover {text-decoration:none;background-position: center bottom;}

.col_1-1 .contentHolder, .col_1-2 .contentHolder, .col_1-3 .contentHolder {
	display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
	position:relative;
}



.banner {position:fixed;top:0px;width:72px;height:100%;z-index:10;background:#fff;}
.banner.left {left:0px;border-right:1px solid #fc4703;}
.banner.right {right:0px;border-left:1px solid #fc4703;}

.fullHeight {
    width: 100%;
    height: 100vh;
    transition: 0.3s;
    z-index: 4;
    padding: 0px;
    display: block;
    position: relative;
}
.fullHeight.firstSlide {height: 120vh;}

.fullHeight > .sectionHolder {
	border-left:1px solid #fc4703;
	border-right:1px solid #fc4703;
	width: calc(100% - 146px);
	height:100%;
	margin:0px 72px;
	position:relative;
}
.fullHeight.bg-color {background:#fff;}
.fullHeight.bg-color > .sectionHolder {background:#fc4703;border-left:1px solid #fff;border-right:1px solid #fff;}
.fullHeight.fullWidth.bg-color {z-index:11;background:#fc4703;}


.contentHolder {margin:9px;width:calc(100% - 36px);height:calc(100% - 36px);}

/* COLUMN RULES */
.row .col_1-1 {display:flex;flex-basis: 100%;}
.row .col_2-3 {display:flex;flex-basis: 66.6%;}
.row .col_1-3 {display:flex;flex-basis: 33.3%;}


/* HEADER LAYOUT */
.fullHeight > .sectionHolder.headerHolder {display:flex;flex-direction:column;height:100%;}
.fullHeight > .sectionHolder.headerHolder .row {display:flex;width:100%;}
.fullHeight > .sectionHolder.headerHolder .row.top {flex: 1;}
.fullHeight > .sectionHolder.headerHolder .row.middle {flex: 0 0 50%;}
.fullHeight > .sectionHolder.headerHolder .row.bottom {flex: 0 0 auto;height: 100px;}


/* HIHAT LAYOUT */
.fullHeight.hihat > .sectionHolder {display:flex;flex-direction:column;height:100%;}
.fullHeight.hihat > .sectionHolder .row {display:flex;width:100%;}
.fullHeight.hihat > .sectionHolder .row.top {flex: 1;}
.fullHeight.hihat > .sectionHolder .row.bottom {flex: 0 0 auto;height: 200px;}

/* YOUTUBE LAYOUT */
.fullHeight.youtube {
	background-image: url("../media/valkea-kollaasi.webp");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
.fullHeight.youtube > .sectionHolder {display:flex;justify-content:center;align-items:center;background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,1) 100%);}
.fullHeight.youtube > .sectionHolder > .contentHolder {text-align:center;height:auto;}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' -25, 'opsz' 40;
    font-size: 20vw;
    color: #fc4703;
    transition: 0.2s;
    background: #fff;
    border-radius: 100%;
}
.material-symbols-outlined:hover {cursor:pointer;transform:scale(1.1);filter:brightness(1.1);}
		

/* PERSONEL LAYOUT */
.fullHeight.contact > .sectionHolder {display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,0.5);}
.fullHeight.contact > .sectionHolder > .contentHolder {text-align:left;height:auto;}

/* PERSONEL */
ul.personel {list-style: none!important;padding: 0px!important;margin-left: -72px;margin-right: -72px;}
ul.personel li {padding: 18px 72px;border-top:1px solid #fc4703;position:relative;}
ul.personel li:last-child {border-bottom:1px solid #fc4703;}
ul.personel li h4 {font-size: 3vw;font-weight: 100;margin-top: 0px;margin-bottom:0px;}
ul.personel li h4 span.title {font-size: 66%;}
ul.personel li h4 span {width: auto;display: inline-block;min-width: 40%;}
ul.personel li h4 .cta {
	border:1px solid #fc4703 !important;
	padding:10px 72px 10px 12px;
	border-radius:100px;
	color:#000!important;
	text-decoration:none;
	text-transform:uppercase;
	font-size:16px;
	vertical-align:middle;
	position:absolute;
	right:72px;
	white-space: nowrap;
	font-weight:400;
	transition:0.5s;
}
ul.personel li h4 .cta:hover {color:#fff!important;background:#fc4703;padding: 10px 42px 10px 42px;}
ul.personel li h4 .cta:after {
	content:'';
	transform:rotate(90deg);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    background-color: #fc4703!important;
    background-image:url("../media/Front_bigarrow-04.svg");
	background-repeat:no-repeat;
	background-size:60%;
	background-position: center center;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 5px;
    right: 5px;
    transition: 0.5s;
    text-align: center;
    line-height: 30px;
}
ul.personel li h4 .cta:hover:after {color: #fff;right: calc(100% - 35px);transform:rotate(-90deg);}


/* FOOTER LAYOUT */
.fullHeight.footer > .sectionHolder {display:flex;flex-direction:column;height:100%;}
.fullHeight.footer > .sectionHolder .row {display:flex;width:100%;}
.fullHeight.footer > .sectionHolder .row.top {flex: 1;}
.fullHeight.footer > .sectionHolder .row.middle {flex: 0 0 50%;}
.fullHeight.footer > .sectionHolder .row.bottom {flex: 0 0 auto;height: 100px;}

.invertFilter {filter:brightness(0) invert(1);width:95%;margin:0px auto;}

/* HORIZONAL ANIMATIONS */
.animationHolder .col_1-2 {flex: 0 0 50%;}

.horizonalHolder {
	overflow:hidden;
	position:relative;
}
.horizonalHolder .animationHolder {
	display:flex;flex-direction:row;
	width: calc(100% - 144px);
	height:100%;
	transition:left 1.5s, opacity 0.5s;
	opacity:0;
	position:fixed;
	top:0px;
	left:100%;
	z-index:2;
	margin: 0px 72px;
}
.horizonalHolder .animationHolder .col_1-2 {flex: 0 0 50%;}

.horizonalHolder.active .animationHolder {left:0%;opacity:1;z-index:3;}
.horizonalHolder.prev-class .animationHolder {left:-100%;opacity:0;z-index:2;}
.horizonalHolder.next-class .animationHolder {left:100%;opacity:0;z-index:1;}

.horizonalHolder.firstSlide .animationHolder, .horizonalHolder.lastSlide .animationHolder {left: 0%;}
.horizonalHolder.firstSlide.prev-class .animationHolder {left: -100%;}
.horizonalHolder.lastSlide.next-class .animationHolder {left: 100%;}


/* MEDIA STYLES */
.contentHolder.video {pointer-events:none;}
.contentHolder.video video {width:100%;height:100%;max-height:calc(100% - 144px);object-fit:contain;pointer-events:none;}

/* LIGHTBOX STYLES */
.popupContainer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:1000;
}
.popupContainer .curtain {position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(255,255,255,0.5);z-index:1001;transition:0.5s;}
.popupContainer.visible {backdrop-filter: blur(10px);}
.popupContainer .curtain:hover {cursor:pointer;}
.popupContainer .popupHolder {width:40%;z-index: 1003;border:10px solid #fff;box-shadow:0px 10px 20px rgba(0,0,0,0.2);transition:0.3s;}
.popupContainer.visible .popupHolder {width:66.6%;z-index: 1003;border:10px solid #fff;box-shadow:0px 10px 20px rgba(0,0,0,0.2);position:relative;}
.popupContainer .popupHolder .youtubeEmbed {width:100%;height:auto;object-fit: contain;z-index:1002;aspect-ratio:16/9;margin:0px;padding:0px;background:#fff;}
.popupContainer .popupHolder .close {
	position:absolute;top:-30px;right:-30px;width:60px;height:60px;border-radius:100%;transition:0.2s;
	background-color:#fc4703;color:#fff;border:4px solid #fff;box-shadow:0px 0px 10px rgba(0,0,0,0.5);
	background-image:url("../media/close_icon.png");background-position:center center;background-repeat:no-repeat;background-size:50%;
}
.popupContainer .popupHolder .close:hover {transform:scale(1.1) rotate(180deg);filter:brightness(0.9);cursor:pointer;}
.popupContainer .popupHolder .close:active {transform:scale(0.9);filter:brightness(0.8);}


/* NAVIGATION BAR */
.navigation {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 72px;
    z-index: 999;
    background: #fff;
    border-bottom: 1px solid #fc4703;
	transition:0.5s;
}
.navigation.active {border-bottom:1px solid #fff;top:0px!important;}
.navigation img.logo {
    width: auto;
    height: 90%;
	z-index:999;
	display:none;
}
.navigation a.menuLink {
    width: 50%;
	max-width:300px;
    height: 100%;
    display: block;
    background-image: url(../media/Design-Valkea-logo_BL.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}
.navigation.fixed a.menuLink {
    background-image: url(../media/favicon/android-chrome-256x256.png);
    background-repeat: no-repeat;
    background-position: 10px 35%;
    background-size: auto 85%;
}
.navigation .mobile-menu {
	position:absolute;top:0px;right:0px;
	align-items: center;
	justify-content:center;
    align-self: stretch;
    display: flex;
	transition: .3s;
	line-height: 0px;
	cursor: pointer;
    width: 72px;
    height: 72px;
	z-index:999;
}
.navigation .mobile-menu .lines {
	border-radius: 0px;
    height: 5px;
	display:inline-block;
	width:20px;
	position: relative;
    vertical-align: middle;
}
.navigation .mobile-menu .lines:before {top:4px;background:#fc4703 !important;border-radius:0px;height:5px;width:20px;display:inline-block;}
.navigation .mobile-menu .lines:after {top:-4px;background:#fc4703 !important;border-radius:0px;height:5px;width:20px;display:inline-block;}
.mobile-menu .lines:before, .mobile-menu .lines:after, .mobile-menu .lines > span {
    content: '';
    left: 0;
    position: absolute;
    transition: top 0.3s 0.6s ease-in-out, transform 0.3s ease-in-out;
    transform-origin: 10px center;
}
.mobile-menu.close .lines:before, .mobile-menu.close .lines:after {
    transition: top 0.3s ease-in-out, transform 0.3s 0.5s ease-in-out;
    top: 0;
}
.navigation .mobile-menu.close .lines:before {transform: rotate3d(0, 0, 1, 45deg);}
.navigation .mobile-menu.close .lines:after {transform: rotate3d(0, 0, 1, -45deg);}

/* menu contents */
.menuHolder {
	position:fixed;top:0px;left:0px;
	width:100%;height:100%;
	background:rgba(255,255,255,1);z-index:998;transition:0s;
	display:flex;align-content: center;justify-content: center;flex-wrap: wrap;
}

.menuHolder .nav {list-style:none;font-size: 4.5vw;width:80%;position:relative;}
.menuHolder .nav li {list-style:none;font-size: 4.5vw;width:80%;position:relative;font-weight:600;}
.nav a.menuLink {display:block;position:relative;}
.nav a.menuLink:hover {text-decoration:none;color:#fc4703!important;}


/* RESPONSIVE RULES */

/* Tablet (landscape) */
@media only screen  and (max-width: 1024px) and (orientation: landscape) {
    /* Lisää tyylit tänne */
}

/* Tablet (portrait) */
@media only screen and (max-width: 1400px) and (orientation: portrait) {
	
	.desktopVid {display:none;}
	.mobileVid {display:block;}
	
	.fullHeight > .sectionHolder {width: calc(100% - 66px);margin: 0px 32px;}
	.banner {width: 32px;}
	
    .horizonalHolder .animationHolder {flex-direction:column;width: calc(100% - 76px);margin: 0px 32px;justify-content: center;}
	.horizonalHolder .animationHolder .col_1-2:first-child {flex:0 0 30%;}
	.horizonalHolder .animationHolder .col_1-2:last-child {flex:0 0 70;}
	.col_1-2:first-child .contentHolder {justify-content: flex-end;}
	.col_1-2:last-child .contentHolder {justify-content: flex-start;}
	.video.contentHolder {width: calc(80% - 36px);margin:0px auto;}
	.parallax {margin: 0px 18px;}
	
	ul.personel {padding: 0px 18px !important;margin-left: -36px;margin-right: -36px;}
	ul.personel li {padding: 18px 36px;}
	ul.personel li h4 .cta {right: 32px;}
	
	.headerTitle h1 {font-size: 6.5vw;}
	.headerTitle p {font-size: 3vw;}
	.headerFooter p {font-size: 1.5vw;}
	h2 {font-size: 6vw;}
	h3 {}
	p {font-size: 2.5vw;}
	
}

/* Phone (landscape) */
@media only screen and (max-width: 767px) and (orientation: landscape) {
	
	.fullHeight > .sectionHolder.headerHolder .row.bottom {align-content: center;flex-wrap: nowrap;align-items: center;}
	
	.fullHeight > .sectionHolder {width: calc(100% - 66px);margin: 0px 32px;}
	.banner {width: 32px;}
    .horizonalHolder .animationHolder {width: calc(100% - 76px);margin: 0px 32px;justify-content: center;}
	
	.fullHeight > .sectionHolder.headerHolder .row.bottom {height: 50px;}
	
	.headerTitle h1 {font-size: 5.5vw;}
	.headerTitle p {font-size: 2.5vw;}
	
	h2 {font-size: 4vw;}
	
	.navigation {position: absolute;}
	.menuHolder .nav li {font-size: 8.5vw;}
	
	.fullHeight.hihat > .sectionHolder .row.bottom {height: 100px;}
	.hihat .contentHolder, .hihat .contentHolder p {padding: 0px !important;}
	
	.fullHeight.footer > .sectionHolder .row.middle {flex: 0 0 40%;}
	.fullHeight.footer > .sectionHolder .row.bottom {height: auto;}
    .row.bottom .col_1-3 {flex-basis: 33.3%;text-align:center;}
    .row.bottom .col_1-3 .contentHolder p {padding:0px;}
	
	ul.personel {margin-left: -32px;margin-right: -32px;}
	ul.personel li {padding: 9px 60px;}
	ul.personel li h4 {font-size: 2.5vw;}
	ul.personel li h4 .cta {font-size: 16px;padding: 6px 72px 6px 12px;top: 4px;right: 60px;}
	ul.personel li h4 .cta:after {width: 28px;height: 28px;top: 2px;right: 2px;}
	
}


/* Phone (portrait) */
@media only screen and (max-width: 600px) and (orientation: portrait) {
	
	.desktopVid {display:none;}
	.mobileVid {display:block;}
	
	.navigation {position: absolute;}
	
	.contentHolder {height: auto;}
	.headerTitle {padding-left: 9px;}
	.row.middle .col_1-3, .row.middle .col_2-3 {align-items: flex-end;}
	.row.middle .col_1-3, .row.top .col_1-3 {flex-basis: 20%;justify-content: center;} 
	.row.middle .col_2-3, .row.top .col_2-3 {flex-basis: 80%;}
	a.arrow {width: 100%;background-size: 90%;}
	
	.fullHeight.footer > .sectionHolder .row.bottom {flex-direction: column;}
	.fullHeight.footer > .sectionHolder .row.bottom .col_1-3 {display: flex;flex-basis: 33.3%;justify-content: center;}
	.fullHeight.footer > .sectionHolder .row.bottom .contentHolder {margin:0px;padding:0px;}
	
	.headerTitle h1 {font-size: 9vw;}
	.headerTitle p {font-size: 6vw;padding-right:0px;line-height: 1.1;}
	.headerFooter p {font-size: 3vw;padding-right:0px;}
	.hihat .headerTitle.dark p {font-size: 4vw;}
	
	.fullHeight > .sectionHolder {width: calc(100% - 38px);margin: 0px 18px;}
	.banner {width: 18px;}
	
    .horizonalHolder .animationHolder {flex-direction:column;width: calc(100% - 32px);margin: 0px 16px;justify-content: center;}
	.horizonalHolder .animationHolder .col_1-2:first-child {flex:0 0 40%;}
	.horizonalHolder .animationHolder .col_1-2:last-child {flex:0 0 50;}
	.video.contentHolder {width: calc(100% - 18px);margin:0px auto;}
	
	.hihat .contentHolder.headerTitle h2 {font-size: 9.5vw;}
	
	.contentHolder.video video {max-height: calc(100% - 72px);}
	
	.popupContainer.visible .popupHolder {width: 85%;border: 5px solid #fff;}
    .popupContainer .popupHolder .close {top: -20px;right: -20px;width: 30px;height: 30px;}
	
	.navigation img.logo {height: 66%;margin-top: 3%;}
	.menuHolder .nav li {font-size: 8.5vw;}
	
	.fullHeight > .sectionHolder.headerHolder .row.bottom {height:150px;}
	
	h2 {font-size: 7vw;}
	h3 {}
	p {font-size: 4vw;}
	
	.menuHolder .nav li {width: 90%;}
	
	ul.personel li h4 span {width: auto;display: block;min-width: 40%;font-size:6vw;line-height:1.1;}
	ul.personel li h4 span.title {font-size: 4vw;}
	ul.personel li h4 .cta {position:relative;top:auto;right: auto;margin: 18px 0px 9px;display:inline-block;}
	
}