[tasks1-16-wrp] {
        position:relative;
	border:1px solid #e8e8e8;
	width:620px;
	min-height:600px;
	margin:40px auto 0px auto !important;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:16px;
	overflow:hidden;
	background-color:white;
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
}

[tasks1-16-wrp][hide] {
	opacity:0;
}

[t16-poster] {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;

	background-position:50% 50%;
	background-size:cover;
	background-repeat:no-repeat;
	z-index:5;
        opacity: 1;
        transition: opacity 0.5s ease-in-out;

        display:flex;
        justify-content:center;
        align-items:center;
}

[t16-poster][hide] {
	opacity:0 !important;
}

[t16-poster][hide2] {
	display:none;
}

[t16-start-butt] {

        position:absolute;
        left:calc((100% - 150px)/2);
        top:calc((100% - 46px)/2);

	display: block;
	width: 150px;
    height: 46px;
    background-color:#ff6600;
    color:white;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    z-index:6;



}

[t16-start-butt][hide] {
	opacity:0;
}

[t16-start-butt][hide2] {
	display:none;
}


[t16-start-butt]:active {
	transform:translate3d(1px,1px,0px);
}


[t16-game] {
	position:relative;
	opacity:1;
	transition:opacity 0.5s ease-in-out;
	width:100%;
	height:600px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap:wrap;
        /*padding:20px 0px 20px 0px;*/
        z-index:1;
        opacity:1;
}

[t16-game][hide] {
	opacity:0;	
}










[t16-dom-wrp] {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:flex-end;
	column-gap:50px;
	padding:0px 0px 10px 0px;
	background-color:white;
}

[t16-dom1] {
	position:relative;
	flex:0 0 calc((100% - 200px)/3);

        display:flex;
	justify-content:center;
	align-items:flex-end;
	flex-direction:column;
	user-select:none;

	

}



[t16-podval] {
	min-height:80px;
        min-height:50px;/*!!!*/

	width:100%;
        border-left:2px solid black;
        border-right:2px solid black;
        border-bottom:2px solid black;

        display:flex;
	justify-content:center;
	flex-direction:column;
	flex-wrap:wrap;
	padding:8px 8px 8px 8px;

	border-radius:0px 0px 5px 5px;

}





[t16-podval-text] {
        width:100%;
        flex:auto;
        display:flex;
	justify-content:center;
	align-items:center;
	line-height:130%;
	border-radius:3px;
	background-color:rgba(255, 102, 0, 1);
	color:white;

	font-size:16px;
        font-size:14px; /*!!!*/

	font-weight:600;
	padding:8px 8px 8px 8px;
	text-align:center;
}



[t16-attic] {
        position:relative;
	width:100%;
	flex:0 0 50px;
	background-image:url(../images/attic-win.png);
	background-position:50% 100%;
	background-repeat:no-repeat;
	background-size:71px;
        background-size:38px;
}




[t16-roof-left] {
	content:"";
	position:absolute;
	height:2px;
        height:4px;
	background-color:black;
	top:calc((100% - 2px)/2);
        top:calc((100% - 1px)/2);

}

[t16-roof-right] {
	content:"";
	position:absolute;
	height:2px;
        height:4px;
	background-color:black;
	top:calc((100% - 2px)/2);
        top:calc((100% - 1px)/2);

}

[roof-delta] {
        display:none;
	width:20px;
}

[t16-dom2] {
	flex:1;
	width:100%;
	border-left:2px solid black;
        border-right:2px solid black;

        padding:8px 8px 16px 8px;
        padding:8px 8px 0px 8px;  /*!!!*/
}


[t16-dom1][t16-dom-color="1"] [t16-podval] {
	border-left:2px solid rgba(51,153,204,1);
        border-right:2px solid rgba(51,153,204,1);
        border-bottom:2px solid rgba(51,153,204,1);	
}

[t16-dom1][t16-dom-color="1"] [t16-podval-text] {
	background-color:rgba(51,153,204,1);
}


[t16-dom1][t16-dom-color="1"] [t16-dom2] {
	border-left:2px solid rgba(51,153,204,1);
        border-right:2px solid rgba(51,153,204,1);
}

[t16-dom1][t16-dom-color="1"] [t16-roof-left], [t16-dom1][t16-dom-color="1"] [t16-roof-right] {
	background-color:rgba(51,153,204,1);
}

[t16-dom1][t16-dom-color="2"] [t16-podval] {
	border-left:2px solid rgba(142,166,71,1);
        border-right:2px solid rgba(142,166,71,1);
        border-bottom:2px solid rgba(142,166,71,1);	
}

[t16-dom1][t16-dom-color="2"] [t16-podval-text] {
	background-color:rgba(142,166,71,1);
}


[t16-dom1][t16-dom-color="2"] [t16-dom2] {
	border-left:2px solid rgba(142,166,71,1);
        border-right:2px solid rgba(142,166,71,1);
}

[t16-dom1][t16-dom-color="2"] [t16-roof-left], [t16-dom1][t16-dom-color="2"] [t16-roof-right] {
	background-color:rgba(142,166,71,1);
}

[t16-dom1][t16-dom-color="3"] [t16-podval] {
	border-left:2px solid rgba(210,165,19,1);
        border-right:2px solid rgba(210,165,19,1);
        border-bottom:2px solid rgba(210,165,19,1);	
}


[t16-dom1][t16-dom-color="3"] [t16-podval-text] {
	background-color:rgba(210,165,19,1);
}

[t16-dom1][t16-dom-color="3"] [t16-dom2] {
	border-left:2px solid rgba(210,165,19,1);
        border-right:2px solid rgba(210,165,19,1);
}

[t16-dom1][t16-dom-color="3"] [t16-roof-left], [t16-dom1][t16-dom-color="3"] [t16-roof-right] {
	background-color:rgba(210,165,19,1);
}

[t16-dom1][t16-dom-color="4"] [t16-podval] {
	border-left:2px solid rgba(255,102,0,1);
        border-right:2px solid rgba(255,102,0,1);
        border-bottom:2px solid rgba(255,102,0,1);	
}

[t16-dom1][t16-dom-color="4"] [t16-podval-text] {
	background-color:rgba(255,102,0,1);
}

[t16-dom1][t16-dom-color="4"] [t16-dom2] {
	border-left:2px solid rgba(255,102,0,1);
        border-right:2px solid rgba(255,102,0,1);
}

[t16-dom1][t16-dom-color="4"] [t16-roof-left], [t16-dom1][t16-dom-color="4"] [t16-roof-right] {
	background-color:rgba(255,102,0,1);
}








[t16-window] {
	flex:0 0 100%;

	height:0px;

	border-radius:4px;
	margin:0px 0px 0px 0px;
	background-color:rgba(224,242,247,0.4);
	background-image:url(../images/t16_win_2.png);
	background-size:100% 100%;
        display:flex;
	justify-content:center;
	align-items:center;
	font-size:14px;
	font-weight:600;
	line-height:140%;
	text-align:center;
	overflow:hidden;
	transition:height 0.5s ease-in-out, margin 0.5s ease-in-out, padding 0.5s ease-in-out, background-color 0.5s ease-in-out;
	cursor:pointer;

}


[t16-words-place] {
        position:absolute;
        width:100%;
        height:auto;
        left:0px;
        top:0px;

	display:flex;
	justify-content:center;                                             
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;
	padding:0px 4px 0px 4px;
	column-gap:4px;
        row-gap:4px;
        transition:all 0.5s ease-in-out;

}





[t16-w-1] {
        position:relative;
        
        display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	opacity:1;
	background-color:transparent;
        border:1px solid transparent;
        color:transparent;
}


[t16-w] {
        position:absolute;
        left:0px;
        top:0px;
        white-space:nowrap;
	border:1px solid #e8e8e8;
	opacity:1;
	background-color:white;
	color:black;
        transition:background-color 0.5s ease-in-out;
	
}

[t16-w-1], [t16-w] {

	min-height:36px;
	font-size:16px;
	font-weight:500;
	border-radius:8px;
	padding:0px 8px 0px 8px;
        display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	user-select:none;

}

[t16-window] [t16-w] {
	white-space:normal;
}



[t16-w][return] {
	transition:transform 0.5s ease-in-out !important;
}





[t16-w][landing-on] {
        position:relative;
	font-size:14px;
	font-weight:600;
	line-height:140%;
	background-color:transparent;
	border:none;
	padding:0px 0px 0px 0px;
}

[t16-w][t16-w-err] {
	background-color:rgba(255,0,0,0.2);
	transition:background-color 0.5s ease-in-out;
}



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

[t16-game] {
	width:100%;
}

[t16-dom-wrp] {

	column-gap:calc( (100vw - 320px)/(960 - 320) * (50 - 6) + 6px);

}

[t16-dom1] {
	flex:0 0 calc((100% - calc( (100vw - 320px)/(960 - 320) * (50 - 4) + 6px)*4)/3);
}

[t16-attic] {
	flex:0 0 calc( (100vw - 320px)/(960 - 320) * (50 - 30) + 30px);
        background-size:calc( (100vw - 320px)/(960 - 320) * (71 - 32) + 32px);
}

[roof-delta] {
	width:calc( (100vw - 320px)/(960 - 320) * (20 - 3) + 3px);
}


[t16-podval] {
	padding:calc( (100vw - 320px)/(960 - 320) * (8 - 2) + 2px);
        min-height:calc( (100vw - 320px)/(960 - 320) * (80 - 50) + 50px);
}


[t16-podval-text] {
	border-radius:calc( (100vw - 320px)/(960 - 320) * (8 - 4) + 4px);
	font-size:calc( (100vw - 320px)/(960 - 320) * (16 - 12) + 12px);
	padding:calc( (100vw - 320px)/(960 - 320) * (6 - 4) + 4px);
}


[t16-window] {
	min-height:calc( (100vw - 320px)/(960 - 320) * (52 - 32) + 32px);
	border-radius:4px;
	margin:calc( (100vw - 320px)/(960 - 320) * (16 - 4) + 4px) 0px 0px 0px;
	font-size:calc( (100vw - 320px)/(960 - 320) * (14 - 12) + 12px);
        /*padding:0px calc( (100vw - 320px)/(960 - 320) * (8 - 4) + 4px) 0px calc( (100vw - 320px)/(960 - 320) * (8 - 4) + 4px);*/

}

[t16-w][landing-on] {
	font-size:calc( (100vw - 320px)/(960 - 320) * (14 - 12) + 12px);
}


[t16-dom2] {
        padding:calc( (100vw - 320px)/(960 - 320) * (8 - 2) + 2px) calc( (100vw - 320px)/(960 - 320) * (8 - 2) + 2px) calc( (100vw - 320px)/(960 - 320) * (16 - 4) + 4px) calc( (100vw - 320px)/(960 - 320) * (8 - 2) + 2px);
}

	
}









[t16-poster-info] {
	padding:20px 20px 20px 20px;
	background-color:rgba(255,255,255,1);
	border-radius:16px;
        display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	flex:0 0 288px;
        row-gap:20px;
        opacity:1;
        transition:opacity 0.5s ease-in-out;

}

[t16-poster-info][hide] {
	opacity:0;
}


[t16-pi-title] {
	flex:0 0 100%;
	font-size:22px;
	font-weight:600;
	text-align:center;
	line-height:150%;
}




[t16-pi-params] {
	flex:0 0 100%;
        display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	row-gap:20px;
	
}

[t16-pi-params] > span {
	display:block;
	font-size:14px;
	font-weight:500;
	line-height:150%;

}



[t16-pi-butt] {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    height: 51px;
    padding: 0px 0px 0px 0px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    flex:0 0 220px;
    font-size:14px;


background-color:#ff6600;
color:white;



}


[t16-pi-butt]:active {
	transform:translate3d(1px,1px,0px);
}

[header][pc="1"] ~ [content] [t16-pi-butt] {
	background-color:#3399cc;
	color:white;
}

[header][pc="2"] ~ [content] [t16-pi-butt] {
	background-color:#ccee66;
	color:#474747;
}

[header][pc="3"] ~ [content] [t16-pi-butt] {
	background-color:#ffcc00;
	color:#474747;
}

[header][pc="4"] ~ [content] [t16-pi-butt] {
	background-color:#ff6600;
	color:white;
}

[t16-pi-kr] {
	position:relative;
	height:160px;
	width:100%;

}

[t16-pi-img] {
	width:100%;
	height:100%;
	object-fit:contain;
}



[t16-pi-kr2] {
	position:absolute;
	width:107px;
	height:98px;
	left:calc((100% - 107px)/2);
	bottom:-24px;
	background-image:url(../images/kr.png);
}

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

[t16-pi-title] {
	font-size:calc( (100vw - 320px)/(1160 - 320) * (22 - 14) + 14px);	
}

[t16-pi-params] > span {
	font-size:calc( (100vw - 320px)/(1160 - 320) * (14 - 12) + 12px);	
}

[t16-pi-kr] {
	height:calc( (100vw - 320px)/(1160 - 320) * (160 - 80) + 80px);
}



[t16-pi-kr2] {
        width:calc( (100vw - 320px)/(1160 - 320) * (107 - 66) + 66px);
        height:calc( (100vw - 320px)/(1160 - 320) * (98 - 60) + 60px);
	left:calc((100% - calc( (100vw - 320px)/(1160 - 320) * (107 - 66) + 66px))/2);
	bottom:calc( (100vw - 320px)/(1160 - 320) * (0 - 24 + 12) - 12px);
	background-position:50% 50%;
	background-size:cover;
}


[t16-pi-butt] {
    height: calc( (100vw - 320px)/(1160 - 320) * (51 - 38) + 38px);
    flex:0 0 calc( (100vw - 320px)/(1160 - 320) * (220 - 200) + 200px);
    font-size:calc( (100vw - 320px)/(1160 - 320) * (14 - 12) + 12px);
}
}