/*Remember to add <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> to the page */

/*Responsive columns*/
.container{
    max-width:910px;
    width:100%;
    margin:0 auto 0 auto;
}

.row .col img{
    max-width:100%;
    height:auto;
}
.row .col.three{
    width:23%;
    margin-right:3%;
}
.row .col.four{
    width:30%;
    margin-right:3%;
}
.row .col.five{
    width:41%;
    margin-right:3%;
}
.row .col.six{
    width:48.5%;
    margin-right:3%;
}
.row .col.eight{
    width:63.67%;
    margin-right:3%;
}
.row .col.nine{
    width:73.5%;
    margin-right:3%;
}
.row .col.twelve{
    width:100%;
}

.row {
    clear:both;
    height:auto;
    margin-bottom:20px;
}
.row:after{
    content:'';
    display:block;
    clear: both;
    height:0 !important;
}
.row .col{
    display:block;
    float:left;
    height:auto;
}
.row .col:last-child{
    margin-right:0;
}
.row .col:after{
    content:'';
    display:block;
    clear: both;
    height:0 !important;
}

@media screen and (min-width: 561px) {
    .nodesktop{
        display:none !important;
        visibility:hidden !important;
    }
}

@media screen and (max-width: 560px) {
    .container{
        max-width:100%;
    }
    .row .col,
    .row .col.three,
    .row .col.four,
    .row .col.five,
    .row .col.six,
    .row .col.eight,
    .row .col.nine,
    .row .col.twelve{
        float:none;
        width:90%;
        margin:0 5% 10px;
    }
    .row .col:after{
        content:'';
        display:block;
        clear: both;
        height:0 !important;
    }
    
    .nodesktop{
        display:block !important;
        visibility:visible !important;
    }
    .nomobile{
        display:none !important;
        visibility:hidden !important;
    }
}