/* Estilos Personalizados */


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

		CELULAR IZQUIERDO

********************************************/
/* Momentanea */
#right-image{
	margin-right:35px !important;
}

#left-image, #left-phone h2{
	margin-left: 43px !important;;	
}

#certificado{
	text-align: center; 
	margin-top: 35%;
}

.line:after{
	z-index: 1 !important;
}

/*   */

.fondocelular{
	background-color:#f1f1f1;
}

.ubicacion{
	float: left;
	margin-bottom: 38px;
}

.ubicacion img{
	position: relative;
	z-index: 1;
}

/*
#left-phone{
	margin-left: 45px;
}*/

#left-image, #right-image{
	/*float: right;*/
	display: block;
	margin: 0 auto;
}

#right-cel{
	position: relative;
}

#gif-1{
	position: absolute;
	top:37%;
	left: 10%;
	z-index: 0;
}

#gif-2{
	position: absolute;
	top:37%;
	left: 45%;
	z-index: 0;
}

#gif-3{
	position: absolute;
	top:53%;
	left: 10%;
	z-index: 0;
}

#gif-4{
	position: absolute;
	top:53%;
	left: 45%;
	z-index: 0;
}


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

			CENTER SECTION

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

/*		TITULOS		*/

.title{
	color: #000000;
	font-size: 29px;
	text-align: center;
	font-weight: bold;
}

/*		CIRCULO		*/

#block-height{
		height: 594px;
}

#circle {
	height: 156px; 
	border: 7px solid #000000;
	border-radius: 50%; 
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%;
	width: 156px;
	display: block;
    margin:223px 46px 0;
}

#circle span{
	display: block;
	text-align: center;
}

#circle .out{
	font-size: 30px;
	text-transform: uppercase;
	font-weight: bold;
}

#circle span:first-child{
	margin-top: 19px;
}

#circle span:last-child{
	color: #000;
	font-style: italic;
}

#circle .out, #circle .inner{
	color: #000;
}

#circle .inner{
	font-size: 16px;
	text-transform: uppercase;
}

/*		FIN CIRCULO		*/


/*		LINEA HORIZONTAL DEL CIRCULO		*/

.line:before{
	content: "";
	height: 3%;
	margin-left: -28px;
	background-color:#000000;
	top: 441px;
	position: absolute;
	width: 6%;
	z-index: 0;
}

.line:after{
	content: "";
	height: 3%;
	margin-left: 209px;
	background-color:#000000;
	top: 441px;
	position: absolute;
	width: 6%;
	z-index: 0;
}




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

				RESPONSIVE

********************************************/
/* Resolucion: 1024x768 */
@media (min-width : 1024px) and (max-width : 1280px){
	.line:before{
		margin-left: -30px;
		top: 442px;
		height: 2%;
		width: 8%;
	}

	.line:after{
		margin-left: 209px;
		top: 442px;
		height: 2%;
		width: 8%;
	}

	#gif-2, #gif-4{
		left: 44%;
	}

}

/* Resolucion: 800x600 */
@media (min-width : 800px) and (max-width : 1023px) and (orientation : landscape){
	.line:before{
		margin-left: -27px;
		width: 10%;
	}

	.line:after{
		margin-left: 214px;
		width: 8%;
	}
}

/* Resolucion: 600x800 */
@media (min-width : 600px) and (max-width : 800px){
	.line:before, .line:after{
		height: 2%;
		top:441px;
	}

	.line:before{
		margin-left: -30px;
		width: 13%;
	}

	.line:after{
		margin-left: 214px;
		width: 11%;	
	}
}

/* Resolucion: 768x1024 */
@media (min-width : 760px) and (max-width : 799px){
	#block-height{
		height: 571px;
	}

	#left-image{
		width: 75%;
		margin-bottom: 18px;
	}

	#left-phone{
		margin-left: 0px;
	}

	#right-image{
		width: 83%;
		margin-bottom: 10px;
	}

	.line:before, .line:after{
		height: 1%;
		top:402px;
	}

	.line:before{
		margin-left: -47px;
		width: 13%;
	}

	.line:after{
		margin-left: 191px;
		width: 11%;	
	}

	#circle{
		height: 136px;
		width:  136px;
		margin: 192px 46px 0;
	}

	#circle .out{
		font-size: 24px;
	}

	#gif-2, #gif-4{
		left: 47%;
	}

	#gif-1, #gif-3{
		left: 13% !important;
	}

	#gif-3, #gif-4{
		top:52%;
	}

}

/* Resolucion: 480x320 */
@media (min-width : 480px) and (max-width : 599px){

	.line:after{
		height: 5%;
		margin-left: 212px;
		width: 14%;
	}

	.line:before{
		height: 5%;
		margin-left: -22px;
		width: 15%;
	}
}

/* Resolucion: 320x480 */
@media (min-width: 320px) and (max-width: 479px){
	.line:before{
		margin-left: -26px;
		width: 23%;
	}

	.line:after{
		width: 19%;
	}
}