* {
text-rendering: optimizeLegibility;
}


body, html { width: 100%; background: #00ff00;
font-family: 'Fredoka One', cursive;
color: #FFFFFF;
font-size: 28px;
line-height: 0.9;
}
/*
@font-face {
font-family: 'porkys';
src: url('./porkys.ttf') format('truetype'),
src: url('http://alkualkualkualkualkualkualkualkualkualku.org/porkys.ttf') format('truetype');

color: #FFFFFF;
font-size: 28px;
line-height: 0.9;
}
*/



/* ****** Set Links  ****** */



a.nav {color: white; text-decoration: none;   font-family: 'Fredoka One', cursive;   font-size: 100%}
a.nav:link {color: white;   text-decoration: none; font-size: 100%}
a.nav:visited {color: white;}
a.nav:hover {color: blue; font-size: 250%}
a.nav:active {  color: white;}


a:link {
color: white;
font-family: 'Fredoka One', sans-serif;  font-size: 150%;
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: white;
font-family: 'Fredoka One', cursive;
}

a:hover {
  background-color: #00ff00;
  color: blue;
  text-decoration: none;
  font-size: 200%;
font-family: 'Fredoka One', cursive;
font-weight: bolder;

}

a:active {
  background-color: #e80c7a;
  color: white;
}




.centerIMG {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/* Wrapper */

.blindsWrapper {
	display: inline-block;
	position:relative;
	left: 230px;
	vertical-align: top;
	padding: 0px;
	margin: 40px 0px 0px 0px;
	width: 1000px; height: 600px;
	z-index: 1;
	-webkit-transition: all 1.06s ease-in-out;
	-moz-transition: all 1.4s ease-in-out;
}


/* Folds */

.partOne,
.partTwo,
.partThree {
	position: relative;
	display: block;
	background-repeat: no-repeat;
	z-index: 2;
	-webkit-transform:perspective(0) rotateX(0) scale(1);
	-moz-transform:perspective(0) rotateX(0) scale(1);
	transform:perspective(0) rotateX(0) scale(1);
	-webkit-transition: all .05s ease-in-out;
	-moz-transition: all .05s ease-in-out;
}

.partOne {
	height: 200px;
	background-position: 0 0;
}

.partTwo {
	height: 200px;
	border-radius: 0px 0px 0px 0px;
	background-position: center -200px;
	z-index: 3 !important;
}

.partThree {
	height: 200px;
	border-top: 0px solid white !important;
	background-position: center -400px;
}


/* Hover States */

.blindsWrapper:hover .partOne {
	box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 0px 0px 226px rgba(0,0,0,0.05);
	-webkit-transform:perspective(300px) rotateX(20deg) scale(1.03);
	-moz-transform:perspective(300px) rotateX(20deg) scale(1.03);
	transform:perspective(300px) rotateX(20deg) scale(1.03);
	top: -8px;
}
.blindsWrapper:hover .partTwo {
	box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0px 0px 226px rgba(0,0,0,0.2);

	-webkit-transform:perspective(300px) rotateX(-20deg) scale(1.03);
	-moz-transform:perspective(300px) rotateX(-20deg) scale(1.03);
	transform:perspective(300px) rotateX(-20deg) scale(1.03);
	top: 11px;
}
.blindsWrapper:hover .partThree {
	box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 0px 0px 226px rgba(0,0,0,0.05);
	-webkit-transform:perspective(300px) rotateX(20deg) scale(1.03);
	-moz-transform:perspective(300px) rotateX(20deg) scale(1.03);
	transform:perspective(300px) rotateX(20deg) scale(1.03);
	top: -16px;
}


.imgOne .partOne,
.imgOne .partTwo,
.imgOne .partThree {
	background-image: url(pix/SWH.png);
}

.imgTwo .partOne,
.imgTwo .partTwo,
.imgTwo .partThree {
	background-image: url(pix/noms.png);
}