@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
        url('../fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2'),
        url('../fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


* {
    margin: 0;
    padding: 0;
}

html{
    font-size: 1px;
}

body {
    position: relative;
    background-image: url(../img/background.JPG);
    padding: 0rem 12%;
    font-family: 'Montserrat';
}

.header {
    position: fixed;
    width: 76%;
    padding: 00;
    background-color: #bac92a;
    box-sizing: border-box;
    z-index: 2;
}

.flex {
    display: flex;
 
}

.flex_between {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.flexus {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25rem;
}

.listheader {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color:#bac92a;
    gap: 15rem;
}

.listheader a {
    font-size: 16rem;
    color: #f8f8f8;
}

.listheader a:hover {
    text-decoration: underline;
}

.listheader li {
    padding: 10rem;
}
main {
    padding-top: 58rem;
    background-color:#fff;
}

ul {
    list-style: none;
}

a {
    font-size: 16rem;
    line-height: 18rem;
    text-decoration: none;
}

.wrapper {
    padding: 0rem 50rem;
}

.banner img{
    width: 100%;
    padding-bottom: 10rem;
}

.tovar_list {
    padding: 10rem 0rem;
    background-color: #d44138;
}

.tovar_list a {
    font-size: 20rem;
    color: #ffffff;
}
.tovar_list a:hover {
    color: #f5ec72;
}
.kastomopus {
    font-size: 16rem;
    padding: 10rem 50rem;
    text-align: center;
}
.keychain h2 {
    font-size: 25rem;
    padding-bottom: 20rem;
}
.kustominfo {
    padding: 20rem;
}
.keychain p {
    font-size: 16rem;
    width: 360rem;
}
.keychain img {
    width: 300rem;
}
.keychain {
    justify-content: center;
    padding: 20rem 50rem;
}
.kastom_akril {
    display: grid;
    justify-content: center;
    grid-template-areas: 
    'hsidebar header header'
    'sidebar footer footer';
    align-items: center;
    gap: 10rem;
    padding: 10rem;
}

.kastom_akril h2 {
    font-size: 25rem;
    font-weight: 500;
    text-align: center;
}

.side {
    grid-area: sidebar;
    width:270rem;
}

.head {
    grid-area: header;
    width: 316rem;
}

.footer {
    grid-area: footer;
    width: 316rem;
}
.tovar_info h3 {
    font-size: 20rem;
    font-weight: 500;
}

.tovar_main {
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20rem;
}

.tovar {
    width: 250rem;
    background-color: white;
    padding: 10rem 10rem 20rem 10rem;
    transition: transform 0.5s ease;
}
.tovar:hover{
    transform: scale(1.1);
    box-shadow: 0 0 30px #8492d4;
}

.tovar img {
    max-width: 250rem;
    padding-bottom: 6rem;
    border-radius: 30rem;
}

.tovar_info {
    display: flex;
    align-items: center;
    padding-top: 10rem;
    gap: 57rem;
}

.tovarlogo {
    font-size: 20rem;
    font-weight: 500;
    color: black;
}

.tovar_info p {
    font-size: 17rem;
    color: #92a420
}

.tovar_info .nope {
    color: rgb(177, 32, 32);
}
.kartca {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.black, .dark, .dark_kastom{
    display: none;
    position: fixed;
    inset: 0;
    opacity: 0.6;
    background: #000;
    z-index: 2;
}


.bc {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 950rem;
    height: 500rem;
    padding:  45rem 30rem;
    box-sizing: border-box;
    border-radius: 40rem;
    background-color: #fff;
    opacity: 1;
    z-index: 3;
}

.bc img {
    width: 420rem;
    border-radius: 20rem;
}

.kartca_info {
    padding: 20rem 25rem;
}

.nazva {
    font-size: 31rem;
    font-weight: 400;
    padding-bottom: 35rem;
}

.price {
    font-size: 25rem;
    font-weight: 500;
    padding-bottom: 45rem;
}

.info {
    padding-top: 20rem;
}

.info li {
    padding-top: 10rem;
}

.canel svg {
    position: absolute;
    width: 35rem;
    height: 35rem;
    top: 4%;
    right: 3%;
}

.kartca_info a {
    position: absolute;
    bottom: 7%;
    right:3%;
    padding: 12rem 36rem;
    color: #fff;
    background-color: #669d0b;
}

.kartca_info a:hover {
    background-color: #0c7c25;
}

footer {
    padding: 5rem 0;
    background-color: #d44138;
}

.sos {
    display: flex;
    align-items: center;
    gap: 10rem;
}

.sos svg {
    fill: #221505;
}

.sos svg:hover {
    fill: #bac92a;
}

.none {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20rem;
    height: 300rem;
}

.none img {
    width: 250rem;
}

.none p {
    font-size: 20rem;
    color: #221505;
}

.predinfor {
    font-size: 15rem;
    padding-bottom: 5rem;
    color: #1e7516;
}

.sidehide, .footerhide, .headhide{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400rem;
    z-index: 2;
}

.lazy {
    width: 100%;
}


.blur_img img {
    background-position: center;
    background-size: cover;
    opacity: 0;
}

.blur_img.loaded img {
    opacity: 1;
}

.information {
    padding: 10rem 50rem;
    box-sizing: content-box;
}

.information p {
     font-size: 15rem;
}

.infoblock {
    justify-content: center;
    align-items: center;
}

.infoblock1 p {
    max-width: 500rem;
}

.information img {
    width: 300rem;
}

.thanks {
    font-size: 20rem;
    text-align: center;
    font-weight: 500;
    padding: 50rem 10rem;
}

.other {
    padding-bottom: 20rem;
    text-align: center;
}

.sos svg {
    fill: rgb(255, 255, 255);
}

.thumbs{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10rem 20rem;
    gap:10rem;
}

.thumbs img {
    width: 100rem;
    height: 100rem;
}

.thumb{
    width:70rem;
    cursor:pointer;
    border:2rem solid transparent;
}

    .thumb:hover{
        border: 4rem solid #8bce1f;
        transition-duration: 0.5s;
    
    }

 @media screen  and (min-width: 280px){
    html {
        font-size: .3px;
    }

   body {
        padding: 0rem 0%;
    }

    .header {
        width: 100%;
    }

    main {
        padding-top: 197rem;
    }
    .cancelheader {
        position: fixed;
        top: 3%;
        right: 3%;
    }

    .info {
        font-size: 40rem;
        padding-top: 20rem;
    }
    .listheader {
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
        width: 50%;
        background-image: url(../img/lol.JPG);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        z-index: 2;
    }

    .tovar_main {
        padding-bottom: 30%;
        background-image: url(../img/lol2.JPG);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    .kastomopus {
        font-size: 40rem;
        padding: 10rem 50rem;
        text-align: center;
    }
    .keychain {
        flex-direction: column;
    }
    .keychain h2 {
        text-align: center;
        font-size: 60rem;
        padding-bottom: 20rem;
        font-weight: 500;
    }
    .kustominfo {
        padding: 20rem;
    }
    .keychain p {
        font-size: 35rem;
        width: 100%;
    }
    .keychain img {
        width: 100%;
    }
    .keychain {
        padding: 20rem 50rem;
    }

    .kastom_akril {
        display: grid;
        justify-content: center;
        grid-template-areas: 
        'hsidebar header header'
        'sidebar footer footer';
        align-items: center;
        gap: 10rem;
        padding: 10rem;
    }

    .kastom_akril h2 {
        font-size: 25rem;
        font-weight: 500;
        text-align: center;
    }

    .side {
        grid-area: sidebar;
        width:270rem;
    }

    .head {
        grid-area: header;
        width: 316rem;
    }

    .footer {
    grid-area: footer;
    width: 316rem;
    }

    .listheader ul{
        position: fixed;
        display: flex;
        flex-direction: column;
        top: 10%;
        left: 54%;
        padding: 10rem 5rem;
        z-index: 3;
        gap: 30rem;
    }

    .listheader li {
        padding-top: 30rem;
    }

    .listheader a {
        font-size: 50rem;
    }

    .soc {
        display: flex;
        flex-direction: column;
        padding-top:20rem ;
    }

    .soss {
        padding-bottom: 130%;
    }

    .tovar_info {
        font-size: 30rem;
        display: flex;
        align-items: center;
        padding-top: 10rem;
        gap: 57rem;
        }

    .tovar {
        width: 40%;
        margin-top: 40rem;
        margin-left: 15rem;
        margin-right: 15rem;
        border-radius: 40rem;
        border: 10rem solid rgb(57, 83, 139);
        padding: 40rem 30rem;
    }

    .tovar img {
        max-width: 100%;
        padding-bottom: 6rem;
    }

    .tovarlogo {
            font-size: 60rem;
            color: black;
            padding-bottom: 20rem;
        }

    .tovar_info {
        font-size: 27rem;
        display: flex;
        align-items: center;
        padding-top: 10rem;
        gap: 57rem;
    }

    .tovar_info p {
            font-size: 40rem;

        }

        .flexus {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 65rem;
            }

.tovar_info h3 {
    font-size: 50rem;
}

.tovar_list {
    padding: 50rem 0rem;
}

.tovar_list a {
    font-size: 60rem;
}

.preddata {
    padding: 30rem;
    font-size: 60rem;
    font-weight: 500;
    text-align: center;
}

.canel svg {
    fill: white;
    position: absolute;
    width: 65rem;
    height: 65rem;
    top: -6%;
    right: 5%;
}

     .bc {
        position: fixed;
        top: 50%;
        width: 100%;
        height: 95%;
        overflow-y: auto;
        flex-direction: column;
    }

    .nazva {
        font-size: 65rem;
        font-weight: 400;
        padding-bottom: 25rem;
        }

    .bc img {
        width: 100%;
    }

    .price {
            font-size: 65rem;
            font-weight: 500;
            padding-bottom: 25rem;
        }

    .kartca_info a {
        position: relative;
        right: 0;
        bottom: 0;
        display: block;
        margin: 40rem 0;
        padding: 55rem;
        text-align: center;
        font-size: 45rem;
        border-radius: 15rem;
    }

    .info {
        font-size: 50rem;
        padding-top: 10rem;
    }

    .thumbs {
        padding: 50rem 20rem;

}
      .thumbs img {
        border: 1px pink;
        width: 230rem;
        height: 230rem;
    }
            
    footer a {
            font-size: 46rem;
            color: #ffffff;
        }

    .sidehide, .footerhide, .headhide{
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;

}
.predinfor {
    font-size: 45rem;
    padding-bottom: 25rem;
    color: #1e7516;
}

.information p, a {
     font-size: 55rem;
}

.infoblock {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.infoblock1 p {
    max-width: 100%;
}

.information img {
    width: 100%;
}

.thanks {
    font-size: 60rem;
    text-align: center;
    font-weight: 500;
    padding: 50rem 10rem;
}

.other {
    padding-bottom: 80rem;
}

.other p {
    padding-bottom: 50rem;
    text-align: center;
}
 }

 @media screen  and (min-width: 422px){

    html {
        font-size: .6px;
    }

      footer a {
            font-size: 24rem;
        }
    .preddata {
        padding: 30rem;
        font-size: 40rem;
        font-weight: 500;
        text-align: center;
    }

    body {
        padding: 0rem 0%;
    }

    main {
        padding-top: 100rem;
    }
    .cancelheader {
        position: fixed;
        top: 3%;
        right: 3%;
        
    }
    .listheader {
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
        width: 50%;
        z-index: 2;
    }
          

    .listheader ul{
        position: fixed;
        display: flex;
        flex-direction: column;
        top: 10%;
        left: 54%;
        padding: 10rem 5rem;
        z-index: 3;
    }

    .listheader li {
        padding-top: 30rem;
    }

    .listheader a {
        font-size: 30rem;
    }

    .soc {
        display: flex;
        flex-direction: column;
        padding-top:20rem ;
    }

    .soss {
        padding-bottom: 130%;
    }

     .tovar_info {
        font-size: 30rem;
        display: flex;
        align-items: center;
        padding-top: 10rem;
        gap: 57rem;
            }

    .tovar {
        width: 40%;
        margin-top: 40rem;
        margin-left: 10rem;
        margin-right: 10rem;
        border-radius: 40rem;
        border: 7rem solid rgb(57, 83, 139);
        padding: 30rem 10rem;
    }

    .tovar_info h3 {
        font-size: 30rem;
    }
    .tovar img {
        /* max-width: 250rem; */
        max-width: 100%;
        padding-bottom: 6rem;
    }

    .tovarlogo {
        font-size: 30rem;
        color: black;
        padding-bottom: 5rem;
    }
    .tovar_info {
        font-size: 27rem;
        display: flex;
        align-items: center;
        padding-top: 10rem;
        gap: 57rem;
    }

    .tovar_info p {
        font-size: 17rem;
    }

    .flexus {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 25rem;
}

.tovar_list {
    padding: 20rem 0rem;
}

.tovar_list a {
    font-size: 30rem;
}

    .bc {
        position: fixed;
        width: 100%;
        height: 90%;
        flex-direction: column;
        overflow-y: auto;
    }

.canel svg {
    position: absolute;
    width: 55rem;
    height: 55rem;
    right: 3%;
    fill: #ffffff;
}


.bc img {
    width: 100%;
}
.nazva {
        font-size: 65rem;
        font-weight: 400;
        padding-bottom: 25rem;
    }

    .price {
        font-size: 55rem;
        font-weight: 500;
        padding-bottom: 25rem;
    }

    .kartca_info a {
        /* width: 88%; */
        /* bottom: 30rem; */
        padding: 25rem;
        text-align: center;
        font-size: 30rem;
        margin: 10rem;
    }

.info {
    font-size: 45rem;
    padding-top: 10rem;
    overflow-wrap: anywhere;
}

.thumbs img {
    width: 160rem;
    height: 160rem;
}

    .thumbs {
        padding: 50rem 0rem;
    }
    .predinfor {
        font-size: 28rem;
        padding-bottom: 5rem;
        color: #1e7516;
    }

    .information p, a {
     font-size: 35rem;
}

    .thanks {
        font-size: 40rem;
    }
}

@media screen  and (min-width: 640px){
    html {
        font-size: 1px;
    }

      footer a {
            font-size: 19rem;
        }

    .predinfor {
        font-size: 18rem;
        padding-bottom: 5rem;
        color: #1e7516;
    }

      .tovar_list {
        padding: 10rem 0rem;
}

main {
    padding-top: 60rem;
}
.tovar_info h3 {
    font-size: 24rem;
}

.tovar_list a {
    font-size: 20rem;
}


.tovar {
    padding: 20rem 10rem;
}

.tovar {
    border: 3rem solid rgb(57, 83, 139);
}

.tovar img {
    padding-bottom: 6rem;
}

.tovar_info {
    display: flex;
    align-items: center;
    padding-top: 10rem;
    gap: 5zrem;
}

.tovarlogo {
    font-size: 20rem;
    color: black;
}

.tovar_info p {
    font-size: 12rem;
}

.preddata {
    padding: 30rem;
    font-size: 30rem;
    font-weight: 500;
    text-align: center;
}


    .nazva {
        font-size: 35rem;
        font-weight: 400;
        padding-bottom: 25rem;
        }


    .price {
        font-size: 25rem;
        font-weight: 500;
        padding-bottom: 15rem;
        }

    .kartca_info a {
        padding: 15rem;
        text-align: center;
        font-size: 30rem;
    }

    .information p, a {
         font-size: 25rem;
}

    .thanks {
        font-size: 30rem;
    }

    .info {
        font-size: 25rem;
    }
}
        
@media screen  and (min-width: 768px){
    html {
        font-size: .9px;
    }

    .predinfor {
        font-size: 16rem;
        padding-bottom: 5rem;
        color: #1e7516;
    }
    .preddata {
        padding: 30rem;
        font-size: 30rem;
        font-weight: 500;
        text-align: center;
    }
    .tovar_list {
        padding: 10rem 0rem;
    }

    .tovar_list a {
        font-size: 20rem;
    }

    .tovar {
        width: 40%;
        padding: 30rem 20rem;
    }

.tovar img {
    padding-bottom: 20rem;
}

.tovar_info {
    display: flex;
    align-items: center;
    padding-top: 10rem;
    gap: 57rem;
}

.tovarlogo {
    font-size: 25rem;
    color: black;
}

.tovar_info p {
    font-size: 20rem;
}

.tovar_info .nope {
    color: rgb(177, 32, 32);
}

.bc { 
        top: 52%;
        display: flex;
        width: 85%;
        height: 90%;

        overflow-y: auto;
        flex-direction: column;
    }

    .nazva {
        font-size: 35rem;
        font-weight: 400;
        padding-bottom: 15rem;
    }

    .price {
        font-size: 35rem;
        font-weight: 500;
        padding-bottom: 15rem;
}

    
    .kartca_info a {
        padding: 20rem;
        text-align: center;
        font-size: 30rem;
    }

      .sidehide, .footerhide, .headhide{
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;

}
}

@media screen  and (min-width: 1024px){
    html {
        font-size: 1px;
    }

    body {
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url(../img/background.JPG);
        background-attachment: fixed;
        padding: 0rem 12%;
        font-family: 'Montserrat';
    }

    .header {
        width: 76%;
    }
    .sekret {
        display: none;
    }
        .listheader {
            position: relative;
            right: 0;
            top: 0;
            z-index: 2;
    }

    .keychain {
        flex-direction: row;
    }

    .kastomopus {
        font-size: 16rem;
        padding: 10rem 50rem;
        text-align: center;
    }
.keychain h2 {
    font-size: 25rem;
    padding-bottom: 20rem;
}
.kustominfo {
    padding: 20rem;
}
.keychain p {
    font-size: 16rem;
    width: 360rem;
}
.keychain img {
    width: 300rem;
}
.keychain {
    padding: 20rem 50rem;
}

.kastom_akril {
    display: grid;
    justify-content: center;
    grid-template-areas: 
    'hsidebar header header'
    'sidebar footer footer';
    align-items: center;
     gap: 10rem;
     padding: 10rem;
}

.kastom_akril h2 {
    font-size: 25rem;
    font-weight: 500;
    text-align: center;
}

.side {
    grid-area: sidebar;
    width:270rem;
}

.head {
    grid-area: header;
    width: 316rem;

}

.footer {
    grid-area: footer;
    width: 316rem;
}

    .listheader ul{
        position:relative;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: row;
        padding: 10rem 5rem;
        z-index: 1;
        gap: 1px;
    }

    .listheader li {
        padding-top: 30rem;
    }

    .listheader a {
        font-size: 40rem;
    }

    .burger {
        display: none;
    }

    .listheader {
        display: flex;
        background-image: none;
        justify-content: flex-end;
        align-items: center;
        gap: 1rem;
        z-index: 1;
}

.listheader a {
    font-size: 16rem;
}

.listheader li {
    padding: 10rem;
}
    .tovar_list {
        padding: 10rem 0rem;
}

main {
    padding-top: 58rem;
}
.soc, .cancelheader {
    display: none;
}
.tovar_list a {
    font-size: 20rem;
}


.tovar_main {
    flex-wrap: wrap;
    background-image: none;
    justify-content: center;
}

.tovar {
    width: 250rem;
    margin: 0;
    border: none;
    background-color: white;
    padding: 10rem 10rem 20rem 10rem;
    transition: transform 0.5s ease;
}

.tovar img {
    max-width: 250rem;
    padding-bottom: 12rem;
}

.tovar_info {
    display: flex;
    align-items: center;
    padding-top: 10rem;
    gap: 57rem;
}

.tovarlogo {
    font-size: 20rem;
    color: black;
}

.tovar_info p {
    font-size: 17rem;
}

.tovar_info .nope {
    color: rgb(177, 32, 32);
}

    .bc {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 895rem;
        height: 450rem;
        padding: 25rem 30rem;
        box-sizing:content-box;
        border-radius: 40rem;
        background-color: #fff;
        overflow: hidden;
        flex-direction: row;
        opacity: 1;
        z-index: 2;
    }

.bc img {
    width:450rem;
}

.thumbs img {
    width: 70rem;
    height: 70rem;
}

.kartca_info {
    padding: 20rem 25rem;
}

.info {
    padding-top: 20rem;
}

.info li {
    padding-top: 10rem;
}

.canel svg {
    position: absolute;
    width: 35rem;
    height: 35rem;
    top: 4%;
    right: 3%;
}

    .kartca_info a {
        position: absolute;
        bottom: 5%;
        left: 71%;
        padding: 10rem 26rem;
        margin: 0;
        color: #fff;
        background-color: #669d0b;
        text-align: center;
        font-size: 15rem;
        width: 20%;
    }

.kartca_info {
    width: 45%;
    padding: 20rem 25rem;
}

.nazva {
    font-size: 25rem;
    font-weight: 400;
    padding-bottom: 25rem;
}

    .price {
        font-size: 29rem;
        font-weight: 500;
        padding-bottom: 25rem;
    }

.info {
    width: 400rem;
    font-size: 15rem;
    padding-top: 20rem;
}

.info li {
    padding-top: 10rem;
}

.canel svg {
    fill: #2b1802;
    position: absolute;
    width: 35rem;
    height: 35rem;
    top: 4%;
    right: 3%;
}

    .thumbs {
        max-width: 80%;
        justify-content: flex-start;
        padding: 30rem 0rem;
    }

.sidehide, .footerhide, .headhide{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500rem;
    z-index: 2;
}

  footer a {
    font-size: 17rem;
}

.information {
    padding: 10rem 50rem;
    box-sizing: content-box;
}

.information p , a{
     font-size: 15rem;
}

.infoblock {
    justify-content: center;
    align-items: center;
}

.infoblock1 p {
    max-width: 500rem;
}

.information img {
    width: 300rem;
}

.thanks {
    font-size: 20rem;
    text-align: center;
    font-weight: 500;
    padding: 50rem 10rem;
}

.other {
    padding-bottom: 20rem;
    text-align: center;
}
}

@media screen  and (min-width: 1200px){
    html {
        font-size: 1.1px;
    }


}

@media screen  and (min-width: 1920px){
    html {
        font-size: 1.5px;
    }
}

@media screen  and (min-width: 2200px){
    html {
        font-size: 1.7px;
    }
}