@keyframes bli {
	0%{
	background-color: inherit;
	}
	15%{
	background-color: var(--color3);
	color: var(--color1);
	border:1px solid var(--color1);
	}
	30%{
	background-color: var(--color1);
	color: var(--color5);
	}
	45%{
	background-color: var(--color3);
	color: var(--color1);
	border:1px solid var(--color1);
	}
	60%{
	background-color: var(--color1);
	color: var(--color5);
	}
	75%{
	background-color: var(--color3);
	color: var(--color1);
	border:1px solid var(--color1);
	}
	100%{
	background-color: inherit;
	}
}

.blink{
	animation-name: bli;
	animation-duration: 2s;
	animation-iteration-count: 2;
	animation-timing-function: linear;
}

/* width */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--color8); 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color1); 
  border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color9); 
}


#haku_wrap::-webkit-scrollbar {
  width: 0px;
}

/* Track */
#haku_wrap::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(255,255,255,0.0); 
  border-radius: 3px;
}
 
/* Handle */
#haku_wrap::-webkit-scrollbar-thumb {
  background: rgba(253,150,16,0.0); 
  border-radius: 3px;
}

/* Handle on hover */
#haku_wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(246,141,0,0.0); 
}

html{
	padding: 0;
	margin: 0;
	width:100%;
	height: 100%;
    font-family: Rubik;
}

body{
    padding: 0;
    margin: 0;
    background-color: var(--color1);
    font-family: Rubik;
	font-weight: 400;
}

.btn00{
	position: relative;
	display:inline-block;
	width:auto;
	height:50px;
	line-height: 50px;
	font-size:18px;
	box-sizing: border-box;
	padding:0px 20px 0px 60px;
	font-weight: 400;
	cursor: pointer;
	font-family: Rubik;
	margin:20px auto 20px 0px;
	background-color:var(--color8);
	border-radius: 50px;
	transition:all 0.3s;
}

.btn00:hover{
	transform: scale(1.03);
}

.btn00:before{
	position: absolute;
	top:0px;
	left:12px;
	bottom:0px;
	width:35px;
	height: 35px;
	content:"";
	margin: auto 0px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("/imgs/Icon feather-arrow-left-circle.svg");
}


#popup{
	position:fixed;
	bottom:0px; 
	left:0px;
	width:100%;
	height:10vh;
	min-height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transform:translateY(20vh);
 	opacity: 0.0;
	font-size:25px;
	font-family: Rubik;
	font-weight: 500;
	background: rgba(7,25,74,0.33) 0% 0% no-repeat padding-box;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	color:white;
	z-index: 9090;
	animation: slide 5s;
}

@keyframes slide {
	0%{ transform:translateY(20vh); opacity: 0.0; }
	10%{ transform:translateY(0vh); opacity: 1.0;}
	90%{ transform:translateY(0vh); opacity: 1.0; }
	100%{ transform:translateY(20vh); opacity: 0.0; }
}

#splash {
	position:fixed;
	display: flex;
	top:0px;
	left:0px;
	width: 100%;
	height:100vh;
	height:100lvh;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--color2);
	z-index: 1000;
	opacity: 1.0;
	transition: all 1.0s;
}

#topbar{
	display: block;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	width: 100%;
	height:120px;
	background-color: var(--color2);
	z-index: 998;
}

#topbar #smallscreenmenuopt{ display:none; }

#topbar #logo{
	position:absolute;
	top:0px;
	bottom:0px;
	left: 10px;
	width:180px;
	height:auto;
	transform: translateX(-120px);
	margin: auto;
	clip-path: inset(0% 0% 0% 65%);

}


#topbar .btn_round{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width:58px;
	height:58px;
	background-color:var(--color5);
	margin: auto 15px;
	cursor: pointer;
	border-radius: 33px;
	transition: all 0.5s;
	overflow: visible;
}

#topbar .btn_round:hover:after{
	position: absolute;
	top:calc( 100% + 6px );
	content: attr(data-title);
	width:auto;
	padding:0px 15px;
	height:28px;
	font-size:12px;
	line-height:28px;
	background-color:var(--color6);
	color:var(--color5);
	border-radius: 5px;
}

#topbar .btn_round:hover{
	transform: scale(1.1);
}

#topbar .btn_round img{ width:35%; height:35%;}

#connecting_tv_bgr{
	display: none;
	position:fixed;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(226,220,220,0.01);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 9950;
}

#connecting_menu{ display:none; }

#connecting_menu:checked ~ #connecting_tv_bgr{
	display: block;
}

#connecting_tv {
	display: none;
	position:fixed;
	top:60px;
	right:10px;
	width: calc( 100% - 20px );
	height: auto;
	margin: auto;
	padding:0px;
	box-sizing: border-box;
	z-index: 9951;
}

#connecting_menu:checked ~ #connecting_tv{
	display: block;
}

#connecting_tv input[type="radio"]{
	display: none;
}

#connecting_tv .slide{
	display: none;
	width:100%;
	height: auto;
	margin: 5px auto 15px auto;
	background-color: var(--color15);
	border:1px solid var(--color2);
	border-radius: 24px;
	padding:20px;
	box-sizing: border-box;
	box-shadow: 0px 3px 40px var(--color10);
	z-index: 555;
}

#connecting_tv #i1:checked ~ .step1{ display:block; }
#connecting_tv #i2:checked ~ .step2{ display:block; }
#connecting_tv #i3:checked ~ .step3{ display:block; }
#connecting_tv #i4:checked ~ .step4{ display:block; }

#connecting_tv .slide h5 {
	font-size:20px;
	font-weight: 500;
	padding: 0px 50px 0px 0px;
	line-height: 35px;
	margin: 0px;
}


#connecting_tv .slide div,
#connecting_tv .slide label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	width:100%;
	height:100px;
	background-color:var(--color9);
	border-radius: 50px;
	padding:0px 10px 0px 70px;
	box-sizing: border-box;
	margin:20px auto;
	transition: all 0.2s;
}


#connecting_tv .slide div:hover,
#connecting_tv .slide label:hover {
	transform:scale(1.03);
}

#connecting_tv .slide #step2backbtn:hover{
	transform:scale(1.00);
}

#view_1:checked ~ #connecting_tv .slide.step1 #no_cast{ background-color: var(--color3); }
#view_3:checked ~ #connecting_tv .slide.step1 #play_cast{ background-color: var(--color3); }
#view_4:checked ~ #connecting_tv .slide.step1 #tv_app_lab{ background-color: var(--color3); }


#connecting_tv .slide #btn_con_close{
	position:absolute;
	top:10px;
	right:20px;
	display: block;
	background-color:transparent;
	width:35px;
	height: 35px;
	padding: 0;
}

#connecting_tv .slide label#btn_con_close img{
	transform: rotate(45deg);
	left:0px;
	filter: invert(0);
}


#connecting_tv .slide div img,
#connecting_tv .slide label img {
	position: absolute;
	top:0px;
	bottom:0px;
	left:27px;
	width:30px;
	height:30px;
	filter: invert();
	margin: auto;
}

#connecting_tv .slide div p:nth-of-type(1),
#connecting_tv .slide label p:nth-of-type(1) {
	font-size:16px;
	line-height: 24px;
	font-weight: 500;
	margin:0px 0px 2px 0px;
	padding: 0;
}

#connecting_tv .slide div p:nth-of-type(2),
#connecting_tv .slide label p:nth-of-type(2) {
	font-size:12px;
	line-height: 17px;
	font-weight: 400;
	margin:0;
	padding: 0;
}

#connecting_tv .slide.step2 div#conwrap {
	position: relative;
	display: block;
	width:100%;
	height:60px;
	border-radius: 50px;
	overflow: hidden;
	background-color: var(--color6);
	margin:20px auto 0px auto;
}

#connecting_tv .slide.step2 #step2backbtn{
	display: block;
	position: inherit;
	margin: 0;
	padding: 0px;
	height: 40px;
	filter: invert();
	background-color: transparent;
}

#connecting_tv .slide.step2 #step2backbtn img{
	position: inherit;
	margin: 0;
	top:inherit; bottom: inherit;
}

#connecting_tv .slide.step2 p {
	line-height: 32px;
}

#connecting_tv .slide div input#codeconnect {
	position: absolute;
    top:0px;
    left:0px;
	display: block;
	width: calc( 100% - 140px );
	height:60px;
	line-height: 60px;
	color: var(--color5);
	-webkit-appearance:none;
	border:0;
	padding:0px 40px;
	box-sizing: border-box;
	font-size:18px;
	}


#connecting_tv .slide.step2 div,
#connecting_tv .slide.step2 label {
	display: inline-block;
	position: absolute;
	top:0px;
	bottom:0px; 
	margin:auto 0px;
	right: 10px;
	width:auto;
	height:50px;
	line-height: 50px;
	border-radius: 50px;
	background-color: var(--color3);
	color: var(--color4);
	-webkit-appearance:none;
	border:0;
	padding:0px 20px;
	box-sizing: border-box;
	font-size:15px;
	}

#filteri{
	display: inline-block;
	position:fixed;
	top:-120px;
	left:0px;
	width: 100%;
	height:auto;
	overflow-y:hidden;
	overflow-x: auto;
	background-color: var(--color5);
	z-index: 505;
	transition: all 0.3s;
}

#suodatin:checked ~ #filteri{
	top:120px;
}

#filteri #rivi1{
	position: relative;
	width:100%;
	margin:0px auto;
	white-space: nowrap;
	padding:15px 10px 15px 65px;
	box-sizing: border-box;
}

#filteri #rivi1:before{
	position:absolute;
	top:0px;
	left:10px;
	bottom:0px;
	display: inline-block;
	width: auto;
	height:25px;
	line-height: 25px;
	margin:auto 0px;
	font-family: Aborm;
	font-size: 22px;
	font-weight: 500;
	color: var(--color8);
	content:"Kieli";
}

#filteri #rivi1 .f_btn{
	display: inline-block;
	width:auto;
	height:42px;
	line-height: 42px;
	font-family: Rubik;
	font-weight: 400;
	font-size:18px;
	box-sizing: border-box;
	padding: 0px 15px;
	margin:0px 7px;
	color: var(--color2);
	background-color: var(--color8);
	border-radius: 30px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	
}

#filteri #rivi1 input[type="checkbox"],
#filteri #rivi1 input[type="radio"]{
	display: none;
}

#filteri #rivi1 input[type="checkbox"]:checked + .f_btn,
#filteri #rivi1 input[type="radio"]:checked + .f_btn{
	background-color: var(--color3);
	color:var(--color4);
}

#player_wrap{
	position:fixed;
	display: none;
	width:100%;	
	height: calc( 100% - 180px );
	top: 180px;	
	left:0px;
	right:0px;
	bottom:0px;
	box-sizing: border-box;
	white-space: nowrap;
	transition: top 0.4s;
	z-index: 100;
}

#suodatin:checked ~ #hori1_menu {
	top:192px;
}

#suodatin:checked ~ #player_wrap {
	top: 245px;
	height: calc( 100% - 31px );
}

#player_wrap.mobiexp {
	top:0px;
	height: calc( 100% - 0px );
	z-index: 2345;
	padding-top:20px;
	background-color: var(--color1);
}

#player_wrap #haku_wrap #no_user_label,
#player_wrap #haku_wrap #free_user_label{
	position: relative;
	display: none;
	width: 96%;
	max-width: 850px;
	margin:0px auto 40px auto;
	border-radius: 13px;
	padding: 25px 30px 25px 30px;
	box-sizing: border-box;
	background-color: var(--color8);
}

#player_wrap #haku_wrap #no_user_label h5,
#player_wrap #haku_wrap #free_user_label h5{
	width: 100%;
	margin: 0;
	font-size: 20px;
	font-weight: 500;
}

#player_wrap #haku_wrap #no_user_label p,
#player_wrap #haku_wrap #free_user_label p{
	width: 100%;
	height: auto;
	font-size: 16px;
	font-weight: 400;
	white-space: normal;
	line-height: 19px;
	margin: 6px 0px;
}

#player_wrap #haku_wrap #no_user_label .btn,
#player_wrap #haku_wrap #free_user_label .btn{
	display: inline-block;
	width: auto;
	height: 42px;
	line-height: 42px;
	font-size: 17px;
	background-color: var(--color3);
	color: var(--color1);
	cursor: pointer;
	border-radius: 20px;
	padding: 0px 15px;
	margin: 15px 0px;
	transition: all 0.2s;
}

#player_wrap #haku_wrap #no_user_label .btn:hover,
#player_wrap #haku_wrap #free_user_label .btn:hover{
	transform: scale(1.05);
}

#player_wrap #haku_wrap{
	display:block;
	width:100%;
	height:100%;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: auto;
	padding: 0px 0px;
}

#player_wrap #haku_wrap #toprow {
	position: sticky;
	display: block;
	top:0px;
	width:94%;
	max-width: 810px;
	height:35px;
	margin:0px auto;
	padding: 0px 0px;
	box-sizing: border-box;
	background-color:var(--color1);
	z-index: 123;
}

#player_wrap #haku_wrap #toprow p{
	display: block;
	float:left;
	font-size:16px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	color:var(--color2);
}

#player_wrap #haku_wrap #toprow p:nth-of-type(1){width:50%; text-align: left;}
#player_wrap #haku_wrap #toprow p:nth-of-type(2){width: calc( 50% - 160px ); text-align: left;}
#player_wrap #haku_wrap #toprow p:nth-of-type(3){width:80px; text-align: right;}
#player_wrap #haku_wrap #toprow p:nth-of-type(4){width:80px; text-align: right;}

#player_wrap #haku_res{
	padding: 0px 20px;
	box-sizing: border-box;
}


#player_wrap #haku_res .loadmorebut {
	display: block;
	background-color: var(--color3);
	color: var(--color1);
	font-size:18px;
	line-height: 50px;
	height: 50px;
	font-weight: 400;
	border-radius: 30px;
	-webkit-user-select:none;
	user-select:none;
	box-sizing: border-box;
	padding: 0px 28px;
	margin: 20px auto;
	outline: none;
	border:0;
	cursor: pointer;
		
}


#omatlaulutlistaus{
	position:fixed;
	display: none;
	width:100%;
	height: calc( 100% - 140px);
	top:140px;
	left:0px;
	right:0px;
	bottom:0px;
	box-sizing: border-box;
	white-space: nowrap;
}

#suodatin:checked ~ #omatlaulutlistaus {
	top:220px;
	height: calc( 100% - 220px );
}


#omatlaulutlistaus #omatlaulutlistaus_wrap{
	display:block;
	width:100%;
	height:100%;
	box-sizing: border-box;
	margin: 0 auto;
	overflow-x: visible;
	overflow-y: auto;
	padding: 0px 0px;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top{
	position: relative;
	display: flex;
	width:85%;
	max-width: 810px;
	height:95px;
	background-color: var(--color9);
	border-radius: 100px;
	overflow: visible;
	margin: 15px auto 60px auto;
	transform: translateX(25px);
	box-sizing: border-box;
	align-items: start;
	justify-content: center;
	flex-direction: column;
	padding: 0px 0px 0px 110px;
	z-index: 234;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #omxo{ display: none; }

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top label{
	position: absolute;
	top:0px;
	bottom:0px;
	left:-50px;
	width:33px;
	height:33px;
	margin: auto;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #oxmolab {
	position: absolute;
	display: flex;
	justify-content: center;
	align-content: center;
	top:0px;
	bottom:0px;
	left: inherit;
	right:20px;
	width:45px;
	height:45px;
	margin: auto;
	background-color: rgba(217,217,217,1.00);
	clip-path: circle();
	transition: all 0.2s;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #oxmolab:hover {
		background-color: rgba(193,193,193,1.00);
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #pp_icon_wrap{
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top:0px;
	bottom:0px;
	left:9px;
	width:85px;
	height:85px;
	margin: auto;
	background-color: var(--color3);
	clip-path: circle();
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #pp_icon_wrap img {
	width: 60%;
	height: auto;
	margin: auto;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #pp_nimi{
	padding: 0;
	margin: 0;
	font-family: Aborm;
	text-transform: capitalize;
	font-weight: 500;
	font-size:24px;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #omatlaulut_top #pp_songs{
	padding: 0;
	margin: 0;
	font-size:14px;
	font-family: Rubik;
	font-weight: 400;
	
}


#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 {
	position: sticky;
	display: block;
	top:0px;
	width:94%;
	max-width: 810px;
	height:35px;
	margin:0px auto;
	padding: 0px 0px;
	box-sizing: border-box;
	z-index: 123;	
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 p{
	display: block;
	float:left;
	font-size:16px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	color:var(--color2);
}

#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 p:nth-of-type(1){width:50%; text-align: left;}
#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 p:nth-of-type(2){width: calc( 50% - 160px ); text-align: left;}
#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 p:nth-of-type(3){width:80px; text-align: right;}
#omatlaulutlistaus #omatlaulutlistaus_wrap #toprow2 p:nth-of-type(4){width:80px; text-align: right;}



#omatlaulutlistaus #omatlaulutlistaus_wrap #haku_res2 {
	padding: 0px 20px;
	box-sizing: border-box;	
	overflow: auto;
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap {
	display: none;
	position: absolute;
	top:55px;
	left: inherit;
	right:20px;
	bottom:inherit;
	width: 300px;
	height:auto;
	padding: 15px 30px;
	box-sizing: border-box;
	background-color:var(--color4);
	clip-path: none;
	border-radius: 10px;
}

#omatlaulutlistaus #omatlaulut_top #omxo:checked ~ label#omatlaulut_top_wrap_bgr {
	display: block;
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background: rgba(243,235,225,0.04) 0% 0% no-repeat padding-box;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 444;
}

#omatlaulutlistaus #omatlaulut_top #omxo:checked ~ div#omatlaulut_top_wrap {
	display: inline-block;
	z-index: 445;
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_rename_omatlaulut,
#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_remove_omatlaulut{
	display: block;
	position: relative;
	width: 100%;
	left:initial;
	top:initial;
	bottom:initial;
	height: auto;
	font-size:16px;
	padding:14px 0px;
	box-sizing: border-box;
	font-family: Rubik;
	font-weight: 400;
	color:var(--color2);
	clip-path: none;
	background-color: transparent;
	cursor: pointer;
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_remove_omatlaulut{
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_rename_omatlaulut{
	border-bottom:1px solid var(--color10);
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_remove_omatlaulut:after{
	position: absolute;
	top:0px;
	bottom:0px;
	right:10px;
	width:20px;
	height: 20px;
	content:url("/imgs/Icon awesome-trash.svg");
	filter: invert(1);
	margin:auto 0px;
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_rename_omatlaulut:after{
	position: absolute;
	top:0px;
	bottom:0px;
	right:10px;
	width:20px;
	height: 20px;
	content:url("/imgs/Icon feather-edit-3.svg");
	margin:auto 0px;
}

#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_rename_omatlaulut,
#omatlaulutlistaus #omatlaulut_top div#omatlaulut_top_wrap #btn_remove_omatlaulut{
	
}

#omat_listat_wrap{
	position:fixed;
	display: none;
	width:100%;
	height: calc( 100% - 170px);
	top:170px;
	left:0px;
	right:0px;
	bottom:0px;
	box-sizing: border-box;
	white-space: nowrap;
}

#suodatin:checked ~ #omat_listat_wrap {
	top:310px;
	height: calc( 100% - 310px );
}

#omat_listat_wrap h3{
	font-family:Aborm;
	font-size:35px;
	font-weight: 500;
	text-align: left;
	color:var(--color2);
}

#omat_listat_wrap #listat_wrap{
	display:none;
	width:91%;
	height:auto;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: auto;
	padding: 0px 0px;
}

#omat_listat_wrap #listat_lisays{
	display:none;
	width:90%;
	max-width: 810px;
	height:auto;
	box-sizing: border-box;
	margin: 30px auto;
	overflow: auto;
	border-radius: 15px;
	background-color:var(--color9);
	padding: 50px 20px;
}

#omat_listat_wrap #listat_lisays #icon_selector{
	white-space: nowrap;
	overflow-y: inherit;
	overflow-x: auto;
	margin:0px 0px 40px 0px;
	padding: 20px 0px 40px 0px;
}

#omat_listat_wrap #listat_lisays #icon_selector input[type="radio"]{
	display: none;
}

#omat_listat_wrap #listat_lisays #icon_selector label{
	position: relative;
	display: inline-flex;
	width:100px;
	height: 140px;
	background-color: #D3D1CA;
	border-radius: 90px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: translateY(5px) scale(0.97);
	transition: all 0.3s;
}

#omat_listat_wrap #listat_lisays #icon_selector label:hover{
	transform: translateY(-2px) scale(0.97);
}

#omat_listat_wrap #listat_lisays #icon_selector input[type="radio"]:checked + label{
	background-color: var(--color1);
	transform: translateY(-5px) scale(0.97);
}

#omat_listat_wrap #listat_lisays #icon_selector input[type="radio"]:checked + label:after{
	position: absolute;
	top: calc( 100% + 7px );
	content: "L";
	background-color:var(--color3);
	width:35px;
	height: 35px;
	line-height: 35px;
	font-size: 18px;
	transform: rotateY(180deg) rotateZ(-47deg) scale(0.7);
	text-align: center;
	clip-path: circle();
	color:var(--color1);
}

#omat_listat_wrap #listat_lisays #icon_selector label img{
	width:60px;
	height: 66px;
}

#omat_listat_wrap #listat_lisays button {
	width:100%;
	height: 60px;
	line-height: 60px;
	font-size:22px;
	text-align: center;
	border:0;
	padding: 0;
	margin: 10px auto;
	background-color: var(--color2);
	color:var(--color1);
	border-radius: 30px;
}

#omat_listat_wrap #listat_lisays label {
	display: block;
	margin: 20px auto;
	text-align: center;
}

#ol_listaus, #ol_lisays, #ol_muokkaus { display: none; }

#omat_listat_wrap #ol_listaus:checked ~ #listat_wrap{
		display:block;
}

#omat_listat_wrap #ol_muokkaus:checked ~ #listat_lisays,
#omat_listat_wrap #ol_lisays:checked ~ #listat_lisays{
		display:block;
}

#omat_listat_wrap #listat_lisays #btn_55,
#omat_listat_wrap #listat_lisays #btn_56{
	display:none;
}

#omat_listat_wrap #ol_lisays:checked ~  #listat_lisays #btn_56{ display: block; }
#omat_listat_wrap #ol_muokkaus:checked ~  #listat_lisays #btn_55{ display: block; }

#omat_listat_wrap #listat_lisays h4{
	font-family: Aborm;
	font-weight: 500;
	margin: 0;
	padding: 0;
	font-size:24px;
	line-height: 34px;
}

#omat_listat_wrap #listat_lisays input {
	font-family: Rubik;
	font-weight: 300;
	width:100%;
	height:80px;
	line-height: 80px;
	border-radius: 40px;
	box-sizing: border-box;
	padding: 0px 50px;
	border:1px solid var(--color2);
	margin: 15px 0px 50px 0px;
	outline: none;
	font-size:18px;
	background-color: transparent;
}

#omat_listat_wrap #listat_lisays input::placeholder{
	color:var(--color2);
}

#omat_listat_wrap #listat_wrap p {
	font-family:Rubik;
	font-size:24px;
	line-height: 28px;
	text-align: left;
	font-weight: 400;
	white-space: normal;
	color:var(--color2);
}

#omat_listat_wrap #listat_wrap #ooo_listat {
	display: inline-flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: center;
}


#omat_listat_wrap #listat_wrap #ooo_listat label.lista_wrap,
#omat_listat_wrap #listat_wrap #ooo_listat div.lista_wrap{
	display: inline-flex;
	width: max(190px, 24vw );
	height: calc( max(190px, 24vw ) * 1.7 );
	flex-direction: column;
	border-radius: 145px;
	padding: 35px 40px;
	vertical-align: top;
	margin: 5px 5px;
	justify-content: center;
	align-items: center;
	transform: scale(0.95);
	box-sizing: border-box;
	background-color:var(--color9);
	transition: all 0.3s;
}

#omat_listat_wrap #listat_wrap #ooo_listat label.lista_wrap{
	display: flex;
	flex-direction: row-reverse;
	width:90vw;
	height: calc( 90vw / 6 );
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap:hover{
	transform: scale(0.95) translateY(-3px);
	cursor: pointer;
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap img {
	width: 100%;
	height:auto;
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap img.plussign {
	width: 5vw;
	height: 5vw;
	margin: 0px 0px 0px 2vw;
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap h5 {
	width: auto;
	font-size:18px;
	line-height: 22px;
	font-family: Rubik;
	font-weight: 500;
	text-align: center;
	white-space: normal;
	margin:10px 2vw;
}

#omat_listat_wrap #listat_wrap #ooo_listat label.lista_wrap img {
}


#omat_listat_wrap #listat_wrap #ooo_listat label.lista_wrap h5 {
	font-size: 3vw;
}

#omat_listat_wrap #listat_wrap #ooo_listat .lista_wrap p {
	font-size:15px;
	line-height: 18px;
	font-family: Rubik;
	font-weight: 400;
	text-align: center;
	white-space: normal;
}

#omatili_wrap {
	position:fixed;
	display: none;
	width:100%;
	height: calc( 100% - 140px);
	top:140px;
	left:0px;
	right:0px;
	bottom:0px;
	box-sizing: border-box;
	white-space: nowrap;
	overflow-x: hidden;
	overflow-y: auto;
}

#omatili_wrap #omat_tiedot_wrap {
	display:block;
	width:90%;
	max-width: 810px;
	height:auto;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: auto;
	padding: 20px 0px 50px 0px;
}


#omatili_wrap #omat_tiedot_wrap button{
	display: inline-block;
	height: 42px;
	line-height: 42px;
	font-size:16px;
	font-family: Rubik;
	font-weight: 400;
	padding: 0px 25px;
	box-sizing: border-box;
	background-color: var(--color2);
	color: var(--color1);
	border-radius: 21px;
	outline: none;
	border:0;
}

#omatili_wrap #omat_tiedot_wrap h3{
	font-size:35px;
	line-height: 35px;
	font-family: Aborm;
	font-weight: 500;
}


#omatili_wrap #omat_tiedot_wrap .row {
	position: relative;
	display: block;
	width:100%;
	height:auto;
	margin:70px 0px 25px 0px;
	box-sizing: border-box;
}

#omatili_wrap #omat_tiedot_wrap .row p {
	font-family: Rubik;
	font-weight: 500;
	font-size: 20px;
	height:50px;
	margin: 10px 0px 0px 0px;
	padding: 0px 10px;
	box-sizing: border-box;
	line-height: 50px;
}

#omatili_wrap #omat_tiedot_wrap .row div {
	position: relative;
	font-family: Rubik;
	font-weight: 300;
	font-size: 18px;
	background-color:var(--color6);
	border-radius: 50px;
	width:100%;
	height:60px;
	box-sizing: border-box;
	line-height: 60px;
	margin: 5px 0px;
	padding: 0px 20px;
}

#omatili_wrap #omat_tiedot_wrap .row #oma_nimi_inp{
	display: inline-block;
	width: 100%;
	height: auto;
	padding: 0px;
	background-color: transparent;
}

#omatili_wrap #omat_tiedot_wrap .row #oma_nimi_inp #text_etunimi,
#omatili_wrap #omat_tiedot_wrap .row #oma_nimi_inp #text_sukunimi {
	display: block;
	width:100%;
	height: 60px;
	line-height: 60px;
	margin: 10px auto;
	border:0;
	outline:none;
	padding: 0px 25px;
	font-size: 18px;
	font-weight: 400;
	border-radius: 35px;
	box-sizing: border-box;
}

#omatili_wrap #omat_tiedot_wrap .row input#campaigncode_kentta {
	position: relative;
	font-family: Rubik;
	font-weight: 300;
	font-size: 20px;
	background-color:var(--color6);
	border-radius: 50px;
	width:100%;
	height:70px;
	line-height: 70px;
	border:0px;
	outline:none;
	box-sizing: border-box;
	padding: 0px 20px;
}

#omatili_wrap #omat_tiedot_wrap .row #logoutbtn,
#omatili_wrap #omat_tiedot_wrap .row .btn_right {
	display: inline-block;
	font-family: Rubik;
	font-weight: 300;
	font-size: 18px;
	background-color:var(--color3);
	color:var(--color4);
	border-radius: 50px;
	width:auto;
	height:55px;
	line-height: 55px;
	box-sizing: border-box;
	padding: 0px 25px;
	margin: 15px 0px 0px 0px;
	-webkit-user-select:none;
	user-select:none;
	cursor: pointer;
}

#omatili_wrap #omat_tiedot_wrap div#renews,
#omatili_wrap #omat_tiedot_wrap div#renews2,
#omatili_wrap #omat_tiedot_wrap div#renews3,
#omatili_wrap #omat_tiedot_wrap div#renews4  {
	position: relative;
	display: block;
	width:100%;
	height:auto;
	margin:30px 0px 5px 0px;
	border-bottom:1px solid rgba(201,201,201,1.00);
	padding: 0px 0px 30px 50%;
	box-sizing: border-box;
	text-align: right;
}

#omatili_wrap #omat_tiedot_wrap div#renews2,
#omatili_wrap #omat_tiedot_wrap div#renews3,
#omatili_wrap #omat_tiedot_wrap div#renews4 {
	border:0px solid transparent;
}

#omatili_wrap #omat_tiedot_wrap div#renews p,
#omatili_wrap #omat_tiedot_wrap div#renews3 p,
#omatili_wrap #omat_tiedot_wrap div#renews4 p{
	position: absolute;
	left:0px;
	width: calc( 100% - 175px );
	height:auto;
	margin:0;
	white-space: normal;
	line-height: 19px;
	text-align: left;
	font-size:14px;
}

#omatili_wrap #omat_tiedot_wrap div#renews input[type="radio"],
#omatili_wrap #omat_tiedot_wrap div#renews3 input[type="radio"]{
	display: none;
}

#omatili_wrap #omat_tiedot_wrap div#renews label,
#omatili_wrap #omat_tiedot_wrap div#renews2 div,
#omatili_wrap #omat_tiedot_wrap div#renews3 label,
#omatili_wrap #omat_tiedot_wrap div#renews4 div {
	display: inline-block;
	background-color:rgba(206,206,206,1.00);
	width:70px;
	height:38px;
	line-height: 38px;
	font-size:16px;
	margin:0px 4px;
	color:black;
	text-align: center;
	border-radius: 35px;
}

#omatili_wrap #omat_tiedot_wrap div#renews4 div,
#omatili_wrap #omat_tiedot_wrap div#renews2 div {
	padding: 0px 20px;
	width: auto;
}

#renew_on:checked ~ #renews2{ display:none; }
#renew_off:checked ~ #renews4{ display:none; }

#omatili_wrap #omat_tiedot_wrap div#renews input[type="radio"]:checked + label,
#omatili_wrap #omat_tiedot_wrap div#renews3 input[type="radio"]:checked + label,
#omatili_wrap #omat_tiedot_wrap div#renews4 input[type="radio"]:checked + label {
	background-color:var(--color3);
	color:var(--color4);
}


#omatili_wrap #omat_tiedot_wrap #addcard_wrap{
	display:none;
	width:100%;
	height: calc( 100% - 120px );
	position: fixed;
	top:120px;
	left:0px;
	z-index: 522;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background-color: var(--color1);
}

#omatili_wrap #omat_tiedot_wrap #addcard_wrap button { margin : 20px auto 15px auto; }


#omatili_wrap #omat_tiedot_wrap #gonna_addcard{ display: none; }

#omatili_wrap #omat_tiedot_wrap #gonna_addcard:checked ~ #addcard_wrap {
	display:flex;
}

#omatili_wrap #omat_tiedot_wrap #neworderbanner{
	position: relative;
	box-sizing: border-box;
	margin:100px auto 20px auto;
	border-radius: 20px;
	overflow: hidden;
	padding: 40px 5% 10px 5%;
	background-image: url('/imgs/Group 470.svg');
	background-attachment: scroll;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;	
}

#omatili_wrap #omat_tiedot_wrap #neworderbanner h3{
	width:100%;
	height: auto;
	font-size:25px;
	font-family: Rubik;
	font-weight: 500;
	line-height: 29px;
	margin:10px 0px;
	color: var(--color4);
}
#omatili_wrap #omat_tiedot_wrap #neworderbanner p{
	width:100%;
	height: auto;
	font-size:16px;
	font-weight: 400;
	white-space: normal;
	line-height: 24px;
	margin:20px 0px;
	color: var(--color4);
}
#omatili_wrap #omat_tiedot_wrap #neworderbanner button{
	margin: 40px auto;
	font-size: 20px;
	border-radius: 100px;
	height: 49px;
	line-height: 49px;
}

#topbar #hori2_menu {
	display:flex;
	position: absolute;
	top:0px;
	bottom:0px;
	left:70px;
	right:95px;
	width: calc( 100% - 165px );
	margin: auto;
	height:58px;
	overflow: hidden;
}

#topbar #hori2_menu fieldset {
	position: relative;
	display:inline-block;
	width:auto;
	flex-grow: 1;
	height:100%;
	margin:0;
	padding: 0;
	border: 0;
}

#topbar #hori2_menu fieldset .inputic:after{
	display: block;
	width: 40px;
	height: 100%;
	position: absolute;
	top:0px;
	bottom:0px;
	right:25px;
	font-size:28px;
	transform: rotate(97deg) translate(9px, 4px);
	content:"\260C";
	margin: auto 0px;
	color:var(--color2);
	z-index: 444;
}

#topbar #hori2_menu fieldset #haku{
	background-color: var(--color1);
	width:100%;
	height:100%;
	max-height: 55px;
	box-sizing: border-box;
	padding: 0px 25px;
	margin:0;
	font-family: Aborm;
	color: var(--color2);
	font-size:18px;
	border-radius: 40px;
	outline: none;
	border: 0;
	text-align: left;
	z-index: 333;
	transition:0.5s all;
}

#topbar #hori2_menu fieldset #haku:focus{
	width: calc( 100% - 100px );
	transform: translateX(-60px);
	z-index: 909;
	position: fixed;
	height:55px;
	border-radius: 50px;
}

#topbar #hori2_menu fieldset #haku::placeholder{
	color: var(--color2);
	letter-spacing: 0px;	
}

@media screen and (max-width: 440px){
	#topbar #hori2_menu fieldset #haku::placeholder{
		clip-path: inset(0px calc( 100% - 35px ) 0px 0px);
	}
}

#topbar #hori2_menu #filter_btn{
	display:inline-block;
	position: relative;
	width:auto;
	height:100%;
	line-height: 58px;
	box-sizing: border-box;
	padding: 0px 30px;
	border-radius: 40px;
	font-size: 0px;
	font-family: Aborm;
	font-style: normal;
	background-color:var(--color5);
	color: var(--color1);
	border:0;
	cursor: pointer;
	outline: none;
	margin:0;
	margin-left: 8px;
	text-align: center;	
}

#topbar #hori2_menu #filter_btn:before {
	display: block;
	position: absolute;
	top:0px;
	right:8px;
	bottom:0px;
	width:40px;
	height:40px;
	margin-left:10px;
	line-height: 40px;
	font-size:25px;
	content: url("/imgs/filtericon2.png");
	color:var(--color1);
	margin: auto 0px;
	filter:hue-rotate(1.0);
	transform: rotate(0deg) scale(0.5) translate(-10px, -3px);
}


#player_wrap #haku_wrap .songheadforartistline {
	position: relative;
	display: flex;
    flex-direction: column;
	width: 100%;
	max-width: 810px;
	height: auto;
	padding: 40px 40px;
    box-sizing: border-box;
	-webkit-user-select:none;
	user-select:none;
    border-radius: 12px;
    transform: scale(1.04) translateY(-30px);
    z-index: 9999;
    margin: 0px auto 10px auto;
	background-color:var(--color8);
	transition:all 0.5s;
}

#player_wrap #haku_wrap .songheadforartistline h3,
#player_wrap #haku_wrap .songheadforartistline p{
    font-family: Rubik;
    margin:0;
    padding: 0;
}

#player_wrap #haku_wrap .songheadforartistline h3{ font-size:32px; line-height: 42px; font-weight: 400; }
#player_wrap #haku_wrap .songheadforartistline p{ font-size:16px; line-height: 20px; font-weight: 300; }

#player_wrap #haku_wrap .haku_row,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 810px;
	height: 75px;
	flex-direction: row;
	margin:0px auto;
	padding: 0px 0px;
	-webkit-user-select:none;
	user-select:none;
	border-top:1px solid var(--color7);
	transition:all 0.5s;
}

#player_wrap #haku_wrap .haku_row:first-of-type, 
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row:first-of-type{
	border-top:0;
}

#player_wrap #haku_wrap .haku_row .addnewwrap,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .addnewwrap {
	display: inline-block;
	width:100%;
	height:25px;
	line-height: 25px;
	margin: 5px auto 10px auto;
}

#player_wrap #haku_wrap .haku_row .addnewwrap #newlistname {
	display: inline-block;
	width:75%;
	height:33px;
	line-height: 33px;
	font-size:14px;
	font-weight: 500;
	padding: 0px 15px;
	box-sizing: border-box;
	border-radius: 7px;
	outline: none;
	margin:0px 10px;
	border: 1px solid rgba(214,214,214,1.00);
	}

#player_wrap #haku_wrap .haku_row .addnewwrap #addnewplbtn {
	display: inline-block;
	width:20%;
	height:33px;
	line-height:33px;
	font-size:15px;
	font-weight: 500;
	background-color: rgba(216,136,3,1.00);
	color:white;
	border-radius: 7px;
	padding:0;
	box-sizing: border-box;
	border:0;
	border-top: 1px solid rgba(255,255,255,1.00);
	outline: none;
	-webkit-appearance:none;
}



#player_wrap #haku_wrap .haku_row .title,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .title {
	position: absolute;
	top:16px;
	left:0px;
	display: inline-block;
	width: auto;
	max-width: 70%;
	height: 22px;
	line-height: 22px;
	margin:auto 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-weight: 500;
	font-size:16px;
	padding: 0px;
	box-sizing: border-box;
	text-align: left;
}

#player_wrap #haku_wrap .haku_row .subtitle, 
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .subtitle {
	position: absolute;
	top:40px;
	left:0px;
	display: inline-block;
	width: auto;
	max-width: 50%;
	height: 19px;
	line-height: 19px;
	margin:auto 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px;	
	font-size:14px;
	font-weight: 400;
	box-sizing: border-box;
	text-align: left;
}

#player_wrap #haku_wrap .haku_row .versio, 
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .versio {
	position: absolute;
	top:40px;
	left:50%;
	display: inline-block;
	width: auto;
	height: 19px;
	line-height: 19px;
	margin:auto 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px;	
	font-size:14px;
	z-index: 4;
	font-weight: 400;
	box-sizing: border-box;
	text-align: left;
}

#player_wrap #haku_wrap .haku_row .btn_play,
#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .btn_play {
	position:absolute;
	display: block;
	top:0px;
	bottom:0px;
	right:0px;
	width: 20px;
	height: 20px;
	content: url("/imgs/Icon awesome-play.svg");
	margin: auto 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px 0px;	
	box-sizing: border-box;
	z-index: 105;
}

#player_wrap #haku_wrap .haku_row .btn_fav{
	position:absolute;
	display: block;
	top:0px;
	bottom:0px;
	right:65px;
	width: 20px;
	height: 20px;
	margin:auto 0px;
	transform: rotate(0deg);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px 0px;
	content: url("/imgs/Icon ionic-ios-add-circle-outline.svg");
	box-sizing: border-box;
	z-index: 120;
	transition: all 0.5s;
}

#omatlaulutlistaus #omatlaulutlistaus_wrap .haku_row .btn_pl{
	position:absolute;
	display: block;
	top:0px;
	bottom:0px;
	right:80px;
	width: 20px;
	height: 20px;
	margin:auto 0px;
	transform: rotate(0deg);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px 0px;
	content: url("/imgs/Icon awesome-trash.svg");
	filter: invert(1);
	box-sizing: border-box;
	z-index: 120;
	transition: all 0.5s;
}


#player_wrap #haku_wrap .haku_row input[type="radio"]{display:none; }

#player_wrap #haku_wrap .haku_row .songoptions{
	display: none;
	width:100%;
	height:20px;
	background-color:var(--color6);
	padding:20px 25px;
	box-sizing: border-box;
	transition: all 0.5s;
}

#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(2):checked ~ .btn_fav,
#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(3):checked ~ .btn_fav{
	transform: rotate(405deg);
}

#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(3):checked ~ .songoptions{
	display:inline-block;
	position: absolute;
	top:50px;
	right:0vw;
	z-index: 555;
	height: auto;
	border-radius: 9px;
	box-shadow: 0px 3px 30px var(--color10);
}

#player_wrap #haku_wrap .haku_row .songoptions div {
	position: relative;
	display: block;
	width:100%;
	height:52px;
	line-height: 52px;
	margin:0px auto;
	box-sizing: border-box;
	padding: 0px 40px 0px 0px;
	border-top:1px solid var(--color7);
}

#player_wrap #haku_wrap .haku_row .songoptions .lol01:after{
	position: absolute;
	top:0px;
	right:0px;
	bottom:0px;
	margin:auto 0px;
	width:25px;
	height: 18px;
	line-height: 18px;
	content: url("/imgs/Icon material-queue.svg");
}

#player_wrap #haku_wrap .haku_row .songoptions .lol02:after{
	position: absolute;
	top:0px;
	right:0px;
	bottom:0px;
	margin:auto 0px;
	width:25px;
	height: 15px;
	line-height: 15px;
	content: url("/imgs/Union 16.svg");
}

#player_wrap #haku_wrap .haku_row .songoptions div:nth-of-type(1) {
	border-top:0px;
}

#player_wrap #haku_wrap .haku_row .playlistoptions{
	display: none;
	width:100%;
	height:20px;
	background-color:var(--color9);
	padding:20px 35px 5px 35px;
	box-sizing: border-box;
	text-align: center;
	transition: all 0.5s;
}

#player_wrap #haku_wrap .haku_row .playlistoptions div{
	position: relative;
	display: block;
	width:100%;
	height:50px;
	line-height: 50px;
	border-bottom:1px solid var(--color7);
	margin: 0px auto;
	box-sizing: border-box;
	padding: 0px 50px 0px 0px;
	text-align: left;
}

#player_wrap #haku_wrap .haku_row .playlistoptions div:after{
	position: absolute;
	top:0px; bottom:0px;
	right:0px;
	width:25px;
	height: 20px;
	line-height: 20px;
	margin: auto 0px;
	content: url("/imgs/Icon ionic-ios-add-circle-outline.svg");
}

#player_wrap #haku_wrap .haku_row .playlistoptions .btn01{
	display:inline-block;
	width:auto;
	height: 40px;
	line-height: 40px;
	font-size:16px;
	margin:20px auto;
	padding: 0px 15px;
	text-align: center;
	border-bottom:0;
	border-radius: 40px;
	cursor: pointer;
	-webkit-user-select:none;
	user-select:none;
	font-weight: 400;
	color:var(--color2);
	background-color: var(--color8);
}

#player_wrap #haku_wrap .haku_row .playlistoptions .btn01:after{
	content:"";
}

#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(2):checked ~ .playlistoptions{
	display:inline-block;
	position: absolute;
	top:35px;
	right:0px;
	z-index: 555;
	height: auto;
	border-radius: 9px;
	box-shadow: 0px 3px 30px var(--color10);
}

#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(2):checked ~ .bgrlab,
#player_wrap #haku_wrap .haku_row input[type="radio"]:nth-of-type(3):checked ~ .bgrlab{
	display: block;
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background: rgba(243,235,225,0.04) 0% 0% no-repeat padding-box;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 444;
}


#siirra_lauluun_wrap{
	position: fixed;
	display: none;
	top:0px;
	left:0px;
	width:100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: rgba(243,235,225,0.04) 0% 0% no-repeat padding-box;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 9000;
}

#siirra_lauluun_wrap #siirra_lauluun{ 
	position: relative;
	display: block;
	width: 86%;
	max-width: 420px;
	height:auto;
	border-radius: 10px;
	padding: 25px;
	box-sizing: border-box;
	background-color: var(--color2);
	box-shadow: 0px 15px 60px #0003292E;
	color:var(--color1);
}

#siirra_lauluun_wrap #siirra_lauluun #close_siirra_lauluun {
	position:absolute;
	top:15px;
	right:15px;
	width:29px;
	height: 29px;
	z-index: 445;
	transform:rotate(45deg);
	content: url("/imgs/Path 1022.svg");
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_logo {
	display: block;
	width:100px;
	height: auto;
	margin:-60px auto 25px auto;
	z-index: 444;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_title_1,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_subtitle_1,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_subtitle_2,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_info_1,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_btn{
	margin: 0;
	padding: 0;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_title_1{
	font-family: Aborm;
	width: 100%;
	font-size: 25px;
	margin-bottom:15px;
	line-height: 40px;
	text-align: left;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_subtitle_1,
#siirra_lauluun_wrap #siirra_lauluun #lauluun_subtitle_2{
	position: relative;
	float:left;
	width: 100%;
	height: 48px;
	font-size: 18px;
	font-weight: 300;
	color:var(--color4);
	box-sizing: border-box;
	line-height: 48px;
	padding:0px 0px 0px 50px;
	margin:0px;
	border-bottom: 1px solid var(--color1);
}

#siirra_lauluun_wrap #siirra_lauluun .in_artisti:before{ 
	position: absolute;
	top:0px;
	left:0px;
	bottom:0px;
	margin:auto;
	width:20px;
	height: 20px;
	filter: brightness(0.1) invert(100);
	transform: translateY(-5px) scale(0.45);
	content: url("/imgs/Icon material-person.svg");	
}

#siirra_lauluun_wrap #siirra_lauluun .in_brand:before{
	position: absolute;
	top:0px;
	left:0px;
	bottom:0px;
	margin:auto;
	width:20px;
	height: 20px;
	filter: brightness(0.1) invert(100);
	transform: translateY(-5px) scale(0.45);
	content: url("/imgs/Icon awesome-compact-disc.svg");
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_info_1{
	display: block;
	float:left;
	width:100%;
	height: auto;
	font-family: Aborm;
	font-size: 20px;
	line-height: 30px;
	margin-top:30px;
	margin-bottom: 10px;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap{
	display: flex;
	width: 100%;
	height: 53px;
	overflow: hidden;
	border: 1px solid #F4ECE1;
	border-radius: 27px;
	margin-top:24px;
	box-sizing: border-box;
	padding: 0px 4px;
	opacity: 1;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap label {
	display: flex;
	flex-grow:1;
	box-sizing: border-box;
	text-align: center;
	justify-content: center;
	align-items: center;
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #m3:checked ~ label:nth-of-type(1),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #m2:checked ~ label:nth-of-type(2),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #m1:checked ~ label:nth-of-type(3),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #l0:checked ~ label:nth-of-type(4),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #p1:checked ~ label:nth-of-type(5),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #p2:checked ~ label:nth-of-type(6),
#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap #p3:checked ~ label:nth-of-type(7){
	background-color: rgba(244,236,225,0.55);
	clip-path: circle();
}

#siirra_lauluun_wrap #siirra_lauluun #lauluun_pitch_wrap input[type="radio"] {
	display: none;
}


#siirra_lauluun_wrap #siirra_lauluun #lauluun_btn{
	width: 100%;
	height: 60px;
	border:0;
	outline: none;
	background-color: var(--color3);
	font-family: Rubik;
	font-size: 22px;
	line-height: 60px;
	margin-top:30px;
	color: var(--color1);
	border-radius: 30px;
	opacity: 1;
}

#lisaasoittolistalle{
    display: none;
    position: fixed;
    bottom: 5px;
    left: 0px;
    right: 0px;
    width: 320px;
    height: auto;
    margin: auto;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 15px;
    background-color: rgba(255,139,0,1.00);
    color: rgba(242,242,242,1.00);
    z-index: 9955;
    background-image: -webkit-linear-gradient(295deg,rgba(227,125,0,1.00) 0%,rgba(255,99,0,1.00) 100%);
    background-image: -moz-linear-gradient(295deg,rgba(227,125,0,1.00) 0%,rgba(255,99,0,1.00) 100%);
    background-image: -o-linear-gradient(295deg,rgba(227,125,0,1.00) 0%,rgba(255,99,0,1.00) 100%);
    background-image: linear-gradient(155deg,rgba(227,125,0,1.00) 0%,rgba(255,99,0,1.00) 100%);
}

#lisaasoittolistalle h5 {
	font-size: 19px;
	font-weight: 500;
	text-align: center;
	margin: 0;
	padding: 0;
	color:rgba(33,33,33,1.00);
}

#lisaasoittolistalle .lisaa_row {
	font-size: 15px;
	font-weight: 500;
	height:37px;
	line-height: 37px;
	cursor: pointer;
	margin:8px auto;
	text-align: center;
	background-color: rgba(238,238,238,1.00);
	color:rgba(33,33,33,1.00);
	border-top:1px solid rgba(255,255,255,1.00);
	border-radius: 9px;
}

#player_wrap #soittolista_wrap{
	display:block;
	position: fixed;
	bottom:0px;
	left: 0px;
	right: 0px;
	width:94%;
	max-width: 810px;
	height:auto;
	max-height: 80px;
	border-radius: 10px 10px 0px 0px;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0 auto ;
	z-index: 1234;
	background-color: var(--color2);
	padding: 24px 24px;
	transition: all 0.4s;
}

#stl_btn{ display: none; }
#player_wrap #soittolista_wrap #stl_btn{ display:none; }

#player_wrap #stl_btn:checked ~ #soittolista_wrap{
	min-height: 100px;
	max-height: calc( 100vh - 220px );
	overflow-y: auto;
	overflow-x: hidden;
}

#player_wrap #soittolista_wrap label{ 
	display:flex;
	position: absolute;
	top:20px;
	right:20px;
    align-items: center;
    justify-content: center;
	width:42px;
	height:42px;
	line-height: 42px;
	text-align: center;
	clip-path: circle();
	transition: all 0.4s;
	background-color:var(--color5);
	transform: rotate(180deg);
}

#player_wrap #stl_btn:checked ~ #soittolista_wrap label {
	transform: rotate(0deg);
}

#player_wrap #soittolista_wrap h5{
	font-family: Aborm;
	font-size: 25px;
	font-weight: 500;
	height: 35px;
	width:370px;
	line-height: 35px;
	margin:0px 0px 25px 0px;
	padding:0;
	color:var(--color1);
}

#player_wrap #soittolista_wrap .soittolista_row{
	display: flex;
	position: relative;
	width:100%;
	height:55px;
	margin:0px;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	-webkit-user-select:none;
	user-select:none;
	border-top: 1px solid var(--color5);
	transition:all 0.5s;
}

#player_wrap #soittolista_wrap .soittolista_row:nth-of-type(1){
	border-top:0px solid red;
}

#player_wrap #soittolista_wrap .soittolista_row .title{
	display: block;
	width: calc( 100% - 70px );
	height: auto;
	margin:0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px;
	color:var(--color1);
	font-size:18px;
	font-weight:500;
	text-align: left;
}

#player_wrap #soittolista_wrap .soittolista_row .subtitle{
	display: block;
	width: calc( 100% - 70px );
	height: auto;
	margin:0;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px;	
	font-size:15px;
	color:var(--color1);
	font-weight: 400;
	text-align: left;
}

#player_wrap #soittolista_wrap .soittolista_row .remove_btn {
	display: block;
	position: absolute;
	top:0px;
	bottom: 0px;
	right:50px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin:auto;
	font-size:18px;
	font-weight: 400;
	box-sizing: border-box;
	text-align: center;
	content: url("/imgs/Icon awesome-trash.svg");
	background-color: var(--color2);
	color:white;
}

#player_wrap #soittolista_wrap .soittolista_row .sing_btn {
	display: block;
	position: absolute;
	top:0px;
	bottom: 0px;
	right:0px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin:auto;
	font-size:18px;
	font-weight: 400;
	box-sizing: border-box;
	text-align: center;
	content:url("/imgs/Icon awesome-play.svg");
	filter:invert(100%);
	color:white;
}



#player_wrap #soittolista_wrap .soittolista_row .pitchwrap{
	display:block;
	width:100%;
	height:0px;
	padding: 2px 5px;
	box-sizing: border-box;
	border-radius: 12px;
	transition: all 0.4s;
	transform: perspective(10px) translate3d(2220px, 0px, 0px);
}

#player_wrap #soittolista_wrap .soittolista_row .pitchwrap .key{
	display:block;
	float: left;
	width:calc( 100% / 7 - 4px );
	height:32px;
	line-height: 32px;
	margin:0px 2px;
	border-radius: 12px;
	text-align: center;
	background-color: rgba(253,130,0,1.00);
	color:white;
}


#tilauswrap{
	display: none;
	position: fixed;
	top:0px;
	left:0px;
	bottom:0px;
	right: 0px;
	flex-direction: column;
	width: 100%;
	max-width: 950px;
	height:100%;
	background-color: var(--color15);
	border-radius: 0px;
	box-shadow: 0px 3px 40px #0000003B;
	z-index: 1010;
	margin:auto;
	overflow: auto;
	padding: 0px 5%;
	box-sizing:border-box;
	align-items: center;
	justify-content: center;
}

#tilauswrap #closewi img{
	position: absolute;
	top:30px;
	right:30px;
	width: 30px;
	filter:invert();
	transform: rotate(45deg);
}

#tilauswrap input[type="radio"]{ display:none; }

#tilauswrap .slidero{
	display: none;
	width:100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#tilauswrap .slidero h3{
	width: 100%;
	font-size: 30px;
	font-weight: 500;
	font-family: Rubik;
	line-height: 38px;
	text-align: left;
	margin: 0px;
}

#tilauswrap .slidero p{
	width: 100%;
	font-size: 18px;
	font-weight: 400;
	font-family: Rubik;
	line-height: 24px;
	text-align: left;
	margin: 25px 0px;
}

#tilauswrap .slidero .options {
	display: block;
	width: 100%;
	height: auto;
	margin:50px 0px;
}

#tilauswrap .slidero button {
	background-color: var(--color3);
	color:var(--color6);
	font-size: 18px;
	line-height: 60px;
	height: 60px;
	border: 0;
	outline: none;
	-webkit-appearance:none;
	border-radius: 38px;
	display: inline-block;
	padding: 0px 40px;
	box-sizing: border-box;
}

#tilauswrap .slidero .button2 {
	background-color: var(--color16);
	color:var(--color5);
	font-size: 18px;
	line-height: 60px;
	height: 60px;
	border: 0;
	outline: none;
	-webkit-appearance:none;
	border-radius: 38px;
	display: inline-block;
	padding: 0px 40px;
	box-sizing: border-box;
}

#tilauswrap .slidero .options label{
	position: relative;
	display: block;
	width:100%;
	height:45px;
	line-height: 45px;
	padding: 0px 10px 0px 60px;
	margin:4px 0px;
	background-color: var(--color4);
	border-radius: 38px;
	box-sizing: border-box;
	text-align: left;
}

#tilauswrap #irtisanominen .options input[type="checkbox"],
#tilauswrap #tilausaktivoitu .options input[type="checkbox"] {
	position: absolute;
	top:0px;
	bottom:0px;
	left:10px;
	margin: auto 0px;
	background-color: white;
	-webkit-appearance:none;
	border:2px solid var(--color7);
	width: 35px;
	height: 35px;
	border-radius: 30px;
}

#tilauswrap #irtisanominen .options input[type="checkbox"]:checked,
#tilauswrap #tilausaktivoitu .options input[type="checkbox"]:checked {
	background-color: var(--color3);
}

#tilauswrap #irtisanottu {
	align-items: center;
	justify-content: center;
	text-align: center;
}

#tilauswrap #irtisanottu > * {
	text-align: center;
}

#tilauswrap #irtisanottu h6 {
	width:100%;
	max-width: 330px;
	height:45px;
	margin: 50px 0px;
	line-height: 45px;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	border-radius: 38px;
	background-color: var(--color6);
}

#tilauswrap #irtisanottu p#cancelcancel{
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	max-width: 233px;
	margin:50px 0px 0px 0px;
	cursor: pointer;
}

#tilauswrap input[type="radio"]:checked + .slidero {
	display:flex;
}

#tilauswrap #tilaa.slidero div#campaign_wrap {
	position: relative;
	width:100%;
	height:auto;
	margin:10px 0px;
}

#tilauswrap #tilaa.slidero div#campaign_wrap input[type="text"]{
	width: calc( 100% - 105px );
	height:45px;
	line-height: 45px;
	border-radius: 38px;
	font-family: Rubik;
	font-weight: 300;
	border:0;
	outline:none;
	font-size: 16px;
	background-color: var(--color6);
	color: var(--color5);
	padding:0px 20px;
	box-sizing: border-box;
}

#tilauswrap #tilaa.slidero div#campaign_wrap button#btn_acti_campaign {
	position: absolute;
	top:0px;
	bottom:0px;
	right:0px;
	background-color: var(--color16);
	color:var(--color2);
	height:45px;
	line-height: 45px;
	font-size:18px;
	font-weight: 300;
	width: auto;
	padding: 0px 15px;
	box-sizing: border-box;
	cursor: pointer;
}

#tilauswrap #tilaa.slidero div#stripeintegrate {
	width:100%;
	height:auto;
	text-align: center;
	border-radius: 38px;
	margin:35px 0px;
}

#tilauswrap #tilaa.slidero div#opt_renew_wrap,
#tilauswrap #tilaa.slidero div#opt_ehdot_wrap {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	margin:12px 0px;
}

#tilauswrap #tilaa.slidero div.divideri{
	width:100%;
	height:1px;
	background-color: var(--color7);
}

#tilauswrap #tilaa.slidero div#opt_renew_wrap:before,
#tilauswrap #tilaa.slidero div#opt_ehdot_wrap:before {
	position: absolute;
	display: flex;
	align-items: center;
	top:0px;
	left:0px;
	width:65%;
	bottom:0px;
	font-size:18px;
	line-height: 26px;
	font-weight: 400;
	font-family: Rubik;
	margin: auto 0px;
}

#omatili_wrap #omat_tiedot_wrap div#renews #renew_off:checked ~ #tilauswrap #tilaa.slidero div#opt_renew_wrap label{
	background-color: var(--color3);
	color:rebeccapurple;
}

#tilauswrap #tilaa.slidero div#opt_renew_wrap:before{
	content:"Haluatko että tilaus uusiutuu automaattisesti? ";
}
#tilauswrap #tilaa.slidero div#opt_ehdot_wrap:before {
	content:"Vahvista että hyväksyt käyttöehdot ja yksityisyydensuojan.";
}

#tilauswrap #tilaa.slidero div#opt_renew_wrap label,
#tilauswrap #tilaa.slidero div#opt_ehdot_wrap label {
	display: inline-block;
	background-color:rgba(206,206,206,1.00);
	width:75px;
	height:42px;
	line-height: 42px;
	font-size:18px;
	margin:0px 5px;
	color:black;
	text-align: center;
	border-radius: 35px;
}

#tilauswrap #tilaa.slidero div#botbuttonwrap {
	width:100%;
	height:65px;
	display: none;
	gap:0px 15px;
	margin: 20px 0px 0px 0px;
	padding:20px 0px 0px 0px;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--color7);
}


#tilauswrap #tilaa.slidero #ehdotok,
#tilauswrap #tilaa.slidero #ehdotno{
	display: none;
}

#tilauswrap #tilaa.slidero #ehdotno:checked ~ div#opt_ehdot_wrap label:nth-of-type(1),
#tilauswrap #tilaa.slidero #ehdotok:checked ~ div#opt_ehdot_wrap label:nth-of-type(2){ background-color: var(--color3); color: var(--color4); }

#tilauswrap #tilaa.slidero #ehdotok:checked ~ div#botbuttonwrap {
	display:flex;
}

#tilauswrap #jatkatilausta.slidero h3 {
	text-align: center;
}

#tilauswrap #jatkatilausta.slidero p {
	text-align: center;
}

#tilauswrap #jatkatilausta.slidero div{
	display: inline-block;
	white-space: normal;
	text-align: center;
}

#tilauswrap #jatkatilausta.slidero div button#btn_jatkatilausta,
#tilauswrap #jatkatilausta.slidero div label.button2 {
	margin:5px 5px;
}

#helpguide_wrap{
	position:fixed;
	display: none;
	width:100%;
	height: calc( 100% - 140px);
	top:140px;
	left:0px;
	right:0px;
	bottom:0px;
	overflow: auto;
	box-sizing: border-box;
	white-space: nowrap;
	transition: all 0.4s;
	z-index: 100;
}

#helpguide_wrap #helpguide_cont_wrap {
	display:block;
	width:90%;
	max-width: 810px;
	height:auto;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: auto;
	padding: 40px 0px 50px 0px;
}

#helpguide_wrap #helpguide_cont_wrap input[type="checkbox"] {
	display: none;	
}

#helpguide_wrap #helpguide_cont_wrap h3{ 
	font-size: 35px;
	line-height: 35px;
	font-family: Aborm;
	font-weight: 500;
}

#helpguide_wrap #helpguide_cont_wrap h5{ 
	font-size: 29px;
	line-height: 41px;
	font-family: Aborm;
	font-weight: 500;
	margin: 25px 0px;
}

#helpguide_wrap #helpguide_cont_wrap .togglebox { 
	position: relative;
	display: block;
	width: 100%;
	height:auto;
	padding: 30px 25px;
	box-sizing: border-box;
	background-color: var(--color8);
	border-radius: 22px;
	margin: 5px 0px;
}

#helpguide_wrap #helpguide_cont_wrap .togglebox:after { 
	display: block;
	position: absolute;
	top:0px;
	bottom:0px;
	right:35px;
	width:20px;
	height:20px;
	margin: auto 0px;
	content:"";
	filter: invert();
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("/imgs/Icon ionic-ios-arrow-down.svg");
	background-size: contain;
	transition:all 0.5s;
}


#helpguide_wrap #helpguide_cont_wrap .togglebox p.title{ 
	font-size: 18px;
	width:90%;
	white-space:normal;
	font-family: Rubik;
	font-weight: 500;
	line-height: 22px;
	margin: 0;
}

#helpguide_wrap #helpguide_cont_wrap .togglebox div.selite, 
#helpguide_wrap #helpguide_cont_wrap .togglebox p.selite{ 
	display: none;
	font-size: 16px;
	font-family: Rubik;
	font-weight: 400;
	line-height: 22px;
	padding: 15px 0px 0px 0px;
	border-top: 1px dashed var(--color7);
	margin: 15px 0px 0px 0px;
	white-space: normal;
}

#helpguide_wrap #helpguide_cont_wrap input[type="checkbox"]:checked + .togglebox div.selite,
#helpguide_wrap #helpguide_cont_wrap input[type="checkbox"]:checked + .togglebox p.selite  {
	display: block;
}

#helpguide_wrap #helpguide_cont_wrap input[type="checkbox"]:checked + .togglebox:after {
	transform: rotate(180deg);
	top:28px;
	bottom:inherit;
}

#helpguide_wrap #helpguide_cont_wrap .togglebox div.selite textarea{ 
	display: block;
	width:100%;
	height:auto;
	line-height: 20px;
	padding: 25px 30px;
	box-sizing: border-box;
	border-radius: 15px;
	outline: none;
	-webkit-appearance:none;
	border:0;
	background-color: var(--color6);
	color: var(--color5);
	font-size: 15px;
	font-weight: 400;
}

#helpguide_wrap #helpguide_cont_wrap .togglebox div.selite button#btn_send_message { 
	-webkit-appearance:none;
	width: auto;
	height: 42px;
	line-height: 42px;
	font-size: 16px;
	font-weight: 400;
	font-family: Rubik;
	padding: 0px 25px;
	box-sizing: border-box;
	margin: 12px 0px;
	color: var(--color1);
	background-color: var(--color3);
	outline: none;
	border-radius: 21px;
	border:0;
	
}

#hori1_menu{
	position:fixed;
	display: block;
	top:120px;
	left:0px;
	right:0px;
	width:100%;
	height:auto;
	padding: 0px 0px;
	margin: 0px  auto;
	z-index: 120;
	box-sizing: border-box;
	background-color: var(--color1);
	transition: all 0.4s;
}

#hori1_menu div{
	display:block;
	float:left;
	width:auto;
	height:35px;
	line-height: 35px;
	padding: 0px 15px;
	margin:0px 5px;
	font-size:17px;
	font-weight: 500;
	letter-spacing: 0px;
	border-radius: 10px;	
}

#hori1_menu .s_btn{
	position: relative;
	width: calc( 50% - 35px );
	display: block;
	float:left;
	border-radius: 0px;
	height: 50px;
	line-height: 50px;
	font-size: 18px;
	font-weight: 400;
	padding:0px 10px;
	margin:0px 0px;
	box-sizing: border-box;
	cursor: pointer;
	background-color: rgba(208,208,208,0.50);
	background-color: var(--color5);
	color: var(--color1);
	text-align: center;
	transition: all 0.5s;
}

#v1, #v2, #v3, #v4, #v5, #v6 {
	display:none;
}

#hori1_menu .s_btn:hover{
	transform: scale(1.00);
}

#v1:checked ~ #hori1_menu .kaikki_laulut{
	background-color: var(--color3);
	color: var(--color4);
}

#v2:checked ~ #hori1_menu .omat_listat,
#v5:checked ~ #hori1_menu .omat_listat{
	background-color: var(--color3);
	color: var(--color4);
}

#hori1_menu .kaikki_laulut:after,
#hori1_menu .omat_listat:after{	
	position: absolute;
	width:45px;
	height:45px;
	margin-left: 5px;
}


#hori1_menu .kaikki_laulut,
#hori1_menu .omat_listat{	
	padding: 0px 30px 0px 0px; 
}


@media screen and (max-width:520px){

	#hori1_menu .omat_listat span#word_omat,
	#hori1_menu .kaikki_laulut span#word_kaikki{
		display:none;
	}
	
	#hori1_menu .kaikki_laulut span#word_kappaleet,
	#hori1_menu .omat_listat span#word_listat{
		display: inline-block;
		text-transform: capitalize;
	}
	
}

#v1:checked ~ #hori1_menu .kaikki_laulut:after,
#v2:checked ~ #hori1_menu .omat_listat:after,
#v5:checked ~ #hori1_menu .omat_listat:after{
	filter:invert(100);
}

#v1:checked ~ #hori1_menu,
#v2:checked ~ #hori1_menu,
#v4:checked ~ #hori1_menu{
	display: block;
}

#v3:checked ~ #hori1_menu,
#v4:checked ~ #hori1_menu,
#v5:checked ~ #hori1_menu,
#v6:checked ~ #hori1_menu{
	display: none;
}

#v1:checked ~ #player_wrap{ display: block; }
#v2:checked ~ #omat_listat_wrap{ display: block; overflow: auto; }
#v3:checked ~ #helpguide_wrap { display:block; }
#v4:checked ~ #omatili_wrap{ display:block; }
#v5:checked ~ #omatlaulutlistaus{ display:block; }
#v6:checked ~ #tilauswrap { display:flex; }

#hori1_menu .kaikki_laulut:after{
	filter:invert();
	transform: translateY(5px) scale(0.5);
	content: url("/imgs/Icon ionic-ios-musical-notes-2.svg")
}

#hori1_menu .omat_listat:after{ 
	filter:invert();
	transform: translateY(8px) scale(0.55);
	content: url("/imgs/Group 420.svg")
}

#hori1_menu #dropdown_btn.s_btn.droppari{
	position: absolute;
	top:0px;
	right:0px;
	width:70px;
	display: inline-block;
	font-size: 0px;
	background-color: #485A6B;
	padding: 0px;
	margin: 0;
}

#hori1_menu #dropdown_btn.s_btn.droppari:after {
	position: absolute;
	display: block;
	top:0px;
	bottom:0px;
	width:50px; 
	height: 50px;
	right:10px;
	font-size:20px;
	background-position: center;
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-image:url("/imgs/sort-amount-down.svg");
	content:"";
	}

#hori1_menu .notebtn {
	background-color: var(--color3);
	color: var(--color4);
}

#hori1_menu .s_btn img{
	position: absolute;
	right: 12px;
	top:0px;
	bottom:0px;
	width:17px;
	height:17px;
	margin:auto 5px;
}

#hori1_menu #jarjesta_show:checked ~ #dropdown_btn.s_btn.droppari:after {
	transform: rotateX(180deg);
}

#hori1_menu #disp_keywrap{
	display: inline-block;
	width:auto;
	height:40px;
	padding: 0;
}

#hori1_menu #jarjesta_view_bgr{
	display: none;
	position: fixed;
	top:120px;
	right:0px;
	width: 100%;
	height: calc( 100% - 120px );
	border-radius: 9px;
	box-sizing: border-box;
	padding:25px 25px;
	z-index: 1000;
	background: rgba(243,235,225,0.04) 0% 0% no-repeat padding-box;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

#hori1_menu #jarjesta_view{
	display: none;
	position: absolute;
	top:70px;
	right:0px;
	left:0px;
	width: 95%;
	margin:0px auto;
	height: auto;
	border-radius: 9px;
	box-sizing: border-box;
	padding:25px 25px;
	z-index: 1001;
	background-color:var(--color4);
	box-shadow: 0px 3px 30px var(--color10);
}

#hori1_menu #jarjesta_show{ display:none; }

#hori1_menu #jarjesta_show:checked ~ #jarjesta_view_bgr,
#hori1_menu #jarjesta_show:checked ~ #jarjesta_view {
	display: block;
}

#hori1_menu #jarjesta_view div {
	position: relative;
	display: block;
	width: 100%;
	height:42px;
	line-height: 42px;
	padding:0px;
	margin: 0px;
	font-size: 16px;
	font-weight: 400;
	border-radius: 0;
	font-family: Rubik;
	cursor: pointer;
	transition: all 0.2s;
	box-sizing: border-box;
	border-bottom:1px solid var(--color7);
}

#hori1_menu #jarjesta_view div:hover{
	transform: scale(1.05);
}

#hori1_menu #jarjesta_view #most_btn,
#hori1_menu #jarjesta_view #hots_btn {
	padding:0px 0px 0px 35px;
	}

#hori1_menu #jarjesta_view #most_btn:before {
	position: absolute;
	left:0px;
	top:0px;
	bottom:0px;
	margin: auto 0px;
	height:22px;
	line-height: 22px;
	content:url("/imgs/micrphone.svg");
}
#hori1_menu #jarjesta_view #hots_btn:before {
	position: absolute;
	left:0px;
	top:0px;
	bottom:0px;
	margin: auto 0px;
	height:22px;
	line-height: 22px;
	content:url("/imgs/flame.svg");
}

#videoframe{
	position: relative;
	position: fixed;
	display: none;
	bottom:0px;
	right:0px;
	width: 100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 9950;
	background-color: var(--color1);
}

#videoframe:before{
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:50vh;
	background-color:var(--color2);
	z-index: -1;
	content:"";
}

#videoframe #videoframe_top{
	position: relative;
	display:flex;
	width:90%;
	margin: 25px 0px;
	padding: 50px 0px 0px 0px;
	align-items: center;
}

#videoframe #videoframe_top #logos{
	position: absolute;
	display: block;
	top:0px;
	left:0px;
	margin:0px;
	width:80px;
	height: 80px;
	transform: translateY(-16px);
	clip-path: circle();
}

#videoframe #videoframe_top #logos img{ 
	width:auto;
	height: 100%;
	transform: translateX(-125px);
}

#videoframe #videoframe_top #playing_info{
	width:100%;
	height: auto;
	box-sizing: border-box;
	padding:0px 20px;
	margin: 30px 0px 15px 0px;
	display: block;
	color:var(--color1);
}

#videoframe #videoframe_top #playing_info #playing_song,
#videoframe #videoframe_top #playing_info #playing_artist{
	margin:0;
	padding: 0;
	text-align: left;
}

#videoframe #videoframe_top #playing_info #playing_song{
	font-family: Aborm;
	font-size:20px;
	font-weight: 500;
}

#videoframe #videoframe_top #playing_info #playing_artist{
	font-family: Rubik;
	font-weight: 400;
	font-size:14px; 
	line-height: 22px;
}

#videoframe #videoframe_top #ext_wind_btn{
	position:absolute;
	top:0px;
	right:0px;
	display: block;
	margin:0px;
	width:225px;
	font-family: Rubik;
	font-size:16px;
	height:50px;
	cursor: pointer;
	line-height: 50px;
	padding:0px 50px 0px 20px;
	border-radius: 40px;
	color:var(--color1);
	box-sizing: border-box;
	transform: scale(0.85) translateY(-10px);
	border:2px solid var(--color1);
}

#thiswin,
#hdmi,
#tvapp{
	display:none;
}

#view_1:checked ~ #videoframe #videoframe_top #ext_wind_btn #thiswin{ display:block; }
#view_3:checked ~ #videoframe #videoframe_top #ext_wind_btn #hdmi{ display:block; }
#view_4:checked ~ #videoframe #videoframe_top #ext_wind_btn #tvapp{ display:block; }

#videoframe #videoframe_top #ext_wind_btn:after{
	position: absolute;
	top:0px;
	bottom:0px;
	right:20px;
	margin:auto 0px;
	content: url("/imgs/Path 1063.svg");
}

#videoframe #videoelementwrap {
	position:relative;
}

#videoframe #for,
#videoframe #rew{
	position: absolute;
	display: inline-block;
	width:65px;
	height:65px;
	line-height: 65px;
	font-size:22px;
	text-align: center;
	border-radius: 50px;
	background-color:rgba(255,157,30,1.00);
	color:white;
	z-index: 9988;
}

#videoframe #for{ top:10px; right: 10px;}
#videoframe #rew{ top:10px; right: 85px;}

#videoframe #videoelementwrap #video{
	display: block;
	width:100%;
	height:auto;
	max-width: 800px;
	border-radius: 37px;
	z-index: 9977;
}

#videoframe #videobgr{ 
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top:0px;
	left:0px;
	background-color: black;
	z-index: 440;
}

#view_1:checked ~ #videoframe #video{
	width:100%;
	height:auto;
	max-width: 800px;
}

#view_2:checked ~ #videoframe #video{
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:auto;
	max-width: inherit;
	max-height: 100%;
	border: 0;
	border-radius: 0;
	z-index: 444;
	object-fit: contain;
}

#view_2:checked ~ #videoframe #videobgr{
	display: block;
}

#view_2:checked ~ #videoframe #playcontrolwrap {
	position: fixed;
	bottom:0px;
	left:0px;
	right:0px;
	margin:0px auto;
	z-index: 8888;
	padding:10px 50px 60px 50px;
	background-color:var(--color11);
	border-radius: 30px 30px 0px 0px;
	transition: all 0.1s;
}


#view_2:checked ~ #videoframe #playcontrolwrap:before {
	position: fixed;
	bottom:0px;
	left:0px;
	width:100%;
	height:40vh;
	content: "";
	background-color: transparent;
}

#videoframe #playcontrolwrap .showcontrols {
	transform: translateY(20%);
}

#view_3:checked ~ #videoframe #videoelementwrap #video,
#view_4:checked ~ #videoframe #videoelementwrap #video{
	display: none;
}

#view_1:checked ~ #videoframe #videoelementwrap #videotop{
	position: absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	width:100%;
	height: 100%;
	z-index: 9988;
	box-sizing: border-box;
	background-color: rgba(148,172,148,0.00);
	transition: 200ms border;
}

#view_3:checked ~ #videoframe #videoelementwrap #videotop,
#view_4:checked ~ #videoframe #videoelementwrap #videotop{
	display: flex;
	width:90%;
	max-width: 800px;
	height:auto;
	aspect-ratio: 1.66666667;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin:10px auto;
	background-color:rgba(68,68,68,1.00);
	border-radius: 12px;
}

#videoframe #videoelementwrap #videotop #xo_hdmi,
#videoframe #videoelementwrap #videotop #xo_tvapp{
	display:none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding:0px 5%;
	text-align: center;
}

#view_3:checked ~ #videoframe #videoelementwrap #videotop #xo_hdmi{ display: flex; }
#view_4:checked ~ #videoframe #videoelementwrap #videotop #xo_tvapp{ display: flex; }

#videotop div img{ width:20%; margin:0; }
#videotop div h1{ font-size:17px; margin:25px 0px 0px 0px; color: var(--color4); }
#videotop div p{ font-size:10px; color: var(--color4); }

#view_1:checked ~ #videoframe #videoelementwrap #videoframe_top #ext_wind_btn{ display:block; }
#view_3:checked ~ #videoframe #videoelementwrap #videoframe_top #no_cast{ display:none; }




#view_1:checked ~ #connecting_tv .step1 #no_cast {
	display: none;
}

#videoframe #durationbar {
	position: relative;
	display: inline-flex;
	white-space: nowrap;
	width: calc( 90% - 100px );
	max-width: calc( 800px - 90px );
	height:10px;
	border-radius: 10px;
	justify-content: center;
	transform: translateX(-45px);
	background-color: var(--color7);
	align-items: center;
	margin:5px auto;
	overflow: visible;
}

#videoframe #durationbar:after {
	position: absolute;
	right:0px;
	width:90px;
	font-size:15px;
	font-weight: 300;
	text-align: right;
	transform: translateX(90px);
	content: attr(data-title);
}

#view_2:checked ~ #videoframe #durationbar {
	position: fixed;
	bottom:25px;
	left:0px;
	right:0px;
	height:28px;
	border:9px solid var(--color1);
	box-sizing: border-box;
	margin:0px auto;
	z-index: 8998;
	padding:2px 50px 2px 50px;
	background-color:var(--color11);
	border-radius: 30px;
	transition: all 0.1s;
}

#view_2:checked ~ #videoframe #durationbar:after {
	position: absolute;
	right:0px;
	width:75px;
	height:28px;
	line-height: 28px;
	font-size:12px;
	font-weight: 300;
	text-align: center;
	border-radius: 30px;
	transform: translateX(90px);
	background-color: var(--color1);
	content: attr(data-title);
}

#view_4:checked ~ #videoframe #durationbar {
	display: none;
}


#videoframe #durationbar #current_time{
	position: absolute;
	left:0px;
	top:0px;
	bottom:0px;
	width:10px;
	height:10px;
	border-radius: 50px;
	background-color:var(--color3);
}

#videoframe #playcontrolwrap{
	display: inline-flex;
	white-space: normal;
	width:100%;
	max-width: 800px;
	height:auto;
	flex-flow: wrap;
	gap: 10px;
	justify-content: center;
	align-items: center;
	margin:20px auto;
	overflow: hidden;
}


#videoframe #playcontrolwrap .play_control_btn{
	position: relative;
	display:inline-block;
	width:auto;
	height: 50px;
	padding:0px 45px 0px 22px;
	margin:0px 6px;
	box-sizing: border-box;
	line-height: 50px;
	font-weight: 400;
	font-size: 14px;
	border-radius: 40px;
	border:2px solid var(--color2);
	cursor: pointer;
	transition: all 0.5s;
}

#videoframe #playcontrolwrap .stop:hover{
	border:2px solid #FF2024;
	background-color: #FF2024;
	color:var(--color1);
}

#videoframe #playcontrolwrap .stop:hover:after{
	filter:invert(100%);
}

#videoframe #playcontrolwrap .tauko{
	background-color:var(--color2);
	color:var(--color1);
}

#videoframe #playcontrolwrap .replay{
	background-color:var(--color12);
	color:var(--color1);
	border: 2px solid var(--color12);
}

#videoframe #playcontrolwrap .laajenna,
#videoframe #playcontrolwrap .pienenna {
	display: none;		
}

#videoframe #playcontrolwrap .stop:after,
#videoframe #playcontrolwrap .alusta:after,
#videoframe #playcontrolwrap .tauko:after,
#videoframe #playcontrolwrap .replay:after,
#videoframe #playcontrolwrap .pienenna:after,
#videoframe #playcontrolwrap .laajenna:after{
	display: flex;
	position: absolute;
	top:0px;
	bottom:0px;
	right:3px;
	width:50px;
	height:100%;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	transform: translateY(7px);
	margin: 0px 0px;
	z-index: 234;
}

#videoframe #playcontrolwrap .alusta:hover{
	background-color: var(--color3);
	border: 2px solid var(--color3);
}

#videoframe #playcontrolwrap .pienenna:hover,
#videoframe #playcontrolwrap .laajenna:hover{
	background-color: var(--color14);
}

.stop,
.alusta,
.laajenna,
.pienenna{
	background-color:var(--color1);
}

.stop:after{ content: url("/imgs/Rectangle 337.svg") }
.alusta:after{ content: url("/imgs/Icon feather-skip-back.svg") }
.tauko:after{ content: url("/imgs/Group 212.svg") }
.laajenna:after{ content: url("/imgs/Icon ionic-ios-expand.svg") }
.pienenna:after{ content: url("/imgs/Icon ionic-ios-expand-2.svg") }

.replay:after{ content: url("/imgs/Icon awesome-play.svg"); filter:invert(1); }

#view_1, #view_2, #view_3, #view_4{ display: none; }
#view_2:checked ~ #videoframe #playcontrolwrap .pienenna { display: inline-block; }
#view_1:checked ~ #videoframe #playcontrolwrap .laajenna { display: inline-block; }


#popbanner{
	background-color: var(--color2);
	color: var(--color1);
	position: fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	width:98vw;
	height: 100vw;
	padding: 50px 15%;
	box-sizing: border-box;
	margin: auto;
	text-align: center;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 8888;	
}

#popbanner:after{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:30%;
	transform: scale(1.5) translateY(-10%);
	opacity: 0.75;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top;
	background-size: auto;
	background-image: url("/imgs/bgr01.svg");
	content: "";
	z-index: 7777;
}

#popbanner > * { z-index:8889; }

#popbanner h1{
	font-size:9vw;
	line-height: 9.3vw;
	font-family: Aborm;
	font-weight: 500;
	margin:0;
	color: var(--color1);
}

#popbanner p{
	font-size:16px;
	line-height: 19px;
	font-family: Rubik;
	font-weight: 400;
	margin:0;
	color: var(--color1);
}

#popbanner button {
	width: auto;
	height:60px;
	line-height: 60px;
	font-size:16px;
	font-family: Rubik;
	font-weight: 400;
	margin:30px 0px;
	padding:0px 25px;
	box-sizing: border-box;
	border:0;
	outline:none;
	border-radius: 30px;
	background-color: var(--color3);
	color: var(--color1);
}


#login{
    display: flex;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100vh;
	height:100lvh;
	flex-direction: column;
    background-color: var(--color2);
    background-color:rgba(1,1,1,0.2);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
    z-index: 999;
}

#login #log_wrap{
	position: relative;
	display:flex;
    width: 80%;
	max-width: 450px;
	height: auto;
	box-sizing: border-box;
	margin: auto;
    align-items: center;
    justify-content: center;
	flex-direction: column;
	background-color: var(--color3);
	border-radius: 300px;
	padding: 30px 6%;
	z-index: 12;
}

#login #log_wrap #username_txt,
#login #log_wrap #email_inp,
#login #log_wrap #password_txt,
#login #log_wrap #pasw_inp,
#login #log_wrap #logmessage,
#login #log_wrap #subnt,
#login #log_wrap #pasw_forg,
#login #log_wrap #ei_tilia_txt1,
#login #log_wrap #ei_tilia_txt2,
#login #log_wrap #ei_tilia_txt3{
	margin:0;
	padding:0;
}

#login #log_wrap #toplogo_txt{
	width: 100%;
	text-align: center;
	margin:55px auto 20px auto;
	font-size: 35px;
	font-weight: 500;
	font-family: Aborm;
	color:var(--color1);
}

#login #log_wrap #email_inp,
#login #log_wrap #pasw_inp{
	width: 100%;
	height: 45px;
	line-height: 45px;
	background: #F4ECE1 0% 0% no-repeat padding-box;
	border-radius: 30px;
	border:0;
	outline: none;
	padding: 0px 17px;
	box-sizing: border-box;
	font-weight: 400;
	font-size: 14px;
	color:var(--color2);
	letter-spacing: 0px;
}

#login #log_wrap #email_inp::placeholder,
#login #log_wrap #pasw_inp::placeholder{
	color:var(--color2);
}

#login #log_wrap #username_txt,
#login #log_wrap #password_txt{
	width: 100%;
	height: 35px;
	text-align: left;
	font: normal normal normal 20px/38px Aborm;
	letter-spacing: 0px;
    margin:15px auto 0px auto;
	color: #F4ECE1;
}

#login #log_wrap #logmessage{
	display: none;
	top:508px;
	left:125px;
	width:295px;
	height:70px;
	line-height: 70px;
	background-color:var(--color13);
	color:white;
	border-radius: 17px;
	text-align: center;
	outline: none;
	border:0;
	font-family: Rubik;
	font-weight: 400;
	z-index: 555;	
}

#login #log_wrap #pasw_forg,
#login #log_wrap #ei_tilia_txt1,
#login #log_wrap #ei_tilia_txt2,
#login #log_wrap #ei_tilia_txt3{
	width:100%;
	height: 22px;
	line-height:22px;
	font-weight: 400;
	font-size: 14px;
	text-align: center;
	color:var(--color1);
}

#login #log_wrap #ei_tilia_txt2{
	cursor: pointer;
}


#login #log_wrap #ei_tilia_txt3{
	cursor: pointer;
    margin: 25px auto 10px auto;
}


#login #log_wrap #pasw_forg{
	margin:0px auto 20px auto;
	cursor: pointer;
	font-family: Rubik;
	text-decoration: underline;	
}

#login #log_wrap #ei_tilia_txt1{}

#login #log_wrap #ei_tilia_txt2{
	text-decoration: underline;
}

#login #log_wrap #subnt{
	display: block;
	width:219px;
	height:56px;
	line-height: 56px;
	font-size:19px;
	text-align: center;
	border:0;
	outline: none;
	font-family: Aborm;
	font-weight: 500;
	background-color: var(--color2);
	color: var(--color1);
	border-radius: 17px;
	padding: 0;
	margin: 25px auto;
	cursor: pointer;
}

#login #log_wrap .error_note_wrap{
	position: absolute;
	display: none;
	width:80%;
	height:auto;
	min-height: 380px;
	flex-direction: column;
	align-items: center;
	font-family: Rubik;
	justify-content: center;
	background-color: var(--color1);
	border-radius: 35px;
	margin: auto;
	padding:50px 5%;
	box-sizing: border-box;
	z-index: 9908;	
}

#login #log_wrap .error_note_wrap div:nth-of-type(1){
	width: 100%;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
}

#login #log_wrap .error_note_wrap div:nth-of-type(2){
	width: 100%;
	font-size: 16px;
	line-height: 19px;
	font-weight: 400;
}

#login #log_wrap .error_note_wrap div:nth-of-type(3){
	width: 100%;
}

#login #log_wrap .error_note_wrap div:nth-of-type(3) button {
	width: auto;
	height: 70px;
	line-height: 70px;
	font-size: 18px;
	padding:0px 20px;
	margin: 40px 0px 0px 0px;
	box-sizing: border-box;
	font-family: Aborm;
	background-color:var(--color2);
	color:var(--color1);
	border-radius: 17px;
	outline: none;
	border:0;
}

#login #login_bgr{
	display: none;
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(180,175,175,0.50);
	z-index: 10;
	transform: scale(10);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	
}

/* Tilaaminen */


#tilauksenteko_onnistui_wrap,
#tilauksenteko_epaonnistui_wrap,
#maksukorttiwrap,
#lisaauusikorttiwrap,
#tilaamiswrap, 
#ostoshistoria_wrap {
	position:fixed;
	display: none;
	width:100%;
	height: calc( 100% - 140px);
	top:140px;
	left:0px;
	right:0px;
	bottom:0px;
	box-sizing: border-box;
	white-space: nowrap;
	transition: all 0.4s;
	align-items: center;
	justify-content: start;
	flex-direction: column;
	z-index: 100;
	padding: 50px 0px;
	overflow-y: auto;
	overflow-x:hidden;
}

input[type="radio"]{display:none; }

input[type="radio"]#ox1:checked ~ #tilaamiswrap,
input[type="radio"]#ox2:checked ~ #maksukorttiwrap,
input[type="radio"]#ox3:checked ~ #lisaauusikorttiwrap,
input[type="radio"]#ox4:checked ~ #tilauksenteko_onnistui_wrap,
input[type="radio"]#ox5:checked ~ #tilauksenteko_epaonnistui_wrap,
input[type="radio"]#ox6:checked ~ #ostoshistoria_wrap {
	display:flex;
}

#maksukorttiwrap .maksukorttiwrap_center,
#tilaamiswrap .tilaamiswrap_center,
#lisaauusikorttiwrap .lisaauusikorttiwrap_center,
#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center,
#ostoshistoria_wrap .ostoshistoria_wrap_center {
	display: flex;
	width:96%;
	max-width: 1000px;
	flex-direction: column;
	gap: 10px;
}

#maksukorttiwrap .maksukorttiwrap_center h3,
#tilaamiswrap .tilaamiswrap_center h3,
#lisaauusikorttiwrap .lisaauusikorttiwrap_center h3,
#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center h3,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center h3,
#ostoshistoria_wrap .ostoshistoria_wrap_center h3 {
	font-family: Aborm;
	font-weight: 500;
	font-size: 35px;
	line-height: 35px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice,
#tilaamiswrap .tilaamiswrap_center .slice,
#lisaauusikorttiwrap .lisaauusikorttiwrap_center .slice,
#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center .slice,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center .slice,
#ostoshistoria_wrap .ostoshistoria_wrap_center .slice {
	display: flex;
	width:100%;
	background-color: var(--color4);
	padding: 40px 30px 20px 30px;
	flex-direction: column;
	border-radius: 12px;
	white-space: normal;
	text-align: center;
	box-sizing: border-box;
}

#maksukorttiwrap .maksukorttiwrap_center .slice{
	background-color: transparent;
	padding: 40px 25px 20px 25px;
}

#tilaamiswrap .tilaamiswrap_center .ssee {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap:12px;
}

#tilaamiswrap .tilaamiswrap_center .sss {
	padding:40px 40px;
}

#tilaamiswrap .tilaamiswrap_center .sss div#sscc {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
}

#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center .slice,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center .slice {
	align-items: center;
	justify-content: center;
}

#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center .slice img,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center .slice img {
	width:100px;
	height: auto;
}

#tilaamiswrap .tilaamiswrap_center #codewrap{
	display: none;
	height: auto;
	border:1px solid #07203A;
	border-radius: 100px;
	margin: 20px 0px;
	position: relative;
	overflow: hidden;
	padding: 7px;
	box-sizing: border-box;
}

#tilaamiswrap .tilaamiswrap_center #codewrap_opt{display:none;}

#tilaamiswrap .tilaamiswrap_center #codewrap_opt:checked ~ #codewrap{
	display: flex;
	flex-direction: column;
	
	border:0; 
	border-radius: 20px;
	
	align-items: center;
	justify-content: space-between;
}

#tilaamiswrap .tilaamiswrap_center #codewrap input{
	width:100%;
	height: 60px;
	line-height: 60px;
	font-size: 20px;
	font-family: Rubik;
	font-weight: 400;
	padding: 0px 20px;
	outline: none;
	background-color:rgba(255,255,255,0.0);
	border:0;
	box-sizing: border-box;
}

#tilaamiswrap .tilaamiswrap_center #codewrap.erro {
	background-color:rgba(254, 82, 82, 0.52);
	transition: all 0.4s;
}

#tilaamiswrap .tilaamiswrap_center p#codeinfo{
	text-align: left;
}

#tilaamiswrap .tilaamiswrap_center .slice h5{
	display: flex;
	align-items: center;
	font-size: 22px;
	line-height: 26px;
	font-family: Rubik;
	font-weight: 500;
	margin: 20px auto;
	text-align: center;
}

#tilaamiswrap .tilaamiswrap_center .slice p{
	white-space: normal;
	font-size: 16px;
	line-height: 22px;
	font-family: Rubik;
	font-weight: 400;
	text-align: center;
	margin: 0px;
}

#tilaamiswrap .tilaamiswrap_center .slice h5.hinta{
	margin:25px auto;
}

#ostoshistoria_wrap .ostoshistoria_wrap_center .slice .btn2click,
#tilauksenteko_onnistui_wrap .tilauksenteko_onnistui_wrap_center .slice .btn2click,
#tilauksenteko_epaonnistui_wrap .tilauksenteko_epaonnistui_wrap_center .slice .btn2click,
#maksukorttiwrap .maksukorttiwrap_center .slice .btn2click,
#lisaauusikorttiwrap .lisaauusikorttiwrap_center .slice .btn2click,
#tilaamiswrap .tilaamiswrap_center .slice .btn2click{
	display: inline-block;
	font-family: Rubik;
	font-weight: 300;
	font-size: 21px;
	background-color:var(--color3);
	color:var(--color4);
	border-radius: 50px;
	width:200px;
	min-width: 200px;
	height:60px;
	line-height: 60px;
	text-align: center;
	box-sizing: border-box;
	padding: 0px 20px;
	margin: 20px auto;
	border:0;
	outline: none;
	-webkit-user-select:none;
	user-select:none;
	cursor: pointer;
	transition: all 0.2s;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row .btn2click{
	margin:20px auto 20px 0px;
}

#tilaamiswrap .tilaamiswrap_center .slice .btn2click:hover {
	transform:scale(1.04);
}

#tilaamiswrap .tilaamiswrap_center .sss h5{ margin:20px 0px; height: auto; }
#tilaamiswrap .tilaamiswrap_center .sss .btn2click{ margin: 0; }

#tilaamiswrap .tilaamiswrap_center .btn00{
	text-decoration: none;
	color:inherit;
}

#tilaamiswrap .tilaamiswrap_center #codewrap_opt:checked ~ div label#labelcodebtn.btn2click { display:none; }

#tilaamiswrap .tilaamiswrap_center #codewrap input#koodi{ 
	width: 85%;
	margin: 10px auto;
	border:1px solid var(--color5); 
	border-radius: 100px;
}

#tilaamiswrap .tilaamiswrap_center .sss #codewrap .btn2click{
	width: auto;
	min-width: 155px;
	margin:15px auto 0px auto;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	margin: 0px 0px;
	padding: 0px 0px;
	font-family: Rubik;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row p:nth-of-type(1){
	width: 100%;
	font-size: 13px;
	text-align: left;
	font-weight: 400;
	margin:10px 0px 6px 0px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row p.tb{
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	margin:0px 0px 15px 0px;
}

#hinta02{ text-decoration: line-through; }

#maksukorttiwrap .maksukorttiwrap_center .slice .row .kmpkoodi{
	position: relative;
	display: inline-block;
	width: auto;
	height: 60px;
	line-height: 60px;
	background-color: #E8FEF4;
	border-radius: 50px;
	border:1px solid #009D49;
	padding:0px 80px 0px 25px;
	box-sizing: border-box;
	font-size: 16px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka{
	position: relative;
	display: flex;
	width:100%;
	height:60px;
	padding: 0px 0px;
	border-radius: 100px;
	margin:0px 0px 60px 0px;
	align-items: flex-start;
	border:1px solid var(--color5);
	justify-content: flex-start;	
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .cardbrand,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .cardno,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_valid,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_remove_btn,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_add_btn{
	position: absolute;
	display: inline-flex;
	width: 100%;
	height: 30px;
	line-height: 30px;
	border-radius: 100px;
	padding: 0px 0px;
	align-items: center;
	justify-content: start;
	box-sizing: border-box;
	text-align: center;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .cardbrand{
	background-color: rgba(34,69,170,1.00);
	top:0px;
	bottom:0px;
	margin: auto 0px;
	left:15px;
	width:45px;
	height:30px;
	padding: 0px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .cardbrand img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .cardno{
	width: 100%;
	height: 60px;
	line-height: 60px;
	padding: 0px 0px 0px 70px;
	font-size: 15px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_valid{
	width: 50%;
	top: calc( 100% + 25px );
	left: 0px;
	text-align: left;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_remove_btn,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#kortinpaikka .card_add_btn {
	top: calc( 100% + 15px );
	right:0px;
	background-color: var(--color9);
	width:90px;
	height: 45px;
	line-height: 45px;
	justify-content: center;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#renewing{
	display: inline-block;
	padding: 20px 0px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#renewing p {
	width: 100%;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row#renewing label{
	display: block;
	float:left;
	width:100px;
	height:45px;
	line-height: 45px;
	background-color: var(--color9);
	margin: 0px 5px;
	border-radius: 100px;
	text-align: center;
}


#maksukorttiwrap .maksukorttiwrap_center .slice .row#renewing #renew_off:checked + label,
#maksukorttiwrap .maksukorttiwrap_center .slice .row#renewing #renew_on:checked + label{
	background-color:var(--color3);
	color: var(--color4);
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row .kmpkoodi:after{
	content:"L";
	background-color: #009D49;
	width:30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color:white;
	position: absolute;
	top:0px;
	right:20px;
	bottom:0px;
	transform: rotateZ(407deg) rotateY(180deg);
	margin: auto 0px;
	border-radius: 100px;
}

#maksukorttiwrap .maksukorttiwrap_center .slice .row #etukoodi02{
	text-decoration: underline;
	cursor: pointer;
}