.line{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    flex: 1;
}
.rec-auto{
    flex: 0 0 auto;
    width: auto;
}
.rec-1{
    flex: 0 0 auto;
    width: 8.3%;
}
.rec-2{
    flex: 0 0 auto;
    width: 16.6%;
}
.rec-3{
    flex: 0 0 auto;
    width: 25%;
}
.rec-4{
    flex: 0 0 auto;
    width: 33.3%;
}
.rec-5{
    flex: 0 0 auto;
    width: 41.6%;
}
.rec-6{
    flex: 0 0 auto;
    width: 50%;
}
.rec-7{
    flex: 0 0 auto;
    width: 58.3%;
}
.rec-8{
    flex: 0 0 auto;
    width: 66.6%;
}
.rec-9{
    flex: 0 0 auto;
    width: 75%;
}
.rec-10{
    flex: 0 0 auto;
    width: 83.3%;
}
.rec-11{
    flex: 0 0 auto;
    width: 91.6%;
}
.rec-12{
    flex: 0 0 auto;
    width: 100%;
}
@media (min-width: 100px) and (max-width: 991px) {
    .site-container{
        padding: 0 5%;
        width: auto;        
    }
    .line{
        flex-direction: column;
    }
    .rec-1{
        width: 100%;
    }
    .rec-2{
        width: 100%;
    }
    .rec-3{
        width: 100%;
    }
    .rec-4{
        width: 100%;
    }
    .rec-5{
        width: 100%;
    }
    .rec-6{
        width: 100%;
    }
    .rec-7{
        width: 100%;
    }
    .rec-8{
        width: 100%;
    }
    .rec-9{
        width: 100%;
    }
    .rec-10{
        width: 100%;
    }
    .rec-11{
        width: 100%;
    }
    .rec-12{
        width: 100%;
    }
}