/*BLOG*/

.postInBlog{
    margin: 0 10% 30px 10%;
    height: 155px;
}

.postInBlogPictureContainter{
    width: 20%;
    float:left;
}

.postInBlogPictureContainterMobile{
    display: none; /*Must be shown only on mobile version*/
}

.postInBlogTextContainter{
    width: 80%;
    float: right;
    
}

.postInBlogTextContainter .text{
    height: 155px;
}

.blogTitle{
    color: #FF8B08 !important;
}


/*POST*/

#post{
    margin: 0 10% 30px 10%;
}

.postLeft{
    float: left;
    width: 60%;
}

.postRight{
    float:right;
    width: 40%;
}

.thumbnail_big{
    width: 650px; 
    height:600px; 
    margin-bottom:10px;
}

.thumbnail_small{
    width:214px; 
    height:150px; 
    margin-bottom:10px;
}


/*Different displays*/

@media(min-width: 1020px) and (max-width: 1300px){
    /*BLOG*/

    .postInBlogTextContainter{
        width: 75%;
        float: right;   
    }
}

@media(min-width: 800px) and (max-width: 1020px){
    /*BLOG*/

    .postInBlogTextContainter{
        width: 65%;
        float: right;   
    }
}

@media(min-width: 650px) and (max-width: 800px){
    /*BLOG*/

    .postInBlog{
        margin: 0 5% 175px 5%;
        height: 155px;
    }

    .postInBlogTextContainter{
        width: 100%;
        height: 100px;
    }

    .postInBlogTextContainter .text{
        height: 100px;
    }

    .postInBlogPictureContainter{
        display: none; /*Must be shown only on big screens*/
    }

    .postInBlogPictureContainterMobile{
        display: block;
        margin-bottom: 10px;
    }
}

@media(max-width: 650px){
    /*BLOG*/

    .postInBlog{
        margin: 0 5% 240px 5%;
        height: 155px;
    }

    .postInBlogTextContainter{
        width: 100%;
        height: 100px;
    }

    .postInBlogTextContainter .text{
        height: 160px;
    }

    .postInBlogPictureContainter{
        display: none; /*Must be shown only on big screens*/
    }

    .postInBlogPictureContainterMobile{
        display: block;
        margin-bottom: 10px;
    }
}

/*POST different displays*/
@media(max-width: 1400px){
    #post{
        margin: 0 10% 30px 10%;
    }

    .postLeft{
        width: 75%;
    }

    .postRight{
        width: 100%;
    }
}

@media(max-width: 750px){
    .thumbnail_big{
        width: 450px; 
        height:300px; 
        margin-bottom:10px;
    }

    .thumbnail_small{
        width:160px; 
        height:110px; 
        margin-bottom:10px;
    }

    .postLeft{
        width: 100%;
    }
}

@media(max-width: 530px){
    .thumbnail_big{
        width: 300px; 
        height:200px; 
        margin-bottom:10px;
    }

    .thumbnail_small{
        width:100px; 
        height:60px; 
        margin-bottom:10px;
    }
}