body{
	background: #9b1459;
	font-family: 'Open Sans', Arial, sans-serif;
	text-align:center;
    padding: 0;
	margin: 0;

}

#responder img {
	margin:0 15px;
}



.clr{

	clear: both;

}

h1{

	font-size: 60px;

	position:relative;

	font-weight: 400;

	text-shadow: 0px 1px 1px rgba(0,0,0,0.2);

	text-align: center;

	color: #D9D2D4;
	color:white;

}

h1 span{

	color: #fff;

}

.content{

	width: 550px;

	padding: 25px;

	margin: 0 auto;

}

.content p{

	text-shadow: 0px 1px 1px rgba(0,0,0,0.2);

	font-size: 20px;

	line-height: 30px;

	text-align: center;

	padding: 10px;

}

/* Header Style */

.header{

	font-family:'Roboto Condensed', Arial, sans-serif;

	line-height: 24px;

	font-size: 11px;

	background: #000;

	opacity: 0.9;

	text-transform: uppercase;

	z-index: 9999;

	position: relative;

	-moz-box-shadow: 1px 0px 2px #000;

	-webkit-box-shadow: 1px 0px 2px #000;

	box-shadow: 1px 0px 2px #000;

}

.header a{

	padding: 0px 10px;

	letter-spacing: 1px;

	color: #ddd;

	display: block;

	float: left;

}

.header a:hover{

	color: #fff;

}

.header span.right{

	float: right;

}

.header span.right a{

	float: none;

	display: inline;

}

p.demos{

    position:relative;

    z-index: 1000;

    text-align:center;

}

p.demos a{

    display: inline-block;

	padding: 2px 4px;

	background: #fff;

	color: #777;

	font-family:'Roboto Condensed', Arial, sans-serif;

	text-transform: uppercase;

	font-size: 11px;

	box-shadow: 1px 1px 4px rgba(0,0,0,0.2);

	-webkit-transition: all 0.2s linear;

	-moz-transition: all 0.2s linear;

	-o-transition: all 0.2s linear;

	-ms-transition: all 0.2s linear;

	transition: all 0.2s linear;

}

p.demos a:hover{

    color: #fff;

	background: #555;

}

p.demos a.current-demo,

p.demos a.current-demo:hover{

    font-weight: bold;

	background: #333;

	color: #fff;

}



.letter-container{

	font-family: 'Abril Fatface', Arial, sans-serif;

}

.letter-container h2{

	text-align: center;

}

.letter-container h2 a{

	text-align: center;

	padding: 20px;

	text-transform: uppercase;

}

.letter-container h2 a span{

	display: inline-block;

	position: relative;

	width: 100px;

	height: 100px;

	background: #000;

	line-height: 94px;

	font-size: 110px;

	margin: 3px;

	background-position: 50% 0%;

	background-size: 200px 267px;

	color: #fff;

	text-shadow: 0px 0px 1px #fff, 2px 2px 5px rgba(0,0,0,0.4);

	border-color: #fff;

	border-style: solid;

	border-width: 10px 10px 45px 10px;

	-webkit-box-shadow: 2px 2px 8px 4px rgba(0,0,0,0.9), 0px 0px 2px rgba(0,0,0,0.2) inset;

	-moz-box-shadow: 2px 2px 8px 4px rgba(0,0,0,0.9), 0px 0px 2px rgba(0,0,0,0.2) inset;

	box-shadow: 2px 2px 8px 4px rgba(0,0,0,0.9), 0px 0px 2px rgba(0,0,0,0.2) inset;

	-webkit-transition: all 0.3s ease-in-out;

	-moz-transition: all 0.3s ease-in-out;

	-o-transition: all 0.3s ease-in-out;

	-ms-transition: all 0.3s ease-in-out;

	transition: all 0.3s ease-in-out;

}

.letter-container h2 a span:before{

	content:'';

	position: absolute;

	width: 111px;

	height: 111px;

	top: -10px;

	left: -10px;

	background: transparent;

	background: -moz-linear-gradient(-45deg, rgba(14,14,14,0.32) 0%, rgba(127,127,127,0.21) 18%, rgba(170,170,170,0.11) 34%, rgba(201,201,201,0) 51%, rgba(242,242,242,0.1) 66%, rgba(255,255,255,0.18) 79%, rgba(71,69,69,0.32) 100%);

	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(14,14,14,0.32)), color-stop(18%,rgba(127,127,127,0.21)), color-stop(34%,rgba(170,170,170,0.11)), color-stop(51%,rgba(201,201,201,0)), color-stop(66%,rgba(242,242,242,0.1)), color-stop(79%,rgba(255,255,255,0.18)), color-stop(100%,rgba(71,69,69,0.32)));

	background: -webkit-linear-gradient(-45deg, rgba(14,14,14,0.32) 0%,rgba(127,127,127,0.21) 18%,rgba(170,170,170,0.11) 34%,rgba(201,201,201,0) 51%,rgba(242,242,242,0.1) 66%,rgba(255,255,255,0.18) 79%,rgba(71,69,69,0.32) 100%);

	background: -o-linear-gradient(-45deg, rgba(14,14,14,0.32) 0%,rgba(127,127,127,0.21) 18%,rgba(170,170,170,0.11) 34%,rgba(201,201,201,0) 51%,rgba(242,242,242,0.1) 66%,rgba(255,255,255,0.18) 79%,rgba(71,69,69,0.32) 100%);

	background: -ms-linear-gradient(-45deg, rgba(14,14,14,0.32) 0%,rgba(127,127,127,0.21) 18%,rgba(170,170,170,0.11) 34%,rgba(201,201,201,0) 51%,rgba(242,242,242,0.1) 66%,rgba(255,255,255,0.18) 79%,rgba(71,69,69,0.32) 100%);

	background: linear-gradient(-45deg, rgba(14,14,14,0.32) 0%,rgba(127,127,127,0.21) 18%,rgba(170,170,170,0.11) 34%,rgba(201,201,201,0) 51%,rgba(242,242,242,0.1) 66%,rgba(255,255,255,0.18) 79%,rgba(71,69,69,0.32) 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#520e0e0e', endColorstr='#52474545',GradientType=1 );

}

.letter-container h2 a span:nth-child(even){

	-webkit-transform: rotate(3deg) translateZ(0);

	-moz-transform: rotate(3deg);

	-o-transform: rotate(3deg);

	-ms-transform: rotate(3deg);

	transform: rotate(3deg);

}

.letter-container h2 a span:nth-child(odd){

	-webkit-transform: rotate(-5deg) translateZ(0);

	-moz-transform: rotate(-5deg);

	-o-transform: rotate(-5deg);

	-ms-transform: rotate(-5deg);

	transform: rotate(-5deg);

}

.letter-container span.char1{

	background-image: url(../images/1.jpg);

}

.letter-container span.char2{

	background-image: url(../images/2.jpg);

}

.letter-container span.char3{

	background-image: url(../images/3.jpg);

}

.letter-container span.char4{

	background-image: url(../images/4.jpg);

}

.letter-container span.char5{

	background-image: url(../images/5.jpg);

}

.letter-container span.char6{

	background-image: url(../images/6.jpg);

}

.letter-container h2 a:hover span:nth-child(even){

	-webkit-transform: scale(0.9) rotate(-5deg) translateZ(0);

	-moz-transform: scale(0.9) rotate(-5deg);

	-o-transform: scale(0.9) rotate(-5deg);

	-ms-transform: scale(0.9) rotate(-5deg);

	transform: scale(0.9) rotate(-5deg);

}

.letter-container h2 a:hover span:nth-child(odd){

	-webkit-transform: scale(0.9) rotate(3deg) translateZ(0);

	-moz-transform: scale(0.9) rotate(3deg);

	-o-transform: scale(0.9) rotate(3deg);

	ms-transform: scale(0.9) rotate(3deg);

	transform: scale(0.9) rotate(3deg);

}

.letter-container h2 a span:nth-child(even):hover,

.letter-container h2 a span:nth-child(odd):hover{

	-webkit-animation: moveImg 9s linear infinite forwards;

	-moz-animation: moveImg 9s linear infinite forwards;

	-o-animation: moveImg 9s linear infinite forwards;

	-ms-animation: moveImg 9s linear infinite forwards;

	animation: moveImg 9s linear infinite forwards;

	color: rgba(255,255,255,0.4);

	text-shadow:0px 0px 5px rgba(0,0,0,0.1);

	-webkit-transform: scale(1.1);

	-moz-transform: scale(1.1);

	-o-transform: scale(1.1);

	-ms-transform: scale(1.1);

	transform: scale(1.1);

	z-index: 10;

	-moz-box-shadow: 2px 2px 20px 4px rgba(0,0,0,0.6), 0px 0px 2px rgba(0,0,0,0.2) inset;

	-webkit-box-shadow: 2px 2px 20px 4px rgba(0,0,0,0.6), 0px 0px 2px rgba(0,0,0,0.2) inset;

	box-shadow: 2px 2px 20px 4px rgba(0,0,0,0.6), 0px 0px 2px rgba(0,0,0,0.2) inset;

}

@-webkit-keyframes moveImg {

    0%{ 

		background-position: 50% 0%;

	}

	50%{

		background-position: 50% 100%;

	}

	100%{

		background-position: 50% 0%;

	}

}

@-moz-keyframes moveImg {

    0%{ 

		background-position: 50% 0%;

	}

	50%{

		background-position: 50% 100%;

	}

	100%{

		background-position: 50% 0%;

	}

}

@keyframes moveImg {

    0%{ 

		background-position: 50% 0%;

	}

	50%{

		background-position: 50% 100%;

	}

	100%{

		background-position: 50% 0%;

	}

}



/************************************************************************************/



.subtitulos h2{

text-align: center;
font-size: 20px;
/*color: #D9D2D4;*/
color:white;
font-weight: normal;
font-family: 'Open Sans', sans-serif;

}



.subtitulos h3{

font-size: 18px;
color: #cad401;
font-family: 'Open Sans', sans-serif;

}

#container 

{
	position:relative;
	margin: 0px auto;

}

#container .header_main

{
	width:100%;
	height:98px;
	display:block;
	background:#efefef;
	text-align:center;
}
.footer_main

{
	width:100%;
	display:block;
	text-align:center;
}

.footer_main .logo_1 
{
	margin: auto;
	width: 800px;
	color: #fff;
	font-size: 15px;
	font-family: 'Open Sans', sans-serif;
	margin-top: 60px;
	text-transform:uppercase;
}

	.footer_main .logo_1 img
	{
		margin-top:5px;
	}

#container .header_main .logo_1 

{
    height: 95px;
	margin:auto;
    width: 800px;
}


#container .header_main .logo_2 

{

    float: left;

    height: 68px;

    left: 820px;

    position: absolute;

    top: 19px;

    width: 213px;

}



.login

{
    
height: 164px;
width: 250px;
display:block;    

}

.login .cuerpo

{
    
	float:left;
	text-align:center;
	width:20%;
	margin-top: 33px;
	height: 121px;
	

}

.login .cuerpo .fila

{
    
	width: 250px;
	text-align:center;
	height: 41px;
	
}


.login .cuerpo .input_tab 

{

    color: #000;
    font-size: 15px;
    height: 23px;
    width: 189px;
    float:left;



}

.login .cuerpo .texto 

{

    color: #FFFFFF;
    font-family:'Open Sans', sans-serif;
    font-size: 15px;
    height: 23px;
    float:left;
    width:60px;



}
 .login .grande-der

{
	float:right;
	font-size:150px;
	font-weight:bold;
	color:#cad401;
	width:40%;
	text-align:right;
		text-align:left;
	

}

 .login .grande-izq
{
	float:left;
	font-size:150px;
	font-weight:bold;
	color:#cad401;
	width:40%;
	text-align:right;

}

.login .cuerpo .input_tab input

{

   border:none; 

   width:140px;

   height:20px;



}

 .login .boton_enviar img
{

    cursor: pointer;
    height: 43px;
    margin-left: 22px;
    margin-top: 11px;
    width: 161px;
    

}
.abajo
{
	width:100%;
	height:20px;
	text-align:center;
	    color: #FFFFFF;
    font-family:'Open Sans', sans-serif;
    font-size:16px;
     margin-top: 20px;
	
}
.abajo a
{

	 color: #cad401;

	
}

#mensaje{
	color:#fff;
	font-size:13px;
	font-family:'Open Sans', sans-serif;
	font-weight:bold;
}