.center-box {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
}

.row div [class*] {
    margin-left: 1rem;
    margin-right: 1rem;
}


.one-half {
    width: 50%;
}

.one-third {
    width: 33.33%;
}

.two-third {
    width: 66.66%;
}

.one-fourth {
    width: 25%;
}

.three-fourth {
    width: 75%;
}

.one-fifth {
    width: 20%;
}

.two-fifth {
    width: 40%;
}

.three-fifth {
    width: 60%;
}

.four-fifth {
    width: 80%;
}

.one-sixth {
    width: 16.66%;
}

.five-sixth {
    width: 83.33%;
}

.one-half,
.one-third,
.two-third,
.three-fourth,
.one-fourth,
.one-fifth,
.two-fifth,
.three-fifth,
.four-fifth,
.one-sixth,
.five-sixth {
    float: left;
    min-height: 1px;
    padding-left: 20px;
    padding-right: 20px;
}


aside {
    margin-left: 1rem;
    margin-right: 1rem;
}

.col-1-2 {
    width: calc(50% - 2rem);
}

.col-1-3 {
    width: calc(33.33333333% - 2rem);
}

.col-1-4 {
    width: calc(25% - 2rem);
}

.col-1-5 {
    width: calc(20% - 2rem);
}

.col-1-6 {
    width: calc(16.66666667% - 2rem);
}

.col-2-3 {
    width: calc(66.66666667% - 2rem);
}

.col-2-5 {
    width: calc(40% - 2rem);
}

.col-3-4 {
    width: calc(75% - 2rem);
}

.col-3-5 {
    width: calc(60% - 2rem);
}

.col-4-5 {
    width: calc(80% - 2rem);
}

.col-5-6 {
    width: calc(83.33333333% - 2rem);
}



@media screen and (max-width: 768px) {

    .col-1-2,
    .col-1-3,
    .col-1-4,
    .col-1-5,
    .col-1-6,
    .col-2-3,
    .col-2-5,
    .col-3-4,
    .col-3-5,
    .col-4-5,
    .col-5-6 {
        width: calc(100% - 2rem);
    }
}

.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.column-2 > div,
.column-3 > div,
.column-4 > div,
.column-5 > div,
.column-6 > div,
.column-7 > div,
.column-8 > div,
.column-9 > div {
    margin-left: 15px;
    margin-right: 15px;
}

.column-2 > div {
    width: calc(50% - 2rem);
}

.column-3 > div {
    width: calc(33.33333333% - 2rem);
}

.column-4 > div {
    width: calc(25% - 2rem);
}

.column-5 > div {
    width: calc(20% - 2rem);
}

.column-6 > div {
    width: calc(16.66666667% - 2rem);
}

.column-7 > div {
    width: calc(14.28571429% - 2rem);
}

.column-8 > div {
    width: calc(12.5% - 2rem);
}

.column-9 > div {
    width: calc(11.11111111% - 2rem);
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .column-2 > div {
        width: calc(50% - 2rem);
    }

    .column-3 > div,
    .column-4 > div {
        width: calc(33.33333333% - 2rem);
    }

    .column-5 > div,
    .column-6 > div {
        width: calc(25% - 2rem);
    }

    .column-7 > div {
        width: calc(20% - 2rem);
    }

    .column-8 > div {
        width: calc(16.66666667% - 2rem);
    }

    .column-9 > div {
        width: calc(14.28571429% - 2rem);
    }

   /* .col-1-4 {
        width: calc(50% - 2rem);
    }*/
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .column-2 > div {
        width: calc(100% - 2rem);
    }

    .column-3 > div,
    .column-4 > div {
        width: calc(50% - 2rem);
    }

    .column-5 > div,
    .column-6 > div {
        width: calc(33.33333333% - 2rem);
    }

    .column-7 > div,
    .column-8 > div {
        width: calc(25% - 2rem);
    }

    .column-9 > div {
        width: calc(20% - 2rem);
    }

    .col-1-3,
    .col-1-4 {
        width: calc(50% - 2rem);
    }
}

@media screen and (max-width: 479px) {

    .column-2 > div,
    .column-3 > div,
    .column-4 > div {
        width: calc(100% - 2rem);
    }

    .column-5 > div,
    .column-6 > div,
    .column-7 > div,
    .column-8 > div {
        width: calc(50% - 2rem);
    }

    .column-9 > div {
        width: calc(33.33333333% - 2rem);
    }
}

/* No margin */

.no-margin, .no-margin > div {
    margin: 0!important;
}

.no-margin .col-1-2 {
    width: 50%
}

.no-margin .col-1-3 {
    width: 33.33333333%;
}

.no-margin .col-1-4 {
    width: 25%
}

.no-margin .col-1-5 {
    width: 20%
}

.no-margin .col-1-6 {
    width: 16.66666667%
}

.no-margin .col-2-3 {
    width: 66.66666667%
}

.no-margin .col-2-5 {
    width: 40%
}

.no-margin .col-3-4 {
    width: 75%
}

.no-margin .col-3-5 {
    width: 60%
}

.no-margin .col-4-5 {
    width: 80%
}

.no-margin .col-5-6 {
    width: 83.33333333%
}

@media screen and (max-width: 768px) {

    .no-margin .col-1-2,
    .no-margin .col-1-3,
    .no-margin .col-1-4,
    .no-margin .col-1-5,
    .no-margin .col-1-6,
    .no-margin .col-2-3,
    .no-margin .col-2-5,
    .no-margin .col-3-4,
    .no-margin .col-3-5,
    .no-margin .col-4-5,
    .no-margin .col-5-6 {
        width: 100%
    }
}


.no-margin.column-2 > div {
    width: 50%
}

.no-margin.column-3 > div {
    width: 33.33333333%
}

.no-margin.column-4 > div {
    width: 25%
}

.no-margin.column-5 > div {
    width: 20%
}

.no-margin.column-6 > div {
    width: 16.66666667%
}

.no-margin.column-7 > div {
    width: 14.28571429%
}

.no-margin.column-8 > div {
    width: 12.5%
}

.no-margin.column-9 > div {
    width: 11.11111111%
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .no-margin.column-2 > div {
        width: 100%
    }

    .no-margin.column-3 > div,
    .no-margin.column-4 > div {
        width: 33.33333333%
    }

    .no-margin.column-5 > div,
    .no-margin.column-6 > div {
        width: 25%
    }

    .no-margin.column-7 > div {
        width: 20%
    }

    .no-margin.column-8 > div {
        width: 16.66666667%;
    }

    .no-margin.column-9 > div {
        width: 14.28571429%;
    }

    .no-margin.col-1-4 {
        width: 50%
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .no-margin.column-2 > div {
        width: 100%
    }

    .no-margin.column-3 > div,
    .no-margin.column-4 > div {
        width: 50%
    }

    .no-margin.column-5 > div,
    .no-margin.column-6 > div {
        width: 33.33333333%
    }

    .no-margin.column-7 > div,
    .no-margin.column-8 > div {
        width: 25%
    }

    .no-margin.column-9 > div {
        width: 20%
    }

    .no-margin.col-1-3,
    .no-margin.col-1-4 {
        width: 50%
    }
}

@media screen and (max-width: 479px) {

    .no-margin.column-2 > div,
    .no-margin.column-3 > div,
    .no-margin.column-4 > div {
        width: 100%
    }

    .no-margin.column-5 > div,
    .no-margin.column-6 > div,
    .no-margin.column-7 > div,
    .no-margin.column-8 > div {
        width: 50%
    }

    .no-margin.column-9 > div {
        width: 33.33333333%
    }
}

/* Mobilon pedig minden 100%-ra ugrik */

@media only screen and (min-width: 768px) and (max-width: 1200px){
    .center-box {
        width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .center-box {
        width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }
    .one-half,
    .one-third,
    .two-third,
    .three-fourth,
    .one-fourth,
    .one-fifth,
    .two-fifth,
    .three-fifth,
    .four-fifth,
    .one-sixth,
    .five-sixth {
        position: relative;
        float: none;
        width: 100%;
    }
}