@font-face{
	font-family: badaboom;
	src: url("BADABB__.TTF");
}

@font-face{
	font-family: komika;
	src: url("KOMTITP_.ttf");
}


*{
	font-family: sans-serif;
	font-size:1.6vmin;
}

a{
	text-decoration:none;
	color:black;
}

body{
	width: 100vw;
	min-height:100vh;
	margin:0;
	padding:0;
	position:absolute;
	overflow-x:hidden;
}

header{
	width:100vw;
	position:relative;
	display:block;
	height: 60vh;
}

footer{
	width:100vw;
	position:relative;
	display:block;
	background-color: #dbc8b8;
	text-align:center;
	padding-top: 2vmin;
	padding-bottom: 2vmin;
}

content{
	display:block;
	width:200vw;
	background-color: #f4f4f4;
	position:relative;
	min-height: 30vh;
	overflow:hidden;
}

content::after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	transform: rotate(4deg) translate(-10vmin, -10vmin);
	opacity: 0.4;
	width:200%;
	height:200%;
	background:url('dot.svg');
	background-size: 1vmin;
}

div.container, div#prlar{
	z-index:99;
	position:relative;
	display:inline-block;
	width: 60vw;
	padding:2vmin;
	padding-left:3vmin;
	padding-right:3vmin;
	margin-left: calc(20vw - 3vmin);
	margin-right: calc(40vw - 20vw - 3vmin);
	transition: transform 1s;
	opacity:1;
}

div.container.hide{
	transform: translateX(-100vw);
}

div.container.next{
	opacity:0;
	transform: translateX(100vw);
}

div#prlar{
	float:right;
	opacity:0;
	transform: translateX(0vw);
}

div#prlar.gone{
	transform: translateX(-200vw);
	opacity:1;
}

div#prlar.show{
	opacity:1;
	transform: translateX(-100vw);
}

div.container p{
	text-align:justify;
}

h1{
	font-size: 2.5vmin;
    font-weight: lighter;
}

h2{
	font-size: 2vmin;
    font-weight: lighter;
}

h1.arttitle{
	font-size:3.2vmin;
	color:#c70909;
	font-family:komika;
	letter-spacing:0.2vmin;
	text-shadow: 0.2vmin 0.2vmin 0 rgb(0,0,0);
}

.fb-page{
	float:right;
	border:1vmin solid #3b5998;
	margin:2vmin;
	box-shadow:0.2vmin 0.2vmin 1vmin 0 rgba(0, 0, 0, 0.39);
	width:500px;
}

.fb-page::after{
	content: 'Facebook | Cosmetico';
    background-color: #3b5998;
    display: block;
    position: absolute;
    bottom: 0;
    transform: translateY(110%) translateX(0.99vmin);
    padding: 0.3vmin;
    color: white;
    right: 0;
}

#gmapsembed{
	border:1vmin solid white;
	box-shadow:0.2vmin 0.2vmin 1vmin 0 rgba(0, 0, 0, 0.39);
	width:calc(100% - 2vmin);
}

.footercont{
	display:inline-block;
}

footer div.footersec{
	display:inline-block;
	float:left;
	padding-left:5vmin;
	padding-right:5vmin;
}

span.large_title{
	font-family:komika;
	letter-spacing:0.5vmin;
    position: absolute;
    font-size: 4.2vmin;
    text-shadow: 0.3vmin 0.3vmin #000000, 2vmin 1.5vmin 0 rgba(0,0,0,0.1);
    color: white;
    text-align: right;
	top: calc((60vh - 5vmin)/2);
    transform: skewX(24deg) translateY(-50%);
    right: 12vmin;
}

span.comp_name{
	font-family:komika;
    position: absolute;
    font-size: 15vmin;
	letter-spacing:0.6vmin;
    text-shadow: 0.5vmin 0.5vmin rgba(0,0,0,0.8), 2vmin 1.5vmin 0 rgba(0,0,0,0.1);
    color: white;
    top: 2vmin;
    text-align: right;
    left: 5vmin;
	transition: transform 1s;
	transform-origin:left;
}

span.comp_name.small{
	transform:scale(0.4) translate(0, 70vh);
}

.sc001{
	position:fixed;
	width:100vw;
	top:0;
	left:0;
	height:calc(60vh - 5vmin);
	background-color:#dbc8b8;
	overflow:hidden;
}

.sc001 img{
	width:100%;
	transform:translate(0px,-7.5vmin);
}

.swipecard{
	position:absolute;
	display: block;
	height:calc(60vh - 5vmin);
	width: 100%;
	box-shadow: 0.4vmin 0.2vmin 1vmin 0 rgba(0, 0, 0, 0.38823529411764707);
	overflow:hidden;
	transition: transform 1s;
}


.swipecard::before{
	content: '';
	position:absolute;
	width:200%;
	height:200%;
	background: url('dot.svg');
	background-size: 0.7vmin;
	transform: skewX(24deg) translate(-10vmin, -10vmin);
}

#sc1{
	background-color: #c70909;
	z-index: 90;
}

#sc2{
	background-color: #ddb724;
	z-index: 89;
}

#sc3{
	background-color: #365a58;
	z-index: 88;
}

#sc1 *, #sc2 *, #sc3 *{
	opacity:0;
	transition: opacity 1.5s;
}

/* Red Active */

.sc001.anim1 #sc1{
    transform: skewX(-24deg) translateX(-15vw);
}

.sc001.anim1 #sc1 *{
	opacity:1;
}

.sc001.anim1 #sc2{
    transform: skewX(-24deg) translateX(-10vw);
}

.sc001.anim1 #sc3{
    transform: skewX(-24deg) translateX(-5vw);
}

/* Yellow Active */

.sc001.anim2 #sc1{
    transform: skewX(-24deg) translateX(-85vw);
}

.sc001.anim2 #sc2{
    transform: skewX(-24deg) translateX(-15vw);
}

.sc001.anim2 #sc2 *{
	opacity:1;
}

.sc001.anim2 #sc3{
    transform: skewX(-24deg) translateX(-10vw);
}


/* Green Active */

.sc001.anim3 #sc1{
    transform: skewX(-24deg) translateX(-90vw);
}

.sc001.anim3 #sc2{
    transform: skewX(-24deg) translateX(-85vw);
}

.sc001.anim3 #sc3 *{
	opacity:1;
}

.sc001.anim3 #sc3{
    transform: skewX(-24deg) translateX(-15vw);
}

/* Beige Active */

.sc001.anim4 #sc1{
    transform: skewX(-24deg) translateX(-95vw);
}

.sc001.anim4 #sc2{
    transform: skewX(-24deg) translateX(-90vw);
}

.sc001.anim4 #sc3{
    transform: skewX(-24deg) translateX(-85vw);
}

nav.navigator{
	display: block;
	top: calc(60vh - 5vmin);
	position:relative;
	width:100vw;
	height: 5vmin;
	background-color: white;
	text-align:center;
	padding:0;
	z-index:199;
	box-shadow: 0 0.3vmin 0.2vmin 0 rgba(0,0,0,0.14);
}

nav.navigator.fixedpos{
	position:fixed;
	top:0;
}

.navigator ul{
	list-style: none;
	height: 5vmin;
	margin:0;
	padding:0;
	display:inline-block;
}

.navigator ul li{
	float:left;
	height: 5vmin;
}

.navigator ul li a{
	padding-left: 1vmin;
	padding-right: 1vmin;
	display:inline-block;
	line-height: 5vmin;
}

.navigator ul li.selected a{
	background-color: #c70909;
	color:white;
}

.navigator ul li.selected a:hover{
	background-color: #d81a1a;
}


.navigator ul li a:hover:after, .navigator ul li.selected a::after{
	content: "";
    position: absolute;
    display: block;
    transform: translateY(-100%);
    background-image: url(sparkle_small.gif);
    background-size: cover;
    width: 5vmin;
    height: 5vmin;
}

.arttitle::after{
	content: "";
    position: absolute;
    display: block;
    transform: translateY(-100%);
    background-image: url(sparkle_small.gif);
    background-size: contain;
    opacity: 0.2;
    width: 100%;
    height: 5vmin;
}

 .navigator ul li.selected a::after{
	 opacity:0.4;
 }

.navigator ul li a:hover{
	background-color: #eed9c9;
}

.sidebaropener{
	display:none;
}

button:focus{
	outline:none;
}

a.phonebttn{
	background-color: #57bb63;
    border: 0.3vmin solid #075e54;
    text-shadow: none;
    padding: 2vmin;
    color: white;
    font-size: 2vmin;
    letter-spacing: 0.2vmin;
}

a.whatsappbttn{
	background-color: #57bb63;
    border: 0.3vmin solid #075e54;
    text-shadow: none;
    padding: 2vmin;
    font-family: sans-serif;
    color: white;
    font-size: 2vmin;
    letter-spacing: 0.2vmin;
}

a.whatsappbttn.mobile, a.phonebttn.mobile{
	display:none;
}

a.phonebttn, a.whatsappbttn{
	height:5vmin;
}

a.phonebttn::before{
	content:"☎";
	margin-right:3vmin;
	font-size:3.5vmin;
}

a.whatsappbttn::before{
	content: "";
    height: 5vmin;
    display: inline-block;
    background-repeat: no-repeat;
    width: 5vmin;
    background-image: url(whatsapp-icon.png);
    background-size: cover;
    transform: translateY(1.9vmin);
    position: relative;
}

img.sticker{
	transform: skew(24deg) translate(-11vmin, 4vmin);
    width: 32%;
    filter: drop-shadow(0.2vmin 0.2vmin 0.2vmin black);
    position: absolute;
    bottom: 0;
    right: 0;
}

@media screen and (max-width: 768px) {
  	*{
		font-size:4vmin;
	}

	.sc001 img {
		height: 100%;
		width:auto;
		right:0;
		position:absolute;
		margin-top:0;
		transform:none;
	}
	
	span.comp_name {
		top: 20vmin;
		text-align: right;
		font-size:12vmin;
		left: 5vmin;
		transition: none;
	}

	span.comp_name.small{
		transform: scale(0.4) translateY(-50%) translateX(100vw);
		position:fixed;
		top: 0;
		z-index: 999;
		color: black;
		right: 0;
		left: initial;
		text-shadow:none;
	}

	.swipecard{
		height:100%;
		width: 100vw;
	}
	
	/* Red Active */

	.sc001.anim1 #sc1{
		transform: translateX(-10vw);
	}

	.sc001.anim1 #sc1 *{
		opacity:1;
	}

	.sc001.anim1 #sc2{
		transform: translateX(-5vw);
	}

	.sc001.anim1 #sc3{
		transform: translateX(0vw);
	}

	/* Yellow Active */

	.sc001.anim2 #sc1{
		transform: translateX(-95vw);
	}

	.sc001.anim2 #sc2{
		transform: translateX(-10vw);
	}

	.sc001.anim2 #sc2 *{
		opacity:1;
	}

	.sc001.anim2 #sc3{
		transform: translateX(0vw);
	}


	/* Green Active */

	.sc001.anim3 #sc1{
		transform: translateX(-100vw);
	}

	.sc001.anim3 #sc2{
		transform:translateX(-95vw);
	}

	.sc001.anim3 #sc3 *{
		opacity:1;
	}

	.sc001.anim3 #sc3{
		transform: translateX(0);
	}

	/* Beige Active */

	.sc001.anim4 #sc1{
		transform: skewX(-24deg) translateX(-95vw);
	}

	.sc001.anim4 #sc2{
		transform: skewX(-24deg) translateX(-90vw);
	}

	.sc001.anim4 #sc3{
		transform: skewX(-24deg) translateX(-85vw);
	}
	
	
	footer div.footersec{
		float:none;
		width:calc(100% - 10vmin);
		margin-bottom:3vmax;
		margin-top:3vmax;
	}

	div.container, div#prlar{
		width: calc(100vw - 6vmin);
		margin:0;
	}

	h1{
		font-size: 5.5vmin;
	}

	h2{
		font-size: 4vmin;
	}

	h1.arttitle{
		font-size:5.2vmin;
		color:#c70909;
		font-family:komika;
		letter-spacing:0.2vmin;
		text-shadow: 0.2vmin 0.2vmin 0 rgb(0,0,0);
	}

	nav.navigator{
		top: 15vmin;
		width:80vw;
		position:fixed;
		height: calc(100vh - 10vmin);
		text-align:left;
		box-shadow: none;
		background:rgba(255,255,255,0.95);
		transition:transform 0.5s;
		transform: translateX(-100%);
	}

	nav.navigator.open{
		transform: translateX(0%);
	}

	nav.navigator.fixedpos{
		top:15vmin;
	}

	.navigator ul{
		list-style: none;
		height: auto;
		margin:0;
		padding:0;
		display:inline-block;
	}

	.navigator ul li{
		float:none;
		height: 10vmin;
		width:80vw;
		margin-bottom:2vmin;
		margin-top:2vmin;
	}

	.navigator ul li a{
		font-size: 5vmin;
		padding-left: 4vmin;
		padding-right: 1vmin;
		display:inline-block;
		line-height: 10vmin;
		width:calc(80vw - 5vmin);
	}

	.navigator ul li.selected a{
		background-color: #c70909;
		color:white;
	}

	.navigator ul li.selected a:hover{
		background-color: #d81a1a;
	}
	

	.navigator ul li a:hover{
		background-color: #eed9c9;
	}

	.sc001{
		top: 15vmin;
		height: calc(60vh - 15vmin);
	}

	.sidebaropener{
		display:block;
		background-color:white;
		position:fixed;
		height:15vmin;
		width:100vw;
		z-index:299;
	}

	.sidebaropener button{
		height: 15vmin;
		width:15vmin;
		border:none;
		background:url('imgs/menu-open-icon.svg');
		background-size: 85%;
		background-position:center;
		background-repeat:no-repeat;
	}

	
	.fb-page{
		max-width:calc(100% - 2vmin);
		overflow:hidden;
		margin:0;
		margin-bottom: 3vmin;
	}

	span.large_title{
		right:5vmin;
		top: calc((60vh - 15vmin)/2);
		transform: translateY(-50%);
	}

	img.sticker{
		transform: translate(-11vmin, 2vmin);
		height: 40%;
		width:auto;
		filter: drop-shadow(0.2vmin 0.2vmin 0.2vmin black);
		position: absolute;
		bottom: 0;
		right: 0;
	}

	a.whatsappbttn.mobile, a.phonebttn.mobile{
		display:inline-block;
		width:calc(100% - 4vmin);
		height:10vmin;
		line-height:10vmin;
		font-size:4vmin;
		font-weight:bold;
		margin-bottom:4vmin;
	}
	
	
	
	a.whatsappbttn.mobile::before{
		height: 10vmin;
		display: inline-block;
		background-repeat: no-repeat;
		width: 10vmin;
		background-image: url(whatsapp-icon.png);
		background-size: cover;
		transform: none;
		float:left;
		position: relative;
	}

}