@font-face {
    font-family: Cooper Black Regular;
    src: url(style/"Cooper.ttf");
}


*,*::after,*::before{-webkit-box-sizing:border-box;box-sizing:border-box}
html{font-size:62.5%}
body{font-size:1.6rem;
	font-family:droid sans,sans-serif;color:#dbe2e9;background:none}
	a{color:#89ba2c;text-decoration:none}
	.cd-main-content{text-align:center}
	.cd-main-content h1{font-size:2rem;color:#64788c;padding:4em 0}
	.cd-btn{position:relative;display:inline-block;padding:1em 2em;
		background-color:#89ba2c;
		color:#fff;
		border-radius:50em;
		-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 5px rgba(0,0,0,.1);
		box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 5px rgba(0,0,0,.1);
		-webkit-transition:-webkit-box-shadow .2s;
		transition:-webkit-box-shadow .2s;
		transition:box-shadow .2s;
		transition:box-shadow .2s,-webkit-box-shadow .2s}
		.cd-btn:hover{
			-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 20px rgba(0,0,0,.3);
			box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 20px rgba(0,0,0,.3)}
		@media only screen and (min-width:1170px){
			.cd-main-content h1{font-size:3.2rem}
		}
			.cd-panel{
				position:fixed;
				top:0;
				left:0;
				height:100%;
				width:100%;
				visibility:hidden;-webkit-transition:visibility 0s .6s;
				transition:visibility 0s .6s;z-index:10}
				.cd-panel::after{content:'';
				position:absolute;top:0;left:0;width:100%;
				height:100%;background:0 0;cursor:pointer;
				-webkit-transition:background .3s .3s;transition:background .3s .3s}
				.cd-panel.cd-panel--is-visible{visibility:visible;
					-webkit-transition:visibility 0s 0s;
					transition:visibility 0s 0s}
					.cd-panel.cd-panel--is-visible::after{background:rgba(0,0,0,.6);
						-webkit-transition:background .3s 0s;
						transition:background .3s 0s}
.cd-panel__header{
	position:fixed;
	width:90%;
	height:50px;line-height:50px;
	background:rgba(255,255,255,.96);
	z-index:5;
	-webkit-box-shadow:0 1px 1px rgba(0,0,0,.08);
	box-shadow:0 1px 1px rgba(0,0,0,.08);
	-webkit-transition:-webkit-transform .3s 0s;
	transition:-webkit-transform .3s 0s;
	transition:transform .3s 0s;
	transition:transform .3s 0s,-webkit-transform .3s 0s;
	-webkit-transform:translateY(-50px);
	transform:translateY(-50px)}
	
	.cd-panel__header p.title{
	font-size:1.6rem;
	color:#89ba2c;
	padding-left:5%}
	.cd-panel--from-right .cd-panel__header{right:0}
	.cd-panel--from-left .cd-panel__header{left:0}
	.cd-panel--is-visible .cd-panel__header{
		-webkit-transition:-webkit-transform .3s .3s;
		transition:-webkit-transform .3s .3s;
	transition:transform .3s .3s;
	transition:transform .3s .3s,-webkit-transform .3s .3s;
	-webkit-transform:translateY(0px);transform:translateY(0px)}
	@media only screen and (min-width:768px){
	.cd-panel__header{width:70%}}
	@media only screen and (min-width:1170px){
	.cd-panel__header{width:50%}}
	.cd-panel__close{position:absolute;
	top:0;
	right:0;
	height:100%;
	width:60px;
	display:inline-block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap}
		.cd-panel__close::before,.cd-panel__close::after{
			content:'';
			position:absolute;
			top:22px;
			left:20px;
			height:3px;
			width:20px;
	background-color:#424f5c;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden}
	.cd-panel__close::before{-webkit-transform:rotate(45deg);
	transform:rotate(45deg)}
	
	.cd-panel__close::after{-webkit-transform:rotate(-45deg);
	
	transform:rotate(-45deg)}
	
	.cd-panel__close:hover{background-color:#424f5c}
	.cd-panel__close:hover::before,.cd-panel__close:hover::after{
		background-color:#fff;
	-webkit-transition:-webkit-transform .3s;
	transition:-webkit-transform .3s;transition:transform .3s;
	transition:transform .3s,-webkit-transform .3s}
	.cd-panel__close:hover::before{
		-webkit-transform:rotate(220deg);
	transform:rotate(220deg)}
	.cd-panel__close:hover::after{-webkit-transform:rotate(135deg);
		transform:rotate(135deg)}
.cd-panel--is-visible .cd-panel__close::before{
	-webkit-animation:cd-close-1 .6s .3s;
	animation:cd-close-1 .6s .3s}
	.cd-panel--is-visible .cd-panel__close::after{
		-webkit-animation:cd-close-2 .6s .3s;animation:cd-close-2 .6s .3s}
	@-webkit-keyframes cd-close-1{0%,50%{-webkit-transform:rotate(0deg);
	transform:rotate(0deg)}100%{-webkit-transform:rotate(45deg);
	transform:rotate(45deg)}}
	@keyframes cd-close-1{0%,50%{-webkit-transform:rotate(0deg);
	transform:rotate(0deg)}
	100%{-webkit-transform:rotate(45deg);
	transform:rotate(45deg)}}
	@-webkit-keyframes cd-close-2{0%,50%{-webkit-transform:rotate(0deg);
	transform:rotate(0deg)}
	100%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}
	@keyframes cd-close-2{0%,50%{-webkit-transform:rotate(0deg);
		transform:rotate(0deg)}
		100%{-webkit-transform:rotate(-45deg);
		transform:rotate(-45deg)}}
	.cd-panel__container{position:fixed;
		width:90%;
		height:100%;
		top:0;background:#dbe2e9;z-index:4;
		-webkit-transition:-webkit-transform .3s .3s;
		transition:-webkit-transform .3s .3s;
		transition:transform .3s .3s;
		transition:transform .3s .3s,-webkit-transform .3s .3s}
		.cd-panel--from-right .cd-panel__container{
			right:0;-webkit-transform:translate3d(100%,0,0);
			transform:translate3d(100%,0,0)}
		.cd-panel--from-left .cd-panel__container{
			left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
		.cd-panel--is-visible .cd-panel__container{
			-webkit-transform:translate3d(0,0,0);
			transform:translate3d(0,0,0);
			-webkit-transition-delay:0s;transition-delay:0s}
		@media only screen and (min-width:768px){.cd-panel__container{width:70%}}
		@media only screen and (min-width:1170px){.cd-panel__container{width:50%}}
		.cd-panel__content{
			position:absolute;
			top:0;
			left:0;width:100%;
			height:100%;
			padding:70px 5%;overflow:auto;-webkit-overflow-scrolling:touch}
	.cd-panel__content p{
		font-size:1.4rem;
		color:#424f5c;
		line-height:1.4;
		margin:2em 0}
		.cd-panel__content p:first-of-type{margin-top:0}


/*checkbox*/
.checkbox{
	display: inline-block;
    /*box-shadow: 0 9px #999;*/
  	cursor:pointer;
}

.checkbox:hover {}

.checkbox:active {
  
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.skin_info .dryness-title {
  text-align: center;
  font-family: 'Coop', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: bold;
  color: #afffed;
  letter-spacing: .1em;
}

.skin_info .blackheads-title {
  text-align: center;
  font-family: 'Cooper Black Regular', cursive;
  src:url(Cooper Black Regular.ttf);
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed;
   letter-spacing:1em;
}



.skin_info .whiteheads-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed;
   letter-spacing: .1em;
}



.skin_info  .dryness-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: bold;
  color: #afffed;
   letter-spacing: .1em;
}



.skin_info .oiliness-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed;
   letter-spacing: .1em;
}


.skin_info .redness-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed;
   letter-spacing: .1em;
}


.skin_info .puffiness-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed; 
  letter-spacing: .1em;
}

.skin_info .dark-circles-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed;
  letter-spacing: .1em;
}

.skin_info .blackheads-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed;
  letter-spacing: .1em;

}



.skin_info .dryness {
  text-align: center;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-weight: lighter;
  margin-top:-10%;

}

.skin_info .blackheads {
  text-align: center;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-weight: lighter;
  margin-top:-10%;
}

.skin_info .whiteheads {
   text-align: center;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-weight: lighter;
  margin-top:-10%;
}

.skin_info .oiliness {
  text-align: center;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-weight: lighter;
  margin-top:-10%;
}
.skin_info .puffiness {
   text-align: center;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-weight: lighter;
  margin-top:-10%;
}
.skin_info .dark-circles {
    text-align: center;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-weight: lighter;
  margin-top:-10%;
}
.skin_info .redness {
  text-align: center;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-weight: lighter;
  margin-top:-10%;
}


.checkbox {
margin: 0 auto;
}


 #content-forehead img{

 }

		@media only screen and (min-width:768px){
			.cd-panel__content p{font-size:1.6rem;line-height:1.6}}