@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
html {
    box-sizing: border-box;
}
@font-face {
    font-family: 'Roboto Slab', serif;
    src: url('/fonts/RobotoSlab-Black.woff') format('truetype'), url() format('woff');
}
@font-face {
    font-family: 'RobotoSlab-Black', serif;
    src: url('/fonts/RobotoSlab-Black.woff') format('truetype'), url() format('woff');
    font-weight: 900;
}
@font-face {
    font-family: "RobotoSlab-Bold";
    src: url('/fonts/RobotoSlab-Bold.woff') format('truetype'), url() format('woff');
    font-weight: 700;
}
@font-face {
    font-family: "RobotoSlab-SemiBold";
    src: url('/fonts/RobotoSlab-SemiBold.woff') format('truetype'), url() format('woff');
}
@font-face {
    font-family: "RobotoSlab-Light";
    src: url('/fonts/RobotoSlab-Light.woff') format('truetype'), url() format('woff');
     font-weight: 300;
}
@font-face {
   font-family:'Roboto Slab', serif;
    src: url('/fonts/RobotoSlab-Regular.woff') format('truetype'), url() format('woff');
     font-weight: 400;
}
@font-face {
    font-family: "RobotoSlab-Thin";
    src: url('/fonts/RobotoSlab-Thin.woff') format('truetype'), url() format('woff');
}


*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family:'Roboto Slab', serif;
    line-height: 1.5;
    overflow-x: hidden; /* Hide horizontal scrollbar */
    width: 100%;
    background-color: #f3f6f5;
    font-weight: 400;
}


h1 {
    color: #000000;
    font-family:'Roboto Slab', serif;
    font-weight: 900;
    font-size: 6vw;
    
}

h2{
    color: #000000;
    font-family:'Roboto Slab', serif;
    font-weight: 700;
    font-size: 2vw;
}

h6 {
    font-weight: 100;
    color: #9a9998;
}

p {
    color: #000000;
    font-size: 1em;
}
strong{
    font-family:'Roboto Slab', serif;
    font-weight: 700;

}

.titulo_indicador{
    border-bottom: 6px solid black;
    padding-top: 2.3vw;
    margin-right: 1vw;
}

.titulo_indicador h1{
    margin-top: -1.6vw;
}

.buttonfuente{
    background: none;
    border: 1px solid black;
    border-radius: 20px;
    padding: 0.1vw 1vw;
    font-size: 1vw;
    color: #000000;
}

.buttonfuente img{
    padding: 0 0.3vw 0 0;
    width: 1.1vw;
}


.screen_year i{
    background-color: #f3decda3;
    border-radius: 100px;
    padding: 1vw;
    position: absolute;
    bottom: 6vw;
    right: 2vw;
}

.ampliar img{
    width: 1.4vw;   
}
.wrapper {
    margin: 0 auto;
    padding: 0 10% 50px;
    width: 100%;
}

article {
    position: relative;
    max-width: 90%;
    margin: 0 auto;
}

.timeline__nav {
    position: fixed;
    z-index: 99;
    top: 0;
    -webkit-transition: top 0.3s ease-out;
    transition: top 0.3s ease-out;   
}
.timeline__nav ul {
    list-style: none;
    list-style-position: inside;
}
.timeline__nav ul li {
    background-color: black;
    margin: 1vw 0;
    list-style-type: none;
    color: #bfc1c3;
    border-radius: 100px;
    padding: 1.5vw 0vw;
    text-align: center;
    font-size: 1vw;
     font-family:'Roboto Slab', serif;
    font-weight: 300;
    cursor: pointer;
}
.timeline__nav ul li span{
    background-color: black;
    margin: 1vw 0;
    list-style-type: none;
    color: #bfc1c3;
    border-radius: 100px;
    padding: 1.5vw 0vw;
    text-align: center;
    font-size: 1vw;
     font-family:'Roboto Slab', serif;
    font-weight: 300;
    cursor: pointer;
}


.timeline__nav ul li.active{
    color: #ffffff;
    font-family:'Roboto Slab', serif;
    font-weight: 400;
    background-color:#f4c59b;
    padding: 1.5vw 0;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-box-shadow: -5px -4px 10px -19px rgba(181,85,21,1);
    -moz-box-shadow: -5px -4px 30px -19px rgba(181,85,21,1);
    box-shadow: -5px -4px 10px -19px rgba(181,85,21,1);
}


.timeline__nav ul li.active span{
    color: #ffffff;
    font-family:'Roboto Slab', serif;
    font-weight: 400;
    background-color:#f4c59b;
    padding: 1.5vw 0;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-box-shadow: -5px -4px 10px -19px rgba(181,85,21,1);
    -moz-box-shadow: -5px -4px 30px -19px rgba(181,85,21,1);
    box-shadow: -5px -4px 10px -19px rgba(181,85,21,1);
}



.timeline__nav ul li:hover {
    color: #ffffff;
}

.year{
    color: #000000;
    background-image: url('/imagenes/bg_year2.png');
    background-repeat: no-repeat;
    padding: 0 0 0.6vw 0;
}

.intro{
    background-color: #f3decd;

}
.hdd{
    font-size: 1vw;
    padding: 0.6vw 2.8vw;
    border: 1px solid black;
    border-radius: 40px;
    margin: 5vw 0 0 2vw;   
    text-align: center;
}

.webdane{
    font-size: 1vw;
    padding: 0.6vw 2.8vw;
    border: 1px solid black;
    border-radius: 40px; 
    text-align: center;
    background-color: #000000;
    color: #ffffff;
    border: 0.4px solid white;
}

.parrafo_intro{
    font-family: RobotoSlab-Light;
    font-size: 1vw;
    margin: 2vw;   
}

.inicio {
    margin: 4vw 0;
}

.right {
    text-align: right;
}


.hab {
    background-color: #b92454;
    color: #ffffff;
    font-size: 4em;
    font-weight: 100;
    text-align: center;
    padding: 0px 10px;
}

#volver {
    cursor: pointer;
    color: #000000;
    position: fixed;
    bottom: 1em;
    right: 1em;
    background-color: #f1dccb;
    border-radius: 50px;
    padding: 0.4em;
}

a:hover {
    color: #000000 !important;
    text-decoration: none;
     font-family:'Roboto Slab', serif;
    font-weight: 400;
}

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

    .wrapper {
        margin: 0 auto;
        padding-bottom: 0;
        padding-left: 20%;
        padding-right: 0%;
        width: 80%;
    }

    .logodane img{
        width: 50%;
        margin-left: -14px;
    } 

    .intro{
        margin: 2vw;
    }

    .hdd{
        font-size: 2.6vw;
        width: 80%;
        text-align: center;
    }

    .titulo_indicador h2{
        font-size: 3.4vw;

    } 
    .parrafo_intro{
        font-size: 3vw;

    } 

    .article{
        max-width: 100%;
    }

    .timeline__nav{
        top: 50px!important;
        left: 0px;
    }

    .timeline__nav ul{
        margin-left: -10px;
    }
    .timeline__nav ul li{
        background-color: black;
        margin:  3vw 0;
        list-style-type: none;
        color: #bfc1c3;
        border-radius: 100px;
        padding: 4vw 0vw;
        text-align: center;
         font-family:'Roboto Slab', serif;
        font-weight: 300;
        cursor: pointer;
    }

    .timeline__nav ul li span{
        background-color: black;
        margin:  3vw 0;
        list-style-type: none;
        color: #bfc1c3;
        border-radius: 100px;
        padding: 4vw 0vw;
        text-align: center;
        font-size: 3vw;
        font-family:'Roboto Slab', serif;
        font-weight: 300;
        cursor: pointer;
    }


    .timeline__nav ul li.active{
        color: #ffffff;
        font-family:'Roboto Slab', serif;
        font-weight: 400;
        background-color:#f4c59b;
        padding: 4vw 0vw;
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        -webkit-box-shadow: -5px -4px 10px -19px rgba(181,85,21,1);
        -moz-box-shadow: -5px -4px 30px -19px rgba(181,85,21,1);
        box-shadow: -5px -4px 10px -19px rgba(181,85,21,1);
    }

    .screen_year img{
        width: 100%;

    }

    .screen_year i {
        background-color: #f3decda3;
        border-radius: 100px;
        padding: 1vw 1.1vw;
        position: absolute;
        bottom: 5vw;
        right: 4vw;
        width: 8vw;

    }

    .buttonfuente{
        width: 50%;
        font-size: 2vw;
        padding: 1vw;
    }

    .buttonfuente img{
        width: 4vw;
        padding-right: 1vw;
    }

    
    
    .inicio{
        margin: 10vw 0 0 0;
    }

}

@media only screen and (min-width: 768px) {
    .wrapper {
        width: 90%;
    }
}

.justify-content-between {
    background-color: #000000;
    padding: 1vw 0 0.3vw;
}

}