/*
:root{
    --color-primary:#28d2c7;
    --color-secondary:#5850ec;
    --color-gray:#f5f6fa;
    --color-gray-2:#dee2e6;
    --color-black:#333333;
    --color-white:#ffffff;
    --transition:.3s all;
    --linear-gradient:linear-gradient(100deg, rgba(40,210,199,1) 53%, rgba(88,80,236,1) 97%);
}
*/

/**/
/*
@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
    font-family:'Roboto',sans-serif;
}
*/
nav{
    width:100%;
    display:block;
}
.nav-title{
    display:flex;
    justify-content:center;
    align-items:stretch;
}
.nav-title img{
    width:175px;
    height:40px;
    margin-top:1.5rem;
    margin-bottom:1rem;
}
.nav-title a{
    text-decoration:none;
    color:var(--color-secondary);
    font-weight:600;
}
.nav-title a span{
    display:inline-block;
    background:#cbfe02;
    padding:0.1rem 0.3rem;
    font-size:0.7rem;
    border-radius:50%;
}
.nav-menu{ }

/**/
/*
.nav-search{
    padding-bottom:1rem;
}
.container-search_{
    width:auto;
    display:flex;

    padding:0.4rem 2.2rem 0.4rem 0.7rem;
    border-radius:35px;
    border:2px solid #eee;
    position:relative;
}
.container-search_>input{
    width:100%;
    border:none;
    outline:none;
    color:#808b96;
}
.container-search_>a{
    text-decoration:none;
    position:absolute;
    display:flex;
    top:2.8px;
    right:0.2rem;
    padding:0.5rem 0.3rem 0.5rem 0.3rem;
    background:#cbfe02;
    border-radius:50%;
    color:#333;
}
*/
/**/
.container-naview .nav-container{
    display:flex;
    justify-content:space-between;
}
.container-naview .nav-logo a img{
    margin-top:0.5rem;
    width:150px;
}
.container-naview .nav-button{
    display:flex;
    justify-content:flex-end;
}

.container-naview .container-button{
    display:flex;
}
.container-naview .container-button a{
    padding:0.5rem 0.5rem;
    margin:0.5rem 0.5rem;
    background:#cbfe02;
    border-radius:50%;
    color:#212529;
    font-size:1rem;
    text-decoration:none;
    display:flex;
    align-items:center;
}
.container-naview .container-search{
    width:auto;
    display:flex;
    padding:0.4rem 2.5rem 0.4rem 1rem;
    margin:0.5rem 0.2rem;
    border-radius:35px;
    border:2px solid #eee;
    position:relative;
    background:#fff;
    display:none;  
}
.container-naview .container-search>a{
    width:100%;
    color:#808b96;
    text-decoration:none;
}
.container-naview .container-search i{
    text-decoration:none;
    position:absolute;
    display:flex;
    top:2.7px;
    right:0.15rem;
    padding:0.5rem 0.3rem 0.5rem 0.3rem;
    background:#cbfe02;
    border-radius:50%;
    color:#333;
}
/**/

/* Estilos del contenedor */
html {
  /*overflow: auto;*/
}

html p:not(:last-child) {
  margin-bottom: 1rem;
}

/* Tama«Šo del scroll */
html::-webkit-scrollbar {
  width: 8px;
}

 /* Estilos barra (thumb) de scroll */
html::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

html::-webkit-scrollbar-thumb:active {
  background-color: #999999;
}

html::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

 /* Estilos track de scroll */
html::-webkit-scrollbar-track {
  background: #e1e1e1;
  border-radius: 4px;
}

html::-webkit-scrollbar-track:hover, 
html::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}

/**/

.container-banner{
    width:100%;
}
.cb-cont{
    width:100%;
    height:20rem;
    overflow:hidden;
    position:relative;
}
.cb-cont>a>img{
    width:100%;
    height:100%;
}
.cb-cont>a>article{
    width:100%;
    position:absolute;
    bottom:0rem;
    transition:0.5s all;
}
.cc-cont{
    height:50%;
    display:flex;
}
.cd-cont{
    width:50%;
    position:relative;
    overflow:hidden;
}
.cd-cont>a>img{
    width:100%;
    height:100%;
    
}
.cd-cont>a>article{
    width:100%;
    text-align:right;
    position:absolute;
    bottom:0rem;
    transition:0.5s all;
}
.cd-cont:hover{
     background:rgba(31,41,55,0.8);
}
.cb-cont .a-title,.cd-cont .a-title{
    font-weight:500;
    display:inline-block;
    background:rgba(31,41,55,0.8);
    color:#fff;
    font-size:1.5rem;
    margin:0.5rem 0.5rem 0.5rem 0.5rem;
    border-radius:0.3rem;
    padding:0.2rem 0.5rem;
}
.cb-cont .a-date,.cd-cont .a-date{
    font-weight:300;
    margin:0rem 0.5rem;
    color:#fff;
    font-size:0.9rem;
}
.cd-cont .a-title{
    font-size:0.8rem;
}
.cd-cont .a-date{
    font-size:0.7rem;
}


.cb-cont>a:hover article,.cd-cont>a:hover article{
    background:rgba(31,41,55,0.8);
}
.cb-cont>a:hover .a-title,.cd-cont>a:hover .a-title{
    background:none;
}
.cb-cont>a:hover img,.cd-cont>a:hover img{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.03);
    transition:0.3s all;
}

.cb-cont.active>a article{
    background:rgba(31,41,55,0.8);
}
.cb-cont.active>a .a-title{
    background:none;
}
.cb-cont.active>a img{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.03);
    transition:0.3s all;
}
/**/

footer{
    background:var(--color-gray);
}

footer .copyright{
    font-size:0.9rem;
}

/**/
.container-card{
    width:9.65rem; /*width:11rem;*/
    height:100%; /*height:100%;*/
    margin:0.2rem;
    padding:0.2rem;
    transition:0.3s all;
    background-color:#ffffff;
    box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius:0rem 0rem 0.5rem 0.5rem;
}
.container-card:hover {
    box-shadow:0px 7px 11px -3px rgba(156, 156, 161, 0.5);
}
.container-card .img>a>img{
    width:9.2rem;
    height:9.2rem;
    padding:0.2rem;
}
.box-component .details{
    text-align:center;
    font-size:0.7rem;
}
.container-card .details span{
    text-align:center;
    font-weight:400;
}
.container-card .details i{
    color:#34495e;
}
.container-card .title a{
    color:#2c3e50;
    text-align:center;
    font-weight:440;
    font-size:1.1rem;
    text-decoration:none;
    display:block;
}
.container-card .title a:hover{
    color:#333;
}
.container-card .subdetails{
    padding:0.5rem 0rem;
    font-size:0.9rem;
    color:var(--color-black-1);
    text-align:right;
}
.container-card .check{
    color:var(--color-green);
    font-size:1rem;
    background:var(--color-gray-1);
    border-radius:50%;
    margin:0.2rem;
    transition:0.6s all;
}
.container-card:hover .subdetails .check{
    background:var(--color-green);
    color:#fff;
}

/**/
.nav-search{
    padding-bottom:1rem;
}
.container-search{
    width:auto;
    display:flex;
    margin:0rem 1rem;
    padding:0.4rem 2.2rem 0.4rem 0.7rem;
    border-radius:35px;
    border:2px solid #eee;
    position:relative;
}
.container-search>input{
    width:100%;
    border:none;
    outline:none;
    color:#808b96;
}
.container-search>a{
    text-decoration:none;
    position:absolute;
    display:flex;
    top:2.4px;
    right:0.2rem;
    padding:0.5rem 0.3rem 0.5rem 0.3rem;
    background:#cbfe02;
    border-radius:50%;
    color:#333;
}
.container-search2{
    width:auto;
    display:none;
    margin:0rem 1rem;
    padding:0.4rem 2.2rem 0.4rem 0.7rem;
    border-radius:35px;
    border:2px solid #eee;
    position:relative;
}
.container-search2>input{
    width:100%;
    border:none;
    outline:none;
    color:#808b96;
}
.container-search2>a{
    text-decoration:none;
    position:absolute;
    display:flex;
    top:2.4px;
    right:0.2rem;
    padding:0.5rem 0.3rem 0.5rem 0.3rem;
    background:#cbfe02;
    border-radius:50%;
    color:#333;
}

@media screen and (min-width:360px){
}
@media screen and (min-width:576px){
    .nav-menu ul{
        justify-content:center;
    }
    .nav-menu:after,
    .nav-menu:before{
        background:transparent;
    }
    /**/
    .container-banner{
        width:100%;
        height:10rem;
        display:flex;
    }
    .cb-cont{
        width:50%;
        height:14rem;
    }
}
@media screen and (min-width:768px){
    nav{
        padding:0rem;
        height:75px;
    }
    .container-nav{
        display:flex;
        justify-content:space-between;
    }
    .nav-title{
        text-align:left;
    }
    .nav-title img{
        /*margin-left:1rem;*/
        margin-top:1.5rem;
    }
    .nav-left{
        width:70%;
        display:flex;
    }
    .nav-right{
        width:30%;
    }
    .nav-search{
        padding-bottom:0rem;
    }
    /**/
    .container-search{
        margin-top:1.5rem;
    }
    /**/
    .cb-cont{
        height:20rem;
    }
    /**/
    .container-naview .container-button a{
        /*padding:0.5rem 0.6rem;*/
        background:#eee;
    }
    .container-naview .nav-right .nav-button{
        display:flex;
    }
    .container-naview .container-button{
        display:flex;
    }
    /**/
    .container-card{
        width:12.5rem;
        margin:0.5rem;
        padding:0.5rem;
    }
    .container-card .img>a>img{
        height:10rem;
    }
    .container-card .details{
        font-size:0.8rem;
    }
    .container-card .title{        
        font-weight:440;
        font-size:1rem;
    }

}
@media screen and (min-width:992px){
    .cb-cont .a-title{
        font-size:2rem;
    }
    .cd-cont .a-title{
        font-size:1rem;
    }
    /**/
    .container-card{
        width:14rem;
        margin:0.5rem;
        padding:0.5rem;
    }
    .container-card .img>a>img{
        width:12.9rem;
        height:12.9rem;
    }
    .container-card .details{
        font-size:0.9rem;
    }
    .container-card .title{        
        font-weight:440;
        font-size:1.3rem;
    }
}
@media screen and (min-width:1200px){

}