@font-face {font-family:acen; src:url(../fonts/acens.ttf) format("truetype"); font-weight:normal; font-style:normal;}
@font-face {font-family:antipasto; src:url(../fonts/antipasto.ttf) format("truetype"); font-weight:normal; font-style:normal;}
@font-face {font-family:arkitech; src:url(../fonts/arkitech_light.ttf) format("truetype"); font-style:normal; font-weight:normal;}
@font-face {font-family:denmark; src:url(../fonts/denmark.ttf) format("truetype"); font-style:normal; font-weight:normal;}
@font-face {font-family:asesina; src:url(../fonts/asesina.ttf) format("truetype"); font-style:normal; font-weight:normal;}
@font-face {font-family:bisq; src:url(../fonts/bisque.woff) format("woff"); font-weight:normal; font-style:normal;}
@font-face {font-family:opensans; src:url(../fonts/opensans.ttf) format("truetype"); font-style:normal; font-weight:normal;}
@font-face {font-family:banchif; src:url(../fonts/bahnschrift.ttf) format("truetype"); font-style:normal; font-weight:normal;}
/* variables*/
:root{
--animacion:all ease-out 0.3s 0.4s;
--atras: -10;
--normal:1;
--tips:10;
--encima:100;
--modal:1000;
}
body {
margin: 0;
padding: 0;
font-family: "antipasto";
overflow-x: hidden;
background: #fff;
text-rendering: geometricPrecision optimizeLegibility;
background-size: cover;
}
h1, h2, h3, h4, p {font-weight:normal; padding:0; margin:0;}
a {margin:0; padding: 0; text-decoration: none;}
ul {list-style:none;}
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
.oculto {
display: none;
}
@media screen and (min-width:640px){
header{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.img-fondoalt{
position: absolute;
top: 0;
left: 0;
}
.fondo{
position: absolute;
top:0;
left: 0;
background-color: rgba(0,0,0,0.4);
width: 100vw;
height: 100vh;
cursor: default;
}
.fondo a{
cursor: default;
}
.logo{
position: absolute;
top: 5px;
left: 20px;
width: 25%;
}
.fecha-act{
position: absolute;
top: 5px;
right: 20px;
width: 400px;
color: #fff;
letter-spacing: 1px;
text-align: right;
}
.ico-pte{
position: absolute;
top: 40px;
right: 3%;
width: 160px;
height: 46px;
background-image: url(../img/lnk-pte01.png);
background-size: contain;
transition: 0.5s;
}
.ico-pte:hover{
background-image: url(../img/lnk-pte02.png);
background-size: contain;
right: 3.5%;
transition: 0.5s;
cursor: pointer;
}
.fnd-recibo-dig{
position: absolute;
top: 1.5vw;
left: 30%;
width: 40%;
color: #fff;
}
.instruc-recibodig{
font-family: "opensans";
font-size: 0.9vw;
}
.tit-recibodig{
position: relative;
top:0.1vw;
font-family: "denmark";
font-size: 1.7vw;
}
#numeroInsc{
position: absolute;
top: 1.7vw;
left: 33%;
width: 33%;
padding-left: 5px;
height: 1.35vw;
border-radius: 5px;
font-family: "acen";
letter-spacing: 2px;
font-size: 0.9vw;
}
#numeroInsc::placeholder{
font-family: "opensans";
letter-spacing: 0;
font-size: 0.8vw;
}
#recibodig{
position: absolute;
top: 1.7vw;
left: 70%;
width: 22%;
height: 1.35vw;
border-radius: 5px;
background-color:rgba(236, 124, 0, 0.7);
font-size: 0.9vw;
color: #fff;
cursor: pointer;
outline: 1px solid;
outline-color: rgba(255, 255, 255, 1);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
#recibodig:hover{
transform: scale(0.9);
border: 1px solid #fff;
outline-color: rgba(255, 255, 255, 0);
outline-offset: 80px;
}
.franja-fndmenuprin{
position: absolute;
top: 98px;
left: 30%;
width: 70%;
height: 1.5vw;
background-color: rgba(0, 0, 0, 0.6);
}
.lnk-mesapartes{
position: absolute;
top: 172px;
right: 6%;
width: 243px;
height: 46px;
padding-top: 7px;
padding-left: 10px;
padding-right: 25px;
background-color: rgba(0,0,0,0.5);
/* border: 1px solid #fff; */
/* border-radius: 8px; */
transition: 0.5s;
z-index: 1;
}
.lnk-mesapartes:hover{
background-color: rgba(66,161,214,0.3);
transition: 0.5s;
}
.mnu-prinnocel{
position: absolute;
top: 100px;
right: 40px;;
width: 60vw;
height: 27px;
}
.mnu-prinnocel a{
display:block;
font-family: "asesina";
font-size: 1.2vw;
text-align: center;
color: #fff;
width: auto;
font-weight: 300;
letter-spacing: 1px;
transition: 0.2s;
z-index: 1;
}
.mnu-prinnocel a:hover{
text-decoration: underline;
transition: 0.2s;
}
.lnk-mnuprin01{
position: absolute;
top: 0;
right: 39vw;
}
.lnk-mnuprin02{
position: absolute;
top: 0;
right: 20vw;
}
.tit-fndmnu{
position: absolute;
top: 3%;
right: 5%;
width: 95%;
font-family: "denmark";
font-size: 1.3vw;
text-align: right;
color: #fff;
}
.fdn-prinoptmnu{
position: absolute;
top: 15%;
left: 0;
width: 100%;
height: 30%;
background: #384248;
}
.fdn-prinoptmnu a{
font-family: "antipasto";
font-size: 1.1vw;
display: block;
color: #acd9f2;
transition: all 0.4s ease;
}
.fdn-prinoptmnu a:hover{
color: #ffe571;
transform: scale(0.9);
transition: all 0.4s ease;
}
.mnu-prinnocel .btn-closmenuprin:hover{
color: rgba(0,0,0,0);
}
.modal-mnu01{
position: absolute;
width: 65%;
height: 45vh;
top: -100px;
left: 0;
display: flex;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.fnd-modalmnu01{
width: 100%;
height: 100%;
position: relative;
display: flex;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-mnu01:target {
top:0;
background: rgba(0,0,0,0);
visibility: visible;
opacity: 1;
z-index: 1;
}
.modal-mnu01:target .fnd-modalmnu01{
top: 30px;
left: 0;
width: 100%;
visibility: visible;
background: #48565d;
border: 1px solid #fff;
transition: all 1s linear;
}
.flechamenu01{
visibility: visible;
position: absolute;
top: 21px;
left: 30%;
width: 19px;
height: 12px;
background: url(../img/flecha-menu.png);
}
.mnu-prinnocel .btn-closemnu01{
display: block;
position: absolute;
top:0;
left: 25%;
width: 30%;
height: 20px;
background: rgba(0,0,0,0);
color: rgba(0,0,0,0);
z-index: 2;
}
.lst01-mnuprin01{
position: absolute;
top: 10%;
left: 0;
width: 100%;
height: 35%;
display: flex;
}
.lst02-mnuprin01{
position: absolute;
bottom: 10%;
left: 0;
width: 100%;
height: 35%;
display: flex;
}
.lst03-mnuprin01{
position: absolute;
bottom: 5%;
left: 6%;
width: 47%;
}
.lst03-mnuprin01{
list-style-image: url(../img/vineta01.png);
}
.lst03-mnuprin01 a{
text-align: left;
font-family: "antipasto";
font-size: 0.95vw;
padding-bottom: 10px;
transition: all 0.6s ease;
}
.lst03-mnuprin01 a:hover{
color: #acd9f2;
padding-left: 6%;
transition: all 0.6s ease;
}
.fnd-optmnuprin01{
position: absolute;
bottom: 5%;
right: 4%;
width: 44%
}
.modal-mnu02{
position: absolute;
width: 65%;
height: 45vh;
top: -100px;
left: 31%;
display: flex;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.fnd-modalmnu02{
width: 100%;
height: 100%;
position: relative;
display: flex;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-mnu02:target {
top:0;
background: rgba(0,0,0,0);
visibility: visible;
opacity: 1;
z-index: 1;
}
.modal-mnu02:target .fnd-modalmnu02{
top: 30px;
left: 0;
width: 100%;
visibility: visible;
background: #48565d;
border: 1px solid #fff;
transition: all 1s linear;
}
.flechamenu02{
visibility: visible;
position: absolute;
top: 21px;
left: 30%;
width: 19px;
height: 12px;
background: url(../img/flecha-menu.png);
}
.mnu-prinnocel .btn-closemnu02{
display: block;
position: absolute;
top:0;
left: 25%;
width: 30%;
height: 20px;
background: rgba(0,0,0,0);
color: rgba(0,0,0,0);
z-index: 10;
}
.lst01-mnuprin02{
position: absolute;
top: 11%;
left: 0;
width: 100%;
height: 35%;
display: flex;
}
.lst02-mnuprin02{
position: absolute;
bottom: 10%;
left: 0;
width: 100%;
height: 35%;
display: flex;
}
.lst03-mnuprin02{
position: absolute;
bottom: 5%;
left: 6%;
width: 47%;
}
.lst03-mnuprin02{
list-style-image: url(../img/vineta01.png);
}
.lst03-mnuprin02 a{
text-align: left;
font-family: "antipasto";
font-size: 0.95vw;
padding-bottom: 10px;
transition: all 0.6s ease;
}
.lst03-mnuprin02 a:hover{
color: #acd9f2;
padding-left: 6%;
transition: all 0.6s ease;
}
.fnd-optmnuprin02{
position: absolute;
bottom: 5%;
right: 4%;
width: 38%;
}
.form-mnuprin02{
position: absolute;
bottom: 8%;
width: 100%;
height: 40%;
}
.lbl-nunreclamomnuprin02{
position: absolute;
left: 5%;
top: 1%;
width:35%;
font-size: 1vw;
letter-spacing: 1px;
color: #fff;
}
#txt-numreclamomnuprin02{
position: absolute;
top: 31%;
left: 35%;
width: 30%;
outline: none;
background: none;
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px solid #7d7d7d;
padding-bottom: 1%;
font-family: "asesina";
color: #acd9f2;
font-size: 0.9vw;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
}
::placeholder{
font-weight: normal;
font-style: normal;
font-size: 0.9em;
color: #797979;
font-family: "asesina";
}
#btn-reclamo{
position: absolute;
top: 15%;
right: 5%;
width: 22%;
width: 22%;
height: 30px;
font-family: "antipasto";
font-size: 1vw;
letter-spacing: 1px;
background: #384248;
border: 1px solid #ffe571;
border-radius: 15px;
color: #ffe571;
cursor: pointer;
transition: all 0.5s ease;
}
#btn-reclamo:hover{
box-shadow: 0 0 10px #676767;
background: #48565d;
transform: scale(0.95);
transition: all 0.5s ease;
}
.lnk-podcast{
position: fixed;
bottom: 35%;
left: 0.5%;
width: 6%;
z-index: 100;
box-shadow: 3px 3px 10px #0000009e;
border-radius: 100%;
}
.cont-podcast{
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
visibility: hidden;
opacity: 0;
transition: all 600ms;
}
.cont-podcast:target{
background: rgba(0,0,0,0.8);
visibility: visible;
opacity: 1;
z-index: 100;
}
.cont-podcast:target .popup-podcast{
top: 50%;
left: 50%;
transform: rotate(0deg) translate(-50%, -50%);
visibility: visible;
}
.popup-podcast{
width: 100%;
max-width: 800px;
height: 600px;
position: relative;
display: flex;
background: black;
visibility: hidden;
top: -80%;
left: -80%;
transform: rotate(90deg) translate(-150%, 230%);
transition: all 600ms;
}
.tit-popup-videos{
position: absolute;
width: 100%;
top: 5%;
color: white;
font-family: "denmark";
font-size: 2vw;
color: #fff;
text-align: center;
}
.tit-video{
position: absolute;
top: 13%;
color: #ff8500;
text-align: center;
width: 100%;
font-size: 1vw;
font-weight: bold;
}
.video{
position: absolute;
top: 120px;
width: 100%;
left: 0;
}
.btn-close-popup{
display: block;
position: absolute;
top: 3%;
right: 2%;
width: 6%;
height: 2.5vw;
padding: 0.4vw;
border-radius: 6px;
border: 2px solid #fff;
background: #d88662;
box-shadow: 0 0 15px rgb(0 0 0);
color: #fff;
text-align: center;
letter-spacing: 1px;
font-size: 1.2vw;
font-weight: 600;
transition: all 0.3s linear;
z-index: 2;
}
.btn-close-popup:hover{
background: #ffb524;
box-shadow: 0 0 30px rgba(0,0,0,0.9);
transform: scale(1.05);
transition: all 0.3s linear;
}
.telef-emergencia{
position: absolute;
left: 2%;
top: 148px;
color: #fff;
width: 30vw;
height: 25px;
}
.ico-telf{
position: absolute;
top: 4px;
width: 16px
}
.numeros-telf{
position: absolute;
left: 25px;
top: 0;
letter-spacing: 1px;
font-size: 14pt;
width: auto;
}
.fnd-otrlnks{
position: absolute;
top: 130px;
right: 0;
width: 80vw;
height: 26px;
color: #fff;
font-family: "acen";
}
.fnd-otrlnks a{
color: #fff;
font-family:"antipasto" ;
letter-spacing: 1.5px;
width: auto;
}
.lnk-correo{
position: absolute;
top:3px;
right: 260px;
font-size: 12pt;
font-weight: 600;
}
.ico-mail{
position: absolute;
top:2px;
width: 17px;
right: 0;
}
.separador01{
position: absolute;
top:1px;
width: 1px;
right: 240px;
}
#input-search{
width: 300px;
height: 40px;
font-size: 14pt;
text-indent: 10px;
}
.content-search{
display: none;
}
.content-table{
width: 23%;
max-height: 65vh;
background: #d5d5d5;
overflow-y: visible;
overflow-x: hidden;
margin-top: 2%;
top: 12%;
position: absolute;
right: 2%;
z-index: 1;
}
.content-table::-webkit-scrollbar {
-webkit-appearance: none;
}
.content-table::-webkit-scrollbar:vertical {
width:10px;
}
.content-table::-webkit-scrollbar-button:increment,.planes::-webkit-scrollbar-button {
display: none;
}
.content-table::-webkit-scrollbar:horizontal {
height: 10px;
}
.content-table::-webkit-scrollbar-thumb {
background-color: #9b9b9b;
border-radius: 20px;
border: 3px solid #d5d5d5;
}
.content-table::-webkit-scrollbar-track {
border-radius: 10px;
}
.content-table table{
width: 100%;
}
tbody tr td a{
display: block;
padding: 10px;
color: #ffff;
text-decoration: none;
}
.datatables_empty{
color: #1a3875;
padding-left: 10px;
}
tbody tr td a:hover{
background: rgba(0, 0, 0, 0.301);
border: 2px solid #d5d5d5;
color: #ffff;
}
#table a{
color: #1a3875;
font-size: 10pt;
letter-spacing: 1.5px;
}
#table_length, #table_filter, #table_info, #table_paginate{
display: none;
}
.lnk-search{
position: absolute;
top: 3px;
right:0;
}
.ico-lupa{
position: absolute;
top:1px;
width: 15px;
right: 25px;
}
.txt-lnkcorreo{
position: absolute;
top:1px;
right: 27px;
width: 140px;
text-align: right;
transition: 0.2s;
}
.txt-lnkcorreo:hover{
color: #ce8800;
transition: 0.2s;
}
.txt-lnkintranet{
position: absolute;
top:1px;
right: 37px;
width: 120px;
text-align: right;
transition: 0.2s;
}
.txt-lnkintranet:hover{
color: #ce8800;
transition: 0.2s;
}
.txt-search{
position: absolute;
padding-left: 7px;
border-radius: 5px;
right: 50px;
width: 170px;
}
.txt-search:hover{
color: #ce8800;
transition: 0.2s;
}
.lnk-headfacebook{
position: absolute;
top: 12vw;
left: 2%;
width: 9vw;
font-family: "acen";
font-size: 1vw;
}
.lnk-headfacebook a{
position: relative;
top: 1px;
left: 5px;
width: 80px;
color: #fff;
letter-spacing: 2px;
text-align: left;
}
.fnd-modalogintranet{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vw;
background: rgba(0,0,0,0.3);
display: flex;
justify-content: center;
visibility: hidden;
z-index: 10;
}
.fnd-modalogintranet:target{
visibility: visible;
}
.modalogintranet{
position: absolute;
top: 10%;
background: #2d7e9e;
background-repeat: no-repeat;
width: 500px;
height: 334px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(255,255,255,0.7);
visibility: hidden;
transform: scale(0.7);
transition: all 0.5s ease;
opacity: 0;
}
.fnd-modalogintranet:target .modalogintranet{
transform: scale(1);
visibility: visible;
opacity: 1;
}
.btn-cerrarlogin {
position: absolute;
top: 2%;
right: 2%;
width: 4%;
height: 4%;
font-family: "denmark";
color: #fff;
font-size: 12pt;
transition: all 0.3s ease;
z-index: 1;
}
.btn-cerrarlogin:hover{
transform: scale(1.2);
}
.tit-modalogintranet{
position: absolute;
top: 3%;
left: 5%;
font-family: "denmark";
font-size: 22pt;
color: #fff;
width: 95%;
}
.lin-titmadalogintranet{
position: absolute;
top: 16%;
left: 0;
border-top: 1px solid #fff;
width: 80%;
}
.inputs-modalogintranet{
position: absolute;
top: 30%;
left: 20%;
width: 60%;
height: 25%;
}
.nombre-login{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40%;
border-radius: 6px;
background: rgba(255,255,255,0.4);
border: 1px solid #fff;
text-align: center;
font-size: 1.1vw;
color: #0075ca;
}
.clave-login{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
border-radius: 6px;
background: rgba(255,255,255,0.4);
border: 1px solid #fff;
text-align: center;
font-size: 1.1vw;
color: #0075ca;
}
.btn-modalogintranet{
position: absolute;
bottom: 15%;
height: 15%;
background: #a5ccda;
}
.btn-comercializ{
position: absolute;
top: 20%;
left: 10%;
width: 32%;
height: 60%;
background: rgba(11,151,210,0.7);
border: 1px solid #fff;
border-radius: 20px;
color: #fff;
font-family: "antipasto";
font-size: 0.9em;
letter-spacing: 1px;
cursor: pointer;
transition: 0.4s all ease;
}
.btn-factur{
position: absolute;
top: 20%;
right: 10%;
width: 32%;
height: 60%;
background: rgba(31,183,145,0.7);
border: 1px solid #fff;
border-radius: 20px;
color: #fff;
font-family: "antipasto";
font-size: 0.9em;
letter-spacing: 1px;
cursor: pointer;
transition: 0.4s all ease;
}
.btn-comercializ:hover{
box-shadow: 0 0 15px rgba(0,0,0,0.9);
background: rgba(11,151,210,0.9);
transform: scale(0.95);
}
.btn-factur:hover{
box-shadow: 0 0 15px rgba(0,0,0,0.9);
background: rgba(31,183,145,0.9);
transform: scale(0.95);
}
.logo-login{
position: absolute;
bottom: 1%;
right: 2%;
width: 180px;
}
.lnk-headfacebook img{
position: absolute;
width: 12px;
vertical-align: middle;
margin-left: 5px;
}
.lnk-headfacebook a:hover{
color: #ce8800;
transition: 0.2s;
}
.overlay {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 10;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.overlay img{
width: 70vh;
height: 90vh;
margin: auto;
transition: all 5s ease-in-out;
}
#cerrar-recibo{
position: fixed;
top:3.4%;
right: 5%;
width: 3%;
height: 2.5vw;
border: 2px solid #fff;
border-radius: 6px;
color: #fff;
font-size: 1.7vw;
font-weight: 600;
text-align: center;
background: #d88662;
cursor: pointer;;
text-decoration: none;
transition: all 200ms;
}
#cerrar-recibo:hover{
transition: 0.5s;
background: #35baec;
}
.content-principal{
margin: 5%;
}
.content-principal img{
object-fit: contain;
height: 100%;
vertical-align: middle;
align-items: center;
display: flex;
}
.modal-principal{
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
background: rgba(0,0,0,0.8);
z-index: 1000;
animation: modal-principal 1s 1s forwards;
visibility: hidden;
opacity: 0;
}
.modal-principal img{
width: 100%;
margin: auto;
}
#cerrar-principal{
display: none;
}
#cerrar-principal + label {
position: fixed;
top:3.4%;
right: 5%;
width: 3%;
height: 2.5vw;
border: 2px solid #fff;
border-radius: 6px;
color: #fff;
font-size: 1.2vw;
font-weight: 600;
text-align: center;
background: #d88662;
padding-top: 6px;
cursor: pointer;
animation: modal-principal 1s 1s forwards;
visibility: hidden;
opacity: 0;
transition: 0.5s;
z-index: 2000;
}
#cerrar-principal + label:hover{
transition: 0.5s;
background: #35baec;
}
#cerrar-principal:checked + label, #cerrar-principal:checked~.modal-principal{
display: none;
}
.lnk-popup1{
position: absolute;
left: 50%;
bottom: 15%;
width: 195px;
text-decoration: none;
text-align: center;
font-size: 0.9vw;
font-weight: 700;
letter-spacing: 1px;
background-color: #ffb83b;
}
@keyframes modal-principal {
100%{
visibility: visible;
opacity: 1;
}
}
.lnk-popup-main{
position: absolute;
bottom: 11.5vh;
right: 20vw;
width: 210px;
height: 40px;
background-color: #ff8824;
color: #fff;
text-align: center;
font-weight: 500;
text-decoration: none;
border-radius: 8px;
transition: 0.5s;
border: 1px solid #fff;
}
.lnk-popup-main span{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 11px;
letter-spacing: 1px;
font-size: 12pt;
}
.lnk-popup-main:hover{
transition: 0.5s;
bottom: 12vh;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
}
.actualidad{
position: absolute;
top: 30%;
left: 10%;
width:60%;
height: 55%;
color: #fff;
overflow: hidden;
}
.lst-actualidad{
position:absolute;
top:0;
left:0;
width: 100%;
}
.actualidad ul{
position: absolute;
top:35px;
left: 50px;
display: flex;
/* width:500%;
animation: transicion 10s infinite ease-out alternate;
transform: translateX(-100vw); */
}
@keyframes transicion{
0%{margin-left: 0;}
18%{margin-left: 0;}
23%{ margin-left: -100%;}
41%{margin-left: -100%;}
46%{ margin-left: -200%;}
64%{ margin-left: -200%;}
69%{margin-left: -300%;}
87%{margin-left: -300%;}
92%{margin-left: -400%;}
100%{margin-left: -400%;}
}
.actualidad li{
list-style: none;
width: 100%;
}
.actualidad img{
position: relative;
top: -10%;
}
.actualidad h2{
position: relative;
left: -2%;
top: -45px;
color:#fff;
font-family: "denmark";
font-size: 3.3vw;
width: 95%;
}
.actualidad p{
position: relative;
left: 3%;
top: -15%;
width: 85%;
font-size: 2vw;
color:#fff;
letter-spacing: 2px;
transition: 0.4s;
color: inherit;
display: inline-block;
}
.actualidad a{
position: absolute;
display:block;
text-align: center;
right: 15%;
top: 100%;
width: 22%;
height: 40px;
color: #fff;
background-color: rgba(40, 101, 168, 0.7);
border:1px solid #fff;
border-radius: 8px;
transition: 0.4s;
}
.actualidad a span{
position: absolute;
top: 10px;
right: 1%;
width: 98%;
letter-spacing: 1px;
}
.actualidad a:hover{
transform: scale(1.1);
color: #ce8800;
background-color: rgba(0, 0, 0, 0.9);
}
.num-actualidad{
position: absolute;
top: 90%;
left: 10%;
width: 50%;
height: 10%;
}
ul.lst-actualidad li:first-child {
opacity: 1; /*Mostramos el primer */
}
ul.lst-actualidad li:target {
opacity: 1; /*Mostramos el del enlace que pulsemos*/
}
.menu{
text-align: center;
}
.menu li{
display: inline;
text-align: center;
}
.l{
text-align: left;
position: absolute;
top: 40%;
background: url(../img/left.png);
width: 24px;
height: 56px;
cursor: pointer;
}
.r{
right: 0;
position: absolute;
top: 40%;
cursor: pointer;
width: 24px;
height: 56px;
background: url(../img/right.png);
}
.pagination li{
display: inline-block;
text-decoration: none;
background-color: rgb(128, 128, 128);
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
cursor: pointer;
}
.fnd-consultpublic{
position: absolute;
top: 23%;
right: 0;
width: 27%;
height: 13vh;
border-top: 1px solid #fff;
}
.tit-consult{
font-family: "banchif";
font-size: 1.2vw;
color: #fff;
}
.subtit-consult{
font-family: "opensans";
font-size: 0.8vw;
color: #fff;
}
.btn-consul2{
position: absolute;
bottom: 4%;
left: 0;
width: 50%;
height: 42%;
border: 1px solid #fff;
border-radius: 10px;
backdrop-filter: blur(3px);
background: rgba(255, 184, 59, 0.8);
text-align: center;
font-size: 0.85vw;
cursor: pointer;
transition: 0.5s;
}
.btn-consul2 a{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
margin: auto;
font-family: "opensans";
color:#000;
}
.btn-consul2:hover{
background: #ffb025;
bottom: 9%;
transition: 0.5s;
}
.btnhead01{
position: absolute;
top: 40vh;
right: 5%;
width: 17%;
height: 7vh;
border: 1px solid rgba(255,255,255,0.5);
backdrop-filter: blur(3px);
background: linear-gradient(100deg, rgba(0,0,0,0.4),rgba(0,0,0,0.2));
border-radius: 10px;
text-align: center;
transition: 0.7s;
cursor: pointer;
font-size: 0.8vw;
}
.btnhead01 a{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
margin: auto;
font-family: "arkitech";
color:#fff;
}
.btnhead01:hover{
background: rgba(255,180,7,0.8);
right: 8vw;
transition: 0.7s;
}
.btnhead02{
position: absolute;
top: 52vh;
right: 5%;
width: 17%;
height: 7vh;
border: 1px solid rgba(255,255,255,0.5);
backdrop-filter: blur(3px);
background: linear-gradient(100deg, rgba(0,0,0,0.4),rgba(0,0,0,0.2));
border-radius: 10px;
text-align: center;
transition: 0.7s;
cursor: pointer;
font-size: 0.8vw;
}
.btnhead02 a{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
margin: auto;
font-family: "arkitech";
color:#fff;
}
.btnhead02:hover{
background: rgba(0,102,51,0.8);
right: 8vw;
transition: 0.7s;
}
.btnhead03{
position: absolute;
top: 64vh;
right: 5%;
width: 17%;
height: 7vh;
border: 1px solid rgba(255,255,255,0.5);
backdrop-filter: blur(3px);
background: linear-gradient(100deg, rgba(0,0,0,0.4),rgba(0,0,0,0.2));
border-radius: 10px;
text-align: center;
transition: 0.7s;
cursor: pointer;
font-size: 0.8vw;
}
.btnhead03 a{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
margin: auto;
font-family: "arkitech";
color:#fff;
}
.btnhead03:hover{
background: rgba(28,92,136,0.8);
right: 8vw;
transition: 0.7s;
}
.btnhead04{
position: absolute;
top: 76vh;
right: 5%;
width: 17%;
height: 7vh;
border: 1px solid rgba(255,255,255,0.5);
backdrop-filter: blur(3px);
background: linear-gradient(100deg, rgba(0,0,0,0.4),rgba(0,0,0,0.2));
border-radius: 10px;
text-align: center;
transition: 0.7s;
cursor: pointer;
font-size: 0.8vw;
}
.btnhead04 a{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
margin: auto;
font-family: "arkitech";
color:#fff;
}
.btnhead04:hover{
background: rgba(63, 159, 147,0.8);
right: 8vw;
transition: 0.7s;
}
.btnhead05{
position: absolute;
top: 88vh;
right: 5%;
width: 17%;
height: 7vh;
border: 1px solid rgba(255,255,255,0.5);
backdrop-filter: blur(3px);
background: linear-gradient(100deg, rgba(0,0,0,0.4),rgba(0,0,0,0.2));
border-radius: 10px;
text-align: center;
transition: 0.7s;
cursor: pointer;
font-size: 0.8vw;
}
.btnhead05 a{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
margin: auto;
font-family: "arkitech";
color:#fff;
}
.btnhead05:hover{
background: rgba(180, 141, 55, 0.8);
right: 8vw;
transition: 0.7s;
}
main{
position: absolute;
top: 100vh;
left: 0;
width: 100vw;
height: 300vh;
}
.bord-socialicons{
position: fixed;
top:35vh;
left: -8px;
width: 52px;
height: 221px;
border-top: 1px solid rgba(255, 255, 255, 0.6);
border-right: 1px solid rgba(255, 255, 255, 0.6);
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
border-left: none;
border-radius: 8px;
z-index: var(--encima);
}
.social-icons{
position: absolute;
top: 0;
left: 0;
width: 51px;
height: 219px;
/* backdrop-filter: blur(7px); */
background-color: rgba(198, 240, 254, 0.9);
border-top: 2px solid #3794ce;
border-right: 2px solid #3794ce;
border-bottom: 2px solid #3794ce;
border-left: none;
border-radius: 8px;
}
.mnus-socialicons{
position: absolute;
left: 40px;
top: 0;
width: 0;
height: 53px;
overflow: hidden;
transition: linear 0.6s;
}
.social-telemergencias{
position: absolute;
top: 0;
left: 3px;
width: 46px;
height: 53px;
border-bottom: 1px solid #99d3f8;
transition: 0.2s linear 0.6s;
}
.social-telemergencias p{
position: absolute;
top: -1px;
left: 5px;
width: 100px;
color: #fff;
text-align: right;
font-size: 9pt;
letter-spacing: 1px;
}
.social-telemergencias nav{
position: absolute;
top: 11px;
left: 34.4px;
height: 28px;
background-image: url(../img/flag-overshort.png);
border:none;
}
.social-telemergencias{
background-image: url(../img/ico-social-telfemerg01.png);
}
.social-telemergencias:hover{
background-image: url(../img/ico-social-telfemerg02.png);
transition: 0.4s ease-in;
}
.social-telemergencias:hover .mnus-socialicons{transition: 0.6s ease-out 0.4s; width: 111px;}
.social-watsap{
position: absolute;
top: 54px;
left: 3px;
width: 46px;
height: 53px;
border-bottom: 1px solid #99d3f8;
transition: 0.2s linear 0.6s;
}
.social-watsap p{
position: absolute;
top: -1px;
left: 5px;
width: 100px;
color: #fff;
text-align: right;
font-size: 9pt;
letter-spacing: 1px;
}
.social-watsap nav{
position: absolute;
top: 13px;
left: 34.4px;
height: 28px;
background-image: url(../img/flag-overshort.png);
border:none;
}
.social-watsap{
background-image: url(../img/ico-social-whastapp01.png);
}
.social-watsap:hover{
background-image: url(../img/ico-social-whastapp02.png);
transition: 0.4s ease-in;
}
.social-watsap:hover .mnus-socialicons{transition: 0.6s ease-out 0.4s; width: 111px;}
.social-correoinst{
position: absolute;
top: 108px;
left: 3px;
width: 46px;
height: 53px;
border-bottom: 1px solid #99d3f8;
transition: 0.2s linear 0.6s;
}
.social-correoinst p{
position: absolute;
top: -1px;
left: 9px;
width: 140px;
color: #fff;
text-align: right;
font-size: 9pt;
letter-spacing: 1px;
}
.social-correoinst nav{
position: absolute;
top: 12.5px;
left: 36px;
height: 28px;
background-image: url(../img/flag-overlong.png);
border:none;
}
.social-correoinst{
background-image: url(../img/ico-social-correo01.png);
}
.social-correoinst:hover{
background-image: url(../img/ico-social-correo02.png);
transition: 0.4s ease-in;
}
.social-correoinst:hover .mnus-socialicons{transition: 0.6s ease-out 0.4s; width: 156px;}
.social-facebook{
position: absolute;
top: 162px;
left: 3px;
width: 46px;
height: 53px;
transition: 0.2s linear 0.6s;
}
.social-facebook p{
position: absolute;
top: -1px;
left: 9px;
width: 140px;
color: #fff;
text-align: right;
font-size: 9pt;
letter-spacing: 1px;
}
.social-facebook .lnk-socialfacebk{
color: #fff;
letter-spacing: 1px;
}
.social-facebook nav{
position: absolute;
top: 12.5px;
left: 34px;
height: 28px;
background-image: url(../img/flag-overlong.png);
border:none;
}
.social-facebook{
background-image: url(../img/ico-social-facebook01.png);
}
.social-facebook:hover{
background-image: url(../img/ico-social-facebook02.png);
transition: 0.5s ease-in;
}
.social-facebook:hover .mnus-socialicons{transition: 0.6s ease-out 0.4s; width: 156px;}
.sec-servclientes{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.solo-cel{
visibility: hidden;
}
.img-fndclientes{
position: absolute;
top:0;
left: -6%;
width: 106vw;
height: 100vh;
background-size: cover;
background-position: center;
background-image: url(../img/fnd-client01.jpg);
}
.fade-imgclientes{
position: absolute;
top:0;
left: -6%;
background-color: rgba(255,255,255,0.7);
width: 100vw;
height: 100vh;
}
.tit-clientes{
position: absolute;
top: 20px;
left: 2%;
width: 96%;
text-align: center;
font-family: "denmark";
color: #29628a;
font-size: 4vw;
z-index: 1;
}
.form-verificarecla{
position: absolute;
top: 0vh;
right: 19vw;
width: 30%;
height: 3vh;
background: rgba(255,255,255,0.7);
border-left: 1px solid #3e4757;
border-right: 1px solid #3e4757;
border-bottom: 1px solid #3e4757;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
cursor: pointer;
transition: all 0.5s linear;
z-index: 1;
}
.form-verificarecla:hover{
height: 12vh;
transition: all 0.5s linear;
}
.form-vereclasec{
visibility: hidden;
opacity: 0;
position: absolute;
top: -10vh;
}
.form-verificarecla:hover > form{
visibility: visible;
opacity: 1;
top:7%;
transition: all 0.5s linear;
}
.form-verificarecla:hover > p{
opacity: 0;
transition: 1s;
}
.lbl-nunreclamosec{
position: relative;
top: 0;
left: 5%;
width: 40%;
font-size: 1.2vw;
}
#txt-numreclamosec{
position: absolute;
top: 130%;
left: 15%;
width: 45%;
height: 150%;
outline: 1px solid #3e4757;
background: rgba(255,255,255,0.5);
text-align: center;
}
#btn-reclamosec{
position: absolute;
top: 130%;
right: 5%;
width: 30%;
height: 150%;
background-color: #3e4757;
color: #ffe571;
box-shadow: 0 0 15px rgba(0,0,0,0.8);
border: 1px solid #fff;
border-radius: 6px;
font-size: 0.9vw;
cursor: pointer;
transition: all 0.5s ease;
}
#btn-reclamosec:hover{
background-color: #007ebb;
color: #fff;
box-shadow: 0 0 20px rgba(0,0,0,1);
border: 1px solid #fff;
transition: all 0.5s ease;
}
.tit-consultreclasec{
position: absolute;
bottom: 1%;
right: 5%;
width: 95%;
text-align: right;
letter-spacing: 1px;
opacity: 1;
font-size: 1.2vw;
transition: 1s;
}
.art-reclamos{
position: relative;
top:0;
left: 5%;
width: 90%;
height: 60%;
}
.fnd-reclamos{
position: relative;
top:8vw;
left: 14vw;
background: url(../img/fnd-reclamos.png);
width: 41vw;
height: 18vw;
background-position: center;
background-size: cover;
}
.tit-reclams{
position: absolute;
width: 230px;
height: 95px;
top:30px;
left: 30px;
font-family: "denmark";
color: #fff;
font-size: 2.8vw;
text-shadow: -2px 0 2px #5ec4f4, 2px 0 2px #5ec4f4, 0 2px 2px #5ec4f4, 0 -2px 2px #5ec4f4;
}
.recla-vma{
display: block;
position: absolute;
top: 8vh;
left: 17vw;
width: 6vw;
height: 6vw;
background: rgba(255,255,255, 0.3);
border-radius: 10px;
box-shadow: -1px 0 7px #85cbf3, 1px 0 7px #85cbf3, 0 1px 7px #85cbf3, 0 -1px 7px #85cbf3;
cursor: default;
}
.recla-vma img{
display: block;
position: relative;
width: 60%;
margin: auto;
top: 20px;
}
.recla-pagos{
display: block;
position: absolute;
top: 8vh;
left: 25.3vw;
width: 6vw;
height: 6vw;
background: radial-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.3));
border-radius: 10px;
box-shadow: -2px 0 10px #79b2ff, 2px 0 10px #79b2ff, 0 2px 10px #79b2ff, 0 -2px 10px #79b2ff;
cursor: default;
}
.recla-pagos img{
display: block;
position: relative;
width: 60%;
margin: auto;
top: 20px;
}
.recla-ope{
display: block;
position: absolute;
top: 8vh;
right: 1.5vw;
width: 6vw;
height: 6vw;
background: rgba(255,255,255, 0.3);
border-radius: 10px;
box-shadow: -1px 0 7px #85cbf3, 1px 0 7px #85cbf3, 0 1px 7px #85cbf3, 0 -1px 7px #85cbf3;
cursor: default;
}
.recla-ope img{
display: block;
position: relative;
width: 60%;
margin: auto;
top: 20px;
}
.no-bots01{
position: absolute;
top:7vh;
left: 16vw;
width: 390px;
height: 110px;
background: rgba(255,255,255,0);
}
.mano{
position: absolute;
display: block;
text-align: center;
left: 27vw;
bottom: 6%;
width: 12vw;
height: 2.5vw;
background-color: rgba(255, 123, 17, 0.7);
border: 1px solid #fff;
color: #fff;
border-radius: 8px;
transition: 0.4s;
}
.mano span{
position: absolute;
top: 10px;
right: 1%;
width: 98%;
letter-spacing: 1.5px;
}
.mano:hover{
bottom: 8%;
box-shadow: 0 5px 10px #2b2b2b;
}
.lst-telefonos{
position: absolute;
top:75%;
left: 3%;
font-family: "denmark";
font-size: 0.8vw;
letter-spacing: 1px;
color: #fff;
}
.lst-telefonos span{
font-family: asesina;
font-size: 0.9vw;
letter-spacing: 1px;
font-weight: 800;
}
.down-format1{
position: absolute;
top:28vw;
left: 14vw;
width: auto;
font-size: 1vw;
letter-spacing: 1px;
font-weight: 800;
color: #ce8800;
transition: all 0.5s ease;
}
.down-format1:hover{
left: 16vw;
color: #007ebb;
}
.tipo-recla{
position: absolute;
top:7vw;
right: 13vw;
height: auto;
width: 19vw;
font-family: "arkitech";
font-size: 0.95vw;
color: #355b70;
font-weight: 800;
text-align: center;
}
.btn-reclapagos{
display: block;
position: absolute;
top:11vw;
right: 14vw;
width: 18vw;
height: 3vw;
font-family: "antipasto";
font-size: 0.94vw;
letter-spacing: 1px;
color: #fff;
text-align: center;
background: #007ebb;
border: 1px solid #007ebb;
border-radius: 10px;
box-shadow: 0 0 10px #3e4757;
transition: all 0.5s ease;
}
.btn-reclapagos span{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.btn-reclapagos:hover{
transform: scale(1.1);
background: #3e4757;
color: #ffc148;
border: 1px solid #fff;
box-shadow: 0 0 25px #3e4757;
transition: all 0.5s ease;
}
.ico-reclapagos{
background: url(../img/ico-btnconsu.png) no-repeat;
background-size: contain;
width: 10%;
height: 40%;
margin-top: 4.5%;
margin-left: 5%;
}
.btn-reclaope{
display: block;
position: absolute;
top:15.5vw;
right: 14vw;
width: 18vw;
height: 3vw;
font-family: "antipasto";
font-size: 0.94vw;
letter-spacing: 1px;
color: #fff;
text-align: center;
background: #007ebb;
border: 1px solid #007ebb;
border-radius: 10px;
box-shadow: 0 0 10px #3e4757;
transition: all 0.5s ease;
}
.btn-reclaope span{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.btn-reclaope:hover{
transform: scale(1.1);
background: #3e4757;
color: #ffc148;
border: 1px solid #fff;
box-shadow: 0 0 25px #3e4757;
transition: all 0.5s ease;
}
.ico-reclaope{
background: url(../img/ico-btnope.png) no-repeat;
background-size: contain;
width: 12%;
height: 40%;
margin-top: 6%;
margin-left: 4.5%;
}
.btn-reclaope2{
display: block;
position: absolute;
top:20vw;
right: 14vw;
width: 18vw;
height: 3vw;
font-family: "antipasto";
font-size: 0.94vw;
letter-spacing: 1px;
color: #fff;
text-align: center;
background: #007ebb;
border: 1px solid #007ebb;
border-radius: 10px;
box-shadow: 0 0 10px #3e4757;
transition: all 0.5s ease;
}
.btn-reclaope2 span{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.btn-reclaope2:hover{
transform: scale(1.1);
background: #3e4757;
color: #ffc148;
border: 1px solid #fff;
box-shadow: 0 0 25px #3e4757;
transition: all 0.5s ease;
}
.ico-reclaope2{
background: url(../img/ico-reclanofactu.png) no-repeat;
background-size: contain;
width: 12%;
height: 40%;
margin-top: 5%;
margin-left: 4%;
}
.btn-reclavma{
display: block;
position: absolute;
top:24.5vw;
right: 14vw;
width: 18vw;
height: 3vw;
font-family: "antipasto";
font-size: 0.94vw;
letter-spacing: 1px;
color: #fff;
text-align: center;
background: #007ebb;
border: 1px solid #007ebb;
border-radius: 10px;
box-shadow: 0 0 10px #3e4757;
transition: all 0.5s ease;
}
.btn-reclavma span{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.btn-reclavma:hover{
transform: scale(1.1);
background: #3e4757;
color: #ffc148;
border: 1px solid #fff;
box-shadow: 0 0 25px #3e4757;
transition: all 0.5s ease;
}
.ico-reclavma{
background: url(../img/ico-btnvma.png) no-repeat;
background-size: contain;
width: 10%;
height: 40%;
margin-top: 6%;
margin-left: 4%;
}
.cards-informacion{
position: relative;
top:30px;
left: 0;
width: 100%;
height: 66%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.glass-cards{
position: absolute;
top: 0;
width: 16vw;
height: 28vh;
overflow: hidden;
backdrop-filter: blur(7px);
border-radius: 8px;
background: linear-gradient(100deg, rgba(0,0,0,0.1),rgba(0,0,0,0.4));
box-shadow: 0 10px 26px 0 rgba(0,0,0,0.8);
border-left: 1px solid rgba(255, 255, 255, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-right: 1px solid rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}
.tit-cards{
position: absolute;
top: 18%;
left: 6%;
font-family: "denmark";
font-size: 1.5vw;
color: #007ebb;
}
.descrip-cards{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
padding: 10px;
color: #ffae44;
font-family: "antipasto";
font-size: 1vw;
letter-spacing: 1px;
text-align: right;
background-color: rgba(0,4,5,.6);
}
.pie-cards{
position: absolute;
left: 0;
bottom: 0;
width: 200%;
height: 32%;
padding: 10px;
transition: linear 0.5s;
}
.pie-cards:hover{
left: -100%;
transition: linear 0.5s;
}
.lnk-cards{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color: #007ebb;
}
.lnk-cards a{
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
padding: 0.5vw;
background-color: #007ebb;
border: 1px solid #fff;
border-radius: 8px;
font-family: "antipasto";
font-size: 1.2vw;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
color: #fff;
transition: all 0.5s;
}
.lnk-cards a:hover{
background-color: rgba(0,4,5,.6);
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.6);
color: #ffae44;
transition: all 0.5s;
}
.card-catt{
left: 10vw;
}
.ico-cardcatt{
position: absolute;
top: 12%;
right: 10%;
width: 18%;
}
.card-vma{
left: 31.5vw;
}
.ico-cardvma{
position: absolute;
top: 15%;
right: 10%;
width: 24%;
}
.card-requisitos{
right: 31.5vw;
}
.ico-cardrequisitos{
position: absolute;
top: 12%;
right: 10%;
width: 18%;
}
.card-mesapartes{
right: 10vw;
}
.ico-cardmesapartes{
position: absolute;
top: 12%;
right: 10%;
width: 18%;
}
.separadorcom{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))
}
.empresaimportant{
position: relative;
top:0;
left: 0;
width: 100%;
height: 98vh;
background: #fff;
}
.importante{
position: absolute;
top: 2.5vh;
left: 0;
width: 100%;
height: 95.5vh;
}
/*imagen de fondo de la sección Importante*/
.fnd-importante{
position: absolute;
top: 0;
left: 0;
width: 80%;
}
.tit-importante {position: absolute; top: 2%; left: 2%; font-family: "denmark";
font-size: 3.7vw; color:#007ebb; }
#tabs-mnu{position:absolute; left:0; top:0; width:100%; height: 100%;}
/* con esto se ocultan los botoncitos y solo se verán sus etiquetas*/
#tabs-mnu input{visibility:hidden;}
/* con esto las etiquetas de los input se ponen flotantes y se las separa una de otra, y se les pone el puntero en forma de señalador*/
#tabs-mnu label {
cursor:pointer;
display:block;
color:#404040;
text-align: right;
font-family: "denmark";
font-size: 1.5vw;
color: #fff;
background: url(../img/lnk-imp01.png)no-repeat;
z-index: var(--encima);
transition: all ease-out 0.5s;
}
/*Se posicionan las tabs y se les asigna su fondo*/
.tab-lblintgral01{
position:absolute;
top: 0;
right: 0;
height:21%;
width: 41%;
}
.tab-lblintgral01 span{
position: absolute;
right: 28%;
width: 64%;
top: 31%;
}
.tab-lblintgral01 img{
position: absolute;
top: 11%;
right: 3%;
width: 20%;
}
.tab-lblintgral02{
position:absolute;
top: 24%;
right: 0;
height:21%;
width: 35%;
}
.tab-lblintgral02 span{
position: absolute;
right: 30%;
width: 61%;
top: 28%;
}
.tab-lblintgral02 img{
position: absolute;
top: 11%;
right: 4%;
width: 22%;
}
.tab-lblintgral03{
position:absolute;
top: 48%;
right: 0;
height:21%;
width: 29%;
}
.tab-lblintgral03 span{
position: absolute;
right: 28%;
width: 60%;
top: 25%;
}
.tab-lblintgral03 img{
position: absolute;
top: 14%;
right: 4%;
width: 22%;
}
.tab-lblintgral04{
position:absolute;
top: 72%;
right: 0;
height:21%;
width: 23%;
}
.tab-lblintgral04 span{
position: absolute;
right: 35%;
width: 60%;
top: 25%;
}
.tab-lblintgral04 img{
position: absolute;
top: 16%;
right: 6%;
width: 27%;
}
/* se da formato para que la etiqueta cambie de color y el icono de fondo al pasar el puntero por encima*/
/* Se utiliza " filter:drop-shadow(0px 0px 5px #color), " para dar sombra al objeto, la diferencia con box-shadow, es que filter:drop-shadow
toma en cuenta las transparencias del objeto, adaptándose a la forma de este */
#tabs-mnu input:hover + .tab-lblintgral01{color:#fff; width: 46%; background: url(../img/lnk-imp02.png)no-repeat; transition: all ease-out 0.5s; filter: drop-shadow(0 2px 5px #616161);}
#tabs-mnu input:hover + .tab-lblintgral02{color:#fff; width: 40%; background: url(../img/lnk-imp03.png) no-repeat; transition: all ease-out 0.5s; filter: drop-shadow(0 2px 5px #616161);}
#tabs-mnu input:hover + .tab-lblintgral03{color:#fff; width: 34%; background: url(../img/lnk-imp04.png) no-repeat; transition: all ease-out 0.5s; filter: drop-shadow(0 2px 5px #616161);}
#tabs-mnu input:hover + .tab-lblintgral04{color:#fff; width: 28%; background: url(../img/lnk-imp05.png) no-repeat; transition: all ease-out 0.5s; filter: drop-shadow(0 2px 5px #616161);}
/* formato de las opciones cuando están activas*/
#tabs-mnu input:checked + .tab-lblintgral01{color:#007ebb; font-weight: bold; width: 46%; background: url(../img/lnk-imp02.png)no-repeat; filter: drop-shadow(0 5px 10px #333);}
#tabs-mnu input:checked + .tab-lblintgral02{color:#007ebb; font-weight: bold; width: 40%; background: url(../img/lnk-imp03.png)no-repeat; filter: drop-shadow(0 5px 10px #333);}
#tabs-mnu input:checked + .tab-lblintgral03{color:#007ebb; font-weight: bold; width: 34%; background: url(../img/lnk-imp04.png)no-repeat; filter: drop-shadow(0 5px 10px #333);}
#tabs-mnu input:checked + .tab-lblintgral04{color:#007ebb; font-weight: bold; width: 28%; background: url(../img/lnk-imp05.png)no-repeat; filter: drop-shadow(0 5px 10px #333);}
/*formato y ubicación de los contenidos*/
.content-tabs {
position:absolute;
top:15%;
left: 5%;
width:50%;
height:80%;
}
.content-tabs div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
transition: all linear 0.2s;
pointer-events: none;
}
/*hacer visible el contenido seleccionado, ojo todo esto es una sola línea*/
#tabs-mnu input.tab-sintgral01:checked ~ .content-tabs .content-intgral01,
#tabs-mnu input.tab-sintgral02:checked ~ .content-tabs .content-intgral02,
#tabs-mnu input.tab-sintgral03:checked ~ .content-tabs .content-intgral03,
#tabs-mnu input.tab-sintgral04:checked ~ .content-tabs .content-intgral04 {opacity:1; transition:all ease-out 0.2s 0.2s; pointer-events: all;}
/* formato del visor de contenidos de los TABS */
.inf-important {position:absolute; left: 0; top:0; width: 100%; height: 100%; border: none;}
.sec-edsanit{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 50vh;
background: #5ac9ff;
}
.fnd-edsanit{
position: absolute;
top: 0;
left: 0;
width: 90.5vh;
}
.tit-edsanit{
position: relative;
top: -1.7vw;
left: 0;
width: 100%;
text-align: right;
padding-right: 3%;
font-family: "denmark";
font-size: 5.7vw;
color: #fff;
}
.fnd-edvisitas{
position: absolute;
top: 30%;
left: 38%;
width: 10%;
height: 50%;
cursor: pointer;
transition: 0.8s;
}
.img-icoedvisitas{
position: relative;
top: 10%;
left:18%;
width: 6.5vw;
height: 7vw;
background-position: center;
background-size: cover;
background-image: url(../img/ico-edvisitas01.png);
background-repeat: no-repeat;
transition: 0.8s;
}
.lnk-edvisitas{
position: absolute;
left: 0;
bottom: 17%;
width: 100%;
text-align: center;
font-size: 1.2vw;
color: #fff;
transition: 0.8s;
}
.fnd-edvisitas:hover{
border-radius: 10px;
background: #edfafd;
box-shadow: 0 0 40px #4f4f4f;
transition: 0.8s;
}
.fnd-edvisitas:hover .lnk-edvisitas{
color: #007ebb;
text-decoration: underline;
transition: 0.8s;
}
.fnd-edvisitas:hover .img-icoedvisitas{
background-image: url(../img/ico-edvisitas02.png);
}
.fnd-edusaplan{
position: absolute;
top: 30%;
left: 50%;
width: 10%;
height: 50%;
cursor: pointer;
transition: 0.8s;
}
.img-icoedusaplan{
position: relative;
top: 10%;
left:18%;
width: 6.5vw;
height: 7vw;
background-position: center;
background-size: cover;
background-image: url(../img/ico-edusaplan01.png);
background-repeat: no-repeat;
transition: 0.8s;
}
.lnk-edusaplan{
position: absolute;
left: 0;
bottom: 8%;
width: 100%;
text-align: center;
font-size: 1.2vw;
color: #fff;
transition: 0.8s;
}
.fnd-edusaplan:hover{
border-radius: 10px;
background: #edfafd;
box-shadow: 0 0 40px #4f4f4f;
transition: 0.8s;
}
.fnd-edusaplan:hover .lnk-edusaplan{
color: #007ebb;
text-decoration: underline;
transition: 0.8s;
}
.fnd-edusaplan:hover .img-icoedusaplan{
background-image: url(../img/ico-edusaplan02.png);
}
.fnd-edusaactivs{
position: absolute;
top: 30%;
left: 62%;
width: 10%;
height: 50%;
cursor: pointer;
transition: 0.8s;
}
.img-icoedusaactiv{
position: relative;
top: 10%;
left:18%;
width: 6.5vw;
height: 7vw;
background-position: center;
background-size: cover;
background-image: url(../img/ico-edusaactiv01.png);
background-repeat: no-repeat;
transition: 0.8s;
}
.lnk-edusaactiv{
position: absolute;
left: 0;
bottom: 17%;
width: 100%;
text-align: center;
font-size: 1.2vw;
color: #fff;
transition: 0.8s;
}
.fnd-edusaactivs:hover{
border-radius: 10px;
background: #edfafd;
box-shadow: 0 0 40px #4f4f4f;
transition: 0.8s;
}
.fnd-edusaactivs:hover .lnk-edusaactiv{
color: #007ebb;
text-decoration: underline;
transition: 0.8s;
}
.fnd-edusaactivs:hover .img-icoedusaactiv{
background-image: url(../img/ico-edusaactiv02.png);
}
.fnd-edusaconsej{
position: absolute;
top: 30%;
left: 74%;
width: 10%;
height: 50%;
cursor: pointer;
transition: 0.8s;
}
.img-icoedusaconsej{
position: relative;
top: 10%;
left:18%;
width: 6.5vw;
height: 7vw;
background-position: center;
background-size: cover;
background-image: url(../img/ico-edusaconsej01.png);
background-repeat: no-repeat;
transition: 0.8s;
}
.lnk-edusaconsej{
position: absolute;
left: 0;
bottom: 17%;
width: 100%;
text-align: center;
font-size: 1.2vw;
color: #fff;
transition: 0.8s;
}
.fnd-edusaconsej:hover{
border-radius: 10px;
background: #edfafd;
box-shadow: 0 0 40px #4f4f4f;
transition: 0.8s;
}
.fnd-edusaconsej:hover .lnk-edusaconsej{
color: #007ebb;
text-decoration: underline;
transition: 0.8s;
}
.fnd-edusaconsej:hover .img-icoedusaconsej{
background-image: url(../img/ico-edusaconsej02.png);
}
.fnd-edusavideos{
position: absolute;
top: 30%;
left: 86%;
width: 10%;
height: 50%;
cursor: pointer;
transition: 0.8s;
}
.img-icoedusavids{
position: relative;
top: 10%;
left:18%;
width: 6.5vw;
height: 7vw;
background-position: center;
background-size: cover;
background-image: url(../img/ico-edusavids01.png);
background-repeat: no-repeat;
transition: 0.8s;
}
.lnk-edusavids{
position: absolute;
left: 0;
bottom: 17%;
width: 100%;
text-align: center;
font-size: 1.2vw;
color: #fff;
transition: 0.8s;
}
.fnd-edusavideos:hover{
border-radius: 10px;
background: #edfafd;
box-shadow: 0 0 40px #4f4f4f;
transition: 0.8s;
}
.fnd-edusavideos:hover .lnk-edusavids{
color: #007ebb;
text-decoration: underline;
transition: 0.8s;
}
.fnd-edusavideos:hover .img-icoedusavids{
background-image: url(../img/ico-edusavids02.png);
}
.modal-frmvidedsanit{
position: absolute;
width: 100vw;
height: 78vh;
top: 0;
left: 0;
display: flex;
visibility: hidden;
opacity: 0;
transition: all 0.6s linear;
}
.frame-vidsedsanit{
width: 100%;
height: 100%;
position: relative;
display: flex;
visibility: hidden;
}
.modal-frmvidedsanit:target {
top:0;
background: rgba(0,0,0,0);
visibility: visible;
opacity: 1;
z-index: 10;
}
.modal-frmvidedsanit:target .frame-vidsedsanit{
top: 30px;
left: 0;
width: 100%;
visibility: visible;
border: 1px solid #fff;
transition: all 1s linear;
}
.btn-closefndvideoedsanit{
display: block;
position: absolute;
top:3.4%;
right: 5%;
width: 3%;
height: 2.5vw;
border-radius: 6px;
border: 2px solid #fff;
background: #d88662;
box-shadow: 0 0 15px rgba(0,0,0,1);
color: #fff;
text-align: center;
letter-spacing: 1px;
font-size: 1.2vw;
font-weight: 600;
transition: all 0.3s linear;
z-index: 2;
}
.btn-closefndvideoedsanit span{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.btn-closefndvideoedsanit:hover{
background: #ffb524;
box-shadow: 0 0 30px rgba(0,0,0,0.9);
transform: scale(1.05);
transition: all 0.3s linear;
}
.sec-ecosis{
position: relative;
top: 2.5vh;
left: 0;
width: 100%;
height: 61vh;
background: #5bce58;
}
.fnd-ambiente{
position: absolute;
top: 0;
right: 0;
width: 95vh;
}
.tit-ambiente{
position: absolute;
top: 2.5%;
left: 2%;
width: 95%;
font-family: "denmark";
font-size: 3.5vw;
color:#fff;
}
.subtit-parr-ambiente{
position: relative;
top: 18%;
left: 3%;
font-size: 1.8vw;
font-weight: 800;
letter-spacing: 1px;
color: #1f6f00;
}
.parrafo{
position: absolute;
text-align: justify;
top: 28%;
left: 7%;
width: 80vw;
height: 70%;
overflow: auto;
}
.parr-ambiente1{
position: absolute;
top: 0;
left: 0;
width: 35%;
font-size: 1vw;
color: #fff;
letter-spacing: 1px;
}
.parr-ambiente2{
position: absolute;
top: 0;
left: 40%;
width: 35%;
font-size: 1vw;
color: #fff;
letter-spacing: 1px;
}
.sec-infadicional{
position: relative;
top: 2.5vh;
left: 0;
width: 100%;
height: 50vh;
background: #1971a3;
}
.tit-noticias{
position: absolute;
top: 4%;
left: 5%;
width: 27.6%;
font-family: "denmark";
font-size: 1.3vw;
color: #fff;
z-index: 1;
}
.paginafacebook{
position: absolute;
top:15%;
left: 5%;
width: 27.6%;
height: 80%;
}
.fb-page{
position: absolute;
display: flexbox;
background-size:contain;
top:0;
left: 0;
width: 100%;
}
.tit-mapa{
position: absolute;
top: 4%;
left: 37.6%;
width: 27.6%;
font-family: "denmark";
font-size: 1.3vw;
color: #fff;
z-index: 1;
}
.tit-adicionales{
position: absolute;
top: 5%;
right: 5%;
width: 33%;
font-family: "denmark";
font-size: 1.8vw;
color: #fff;
text-align: center;
z-index: 1;
}
.otros-links{
position: absolute;
top: 15%;
left: 37.6%;
width: 27.6%;
height: 80%;
}
.mapa-qhapaq{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tit-planes{
position: absolute;
top: 4%;
left: 70.2%;
width: 27.6%;
font-family: "denmark";
font-size: 1.5vw;
text-align: left;
color: #fff;
z-index: 1
}
.planes-cont{
position: absolute;
top: 15%;
left: 70.2%;
width: 27.6%;
height: 50%;
overflow-y: auto;
transition: all 0.6s ease;
}
.planes-cont p{
padding:0 10px 0 10px;
font-weight: bold;
color: #0099ff;
}
.planes-cont ul{
padding-left: 26px;
letter-spacing: 1px;
list-style-image: url(../img/icon-descargar01.png)
}
.planes-cont li{
padding-bottom: 8px;
font-size: 2vh;
padding-right: 2%;
}
.planes-cont a{
font-family: "antipasto";
color: #fff;
transition: all 0.6s ease;
}
.planes-cont a:hover{
color: #ffac05;
padding-right: 5%;
transition: all 0.6s ease;
}
.planes-cont ul li a{
text-decoration: none;
color:#fff;
}
.planes-cont ul li a:hover{
color:#e56c00;
}
.modal-frmvideosinst{
position: absolute;
width: 100vw;
height: 78vh;
top: 0;
left: 0;
display: flex;
visibility: hidden;
opacity: 0;
transition: all 0.5s linear;
}
.fnd-modalfrmvideosinst{
width: 100%;
height: 100%;
position: relative;
display: flex;
visibility: hidden;
}
.modal-frmvideosinst:target {
top:0;
background: rgba(0,0,0,0);
visibility: visible;
opacity: 1;
z-index: 1;
}
.modal-frmvideosinst:target .fnd-modalfrmvideosinst{
top: 30px;
left: 0;
width: 100%;
visibility: visible;
background: rgba(0,0,0,0.9);
border: 1px solid #fff;
transition: all 1s linear;
}
.btn-closefndvideo{
display: block;
position: absolute;
top:-5%;
left: 40%;
width: 20%;
height: 2.5vw;
border-radius: 6px;
border: 2px solid #fff;
background: #bf4f4f;
color: #fff;
text-align: center;
letter-spacing: 1px;
font-size: 1.2vw;
font-weight: 600;
transition: all 0.3s linear;
z-index: 2;
}
.btn-closefndvideo span{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.btn-closefndvideo:hover{
background: #b52a2a;
box-shadow: 3px 3px 10px rgba(0,0,0,0.9);
transform: scale(1.05);
transition: all 0.3s linear;
}
.tit-fndfrmvideosinst{
position: absolute;
top: 1%;
left: 0;
font-family: "denmark";
font-size: 2vw;
color: #fff;
text-align: center;
}
.btn-vervideosinst{
position: absolute;
width: 20%;
height: 7%;
cursor: pointer;
background: #3e4757;
border: 1px solid #fff;
border-radius: 6px;
font-family: "arkitech";
color: #ffc148;
font-size: 0.6vw;
letter-spacing: 1px;
text-align: center;
transition: all 0.5s ease;
}
.btn-videosinst{
display: none;
}
.btn-videosinst:checked + label{
transform: scale(1.07);
border: 1px solid #fff;
background: #15769a;
color: #fff;
}
.btn-videosinst + label:hover{
background: #ade6a2;
color: #007ebb;
border: 1px solid #fff;
transform: scale(0.95);
transition: all 0.5s ease;
}
.cont-vidsinst{
position: absolute;
top:15%;
left: -64vw;
width: 50vw;
background: #000;
border-right: 15px solid #384248;
transition:all 0.4s linear;
z-index: 10;
}
.btn-vid01 + label{
top: 10%;
right: 5%;
}
.btn-vid01 + label span{
position: absolute;
left: 0;
top: 30%;
}
.btn-vid01:checked ~ #video-01{
left: 0;
transition:all 0.4s linear;
}
.btn-vid02 + label{
top: 20%;
right: 5%;
}
.btn-vid02 + label span{
position: absolute;
left: 0;
top: 12%;
}
.btn-vid02:checked ~ #video-02{
left: 0;
transition:all 0.4s linear;
}
.btn-vid03 + label{
top: 30%;
right: 5%;
}
.btn-vid03 + label span{
position: absolute;
left: 0;
top: 12%;
}
.btn-vid03:checked ~ #video-03{
left: 0;
transition:all 0.4s linear;
}
.lnk-otroslnk02{
display: block;
position: absolute;
left: 36.6%;
top: 0;
width: 26.6%;
height: 13vh;
background: rgba(0,0,0,0);
border: 1px solid #fff;
border-radius: 8px;
transition: all 0.6s ease;
}
.lnk-otroslnk02:hover{
top:5%;
background: #355b70;
box-shadow: 0 10px 20px #1b2b49;
transition: all 0.6s ease;
}
.lnk-otroslnk02 img{
position: absolute;
top: 10%;
width: 36%;
left: 32%
}
.lnk-otroslnk03{
display: block;
position: absolute;
right: 5%;
top: 0;
width: 26.6%;
height: 13vh;
background: rgba(0,0,0,0);
border: 1px solid #fff;
border-radius: 8px;
transition: all 0.6s ease;
}
.lnk-otroslnk03:hover{
top:5%;
background: #355b70;
box-shadow: 0 10px 20px #1b2b49;
transition: all 0.6s ease;
}
.lnk-otroslnk03 img{
position: absolute;
top: 10%;
width: 36%;
left: 36%
}
.mesadepartes{
display: block;
position: absolute;
right: 5%;
top: 16.5vh;
width: 90%;
height: 5.7vh;
text-align: center;
font-family: "denmark";
font-size: 1.2vw;
color: #fff;
background: #355b70;
border: 1px solid #fff;
border-radius: 8px;
transition: all 0.6s ease;
padding-top: 1.5%;
}
.mesadepartes:hover{
background: #1971a3;
transform: scale(0.95);
transition: all 0.6s ease;
box-shadow: 0 0 20px #1b2b49;
}
.lnk-externos{
position: absolute;
top: 68%;
right: 1%;
width: 33%;
height: 32%;
border-top: 1px solid #fff;
}
.lnk-pagexternas:hover{
transform: scale(0.9);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 80px;
}
.lnk-sunass{
position: absolute;
top: 15%;
left: 5%;
width: 5.8vw;
height: 2.4vw;
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.4);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.lnk-otass{
position: absolute;
top: 15%;
left: 9vw;
width: 9.5vw;
height: 2.4vw;
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.4);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.lnk-minviv{
position: absolute;
top: 15%;
right: 5%;
width: 11.5vw;
height: 2.4vw;
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.4);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.lnk-osce{
position: absolute;
top: 58%;
left: 5%;
width: 5.8vw;
height: 2.4vw;
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.4);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.lnk-infobras{
position: absolute;
top: 58%;
left: 8.9vw;
width: 8.7vw;
height: 2.4vw;
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.4);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.lnk-cgr{
position: absolute;
top: 58%;
right: 5%;
width: 12.4vw;
height: 2.4vw;
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.4);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
footer{
position: absolute;
top: 462vh;
left: 0;
width: 100%;
height: 15.7vw;
background: #000;
overflow: hidden;
}
.pie{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
}
/* _______________________________________________________________________________________________________________
_________________________________________________________________________________________________________________________*/
@media screen and (max-width:639px){
.cel-oculto{
display: none;
}
header{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.img-fondoalt{
position: absolute;
top: 18vh;
left: 0;
}
.fnd-logocel{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 98px;
background-color: #1971a3;
}
.fondo{
position: absolute;
top:0;
left: 0;
background-color: rgba(0,0,0,0.6);
width: 100vw;
height: 100vh;
}
.logo{
position: absolute;
top: 22px;
left: 12%;
width: 74%;
}
.ico-lupa{
visibility: hidden;
}
.ico-pte{
position: absolute;
top: 7px;
right: 3%;
width: 90px;
height: 46px;
background-image: url(../img/lnk-pte-cel.png);
background-size: contain;
background-repeat: no-repeat;
transition: 0.5s;
z-index: var(--encima);
}
.btn-close-popup{
position: absolute;
top: 24vw;
right: -23vw;
width: 5vw;
height: 5vw;
padding: 1vw;
border-radius: 6px;
border: 1px solid #fff;
background: #d88662;
color: #fff;
text-align: center;
font-size: 2vw;
font-weight: 600;
}
.correo-cel{
position: absolute;
top: 100px;
left: 50px;
width: 20px;
color: #fff;
z-index: 100;
}
.correo-cel span{
position: absolute;
top: 3px;
left: 25px;
width: 120px;
font-size: 10pt;
}
.mnu-princel{
position: absolute;
top: 100px;
left: 0;
width: 60vw;
height: 25px;
z-index: 1;
}
.fnd-menucel{
position: absolute;
top:23px;
left: -64vw;
width: 60vw;
height: 55vh;
background: #48565d;
border-right: 15px solid #384248;
transition:all 0.4s linear;
z-index: 10;
}
.tit-mnucel{
display: none;
}
.tit-mnucel + label{
position: absolute;
top: 0;
left: 4px;
width: 32px;
height: 21px;
cursor: pointer;
background-color: black;
background: url(../img/ico-mnucel01.png);
background-repeat: no-repeat;
}
.tit-mnucel:checked ~ div{
left: 0;
transition:all 0.4s linear;
}
.tit-mnucel01{
position: absolute;
top: 2%;
width: 85%;
right: 0;
padding-right: 5%;
padding-bottom: 5px;
font-family: "denmark";
font-size: 4vw;
text-align: right;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}
.opt-celmnu01 a{
display: block;
position: relative;
top: 7vh;
left: 10%;
text-align: left;
font-family: "antipasto";
font-size: 4vw;
color: #acd9f2;
}
.opt-celmnu01 li{
padding-bottom: 6px;
}
.tit-mnucel02{
position: absolute;
top: 45%;
width: 85%;
right: 0;
padding-right: 5%;
padding-bottom: 5px;
font-family: "denmark";
font-size: 4vw;
text-align: right;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}
.form-mnuprincel02{
position: absolute;
top: 53%;
left: 0;
width: 100%;
height: 30%;
}
.lbl-nunreclamomnuprincel02{
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
color: #fff;
font-size: 4vw;
}
#txt-numreclamomnuprincel02{
position: absolute;
top: 27%;
left: 5%;
width: 90%;
outline: none;
background: #384248;
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px solid #acacac;
padding-bottom: 1%;
font-family: "asesina";
color: #acd9f2;
font-size: 3.5vw;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
}
::placeholder{
font-weight: normal;
font-style: normal;
font-size: 3vw;
color: #acacac;
font-family: "asesina";
}
#btn-reclamocel{
position: absolute;
top: 45%;
left: 15%;
width: 70%;
height: 26px;
font-family: "antipasto";
font-size: 4vw;
letter-spacing: 1px;
background: #384248;
border: 1px solid #ffe571;
border-radius: 15px;
color: #ffe571;
cursor: pointer;
}
.opt-celmnu02 a{
display: block;
position: relative;
top: 17vh;
left: 10%;
text-align: left;
font-family: "antipasto";
font-size: 4vw;
color: #acd9f2;
}
.opt-celmnu02 li{
padding-bottom: 6px;
}
.fnd-recibo-dig{
position: absolute;
top: 52vh;
left: 0;
width: 100%;
height: 8.5vh;
color: #fff;
background-color: #0075ca;
}
.instruc-recibodig{
visibility: hidden;
}
.tit-recibodig{
position: absolute;
top:0;
left: 0;
width: 100%;
font-family: "denmark";
font-size: 4vw;
text-align: center;
}
#numeroInsc{
position: absolute;
top: 6vw;
left: 10%;
width: 40%;
padding-left: 5px;
height: 4.5vw;
border-radius: 5px;
font-family: "opensans";
letter-spacing: 2px;
font-size: 3vw;
}
#numeroInsc::placeholder{
font-family: "opensans";
letter-spacing: 0;
font-size: 3vw;
}
#recibodig{
position: absolute;
top: 6vw;
left: 55%;
width: 35%;
height: 4.5vw;
border-radius: 5px;
background-color:rgb(236, 124, 0);
font-size: 2.5vw;
color: #fff;
cursor: pointer;
outline: 1px solid;
outline-color: rgba(255, 255, 255, 1);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.fnd-otrlnks{
position: absolute;
top: 96px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 29px;
}
.social-icons{
position: absolute;
top: 95px;
width: 100%;
}
.mnu-social-telfemerg{
position: absolute;
color: #fff;
font-size: 10pt;
width: 140px;
right: 1%;
}
.ico-social-fcbook{
position: absolute;
top: -90px;
left: 5px;
background-size: contain;
background-position: center;
width: 18px;
height: 18px;
background-image: url(../img/ico-facebk-cel.png);
}
.mnu-social-correo a{
position: absolute;
top: -90px;
color: #fff;
font-size: 10pt;
width: 150px;
left: 28px;
}
.modal-principal{
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
background: rgba(0,0,0,0.8);
z-index: 1000;
animation: modal-principal 1s 1s forwards;
visibility: hidden;
opacity: 0;
}
#cerrar-principal{
display: none;
}
.content-principal{
margin: 5%;
}
.content-principal img{
object-fit: contain;
height: 100%;
vertical-align: middle;
align-items: center;
display: flex;
}
#cerrar-principal + label {
position: fixed;
top: 5%;
right: 5%;
width: 5vw;
height: 5vw;
border: 1px solid #fff;
border-radius: 6px;
padding-top: 3px;
color: #fff;
font-size: 3vw;
font-weight: 600;
text-align: center;
background: #ce1717;
animation: modal-principal 1s 1s forwards;
visibility: hidden;
opacity: 0;
cursor: pointer;
z-index: 2000;
}
#cerrar-principal:checked + label, #cerrar-principal:checked~.modal-principal{
display: none;
}
@keyframes modal-principal {
100%{
visibility: visible;
opacity: 1;
}
}
.l{
text-align: left;
position: absolute;
top: 40%;
background: url(../img/left.png);
width: 24px;
height: 56px;
cursor: pointer;
}
.r{
right: 0;
position: absolute;
top: 40%;
cursor: pointer;
width: 24px;
height: 56px;
background: url(../img/right.png);
}
.actualidad{
position: absolute;
top: 18vh;
left: 5%;
width: 90%;
height: 220px;
color: #fff;
overflow:hidden;
}
.lst-actualidad{
position:absolute;
top:0 ;
left:0;
width: 100%;
}
.actualidad ul{
position: absolute;
top:10px;
left: 15px;
display: flex;
/* width:500%;
animation: transicion 40s infinite ease-out alternate; */
}
.actualidad li{
list-style: none;
width: 100%;
}
.actualidad h2{
position: relative;
left: 2%;
top: 0;
color:#fff;
font-family: "denmark";
font-size: 14pt;
width: 90%;
}
.actualidad p{
position: relative;
left: 5vw;
top: 2vh;
width: 80%;
font-size: 11pt;
color:#fff;
letter-spacing: 2px;
transition: 0.4s;
}
.actualidad a{
position: relative;
left: 17%;
bottom: -28%;
display: block;
width: 60%;
height: 25px;
text-align: center;
border: 1px solid #fff;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
color: #ce8800;
letter-spacing: 1px;
font-size: 10pt;
}
.actualidad a span{
position: absolute;
top: 3px;
left: 0;
}
.fnd-consultpublic{
position: absolute;
top: 41%;
width: 100%;
height: 10%;
}
.tit-consult{
font-family: "banchif";
font-size: 14pt;
color: #fff;
text-align: center;
}
.subtit-consult{
font-family: "opensans";
font-size: 11pt;
color: #fff;
text-align: center;
}
.btn-consul2{
position: absolute;
bottom: 5%;
left: 20%;
width: 60%;
height: 38%;
border: 1px solid #fff;
border-radius: 8px;
background: #ffb83b;
text-align: center;
font-size: 11pt;
}
.btn-consul2 a{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
margin: auto;
font-family: "opensans";
color:#000;
}
@keyframes transicion{
0%{margin-left: 0;}
18%{margin-left: 0;}
23%{ margin-left: -100%;}
41%{margin-left: -100%;}
46%{ margin-left: -200%;}
64%{ margin-left: -200%;}
69%{margin-left: -300%;}
87%{margin-left: -300%;}
92%{margin-left: -400%;}
100%{margin-left: -400%;}
}
.btnhead01{
position: absolute;
top: 62vh;
left: 10%;
width: 35%;
height: 6.5vh;
border: 1px solid #fff;
background: rgba(255,180,7,0.8);
border-radius: 10px;
text-align: center;
cursor: pointer;
}
.btnhead01 a{
position: absolute;
display: block;
margin: auto;
font-family: "opensans";
font-size: 1.8vh;
color:#000;
top: 50%;
transform: translateY(-50%);
}
.btnhead02{
position: absolute;
top: 62vh;
right: 10%;
width: 35%;
height: 6.5vh;
border: 1px solid #fff;
background: rgba(0,102,51,0.8);
border-radius: 10px;
text-align: center;
cursor: pointer;
}
.btnhead02 a{
position: absolute;
display: block;
margin: auto;
font-family: "opensans";
font-size: 1.8vh;
color:#fff;
top: 50%;
transform: translateY(-50%);
}
.btnhead03{
position: absolute;
top: 70vh;
left: 10%;
width: 35%;
height: 6.5vh;
border: 1px solid #fff;
background: rgba(28,92,136,0.8);
border-radius: 10px;
text-align: center;
cursor: pointer;
}
.btnhead03 a{
position: absolute;
display: block;
margin: auto;
font-family: "opensans";
font-size: 1.8vh;
color:#fff;
top: 50%;
transform: translateY(-50%);
}
.btnhead04{
position: absolute;
top: 70vh;
right: 10%;
width: 35%;
height: 6.5vh;
border: 1px solid #fff;
background: rgba(63, 159, 147,0.8);
border-radius: 10px;
text-align: center;
transition: 0.7s;
cursor: pointer;
}
.btnhead04 a{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
margin: auto;
font-family: "opensans";
font-size: 1.8vh;
color:#fff;
}
main{
position: absolute;
top: 78vh;
left: 0;
width: 100vw;
height: 359vh;
}
.sec-servclientes{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 122vh;
}
.tit-clientes{
position: absolute;
top: 20px;
left: 0;
width: 100%;
text-align: center;
font-family: "arkitech";
color: #6c6c6c;
font-size: 4vw;
}
.art-reclamos{
position: relative;
top:0;
left: 0;
width: 100%;
height: 27%;
}
.fnd-reclamos{
position: absolute;
top:0;
left: 0;
background: url(../img/fnd-reclamos.png);
width: 100%;
height: 230px;
}
.tit-reclams{
visibility: hidden;
}
.tipo-recla{
position: absolute;
top:15px;
width: 100%;
left: 0;
font-family: "denmark";
color: #fff;
font-size: 14pt;
text-align: center;
text-shadow: -2px 0 2px #5ec4f4, 2px 0 2px #5ec4f4, 0 2px 2px #5ec4f4, 0 -2px 2px #5ec4f4;
}
.txt-tipreclam{
font-family: "acen";
font-size: 9pt;
color: #fff;
letter-spacing: 1px;
z-index: 1;
}
.recla-vma{
display: block;
position: absolute;
top: 70px;
left: 5vw;
width: 22vw;
height: 22vw;
background: rgba(255,255,255, 0.1);
border-radius: 10px;
box-shadow: 0 0 4px #85cbf3, 0 0 4px #85cbf3, 0 0 4px #85cbf3, 0 0 4px #85cbf3;
cursor: default;
}
.recla-vma img{
display: block;
position: relative;
margin: auto;
width: 60%;
top: 20px;
}
.recla-vma:active{
background: radial-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.3));
box-shadow: -2px 0 10px #79b2ff, 2px 0 10px #79b2ff, 0 2px 10px #79b2ff, 0 -2px 10px #79b2ff;
}
.txt-recvma{
position: absolute;
bottom: 30px;
left: 5vw;
width: 24vw;
text-align: center;
}
.recla-pagos{
display: block;
position: absolute;
top: 70px;
left: 38vw;
width: 22vw;
height: 22vw;
background: rgba(255,255,255, 0.1);
border-radius: 10px;
box-shadow: 0 0 4px #85cbf3, 0 0 4px #85cbf3, 0 0 4px #85cbf3, 0 0 4px #85cbf3;
cursor: default;
}
.recla-pagos img{
display: block;
position: relative;
margin: auto;
top: 16px;
width: 60%;
left: -5px
}
.recla-pagos:active{
background: radial-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.3));
box-shadow: -2px 0 10px #79b2ff, 2px 0 10px #79b2ff, 0 2px 10px #79b2ff, 0 -2px 10px #79b2ff;
}
.txt-recpagos{
position: absolute;
bottom: 20px;
left: 38vw;
width: 24vw;
text-align: center;
}
.recla-ope{
display: block;
position: absolute;
top: 70px;
right: 5vw;
width: 22vw;
height: 22vw;
background: rgba(255,255,255, 0.1);
border-radius: 10px;
box-shadow: 0 0 4px #85cbf3, 0 0 4px #85cbf3, 0 0 4px #85cbf3, 0 0 4px #85cbf3;
cursor: default;
}
.recla-ope img{
display: block;
position: relative;
width: 60%;
margin: auto;
top: 24px;
}
.recla-ope:active{
background: radial-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.3));
box-shadow: -2px 0 10px #79b2ff, 2px 0 10px #79b2ff, 0 2px 10px #79b2ff, 0 -2px 10px #79b2ff;
}
.txt-recope{
position: absolute;
bottom: 30px;
right: 5vw;
width: 24vw;
text-align: center;
}
.no-bots01{
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
height: 40px;
background: rgba(0,0,0,0.4);
}
.mano{
visibility: hidden;
}
.btn-reclapagos{
visibility: hidden;
}
.btn-reclaope{
visibility: hidden;
}
.btn-reclavma{
visibility: hidden;
}
.cards-informacion{
position: relative;
top:-5%;
left: 0;
width: 100%;
height: 77%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background: url(../img/fnd-attclicel01.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.tit-cards{
position: absolute;
top: 10%;
left: 6%;
font-family: "denmark";
font-size: 6vw;
color: #007ebb;
}
.descrip-cards{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
color: #fff;
font-family: "antipasto";
font-size: 3.8vw;
letter-spacing: 1px;
text-align: right;
background-color: rgba(0,4,5,.6);
}
.descrip-cards span{
position: relative;
top:-127%;
color: #343030;
}
.pie-cards{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 32%;
padding: 10px;
}
.glass-cards{
position: absolute;
left: 15vw;
width: 70vw;
height: 23vh;
overflow: hidden;
backdrop-filter: blur(7px);
border-radius: 8px;
background: linear-gradient(100deg, rgba(0,0,0,0.4),rgba(0,0,0,0.1));
box-shadow: 0 10px 26px 0 rgba(0,0,0,0.7);
border-left: 1px solid rgba(255, 255, 255, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-right: 1px solid rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}
.lnk-cards{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #007ebb;
}
.lnk-cards a{
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
padding: 1.8vw;
background-color: rgba(0,4,5,.6);
border: 1px solid #fff;
border-radius: 8px;
font-family: "antipasto";
font-size: 4vw;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
color: #ffae44;
}
.card-catt{
top: 5vh;
}
.ico-cardcatt{
position: absolute;
top: 10%;
right: 10%;
width: 16%;
}
.card-vma{
top: 35vh;
}
.ico-cardvma{
position: absolute;
top: 13%;
right: 10%;
width: 24%;
}
.card-requisitos{
top: 65vh;
}
.ico-cardrequisitos{
position: absolute;
top: 10%;
right: 10%;
width: 16%;
}
.sec-edsanit{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 35vh;
background: #5ac9ff;
}
.fnd-edsanit{
position: absolute;
top: 0;
left: 0;
width: 100vw;
}
.tit-edsanit{
position: absolute;
top:0;
left: 0;
width: 100%;
text-align: center;
font-family: "denmark";
font-size: 8vw;
color: #fff;
}
.fnd-edvisitas{
position: absolute;
top: 20%;
left: 10%;
width: 20%;
height: 40%;
cursor: pointer;
transition: 0.8s;
}
.img-icoedvisitas{
position: relative;
top: 5%;
left:18%;
width: 65%;
height: 53%;
background-position: center;
background-size: cover;
background-image: url(../img/ico-edvisitas01.png);
background-repeat: no-repeat;
}
.lnk-edvisitas{
position: absolute;
left: 0;
bottom: 17%;
width: 100%;
text-align: center;
font-size: 2.8vw;
color: #fff;
transition: 0.8s;
}
.fnd-edusaplan{
position: absolute;
top: 20%;
left: 40%;
width: 20%;
height: 40%;
cursor: pointer;
transition: 0.8s;
}
.img-icoedusaplan{
position: relative;
top: 5%;
left:18%;
width: 65%;
height: 53%;
background-position: center;
background-size: cover;
background-image: url(../img/ico-edusaplan01.png);
background-repeat: no-repeat;
}
.lnk-edusaplan{
position: absolute;
left: 0;
bottom: 17%;
width: 100%;
text-align: center;
font-size: 2.8vw;
color: #fff;
transition: 0.8s;
}
.fnd-edusaactivs{
position: absolute;
top: 20%;
right: 10%;
width: 20%;
height: 40%;
cursor: pointer;
transition: 0.8s;
}
.img-icoedusaactiv{
position: relative;
top: 5%;
left:18%;
width: 65%;
height: 53%;
background-position: center;
background-size: cover;
background-image: url(../img/ico-edusaactiv01.png);
background-repeat: no-repeat;
transition: 0.8s;
}
.lnk-edusaactiv{
position: absolute;
left: 0;
bottom: 22%;
width: 100%;
text-align: center;
font-size: 2.7vw;
color: #fff;
transition: 0.8s;
}
.fnd-edusaconsej{
position: absolute;
top: 60%;
left: 25%;
width: 20%;
height: 40%;
cursor: pointer;
transition: 0.8s;
}
.img-icoedusaconsej{
position: relative;
top: 5%;
left:18%;
width: 65%;
height: 53%;
background-position: center;
background-size: cover;
background-image: url(../img/ico-edusaconsej01.png);
background-repeat: no-repeat;
transition: 0.8s;
}
.lnk-edusaconsej{
position: absolute;
left: 0;
bottom: 22%;
width: 100%;
text-align: center;
font-size: 2.7vw;
color: #fff;
transition: 0.8s;
}
.fnd-edusavideos{
position: absolute;
top: 60%;
right: 25%;
width: 20%;
height: 40%;
cursor: pointer;
transition: 0.8s;
}
.img-icoedusavids{
position: relative;
top: 5%;
left: 18%;
width: 65%;
height: 53%;
background-position: center;
background-size: cover;
background-image: url(../img/ico-edusavids01.png);
background-repeat: no-repeat;
transition: 0.8s;
}
.lnk-edusavids{
position: absolute;
left: 0;
bottom: 22%;
width: 100%;
text-align: center;
font-size: 2.7vw;
color: #fff;
transition: 0.8s;
}
.modal-frmvidedsanit{
position: absolute;
width: 100vw;
height: 70vh;
top: 0;
left: 0;
display: flex;
visibility: hidden;
opacity: 0;
transition: all 0.6s linear;
}
.frame-vidsedsanit{
width: 100%;
height: 100%;
position: relative;
display: flex;
visibility: hidden;
}
.modal-frmvidedsanit:target {
top:0;
background: rgba(0,0,0,0);
visibility: visible;
opacity: 1;
z-index: 10;
}
.modal-frmvidedsanit:target .frame-vidsedsanit{
top: 30px;
left: 0;
width: 100%;
visibility: visible;
border: 1px solid #fff;
transition: all 1s linear;
}
.btn-closefndvideoedsanit{
display: block;
position: absolute;
top:8%;
right: 2%;
width: 12%;
height: 4vw;
border-radius: 6px;
border: 1px solid #fff;
background: #d88662;
box-shadow: 0 0 15px rgba(0,0,0,1);
color: #fff;
text-align: center;
letter-spacing: 1px;
font-size: 2vw;
font-weight: 600;
z-index: 2;
}
.btn-closefndvideoedsanit span{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.btn-closefndvideoedsanit:hover{
background: #ffb524;
box-shadow: 0 0 30px rgba(0,0,0,0.9);
transform: scale(1.05);
transition: all 0.3s linear;
}
.empresaimportant{
position: relative;
top:1vw;
left: 0;
width: 100%;
height: 80vh;
background: #e3e3e3;
}
.infoempresaprin{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.tit-empresaimportat{
position: absolute;
top: 1vw;
left: 2vw;
width: 96vw;
font-family: "denmark";
font-size: 6vw;
color: #007ebb;
text-align: center
}
.fnd-iframe{
position: absolute;
top: 10%;
left: 0;
width: 100%;
height:70%;
}
.inf-important{
position: absolute;
top: 7vw;
left: 5%;
width: 90%;
height: 95%;
}
.fnd-lnkimportant01{
position: absolute;
bottom:0;
left: 0;
width: 34vw;
height: 10vh;
background: #adadad;
transition: 0.5s;
}
.fnd-lnkimportant01:focus-within{
background: #ffcd5b;
transition: 0.5s;
}
.lnk-importantcel01{
position: absolute;
top: 1vw;
left: 0;
width: 100%;
color:#fff;
font-family: "denmark";
font-size: 3.5vw;
text-align: center;
}
.fnd-lnkimportant02{
position: absolute;
bottom: 0;
left: 34vw;
width: 33vw;
height: 10vh;
background: #adadad;
transition: 0.5s;
}
.fnd-lnkimportant02:focus-within{
background: #d6977b;
transition: 0.5s;
}
.lnk-importantcel02{
position: absolute;
top: 1vw;
left: 0;
width: 100%;
color:#fff;
font-family: "denmark";
font-size: 3.5vw;
text-align: center;
}
.fnd-lnkimportant03{
position: absolute;
bottom: 0;
left: 68vw;
width: 32vw;
height: 10vh;
background: #adadad;
transition: 0.5s;
}
.fnd-lnkimportant03:focus-within{
background: #ade6a2;
transition: 0.5s;
}
.lnk-importantcel03{
position: absolute;
top: 1vw;
left: 0;
width: 100%;
color:#fff;
font-family: "denmark";
font-size: 3.5vw;
text-align: center;
}
.fnd-lnkimportant04{
position: absolute;
bottom: 0;
right: 0;
width: 28vw;
height: 10vh;
background: #adadad;
transition: 0.5s;
border: 1px solid red;
}
.fnd-lnkimportant04:focus-within{
background: #5ba6ff;
transition: 0.5s;
}
.lnk-importantcel04{
position: absolute;
top: 1vw;
left: 0;
width: 100%;
color:#fff;
font-family: "denmark";
font-size: 3.5vw;
text-align: center;
}
.sec-ecosis{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 70vw;
background: #5bce58
}
.fnd-ambiente{
position: absolute;
top: 0;
right: 0;
width: 110vw;
}
.fnd-ecocel{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40vh;
background: rgba(0,0,0,0.4);
}
.tit-ambiente{
position: absolute;
top: 20px;
left: 0;
width: 100%;
font-family: "denmark";
font-size: 6vw;
text-align: center;
color:#fff;
}
.sec-infadicional{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 200vw;
background: #1971a3;
}
.art-publiempresa{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 70%;
background: #fff;
}
.art-otrlinks{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 30%;
background: blue;
}
.tit-noticias{
position: absolute;
top: 1%;
left: 5%;
width: 90%;
font-family: "denmark";
font-size: 5.5vw;
color: #fff;
text-align: center;
z-index: 1
}
.paginafacebook{
position: absolute;
top:9%;
left: 5%;
width: 90%;
height: 30%;
}
.tit-mapa{
position: absolute;
top: 53%;
left: 5%;
width: 90%;
font-family: "denmark";
font-size: 5.5vw;
color: #fff;
text-align: center;
z-index: 1
}
.tit-adicionales{
position: absolute;
top: 105vw;
left: 5%;
width: 90%;
font-family: "denmark";
font-size: 5.5vw;
color: #fff;
text-align: center;
z-index: 1
}
.otros-links{
position: absolute;
top: 57%;
left: 5%;
width: 90%;
height: 30vh;
}
.subtit-parr-ambiente{
position: relative;
top: 12vw;
left: 3%;
font-size: 3.5vw;
font-weight: 800;
letter-spacing: 1px;
color: #33bd01;
}
.parrafo{
position: relative;
top: 15vw;
left: 5%;
width: 90vw;
height: 45vw;
padding: 0 2vw 0 2vw;
overflow: auto;
}
.parr-ambiente1{
font-size: 2.5vw;
color: #fff;
letter-spacing: 1px;
text-align: justify;
}
.parr-ambiente2{
font-size: 2.5vw;
color: #fff;
letter-spacing: 1px;
text-align: justify;
}
footer{
position: absolute;
top: 457vh;
left: 0;
width: 100%;
height: 40vh;
background: #000;
}
.logopie{
position: absolute;
top: 5%;
left: 3%;
width:50vw;
}
.correo-pie{
position: absolute;
top:2%;
right: 0;
width: 40%;
height: 20px;
text-align: right;
font-size: 3vw;
color: #fff;
letter-spacing: 1px;
}
.correo-pie img{
padding-left: 5px;
padding-top: 3px;
width: 1.2vw;
}
.horarios{
position: absolute;
top: 28%;
left: 2%;
width: 45vw;
height: 6vw;
color: #afafaf;
}
.horarios h3{
font-family: "denmark";
font-size: 3.5vw;
border-bottom: 1px solid #fff;
}
.horarios p{
font-size: 2.5vw;
text-align: left;
padding-top: 4px;
letter-spacing: 1px;
color: #dfdfdf;
}
.horarios span{
font-weight: 600;
}
.direcciones{
position: absolute;
bottom: 15%;
width: 100%;
left: 0;
text-align: center;
height: auto;
font-size: 2.8vw;
letter-spacing: 1px;
color: #fff;
}
.direcciones .ofi{
font-weight: 600;
}
.direcciones .guion{
padding: 0 7px;
}
.otr-telef{
position: absolute;
top: 30%;
right: 0;
width: 40%;
height: 32%;
color: #fff;
letter-spacing: 1px
}
.otr-telef h4{
font-size: 3.5vw;
border-bottom: 1px solid #fff;
}
.otr-telef p{
font-size: 2.5vw;
text-align: right;
padding-top: 3px;
}
.copyr{
position: absolute;
bottom: 1%;
left: 0;
width: 100%;
height: auto;
text-align: center;
letter-spacing: 1px;
color: #fff;
font-size: 3vw;
}
}