*,*::before,*::after{
margin: 0;
padding: 0;
border: 0;
outline: none;
box-sizing: border-box;
vertical-align: baseline;
text-decoration: none;
}
img,picture,video,iframe,figure{
    max-width: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}
a{
    display: block;
}
p a{
    display: inline;
}
li{
    list-style: none;
}
html{
    scroll-behavior: smooth;
}



/********* Texto y Tipografia **************/
:root{
    --primary-color:#f21d1d;
    --second-color: #f24b1d;
    --thid-color:#009afa;
    --fourth-color: #1347c8;
    --texto-color:#fcfcfc;
    --background:#8EC5FA;

    --Titles: 2.5em;
    --subtitulos:2em;
    --texto:1.5em;
    --buttom:.5em;
}


.titulos{
    font-size: var(--Titles);
}
.subtitulos{
       font-size: var(--subtitulos);
}
.texto{
        font-size: var(--texto);
}
.buttom{
        font-size: var(--buttom);
}

.al-center{
    text-align: center;
}
.al-justicado{
    text-align: justify;
}


/********* Colors ***********/



.primary-color,.color-primary{
    color: var(--primary-color);
}
.second-color,.color-second{
    color: var(--second-color);
}
.third-color,.color-third{
    color: var(--third-color);
}
.fourth-color,.color-fourth{
    color: var(--fourth-color);
}
.texto-color,.color-texto{
    color: var(--texto-color);
}
/*********** Components */
/********MENU************/
#menuIconContent{
    background-color: var(--primary-color);
}
#menu{
    background-color: var(--second-color);
    display: flex;
    flex-flow: row wrap;
}
#menu li{
    flex: 0 0 100%;
}
#menu li a{
    color: var(--texto-color);
    text-align: center;
}
#menu li buttom{    
    margin-left: 30%;
        margin-right: 30%;
        padding: 5%;
}
.icon-menu{
    margin-left: 48%;
    margin-right: 48%;
    font-size: 30px;
}
header{
    position: sticky;
}

/* CardPosts*/


.grid-fluid{
    width: 100%;
    display: flex;
    flex-flow: row wrap;

}
.post-card{
    width: 300px;
    height: 250px;
    padding-bottom: 120px;
    border: thin solid var(--second-color);
    flex: 0 0 100%;
    background-color: var(--background) ;

}
.post-card img{
    background-color: var(--fourth-color);
    max-width: 300px;
    max-height: 200px;
}
@media (min-width:576px){
    .post-card{
        flex: 0 0 50%;
    }
}
@media (min-width:768px){
    .post-card{
        flex: 0 0 33.3333333%;
    }
}
@media (min-width:992px){
    .post-card{
        flex: 0 0 25%;
    }
}
@media (min-width:1200px){
    .post-card{
        flex: 0 0 16.666666667;
    }
    .post-card img{
    max-width: 300px;
    max-height: 200px;
}
}