@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');

h1,h2 {
font-family: 'PT Sans', sans-serif;
font-weight: 700;}

h3,h4,h5,h6{
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 700;}

p{
font-family: 'Roboto Slab', serif;
font-size: 18px;
font-weight: 300;
line-height: 36px;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%792920' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")!important;
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%792920' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")!important;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 50px!important;
    height: 50px!important;
    background: no-repeat 50%/100% 100%;
}

.tooltip.show {
    opacity: 1;
}

.text a {
    color: #007bff!important;}

.tooltip-inner {
    max-width: 100%!important;
    padding: .25rem .5rem;
    color: #fff;
    text-align: center;
    background-color: black!important;
    border-radius: .25rem;
}
.home{
width: 100%;
height: 100vh;
background-image: url(../img/Foto-paramo.jpg);
background-size: cover;
text-align: center;}

.homeindigena{
width: 100%;
height: 100vh;
background-image: url(../img/resguardo-panoramica.jpg);
background-size: cover;
text-align: center;}

.homeresistencia{
width: 100%;
height: 100vh;
background-image: url(../img/caloto.jpg);
background-size: cover;
text-align: center;}
        
    

.titles{
position: absolute;
width: 100%;
bottom: 40%;
text-align: center;
color:#fff;
text-shadow: 2px 2px 2px #211915;}

.titles h1{font-size:4.5rem;}

.titles h2{font-size:4rem;}

.text{
max-width: 750px;
margin:50px  auto 50px}

.text h2{
    color:#792920 ;
}

.hometiempo{
width: 100%; 
height: 100vh;
background-image: url(../img/paramo8.jpg);
background-size: cover;
text-align: center;}

.sumario{
font-family: 'PT Sans', sans-serif;
margin-bottom:50px;
font-size: 22px;
text-align: center;
font-style: italic;}

.linea{border-top: 3px solid black!important;}

.text-margin{
margin-top: 50px;
margin-bottom: 50px;}

.card{text-align: center;}

.card-body{background-color:#515917}

.card:hover{cursor: pointer;}

.card: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;}

.card:hover>.card-body{background-color:#792920;
transition:.8s}

.text-button{margin-bottom:50px}

.text-button a{color:white}

#boton-nav{
position:fixed;
top:35px;
left:35px;
background-color:#792920;
border-radius: 5px;
padding: 3px;}


#shownav{
position: fixed;
top:0;
left:0;
width: 400px;
height: 100vh;
background-color:#792920;}

#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-cell;
vertical-align: middle;
height: 100vh;
width: 400px;
text-align: center;}

#container-nav-option li{
list-style: none; 
margin-bottom: 27px;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 18px;}

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

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

#container-nav-option h3{color:#555}

#container-nav-option ul{margin:30px}

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

#close-nav:hover{color:#C9AE81;}

.frases{text-align:right;
margin:100px 100px;
color:#515917}

.frases h4{color:#792920}

.text h2{text-transform:uppercase}

.card-img-top{height: 232.2px;}

.mapa-cauca{width:40%}

@media (max-width:900px){
    .titles h1{font-size:2.5rem;}

    .titles h2{font-size:2rem;}

    .mapa-cauca{width:100%}

    #shownav{width:100%}

    .frases{margin:0}

    p{font-family: 'PT Sans Narrow', sans-serif;}
}