/* L (Desktop) */
@media screen and (min-width: 1024px){

    /* Required L hide/show classes */

    .l-hide {
        display: none;
        visibility: hidden;
    }

    .l-show{
        display: block;
        visibility: visible;
    }

    /* Project styles*/

    /* Header */

    /* Navigation */

    #navigation{
        display: block!important;
    }

    /* Footer */

    /* Elements */

}

/* M (Tablet) */
@media screen and (min-width: 768px) and (max-width: 1023px) {

    /* Required M hide/show classes */

    .m-hide {
        display: none;
        visibility: hidden;
    }

    .m-show{
        display: block;
        visibility: visible;
    }

    /* Container width, required for grid */

    .container {
        width: 97%;
    }

    /* M grid cols, can be used to overrule normal cols */

    .m-col-10{
        width: 7.6%;
    }

    .m-col-10-full{
        width: 10%;
    }

    .m-col-15{
        width: 12.6%;
    }

    .m-col-15-full{
        width: 15%;
    }

    .m-col-20{
        width: 17.6%;
    }

    .m-col-20-full{
        width: 20%;
    }

    .m-col-25{
        width: 22.6%;
    }

    .m-col-25-full{
        width: 25%;
    }

    .m-col-30{
        width: 27.6%;
    }

    .m-col-30-full{
        width: 30%;
    }

    .m-col-33{
        width: 30.93333%;
    }

    .m-col-33-full{
        width: 33.33333%;
    }

    .m-col-40{
        width: 37.6%;
    }

    .m-col-40-full{
        width: 40%;
    }

    .m-col-50{
        width: 47.6%;
    }

    .m-col-50-full{
        width: 50%;
    }
    .m-col-60{
        width: 57.6%;
    }

    .m-col-60-full{
        width: 60%;
    }

    .m-col-65{
        width: 62.6%;
    }

    .m-col-65-full{
        width: 65%;
    }

    .m-col-66{
        width: 64.26667%;
    }

    .m-col-66-full{
        width: 66.66667%;
    }

    .m-col-70{
        width: 67.6%;
    }

    .m-col-70-full{
        width: 70%;
    }

    .m-col-75{
        width: 72.6%;
    }

    .m-col-75-full{
        width: 75%;
    }

    .m-col-80{
        width: 77.6%;
    }

    .m-col-80-full{
        width: 80%;
    }

    .m-col-90{
        width: 87.6%;
    }

    .m-col-90-full{
        width: 90%;
    }

    .m-col-100{
        width: 97.6%;
    }

    .m-col-100-full{
        width: 100%;
    }

    /* Project styles*/

    /* Header */

    /* Navigation */

    /* Footer */

    /* Elements */

    /* Portfolio */

    .portfolio-name{
        font-size: 20px;
    }

    /* Fade effect styles */

    .fade-left{
        opacity: 1; 
        left: 0px; 
        position: relative;
    }

    .fade-right{
        opacity: 1; 
        right: 0px; 
        position: relative;
    }

    .fade-top{
        opacity: 1; 
        top: 0px; 
        position: relative;
    }

    .fade-bottom{
        opacity: 1; 
        bottom: 0px; 
        position: relative;
    }

}

/* S (Mobile) */
@media screen and (max-width: 767px) {

    /* Required S hide/show classes */

    .s-hide{
        display: none;
        visibility: hidden;
    }

    .s-show{
        display: block;
        visibility: visible;
    }

    /* Container width, required for grid */

    .container {
        width: 97%;
    }

    /* Grid cols are all full width on S unless else defined */

    .col-10, .col-15, .col-20, .col-25, .col-30, .col-33, .col-40, .col-50, .col-60, .col-65, .col-66, .col-70, .col-75, .col-80, .col-90{
        width: 97.6%;
    }

    .col-10-full, .col-15-full, .col-20-full, .col-25-full, .col-30-full, .col-33-full, .col-40-full, .col-50-full, .col-60-full, .col-65-full, .col-66-full, .col-70-full, .col-75-full, .col-80-full, .col-90-full{
        width: 100%;
    }

    /* S grid cols, can be used to overrule normal cols */

    .s-col-10{
        width: 7.6%;
    }

    .s-col-10-full{
        width: 10%;
    }

    .s-col-15{
        width: 12.6%;
    }

    .s-col-15-full{
        width: 15%;
    }

    .s-col-20{
        width: 17.6%;
    }

    .s-col-20-full{
        width: 20%;
    }

    .s-col-25{
        width: 22.6%;
    }

    .s-col-25-full{
        width: 25%;
    }

    .s-col-30{
        width: 27.6%;
    }

    .s-col-30-full{
        width: 30%;
    }

    .s-col-33{
        width: 30.93333%;
    }

    .s-col-33-full{
        width: 33.33333%;
    }

    .s-col-40{
        width: 37.6%;
    }

    .s-col-40-full{
        width: 40%;
    }

    .s-col-50{
        width: 47.6%;
    }

    .s-col-50-full{
        width: 50%;
    }
    .s-col-60{
        width: 57.6%;
    }

    .s-col-60-full{
        width: 60%;
    }

    .s-col-65{
        width: 62.6%;
    }

    .s-col-65-full{
        width: 65%;
    }

    .s-col-66{
        width: 64.26667%;
    }

    .s-col-66-full{
        width: 66.66667%;
    }

    .s-col-70{
        width: 67.6%;
    }

    .s-col-70-full{
        width: 70%;
    }

    .s-col-75{
        width: 72.6%;
    }

    .s-col-75-full{
        width: 75%;
    }

    .s-col-80{
        width: 77.6%;
    }

    .s-col-80-full{
        width: 80%;
    }

    .s-col-90{
        width: 87.6%;
    }

    .s-col-90-full{
        width: 90%;
    }

    .s-col-100{
        width: 97.6%;
    }

    .s-col-100-full{
        width: 100%;
    }

    /* Project styles*/

    /* Header */

    .header-logo-container{
        margin: 50px 0px;
    }

    .social-link{
        font-size: 20px;
        line-height: 20px;
    }

    /* Navigation */

    /* Footer */

    /* Elements */

    /* Fade effect styles */

    .fade-left{
        opacity: 1; 
        left: 0px; 
        position: relative;
    }

    .fade-right{
        opacity: 1; 
        right: 0px; 
        position: relative;
    }

    .fade-top{
        opacity: 1; 
        top: 0px; 
        position: relative;
    }

    .fade-bottom{
        opacity: 1; 
        bottom: 0px; 
        position: relative;
    }
}