.center-box {
    width: 1200px;
    margin: auto;
  /*  overflow: hidden; */
}

.hatter {
    width: 21%;
}

.one-third {
    width: 33%;
}

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

    
@media only screen and (max-width:768px) {
    
    .center-box {
        width: 100%;
        flex-wrap: wrap;
        /* max-width: none; */
        padding-left: 40px;
        padding-right: 40px;
    }


    .container {
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-right: auto;
        margin-left: auto;
    }
}


@media only screen and (max-width:480px) {
    .center-box {
        padding-left: 40px;
        padding-right: 40px;
    }
}



@media only screen and (max-width: 380px) {
    .center-box {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}



.row{
	display: flex;
	flex-wrap: wrap;
	 padding: 0 4px;
  justify-content: center;
	margin-left: -20px;
	margin-right: -20px;
	
}
.row div[class*=col]{
	/* osztály tartalmazza a következőt: col"*/
	margin-left: 20px;
	margin-right: 20px;
}

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

.col-1-3{
	width: calc(33.33333333% - 40px);
}

.col-1-4{
	width: calc(25% - 40px);
}

.col-1-5{
	width: calc(20% - 40px);
}

.col-1-6{
	width: calc(16.66666667% - 40px);
}
.col-2-3{
	width: calc(66.66666667% - 40px);
}

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

.col-3-4{
	width: calc(75% - 40px);
}

.col-3-5{
	width: calc(60% - 40px);
}

.col-4-5{
	width: calc(80% - 40px);
}

.col-5-6{
	width: calc(83.33333333% - 40px);
}



@media screen and (max-width: 768px){
    .col-1-2{
		width: calc(100% - 40px);
	}
}


@media screen and (max-width: 468px){
	.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% - 40px);
	}
}

.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% - 40px);
}
.column-3 > div{
	width: calc(33.333% - 40px);
}
.column-4 > div{
	width: calc(25% - 40px);
}
.column-5 > div{
	width: calc(20% - 40px);
}
.column-6 > div{
	width: calc(16.66% - 40px);
}
.column-7 > div{
	width: calc(14.28% - 40px);
}
.column-8 > div{
	width: calc(12.5% - 40px);
}
.column-9 > div{
	width: calc(11.11% - 40px);
}

@media screen and (min-width: 768px) and (max-width: 1024px){
	.column-2 > div{
		width: calc(100% - 40px)
	}
	.column-3 > div,
	.column-4 > div{
		width: calc(33.33333333% - 40px)
	}
	.column-5 > div,
	.column-6 > div{
		width: calc(25% - 40px)
	}
	.column-7 > div,
	.column-8 > div{
		width: calc(16.66666667% - 40px)
	}
	.column-9 > div{
		width: calc(14.28571429% - 40px)
	}
}
@media screen and (min-width: 480px) and (max-width: 768px){
	.column-2 > div,
	.column-3 > div{
		width: calc(100% - 40px)
		}
	.column-4 > div{
		width: calc(50% - 40px)
		}
	.column-5 > div,
	.column-6 > div{
		width: calc(33.33333333% - 40px)
		}
	.column-7 > div,
	.column-8 > div{
		width: calc(25% - 40px)
		}
	.column-9 > div{
		width: calc(20% - 40px)
		}
}
@media screen and (max-width: 479px){
	.column-2 > div,
	.column-3 > div,
	.column-4 > div{
	width: calc(100% - 40px)
	}
	.column-5 > div,
	.column-6 > div,
	.column-7 > div,
	.column-8 > div{
	width: calc(50% - 40px)
	}
	.column-9 > div{
	width: calc(33.33333333% - 40px)
	}
}