html {
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0 auto;
    background: #ffffff;
    height: 100%;
}
.containerfull {width: 100%;}
.container {width: 1200px; margin: 0 auto; text-align: center;}
.header { 
    text-align: center;
    background: #FFF4F8;
    border-bottom: 6px solid #5a2b1c;
    height: 100%;
    width: 100%;
}

.tablet {display: none;}
.mobil {display: none;}

.text { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 30px; padding: 20px 0;}
.text span{ font-size: 20px; font-weight: 600; display: block; padding: 10px 0;}

.brands ul {list-style-type: none;margin: 30px 0; padding: 0 15px;}
.brands ul li {float: left; margin: 20px 10px;}
.brands ul li a {position: relative;  width: 270px; display: block; height: 427px; }
.brands ul li img {width:270px;display:block; position: absolute;}
.brands ul li a span {position: absolute; display: inline-block; bottom: 10px; left:50%; right: 50%; width: 270px; margin: 0 0 0 -135px; font-size: 16px; color: #585858; font-family: 'Open Sans', sans-serif; font-weight: 600;}


@media only screen and (max-width: 375px)  and (min-width: 360px) {
    .container {width: 100%;}
    .brands ul li a {width: 150px;height: 237px; }
    .brands ul li img {width:150px;}
    .brands ul li a span {font-size: 13px;bottom: 5px;width: 150px; margin: 0 0 0 -75px; }
    .web {display: none;}
    .tablet {display: none;}
    .mobil {display: block;}
    .mobil img {width: 100%;}
}

@media only screen and (max-width: 600px) and (min-width: 376px){
    .container {width: 100%;}
    .brands ul li a {width: 160px;height: 252px; }
    .brands ul li img {width:160px;}
    .brands ul li a span {font-size: 14px;bottom: 5px; width: 160px; margin: 0 0 0 -80px; }
    .web {display: none;}
    .tablet {display: none;}
    .mobil {display: block;}
    .mobil img {width: 100%;}
}

@media  only screen and (max-width: 768px) and (min-width:600px){
    .container {width: 100%;}
    .brands ul li a {width: 226px;height: 357px; }
     .brands ul li img {width:226px;}
    .brands ul li a span {width: 226px; margin: 0 0 0 -113px; }
    .web {display: none;}
    .mobil {display: none;}
    .tablet img {width: 100%;}
    .tablet {display: block;}
}

@media  only screen and (max-width: 1024px) and (min-width:769px){
    .container {width: 100%;}
    .brands ul li a {width: 228px;height: 360px; }
     .brands ul li img {width:228px;}
    .brands ul li a span {width: 228px; margin: 0 0 0 -114px; }
    .web {display: none;}
    .mobil {display: none;}
    .tablet {display: block;}
    .tablet img {width: 100%;}
}