@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Light.eot');
    src: url('../font/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-Light.woff2') format('woff2'),
        url('../font/OpenSans-Light.woff') format('woff'),
        url('../font/OpenSans-Light.ttf') format('truetype'),
        url('../font/OpenSans-Light.svg#OpenSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Italic.eot');
    src: url('../font/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-Italic.woff2') format('woff2'),
        url('../font/OpenSans-Italic.woff') format('woff'),
        url('../font/OpenSans-Italic.ttf') format('truetype'),
        url('../font/OpenSans-Italic.svg#OpenSans-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-BoldItalic.eot');
    src: url('../font/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-BoldItalic.woff2') format('woff2'),
        url('../font/OpenSans-BoldItalic.woff') format('woff'),
        url('../font/OpenSans-BoldItalic.ttf') format('truetype'),
        url('../font/OpenSans-BoldItalic.svg#OpenSans-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Andika Basic';
    src: url('../font/AndikaBasic.eot');
    src: url('../font/AndikaBasic.eot?#iefix') format('embedded-opentype'),
        url('../font/AndikaBasic.woff2') format('woff2'),
        url('../font/AndikaBasic.woff') format('woff'),
        url('../font/AndikaBasic.ttf') format('truetype'),
        url('../font/AndikaBasic.svg#AndikaBasic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans.eot');
    src: url('../font/OpenSans.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans.woff2') format('woff2'),
        url('../font/OpenSans.woff') format('woff'),
        url('../font/OpenSans.ttf') format('truetype'),
        url('../font/OpenSans.svg#OpenSans') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-ExtraboldItalic.eot');
    src: url('../font/OpenSans-ExtraboldItalic.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-ExtraboldItalic.woff2') format('woff2'),
        url('../font/OpenSans-ExtraboldItalic.woff') format('woff'),
        url('../font/OpenSans-ExtraboldItalic.ttf') format('truetype'),
        url('../font/OpenSans-ExtraboldItalic.svg#OpenSans-ExtraboldItalic') format('svg');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Semibold.eot');
    src: url('../font/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-Semibold.woff2') format('woff2'),
        url('../font/OpenSans-Semibold.woff') format('woff'),
        url('../font/OpenSans-Semibold.ttf') format('truetype'),
        url('../font/OpenSans-Semibold.svg#OpenSans-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSansLight-Italic.eot');
    src: url('../font/OpenSansLight-Italic.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSansLight-Italic.woff2') format('woff2'),
        url('../font/OpenSansLight-Italic.woff') format('woff'),
        url('../font/OpenSansLight-Italic.ttf') format('truetype'),
        url('../font/OpenSansLight-Italic.svg#OpenSansLight-Italic') format('svg');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-SemiboldItalic.eot');
    src: url('../font/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-SemiboldItalic.woff2') format('woff2'),
        url('../font/OpenSans-SemiboldItalic.woff') format('woff'),
        url('../font/OpenSans-SemiboldItalic.ttf') format('truetype'),
        url('../font/OpenSans-SemiboldItalic.svg#OpenSans-SemiboldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Bold.eot');
    src: url('../font/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-Bold.woff2') format('woff2'),
        url('../font/OpenSans-Bold.woff') format('woff'),
        url('../font/OpenSans-Bold.ttf') format('truetype'),
        url('../font/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Extrabold.eot');
    src: url('../font/OpenSans-Extrabold.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-Extrabold.woff2') format('woff2'),
        url('../font/OpenSans-Extrabold.woff') format('woff'),
        url('../font/OpenSans-Extrabold.ttf') format('truetype'),
        url('../font/OpenSans-Extrabold.svg#OpenSans-Extrabold') format('svg');
    font-weight: 800;
    font-style: normal;
}



html, body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background:#f2b34e;
    font-family: 'Open Sans';
    font-size: 1.2rem;
}


#dv-fondo{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

#dv-splash{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: url(../img/bg_1.png) #171423 center;
	background-size: cover;
}

#dv-fondo::after{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 13;
	background:rgba(255,255,255,0);
	display: block;
	content: '';
}

.esq-1{
	position: absolute;
	left: 0;
	top: 0;
	width: 20%;
	z-index: 11;
	max-width: 190px;
	min-width: 100px;
}
.esq-2{
	position: absolute;
	right: 0;
	top: 0;
	width: 20%;
	z-index: 11;
	max-width: 190px;
	min-width: 100px;
}
.logo-mc{
	position: absolute;
	left: 20px;
	top: 20px;
	width: 20%;
	z-index: 12;
	max-width: 200px;
	min-width: 120px;
}
.logo-patritec{
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 20%;
	z-index: 12;
	max-width: 200px;
	min-width: 120px;
}

.paso{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 14;
}

.cuchimilco{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 35%;
}


.cuchimilco img{
	position: absolute;
	bottom: 0px;
	left: 0px;
}

.titulo{
	margin-top: 5px; 
	padding: 10px;
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	color: #683b11;
}

.titulo-2{
	margin-top: 5px; 
	padding: 10px;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	color: #683b11;
	line-height: 30px;
}

.contenido{
	margin-top: 60px;
	width: 60%;
	float: right;
	position: relative;
	z-index: 15;
}

.infotip{
	padding: 30px;
	margin-left: 0px;
	margin-right: 40px;
	border: 2px solid #b17f49;
	border-radius: 20px;
	color: #2b201c;
	background: #e5d8c6;
	font-size: 0.8rem;
}

.texto-naranja{
	color: #e95a0c;
}

.clearfix{
	clear: both;
	display: block;
}

.texto-grande {
    font-size: 1.5rem;
    text-align: center;
    padding: 50px;
    margin-top: 25%;
}

.btn{
	margin-top: 10px;
	color: #FFF;
	background:#e5332a;
	border: 0px solid;
	border-radius: 12px;
	padding: 10px 20px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
}

.btn:hover{
	background: #a72019;
}

#dv-paso1 .infotip{
	text-align: center;
}

*:focus {outline:0;}

.radio{
    margin-left:2%;
    margin-right:2%;
    width:46%;
    float:left;
    position:relative;
    margin-bottom: 20px;
    height: 35px;

}

.radio .circulo {
    width: 20px;
    height: 20px;
    position:absolute;
    background:#e5d8c6;
    border:3px solid #e5332a;
    border-radius:100%;
    left:0px;
    top:0px;
}

.sk-bounce>div {
    background: #e5332a!important;
}

.radio.active .circulo div{
    width: 30px;
    height: 30px;
    margin-left: 10px;
    margin-top: 10px;
    background:#e5332a;
    border-radius: 100%;
}

.radio .etiqueta {
    height: 50px;
    position:absolute;
    left:35px;
    top:0px;
    font-size:0.4em;
    line-height: 5px;
    

}

.radio .etiqueta span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.slide-right {
	-webkit-animation: slide-right 0.5s;
	        animation: slide-right 0.5s;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-9-22 21:22:6
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-60%);
            transform: translateX(-60%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-60%);
            transform: translateX(-60%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}



#txtCompromiso{
	resize: none;
    border-radius: 20px;
    border: 3px solid #b17f49;
    background: #e5d8c6;
    padding: 10px;
    width: 91%;
    margin-left: 2%;
    margin-right: 2%;
    height: 80px;
    font-size: 0.4em;
    color: #2b201c;
}

.radio .circulo img {
    display:none;
}

.radio.active .circulo img {
    width: 20px;
    display:block;
}

.swal2-title {
    font-size: 1.2rem!important;
}

.swal2-content {
    font-size: 0.8rem!important;
}

.swal2-confirm {
    font-size: 0.8rem!important;
}

.swal2-icon {
    /* transform: scale(0.5); */
    margin: 10px!important;
}

.estado {
	background-color: #e5d8c6;
	border: 3px solid #b17f49;
	color:#e5332a;
	width: 150px;
	height: 150px;
	margin: 5px;
	display: inline-block;
	border-radius: 100%;
	font-size: 0.8rem;
	text-align:center;
	position:relative;
	background-position:center;
	background-size:80% auto;
	background-repeat: no-repeat;
	cursor:pointer;
	transition: background 0.2s, transform 0.2s;
	position: relative;
	z-index: 18;
}

#estado-1{
	background-image: url(../img/estado_1.png);
}


#estado-2{
	background-image: url(../img/estado_2.png);
}


#estado-3{
	background-image: url(../img/estado_3.png);
}


#estado-4{
	background-image: url(../img/estado_4.png);
}


.estado .tipo {
	position:absolute;
	width:100%;
	bottom:15px;
  line-height: normal;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}



.estado:hover, .estado.active {
	background-color: #e5332a;
	color:#fff;
	background-size:90% auto;
	transform: scale(1.5);
	transition: background 0.2s, transform 0.2s;
	z-index: 19;
}

.estados{
	margin-top: 5%;
}


@media (max-width: 850px) {
   
   .infotip{
	padding: 30px;
	margin-left: 0px;
	margin-right: 40px;
	border: 2px solid #b17f49;
	border-radius: 20px;
	color: #2b201c;
	background: #e5d8c6;
	font-size: 0.5em;
	}

}


@media(max-width: 500px){

	#dv-splash{
		background: url(../img/bg_2.png) #171423 center;+
	}

	.titulo{
		font-size: 1rem;
		margin-top: 15%; 
	}
	.titulo-2{
		font-size: 1rem;
		margin-top: 15%; 
	}

	.cuchimilco{
		width: 60%;
	}

	.contenido{
		width: inherit;
		float: none;
	}

	.infotip{
		padding: 30px;
		margin-left: 10px;
		margin-right: 10px;
		border: 2px solid #b17f49;
		color: #2b201c;
		background: #e5d8c6;
		font-size: 0.4em;
	}

	#txtCompromiso{
		border: 2px solid #b17f49;
	}


	.radio{
    	margin-left:2%;
    	margin-right:2%;
	    width:96%;
	    float:none;
	    position:relative;
	    margin-bottom: 10px;
	}

}



}