html{scroll-behavior: smooth;}
body{color: #162732; background-color: white;font-family: 'Krub', sans-serif; font-size: 18px; font-weight: 400;overflow-x: hidden;}
body a{color: #0071bc;}
body p{padding-bottom: 10px;}
h1,h2,h3{font-family: 'Acme', sans-serif;}
h1{color: white; font-size: 75px;line-height: 90px;}
h2{color: #162732; font-size: 60px;text-transform: uppercase;margin-bottom: 50px;line-height: 65px;}
h3{color: #162732; font-size: 155px;}
h4{font-family: 'Krub', sans-serif; color:#162732; font-size: 28px; margin-top: 50px;margin-bottom: 50px; font-weight: 700;}
h5{color: white; font-size: 50px;line-height: 50px; font-weight: 700; letter-spacing: 3px;font-family: 'Krub', sans-serif; }
.container-fluid{padding:0px}
.portada {padding: 0px;position:relative;width: 100%; height: 100vh;background-size: cover;}
#uno{background-image: url(../img/home.png);background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
#uno p{color: white; max-width: 450px;padding-top: 30px;}
#dos{background-image: url(../img/intro.png);background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
#tres{background-image: url(../img/cap-1.png);background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
#cuatro{background-image: url(../img/cap-2.png);background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
#cinco{background-image: url(../img/cap-3.png);background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
.container.titulo{margin-left: 100px;padding-top: 50px;}
.titulo h1{margin-top: 100px;}
#tarjetas{width: 100%; max-width: 800px;margin-top: 100px;margin-bottom:100px ;text-align: center;}
#tarjeta-claro{background-color:#0071bc; height: 450px; padding:30px; border-radius: 20px;width: 21rem}
.imagen-tarjeta{width: 100%; height: 250px;background-size: cover;}
#tarjeta-uno{background-image:url(../img/cuadrado-intro.png)}
.card-text{font-size: 23px;font-family: 'Acme', sans-serif;line-height: 28px;color: white;text-align: center; text-transform: uppercase;padding-bottom: 10px;}
.card-text:hover{font-size:26px}
#tarjetas a{font-size: 13px; color: white; text-decoration: none;}
#tarjeta-oscuro{background-color: #162732;height: 450px; padding:30px; border-radius: 20px;width: 21rem}
#tarjeta-dos{background-image:url(../img/brisas.png); background-size: 100%;}
.cartas{margin-top: 50px;}
#tarjeta-tres{background-image:url(../img/tunjuelito.png); background-size: 100%;}
#tarjeta-cuatro{background-image:url(../img/colon.png); background-size: 100%;}
hr{height: 0.8px;background-color:#162732;}
#dato-1{background-image: url(../img/dato-1.png); background-size: cover; width: 100%;margin-top:80px; margin-bottom:0px;height: auto;padding:80px;}
.datos{text-align: center;}
.visualizacion{background-color: #6cbae5; position: relative; width: 100%;height: 700px;margin: 0px;}
#dato-2{background-image: url(../img/dato-1.png); background-size: cover; width: 100%; margin-bottom:0px;height: auto;padding-top:80px;}
.caso{font-family: 'Krub', sans-serif; color: white;font-size: 30px;}
.fecha{font-family: 'Krub', sans-serif; color:#162732; font-size: 50px;}
.nube{max-width: 600px;margin: auto;margin-top: 50px;}
footer{padding: 50px;position:relative;background-color: #162732;}
.footer{padding-top: 30px;z-index: 100;}
#logo img{width: 110%;}
#logo-2 img{width: 45%;}
#logo-3 img{width: 65%; margin: auto;padding-left: 80px;}
#publicacion{text-align: center; display:grid}
#publicacion p{font-weight: 500; color: white;}
#texto{padding-top: 150px;margin-bottom: 80px;}
.texto{max-width: 800px; margin: 0 auto;}
.texto-2{max-width: 900px; margin: 0 auto;}
.card-header h4{color: #917d26;}
.flecha{text-align: center;bottom: -1%;position: absolute;background-color:white;max-width: 1800px; margin: 0 auto;padding-top: 5px;padding-bottom: 5px;}
.subtitulo{position:relative; height: 5px;background-image: url(../img/banner-4.png); background-size:cover; border-radius: 15px 15px 15px 15px; max-width: 100px;margin: 120px auto 50px auto;}
.destacado{border-right:10px solid #917d26; margin-top:70px; margin-bottom: 70px; margin-left:300px ; text-align: right; padding-right: 30px;max-width: 580px;}
.destacado p{font-size: 35px; font-weight: 700; line-height: 40px;}
#infografia{margin-top: 70px; margin-bottom:70px; background-size: cover;padding: 80px 0px 25px 0px;background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%;position: relative;padding-bottom: 80px;}
.info-1{background-image:url(../img/banner.png);padding: 50px 0px 25px 0px; margin-top: 70px; margin-bottom:70px;}
.info-2{background-image:url(../img/banner-2.png)}
.info-3{background-image:url(../img/banner-3.png)}
.info-4{background-image:url(../img/banner-4.png)}
.preg-resp, .preg-resp2 {counter-reset: pregunta-respuesta;}
.preg-resp dt {position: relative; font-size:20px;font-weight:600;padding: 10px 0 10px 0;}
.preg-resp dt:before {content: counter(pregunta-respuesta)"\BB";counter-increment: pregunta-respuesta;position: absolute;left: 0;top: 0;color:white;background:#0071bc;font-size:28px;line-height:28px;font-weight:bold;padding:5px 10px;}
.preg-resp dd {font-size:16px;margin: 0 0 8px 0;	}	
.preg-resp dt, .preg-resp dd {padding-left: 80px;line-height: 23px;	}
.preg-resp2 dt {position: relative; font-size:18px;font-weight:400;padding: 0px 0 10px 0;}
.preg-resp2 dt:before {content: counter(pregunta-respuesta)"\BB";counter-increment: pregunta-respuesta;position: absolute;left: 0;top: 0;color:white;background:#0071bc;font-size:28px;line-height:28px;font-weight:bold;padding:5px 10px;}
.preg-resp2 dd {font-size:16px;margin: 0 0 8px 0;	}	
.preg-resp2 dt, .preg-resp2 dd {padding-left: 80px;line-height: 25px;	}
.header {background-color: #162732;width: 100%;height: auto;text-align: center;padding: 10px;position: fixed;top: 0px;right: 0px;z-index: 100;z-index: 1000;}
.header img{width: 25%;}
.menu-fijo a {font-family: 'Acme', sans-serif;font-weight: 600;color: white;font-size: 20px;-webkit-border-radius: 10px 10px;padding: 10px;}
.btn-secondary {background-color:rgb(22, 39, 50, 0.5);font-size: 18px; border-color: transparent; padding: 2px 8px;}
.btn-secondary:hover{background-color:rgb(22, 39, 50, 0.8);border-color: transparent;}
.r-button{
  --uirButtonBackgroundColor: var(--rButtonBackgroundColor, transparent);
  --uirButtonPadding: var(--rButtonPadding, var(--rButtonPaddingTop, 0) var(--rButtonPaddingRight, 0) var(--rButtonPaddingBottom, 0) var(--rButtonPaddingLeft, 0));
  --uirButtonBorderWidth: var(--rButtonBorderWidth, 0);
  --uirButtonBorderStyle: var(--rButtonBorderStyle, solid);
  --uirButtonBorderColor: var(--rButtonBorderColor, currentColor);
  --uirButtonFontFamily: var(--rButtonFontFamily, inherit);
  --uirButtonFontSize: var(--rButtonFontSize,  inherit);
  --uirButtonColor: var(--rButtonColor);

  background-color: var(--uirButtonBackgroundColor);
  padding: var(--uirButtonPadding);

  border-width: var(--uirButtonBorderWidth);
  border-style: var(--uirButtonBorderStyle);
  border-color: var(--uirButtonBorderColor);
  cursor: pointer;

  font-family: var(--uirButtonFontFamily);
  font-size: var(--uirButtonFontSize);
}

.r-button::-moz-focus-inner,
.r-button[type="button"]::-moz-focus-inner,
.r-button[type="reset"]::-moz-focus-inner,
.r-button[type="submit"]::-moz-focus-inner {
  
  /* Remove the inner border and padding in Firefox. */
  
  border-style: none;
  padding: 0;
}

/* The component will reset browser's styles of link */

.r-link{
    --uirLinkDisplay: var(--rLinkDisplay, inline-flex);
    --uirLinkTextColor: var(--rLinkTextColor);
    --uirLinkTextDecoration: var(--rLinkTextDecoration, none);

    display: var(--uirLinkDisplay) !important;
    color: var(--uirLinkTextColor) !important;
    text-decoration: var(--uirLinkTextDecoration) !important;
}

/* The component will reset browser's styles of list */

.r-list{
    --uirListPaddingLeft: var(--rListPaddingLeft, 0);
    --uirListMarginTop: var(--rListMarginTop, 0);
    --uirListMarginBottom: var(--rListMarginBottom, 0);
    --uirListListStyle: var(--rListListStyle, none);

    padding-left: var(--uirListPaddingLeft) !important;
    margin-top: var(--uirListMarginTop) !important;
    margin-bottom: var(--uirListMarginBottom) !important;
    list-style: var(--uirListListStyle) !important;
}

/* Basic styles of the hamburger component */

.m-hamburger{  
  --uiHamburgerThickness: var(--hamburgerThickness, 4px);

  display: var(--hamburgerDisplay, inline-flex);
  width: var(--hamburgerWidth, 28px);
  height: var(--hamburgerHeight, 20px);
  top:-22px;
  left:-20px;
  position: relative;
}

.m-hamburger::before, 
.m-hamburger::after, 
.m-hamburger__label{
  width: 100%;
  height: var(--uiHamburgerThickness);
  border-radius: var(--hamburgerBorderRadius, 5px);
  background-color: var(--hamburgerBackgroundColor, currentColor);

  position: absolute;
  left: 0;
}

.m-hamburger::before, 
.m-hamburger::after{
  content:"";
}

.m-hamburger::before{
  top: 0;
}

.m-hamburger::after{
  bottom: 0;
}

.m-hamburger__label{
  /* The calculation of middle hamburger button line position */
  
  top: calc(50% - calc(var(--uiHamburgerThickness) / 2));
}

/* helper to hide elements that are available only for screen readers. */

.screen-reader{
  width: var(--screenReaderWidth, 1px) !important;
  height: var(--screenReaderHeight, 1px) !important;
  padding: var(--screenReaderPadding, 0) !important;
  border: var(--screenReaderBorder, none) !important;

  position: var(--screenReaderPosition, absolute) !important;
  clip: var(--screenReaderClip, rect(1px, 1px, 1px, 1px)) !important;
  overflow: var(--screenReaderOverflow, hidden) !important;
}


.menu{
  --uiMenuCircleSize: var(--menuCircleSize, 6.25rem);
  --uiMenuCircleOffset: var(--menuCircleOffset, 1rem);
  --uiMenuCircleHeight: calc(var(--uiMenuCircleSize) / 2);  
  --uiMenuCircleBackgroundColor: var(--menuCircleBackgroundColor, currentColor);
  --uiMenuHamburgerWidth: var(--menuHamburgerWidth, 1.5rem);
  --uiMenuHamburgerHeight: var(--menuHamburgerHeight, 1.5rem);
  --rButtonPaddingTop: calc(var(--uiMenuCircleHeight) - var(--uiMenuHamburgerHeight) - var(--uiMenuCircleOffset));
  --hamburgerWidth: var(--uiMenuHamburgerWidth);
  --hamburgerHeight: var(--uiMenuHamburgerHeight);
  --hamburgerBackgroundColor: var(--menuHamburgerBackgroundColor, #fff);
  width: 100%;display: flex;flex-direction: column;align-items: flex-end;  position: fixed;top: 20px;left: -20px;z-index: var(--menuZindex, 9998);}
  .menu__nav{box-sizing: border-box; width: 100%; height: 0; transition: opacity .2s ease-out; opacity: 0; display:list-item; align-items: center; z-index: 2;}
  .menu__list{max-width: 600px; margin: 0 auto;width: 100%;text-align: center;overflow-y: auto;-webkit-overflow-scrolling: touch;line-height: 30px;position: relative; top: 25%;}
  .final{width: 100%;text-align: center;line-height: 35px;position: relative; top: 25%;}
  .menu__group{--rLinkTextColor: var(--colorWhite);padding: .5rem 2rem; font-size: 35px;font-weight: 400;font-family: 'Krub', sans-serif;letter-spacing: 3px;}
  .menu__toggle{top:-2px;box-sizing: border-box; width: var(--uiMenuCircleSize);height: var(--uiMenuCircleHeight);flex: none;position: relative;z-index: 0;}
  .menu__toggle::before{content: ""; width: 0.6em;height: 0.6em;font-size: var(--uiMenuCircleSize); background-color: var(--uiMenuCircleBackgroundColor);border-radius: 20%;position: absolute;bottom: 22px;left: calc(50% - .3em);z-index: -1; will-change: width, height;transition: transform .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),width .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),height .25s cubic-bezier(0.04, -0.1, 0.29, 0.98);}
/* styles of hamburger's animation */

  .m-hamburger::before, 
  .m-hamburger::after, 
  .m-hamburger__label{transition-timing-function: ease;transition-duration: .15s;  }
  .m-hamburger::before, 
  .m-hamburger::after{transition-property: transform;}
  .m-hamburger__label{transition-property: transform, opacity;}
  .menu__toggle:focus{outline: var(--menuHaburgerOutlineOWidth, 2px) solid var(--menuHaburgerOutlineColor); outline-offset: var(--menuHaburgerOutlineOffset, 5px);}
  .menu_activated{height: 100%;}
  .menu_activated .menu__nav{flex-grow: 1;opacity: 1;will-change: opacity;transition-duration: .2s;transition-delay: .3s;}
  .menu_activated .menu__toggle::before{width: 100vmax;height: 100vmax;transform: translate3d(-50vh, -50vh, 0) scale(5);transition-duration: 1s;}
  .menu:not(.menu_activated) .menu__list{display: none;}
  .menu_activated .m-hamburger::before{top: 60%;transform: translate3d(0, -50%, 0) rotate(45deg);}

.menu__toggle:focus{
  outline: var(--menuHaburgerOutlineOWidth, 2px) solid var(--menuHaburgerOutlineColor);
  outline-offset: var(--menuHaburgerOutlineOffset, 5px);
}

.menu_activated{
  height: 100%;
}

.menu_activated .menu__nav{
  flex-grow: 1;
  opacity: 1;

  will-change: opacity;
  transition-duration: .2s;
  transition-delay: .3s;
}

.menu_activated .menu__toggle::before{
  width: 100vmax;
  height: 100vmax;
  transform: translate3d(-50vh, -50vh, 0) scale(5);
  transition-duration: 1s;
}

.menu:not(.menu_activated) .menu__list{
  display: none;
}

.menu_activated .m-hamburger::before{
  top: 50%;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}

.menu_activated .m-hamburger::after{
  transform: translate3d(0, -50%, 0) rotate(135deg);
  top: 50%;
}

.menu_activated .m-hamburger__label{transform: rotate(-45deg) translate3d(-.285em,-.3em, 0);opacity: 0;}
:root{
  --colorWhite: #fff;
  --colorMain: #162732;
  --menuCircleBackgroundColor: var(--colorMain);
  --menuHamburgerBackgroundColor: var(--colorWhite);
  --menuHaburgerOutlineColor: var(--colorMain);}
.menu_activated{
  --menuHaburgerOutlineColor: var(--colorWhite);}
.page{max-width: 380px;padding: 1rem;margin: auto;text-align: center;}
.page__name{display: block;font-size: 2rem;font-weight: 700}
.page__hint{display: block;line-height: 1.45;margin-top: 1rem;}
a.menu__link.r-link.inicio{padding-right: 700px;font-family:'Acme', sans-serif ;}
a.menu__link.r-link.rutas{font-family:'Acme', sans-serif ;}
a.menu__link.r-link.current{color: #d3c234!important;}
a.menu__link.r-link:hover{font-size: 40px;color: #d3c234!important}
.foto{margin-top: 50px;margin-bottom: 50px;}
.pie-foto, .pie-foto2{text-align: right; border-right: 8px solid #917d26; padding-right: 10px;margin-top: 20px;}
.pie-foto3{text-align: right; border-right: 8px solid #162732; padding-right: 10px;margin-top: 20px;}
.pie-foto4{text-align: right; border-right: 8px solid #d3c234 ;padding-right: 10px;margin-top: 20px;}
.pie-foto p, .pie-foto3 p{font-size: 13px; padding-bottom: 0px;}
.pie-foto2 p, .pie-foto4 p{color: white; font-size: 13px;padding-bottom: 0px;}
.destacado-2{border-right:10px solid #917d26; margin-top:70px; margin-bottom: 70px; margin-left:100px ; text-align: right; padding-right: 30px;max-width: 600px;}
.destacado-2 p{font-size: 35px; font-weight: 700; line-height: 40px;}
.carousel.slide{margin: 100px 0px;}
.carousel-caption p {font-size:15px;line-height:18px; background-color: #917d26;padding:8px 5px;}
#fragmento{text-align: left; border-left:10px solid #0071bc; padding-left:30px; margin-top: 50px;margin-bottom: 50px;}
#carouselExampleCaptions{margin-top:50px}
#botones-end{ text-align: right;background-color: white!important;position: relative;padding-top: 50px; padding-bottom: 50px;}
#botones-end a{color:#162732!important;text-decoration: none;font-family: 'Acme', sans-serif; font-size: 25px;}
.bg-light{background-color: transparent!important;padding-left: 30px; padding-right: 30px;}
#comic-escritorio{display:block;z-index: 100;position: relative;}
#comic-cel{display: none;}
.info-compu{display: block;}
.info-cel{display: none;}
.menu__list .r-list{overflow: hidden;}
.mapas{margin-top: 150px;z-index: 100;background-color: white;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {color: white!important;background-color: #917d26;border-color: #917d26 #917d26 #fff;}
a#contact-tab.nav-link{color: #162732;font-weight: 600;}
.vertical-menu {width: 220px;position: fixed;top: 25%;display: none; }
.vertical-menu-2 {width: 200px;position: fixed;top: 15%;display: none;}
.vertical-menu a, .vertical-menu-2 a{background-color: #eee;color: #162732;display: block;padding: 12px 15px;text-decoration: none;}
.vertical-menu a:hover, .vertical-menu-2 a:hover {background-color: #162732;color: white;}
.vertical-menu a.active, .vertical-menu-2 a.active {background-color: #917d26;color: white;}
#cita{max-width: 500px; margin: 0px auto;padding: 50px 0px;}

@media screen and (max-width: 800px){
.header img{width: 50%;}
h1{font-size: 40px; line-height: 45px;}
h2{font-size:45px;line-height: 50px;}
h3{font-size: 100px;}
h5{font-size:20px;line-height: 30px;}
.container.titulo{margin-left: 30px;}
.container.titulo p{font-size:15px; line-height: 20px;}
#logo img{width: 100%;}
#logo-2 img{width: 85%;padding-top:30px; padding-left: 55px;}
#logo-3 img{width: 70%; padding-left: 90px;}
.menu__group{font-size: 25px;padding-bottom: 3px;}
a.menu__link.r-link.inicio{padding-right: 0px;}
a.menu__link.r-link:hover{font-size: 30px;color: #d3c234!important}
li.menu__group{display: inline-grid;}
#tarjeta-oscuro{margin-bottom: 30px; width: auto;}
#tarjeta-claro{margin-bottom: 30px; width: auto;}
.texto {padding-left: 40px;padding-right: 40px;}
.destacado, .destacado-2{margin-left: 0px;}
.info-compu{display: none;}
.info-cel{display: block;}
#comic-escritorio{display:none;}
#comic-cel{display: block;}
.destacado p{font-size: 30px;line-height: 35px;}
.menu_activated {margin-left: 25px;}
#uno{background-image: url(../img/home.png);background-attachment:scroll;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
#dos{background-image: url(../img/intro.png);background-attachment:scroll;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
#tres{background-image: url(../img/cap-1.png);background-attachment:scroll;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
#cuatro{background-image: url(../img/cap-2.png);background-attachment:scroll;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
#cinco{background-image: url(../img/cap-3.png);background-attachment:scroll;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
#infografia{margin-top: 70px; margin-bottom:70px; background-size: cover;padding: 80px 0px 25px 0px;background-attachment:scroll;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;}
#uno p{width: 200px; margin-right: 0px;}
.m-hamburger {left:0px}
.menu__toggle{right: -40px;}
.vertical-menu, .vertical-menu-2{display: none;}
}