@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,900);
body{
	margin:0;
	padding:0;
	background:rgba(247,220,158,1);
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
}
#loaderMask{
    text-align: center;
    padding-top: 20%;
}
#loaderMask span{
    font-size: 5em;

}
header {
	position:absolute;
	margin:15px;
	display:block;
	width:371px;
	height:81px;
	z-index: 10;
}
header > a{
	display:block;
	width:100%;
	height:100%;
	background-image:url(../img/sara-zaidman.png);
}

/****************************************  Nav *****************************************/
#toc {
	margin: 0;
	padding: 0;
	height: 5em;
	bottom: 0;
	width: 100%;
	position: fixed;
	overflow-x: hidden;
	background-color: #ec3b45;
	transition: 0.4s ease-in-out;
	z-index: 999;
	border-top:5px solid #64A0AB;
}
#toc:hover {
	bottom: 0;
	overflow-x: hidden;
	overflow-y: hidden;
}
#toc ul {
	margin: 0;
	padding: 10px 0 0 0;
	text-align:center;
}
#toc li {
	display: inline-block;
}
#toc li a {
	display: block;
	color: #f8dd9f;
	padding: 0.6em 1em;
	transition:0.5s;
	text-decoration:none;
}
#toc li a:hover {
	background:#64A0AB;
}
#toc-label {
	display: none;
	position: fixed;
	left: 50%;
	margin-left:-3em;
	bottom: 4em;
	opacity: 1;
	z-index: 100;
	border-radius: 50%;
	border:4px solid #64A0AB;
	font-size: 14px;
	font-family: Helvetica, arial, freesans, clean, sans-serif;
}
#toc-label a {
	text-align:center;
	display: block;
	width: 6em;
	height:6em;
	text-align:center;
}
.flecha{
    width:0px;
    margin:0 auto;
    height:0px;
    border-left:25px solid transparent; /* izquierda flecha */
    border-right:25px solid transparent; /* derecha flecha */
    border-bottom:25px solid #64A0AB; /* base flecha y color*/
    line-height:0px;
    top:30%;
    position: relative;
}


/***************************************** Seccion *************************************** */

section{
	width:1200px;
	height:auto;
	position:absolute;
	z-index:99;
	left:50%;
	margin-left:-600px;
	top:10%;
	background:rgba(247,220,158,0.3);
	transition:0.5s;
	border:5px solid rgba(252,159,76,0.3);
	max-height:70%;
	overflow-y: scroll;
}
section:hover{
	background:rgba(247,220,158,0.9);
	-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.4);
}

.img1{
	width: 100%;
	height:100%;
	position:absolute;
	background:url(../img/back-1.jpg) center center fixed;
	background-size:cover;
}
.img2{
	width: 100%;
	height:100%;
	position:absolute;
	background:url(../img/back-2.jpg) center center fixed;
	background-size:cover;
}
.img3{
	width: 100%;
	height:100%;
	position:absolute;
	background:url(../img/back-3.jpg) center center fixed;
	background-size:cover;
}
.img4{
	width: 100%;
	height:100%;
	position:absolute;
	background:url(../img/back-4.jpg) center center fixed;
	background-size:cover;
}
.img5{
	width: 100%;
	height:100%;
	position:absolute;
	background:url(../img/back-5.jpg) center center fixed;
	background-size:cover;
}
.img6{
	width: 100%;
	height:100%;
	position:absolute;
	background:url(../img/back-6.jpg) center center fixed;
	background-size:cover;
}

.diamond {
	width: 0;
	height: 0;
	border: 250px solid transparent;
	border-bottom-color: black;
	position: relative;
	top: -250px;
}
.diamond:after {
	content: '';
	position: absolute;
	left: -250px;
	top: 250px;
	width: 0;
	height: 0;
	border: 250px solid transparent;
	border-top-color: black;
}

.slideshow{ position: absolute;
	width:100%;
	height:100%;
}
#slide1, #slide2, #slide3{ position: absolute; }


/***************************************** NAV *************************************** */

nav > ul > li,
.cursor {
    display:block;
    cursor:pointer;
}
section > article {
    display:none;
    z-index: 200;
    padding:20px;
}
#biografia {
	display:block;
	float:left;
}
h2{
	font-family: 'Playfair Display', serif;
	font-weight:900;
	margin:0 0 20px 0;
	font-size:3em;
	letter-spacing:2px;
	display:block;
	border-bottom:3px solid;
	width:100%;
	color:#EB3B45;
}
#biografia > .bio {
	display:block;
	width:100%;
	line-height: 24px;
	float:left;
}
#biografia > .bio > img {
	float:left;
	margin:0 20px 0 0;
}
.curso{
	width:100%;
	display: block;
	clear:both;
}
.curso > span{
	float:left;
	display:inline-block;
	background:#64A0AB;
	width:215px;
	margin:8px;
	float:left;
	padding:5px;
	color:#fff;
}
.e-colectivas{
	float:left;
	width:45%;
}
.e-individuales{
	width:45%;
	float:right;
}
.e-colectivas ul li{
	margin:10px 0;
}
.e-individuales ul li{
	margin:10px 0;
}
.contador{
	position:absolute;
	bottom:15%;
	display:block;
	text-align:center;
	width:100%;
}
input{
	display: block;
	margin:10px 0;
	border:2px solid #EB3B45;
	padding:3px;
	width:250px;
	background:#64A0AB;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}
textarea{
	width:350px;
	height:80px;
	padding:3px;
	border:2px solid #EB3B45;
	display: block;
	background:#64A0AB;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}

ul{
	list-style: none outside none;
    padding-left: 0;
}
.gallery li {
	display: block;
	float: left;
	margin-bottom: 6px;
	margin-right: 6px;
	width: 23%;
}
.gallery li a {
	height:auto;
	width: 100%;
	cursor:pointer;
}
.gallery li a img {
	width: 100%;
}
footer{
	display:none;
}



@media screen and (max-width:1200px){
	section{
		width: 90%;
		margin-left:-45%;
		top:10%;
		max-height:75%;
	}
	header {
		margin:5px 0 0 -160px;
		display:block;
		width:320px;
		height:65px;
		z-index: 10;
		left:50%;
	}
	header a{
		display:block;
		background-image:url(../img/sara-zaidman.png);
		background-size:cover;
	}
}


@media screen and (max-width:768px){
	#toc{
		bottom:0;
	}
	#toc-label{
		display:none;
	}
	section{
		width:90%;
		margin-left:-45%;
		top:10%;
		max-height:75%;
	}
	#sec-contacto .e-colectivas{
		display: block;
		width: 100%;
		float:left;
	}
	#sec-contacto .e-individuales{
		display: block;
		width: 100%;
		float:left;
	}
	.gallery li {
		width:18%;
	}
}


@media screen and (max-width:500px){
	#toc li a {
		font-size:10px;
	}
	.bio img{
		width:180px;
		display:block;
		clear:both;
	}
	article{
		padding:0px;
	}
	.curso{
		width:40%;
		clear:none;
	}
}