div,span.body,input,li,ul,textarea {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}

html { height: 100%; min-height:100%;
    font-family: 'Oswald', sans-serif;
}
body {min-height:100%;
    margin: 0;
    background-size: cover;
    background-attachment: fixed;
}

h1{color: #ff2700;    letter-spacing: 1pt; }
h1, .btn{font-family: 'Anton', sans-serif;}

#page{width: 100%;}


.menu{margin: 10px auto 10px auto;  max-width: 1400px;  border-radius:3px; padding: 20px 20px;}

.menu .btn{color:rgba(196,64,119,1); background: white; float: right; margin: 0 0 0 10px; opacity: .6;}
.menu .btn.act{ opacity: 1;}

.itemslist{ display: grid;  grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px; }

.item{ transition: all 200ms ease-in-out;   }
.item.active0{opacity: .5;}
.item .item-in{ padding: 20px 20px 50px 20px; transition: all 200ms ease-in-out; height: 100%;   display: flex; flex-direction: column; position: relative; }
.item:hover .item-in{    box-shadow: 0px 10px 40px 0px #00000014; transform: translate(0px,-4px); }
.item .photo {}
.item .photo img{max-width: 100%; }
.item h2{    font-size: 16pt;text-transform: uppercase;margin: 10px 0;color: #404040;}
.item h3{    font-size: 12pt;margin: 0;color: #848484;font-weight: bold;}
.item .note{ font-size: 10pt; color: #404040; padding: 10px 0 20px 0; }
.item .info{ font-size: 10pt; font-weight: bold; position: absolute; bottom: 0; width: 100%; left: 0; padding: 0 20px 20px 20px; }
.item .info .size{display:block; float:left;}
.item .info .size span{    display: inline-block;background: #d6d6d6;padding: 4px 12px;color: white;border-radius: 15px; }
.item .info .color {display:block; float:right;}
.item .info .color span{display:inline-block; overflow: hidden; border-radius: 15px; }
.item .info .color span span{float:left; width: 27px; height: 27px;border-radius: 0; }

.content{margin: 10px auto 100px auto; background: white; max-width: 1400px; }


.footer{margin: 100px auto 100px auto; padding: 20px;}
.footer .footerline{font-size: 10pt; color: #848484; text-align: right; }
.footer .footerline a{ color: #848484;  }


.btn {display: inline-block; padding:10px 20px; background: #ff2700 ; color:white; text-decoration: none; cursor: pointer; transition: all 200ms ease-in-out; }
.btn:hover{opacity: .8;}
.btn.act{ opacity: .6;}

textarea {height: 100px; background: #e8e8e8; word-break: break-all; border:none; width: 100%;border-radius:3px;   padding: 10px; font-size: 10pt;  display: block; margin: 10px 0 0 0;}
select {-webkit-appearance: none; font-family:AvenirD;  border:none;  border-radius:3px; display:inline-block; width: 50%; font-size: 11pt; padding: 10px;   margin: 10px 0 0 0;}
input { font-family:AvenirD;  background: #e8e8e8;   border:none;  border-radius:3px; display:inline-block; width: 50%; font-size: 11pt; padding: 10px;   margin: 10px 0 0 0;}

.clear {
    clear: both; }




.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11 {min-height:1px; float: left;  position: relative;}
.col-1:after,.col-2:after,.col-3:after,.col-4:after,.col-5:after,.col-6:after,.col-7:after,.col-8:after,.col-9:after,.col-10:after,.col-11:after{ content: " "; clear: both; display: block; }

.col-1 { width: 8.333333333333332%; }
.col-2 { width: 16.666666666666664%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333333333%; }
.col-5 { width: 41.66666666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333333336%; }
.col-8 { width: 66.66666666666666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333333334%; }
.col-11 { width: 91.66666666666666%; }
.col-12 { width: 100%; }


@media screen and (max-width: 1020px) {
    .itemslist{  grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 720px) {
    .itemslist{  grid-template-columns: repeat(2, 1fr); }
}

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

    .itemslist{  grid-template-columns: repeat(1, 1fr); }
}

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


    .col-4 {  width: 100%;  }
    .col-6, .col-5, .col-7 {  width: 100%;  float: none;  }
    .col-6 .list-box{ margin: 0 0 15px 0; }
    .col-2, .col-3 {  width: 50%;    }
}


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


}

@media screen and (max-width: 340px) {
    .col-2, .col-3 {  width: 100%;   }
    .col-1{  width: 50%;    }

}