:root{
    --mainColor: rgb(95, 43, 79);;
    --darkColor: #25222A;
    --greyColor: #E8E8E8;
    --whiteColor:#FFFFFF;
    --text-color: #393939;
    --lightColor: #d6d6d6;
}

body, html{
    font-family: 'Palanquin', sans-serif;
    color: var(--text-color);
}

.main-color-text{
    color: var(--mainColor);
}

.dark-color-text{
    color: var(--darkColor);
}

.white-color-text{
    color: var(--whiteColor);
}

.dark-color-background{
    background-color: var(--darkColor);
}

.grey-color-background{
    background-color: var(--greyColor);
}

.divider-dark{
    border-bottom: solid 3px var(--darkColor);
}

.divider-light{
    border-bottom: solid 2px var(--lightColor);
}

.josefin-title{
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
}

.btn-white{
    border-radius: 0;
    background-color: var(--whiteColor);
    color: var(--mainColor);
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

.btn-white:hover{
    box-shadow: 0 0 5px #fff;
    color: var(--mainColor);
}

.btn-purple{
	cursor: pointer;
    border-radius: 0;
    background-color: var(--mainColor);
    color: var(--whiteColor);
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

.btn-purple:hover{
    box-shadow: 0 0 5px var(--mainColor);
    color: var(--whiteColor);
}

.social{
    position: absolute;
    top: 25px;
    right: 25px;
}

.navigation{
    position: absolute;
    top: 25px;
    left: 25px;
}

i{
    cursor: pointer;

}

i:hover{
    box-shadow: 0 0 5px var(--mainColor);
}


/**--- ARTICULOS--**/

.articulo{
    width: 100%;
    height: 200px;
}

.articulo .overData{
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: pointer;
}

.articulo .overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: rgba(95, 43, 79, 0.31);
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.hovereffect img {
    display: block;
    position: relative;
}

.articulo h2 {
    position: absolute;
    top: 0;
    width: 100%;
    text-transform: uppercase;
    color: rgb(95, 43, 79);
    text-align: left;
    font-size: 23px;
    padding: 10px;
    font-weight: 500;
    background: rgba(255, 253, 254, 0.7);
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
}

.articulo-container .info{
    background-color: var(--whiteColor);
    color: var(--mainColor);
    font-family: 'Josefin Sans', sans-serif;
    font-size: 20px;
    padding-left: 10px;
}

.page-link{
    color: var(--mainColor);
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
}

.page-link-button:hover{
    box-shadow: 0 0 5px #fff;
    color: var(--darkColor);
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
}
.page-info:hover{
    color: var(--mainColor);
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
}

.articulo:hover .overlay{
	background-color: rgba(95, 43, 79, 0.7);
}


/**--- ARTICULO CONCRETO--**/


.img-container{
    height: 450px;
    width: 80%;
    margin: auto;
}

.share-icon{
    width: 40px;
    cursor: pointer;
}

.comment-section, .share-section, .post-comment-section, .article-text, .about-me-section{
    width: 70%;
    margin: auto;
}




/* ---- ----- ---- ULTIMAS ENTRADAS GALERIA-- --- --- --- */
.grid-sizer{
    width: 10%;
}
.item {
    float: left;
    padding: 3px;
}
.item50 {
    width: 50%;
}
.item25 {
    width: 20%;
}
.item100{
    width: 100%;
}
.row1{
    height: 350px;
}
.row2{
    height: 300px;
}
.row3{
    height: 200px;
}
.item img {
    display: block;
    width: 100%;
    height: 100%;
}

@media (min-width: 600px) {
    .hovereffect {
        width: 100%;
        height: 100%;
        float: left;
        overflow: hidden;
        position: relative;
        text-align: center;
        cursor: pointer;
    }

    .hovereffect .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        background-color: rgba(95, 43, 79, 0.6);
        opacity: 0;
        filter: alpha(opacity=0);
        transition: all 0.4s;
    }

    .hovereffect img {
        display: block;
        position: relative;
        -webkit-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }

    .hovereffect h2 {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-transform: uppercase;
        color: rgb(95, 43, 79);
        text-align: center;
        font-size: 18px;
        padding: 10px;
        font-weight: 500;
        background: rgba(255, 253, 254, 0.61);
        margin: 0;
        font-family: 'Josefin Sans', sans-serif;

    }

    .hovereffect .info {
        word-wrap: break-word;
        position: absolute;
        top: 25%;
        text-decoration: none;
        text-transform: uppercase;
        color: rgb(95, 43, 79);
        background: rgba(255, 253, 254, 0.61);
        padding: 15px;
    }

    .hovereffect .info h3{
        font-size: 22px;
        font-weight: bold;
        font-family: 'Josefin Sans', sans-serif;

    }


    .hovereffect:hover .overlay {
        opacity: 1;
        filter: alpha(opacity=100);
    }

}


@media (max-width: 600px) {

    .item:hover {
        background: rgb(95, 43, 79);
        cursor: pointer;
    }

    .item img:hover {
        opacity: 0.4;
        filter: alpha(opacity=40);
    }

    .row1{
        height: 200px;
    }
    .row2{
        height: 300px;
    }
    .row3{
        height: 100px;
    }

    .hovereffect .info h3{
        font-size: 18px;
        font-weight: bold;
    }

    .img-container{
        height: 450px;
        width: 100%;
        margin: auto;
    }

    .comment-section, .share-section, .post-comment-section, .article-text, .about-me-section{
        width: 100%;
    }

}

@media (max-width: 400px) {
    .row1{
        height: 100px;
    }
    .row2{
        height: 150px;
    }
    .row3{
        height: 60px;
    }


    .hovereffect .info h3{
        font-size: 12px;
        font-weight: bold;
    }
}
/* ---- ----- ---- ULTIMAS ENTRADAS GALERIA-- --- --- --- */