:root {
    --main-h-color: #6b2ba1;
    --main-b-color: #6b6d75;
    --main-l-color: #ffffff;
    --main-g-color: #eaeaea;
    --main-v-color: #26ccb8;
    --main-a-color: #fab73b;
    --main-gTransp-color: rgba(0,0,0,0.8);
  }




  /*THE MINIFIED RESET*/
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;

      
      /*font-size: 100%;*/
      /*font: inherit;*/
      vertical-align: baseline;
      font-family: 'Mulish',Helvetica,Arial,Lucida,sans-serif;
  }

 * { 
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
}


  /* HTML5 display-role reset for older browsers*/
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
      display: block;
  }
  body { line-height: 1; }
  ol, ul { list-style: none; }
  blockquote, q { quotes: none; }
  blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
  table { border-collapse: collapse; border-spacing: 0; }
  /*self clearfixing*/
  section:before, section:after, article:before, article:after {clear: both; content: ""; display: table;}
  /* new clearfix */
  .clearfix:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
      }
  * html .clearfix             { zoom: 1; } /* IE6 */
  *:first-child+html .clearfix { zoom: 1; } /* IE7 */
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  a{
    text-decoration: none;
    
  }

  p{
    line-height : 1.5em; 
    font-size: 1em; 
  }
  /*END RESET*/

  /*colores*/

  option{
    background-color: var(--main-l-color);
  }

  body{
    color: var(--main-b-color);
    font-size: 14px;
  }

  .enlace{
    text-decoration: none;
    color: var(--main-b-color);
    transition-duration: 0.3s;
  }
  .enlace:hover{
    transform: scale(0.95);
  }

  /*nav*/

  .dis{
  display: none;
}

  .nav{
    display: flex;
    position: absolute;
    top: 0;
    z-index: 10000;
    width: 100%;
    font-size: 1em;
    color: #ffffff;
    font-weight: bolder;
  }

  .menu{
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    position: fixed;
    top: 0;
    background-color: #ffffff;
    color: var(--main-b-color);
      }



  .search{
    cursor:pointer;
  }

  .light{
    color: #828282;
    font-weight: bolder;
  }

  nav a{
    color: var(--main-b-color);
  }
  .social a{
    color: var(--main-b-color);
    font-size: 1em;
    padding: 0.5em;
  }

  .social a:hover{
    color: var(--main-h-color);


  }
  .search{
    color: var(--main-h-color);
  }

  .nav_links{
    display: flex;
    flex-direction:row;
    justify-content:space-around;
    transition-duration: 1.3s;
  }

  .nav_links a {
    padding: 1em;
  }

  .menu_activo{
        color: var(--main-h-color);
      }

    

  .nav_links a:hover{
    color: var(--main-h-color);

  }


.menuMov{
  display: none;
}

  /*style slider*/



  h2{
  font-size: 4em;
  font-weight: 800;

  }
  h3{
  font-size: 2.5em;
  font-weight: 800;
  }
  .titleSpace{
    margin-bottom: 2em;
  }
  body, html{
    font-family: Mulish;
    width: 100%;
    height: 100%;
  }

  *{
    box-sizing: border-box;
    /*user-select: none;*/
  }





  .center_y{
    position: relative;
    top:50%;
    transform: translateX(-50%);
  }

  .center_x{
    position: relative;
    left:50%;
    transform: translateX(-50%);
  }

  #slider-container{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    object-fit: cover;
  }

  .slide{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    object-fit: cover;
  }

  .slide>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }


                          /*header*/


  .elInicial{
    margin-top: 100px;
    min-height: 30%;
    alig
  }
  .fullCont{
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 10%;
    color: var(--main-l-color);
    position: relative;
  }

  .fullCont p{
    padding-bottom: 1em;
  }
  .fullCont h3{
    padding-bottom: 1em;
  }

  .fullCont button{

    margin-top: 1em;
    padding:1em;
    border-radius: 2em;
    border-style: none;
    cursor: pointer;

  }

  .fullCont .imgFondo{
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    right: 0;
    z-index: 0;

  }
  .headerAcerca{
    background-color: var(--main-h-color);
  }



  .acercaInfo{
    z-index: 100;
  }

  .gtInfo{
    width: 100%;
    overflow: hidden;
    min-height: 100px;
    -webkit-transition-duration: 0.8s;

  }

  .large{
      height: 50px;
  }
  .largeI{
      height: 0px;
  }

  /*INFO SLIDES*/

  .contHeader{
    color: #ffffff;
    display: flex;
    position: absolute;
    width: 100%;
    height: 20vh;
    top: 260px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    animation-name: subir;
    animation-duration: 1.5s;
    }
    .contHeader p{
      font-weight: bold;
      font-size: 1em;
      margin-bottom: 10px;
      padding: 2em;
    }
    .contHeader h2{
      width: 700px;
      max-width: 80%;
      text-align: center;
    }

    .contHeader button{
      border-width: 0px;
      border-radius: 2em;
  
      padding: 1em;
      padding-left: 2em;
      padding-right: 2em;
      color: #ffffff;
      background-blend-mode: multiply;
      cursor: pointer;
      flexont-size: 1.2em;
      background: var(--main-h-color);

    
    
    }


  .slider-arrow{
    display: flex;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    position: absolute;

  }

  /*Buscador*/


   .buscadorMov{
    display: flex;
    margin: auto;
    position: absolute;
    z-index: 20000;
    width: 100%;
    height: 100%;
    top: 0;
    flex-direction: row;
    flex-direction: column;
    justify-content: center;
    animation-name: fade;
    animation-duration: 0.5s;
    align-items: center;
    position: fixed;
    background-color: var(--main-gTransp-color);
  }
  .formBuscadorMov{
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 300px;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    border-radius: 2em;
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.2);
    text-align:center;
    padding: 1em;
    position: relative;

  }

  .formBuscadorMov input{
    border-width: 0.5px;
    border-style: solid;
    border-radius: 0.5em;

    border-color: var(--main-g-color);
  }
 .formBuscadorMov select{
    border-width: 1px;
    border-style: solid;
    border-radius: 0.5em;
    border-color: var(--main-g-color);
    background-color: var(--main-l-color);
  }

   .cerrarBuscador{

    position: absolute;
    right: 0em;
    top: -1.5em;
    cursor: pointer;
    font-size: 2em;
  }



  .buscador{
    display: flex;
    margin: auto;
    position: absolute;
    z-index: 20000;
    width: 100%;
    top: 105px;
    flex-direction: row;
    justify-content: center;
    animation-name: subir;
    animation-duration: 1s;
    position: fixed;
  }







  .mostrar{
    display: flex;
      -webkit-transition-duration: 0.8s;

  }
  .ocultar{
    display: none;
    transition-delay: 1s;


  }

  .formBuscador{

    display: flex;
    width: 60%;
    height: 4em;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    border-radius: 2em;
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.2);
    text-align:center;

  }

  .btnSearch{
    width: 3em;
    height: 3em;
    border-radius: 1.5em;
    border-style: none;
    background-color: #6b2ba1;
    cursor: pointer;
    color: #ffffff;

  }

  .content-select{
    position: relative;
  }
  .content-select select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>');
      background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;}
  }




   
  .content-select:hover i{
    margin-top: 3px;
  }

  .in-xl{
    border-style: none;
    height: 2em;
    font-family: 'Mulish',Helvetica,Arial,Lucida,sans-serif;
    width: 95%;
    color: #888888;
      outline: 0; 
      position: relative;
      transition: all 0.25s ease;
  }


  /*Termina Buscador*/


  /*cOLUMNAS*/


  .col-1 {
    min-width: 10%;
  }
  .col-2 {
    min-width: 20%;
  }
  .col-3{
    min-width: 30%
  }
  .col-4 {
    min-width: 40%;
  }
  .col-5 {
    min-width: 50%;
  }
  .col-6 {
    min-width: 60%;
  }
  .col-7 {
    min-width: 70%;
  }
  .col-8 {
    min-width: 80%;
  }
  .col-9 {
    min-width: 90%;
  }
  .col-10 {
    min-width: 100%;
  }



  .btnOk{
      min-width: 100px;
      border-width: 0px;
      border-radius: 2em;
      padding: 0.5em;
      padding-left: 2em;
      padding-right: 2em;
      color: #ffffff;
      cursor: pointer;
      background: var(--main-h-color);
      transition-duration: 0.3s;
  }

.btnOk:hover{
  
  background-color: var(--main-a-color);
}

.btnB{
    margin-top: 1em;
    padding: 1em;
    border-radius: 2em;
    border-style: none;
    cursor: pointer;
}
.btnB:hover{
  background-color: var(--main-a-color)
}

  #arrow-prev{
    left: 20px;
  }

  #arrow-next{
    right: 20px;
  }

  #dots-wrapper{
    display: flex;
    position: absolute;
    bottom: 30px;
  }

  .dot-nav{
    width: 15px;
    height: 15px;
    border-radius: 100%;
    cursor: pointer;
    margin: 0 8px;
    border: 2px solid #d6d6d6;
  }

  .dot-nav:hover{
    background-color: #d6d6d6;
  }

  .active-dot{
    background-color: #d6d6d6;
  }

  .fade{
    animation-name: fade;
    animation-duration: .5s;
  }

 /*Consulta de la Ciudad*/

 .citiContHead{
  width: 60vw;
  height: 35vw;
  margin: auto;
  display: flex;
  position: relative; 
  padding: 2em;
}

.citiContHead img{
  width: 100%;
  height: 100%;
  border-radius: 2em;
  object-fit: cover;
}

.citiContHead i{
display: flex;
position: absolute;
left: 4em;
bottom: 4em;
color: var(--main-l-color);

}

.citiContInfo{
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.citiContInfo iframe{
  width: 40vw;
  height: 25vw;
  border:0;
  border-radius: 2em;
}

.infoCitiGeneral{
  padding: 2em;
}


.data{
  display: flex;
  margin: auto;
  padding-top: 2em;
  padding-bottom: 2em;
}

.data .dataNav{
  display: flex;
  flex-direction: column;
}

.data .dataNav i{
  display: block;
  padding: 1em;
  font-style: none;
  text-decoration: none;
  font-style: normal;
  font-size: 1.2em;
  font-weight: bolder;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--main-g-color);
  cursor: pointer;
}

.dataNav i:hover{
  color: var(--main-h-color);
}

.data .dataInfo{

  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;

}


.dataInfo i{
  font-size: 2em;
  color: var(--main-h-color);
  padding: 1em;
}


.dataInfo h4{
  font-size: 1.5em;
  color: var(--main-h-color);
  padding-left: 1em;
  margin-bottom: 1em;

}
 .datItemCit{
    display: none;
}

  .activeInfo{
    display: block;
  }
  .activeElement{
    color: var(--main-h-color);
  }

 

  /*main*/

  .dest{
    min-height: 70vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    background-color: #ededed;
    padding-top: 2em;
    padding-bottom: 2em;
    background-image: url("../img/fondoDest.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right;

  }
  .dest>h3{
    max-width: 80%;
    text-align: center;
    padding-bottom: 2em;
    margin-top: 1em;
    color: var(--main-h-color)
  }
  .vid{
    height: 50vh;
    display: flex;
    justify-content: centerX;
    align-items: center;
  }

  .cit{
    min-height: 50vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .cit h3{
    padding: 1em;
  }

  .cMas{
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    padding: 2em;
    color: var(--main-l-color);
    background-image: url("../img/fondCon.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;

  }

  .bl-place{
    width: 100%;
    height: 50vh;
    border-radius: 2em;
    display: flex;
  }

  .i-place{
    width: 60%;
    height: 100%;
    border-radius: 2em;
    z-index: 10;
  }
  .i-place img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2em;
    
  }
  .ciudadName{
  position: relative;
  z-index: 2000;
  bottom: 2em;
  left:1em;
  font-size: 2em;
  color: var(--main-l-color);
  font-weight: bolder;
}

  .c-place{
    width: 45%;
    height: 100%;
    background-color: #ffffff;
    position: relative;
    border-radius: 2em;
    margin-left: -5%;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    padding: 2em

  }

 

  .c-place>div{
  width: 75%;
  text-align: left;
  }

  .n-ciudad{
    color: var(--main-h-color);
    font-weight: bolder;
    font-size: 1.5em;

  }
  .n-dep{
    color: var(--main-h-color);

  }
  .r-info{
    padding-top: 20px;
  }

  .cont{
    width: 100%;
    height: 100%;
    background: var(--main-h-color);
  }
  .w-1{
    height: 100%;
  }

  .w-2{
    min-height: 50%;
  }

  .w-3{
    min-height: 30%;
  }
  .w-4{
    min-height: 25%;
  }

  .ft-x{
    font-size: x-large;
    font-weight: bolder;
  }
  .c-l{
    color: var(--main-l-color);
  }



  .fx-c{
    display: flex;
    justify-content:flex-start;
    align-items: center;
    flex-direction: column;
    padding: 2em;
  }
  .fx-c-l{
    display: flex;
    justify-content:;
    align-items: left;
    flex-direction: column;
    padding: 2em;

  }

  .fx-r{
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: row;
    padding: 2em;
  }

  .fx-rw{
    display: flex;
    justify-content:space-around;
    align-items: center;
    flex-direction: row;
    padding: 2em;
  }

  .iconBox{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .iconBox i{
    font-size: 3em;
    mix-blend-mode: normal;
    margin-bottom: 0.5em;
  }
  .iconBox>{

    

  }
  .contMulty{
    min-height: 50vh;
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;

  }
  .contMulty>img{
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: -1000;
    object-fit: cover;
  }

  .background-overlayV{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--main-v-color);
    opacity: 0.9;
    z-index: -100;
  }

  .background-overlayA{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--main-a-color);
    opacity: 0.9;    
    z-index: -100;
  }


  .datImportantes{
    color: var(--main-l-color);
    height: 100%;
    width: 100%;
    justify-content: space-around;

  }
  .datImportantes button{

    margin-top: 1em;
    padding:1em;
    border-radius: 2em;
    border-style: none;
    cursor: pointer;
    background-color: var(--main-h-color);
    color: var(--main-l-color);

  }

  .datImportantes>h3{
    margin-bottom: 1em;
  }

  .contGuia{
    overflow: hidden;
    min-height: 0px;
    -webkit-transition-duration: 0.8s;
  }

  .guiaCompleta{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    background-color: var(--main-g-color);
    position: relative;
    justify-content: center;

  }


  .cuad{
    width: 40%;
    padding: 1em;
    margin: 1em;
  }

  .cuad .iconBox{
    margin-bottom: 2em;
  }


  .cuad i{
    margin-bottom: 0.5em;
    color: var(--main-h-color);
  }
  .cuad h3{
    font-size: 1.5em;
    margin-bottom: 1em;
    color: var(--main-h-color);
  }


  .video{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }



  .vd-cont{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .col-video{
    display: flex;
    justify-content:center;
    align-items: center;
  }
  .col-video #share{
    background-color: var(--main-l-color);
    padding: 1em;
    border-radius: 0.2em;
    display: flex;
    cursor: pointer;
    position: absolute;
    z-index:1000;
    display: none;
    right: 30px;
    font-size: 1em;
    animation-name: left_corto;
    animation-duration:0.5s;
    transition-duration: 0.3s;
    
  }
  #share:hover{
    display: flex;
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.2);
    background-color: var(--main-h-color);
    color: var(--main-l-color);
  }

  .shareSocial{
    flex-direction: row;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: var(--main-gTransp-color);
    z-index: 5000;
    justify-content: center;
    align-items: center;    
  }

  .boxSocial{
    width: 600px;
    min-height: 50%;
    max-width: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--main-l-color);
    border-radius: 2em;
    position: relative;
  }

  .boxSocial i{
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5em;
    border-width: 1px;
    border-style: solid;
    font-size: 2em;

  }

  .cerrarCompartir{

    position: absolute;
    right: 0.5em;
    top: -1.5em;
    cursor: pointer;
    font-size: 2em;


  }



  .col-video video:hover ~ #share{
   display: flex;

  }
  .iconActive{
    color: var(--main-h-color);
  }
  .stars i{
    cursor: pointer;
  }
  /*Guia por ciudad*/
  .mainGuia{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    margin: auto;
    margin-top: 100px;
  }

  .contGuiaBox{
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-content: left;
    
  }

  .contenedorGuia{
    justify-content:center;
  
    
      }


  .boxCitCont{
    width: 400px;
    margin: 1em;
    cursor: pointer;
    border-radius: 2em;
    position: relative;

  }

  .boxCitCont .headBox{
    width: 100%;
    height: 250px;
    position: relative;
  }

  .boxCitCont .headBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:2em;
    position: relative;
  }
  .boxCitCont .headBox i{
    position: absolute;
    z-index: 2em;
    bottom: 2em;
    left: 2em;
    color: var(--main-l-color);
  }

  .boxCitCont .infoCit{
  overflow: hidden;
  height: 0;
  transition: 0.5s;
  border-radius: 1.7em;
  position: absolute;
  z-index: 2;
  bottom: 0;
  background-color: var(--main-g-color);


  }

  
  .boxCitCont:hover .infoCit{
    height: 250px;

  }
  .boxCitCont:hover{
    background-color: var(--main-g-color);


  }

  .infoCit h3{
    margin: 0.5em;
  }
  .infoCit p{
    margin: 1em;
  }
  .infoCit a{
    margin-top: 2em;
    margin-left: 1em;
    padding:1em;
    border-radius: 2em;
    border-style: none;
    cursor: pointer;
    background-color: var(--main-h-color);
    color: var(--main-l-color);

  }

  .pubBanners{
    display: flex;
    flex-direction: column;
    z-index: -1;
  }

  
  /*banners*/

   .serv{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2em;
  }

  .banner{
    border-radius: 1em;
    height: 400px;
    width: 200px;
    background-color: var(--main-h-color);
    color: var(--main-l-color);
    margin: 0.5em;
    justify-content: center;
    display: flex;
    align-items: center;
    position: relative;
    text-align: center;

  }
  .detener{
    position: fixed;
    top: 100px;
    z-index: -1;
  }

  .banner>img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 1em;

  }

  .pubBanners .banner{
    height: 40vh;
    width: 20vh;
    display: flex;
    position: relative;
  }

  /*Banner horizontal*/

  .leaderboard{
    width: 728px;
    height: 90px;
    max-width: 90%;
    object-fit: cover;
    background-color: var(--main-h-color);
    color: var(--main-l-color);
    border-radius: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
  }
  .leaderboardMov{
    display: none;
  }

  .leaderboard>img{
    width: 100%;
    height: 100%;
    border-radius: 1em;
    object-fit: cover;
  }

  .desk{
    display: flex;
  }
  .mov{
    display: none;
  }


  /*footer*/
.boxCities{
  margin: auto;
  width: 200px;
  height: 300px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.boxCities>img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 1em;
  }

  footer{

    display: flex;
    border-top-style: solid;
    border-top-width: 0.5em;
    border-top-color: var(--main-h-color);
    width:100%;
    margin-top: 3em;
    justify-content: center;
    background-color: var(--main-l-color);
  }
  footer p{
    padding-top: 1em;
  }
  footer a{
    padding-top: 0.5em;
    color: var(--main-b-color);
  }

  /* logos */
  .logoFooter{
    width: 65%;
  }
  .logoNav{
    width: 35%;
  }


 /* Formulario de contacto */

  .fContact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  .fContact>input{
    
    margin: auto;
    margin-top: 0.5em;
  }


  .regDatos{
    width: 95%;
    background-color: var(--main-g-color);
    border-style: none;
    height: 2em;
    text-align: center;
  }


  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}




  /*Servicios*/




.servSect{
  width: 100%;
  padding:3em;
  margin-top:100px;
  text-align: center;
  cursor: pointer;

}

.servSect li{
  list-style: none;
  text-decoration: none;
}

.servSect li:hover{
position: relative;  
}

.servSect li ul{
  background-color: var(--main-g-color);
  overflow: hidden;
  height: 0;
  transition: 0.5s;
  margin-top: -2.5em;
  border-radius: 1em;
  margin-bottom: 2.5em;
}

.servSect .nivel1:hover  ul.nivel2, .servSect li a:active  ul.nivel2{
  position: relative;
  left: 0px;
  height: auto;
  padding: 1em;
  padding-top: 3em;
  margin-bottom: 0;
  animation-name: fadedelay;
  animation-duration: 3s;
  

  }

.servSect li:hover .servB{
  background-color: var(--main-h-color);
  color: var(--main-l-color);

}

@keyframes desplegar {
    from { height:1; }
      to { height: 300px; }
}


.contServ{
  margin-bottom: 2em;
}

.contServ .nivel2 li a{
  display: flex;
  padding: 1em;
  color: var(--main-b-color);
}

.contServ .nivel2 li a:hover{
  color: var(--main-h-color);

}

.servB{
  height: 50px;
  width: 100%;
  background-color: var(--main-g-color);
  border-radius: 2em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 2em; 
  padding-right: 2em; 
  align-items: center;
  z-index: 200;
  position: relative;
  transition: 0.5s;

}

.medic{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  height: auto;
  margin-bottom: 2em;


}

.linksMedic{
  
  top: 0;
  width: 80%;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  background-color: var(--main-g-color);
  border-radius: 2em;


  }

  .recibe{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 2em;



  }

  .medic .servB{
    z-index: 1;
    margin-bottom: 0;
    cursor: pointer;
  }

.linksMedic a{
  padding: 1em 3em;
  color: var(--main-b-color);
}



.allServices{
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  width: 80%;
  margin: auto;
}

.boxService{
  width: 45%;
  max-width: 80%;
  height: 250px;
  border-radius: 2em;
  background-color: var(--main-g-color);
  margin: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}


.boxServiceImg{

  width: 40%;
  height: 90%;
  justify-content: center;
  align-items: center;
  display: flex;

}
 .boxServiceImg img{

  width: 80%;
  height: 80%;
  object-fit: contain;

 }

 .boxServiceInfo{

  width: 60%;

 }


 .boxServiceInfo h3{

  color: var(--main-h-color);

 }

 .breadcrumb{
  margin: auto;
 }



.green{
  color: var(--main-v-color);
}
.yellow{
  color: var(--main-a-color);
}
.violet{
  color: var(--main-h-color);
}
.white{
  color: var(--main-l-color);
}
.gray{
  color: var(--main-b-color);
}

.bg-green{
  background-color: var(--main-v-color);
}
.bg-yellow{
  background-color: var(--main-a-color);
}
.bg-violet{
  background-color: var(--main-h-color);
}
.bg-white{
  background-color: var(--main-l-color);
}
.bg-gray{
  background-color: var(--main-b-color);
}


  /*animaciones*/


  .anim-left{

    animation-name: left;
    animation-duration: 1s;
  }



/*desplegables servicios*/


/*Eventos*/
.calendar{
  background-color: var(--main-g-color);
  padding: 2em;
}

.selectorsCalendar{
  display: flex;
  justify-content: space-around;
  padding: 1em;
  margin-bottom: 2em;
}

.week{
  display: flex;
  min-width: 90%;
  margin: auto;
  justify-content:center;
}

.day{
  background-color: var(--main-l-color);
  width: 150px;
  max-width: 12%;
  min-height: 50vh;
  padding: 1em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  margin: 1em;


}
.day h4{
  color: var(--main-h-color);
  text-align: center;
}

.today{
  background-color: var(--main-h-color);
  width: 150px;
  max-width:12%;
  min-height: 50vh;
  padding: 1em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  margin: 1em;
}

.today h4{
  color: var(--main-l-color);
  text-align: center;
}

.itemEvent{
  display: flex;
  max-width:100%;
  height:25vh;
  max-height:100px;
  position:relative;
  border-radius: 1em;
  object-position: relative;
  margin-top: 1em;
}

.itemEvent img{
  width: 100%;
  height: 100%;
  margin-right: 1em;
  border-radius: 1em;
  object-fit: cover;
  cursor: pointer; 
}
.infoItemEvent{
  display: none;
  width: 300px;
  height: 150px;
  left: 100%;
  background-color: var(--main-l-color);
  position: absolute;
  border-radius: 1em;
  padding: 1em;
  z-index: 5000;
  box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.2);
}

.itemEvent:hover .infoItemEvent{
  display: flex;

}


.allevents{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin:auto;
}

 .allevents h3{
    padding-top: 1em;
    text-align: center;
  }

.boxEvent{
  width: 80%;
  min-height: 250px;
  margin-top:2em;
  display: flex;
}
.boxEvent .headBoxEvent{
  position: relative;
  width: 35%;
  height: 250px;
  z-index: 100;
}

.boxEvent .headBoxEvent img{
  width: 100%;
  height: 100%;
  border-radius: 2em;
  object-fit: cover;

}
.boxEvent .headBoxEvent i{
  display: flex;
  position: absolute;
  z-index: 200;
  bottom: 1em;
  left: 1em;
  color: var(--main-l-color);

}

.boxEvent .infoBoxEvent{
  background-color: var(--main-g-color);
  width: 70%;
  margin-left: -5%; 
  position:relative;
  z-index: 50;
  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
  padding: 1em;
  padding-left: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.infoBoxEvent .categoria{
  font-size: 0.7em;
  color: var(--main-h-color);
}
.infoBoxEvent h4{
  font-size: 1.4em;
  color: var(--main-h-color);
  padding-bottom: 1em;
}

.infoBoxEvent strong{
  color: var(--main-h-color);
  padding-right: 0.5em;
}






















/*Responsivo movil*/

@media only screen and (max-width: 768px) {
  [class*="col-"] {
  width: 100%;}


  .boxCitCont:hover .infoCit{
    height: 270px;
    margin: -1em;
    overflow: visible;
    animation-name: fade;
    animation-duration: 0.6s;

  }

  [class*="fx-"] {
  flex-direction: column;}

  .boxSocial{
    flex-direction: column;
    width: auto;
    padding: 2em;
  }
  .pubBanners .banner{
    display: none;
  }

  .col-video #share{
    display: flex;
    background-color: var(--main-h-color);
    color: var(--main-l-color);
  }


   .serv{
    flex-direction: column;
  }

  .serv .leaderboardMov{
    margin-bottom: 1em; 
  }


  .menuMov .social{
    padding: 0.5em;
    font-size: 1.5em;
    display: flex;
    width: auto;

  }



  .fbShare{
    margin-bottom: 1em;
    color: #2377e1;
  }
  .tweetShare{
    margin-bottom: 1em;
    color: #299ded;
  }
  .wtspShare{
    margin-bottom: 1em;
    color: #1d8c7e;
  }

  .menuMov .social a{
    color: var(--main-l-color);

  }

  .allServices{
  width: 100%;
  }

  .boxService{
    width: 100%;
    max-width: 100%;
    height: auto;
    flex-direction: column;
  }


  .boxServiceImg{

    width: 100%;
    padding: 2em;

  }

  .breadcrumb{
  padding: 1em;
  width: auto;
 }


 .citiContHead{
  min-height: 50vh;
 }

  .citiContHead{
  width: 100%;
}

.citiContInfo{
  flex-direction: column-reverse;
}

.map iframe{
  width: 100%;
  min-height: 40vh;
}

.map{
  padding: 1em;
}


.data{
  flex-direction: column;
  padding: 1em;
}
 
 

 .boxServiceInfo{

  width: 100%;
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 2em;


 }

 .elInicial {
    min-height: auto;
    }
 


  .allevents{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1em;
  }

  .boxEvent{
    width: 100%;
    flex-direction: column;
  }

  .boxEvent .headBoxEvent{
    margin: auto;
    width: 100%;
  }
  .boxEvent .infoBoxEvent{
    margin: auto;
    width: 100%;
    border-radius: 2em;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -2em;
    padding-top: 3em;
    min-height: 200px;
  }
  .events{
    margin-bottom: 2em;
  }

  .selectorsCalendar{
    display: block;
  }

  .naviSelects{
    display: flex;
    justify-content: space-around;
    margin-bottom: 2em;
    
  }

  .naviSelects .btnOk{
    font-size: 1em;

  }
  .allEventsB{
    display: block;
  }

  .allEventsB .btnOk{
    margin: auto;
    display: flex;
  }






  .week{
    justify-content: flex-start;
    width: 100%;
    overflow: scroll;
  }

  .week .day{
    width: 150px;
    min-width: 150px;
    margin: auto;
    margin-bottom: 1em;
    margin-right: 1em;
  } 
  .week .today{
    width: 150px;
    min-width: 150px;
    margin: auto;
    margin-bottom: 1em;
        margin-right: 1em;

    
  }
  .infoItemEvent{
    left:auto;
    width: 100%;
    top: 100%;
  }
  .leaderboardMov{
    display: flex;
    justify-content: center;
    margin: auto;
  }


.select{
  background-color: var(--main-l-color);
}



   .iconBox{
    margin-bottom: 2em;
  }

  .elInicial{
    margin-top: 1em;
  }


 .contGuiaBox{
  flex-direction:column; 
  padding: 2em;
  width: 90vw;
  }
  .contGuiaBox .boxCitCont{
    width: 100%;
    margin: auto;
    margin-bottom: 2em;
  }

  .banner{
    display: none;
  }

  .mainGuia{
    display: block;
  }

  .servSect{
    margin:0;
    padding: 2em;
  }

  .fx-c, .fx-r{
    flex-direction: column;

  }
  /*banner*/
  .desk{
    display: none;
  }
  .mov{
    display: flex;
    border-radius: 1em;
  }

 


  .leaderboard{
    height: auto;
    width: 300px;
    max-width: 90%;
  }

.dest{
  justify-content: space-around;
}
.dest>h3{
  font-size: 2em;
  max-width: 80%;
  text-align: center;
  padding-bottom: 1em;
  margin-bottom: 0;
}
.bl-place{
  flex-direction: column;
  height: auto;
  padding-bottom: 1em;
}
.i-place{
  width: 100%;
  min-height: 300px;
}
.c-place{
  width: 100%;
  margin: auto;
  align-items: flex-start;

}
.c-place>div{
  width: 95%;
  text-align: left;
  }

.ciudadName{
  bottom: 50%;
  left: auto;
  margin: auto;
  justify-content: center;
  display: flex;
  width: 50%;
  
  }

  /*Consulta Ciudad*/

.cuad{
  width: auto;
  margin-bottom: 0;
}


.vid{
  height: auto;
}
.vd-cont{
  flex-direction: column;
  height: auto;
}

.menu{
  display: none;
}
.menuMov{
  display: flex;

}
.navMov{
  background-color: var(--main-l-color);
  width: 100%;
  height: 5em;
  z-index: 1000;
  position: fixed;
  justify-content: space-around;
}
.navMov a{
  display: flex;
}

.barras{
z-index: 1100;
position: fixed;
left: 0;
margin: 1em;
padding: 1em 0.5em;
border-radius: 0.5em;
background-color: var(--main-h-color);
}

.barrasabiertas{
  color: var(--main-h-color);
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}


.mbmov{
  height: 100vh;
  width: 100%;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color:  var(--main-h-color);
  padding-top: 2em;
}

.menBtnMov{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 100%;
  color: var(--main-l-color);
  font-size: 2em;
}

.searchBtnMov{

  display: flex;
  margin: 1em;
  justify-content: center;
  align-items: center;
  color: var(--main-h-color);
  font-size: 1.5em;

}
.logoNavMov{
  height: 25%;
  margin: auto;
}
header{
  margin-top: 5em;
}



.menBtnMov:hover{
  
  background-color: var(--main-l-color);
  color: var(--main-h-color);
}

.equis{
  color: var(--main-l-color);
}

.fContact{
  border-top-width: 1px;
  border-top-style: solid;
  border-color: var(--main-g-color);
  padding-top: 1em; 


}

.logoFooter{
  margin: auto;
  width: 50%;
  padding: 1em;
}
.fContact .btnOk{
  margin-top: 2em;
}

.glider-dots{
  margin-top: 2em;
}


}

@media only screen and (max-width: 600px) {




  /*footer*/

  footer{
    flex-direction: column;
  }
  .menuFooter{
    display: none;
  }
  .socialFooter{
    display: none;
  }




}



  @keyframes fade{
    from {opacity: .0}
    to { opacity: 1}
  }

  @keyframes fadedelay{
    0% {opacity: .0}
    50% { opacity: .0}
    50% { opacity: 1}
  }


  @keyframes left{
    0% {
      opacity: .0;
      transform: translateX(200px);}
     20% {
      opacity: .0;
      transform: translateX(200px);}
    100% { opacity: 1}
  }

  @keyframes left_corto{
    0% {
      opacity: .0;
      transform: translateX(30px);}
     
    100% { opacity: 1}
  }

  @keyframes subir{
    0% {
      opacity: .0;
      transform: translateY(200px);


    }
     20% {
      opacity: .0;
      transform: translateY(200px);


    }
    100% { opacity: 1}
  }