@charset "utf-8";
/* CSS Document */

font-face { font-family: "proximaNovaBlack";     src: url("fuentes/proximanova-black.otf"); }
@font-face { font-family: "proximaNovaExtraBold"; src: url("fuentes/proximanova-xbold.otf"); }
@font-face { font-family: "proximaNovaBold";      src: url("fuentes/proximanova-bold.otf"); }
@font-face { font-family: "proximaNovaSemiBold";  src: url("fuentes/proximanova-semibold.otf"); }
@font-face { font-family: "proximaNovaRegular";   src: url("fuentes/proximanova-regular.otf"); }
/*Rules*/

body { 
	font-family: "proximaNovaRegular";
	font-size: 1rem;
	top: 0!important;
}
h1, h3, h5, h6 {
	text-transform: uppercase;
}
h1 {
	font-family: "proximaNovaBlack";
}
h2 {
	font-family: "proximaNovaExtraBold";
	text-decoration: none;

}
h3, h4, h5, h6 {
	font-family: "proximaNovaBold";
}
h4 a {
  text-decoration: none;
}
h2 a {
  text-decoration: none;
}
h3 a {
  text-decoration: none;
}

section, article, aside, footer {
	margin-top: var(--GTOmedianil);
}


footer {
	padding-top: var(--GTOmedianil);
	padding-bottom: var(--GTOmedianil);
	background-color: var(--GTOheadFoot);
}
a.dropdown-item {
	font-family: "proximaNovaBold";
	color: #28009b;
	font-size: 10px;
}
a.dropdown-item:hover {
	background-color: var(--GTOeduCalidad);
	color: var(--GTOazulMarino);
}
#TopBar {
	background-color: var(--GTOheadFoot);
	text-transform: uppercase;
	padding-bottom: 0;
	font-size: .89rem;
}
#MainMenu {
	padding-top: 0;
	padding-bottom: 0;
}
#menuNosotros.show, #menuOferta.show, #menuServicios.show, #menuTrans.show, .menu:hover {
	background-color: var(--GTOazulMarino)!important;
	color: white!important;
}
#menu-SABES { 
	background-color: var(--GTOazulMedio);
}
#logoGTO, #logoGTOsabes {
	width: 155px;
}
#logoSABES {
	width: 30px;
}
#logoNRMX  {
	width: 40px;
}
#logosFoot {
	margin-bottom: var(--GTOmedianil);
}
.tipografia{
	font-family: "proximaNovaRegular";
	text-transform: uppercase;
	color: #2c2f86;

}
.tipografiamenu{
	font-family: "proximaNovaRegular";
	text-transform: uppercase;
	color: #2c2f86!important;
	font-size: .7rem;
	
}
.titulosfondoazul{
	font-family: "proximaNovaRegular";
	text-transform: uppercase;
	background-color: #2c2f86;
	color: #ffffff;	
	font-size: 1.2em;
	font-weight: 400;
}

.menuazul{
	font-family: "proximaNovaRegular";
	text-transform: uppercase;
	background-color: #2c2f86;
	color: #ffffff;	
	font-size: 1.5em;
	font-weight: 600;
	padding: 7px;
	letter-spacing: 2px;


}
.espaciologo{
	
	padding-bottom: 10px;
}
.espacios{
	
	padding:0 30px;
}
.disenoinferior{
	padding-top: 20px;
	background-color: #e5ebfa;
}

.pie{
	font-family: "proximaNovaRegular";
	color: #2c2f86;	
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	
}
.avisos{
	font-family: "proximaNovaRegular";
	text-transform: capitalize;
	background-color: #2c2f86;
	color: #ffffff;	
	font-size: 1.3em;
	font-weight: 400;

}

.iconoexclamacion{
  color: black;               /* color del ícono */
  background-color: #FFD43B;  /* círculo amarillo */
  border-radius: 50%;         /* lo convierte en círculo */
  padding: 5px 12px ;              /* espacio interno para que se vea redondo */
 
 
	
}

.iconohome{
	color: #2c2f86;
	font-size: 40px;
}
/*noticias*/


.colorazul{
	color: #2c2f86;
}

.iconosazulclaro{
	
	color: #0066ff;
	font-size: 20px;
}
.container-fluid {
	max-width: 1622px!important;
}
.blue {
	color: var(--GTOazulMarino)!important;
	text-decoration: none;
}
.bg-primary {
	background-color:var(--GTOazulMarino)!important;
}
.bg-secondary {
	background-color:var(--GTOeduCalidad)!important;
}
.vLine {
	font-size:1.5rem;
	color: var(--GTOazulMarino);
}
.menu {
	font-family: "proximaNovaBold";
	text-transform: uppercase;
	font-size: .9rem;
	
}
.dropdown-menu-item {
	border-top: solid medium;
	color: #280242;
	width: 100%;
	background-color: white!important;
	font-size: 15px;
}
.nav-item {
	padding: .5rem!important;
	color: #280242;
}
.nav-link {
	padding: .5rem!important;
}
.nav-link:link, .nav-link:active, .nav-link:hover { 
	color:var(--GTOazulMedio);
}
.card-header {
	font-family: "proximaNovaBold";
	height: 60px;
	background-color: var(--GTOazulMarino);
	color: white;
	padding-top: 18px;
}
.list-group-item {
	font-family: "proximaNovaBold";
	color: var(--GTOazulMarino);
	padding-top: 3%;
	font-size: .9rem;
	min-height: 50px;
}
.list-group-item:hover {
	background-color: var(--GTOeduCalidad);
}
.btnFoot {
	color: var(--GTOazulMarino);
	text-decoration: none;
}
.btnTransp {
	color: var(--GTOazulMarino);
	text-decoration: none;
}
.avisoIndex {
	border-bottom-right-radius: 40px;
	border-top-right-radius: 40px;
}
.tabSABES {
	width: 100%;
	text-align: left;
	color: white;
	font-size: .9rem;
}
.tabSABES:hover {
	background-color: var(--GTOeduCalidad);
	color: var(--GTOazulMarino);
}

.fa-lg {
	margin-right: 5px;
}

.separacionlogo {
    font-size: 30px;
	font-weight: 600;
	color: #1b009d;
}

/*Google-Translate*/

a.gflag {
	font-size: var(--GTOmedianil);
	background-repeat: no-repeat;
	background-image: url(//gtranslate.net/flags/32.png);
	margin-left: 5px;
	margin-right: 5px;
}
a.gflag img {
	border:0;
}
#goog-gt-tt {
	display: none!important;
}
#google_translate_element2 {
	display: none!important;
}
.goog-te-banner-frame {
	display: none!important;
}
.goog-te-menu-value:hover {
	text-decoration: none!important;
}
.texto-menu {
    font-size: 14px;
	font-weight: 400;
}
.lineavertical {
    font-size: 14px;
	font-weight: 400;
	letter-spacing: 2pt;
}
.sin-subrayado {
    text-decoration: none;
}


@media (max-width: 1068px) {
    .texto-menu {
        display: none; /* Oculta solo el texto */
    }
}
@media (max-width: 1068px) {
    .lineavertical {
        display: none; /* Oculta solo el texto */
    }
}
@media (max-width: 768px) {
    .misabesvirtual {
        content: url('../svg/bot_misabesvirtual_colapsado1.svg' ); /* Nueva imagen cuando la pantalla se reduce */
		width: 30px;
		height: 30px;
    }
}



/*MediaQuerys*/
@media(min-width:768px) {
	#logoGTO, #logoGTOsabes { 
		width: 316px;
	}
	#logoSABES { 
		width: 60px;
	}
	#logoNRMX  {
		width: 75px;
	}
	#ab84c17a {
		width:98%;
		height:90px;
	}
	.avisoIndex {
		border-top-right-radius: 800px;
		border-bottom-right-radius: 800px;
		text-align: left;
	}
}
@media(min-width:992px) {		
	#TopBar {
		height: 80px;
		padding-top: 17px;
		font-size: 1rem;
	} 
	#logoGTO, #logoGTOsabes {
		width: 230px;
	}
	#logoSABES {
		width: 40px;
	}
	#logoNRMX {
		width: 55px;
	}
	.menu {
		font-size: .8rem;
		max-width: 115px;
		height: 80px;
		padding-top: 25px!important;
	}
	.dropdown-menu-item {
		width:auto;
	}
	.list-group-item {
		padding-top: 4%;
		min-height: 45px;
	}
}
@media(min-width:1200px) {
	a.dropdown-item {
		font-size: 1rem;
	}
	#logoGTO, #logoGTOsabes {
		width: 315px;
	}
	#logoSABES {
		width: 55px;
	}
	#logoNRMX {
		width: 75px;
	}
	.menu {
		font-size: .9rem;
		max-width: 130px;
		height: 90px;
		padding-top: 25px;
	}
	.list-group-item {
		min-height: 57px;
		font-size: 1rem;
	}
}
@media(min-width:1350px) {
	.menu {
		height: 95px;
		padding-top: 25px;
	}
	.colsFoot {
		font-size: 1rem;
	}
	.list-group-item {
		min-height: 66px;
	}
}
@media(min-width:1600px) {
	.list-group-item {
		min-height: 81px;
	}
}


 .fondomenu {
                background-color: #f8f9fa;
                
 }
 .fondoazulclaro {
                background-color: #e4ecfa;
                
 }
.ceroespacio{
	padding: 0;
	margin: 0;

}
/* Menú superior */
.top-menu {
            background-color: #e4ecfa; /* Color del fondo */
            padding: 10px 0;
 }
        .menu-section {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .menu-section a {
            margin: 0 10px;
            color: #000f9f;
            text-decoration: none;
        }
        .menu-section a:hover {
            color: #000f9f;
        }
        .menu-section button {
            background-color: #000f9f;
            color: white;
            border: none;
            padding: 5px 15px;
            border-radius: 5px;
            cursor: pointer;
        }
        .menu-section button:hover {
            background-color: #000f9f;
        }
/* tarjetas */


.cardBox {
  float: left;
  font-size: 1.2em;
  margin: 1% 0 0 1%;
  perspective: 800px;
  transition: all 0.3s ease 0s;
  width: 23.7%;
}

.cardBox:hover .card {
  transform: rotateY( 180deg);
}

.card {
  background: #222;
  cursor: default;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.4s ease 0s;
  width: 100%;
  -webkit-animation: giro 1s 1;
  animation: giro 1s 1;
}

.card p {
  margin-bottom: 1.8em;
}

.card .front,
.card .back {
  backface-visibility: hidden;
  box-sizing: border-box;
  color: white;
  display: block;
  font-size: 1.2em;
  height: 100%;
  padding: 0.8em;
  position: absolute;
  text-align: center;
  width: 100%;
}

.card .front strong {
  background: #fff;
  border-radius: 100%;
  color: #222;
  font-size: 1.5em;
  line-height: 30px;
  padding: 0 7px 4px 6px;
}

.card .back {
  transform: rotateY( 180deg);
}

.card .back a {
  padding: 0.3em 0.5em;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 1px;
  font-size: 0.9em;
  transition: all 0.2s ease 0s;
}

.card .back a:hover {
  background: #fff;
  color: #333;
  text-shadow: 0 0 1px #333;
}

.cardBox:nth-child(1) .card .back {
  background: cornflowerblue;
}

.cardBox:nth-child(2) .card .back {
  background: orange;
}

.cardBox:nth-child(3) .card .back {
  background: yellowgreen;
}

.cardBox:nth-child(4) .card .back {
  background: tomato;
}

.cardBox:nth-child(2) .card {
  -webkit-animation: giro 1.5s 1;
  animation: giro 1.5s 1;
}

.cardBox:nth-child(3) .card {
  -webkit-animation: giro 2s 1;
  animation: giro 2s 1;
}

.cardBox:nth-child(4) .card {
  -webkit-animation: giro 2.5s 1;
  animation: giro 2.5s 1;
}

@-webkit-keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@media screen and (max-width: 767px) {
  .cardBox {
    margin-left: 2.8%;
    margin-top: 3%;
    width: 46%;
  }
  .card {
    height: 285px;
  }
  .cardBox:last-child {
    margin-bottom: 3%;
  }
}

@media screen and (max-width: 480px) {
  .cardBox {
    width: 94.5%;
  }
  .card {
    height: 260px;
  }
}