/*
Theme Name: FaceApe
Template: twentysixteen
Version: 1.0
Author: Hahmo
*/

* {
	color:rgba(0,0,0,0.8);
}

html {
	background-color:#fff;
}
html,
body {
	-webkit-text-size-adjust:none;
	overflow-x: hidden;
}
body {
	font-family:"Palanquin Dark", sans-serif;
	font-weight:normal;
	margin:0;
	position:relative
	background-color:#fff;
}

body,
img {	
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select:none;
	user-select: none; 
}

p {
	font-size:17px;
	line-height:18px;
	margin:12px 0;
	letter-spacing: -0.01em;
}

a {
	text-decoration:none;
}

#sis {
	position:fixed;
	top:4px; right:6px;
	font-size:14px;
	line-height:14px;
	z-index:9;
	cursor:default;
	color:#f00;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

#ylabanneri {
	position: relative;
	left:0; top:0;
	height:140px; width:100%;
	background-color:rgb(51,51,51);
	display:table;
	overflow:hidden;
}

#ylabanneri .mainoskuva {
	position: relative;
	vertical-align: middle;
	text-align: center;
	display: table-cell;
	cursor:pointer;

}
#ylabanneri .mainoskuva > img {
	position:relative;
	width: 90%;
	max-width: 728px;
	-moz-transition: all 300ms ease;
	-webkit-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
html.ei-kosketusnaytto #ylabanneri .mainoskuva > img:hover {
	-moz-transform: scale(1.1) rotate(-5deg);
	-webkit-transform: scale(1.1) rotate(-5deg);
	-o-transform: scale(1.1) rotate(-5deg);
	transform: scale(1.1) rotate(-5deg);
}

#sisalto {
	position: absolute;
	width: 100%;
	height: 100%;
}
#primary {
	position: absolute;
    width: 100%;
    max-width: 540px;
    text-align: center;
	overflow:visible;
}

#masthead {
	position: absolute;
	left:0; top:0;
	width:600px;
	margin-bottom:20px;
	z-index:9;
	background-color:#fff;	
	overflow:visible;

	-webkit-box-shadow: 0px 20px 20px -10px #fff;
	-moz-box-shadow: 0px 20px 20px -10px #fff;
	box-shadow: 0px 20px 20px -10px #fff;
}


.header-fixed #masthead {
	position:fixed;
}
.header-fixed #ylabanneri {
	visibility:hidden;
}



#raami {
	position:relative;
	margin:68px auto 0;
	background-color:#fff;
	box-shadow:0 0 15px rgba(0,0,0,0.25);
	z-index:1;
}
html.mallikuva #raami {
	overflow:hidden;	
}


#raami > canvas {
	cursor:move;
	transition:opacity 700ms;
}
#raami > #first-upload {
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	text-align:center;
	cursor:pointer;
}
#raami > #first-upload > p {
	
	/*
	position:absolute;	
	top:6%;
	*/
	width:170px;
	
	color:rgba(0,0,0,0.8);

	position:relative;
	margin:40% auto 0;
	
	padding:4px 0 10px;
	background-color:rgba(255,240,0,0.85);
	text-align:center;
}
html.ei-kosketusnaytto #raami > #first-upload:hover p {
	background-color:rgb(255,240,0);	
}

#filtterinapit {
	position: absolute;
    max-width: 540px;
    text-align: left;
}
.nappiryhma {
    float: left;
    margin-right: 48px;
    min-width: 96px;
}
.nappiryhman-nimi {
    margin-top:16px;
    margin-bottom:8px;
    cursor:default;
}
.nappiryhman-napit {
    float: left;
}
.filtterinappi {
    position: relative;
    float: left;
    padding: 0 16px 16px 0;
    opacity:1;
	transition:opacity 300ms;
}
.filtterinappi.kuvia-ladataan {
	opacity:0;
}
.filtterinappi canvas {
	border-radius:50%;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}

.currFiltterinappi {
	cursor: pointer;
}

.filtterin-nimi {
	display:none;
}
#filtterin-nimi {
    position: fixed;
	width:0; height:0;
	pointer-events: none;
	z-index: 99;
	display:none;
}
.filtterin-nimi-esilla #filtterin-nimi {
	display:block;
}
#filtterin-nimi > div {
    position: absolute;
    left:0; bottom:0;
    line-height:18px;
    color: rgba(0, 0, 0, 0.8);
    background-color: #fe0;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 13px;
    padding: 0 6px;
    transform-origin: left bottom;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);  
    pointer-events: none;
}



#latausnapit {
	position:relative;
	margin-left:9%;
	/*
	margin-left:auto;
	margin-right:auto;
	*/
	z-index:98 !important;
	width:100%;
	max-width:442.2px;
	height:45px;
}
.latausnappi {
	position:absolute;
	height:38px;
	padding-top:7px;
	width:120px;
}
#tuo {
	text-align:right;
	padding-right:11px;
	right:130px;
	border-right:1.3px solid rgba(0,0,0,0.25);
}
#vie {
	right:0;
	text-align:left;
	padding-left:10px;
	
}
.latausnappi span {
	font-family:"Palanquin Dark", sans-serif;
	font-weight:normal;
    font-size: 15.5px;
    letter-spacing: -0.03em;
    color: rgba(0, 0, 0, 0.9);
    transition:font-size 300ms;
    text-transform:uppercase;
}
.tuo,
html:not(.mallikuva) .vie {
	cursor: pointer;
}
html.ei-kosketusnaytto #masthead .tuo:hover,
html.ei-kosketusnaytto:not(.mallikuva) #masthead .vie:hover {
    color: rgba(0, 0, 0, 0.6);
}



.pikaohje {
	position:absolute;
	/* background-color:rgba(0,0,0,0.7); */
	background-color:rgba(255,255,255,1);	
	color:rgba(0,0,0,0.8);
	font-size:15px;
	line-height:16px;
	padding:10px 10px 12px;
	font-weight:bold;
	text-align:left;
	transition:opacity 300ms;
	opacity:0;
	top:-9999px;
	text-transform:none;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
#vie-pikaohje {
	width:90px;
	right:10px;
}

html.mallikuva #vie span.vie {
	color: rgba(0, 0, 0, 0.3);
	cursor:default;
}

html.ei-kosketusnaytto.mallikuva #vie span.vie:hover #vie-pikaohje {
	top:35px;
	opacity:1;	
}
#ylapalkki {
	position:absolute;
	top:0; left:-5000px;
	height:45px; width:20000px;
	/* opacity:0.9; */
	z-index:1;
}
.vaihtuva-vari {
	background-color: #fe0;
	transition:background-color 600ms;
}

#sidebar {
	position:absolute;	
    width:336px;
	margin-top:44px;
	z-index:10;
}

.sidebar-moduuli {
	width:336px;
	margin:0 0 20px;
}

.sidebar-mainos {
	cursor:pointer;
	position:relative;
	height:280px;
	-moz-transition: all 300ms ease;
	-webkit-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
html.ei-kosketusnaytto .sidebar-mainos:hover {
	-moz-transform: scale(1.1) rotate(-5deg);
	-webkit-transform: scale(1.1) rotate(-5deg);
	-o-transform: scale(1.1) rotate(-5deg);
	transform: scale(1.1) rotate(-5deg);
	z-index:999;
}

.rotate-ad {
	-moz-transform: scale(1.1) rotate(-5deg);
	-webkit-transform: scale(1.1) rotate(-5deg);
	-o-transform: scale(1.1) rotate(-5deg);
	transform: scale(1.1) rotate(-5deg);
	z-index:999;
}





#ohjeet {
	font-family:"Palanquin", sans-serif;
	font-weight:normal;
	cursor: default;
	padding-bottom: 5px;
	border-bottom: 4px solid rgba(0, 0, 0, 0.8);
}
#ohjeet h2 {
	font-family:"Palanquin Dark", sans-serif;
	font-weight:normal;
	font-size: 31px;
	line-height: 26px;
	letter-spacing: -0.03em;
	margin: 0 !important;
	padding: 24px 0 12px !important;
}
#ohjeet strong {
	font-family:"Palanquin Dark", sans-serif;
	font-weight:normal;
}

html.ei-kosketusnaytto #ohjeet span.tuo .taustavari,
html.ei-kosketusnaytto:not(.mallikuva) #ohjeet span.vie .taustavari {	
	background-color:rgba(255,240,0,0.85);
	padding:0 6px 1px;
}
html.ei-kosketusnaytto #ohjeet span.tuo:hover .taustavari,
html.ei-kosketusnaytto:not(.mallikuva) #ohjeet span.vie:hover .taustavari {
	background-color:rgba(250,230,0,1);
}


#copyright {
	font-family:"Palanquin", sans-serif;
	font-weight:normal;
	text-transform:uppercase;
    font-size: 10px;
    cursor:default;
    clear:both;
    padding:16px 0;
    width:75%;
}
html.ei-kosketusnaytto #copyright {
	font-size: 10.5px;
}

#copyright a {
   cursor:pointer;
}

#dropzone-hmi-bg {
	position:fixed;
	left:-1000px; top:-1000px;
	width:20000px; height:20000px;
	background-color:rgba(255,240,0,0.9);
	z-index:999;
	display:none;
	transition:background-color 300ms;
}
html.hmi-on #dropzone-hmi-bg {
	display:block;
}

#dropzone-hmi {
	position:fixed;
	left:0; top:0;
	width:100%; height:100%;
	z-index:999;
	display:none;
}
html.hmi-on #dropzone-hmi {
	display:table;
}
.virhe #dropzone-hmi {
	background-color:#ff1a57;
	transition:background-color 0ms;
}

#trademark {
	position:absolute;	
	top:-8px;
	left:-30px;
	width:160px;

	transform-origin:right top;
	-ms-transform:rotate(-45deg); /* IE 9 */
    -webkit-transform:rotate(-45deg); /* Chrome, Safari, Opera */
    transform:rotate(-45deg);
    z-index:99;
    
    transition-property: width;
    transition-duration: 300ms;   

}


#trademark img {
	width:100%;
}
h1 {
	display:none;
}

@keyframes vilkutus1 { 
	from {
		opacity:0.8;
	} 
}
@keyframes vilkutus2 { 
	from {
		opacity:0.5;
	} 
}

.blink #dropzone-hmi-message span.piste {
	opacity:0;
}
@keyframes piste { 
	from {
		opacity:0;
	}
	to {
		opacity:1;
	} 
}
#dropzone-hmi-message span.piste {
	font-size:36px;
	margin:0 3px;
}
.blink #dropzone-hmi-message span.piste:nth-child(1) {
	animation:piste 600ms infinite alternate;
	animation-delay:0ms;
}
.blink #dropzone-hmi-message span.piste:nth-child(2) {
	animation:piste 600ms infinite alternate;
	animation-delay:300ms;
}
.blink #dropzone-hmi-message span.piste:nth-child(3) {
	animation:piste 600ms infinite alternate;
	animation-delay:600ms;
}

#dropzone-hmi-message span.ok,
#dropzone-hmi-message span.no-thanks {
	position:relative;
	padding:8px 20px 12px;
	margin:0 8px;
	top:30px;
	width:auto;
	cursor:pointer;
	color:rgba(0,0,0,0.8);
	background-color:#fff;
}
#dropzone-hmi-message span.got-it {
	position:relative;
	padding:0 8px 2px;
	margin:0 8px;
	font-size:14px;
	top:16px;
	width:auto;
	cursor:pointer;
	color:rgb(255,240,0);
	background-color:rgba(0,0,0,0.8);
}

.virhe #dropzone-hmi-message span.ok {
	animation:vilkutus2 600ms infinite alternate;
}
html.ei-kosketusnaytto:not(.virhe) #dropzone-hmi-message span.ok:hover,
html.ei-kosketusnaytto:not(.virhe) #dropzone-hmi-message span.no-thanks:hover {
	background-color:rgba(255,255,255,0.7);
}
html.ei-kosketusnaytto:not(.virhe) #dropzone-hmi-message span.got-it:hover {
	background-color:rgba(255,255,255,0.7);
	color:rgba(0,0,0,0.8);
}

:not(.virhe) .blink #dropzone-hmi {
	animation:vilkutus1 1s infinite alternate;
}

#dropzone-hmi .katkoviiva {
	position:absolute;
	border:1px dashed rgba(0,0,0,0.3);
	left:10px; top:10px;
	right:10px; bottom:10px;
	opacity:0;
	display:none;
	transition:opacity 300ms;
}
#dropzone-hmi.katkoviivalla .katkoviiva {
	display:block;
	opacity:1;
}

.message,
#dropzone-hmi-message {
	font-size:30px;
	line-height:36px;
	color:rgba(0,0,0,0.8);
	transition:font-size 300ms;
	transition:line-height 300ms;
}

#dropzone-hmi-message {
	vertical-align:middle;
	text-align:center;
	display:table-cell;
	padding:0 20% 8%;
	cursor:default;
}
.virhe #dropzone-hmi-message {
	color:#fff;
}

#dropzone-hmi-message h2 {
	font-size:25px;
	line-height:21px;
}
#dropzone-hmi-message p {
	font-size:16px;
	line-height:16px;
}

html.ei-kosketusnaytto #dropzone-hmi-message .tuo strong.taustavari,
html.ei-kosketusnaytto:not(.mallikuva) #dropzone-hmi-message .vie strong.taustavari {
	background-color:#fff;
	padding:0 8px 2px;
}
html.ei-kosketusnaytto #dropzone-hmi-message .tuo:hover strong.taustavari,
html.ei-kosketusnaytto:not(.mallikuva) #dropzone-hmi-message .vie:hover strong.taustavari {
	background-color:rgba(255,255,255,0.7);
	color:rgba(0,0,0,0.8);

}

.saadin {
	position:absolute;
	right:-52px;
	cursor:pointer;
	border-radius:50%;
	width:36px; height:36px;
	background-image:url("src/reunus.png");
	background-size:cover;
}

html.mallikuva .saadin {
	display:none;
}

.saadin .maski,
.saadin img {
	position:absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
}

.saadin img {
	opacity: 0.8;
	transition:opacity 150ms;
}

#pyorita {
	top:11%;
}
#plus {
	top:39%;
}
#miinus {
	top:67%;
}
html.ei-kosketusnaytto .saadin:hover img,
.minimiskaalaus .saadin#miinus img,
.maksimiskaalaus .saadin#plus img {
	opacity:0.5;
}
.minimiskaalaus .saadin#miinus,
.maksimiskaalaus .saadin#plus {
	cursor:default;
}

#infonappi {
	position:absolute;
	top:4px;
	/* right:32px; */

	font-size:21px;
	line-height:32px;
	color:rgba(0,0,0,0.8);
	cursor:pointer;
	z-index:11;
	text-align:center;
	border-radius:50%;
	width:36px; height:36px;
	background-image:url("src/reunus.png");
	background-size:cover;
	transition:color 150ms;

	transition:right 300ms;
}
html.ei-kosketusnaytto #infonappi:hover {
	color:rgba(0,0,0,0.4);
}



/**************************************** ALOITUSRUUTU */

.aloitusruutu {
	z-index:99;
}
.aloitusruutu#pohja {
	position:fixed;
	left:0; top:0;
	width:100%; height:100%;
	background-color:#ffe700;
	text-align:center;
	display:table;
}
.aloitusruutu#pohja #faceape-tm {
	position:relative;
	display:table-cell;
	width:60%;
	vertical-align:middle;
}
.aloitusruutu#pohja #faceape-tm img {
	width:100%;
	opacity:0.8;
}
.aloitusruutu.message {
	position:fixed;
	left:2%;
	bottom:15%;
	transition:font-size 600ms;
}

.aloitusruutu.message span.piste:nth-child(1) {
	animation:piste 600ms infinite alternate;
	animation-delay:0ms;
}
.aloitusruutu.message span.piste:nth-child(2) {
	animation:piste 600ms infinite alternate;
	animation-delay:300ms;
}
.aloitusruutu.message span.piste:nth-child(3) {
	animation:piste 600ms infinite alternate;
	animation-delay:600ms;
}
.aloitusruutu.message span.piste {
	font-size:34px;
	margin:0 2px 0 4px;
}




#no-js-ruutu {
	z-index:100;
	position:fixed;
	left:-500px; top:-500px;
	width:20000px; height:20000px;
	background-color:#ff1a57;
}
#no-js-ruutu .message {
	font-size:36px;
	position:fixed;
	left:2%;
	bottom:15%;
	width:220px;
	color:#fff;
}
html.js #no-js-ruutu {
	display:none;
}


/**
 * <= 480
 */
@media screen and (max-width: 480px) {
    #trademark {
		width:110px;
    }
}

/**
 * <= 600
 */
@media screen and (max-width: 600px) {

    #latausnapit {
		margin-left:-50px;
	}
	.latausnappi span {
		font-size: 13.5px;
	}
	
	.aloitusruutu.message {
		font-size:18px;
	}
	#dropzone-hmi-message {
		font-size:20px;
		line-height:24px;
	}
	.aloitusruutu.message span.piste,
	#dropzone-hmi-message span.piste {
		font-size:22px;
		margin:0 1px 0 2px;
	}
	#dropzone-hmi-message span.ok,
	#dropzone-hmi-message span.no-thanks {
		font-size:15px;
		padding:6px 15px 9px;
		margin:0 5px;
	}
}

/**
 * <= 640
 */
@media screen and (max-width: 640px) {
	#sidebar {
		display: none;
	}
}


@media (max-device-width:480px){
	/*
	#raami {
		margin-left:20%;
	}

	.saadin {
		right:-20px;
	}
	*/
}
@media (max-device-height:640px){
	
	#raami {
		margin-top:28px;
	}
	#masthead {
		height:280px;
	}
	#filtterinapit {
		top:280px;
	}
}