@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&display=swap');
* {
  box-sizing: border-box;
}
.test {background-color:red;}
html {scroll-behavior: smooth;}

.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
}
/*Box-sizing
We switch the global box-sizing value from content-box to border-box.it can cause problems with some third party software like Google Maps and Google Custom Search Engine.
If you need to override it :
.selector-for-some-widget {
  box-sizing: content-box;
}
*/

body {
  font-family: 'Montserrat', sans-serif;
	font-size:1em;
	font-weight:400;
  -webkit-font-smoothing: antialiased;
  color:#000000;
}


a {transition: all 0.4s ease-in-out 0s;color:#006FF0; }
a:hover, a:focus {color:inherit;}
a:focus {  outline: none;}

ul {  padding-left: 0px;margin:0;}
ul > li { list-style: none;}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
  }

/*****************************************************
*** My styles ***
*****************************************************/
h1 {font-family: 'Montserrat', sans-serif;font-size:2.5rem;line-height:1.1;text-transform: uppercase;}
h1 span {display: block;}
h2, .h2 {font-family: 'Montserrat', sans-serif;font-size:2rem;text-transform: uppercase;font-weight:bold;}
h3, .h3 {text-transform: uppercase;letter-spacing: 2px;font-size: 2rem;font-weight: 600;}
h4, .h4 {font-family: 'Montserrat', sans-serif;font-size:1.8rem;text-transform: uppercase;}
.medium {font-size:1.1rem;}
.big {font-size:1.2rem;}
.close {font-size: 2.5rem;}
/*****************************************************
*** Colores ***
*****************************************************/
.main-color {color:#006FF0;}
.text-color {color:#000000;}
.text-white {color: #ffffff;}

.bg-blanco {background:#ffffff;}
.bg-main {background-color: #006FF0;}
.bg-blue_medium {background:#77AFC6;}
.bg-blue_light {background:#A4C8D9;}
.bg-blue_lighter {background:#D2E4EC;}
.bg-velo {background-color:rgba(255,255,255,0.5);}
/*****************************************************
*** header ***
*****************************************************/
header {position:absolute;top:15px;width:100%;z-index:1000;}
a.logo img {max-width:140px;}
/*IDIOMA*/
.idioma::-ms-expand { display: none;}
.idioma {
  text-align-last:center;
    -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
    border: medium none;
    border-radius:0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    float:right;
    padding:5px 22px 5px 6px;
    background:transparent url('../images/ico_chevron_down.svg') no-repeat center right;
    font-size:16px;
    font-weight:bold;
    text-align: left;
    outline:none;
}
/*****************************************************
*** main ***
*****************************************************/
#main {background-image: url(../images/bg-main-mobile.webp);
  background-size: cover;background-attachment: fixed;background-repeat:no-repeat;color:#fff;min-height:100%;height:auto;padding-top:100px;}
  #main .container  {height:100%;}
  #main {max-width: 100%;}
.menu {font-size:1.2rem;text-transform: uppercase;background-color: #006FF0;}
.menu a {color:#fff;display:inline-block;letter-spacing: 2px;font-size: 1.4rem;transition: all 0.4s ease-in-out;}
.menu a:hover, .menu a:focus {text-decoration: none;transform: translateY(-10px);}

/*****************************************************
*** Footer ***
*****************************************************/
#footer {background-color:#000;color:#fff;font-size:0.9em;}
#footer a {color:#006FF0;}
#footer div.col-12 span{margin-right:50px;}

/*****************************************************
*** sections ***
*****************************************************/
section.bg-grey{position:relative;}
section.bg-grey:after {
  background: #D8D8D8;
    content: "";
    top: 258px;
    left: 0;
    height: calc(100% - 250px);
    position: absolute;
    width: 100%;
    z-index:-1;}

/*****************************************************
*** botones ***
*****************************************************/
.btn {cursor:pointer;
  transition: all 0.4s ease-in-out;
padding: 0.6rem 1.3rem 0.6rem 1rem;
font-size: 1rem;
line-height: 1;
border-radius: 0rem;
border-color:#006FF0;
text-align: center;}
.btn-primary, .btn-primary:visited {background-color:transparent;color:#006FF0;border-color:#006FF0;box-shadow: 0 2px rgba(0,0,0,0.2); }
.btn-primary:hover, .btn-primary:focus {background-color:rgba(0,111,240,0.2); color:#006FF0;border-color:#006FF0;box-shadow: 0 2px rgba(0,0,0,0.2); }
.btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active {outline:none;background-color:#fff;color:#006FF0;border-color:#006FF0;box-shadow: 0 1px rgba(0,0,0,0.2);transform: translateY(2px);}

.btn-secondary, .btn-secondary:visited {border-color:#006FF0;background-color:#006FF0;color:#ffffff!important;box-shadow: 0 2px rgba(0,0,0,0.2); }
.btn-secondary:hover, .btn-secondary:focus {background-color:#73B0F7;color: #fff;box-shadow: 0 2px rgba(0,0,0,0.2);border-color:#006FF0; }
.btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active {outline:none;background-color:#006FF0;color:#fff;border-color:#006FF0;box-shadow: 0 1px rgba(0,0,0,0.2);transform: translateY(2px);}

.descargas .btn {text-align:left;}
.descargas .btn span {float: right;display:inline-block;transition: all 0.4s ease-in-out;}
.descargas .btn:hover span {transform: translateX(10px);}
.descargas .btn img {margin-right: 10px;}

.btn img {margin-left: 10px;}
.btn-landing {background-color: #fff;color: #000;text-transform: uppercase;border: none;font-size: 1.4rem;}
.btn-landing img {margin: 5px auto 0 auto;}
.btn-landing:hover, .btn-landing:focus {color: #000;transform: translateY(-6px);}

/*****************************************************e
*** destacados ***
*****************************************************/
.ruta {
  background-color: #fff;
  margin-bottom: 10px;
  border:1x solid #006FF0;
}
.ruta .btn {display: block;}
.ruta .body {padding: 10px;}
.ruta .titulo {background-color: #D8D8D8;color: #000;font-size: 1rem;font-weight: 600;padding: 10px;min-height: 70px;text-align: center;}
.ruta .body p:last-child {margin-bottom: 0;}
.gasteiz .ruta {max-width: 255px;}
.capitales .btn-secondary, .btt .btn-secondary {display: inline-block;margin: -15px 15px 0 15px;width: calc(100% - 30px);}
.capitales h3 {font-size:3.4rem;font-weight: 900;line-height:1;letter-spacing:1px;}
.grandesrutas .btn-secondary {display: inline-block;margin:0 15px 0 15px;width: calc(100% - 30px);}

/*contenedor horizontal */
/*horizontal cards*/
#horizontal-slide {overflow-y: auto;scroll-behavior: smooth;padding-bottom: 10px;}
.contenedor-horizontal {}
.empty-card { min-width: 40px;}

button.btn-slider {
  border: 0;
  position: absolute;
  z-index: 20;
  top: 0;
  height: 100%;
  width: 55px;
  padding: 0;
}
.btn-left {left: 13px;  background: rgb(255,255,255);background: linear-gradient(90deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0) 100%); }
.btn-right{right:13px;  background: rgb(255,255,255);background: linear-gradient(270deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0) 100%); }
button.btn-slider img {width: 36px;}
#horizontal-slide .ruta {margin-right: 15px;min-width: 270px;}
/**/

.destacados {width:100%;}
.destacados div.mix {
  margin-bottom: 1em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  vertical-align: top;
  display: inline-block;
}
.destacados div.mix.filtro-titulo {box-shadow: none;padding:0;width: 100%;margin-top:0;margin-bottom:0;}
.destacados div.mix a {overflow: hidden;position: relative;display: block;}
.destacados div.mix a img {transition: 1s;display: block;width: 100%;}
.destacados div.mix:hover a img {transform: scale(1.2);}
.destacados div.mix a div {width:100%;background-color: rgba(0,0,0,0.5);color:#fff;padding:10px;position:absolute;bottom:0;transition: 0.5s;}
@media only screen and (min-width: 500px) {
  .destacados div.container-fluid {
    text-align: left;
  }
  .destacados div.container-fluid:after {
    content: "";
    display: table;
    clear: both;
  }
  .destacados div.mix {
    width: 49.5%;
    margin-bottom: 1em;
  }
}
 @media only screen and (min-width: 900px) {
  .destacados div.mix {
    width: 33%;
  }
  .destacados div.mix.filtro-titulo {margin-top:20px;margin-bottom:5px;}
  .destacados div.mix:hover a div {font-size:1.2rem;min-height:70px;}
}
@media only screen and (min-width: 1200px) {
  .destacados {
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
  }
  .destacados div.mix {
    width: 24.7%;
  }
  .destacados div.mix a div {min-height: 64px;font-size:0.95rem;}
}
@media only screen and (min-width: 1700px) {
  .destacados div.mix {
    width: 19.7%;
  }
  .destacados div.mix a div {min-height: 68px;font-size:1rem;}
}

/* cookies policy */
.cookies-policy {position: fixed; left:0; bottom:0; width: 100%; background:#151414; color:#fff; box-shadow: 0 2px 18px rgba(0,0,0,.4); z-index: 999999; opacity:0.95; color:#fff; text-align:left; padding:20px;}
.cookies-policy p { font-size:14px; line-height: 16px;}
.cookies-policy a {color:#fff; text-decoration: underline;}
.cookiealert {font-size:.9rem;line-height:1.1;}
.cookiealert .btn {padding:0.3rem;}

/*tabla servicios*/
.modal-xl {max-width: fit-content;}
.modal-content {max-height: 90vh;}
.modal-body {overflow-y: auto;}
.modal .table {font-size:85%;}
.table th, .table td {padding: .5rem;border-top: none;}

/*****************************************************
*** destacados ***
*****************************************************/

.destacados-cards .col-sm-6, .destacados-cards .col-md-6 {margin-bottom:1.5rem;}
.destacados-cards li {margin:0 0.8% 1em;}
.card {height:100%;transition: 1s;}
.card:hover {text-decoration:none;cursor:pointer;}
.card .card-image {overflow:hidden;}
.card .card-image img {transition: 1s;display: block;width: 100%;}
.card:hover {transform: translateY(-20px);}
.card:hover .card-image img {transform: scale(1.05);}
a.card h3{color:#000;font-weight: bold;font-size:1.2rem;}
a.card p {color:#434444;font-size:0.85rem;}

.card .card-body p.numero {
    position: relative;
    margin-top: -4rem;
    text-align: center;
}
.card .card-body p.numero span {
    background-color: #1C76A1;
    color: #fff;
    padding-top: 8px;
    width:70px;
    border-radius: 5rem;
    border:5px solid #fff;
    display: inline-block;
    font-size:35px;
    font-family: 'mightwellregular', serif;
}

.compartir a.btn {text-align: left;overflow: hidden;line-height:15px;margin-bottom: 10px;}
.compartir a.btn img {margin-right: 8px;vertical-align: middle;width:20px;float: left;}
.compartir a.btn p {float:left;width: calc(100% - 40px);margin:0;}

.img-fluid {width: 100%;}
/*****************************************************
*** section ***
*** MAS PLANES COMUN ***
*****************************************************/
section.bg-grey{position:relative;}
section.bg-grey:after {
  background: #D8D8D8;
    content: "";
    top: 400px;
    left: 0;
    height: calc(100% - 400px);
    position: absolute;
    width: 100%;
    z-index:-1;}
section.mas-planes h2 {font-size: 2rem;text-transform: inherit;}
section.mas-planes h3 {text-transform: uppercase;font-size: 1rem;font-weight: 400;}
section.mas-planes h3 a {color: #000;}
section.mas-planes div.destacados-cards {
  overflow-y: auto;
  scroll-behavior: smooth;
}
section.mas-planes div.destacados-cards .planes {min-width: 300px;float: left;margin: 5px 15px;}
@media (min-width: 1024px) { 
  section.mas-planes h2 {font-size: 2.5rem;}
  section.mas-planes div.destacados-cards .planes {min-width: 220px;width: 15.6%;margin: 5px 10px;}
}
@media (min-width: 1400px) { 
  section.mas-planes div.destacados-cards .planes {width: 15.6%;}
  section.mas-planes .drag-horizontal {background: none;}
}
.drag-horizontal {background: url(https://turismo.euskadi.eus/es/contenidos/recurso_tecnico/aa30_subhome_confidencial/es_def/images/ico_drag.svg) no-repeat right 10px bottom 2px;}

/*VIDEO BACKGROUND*/
/*** T H E - M A G I C - O F - O B J E C T - F I T ***/
/*****************************************************/
.video-container {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #000;
  background-image: url(../images/bg-main.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position:center center;
}
.video-container::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1;
}
@media (max-width: 767px) {
  .video-container {
    height: auto;
  }
}
@media (max-width: 479px) {
  .video-container {
    height: 100vh;
  }
}

video {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.callout {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  text-align: center;
  position: relative;
  z-index: 10;
}
.video_nocover {
object-fit: inherit;
  position: relative;
}


section.intro, section.agenda  {background-image: url(../images/colores.svg);background-repeat: no-repeat;background-position: top;background-size: 110%;}
/*****************************************************
Responsive Styles
*****************************************************/
/* Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap*/

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  h1 {font-size: 3rem;}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    section.intro, section.agenda  {background-size: 100%;}
    h1 {font-size:3.7rem;}
    h2, .h2 {font-size:2.5rem;}
    .medium {font-size:1.2rem;}
    .big {font-size:1.35rem;}
    #footer a {margin-left:20px;margin-right:20px;}
    #footer div.col-12 span{margin-right:100px;}
    .grandesrutas .embed-responsive {max-width: 720px;margin: 0 auto;}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  header {top:30px;}
  #main {background-image: url(../images/bg-main.webp);background-size: cover;background-attachment: fixed;background-repeat:no-repeat;min-height:100vh;padding-top: 140px;}
  h1 {font-size:4.1rem;}
  h3, .h3 {font-size:2.2rem;}
  /*section.intro  {background-image: url(../images/bandera.svg);background-repeat: repeat-x;background-position: top;background-size: 2px;}*/
  .capitales .btn-secondary, .btt .btn-secondary {margin-top: -25px;margin-left: 15px;display: inline-block;width: auto;}
  .grandesrutas .btn-secondary {margin-bottom: 0;margin-right: 15px;display: inline-block;width: auto;}
  .grandesrutas .embed-responsive {max-width: 960px;margin: 0 auto;}
}

/*Resolución para el MENU DESKTOP*/
@media only screen and (min-width: 1024px){
.capitales h3 {font-size:4rem;}
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  h1 {font-size:4.5rem;}
  h2, .h2 {font-size:2.8rem;}
  .capitales h3 {font-size:5rem;}
  .grandesrutas .embed-responsive {max-width: 1140px;margin: 0 auto;}

}

/* XExtra large devices (large desktops, 1600px and up)*/
@media (min-width: 1600px) {
 #main {padding-top:250px;}
}