@font-face {
  font-family: "Gantari";
  src: url("fonts/Gantari-Regular.ttf");
}

@font-face {
  font-family: "GantariLight";
  src: url("fonts/Gantari-Light.ttf");
}

@font-face {
  font-family: "GantariBold";
  src: url("fonts/Gantari-Bold.ttf");
}

@font-face {
  font-family: "GantariSemiBold";
  src: url("fonts/Gantari-SemiBold.ttf");
}

@keyframes fade-out {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

html{
margin:0px;
height: 100%;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

h2{
  color:#023653;
  font-size: 2.2rem;
  font-family: Gantari, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /*font-family: Georgia, 'Times New Roman', Times, serif;*/
  font-weight: bold;
}

h3{
  font-size: 1.6rem;
}

body{
background-color: #ccc;

font-family: Arial, Helvetica, sans-serif;
font-size: medium;
margin: 0;
padding:0;
min-width: 98vw;
min-height: 100vh;
max-width: 100%;
container-type: inline-size;
}

p#panel-construction{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 10pt;
  font-weight: 600;
  background-color: rgb(255, 255, 95);
  border-radius: 4px;
  border-style:double;
  border-width: 4px;
  border-color: black;
  padding: 8px;
  color: black;
display:none
}
/* Estilo para la ventana popup */
.popup {
  display: none;
  position: fixed;
  left: 50%;
  top: 15%;
  width:40%;
  text-align: center;
  transform: translate(-50%, -50%);
  border: 6px solid #f8f8f8;
  padding: 20px;

  
 /*background: rgba(250, 253, 44, 0.94);*/
  background:#ff8d2feb;
  border-radius: 6px;

  font-size: large;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 40;

  animation: fade-out 2s;
  animation-iteration-count: 1;
  animation-timing-function:linear;
}
.popup.active {
  display: block;
}

.popup .close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}

main{
  max-width: 100%;
  margin:0px;
}

h1{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-transform:uppercase;
}

h6{
  color: black;
  background-color: yellow;
  font-family: Arial, Helvetica, sans-serif;
}
#imgLogo{
    width:70px;
    height: 70px;
    margin:12px 10px 0px 0px;
    -webkit-filter: drop-shadow(1px 0.5px 1px #b0b0b0);
    filter: drop-shadow(1px 0.5px 1px #b0b0b0);
}

header{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items:center;
    justify-content:space-around;
    background-color: #333333;
    /*background-image: url(img/fondonegroM.jpg);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    color:whitesmoke;
    height: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
 /* background-color:rgba(5, 108, 137);*/
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 1rem;
}
input {
  display: none;
 }

nav{
  display:flex;
  flex-direction: row;
 /* background-color: #056c89;*/
  background-color:#056c89;
  position:relative;
}
nav li {
  display: block;
 /* background:  #056c89;*/
  margin: 0;
  padding: 6px;
  list-style: none;
  
 /* border-bottom: 1px solid #ffffff;*/
}

nav li a{
  font-size: large;
  padding: 5px;
  font-family: 'GantariLight', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 500;
}

label{
  color: #ffffff;
  box-sizing: border-box;
  display: none;
  /*border: 1px solid black;
  border-radius: 5px;
  width: 30px;
  height: 30px;*/
  line-height: 30px;
  font-weight: bold;
  text-align: center;
  user-select: none;
  padding: 8px 6px;
}

a{
  color:#ccc;
  font-family: 'Gantari', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



a.linkCard{

  letter-spacing: 0.1cap;
 /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
  font-family: 'Gantari', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  margin-bottom: 4px;
  color:#ddd;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;

}

a.linkCard:hover{
  color:#979797;
  text-shadow: 3px 2px 3px rgba(73, 73, 73, 0.2); 
}

a.btnAccess{
  display: block;
  width: 48%;
  height: min-content;
  text-align: center;
  background-color:#e8781d;
  color:white;
  /*border-radius: 8px 0px 4px 0px;*/
  text-decoration: none;
  font-size:1rem;
  font-family: 'GantariLight';
  font-weight: 600;
  padding: 8px;
}
a.btnAccess:hover{
  color: #ed7c1f;
  background-color:#ffffff;
}

a.linkP{
  color:#333333;
  font-weight: bold;
}
#accesos{
  width:100%;
  height: 30px;
  display: flex;
  justify-content: space-around;
  color:#c3e4a9;
}
#linksAccesos{
  /*background-color:#1e1b78;*/
  /*background-color: #056c89 ;*/
  width:30%;
  height: 80px;
  color:#ffffff;
  border-radius: 6px;
  /*display: flex;
  flex-direction: column;
  justify-content: center;*/
  margin:4px;
  padding:0px 0px 10px 10px;

}

#h3pre{
  font-family: Gantari, Arial, Helvetica, sans-serif;
  display: block;
  font-size: 1.2em;
  margin-block-start: 0.5em;
  margin-block-end:0.3em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bolder;
  text-align: center;
  color:#ff8d2f;
}

#Portada-Lema{
  background-color: rgba(60, 60, 60, 0.4);
  display: block;
  position: absolute;
  top: 100px;
  left: 120px;
  padding: 5px;
  width: 50%;
  z-index: 20;
  color: #ffffff;
  font-size: 2.6rem;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#trip{
  width: 100%;
  display:flex;
  height: fit-content;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin: 10px;

}
aside{
  width: 40%;
  min-height: fit-content;
  max-height: 90vh;
  margin:0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;

}

.card{
  background-color: #023653cc;
  color:azure;
  /*font-family:Arial, Helvetica, sans-serif;*/
  font-family: GantariLight;
  font-size: 0.90rem;
  padding: 10px;
 /* position: absolute;
  top: 200px;
  right: 10px;*/
  width: 90%;
  height: min-content;
  margin: 2px auto 4px auto;
  /*border: 3px solid #b7b7ef;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

div.card h3{
  letter-spacing: 0.1cap;
 /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
  font-family: Gantari, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 600;
}

p{
  margin-top: 8px;
  margin-bottom: 8px;
}

footer{
  width:100%;
  position:relative;
  height:fit-content;
  /*background-color: #3c3c3c;*/
  background-color:#141414;
  color:white;
  padding:20px;
  font-size: 1rem;

  
}

.footer-h3{
  color:#e8781d;
}

.footer-content{
  margin-top: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
  width: 36%;
  /*background-color: #000000;*/
  padding: 25px;
}

.logo-media-soc{
  width: 14%;
  height: 14%;
  margin-left: 10px;
}

#footer-panel{
 display: flex;
 flex-direction: row;
 justify-content:space-between;
}

#contactoSec p{
  margin-bottom: 5px;
}

.map-pin{
  width:20px; 
  height:20px;
}

/* adaptar valores - responsive */
@media screen and (max-width: 992px) {
      *{
        margin:0px;
        padding: 0px;
      }

      body {
        background-color: #ffffff;
        margin:0px;
        padding: 0px;
        width: 100%;
      }
      main{
      width:100%;
      margin:auto;
      /*prueba*/
      display: flex;
      flex-direction: column;
      }

      h1{
        font-size: 1.2rem;
        text-align:center;
        margin: 0px 5px 0px 5px;
        
      }

      h2{
        color:#023653;
        font-size: 2.4rem;
        font-family: Gantari, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
      }
      
      h3{
        font-size: 1.8rem;
      }

      #imgLogo{
        width:80px;
        height: 80px;
        margin:5px 5px;
        float:left;
      }

      ul{
        display: none;
      }

      #h3pre{
        font-size: 1em;
        color:#ed7c1f;
      }
      label{
        box-sizing: border-box;
        display: inline-block;
        /*border: 1px solid black;
        border-radius: 5px;
        width: 30px;
        height: 30px;*/
        line-height: 30px;
        font-weight: bold;
        font-size: 24pt;
        text-align: center;
        user-select: none;
        padding: 6px;
      }

      input:checked  ~ ul{
        display:flex;
        flex-wrap: wrap;
        justify-content: left;
      }
      
      nav li {
        display: block;
       /* background:  #056c89;*/
        margin: 0;
        padding: 4px;
        list-style: none;
        
       /* border-bottom: 1px solid #ffffff;*/
      }
      nav li a{
        font-size:medium;
        padding: 5px;
        font-family: 'GantariLight', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
      }

      header{
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content:space-around;
        background-color: #333333;
        background-image: url(img/fondonegroM.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position:top;
        color:#ffffff;
      }

      #linksAccesos{
        /*background-color:#1e1b78;*/
        width:100%;
        /*background-color:#333333;*/
        margin:10px auto 0px auto;
        font-size: 12pt;
        height: min-content;
        padding:12px 0px 20px 0px;
        border-radius: 0px;
       /* -webkit-box-shadow: 8px 8px 4px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 8px 8px 4px 0px rgba(0,0,0,0.75);
        box-shadow: 6px 6px 2px 0px rgba(0,0,0,0.75);*/
        }

      a.btnAccess{
        font-size: .96rem;
        padding: 8px;
        width: 46%;
      }

      section#portada {
        width:100%;
        height: 60%;
        margin:0px;
        position: relative;
      }

      #Portada-Lema{
        background-color: rgba(60, 60, 60, 0.3);
        display: block;
        position: absolute;
        top: 60px;
        left: 80px;
        padding: 5px;
        width: 60%;
        z-index: 20;
        color: #ffffff;
        font-size: 2rem;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
      }

      #carrousel{
        display:block;
        margin:auto;
        width:max-content;
        height: 40vh;
      }

      #trip{
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position:relative;
        margin:auto;
        top:0.5vh;
        
      }

      aside{
        width: 100%;
        height: fit-content;
        min-height: fit-content;
        max-height: 140vh;
        margin:0px 0px 12px 0px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .card{
        color:azure;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        padding: 10px;
        width: 96%;
        height: max-content;
        margin: 4px auto 4px auto;
        font-size: 1.1rem;
        position:relative;
      }

      div.card h3{
        /*letter-spacing: 0.1cap;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
        font-family: Gantari, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.6rem;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 4px;
      }

      a.linkCard{
        letter-spacing: 0.1cap;
        /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
        font-family: Gantari, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.6rem;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 4px;
        color:#ddd;
        text-decoration: none;
        transition: color 0.3s ease;
      }
      
      a.linkCard:hover{
        color:#979797;
        text-shadow: 3px 2px 3px rgba(73, 73, 73, 0.2);
      }

      footer{
        width:fit-content;
        height:fit-content;
        background-color: #3c3c3c;
        font-size: 0.88rem;
        color:white;
        padding:10px;
        margin: 10px 0 0 0;
        font-size: 0.9rem;
      }

      .footer-content{
        margin-left:0px;
        width: 100%;
        /*background-color: #000000;*/
        padding: 10px;
        margin: 10px auto auto auto;
      
      }
      .logo-media-soc{
        width: 10%;
        height: 10%;
      }
      #footer-panel{
        display: flex;
        flex-direction: column;
        margin: auto;
       }
      .span-footer{
        margin-left: 4px;
        font-weight: 400;

      }
      .map-pin{
        width:30px; 
        height:30px;
      }
      .footer-content a{
        text-transform: uppercase;
        font-size: medium;
        }

      .footer-content .card-contact{
        margin-bottom: 20px;
        
      }
      .popup{
        top: 12.5%;
        width:78%;
      }
      p#panel-construction{
        display:none;
      }
}