*{
    margin: 0;
    padding: 0;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 130px;
    background: #ffffff;
    box-shadow: 0 4px 25px -22px black; 
    margin-bottom: 10px;   
    z-index: 2;
}
.header-content{
    margin: auto;
    height: 130px;
    /*background: url(../images/bannerptyrefs1400_109.png) 15% center;*/
    background: url(../images/imgthBanner.jpg)  center 10%; 
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-between;
}
.logo{
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: blue;
}
.logo b{
    color:red;
}
.logo a{
    height: auto;
}
.menu{
    height: 80px;
    margin-top: 50px;    
}
.menu nav{
    height: 100%;
}
.menu nav ul{
    height: 100%;
    display: flex;
    list-style: none;
}


.menu nav ul li{
    height: 100%;
    margin: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#i-login{
    display: flex;
    *flex-direction: column;
}

.menu-selected:before{
    content: '';
    width: 100%;
    height: 4px;
    background: #fcde30;
    position: absolute;
    top: 0;
    left: 0;
}
.menu nav ul li a{
    *color: #777777;
    color: #ffffff;
    *font-size: 18px;
    font-size: 22px;
    transition: color 300ms;
}
.menu nav ul li a:hover{
    *color: #2a97fd;
    color: #fcde30;
    font-size: 22px;
}
.menu .text-menu-selected{
    color: #f7d304;
}


.menu nav ul li a i{
    display: none;
}

#icon-menu{
    width: 50px;
    height: 50px;
    position: absolute;
    right: 20px;
    top: 16px;
    padding: 2px;
    font-size: 20px;
    background: #fafafafa;
    border-radius: 100%;
    color: #787878;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#icon-menu:hover{
    opacity: 0.8;
}

/* Portada */
.container-cover{
    width: 100%;
    height: 600px ;
    position: relative;
    margin-top: 140px;  /* Para q se posiciones debajos del Header 
                            y empuje lo que venga debajo, el Top:80px no lo empujaba */
    background-image: url('../images/IMGTH_Images/EntradaCanal_2.png');
    background-position: inherit;
    background-size: cover;
    background-repeat: no-repeat;

}

.container-cover:before{
    content: '';
    width: 100%;
    height: 100%;
    /*background: rgba(38, 39, 39, 0.5);*/
    background: rgba(66, 67, 67, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}

.container-info-cover{
    *max-width: 800px;
    height: 600px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.container-info-cover h1{
    font-size: 60px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 20px;    
}
.container-info-cover p{
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
}

/*  ptyrefs_nosotros */

.container-cover_nosotros{
    width: 100%;
    height: 600px ;
    position: relative;
    margin-top: 140px;  /* Para q se posiciones debajos del Header 
                            y empuje lo que venga debajo, el Top:80px no lo empujaba */  
    *background: url('../images/ptyrefs_nosotros_723x323.png') 15% center;
    *background-repeat: no-repeat;
    *background-size: cover;

    background-image: url('../images/ptyrefs_nosotros_723x323.png');
    background-position: inherit;
    background-size: cover;
    background-repeat: no-repeat;
}
.container-cover_nosotros:before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(38, 39, 39, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}
#move-content{
    display: flex;
    flex-direction: column;
}

#quienessomos{
    margin: 30px 50px;
    display: flex;
    flex-direction: row;
    justify-items: center;
}
.nosotros_somos{
    display: flex;
    flex-direction: column;
}
#quienes{
    width: 40%;
    margin-right: 10px;
    flex: 1 1 auto;
    padding: 5px 10px;
    box-shadow: 10px 10px 10px #827e7e;
}
#mision{
    width: 40%;
    flex: 1 1 auto;
    margin-left: 30px;
    padding: 5px 10px;
    box-shadow: 10px 10px 10px #827e7e;
}

#quienessomos h1, #historia h1{
    margin: 10px 0px;
    font-size: 40px;
    font-weight: 500;
}
#quienessomos p{
    margin: 10px 0px;
    font-size: 25px;
    font-weight: 400;
    color: rgb(13, 15, 13);
}
#quienessomos hr{
    margin-left: 20px;
    margin-right: 20px;
    *flex: 1 1 auto;
}

/* Historia */
.container-cover_historia{
    width: 100%;
    height: 600px ;
    position: relative;
    margin-top: 140px;  /* Para q se posiciones debajos del Header 
                            y empuje lo que venga debajo, el Top:80px no lo empujaba */  

    background-image: url('../images/futbol.png');
    background-position: inherit;
    background-size: cover;
    background-repeat: no-repeat;
}
.container-cover_historia:before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(38, 39, 39, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}
#historia{
    margin: 20px 80px;
    text-align: justify;
    font-size: 25px;
    font-weight: 400;
    padding: 5px 20px;
    box-shadow: 10px 10px 10px #827e7e;
}
#historia p{
    margin-bottom: 20px;
    color: rgb(13, 15, 13);
}

/* Contacto */
.container-cover_contacto {
    background-image: url(../images/backContacto.jpg);
    background-size: 100vw 100vh;
    background-attachment: fixed;
    margin: 0;
    font-family: monospace;
}

.cform {
    width: 450px;
    margin: auto;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 7px;
}    

/* Set para las Secciones de Blog y Contenido*/
.sec_ini{  
    *width: 1400px;
    width: 100%;
    height: 450px;
    *margin: 10px auto;
    margin: auto;
    padding: 10 0;
    
}

/* Seccion de Blog recientes*/
#sec_blog{
    height: 450px;
    background: #ffffff;
    text-align: center;
    overflow: hidden;
    

}
#sec_blog h2{
    color: #000000;
    margin-top: 10px;
}
.recientes{
    display: flex;
    align-items: center;
    justify-content: center;
}
#sec_blog article{
    width: 434px;
    height: 380px;
    *float: left;
    margin: 10px 10px;
    text-align: center;
    box-shadow: 10px 10px 10px #827e7e;
    background: white;
    padding: 5px;

}

#sec_blog article img{
    width: 250px;
    height: 200px;
    
}
#sec_blog article h2{
    color: black;
}

/* Nosotros - Historia - Contactenos*/
#sec_nosotros_tarjetas{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 375px;
}
#sec_nosotros{    
    height: 450px;
    background: #ffffff;
    text-align: center;
    overflow: hidden;
}

#sec_nosotros h2{
    color: #000000;
    margin: 10px auto;
}

.sec_nosotros_tarjetas{
    display: flex;
    align-items: center;
    justify-content: center;
}
#sec_nosotros .tarjetas{
    width: 434px;
    height: 380px;
    margin: 10px 10px;
    *margin: 10px auto;
    text-align: center;
    *box-shadow: 0 0 2px #ccc;
    box-shadow: 10px 10px 10px #827e7e;
    background: white;
    padding: 5px;

}

#sec_nosotros .tarjetas img{
    width: 250px;
    height: 200px; 
}

.tarjetas .tarjeta_titulo{
    font-size: 18px;
    color: rgb(13, 14, 13);
}
/***********  Blog.php ************/

#blog{
    width: 1000px;
    min-height: 500px;
    background: white;
    box-shadow: 0 0 2px #ccc;
    margin: 142px auto 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#blog article{
    width: 990px;
    height: 180px;
    box-shadow: 0 0 2px #ccc;
    background: white;
    padding: 5px;
    margin-bottom: 5px;
    position: relative;
}

#blog article img{
    width: 270px;
    height: 180px;
    float: left;
    margin-right: 5px;
}

#blog article p{
    color: #333;
    text-align: justify;
    margin-top: 5px;
}
#blog article span{
    color: #555;
}
#blog article .tag{
    text-decoration: none;
    color: #555;
}
#blog article .active{
    text-decoration: none;
    position: absolute;
    background: teal;
    color: white;
    padding: 3px 7px;
    right: 5px;
    bottom: 5px;
    border-radius: 2px;
    border-bottom: 4px solid #005e5e;
}
#blog article a:active{
    border: none;
    box-shadow: 0 0 2px #333 inset;
    margin-top: 5px;
}
#blog article a:hover{
    background: #007171;
}
#blog article .comentarios{
    position: absolute;
    right: 123px;
    bottom: 5px;
}

#blog article .likes{
    position: absolute;
    right: 258px;
    bottom: 5px;
}
/* #blog article .comentarios i .conteo{ */
    #blog article .conteo{    
    background: teal;
    color: white;
    border-radius: 3px;
    padding: 1px 3px;
    margin-right: 3px;
}
#blog article .manito{
    font-size: x-large;
}

/* Categorias */
.contenido{
    margin-top: 140px;
    width: 100%;
    height: 700px;
    box-shadow: 0 0 2px #ccc;
    background: white;
    padding: 5px;
    margin-bottom: 5px;
    position: relative;
}
.categorias_list{
    width: 80%;
    margin: auto;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.tabla_list{
    width: 400px;
    box-shadow: 0 0 14px #ccc;
}

.tabla_list tr{
    margin: 10px 10px 0 10px;
}
.tabla_list tr td{
    margin: auto;
    padding: 10px;
}
.tabla_list tr:last-child{
    margin: auto;
    padding: 10px;
}

/*  Categorias_Crear */
.contenido_categ_{
    margin-top: 140px;
    height: 500px;
}
.forma{
    width: 30%;
    margin: auto;
    margin-top: 50px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 14px #ccc;
    position: relative;
}

#categoria_forma{
    height: 165px;
}
#categoria_forma input[type="text"]{
    margin-top: 40px;
    width: 260px;
    height: 25px;
    margin-bottom: 20px;    
}
#categoria_forma .botones{
    display: flex;
    justify-content: space-between;
    position: relative;
}
#categoria_forma input[type="submit"]{
    background: teal;
    border: none;
    color: white;
    width: 116px;
    height: 44px;
    border-radius: 5px;
    padding: 2px 5px;
    cursor: pointer;
    font-size: 16px;
}
#categoria_forma a{
    background: teal;
    border: none;
    color: white;
    width: 116px;
    height: 33px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    padding: 10px 1px 0px;
}

.asButton{
    background: teal;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    padding: 1px 6px 0px;
    margin: 2px;
}

/* Footer - pie de pagina*/
.container-footer{
    width: 100%;
    padding: 40px 0;
    background: #f7f7f7;
    margin-top: 40px;
}

.container-footer footer{
    max-width: 1200px;
    margin:auto;
}

.container-footer footer .logo-footer{
    text-align: center;
}
.container-footer footer .logo-footer img{
    width: 200px;
}

.container-footer footer .redes-footer{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.container-footer footer .redes-footer .icon-redes-footer{
    font-size: 20px;
    margin: 20px;
    background: #efefef;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    color:#a2a2a2;
}
.container-footer footer .redes-footer .fa-facebook-f:hover{
    background: #41579A;  
    color: #ffffff;  
}
.container-footer footer .redes-footer .fa-google-plus-g:hover{
    background: #de4c34;  
    color: #ffffff;  
}
.container-footer footer .redes-footer .fa-instagram:hover{
    background: linear-gradient(to top right, #fcde30, #e9712a, #d2313b, #ae4198, #7540a1,#5443a8 );  
    color: #ffffff;  
}

.container-footer hr{
    margin-top: 20px;
    border: none;
    height: 2px;
    background: #c0c0c07a;
}
.container-footer h4{
    text-align: center;
    margin-top: 40px;
    color: #8e8e8e;
    font-weight: 500;
}

/* Responsive Design - adaptables a dispositivos moviles*/

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

    #sec_nosotros_tarjetas{
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .container-info-cover p {
        padding: 0px 10px 0px;
    }
    
}

/*@media screen and (max-width: 990px){*/
@media screen and (max-width: 850px){ 
    .menu nav ul li{
        margin: 0 10px;
    }  
    .menu nav ul li a{
        font-size: 17px;       
    } 
    .container-content{
        width: 100%;
        flex-direction: column;
    }

    #sec_blog article, #sec_nosotros .tarjetas{
        width: 245px;
        height: 380px;
        overflow: hidden;

    }
    #sec_nosotros_tarjetas{
        display: flex;
        justify-content: center;
        align-items: center;

    }

    article{
        box-shadow: 0 0 0 0;
    }

    #sec_blog article img {
        width: 100%; 
        height: 200px;
    }
    #sec_nosotros .tarjetas img {
        width: 100%;
        height: 200px;
    }


    .container-aside{
        display: flex;
        justify-content: center;
    }
    .container-aside aside{
        max-width: 300px;
        margin: 10px;
    }

    
}

@media screen and (max-width: 750px){ 
    body{
        overflow-x: hidden;
    }
    header{
        position: fixed;
        height: 100px;
    }
    #contenido{
        overflow: hidden;
    }
    .header-content{
        background: url(../images/imgthBanner.jpg) 15% center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100px;
    }
    .container-all{
        transition: all 300ms cubic-bezier(1,0,0,1);
    }
    .move-container-all{
        transform: translateX(250px);
    }
    .menu{
        width: 250px;
        height: 100vh;
        position: fixed;
        top: 80px;
        left: 0;
        background: white;
        overflow: hidden;
        transform: translateX(-250px);
        box-shadow: 10px 0 20px -25px black;
        transition: all 300ms cubic-bezier(1,0,0,1);
        z-index: 1000;
    }
    .show-lateral{
        width: 250px;
        transform: translateX(0px);
    }
    .menu nav ul{
        flex-direction: column;
        height: auto;
    }
    .menu nav ul li{
        max-width: 200px;
        height: 50px;
        justify-content: flex-start;
    }
    .menu-selected:before{
        width: 0 ;
    }
    .menu nav ul li a{
        /* margin-top: 40px; */
        color: #858585;
        height: 100%;
        width: 100%;       
    }
    .menu nav ul li a i{
        width: 20px;
        display: inline-block;
        margin-right: 10px;
        color: #2a97fd;
    }
    #icon-menu{
        display: flex;
        right: 2% ;
    }

    .container-cover{
        width: 100%;
        position: relative;
        margin-top: 100px;  /* Para q se posiciones debajos del Header 
                                y empuje lo que venga debajo, el Top:80px no lo empujaba */
      /*   background-image: url('../images/KFL1_1.png');
        *background-position: center;
        *background-size: cover;
        *background-repeat: no-repeat; */
        
        background: url('../images/KFL1_1.png') 15% center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .container-info-cover h1{
        font-size: 40px;
    }

    .container-info-cover p {
        font-size: 15px;
    }

    .container-content{
        padding: 0px;
    }

    .container-aside{
        flex-wrap: wrap;
    }
    #sec_blog {
        height: auto;
        background: #ffffff;
        text-align: center;
        overflow: hidden;
    }
    .sec_ini{
        display: flex;
        flex-direction: column;
        margin-top: 10px;
       *min-height: 1300px;;
    }
    #sec_nosotros{
        height: auto;
    }
    .recientes {
        flex-direction: column;
        align-items: center;
        /*min-height: 1100px;*/
    } 
    #sec_nosotros_tarjetas{
        flex-direction: column;
        align-items: center;
       /*  min-height: 1100px; */
       height: auto;
    } 
    #sec_blog article, #sec_nosotros_tarjetas .tarjetas{
        *width: 245px;
        width: fit-content;
        height: auto;
        overflow: hidden;

    }
    #sec_blog article .detalle, #sec_nosotros_tarjetas .tarjetas .detalle{
        text-align: center;

    }

    /* Nosotros*/
    .container-cover_nosotros {
        height: 390px;
        background-image: url(../images/ptyrefs_nosotros_723x323.png);
        background-position: top;
        background-size: auto;
        background-repeat: no-repeat;
        margin-top: 100px;
    }

    #quienessomos {
        width: fit-content;
        margin: auto ;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-items: center;
    }
    #quienessomos p{
        font-size: 16px;
    }

    #quienes {
        width: 91%;
        margin-right: 10px;
        margin-bottom: 14px;
        flex: 1 1 auto;
        padding: 5px 10px;
        box-shadow: 10px 10px 10px #827e7e;
    }
    #mision {
        width: 91%; 
        margin-left: 0px;
        margin-bottom: 14px;
        flex: 1 1 auto;
        padding: 5px 10px;
        box-shadow: 10px 10px 10px #827e7e;
    }

    /* Historia*/
    .container-cover_historia{
        height: 390px;        
        background-position: top;
        /*background-size: auto;*/
        background-repeat: no-repeat;
        margin-top: 100px;
    }
    #historia {
        margin: 20px 10px 10px 0px;
        text-align: justify;
        font-size: 16px;
        font-weight: 400;
        padding: 5px 10px;
        box-shadow: 10px 10px 10px #827e7e;
    }
    #historia h1{
        text-align: center;
    }

    /* BLOGs*/

    #blog {
        width: auto;
        min-height: auto;
        background: white;
        box-shadow: 0 0 2px #ccc;
        margin: 100px auto 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    #blog article {
        width: 95%;
        height: auto;
        box-shadow: 0 0 2px #ccc;
        background: white;
        /* padding: 5px 0px; */
        display: flex;
        flex-direction: column;
        margin: 5px 5px;
        position: relative;
    }
    #blog article img {
        margin: auto;
        margin-bottom: 5px;
    }
    #blog article .tag{
        font-size: x-small;
    }
    #blog article p{
        font-size: small;
        margin-bottom: 30px;
    }        
    #blog article .active, #blog article span {
        font-size: 10px;
    }
    #blog article .comentarios {
        right: 90px;
        bottom: 12px;
    }
    #blog article .likes{
        right: 186px;
        bottom: 12px;
    }
    #blog article .manito{
        font-size: 12px;
    }

    /* Leer Mas*/
    


    /* Footer*/
    .container-footer {
        width: 100%;
        padding: 3px 0;
        background: #f7f7f7;
        margin-top: 13px;
    }
    .container-footer footer .redes-footer {
        display: flex;
        justify-content: center;
        margin-top: -19px;
    }
    .container-footer h4 {
        margin-top: 17px;
    }

}