.container{
    width:80%;
    height:100%;
    margin: 0 auto;
    /* background: magenta; */
}

.row{
    margin-left:15px;
    margin-right:15px;
}

.row:after{
    content:"";
    display:table;
    clear: both;
}

/*  COLUMNS  */
.col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1{
    position: relative;
    float:left;
    /* background: cyan;
    border:1px solid blue;
    height:30px; */
    padding:0 10px;
   
}
.col-12{ width:100%; }
.col-11{ width:calc(100% / 12 * 11); }
.col-10{ width:calc(100% / 12 * 10); }
.col-9{ width:calc(100% / 12 * 9); }
.col-8{ width:calc(100% / 12 * 8); }
.col-7{ width:calc(100% / 12 * 7); }
.col-6{ width:calc(100% / 12 * 6); }
.col-5{ width:calc(100% / 12 * 5); }
.col-4{ width:calc(100% / 12 * 4); }
.col-3{ width:calc(100% / 12 * 3); }
.col-2{ width:calc(100% / 12 * 2); }
.col-1{ width:calc(100% / 12); }

/*  COLUMNS OFFSETS  */

.col-offset-0_5{
    margin-left:calc(100% / 8 );
}

.col-offset-1{
    margin-left:calc(100% / 12);
}

.col-offset-2{
    margin-left:calc(100% / 12 * 2);
}

.col-offset-3{
    margin-left:calc(100% / 12 * 3);
}

.col-offset-4{
    margin-left:calc(100% / 12 * 4);
}

.col-offset-5{
    margin-left:calc(100% / 12 * 5);
}


@media screen and (max-width: 780px) 
{
    /*  COLUMNS  */
    .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1{
        width:100%;
    
    }

    /*  COLUMNS OFFSETS  */

    .col-offset-1, .col-offset-2, .col-offset-3, .col-offset-4, .col-offset-5{
        margin-left:0;
    }

    
  .container{
    width: 90%;
  }

}