:root{
    --main_title: 22px;   
    --second-title: 18px;
    --medium-title: 16px;
    --small-title: 14px;
    --details: 13px;
    --small-details: 12px;
    --section_text: 16px;
    --title: 30px;  
    --body_text: 18px;     
      
   
     
    --black: #181818;
    --white:#FFFFFF;
    --main:#D00000;
    --secondary1:#00dcce;
    --secondary2: #f8b824;    
    --secondary3: #af5eff;
    --grey:#898989;
    --light: #F6F6F6;   
     
    --Bold: "SourceSansPro-Bold";
    --SemiBold:"SourceSansPro-Semibold";
    --SemiBoldIt:"SourceSansPro-SemiboldIt";
    --Regular:"SourceSansPro-Regular";
    --Italic: "SourceSansPro-It";
    --ExtraLight:"SourceSansPro-ExtraLight";  
    --LightIt:"SourceSansPro-LightIt";
    --Light:"SourceSansPro-Light";

}

html{
    font-size: 62.5%;
    box-sizing: border-box; 
}

*, *:before, *:after {
    box-sizing: inherit;
  }
  
body{
    font-size: 16px; /* 1rem = 10px*/
    font-family: var(--Regular);
    color: var(--black);    
    background-color: #fff;
}
h1, h2, h3, h5{    
    font-family: var(--Bold);
}

h1{
    font-size: var(--main_title);      
}

h1 > span{
    font-size: var(--main_title);
}
h2{
    font-size: var(--second-title);
}


h3{
    font-size: var(--small-title);
}

h5{
 color: var(--main);
 font-size: var(--section_text);
 
}
.container{
    max-width: 1120px;
}
.contenedor{
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
}
@media (min-width: 768px) {
    .contenedor{
        max-width: 170rem;
        margin-right: auto;
        margin-left: auto;
    }
}
a{
    text-decoration: none;
}
p::selection {
    background: var(--main);
      color: var(--white)
  }
img{
    max-width: 100%;
}

/*Utilidades*/

.bg-1{
    background-color: var(--secondary1);
}
.bg-2{
    background-color: var(--secondary2);
}
@media (min-width: 768px) {
    .bg-1{
        padding: 5rem;
    }
    .bg-2{
        padding: 5rem;
    }  
}

.card{
    border: none;
    background-color: transparent;
    margin-bottom: 1rem;
}
@media (max-width: 768px) {
    .card{
        margin-top: 2rem;
    }
}

.card-body{
    padding: 1rem 0rem 0rem;
}
.card-list{
    border-top: 1px dashed var(--grey);
}

.card-title{
    text-align: start;    
    color: var(--black);
}
.card-title:hover{
    color: var(--main);
}

h3 .card-title{
    font-size: var(--second-title);  
}
.card-text{
    color: var(--black);
    font-size: var(--small-title);
}
.card-text:last-child{
    margin-bottom: 1rem;
}

.card-details{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
    padding-top: 0px;
    gap: 1rem;
    flex-wrap: wrap;
}
.card-details .autor, 
.date {
    color: var(--grey);
    font-size: var(--small-details);
}
.card-details .autor{
    font-family: var(--SemiBold);
    color: var(--grey);
    margin-bottom: 0px;
}

.card-details .date {
    color: var(--grey);    
    font-family: var(--Regular);
}
.card-details .date::before {
    content: "|";
    padding: 0 .5rem;
     font-family: var(--Light);
       font-weight: 300;
  }
.card-text a{
    color: var(--main);
}


/*Navegación Superior nav-top*/
.nav-top{
    padding: 0.5rem 0;
}
@media (min-width: 768px) {
    .nav-top .container{
        display: flex;
        justify-content: end;
    }
}
.nav-top-options{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.nav-top-options .option{
    color: var(--black);
    font-weight: bold;
    font-size: var(--medium-title);
    padding: 0 1rem;
}
.nav-top-options  .active{
    color: var(--main);
}

@media (min-width: 990px) {
    .nav-top-options .option, 
    .active{
        font-family: var(--Bold);
        font-size: var(--medium-title);
    }
    
}
.nav-top-options .option:hover{
    color: var(--main);
}

.nav-top input{
    font-size: var(--small-title);
    border-radius: 2.9rem;
    height: 3.7rem;
    padding: 1.9rem;
    font-family: var(--Italic);
}
@media (min-width: 990px) {
    .nav-top input{
        font-size: var(--small-details);
        font-family: var(--Italic);
        width: 25rem;
        border-radius: 2.9rem;
        height: 2.7rem;
        padding: 0.9rem;
    }
}


.btn-outline{
    color: #a1344e;
    border: 1px solid #a1344e;
}
.btn-outline:hover{
    color: var(--white);
    border: 1px solid #a1344e;
    background-color: var(--main);
}

/*header*/
.header-contenedor{
    padding-top: 1rem;    
}
.logo-buscador{
    display: flex;
    justify-content: space-between;
    gap:2rem;
    align-items: center;
}
.header{
    height: 9rem;
    background: var(--white);
}
.header-logo img{
    width: 25rem;    
}
@media (min-width: 768px) {
    .header-logo {
        text-align: center;
    }
}
.header-social-media{
    display: flex;
    justify-content: start;
    gap: 0.5rem;
}
.iconos img{
    width: 2.4rem;
    height: 2.4rem;
}
.header-logo-network{
    width: 25rem;
    align-items: end;
}

.btn-comunidad, .btn-comunidad:hover {
    background-color: var(--white);
    color: var(--main);
    font-family: var(--SemiBold);
    border-radius: 6px;
    border: none;
    border: 1px solid var(--main);
    font-size: var(--section_text);
    padding: 5px 10px;
}

.comunidad{
display: flex;
justify-content: end;
align-items: center;
gap: 2rem;
}

/*Menu*/
.nav-item a{
    font-size: var(--details);
}
@media (min-width: 768px) {
    .menu-main{
        background-color: var(--black);
    }
    .navbar-light .navbar-nav .nav-link{
        color: var(--white);
    }
   
    .nav-item:hover{
        background-color: var(--main);
        transition: 0.2s ease-in-out;
        
    }

    .navbar-light .navbar-nav .nav-link:hover{
        color: var(--black);        
    }
}
@media (max-width: 920px) {
    .container-menu{
        background-color: var(--black);
    }
}

.seccion-blue, .seccion-purpura, .seccion-red, .seccion-yellow,.fijo-red, .fijo-blue{
    color: var(--white);
    display: block;
    padding: .5rem 1rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    text-decoration: none;  
    font-family: var(--Bold); 
}

.seccion-blue:hover{
    color: var(--black);
    background-color: var(--secondary1);
    transition: color .15s ease-in-out, background-color .15s ease-in-out,border-color .15s ease-in-out;   
}
.seccion-purpura:hover{
    color: var(--black);
    background-color: var(--secondary3);
}
.seccion-red:hover{
    color: var(--white);
    background-color: var(--main);
}
.seccion-yellow:hover{
    color: var(--black);
    background-color: var(--secondary2);
}
.fijo-red{
    color: var(--white);
    background-color: var(--main);    
}
.fijo-red:hover{
    background-color: var(--black);
    transition: color .15s ease-in-out, background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.fijo-blue{
    color: var(--black);
    background-color: var(--secondary2);
    
}
.fijo-blue:hover{
    color: var(--secondary2);
    background-color: var(--black);
    transition: color .15s ease-in-out, background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.nav-top-internal{
    border-top: 1px solid var(--grey);
    padding-top: 2rem;
    margin-top: 2rem;
}
.nav-top-internal a{
 color: var(--black);
 font-weight: bold;
}
.nav-top-internal .active{
    color: var(--main);
}

.menu-main .header-logo img{
    width: 15rem;
}
@media (max-width: 1023px) {
    .menu-main{
        background-color: var(--white);        
        box-shadow: 0px 3px 5px 0px rgba(137,137,137,0.75);
        -webkit-box-shadow: 0px 3px 5px 0px rgba(137,137,137,0.75);
        -moz-box-shadow: 0px 3px 5px 0px rgba(137,137,137,0.75);
        
    }
    .menu-main .search img{
        width: 3rem;
    }
    .header-logo{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem;
    }
}
@media (min-width: 1024px) {
    .menu-main .header-logo img{
        width: 20rem;
        text-align: start;
    } 
}
.menu-main-options{
    display: flex;
    justify-content: space-between;
}
.dropdown-menu a{
    font-size: 1.5rem;
}

  .menu-options {
    position: relative;
    display: inline-block;    
  }
  @media (min-width: 990px) {
    .menu-options {        
        z-index: 100;
      }
  }

  .dropup-content {
    display: none;
    position: absolute;
    background-color: var(--black);
    min-width: 160px;
    z-index: 1;    
  }
  .menu-options ul{
      list-style: none;
      padding-left: 0;
  }
 
  .dropup-content a {
    color: var(--white);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    
  }
  
  .dropup-content a:hover {
      background-color: var(--main);
     color: var(--white);
     
    }
.dropup-yellow a:hover {
    background-color: var(--secondary2);
    color: var(--black);
}

@media(min-width: 1024px){
  .menu-options:hover .dropup-content {
    display: block;
  }
}

  .dropup-purpura a:hover {
    background-color: var(--secondary3);
    color: var(--black);
}

  /*.dropup:hover .dropbtn {
    background-color: var(--main);  
    transition: 0.2s ease-in-out;
  }*/


  /*footer*/

.footer-content{
    border-right: 2px solid var(--grey);
}
.footer-content:last-child{
    border: none;
}
.footer-logo{
    border-bottom: 1px solid var(--black);
}
.footer-logo img{
    max-width: 220px;
    margin-bottom: 1rem;
}
.footer-logo-network{
    max-width: 100%;
}
.footer-logo-network img{
    max-width: 85%;
}
.footer-countries a{
    background-color: var(--main);
    border: 1px solid var(--main);
    font-size: var(--small-title);
    font-family: var(--Bold);
    border: 1px solid var(--main);
    padding: 5px 10px; 
    border-radius:7%;
    color: var(--white);
}

.footer-countries a:hover{
    background-color: var(--white);
    border: 1px solid var(--main);
    color: var(--main);
}
.footer-countries{
    display: flex;
    justify-content: start;
    align-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    margin-right: 2rem;
}

.footer-categories h2{
    color: var(--black);
    text-transform: uppercase;
}
.footer-categories h3{
    font-size: var(--medium-title);
}
.rights h4{
    font-weight: 900;
    font-size: var(--small-title);
}   

.footer-category h3{
    color: var(--black);
    margin: 2.5rem 0;

}

.footer-social-media{
    display: flex;
    justify-content: start;
    gap: 2rem;
    border-bottom: 1px solid var(--black);
    padding-bottom: 3rem;
}
.footer-newsletter{
    font-weight: 900;
}
.footer-newsletter h3{
    text-transform: uppercase;
}

.footer-newsletter .form-control-lg{
    height: 4rem;
    margin: 1rem 0;
}
.footer-newsletter button{
    width: 100%;
}



/*Nueva busqueda dentro de la pagina*/

.search-container{display: flex; justify-content: flex-start; position: fixed; z-index: 98; width:100%; top:-100px;  transition: 0.5s;}
.search-container--open{top:60px;}

.search-container .search-area { 
  padding:35px 0;
  width:100%;
  background-color: #e9e9e9;
  display: flex;
  justify-content: center;
}

.search-container .search-area .btn{
    display: none;
}

.search-container .search-area form{
    margin-right:20px; width:80%;
}

.search-container .search-area .closebtn{
    font-size: 36px; 
    font-weight: 700; 
    color: #333; 
    cursor: pointer;
    position: static; 
    line-height: normal;}


@media(min-width: 768px){
  .search-container{
      top:-165px; 
      position: absolute;
    }
  .search-container--open{
      top:60px;
    }
  .search-container .search-area { 
      padding: 120px 0;
    }
}
@media(min-width: 1024px){
  .search-area .form-control{ 
      font-size: 1.8rem;
    }
  .search-container--open{
      top:15%;
    }
  .search-container .search-area form .form-group{
      width:90%;
    }
}

/* Menu con submenu */
.nav-submenu {  
    display: none;  
    position: absolute;  
    /*left: 100%;  */
    top: 0;  
    background: var(--black);  
    padding: 10px;  
    width: 250px;}
@media screen and (min-width: 769px){  
.nav-submenu{    
    /*transform: translate(-60%, 10%); */
    top: 100%;  }
}
@media screen and (min-width: 792px){
.nav-item:hover .nav-submenu {    
    display: block;       
}
}
.nav-submenu li {  
    list-style: none;
}
.nav-submenu li a {  
    display: block;  
    padding: 9px 10px;  
    color: var(--white);  
    font-family: var(--Regular);  
    font-size: var(--small-title);}
.nav-submenu-mobile-toggle {  
    display: none;
}
@media screen and (max-width: 991px) {
.nav-submenu-mobile-toggle {    
    display: block;    
    position: absolute;   
    top: 0;    right: 0;   
    background: none;   
    outline: none;   
    border: none;       
  }
.nav-submenu--active {    
    display: block;    
    position: static;    
    padding: 0;    
    margin-left: -7px;   
     width: calc(100% + 14px); 
 }
.nav-submenu li {border-bottom: 1px solid #ccc;   
     padding-left: 20px; 
     }
.nav-submenu li a {    
    padding: 9px 10px;  
}
}
@media screen and (max-height: 770px) and (min-width: 992px){
  .nav-submenu-mobile-toggle{   
       height: 36px;
     }  
}