@font-face {
    font-family: 'rutacpc';
    src: 
         url('fuentem/Tipo Metro CDMX.otf') format('opentype');;
    font-weight: normal;
    font-style: normal;
}
a:link,a:visited{
	text-decoration: none;
	color:white;
}
 body {
	margin: 0px 0px;
	padding: 0;
	font-family: "Roboto", "rutacpc","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 14px;
	background-color: #f1f1f1;
}
h1, h2 {
	font-family:  "rutacpc","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}	
.video h1{
	font-family: "Roboto", "rutacpc","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}			
table {
	padding:20px;
	margin: 30px;
	background-color:white;
}
form {
	 padding:40px 40px 0px 40px;
	margin: 0;
	max-height:250px;
	/*height:90%;*/
	/*box-sizing:border-box;*/
 }
input[type=text] {
	border: none;
	border-bottom: 2px solid #333b4e;
	width: 50%;
	/*font-family: rutacpc, Helvetica, Neue;*/
}					
textarea {
	border: none;
	width: 100%;
	height: 100px;
	background-color: #e8f1fa;
	font-size: 1em;
	font-family: rutacpc, Helvetica, Neue;
} 
#customers {
		
			font-family: rutacpc, "Trebuchet MS", Arial, Helvetica, sans-serif;
			border-collapse: collapse; 
			background-color:white;
			/*width: 100%;*/
			padding:20px;
			margin: 30px;
			}
#customers td, #customers th {
							font-size: 11px;
							border: 1px solid #009845;
							padding: 8px;
							}
#customers td  {
	color:#D5A94D;
	/*background-color:white;*/	
}
#customers tr  {
	
	background:white;	
}
/*#customers tr:nth-child(even){background-color: #f2f2f2;}*/
#customers tr:hover {
	background-color: #ddd;
}
#customers th {
	
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: #009845;
	color: white;
				}
#customers td a {
	background: #009845 0% 0% no-repeat padding-box;
	border-radius: 4px;
	text-decoration:none;
	padding:1px 20px 1px 20px ;
	color:white;
	opacity: 1;
   }
.grid {
	display:grid;
	grid-template-columns: 233px 1fr ;
	grid-template-rows: 25px auto 100px;
	height:100%;
	width:100%;
	}
.sidenav {
	background-color: white;
	height: 100%;
	grid-row:1/3;
	/* padding-left: 38px;*/
	/* padding-top:50px;*/
	/*color:#1E3A66;*/
	/*color: #0056B9;*/
	color: #7F7EBA;
	float:left;
	box-sizing:border-box;

}
.sidenav p {
	font-size:21px ;
	text-align: center;
 }
.sidenav > img {
	padding:50px 10px 50px 20px;
	width: 200px;
	height: 104px;
	align-self:center;
	/*padding-left: 38px;
	padding-bottom:50px;
	width:90%;*/
}
.sidenav h3 {
	font-size:21px;
	font-weight:bolder;
	padding-left: 38px;
}
.sidenav h1.col1{
	display:none;
}
.menu a {
	/*color:#1E3A66;*/
	color: #0056B9;
	text-decoration:none;
}
.menu li {
	color:#1E3A66;
	text-decoration:none;
	list-style-type:none;
	padding: 15px 50px 15px 50px;
}
  .menu li:hover, .menu li:hover > a {
	/*background-color:#90289F;*/
	background-color:#7F7EBA;
	color:white;
}
.menu {

	padding:0px 0px 0px 0px;
}
.menu  li.activo , .menu li > a.activo {
	background-color:#1E3A66;
	color:white;
 }
.nav {
	grid-column: 2/4;
	align-self:end;
	padding-right:100px;
	/*color:#1E3A66;*/
	color: #0056B9;
	font-size:14px;
	list-style:none;
	box-sizing:border-box;
	float:left;
}
.nav > li {
	float:left;
}
.nav li a {
	/*color:#1E3A66;*/
	color: #0056B9;
	text-decoration:none;
	padding:10px 12px;
	opacity:0.5;

}
.nav li a:visited{
	/*color:#1E3A66;*/
	color: #0056B9;
	border-bottom-style:solid;
	border-bottom-color:#D5A94D;
	border-bottom-width:3px;
	opacity:1;
}
.nav  a {
/*color:#1E3A66;*/
	color: #0056B9;
	text-decoration:none;
	float:left;
	padding:10px 12px;
	border-bottom-style:solid;
	border-bottom-color:#D5A94D;
	border-bottom-width:2px;
}
.nav a.hoy {
	/*color:#1E3A66;*/
	color: #0056B9;
	border-bottom-style:solid;
	border-bottom-color:#D5A94D;
	border-bottom-width:3px;
	opacity:1;
}
.well1 {
	display:grid;
	grid-column: 2/3;
	grid-template-columns: 50% 50%;
	height:auto;	
	/*color:#1E3A66;*/
	/*color: #0056B9; */
	color: #F26430; 
 }
 .jumbotron11{
	margin:0 auto;
	display:grid;
	grid-column: 1/2;
	grid-template-rows: 65% auto;
	width:90%;
	background-color:white;
	box-shadow: 0px 3px 6px #0000001A;
   border: 0.5px solid #0000001A;
   border-radius: 10px;
   text-align: center;
}
.video{
	width:95%;
	margin: 0 auto;
	grid-row:1/2;
} 
.preg{
	display:none;
}
.preg1{
	display: none;
} 
.bot{
	cursor:pointer;
	background-color: #90289F;
	border-radius: 2px;
	padding-left: 15px;
	padding-right: 15px;
	color:#f1f1f1;
	text-decoration: none;
}
.modal-content{
	height: calc(100% - 15px);
}
.close{
	display:none;
}
/*.jumbotron11 div:nth-of-type(2),*/.jumbotron11 div:nth-of-type(3) {
	display: none;
}
.jumbotron12{
	margin:0 auto;
	grid-column: 2/3;
	width:90%;
	background-color:white;
	box-shadow: 0px 3px 6px #0000001A;
   border: 0.5px solid #0000001A;
   border-radius: 10px;
} 
.well {
	display:grid;
	grid-column: 2/3;
	height:auto;	
	/*color:#1E3A66;*/
	color: #0056B9; 
 }
.well > input[type=text] {
	border: none;
	border-bottom: 2px solid #333b4e;
	width: 50%;
	font-family: rutacpc, Helvetica, Neue;
}
.well input[type=submit], .well button {
	color:white;
	/*background: #90289F 0% 0% no-repeat padding-box;*/
	background: #7F7EBA 0% 0% no-repeat padding-box;
	border-radius: 4px;
	padding:5px 20px 5px 20px;
	opacity: 1; 
	display:grid;
	width:100px;
	height:50px;
 }
.well input[type=submit]:hover, .well button:hover {
	opacity: 0.5; 
}
.jumbotron1{
	font-size: 12px;
	text-align: center;
	 margin:0 auto;
	 width:90%;
	 background-color:white;
	 box-shadow: 0px 3px 6px #0000001A;
	border: 0.5px solid #0000001A;
	border-radius: 10px;
 }
.jumbotron1 p {
	padding: 0px 15px;
 } 
.jumbotron2 {	
	margin:0 auto;
	width:80%;
	text-align: left;
	font-size: 14px; 
	/*font-family: rutacpc, Helvetica, Neue;*/
	letter-spacing: 0;
	/*color: #707070;#009845*/
	/*color: #009845;*/
	color: #F26430; 
	opacity: 1;
	border-left:3px solid /*#D5A94D #FEAE01*/ #F9A660;
	text-decoration:none;
	background-color:white;
}
.jumbotron2 h1{
		font-size:20px;
		padding-left:20px;
	}
.jumbotron2 a, .cita1  a {
	text-decoration:none;
	padding-left:40px;
	color: #707070;
	
}
.jumbotron2 p {	
	/*color:#1E3A66;*/
	/*color: #0056B9;*/
	color: #7F7EBA;
	padding-left:40px;
}
.jumbotron2 h2 {	
	/*color:#1E3A66;*/
	color: #0056B9;
	padding-left:40px;
}
.jumbotron2 ol {	
	margin-left:40px;
}
.jumbotron2 a:hover, .cita1  a:hover {
	/*color: #1E3A66;*/
	color: #0056B9;
	text-shadow:3px 5px 4px #D5A94D;
	
}
.jumbotron2 textarea {
	background:white;
	border-radius: 4px;
	border:solid 1px #FEAE01;
	color:#707070;
}
.jumbotron2 textarea:focus-visible, .jumbotron2 input:focus-visible {
	border:solid 2px #009845;
	outline: #009845;
}
.jumbotron2 input[type=submit] {
	border:solid 1px #FEAE01;
	width:auto;
	height:auto;
}
 .jumbotron2  select {
	border-bottom-color:#D5A94D;
	border-bottom-width:2px;
	border-top:none;
	border-right:none;
	border-left:none;
	color:#D5A94D;
	font-size: 15px;
	font-family:rutacpc, Helvetica, Neue;
	letter-spacing: 0;
	text-align:right;
}
.jumbotron2 input[type=radio] {
	padding:0;
	text-align:center;
}
.footer {
	display:grid;
	grid-row:3/4;
	grid-column:1/3;
	height:100%;
	grid-template-columns: 75% 7.25% 17.75% ;
	/*background:#151721;*/
	background:#7F7EBA;
	left:0px;
	right:0px;
	bottom:0px;
	margin: 0px 0px 0px 0px;
	box-sizing:border-box;
	overflow:hidden;
}
.footer p {
	margin: 0;
	align-self:center;
	text-indent:92px;
	text-align:left;
	color:white;
	font-family: rutacpc, Helvetica, Neue;
}
.footer img.a {
	filter: brightness(0) invert(1);
	width:100px;
	justify-self:end;
	align-self:center;
	
}
.footer img.b {
	filter: brightness(0) invert(1);
	height:100px;
	justify-self:center;
	align-self:center;
}
 .footer p a{
	text-decoration: none;
 }
 /*.footer p a:visited{
	text-decoration: none;
 }*/
/*IPAD MINI landscape*/
@media only screen and (max-width: 1030px) and (orientation:landscape) {
	.grid{
		grid-template-columns:150px 1fr;
		max-height:650px;
	}
/*	.sidenav{
		max-height:600px;
	}*/
	.sidenav img{
		width:145px;
		padding: 0px 0px 0px 5px;
	}
	.sidenav h1{
		font-size:14px;
	}
	.sidenav p, .sidenav h3{
	font-size:12px;
	}
	.sidenav h3{
		padding: 0px;
		margin: 0 auto;
		width:75%;
		text-align:center;
	}
	.well1{
		height:95%;
		max-height:550px;
	}
	.jumbotron11{
		grid-template-rows:50% auto;
		max-height:525px;
		
	}
	/*.jumbotron11 div:nth-of-type(2) {
		display: none;
	}*/
	.video{
		grid-row:1/2;
		 overflow: hidden;
	}
	.video h1{
		font-family: "Roboto", "rutacpc","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size:16px;
		display: inline-block;
        animation: deslizar 10s linear infinite;
		white-space: nowrap;
            /*font-size: 2em; /* Tamaño del texto */
	}
	 @keyframes deslizar {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
	.modal{
		grid-row:2/3;
		overflow:auto;
	}
	.footer{
		max-height:100px;
		grid-template-columns:70% 10% 30%;
	}
	.footer img.a {
		width: 65px;
	}
	.footer img.b {
		justify-self:start;
		height:60px;	
	}
	.footer p {
		font-size:12px;
		text-indent: 0px;
		text-align:center;
	}
}	

/*IPAD MINI horizontal*/

/*@media only screen and (max-width: 768px) {*/
@media only screen and (max-width: 770px) and (orientation:portrait){

	.grid{ 
		grid-template-columns: 1fr;
		grid-template-rows: 130px auto 75px;
		max-height:990px
	}
	.sidenav{
		display:grid;
		grid-row: 1/2;
		align-items: center;
		max-height:125px;
	}
	.sidenav > img {
		display: none;
	}
	.sidenav center.col{
		display:none;
	}
	.sidenav h1.col{
		display:none;
	}
	.sidenav h1.col1{
		display:contents;
		font-size:18px;
		white-space:nowrap;
	}
	.sidenav p{
		margin-bottom: 3px;
		margin-top: 3px;
	}
	.sidenav p, .sidenav h3{
		font-size: 14px;
		padding: 0px;
		text-align: center;
	}
	.sidenav h3{
		margin-bottom: 3px;
		margin-top: 3px;
	}
	.sidenav > hr, 
	.nav{
		display: none;
	}
	.sidenav ul{
		margin: 0% 0%;
	}
	.menu li {
		padding: 0;	
		text-align: center;
	}
	.menu a{
		color:#f1f1f1;
	}
	li a {
		background-color: #009845;
		padding-left: 15px;
		padding-right: 15px;
		cursor: pointer;
		border-radius: 2px;
	 }
	.well1{
		grid-column: 1/2;
		grid-row: 2/3;
		grid-template-columns: 1fr;
		grid-template-rows: 52% 47%;
		max-height: calc(100% - 3%);
		height:100%;
	}
	.jumbotron11{
		max-height: 380px;
		grid-template-rows: 90% auto;
	}	
	.jumbotron11 h1{
		font-size: 14px;
	}
	.jumbotron11 div:nth-of-type(2) {
		display: none;
	}	
	.styleIt {
		width: 550px;
		margin: auto;
	}	
	.preg{
		display: block;
		text-align: center;
    	align-self: center;
		max-height: 66px;
	} 
	.preg a{
		text-decoration: none;

	}	
	.preg1{
		display: none;
	}
	.modal {
		display: none; /* Oculto por defecto */
		position: fixed;
		z-index: 1; /* Encima de todo */
		left: 0;
		top: 0;
		margin: auto;
		width: 100%;
		height: 80%;
		overflow: auto;
		display: flex; /* Flexbox para centrar */
		background-color: rgba(0,0,0,0.4); /* Fondo oscuro con transparencia */
		align-items: center; /* Centrado vertical */
		justify-content: center; /* Centrado horizontal */
	  } 	
	.modal-content {
		background-color: #fefefe;
		padding: 20px;
		border: 1px solid #888;
		width: 80%; /* Puedes ajustar el ancho según sea necesario */
		max-width: 600px; /* Ancho máximo para el contenido del modal */
		box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra para el efecto de elevación */
		border-radius: 10px; /* Esquinas redondeadas */
		position: relative; /* Para posicionar el botón de cierre */
		max-height:calc(100% - 30%);
	  }	
	 .close {
		display: contents;
		position: absolute;
		top: 25px;
		right: 20px;
		/*color: #aaa;*/
		font-size: 28px;
		font-weight: bold;
		cursor: pointer;
	  }  
	 .close:hover,
	 .close:focus {
		color: #000;
		text-decoration: none;
		cursor: pointer;
	  }
	/*.mod{
		height:calc(100% - 50%);
		max-height: 50%;
	  }*/
	.jumbotron12{
		grid-row: 2/3;
		grid-column: 1/2;
		max-height: 98%;
	}
	.pregs{
		max-height: 350px;
	}
	/*.well{
		max-height:275px;
	}*/
	.well .jumbotron1{
		max-height:calc(100% - 5px)
	}	
	.jumbotron2{
		width: 95% ;
	}
	.pregslap h1 {
		font-size: 16px;
		padding: none;
	}
	.pregslap p, .pregslap h1 {
		margin-bottom: 3px;
		margin-top: 3px;
		padding: 5px;
	}
	.footer{
		grid-template-columns:65% 10% 35%;
		grid-row: 3/4;
		max-height: 75px;
		text-align: center;
	}
	.footer p{
		text-indent: 0px;
		text-align: center;
	}
	.footer .a , .footer .b {
		max-width:calc(100% - 1%);
		max-height:70px;
	}
	.footer img.b{
		justify-self:start;
	}
	#rotate-message {
        display: none;
    }
}
/*SMARTPHONE HORIZONTAL*/
@media only screen and (max-width: 750px) and (orientation: landscape){
	.grid{
		grid-template-rows:15% auto 75px;
		grid-template-columns:1fr ;
		max-width:745px;
	}
	.sidenav{
		display:grid;
		grid-row: 1/2;
		grid-column:1/2;
		max-height:calc(100% - 0.5%);
	}
	.sidenav img{
		display:none;
		visibility:hidden;
	}
	.sidenav center.col{
		display:none;
	}
	.sidenav h1.col{
		display:none;
	}
	.sidenav h1.col1{
		display:contents;
		font-size:18px;
		white-space:nowrap;
	}
	.sidenav p, .sidenav hr{
		display:none;
	} 
	.sidenav .menu{
		margin: 0px;
	}
	.sidenav .menu li{
		padding:0px;
		text-align: center;
	}

	.nav{
		display:none;
		visibility:hidden;
	}
	.well1{
		grid-row:2/3;
		grid-column:1/2;
		grid-template-columns:1fr;
		height:100%;
	}
	.preg, .preg1{
		display:contents;
	}
	.jumbotron11{
		grid-template-rows: 85% 1fr 1fr;
		max-width:350px;
	}
	.jumbotron11 div:nth-of-type(2) {
		display: none;
	}
	.modal, .modal1 {
		display: none; /* Oculto por defecto */
		position: fixed;
		z-index: 1; /* Encima de todo */
		left: 0;
		top: 0;
		margin: auto;
		width: 100%;
		height: 80%;
		overflow: auto;
		display: flex; /* Flexbox para centrar */
		background-color: rgba(0,0,0,0.4); /* Fondo oscuro con transparencia */
		align-items: center; /* Centrado vertical */
		justify-content: center; /* Centrado horizontal */
	  } 	
	.modal-content, .modal-content1 {
		background-color: #fefefe;
		padding: 20px;
		border: 1px solid #888;
		width: 80%; /* Puedes ajustar el ancho según sea necesario */
		max-width: 600px; /* Ancho máximo para el contenido del modal */
		box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra para el efecto de elevación */
		border-radius: 10px; /* Esquinas redondeadas */
		position: relative; /* Para posicionar el botón de cierre */
		max-height:calc(100% - 30%);
	  }	
	 .close, .close1 {
		display:contents;
		position: absolute;
		top: 25px;
		right: 20px;
		/*color: #aaa;*/
		font-size: 28px;
		font-weight: bold;
		cursor: pointer;
	  }  
	 .close:hover,
	 .close:focus, .close1:hover, .close1:focus  {
		color: #000;
		text-decoration: none;
		cursor: pointer;
	  }
	 iframe.mod, iframe.mod1{
		/*height:calc(100% - 50%);*/
		max-height:calc(100% - 10%) ;
	  }
	  .modal-content1 {
		height:calc(100% - 10%);
	  }
	.jumbotron12{
		display:none;
		visibility:hidden;
	}
}	
/*@media only screen and (max-width: 415px) and (orientation: portrait){
	.grid{
		max-height: 414px;
		grid-template-rows: 75px 1fr 50px;
	}
	.sidenav{
		max-height: 75px;
	}
	.sidenav *{
		font-size: 8px;
	}
	.sidenav p {
		visibility: hidden;
		display: none;
	}
	.well1{
		max-height: 264px;
		grid-template-rows:  auto;
	}
	.jumbotron11{
		max-height: 264px;
		grid-template-rows: 85% 7.5% 7.5%;
	}
	.jumbotron11 div {
		grid-row: 1/2;
	}
	.jumbotron11 div h1{
		display:none
	}
	iframe.mod{
		
		max-height:calc(100% - 10%) ;
	  }
	.preg{
		grid-row: 2/3;
		margin: 0px;
	}
	.preg1{
		display:block;
		grid-row: 3/4;
		margin: 0px;
	}
	.jumbotron12{
		display: none;
	}
	.footer{
		max-height: 50px;
	}

}*/
@media only screen and (max-width: 750px)and (orientation: portrait) {

    .grid {
        display: none;
    }

    #rotate-message {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #f0f0f0;
        color: #333;
        font-size: 24px;
        text-align: center;
        z-index: 9999;
    }
	
}
@media only screen and (orientation: landscape) {
    #rotate-message {
        display: none;
    }

    /*body {
        display: block;
    }*/
}