@font-face {
    font-family: 'Abhaya Libre';
    src: url('../fonts/AbhayaLibre-Bold.woff2') format('woff2'),
        url('../fonts/AbhayaLibre-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('../fonts/AbhayaLibre-Medium.woff2') format('woff2'),
        url('../fonts/AbhayaLibre-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('../fonts/AbhayaLibre-ExtraBold.woff2') format('woff2'),
        url('../fonts/AbhayaLibre-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('../fonts/AbhayaLibre-Regular.woff2') format('woff2'),
        url('../fonts/AbhayaLibre-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('../fonts/AbhayaLibre-SemiBold.woff2') format('woff2'),
        url('../fonts/AbhayaLibre-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-BlackItalic.woff2') format('woff2'),
        url('../fonts/Poppins-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Black.woff2') format('woff2'),
        url('../fonts/Poppins-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-BoldItalic.woff2') format('woff2'),
        url('../fonts/Poppins-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBold.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraLight.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
html{scroll-behavior: smooth;}
body{font-family: 'Poppins';}

h1,h2,h3,h4,h5,h6{
    font-family: 'Poppins';
    font-weight: bold;
    text-transform: uppercase;}

p{font-size: 16px;
font-family: 'Merriweather', serif;;
font-weight:normal;
max-width: 800px;
margin: 0 auto;}

.container-fluid.home{
    width: 100%;
    height: 100vh;
    background-image: url(../img/home.png);
    background-size: cover;}

.container-fluid.seccion1{
    width: 100%;
    height: 100vh;
    background-image: url(../img/portada-2.png);
    background-size: cover;}

.container-fluid.seccion2{
    width: 100%;
    height: 100vh;
    background-image: url(../img/portada-3.png);
    background-size: cover;}

.title{text-align: right;
    margin:180px 80px;}


.title h1{
    color:white;
    text-transform: uppercase;
    font-size:4.5rem;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);}

.title h2{
    color:white;
    text-transform: uppercase;
    font-size:4rem;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);}

.text-content{
    padding: 60px 0;
    margin-top: 50px;}

.text-content h2{
    font-size: 30px;
    color: rgb(168, 84, 150);
    margin-top:100px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;}

.text-content h3{
    font-size: 22px;
    color: rgb(168, 84, 150);
    margin: 50px auto;
    max-width: 800px;}

 .text-content p{
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 30px; 
    font-family: 'Merriweather', serif; ; 
}

.container-fluid.section-nav{
    height: 100vh;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: center;}

.container-fluid.section-nav a{
    color:black;
    text-decoration:none;
}

.container-fluid.section-nav .row{
   height: 50vh;
   overflow: hidden;}

.hover-nav.disable{
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter: gray;
}

.hover-nav:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
    transition: 1s;
    cursor: pointer;
}

.hover-nav:hover h3{
    color:#a85496;
    transform: scale(1.2);
    transition: 1s;
}

a{color:#!important;
font-weight: bold;
font-family: 'Poppins'}

.credits{text-align: center; padding: 60px;
margin-top: 50px;}

.credits p{max-width: 800px;
margin: 0 auto;
font-size: 15px;}

.disclaimer{text-align: center; padding: 60px;}

.disclaimer p{max-width: 800px;
margin: 0 auto;
font-size: 14px;}

.text-description{padding-left: 50px!important;
padding-right:50px!important;
padding-top:30px}

.text-description h3{
font-size:22px;
color:#165485;
padding-bottom: 30px;}

.text-description p{font-size:15px;}

.footer{background-color: #165485;
padding-top: 40px;
padding-bottom: 30px;}

.text-footer{max-width: 800px;
margin:0 auto}

.footer p{color: white;
font-family: 'Poppins';
font-weight: 400;}

.logo{max-width: 800px;
margin:0 110px}

.logo img{padding-right: 30px;
padding: 10px;}

.logo2 img{padding-left:10px;
padding-top: 10px;}

#boton-nav{
position:fixed;
top:35px;
left:35px;
border-radius: 5px;
padding: 3px;
z-index: 100;
background-color:#a85496;
cursor: pointer;}


#shownav{
position: fixed;
top:0;
left:0;
width: auto;
height: 100vh;
background-color:white;}

#container-nav{
width: 100%;
height: 100vh;
background-color: rgb(0,0,0, 0.6);
position: fixed;
left: 0;
top:0; 
display: none;
z-index: 1000;}

#container-nav-option{
display: table;
height: 100vh;
width: 400px;
text-align: center;}

#container-nav-option li{
list-style: none; 
margin-bottom: 5px;
font-family: 'Poppins';
font-weight: 200;
font-size: 23px;}

#container-nav-option a {color:black;}

#container-nav-option a:hover {color:#a85496;}

#container-nav-option h2{
font-family: 'Poppins';
color:#368eb0;
font-weight: 800;
font-size: 35px}

#container-nav-option ul{
margin-left:30px;
margin-top: 160px;
margin-bottom: 30px;
margin-right: 30px;
padding-left: 0px}

.final-menu{
background-color: #165485;
margin: 0px!important;
height: 135px;
padding-left: 0px}

.regresar{
margin-top: 132px;
padding-top: 30px;
font-weight: 300!important;
font-size:17px!important;
color: white!important;}

#close-nav{width:100%;
    cursor: pointer;}

.current{
color:#a85496!important;
font-weight: bold!important;
font-family: 'Poppins';
font-size: 35px;}

.rol{color:#a85496;
font-family: 'Poppins';
font-size: 16px;
font-weight: 700;}

.header{
    background-color: #368EB0;
    color:White;
    text-align: center;
    line-height: 40px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 400;
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: bold;}

.chart-container{
    padding:25px 0;}

.grafica {
font-family:'Poppins';
margin-top: 50px;
margin-bottom: 50px;}

.reincorporacion{font-family:'Poppins';
font-style: italic;
font-size:4rem}

.carousel-item {
    height: 100vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    background-size: cover;
    background-color:#368eb0;
  }
  #chart-bar{width:80%;height:90%;position:absolute;
font-size:12px;
font-weight: bold;}
  .bar{fill:#165485}

  .bar:hover{fill:#A85496;
    transition:1s;
    cursor:pointer}  

  #graph-bar{height:500px}

  .carousel-caption {
      padding-bottom: 80px;
      position: absolute;
      top: 0;
      z-index: 10;  
      color:white;
      text-align: center;
      max-width: 1000px;
      margin: 0 auto;
      text-align: left;
      height: 100vh;
      overflow: scroll;
  }

  .caption-padding{
    padding: 50px 80px;
  }

.carousel-caption p {margin-bottom: 25px;
line-height: 28px;}

.carousel-caption h2 {margin-bottom: 35px;
margin-top: 50px;
max-width: 800px;
margin-left: auto;
margin-right: auto;}

.carousel-caption h3 {margin-bottom: 35px;
    margin-top: 80px;
    font-size: 23px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;}

.carousel-caption img {margin-bottom: 60px;
    margin-top: 35px;
    margin-left: 80px;
    width: 80%;}

  
  .controls{
      background-color:#368eb0!important;
  }
  
.slide{padding-left: 0px!important;
    padding-right: 0px!important;}


.aclaracion{margin:30px}
.aclaracion p{font-size: 18px;
    margin-bottom: 25px;
    line-height: 30px; 
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 600;}   

    .appear-mobile{display: none;}

.footer .row.w-100.align-items-center{
    text-align: center;
}

.destacado p{font-family: 'Poppins';
    font-weight: bold;
    font-size: 23px;
    max-width: 500px;
    margin-left:auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    line-height: 32px;}

.embed-responsive {
        margin-bottom: 50px;
        margin-top: 50px}
    

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

    .container-fluid.home{
        width: 100%;
        height: 100vh;
        background-image: url(../img/home-cel.png);
        background-size: cover;}

        .embed-responsive{
            overflow: visible;
            height: 100vh;
        }

        .embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            border: 0;
        }
    
    .title{text-align: center;
        margin:280px 50px;}
        
    .title h1{
        color:white;
        text-transform: uppercase;
        font-size:2rem;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
        text-align: left;}

    .reincorporacion{font-family:'Poppins';
        font-style: italic;
        font-size:2rem}

      

    .text-content{
        padding: 60px 50px;
        margin-top: 50px;}

    .remove-mobile{display: none;}
    .appear-mobile{display: block;}

    .caption-padding {
        padding: 0;
    }
  
}



@media (max-width: 768px){

    .container-fluid.section-nav .row{
        height: auto;
        overflow: hidden;}

    .container-fluid.section-nav {
            height: auto;
        }
    
        .text-description {
         padding-bottom: 30px;
        }

        .credits {
            text-align: center;
            padding: 30px;
            margin-top: 0;}

    .footer .row.w-75.align-items-center{
        width: 100%!important;
        margin-left: 0;
    }
}