#test{
    position:fixed;
    top:0px;
    right:0px;
    z-index:99999999999999999;
}


@media (min-width: 0px) {
    #test{background:violet;}
    /* da 0 a 575 */
    .sp1-1 {width:8.333333333%; float: left;}    
    .sp1-2 {width:16.666666667%; float: left;}
    .sp1-3 {width:25%; float: left;}
    .sp1-4 {width:33.333333333%;float: left;}
    .sp1-5 {width:41.666666667%; float: left;}    
    .sp1-6 {width:50%; float: left;}
    .sp1-7 {width:58.333333333%; float: left;}
    .sp1-8 {width:66.666666667%;float: left;}
    .sp1-9 {width:75%; float: left;}    
    .sp1-10{width:83.333333333%; float: left;}
    .sp1-11{width:91.666666667%; float: left;}
    .sp1-12{width:100%;float: left;}      
    /* --------------------------------------> */         
 
}

@media (min-width: 390px) {
    #test{background:orange;}
    /* da 576 a 767 */
    .sp2-1 {width:8.333333333%; float: left;}    
    .sp2-2 {width:16.666666667%; float: left;}
    .sp2-3 {width:25%; float: left;}
    .sp2-4 {width:33.333333333%;float: left;}
    .sp2-5 {width:41.666666667%; float: left;}    
    .sp2-6 {width:50%; float: left;}
    .sp2-7 {width:58.333333333%; float: left;}
    .sp2-8 {width:66.666666667%;float: left;}
    .sp2-9 {width:75%; float: left;}    
    .sp2-10{width:83.333333333%; float: left;}
    .sp2-11{width:91.666666667%; float: left;}
    .sp2-12{width:100%;float: left;}      
    /* --------------------------------------> */         
 
}



@media (min-width: 576px) {
    #test{background:red;}
    /* da 576 a 767 */
    .sp3-1 {width:8.333333333%; float: left;}    
    .sp3-2 {width:16.666666667%; float: left;}
    .sp3-3 {width:25%; float: left;}
    .sp3-4 {width:33.333333333%;float: left;}
    .sp3-5 {width:41.666666667%; float: left;}    
    .sp3-6 {width:50%; float: left;}
    .sp3-7 {width:58.333333333%; float: left;}
    .sp3-8 {width:66.666666667%;float: left;}
    .sp3-9 {width:75%; float: left;}    
    .sp3-10{width:83.333333333%; float: left;}
    .sp3-11{width:91.666666667%; float: left;}
    .sp3-12{width:100%;float: left;}      
    /* --------------------------------------> */         
 
}

@media (min-width: 768px) {
    #test{background:yellow;}
    /* da 768 a 991 */
    .sp4-1 {width:8.333333333%; float: left;}    
    .sp4-2 {width:16.666666667%; float: left;}
    .sp4-3 {width:25%; float: left;}
    .sp4-4 {width:33.333333333%;float: left;}
    .sp4-5 {width:41.666666667%; float: left;}    
    .sp4-6 {width:50%; float: left;}
    .sp4-7 {width:58.333333333%; float: left;}
    .sp4-8 {width:66.666666667%;float: left;}
    .sp4-9 {width:75%; float: left;}    
    .sp4-10{width:83.333333333%; float: left;}
    .sp4-11{width:91.666666667%; float: left;}
    .sp4-12{width:100%;float: left;}      
    /* --------------------------------------> */         
 
}

@media (min-width: 992px) {
    #test{background:green;}
    /* da 992 a 1199 */
    .sp5-1 {width:8.333333333%; float: left;}    
    .sp5-2 {width:16.666666667%; float: left;}
    .sp5-3 {width:25%; float: left;}
    .sp5-4 {width:33.333333333%;float: left;}
    .sp5-5 {width:41.666666667%; float: left;}    
    .sp5-6 {width:50%; float: left;}
    .sp5-7 {width:58.333333333%; float: left;}
    .sp5-8 {width:66.666666667%;float: left;}
    .sp5-9 {width:75%; float: left;}    
    .sp5-10{width:83.333333333%; float: left;}
    .sp5-11{width:91.666666667%; float: left;}
    .sp5-12{width:100%;float: left;}      
    /* --------------------------------------> */         
 
}

@media (min-width: 1200px) {
    #test{background:orange;}
    /* da 1200 a 1399 */
    .sp6-1 {width:8.333333333%; float: left;}    
    .sp6-2 {width:16.666666667%; float: left;}
    .sp6-3 {width:25%; float: left;}
    .sp6-4 {width:33.333333333%;float: left;}
    .sp6-5 {width:41.666666667%; float: left;}    
    .sp6-6 {width:50%; float: left;}
    .sp6-7 {width:58.333333333%; float: left;}
    .sp6-8 {width:66.666666667%;float: left;}
    .sp6-9 {width:75%; float: left;}    
    .sp6-10{width:83.333333333%; float: left;}
    .sp6-11{width:91.666666667%; float: left;}
    .sp6-12{width:100%;float: left;}      
    /* --------------------------------------> */         
 
}

@media (min-width: 1400px) {
    #test{background:crimson;}
    /* da 1400 in su */
    .sp7-1 {width:8.333333333%; float: left;}    
    .sp7-2 {width:16.666666667%; float: left;}
    .sp7-3 {width:25%; float: left;}
    .sp7-4 {width:33.333333333%;float: left;}
    .sp7-5 {width:41.666666667%; float: left;}    
    .sp7-6 {width:50%; float: left;}
    .sp7-7 {width:58.333333333%; float: left;}
    .sp7-8 {width:66.666666667%;float: left;}
    .sp7-9 {width:75%; float: left;}    
    .sp7-10{width:83.333333333%; float: left;}
    .sp7-11{width:91.666666667%; float: left;}
    .sp7-12{width:100%;float: left;}      
    /* --------------------------------------> */         
 
}

.cb{
    clear:both;
}

.bsbb{
    box-sizing:border-box;
}