/*-------------------------
	Simple reset

--------------------------*/
*{
	margin:0;
	padding:0;
}

a, a:visited {
	text-decoration:none;
	color:rgba(0,0,0,0.5);
}


/*-------------------------
	General Styles
	body, html {
  min-height: 100%;
  height: 100%;
}
--------------------------*/


html{
    background:url('../img/Fondo_Pared.jpg') repeat;
    background-color: #ede6d6;
    z-index:-10;  
}

section, footer{
	display: block;
}

#logo img{
	display:block;
	text-align:center;
/*	width:40%;
*/	max-width: 237px;
	margin-top: 2%;
	margin-bottom: 2%;
	margin-right: auto;
	margin-left: auto;
}


#logoue img{
	display:block;
	text-align:center;
	width:40%;
	max-width: 150px;
	margin-top: 2%;
	margin-bottom: 2%;
	margin-right: auto;
	margin-left: auto;
}


#tarjeta{
	display:block;
	position:relative;
    width: 85%;
    max-width:500px;
	margin-right: auto;
	margin-left: auto;
}

#bandeja img{
	display:block;
	width:98%;
	max-width: 630px;
	margin-top: -164px;
	margin-bottom: 0;
	margin-right: auto;
	margin-left: auto;
}

.content{
	display:block;
	color:rgba(30, 20, 10, 0.85);
	text-align:justify;
	font:14px 'Segoe UI',Arial, sans-serif;
	line-height:1.7em;
	margin-top: -120px;
	margin-right: auto;
	margin-left: auto;
	width: 85%;
	max-width:900px;
	height:140px;
	overflow:auto;
	padding:15px 25px 15px 25px;
	background:rgba(100, 75, 45, 0.2);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

.rounded-img2{
		display:block;
		border-radius: 6px;
}

#formContainer{
	width:273px;
	height:180px;

	margin:0 auto;
	position:relative;
	z-index:1;
	
	-moz-perspective: 700px;
	-webkit-perspective: 700px;
	perspective: 700px;
}

#formContainer form{
	width:100%;
	height:100%;
	position:absolute;
	top:-38px;
	left:0;
	
	/* Enabling 3d space for the transforms */
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	/* When the forms are flipped, they will be hidden */
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	/* Enabling a smooth animated transition */
	-moz-transition:0.7s;
	-webkit-transition:0.7s;
	transition:0.7s;
	
	/* Configure a keyframe animation for Firefox 
	-moz-animation: pulse 2s infinite;    */
	
	/* Configure it for Chrome and Safari 
	-webkit-animation: pulse 2s infinite;  */h
}


/* Firefox Keyframe Animation */
@-moz-keyframes pulse{
	0%{		box-shadow:0 0 0px #000000;}
	10%{	box-shadow:0 0 0px #ff6600;}
	50%{	box-shadow:0 0 25px #ff6600;}
	90%{	box-shadow:0 0 0px #ff6600;}
	100%{	box-shadow:0 0 0px #000000;}
}

/* Webkit keyframe animation */
@-webkit-keyframes pulse{
	0%{		box-shadow:0 0 0px #000000;}
	10%{	box-shadow:0 0 0px #ff6600;}
	50%{	box-shadow:0 0 25px #ff6600;}
	90%{	box-shadow:0 0 0px #ff6600;}
	100%{	box-shadow:0 0 0px #000000;}
}


#Frente{
	background:url('../img/Tarjeta_Front2.png') no-repeat center center;
	padding-left: 15px;
	z-index:100;
}

#recover{
	background:url('../img/Tarjeta_Back2.png')  no-repeat center center;
	padding-left: 15px;
	z-index:1;
	opacity:0;
	
	/* Rotating the recover password form by default */
	-moz-transform:rotateY(-180deg);
	-webkit-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}

#formContainer.flipped #Frente{
	
	opacity:0;
	
	/**
	 * Rotating the login form when the
	 * flipped class is added to the container
	 */
	
	-moz-transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}

#formContainer.flipped #recover{
	
	opacity:1;
	
	/* Rotating the recover div into view */
	-moz-transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}


/*----------------------------
	Inputs, Buttons & Links
-----------------------------*/

#Frente .flipLink,
#recover .flipLink{
	/* The blue ribbon links */
	height: 28px;
	width: 25px;
    overflow: hidden;
    position: absolute;
    right: 23px;
    text-indent:1px;
    top: 6px;
    text-indent: -9999px;
    opacity:0.2;   
    background:url('../img/Entrada_User3.png') no-repeat center center;}

#recover .flipLink{
	right:auto;
	left:26px;
}

#Frente .flipLink:hover{
	cursor:url('../img/curso_izq.png'), pointer;
    opacity:0.5;   
}

#recover .flipLink:hover{
	cursor:url('../img/cursor_der.png'), pointer;
    opacity:0.5;   
}

input[type=text], input[type=password]{
	/* The text fields */
	font: 14px 'Segoe UI',Arial,sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.2);
	position: absolute;
	width: 190px;
	height: 30px;
	left: 28px;
	top: 54px;
    padding-left: 5px;
    padding-right: 34px;
    
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	color:#ffffff;
	outline:none;
	background-color: rgba(0, 0, 0, 0.3);
}

#loginPass{
	top: 107px;
}

#recoverEmail{
	top:115px;
}

.botonmadera{
    border: 3px solid rgba(0,0,0,0.4);
    border-left-color: rgba(255,255,255,0.2);
    border-top-color: rgba(255,255,255,0.4);	
	-webkit-animation: pulse 2.0s infinite;
	-moz-animation: pulse 2.0s infinite;
	background-color: rgba(255,255,255,0.2);
}


input[type=submit]{
	/* Submit button */	
	opacity:1;
    position:absolute;
    top:246px;
    left:100px;
	width: 90px;
	height:30px;
	vertical-align: middle;
	text-align: center;
	font: 13px 'Segoe UI',Arial,sans-serif;
	color:#fff;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
	
	/* background: url('../img/BotonMadera2.jpg') no-repeat center center; */	
	cursor:url('../img/cursor2.png'), pointer;
	box-shadow:1px 2px 3px rgba(0, 0, 0, 1);

}


input[type=submit]:hover{
	opacity: 0.9;
}

input::-webkit-input-placeholder {
    color:#eee;
}


/*----------------------------
	The Footer
-----------------------------*/


footer{
	display:box;
	font:14px/1.4 'Segoe UI',Arial, sans-serif;
	background-color: rgba(100, 75, 45, 0.4);
	color: rgba(0,0,0,0.5);
	bottom: 0;
	padding-bottom: 6px;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
	height: 44px;
	width: 100%;
	text-align: center;
	position: fixed;
	z-index: 100000;
	margin-left: auto;
	margin-right: auto;
}

footer h2{
	font:14px/1.4 'Segoe UI',Arial, sans-serif;
	color: rgba(30, 20, 10, 0.8);
	padding: 5px 0 0;
}

#conten1{
	float: left;
	position: relative;
	left: 50%;
}

#conten2{
	position: relative;
	left: -50%;
}

#contacto1{
	float: left;
}

#contacto2{
	float: left;
}

#contacto3{
	float: left;
}


#contacto1:after {content:"|";}

#contacto2:after {content:"|";}

.clear { clear: left;}


footer a.tzine,a.tzine:visited{
	color: rgba(30, 20, 10, 0.8);
	position: absolute;
	text-decoration: none;
	top: 0;
}

footer a i b{color:rgba(30, 20, 10, 0.85);font-weight: bold;}
footer a i b:hover{	color:#d95700; font-weight: bold; text-decoration: none;}








/*----------------------------
	MEDIAQUERIS
-----------------------------*/

@media only screen and (max-height: 1136px){

	.content{
		display:block;
		color:rgba(30, 20, 10, 0.85);
		text-align:justify;
		line-height:1.8em;
		margin-top: -8em;
		margin-right: auto;
		margin-left: auto;
		width: 85%;
		max-width:900px;
		height:100%;
		overflow:auto;
		padding:15px 25px 15px 25px;
		background-color: rgba(100, 75, 45, 0.3);
	}
}


@media only screen and (max-height: 1024px){

	.content{
		display:block;
		color:rgba(30, 20, 10, 0.85);
		text-align:justify;
		line-height:1.7em;
		margin-top: -7em;
		margin-right: auto;
		margin-left: auto;
		width: 85%;
		max-width:900px;
		height:170px;
		overflow:auto;
		padding:15px 25px 15px 25px;
		background-color: rgba(100, 75, 45, 0.3);
	}
}


@media only screen and (max-height: 960px){

	.content{
		display:block;
		color:rgba(30, 20, 10, 0.85);
		text-align:justify;
		line-height:1.7em;
		margin-top: -5.5em;
		margin-right: auto;
		margin-left: auto;
		width: 80%;
		max-width:900px;
		height:170px;
		overflow:auto;
		padding:15px 25px 15px 25px;
		background:rgba(100, 75, 45, 0.3);
	}
}


@media only screen and (max-height: 800px){

	.content{
		display:block;
		color:rgba(30, 20, 10, 0.85);
		text-align:justify;
		line-height:1.7em;
		margin-top: -5em;
		margin-right: auto;
		margin-left: auto;
		width: 85%;
		max-width:900px;
		height:164px;
		overflow:auto;
		padding:15px 5px 15px 25px;
		background:rgba(100, 75, 45, 0.3);
	}
}


@media only screen and (max-height: 768px){

	.content{
		display:block;
		color:rgba(30, 20, 10, 0.85);
		text-align:justify;
		line-height:1.4em;
		margin-top: -9.3em;
		margin-right: auto;
		margin-left: auto;
		width: 85%;
		max-width:900px;
		height:78px;
		overflow:auto;
		padding:10px 5px 10px 25px;
		background-color: rgba(100, 75, 45, 0.3);
	}
}


@media only screen and (max-height: 480px){

	.content{
		display:none;
	}
}












@media only screen and (min-width: 676px){

	#direc2{
		display:none;
		}

	#direc1{
		display:box;
		}
}



@media only screen and (min-width: 575px) and (max-width: 675px){
	 	footer{
			padding-bottom: 22px;
		}
		footer h2{
			font:13px/1.4 'Segoe UI',Arial, sans-serif;
		}

		#direc2{
			display:none;
			}

		#direc1{
			display:box;
			}

		#conten2{
			left: -30%;
		}

		#contacto2:after {content:"";}

		#contacto3:before {content:'\00A0\00A0\00A0\00A0\00A0';}

		#tarjeta{
	    	width: 98%;
		}
		
		#fondo{
			margin-top: 168px;
		}
	}


@media only screen and (min-width: 481px) and (max-width: 574px){
	 	footer{
			padding-bottom: 39px;
		}

		#conten2{
			left: -32%;
		}

		#contacto2:after {content:"";}

		#contacto3:before {content:'\00A0\00A0\00A0\00A0\00A0';}

		#tarjeta{
	    	width: 98%;
		}

		#direc2{
			display:box;
		}

		#direc1{
			display:none;
		}

		#fondo{
			margin-top: 168px;
		}
	}



@media only screen and (min-width: 401px) and (max-width: 480px){
		footer{
			padding-bottom: 40px;
		}

		#conten2{
			left: -38%;
		}

		#direc2{
			display:box;
		}

		#direc1{
			display:none;
		}

		#contacto2:after {content:"";}

		#contacto3:before {content:'\00A0\00A0\00A0\00A0\00A0';}

		#tarjeta{
	    	width: 82%;
		}

		#bandeja img{
			margin-top: -150px;


		}
	}


@media only screen and (max-width: 400px){
		footer{
			padding-bottom: 39px;
		}

		#direc2{
			display:box;
		}

		#direc1{
			display:none;
		}

		#contacto2:after {content:"";}

		#contacto3:before {content:'\00A0\00A0\00A0\00A0\00A0';}

		#conten2{
			left: -45%;
		}

		#tarjeta{
	    	width: 85%;
		}
		#fondo{
			margin-top: 192px;
			background-color: gray;
		}

		#bandeja img{
			margin-top: -143px;
		}
	}


/*---- Corte para Nexus 5 ----------------------*/

	@media only screen  and (min-width: 360px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3.0) {
	  
		#bandeja img{
			margin-top: -140px;
		}

		#tarjeta{
		    width: 82%;
		}

		.content{
			display:block;
			color:rgba(30, 20, 10, 0.85);
			text-align:justify;
			line-height:1.4em;
			margin-top: -4.6em;
			margin-right: auto;
			margin-left: auto;
			width: 85%;
			max-width:900px;
			height:76px;
			overflow:auto;
			padding:6px 4px 6px 14px;
		}

		footer{
			font:13px/1.3 'Segoe UI',Arial, sans-serif;
			height: 30px;
		}

		footer h2{
			font:13px/1.3 'Segoe UI',Arial, sans-serif;
			color: rgba(30, 20, 10, 0.8);
			padding: 4px 0 0;
		}
	}


/*---- Corte para Nexus 4 ----------------------*/

	@media only screen  and (min-width: 384px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2.0) {
	  
		#bandeja img{
			margin-top: -143px;
		}

		#tarjeta{
		    width: 82%;
		}

		.content{
			display:block;
			color:rgba(30, 20, 10, 0.85);
			text-align:justify;
			line-height:1.5em;
			margin-top: -5.4em;
			margin-right: auto;
			margin-left: auto;
			width: 85%;
			max-width:900px;
			height:60px;
			overflow:auto;
			padding:7px 4px 7px 14px;
			background-color: yellow;
		}

		footer{
			font:13px/1.3 'Segoe UI',Arial, sans-serif;
			height: 30px;
		}

		footer h2{
			font:13px/1.3 'Segoe UI',Arial, sans-serif;
			color: rgba(30, 20, 10, 0.8);
			padding: 4px 0 0;
		}

	}