@font-face {
    font-family: Jaro Cyrillic;
    src: url("jaro-cyrillic.otf") format("opentype");
}
@font-face {
    font-family: Roboto;
    src: url("Roboto-VariableFont_wdth,wght.ttf") format("opentype");
}
@keyframes show {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

body {
	width: 100%;
	margin: 0;
    font-family: Jaro Cyrillic;
}
html {
	scroll-behavior: smooth;
}
a {
    text-decoration: none;
    color: #000;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

header {
    background-color: #fff;
    box-shadow: 0vw 0vw 1vw #00000040;
    height: 3vw;
    padding: 1vw 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo img {
    width: 5.5vw;
    height: 5.5vw;
    margin-right: 1vw;
    margin-top: 2vw;
}
.logo {
    display: flex;
    align-items: center;
}
h1 {
    color: #00a0e3;
    font-weight: normal;
    font-size: 1.5vw;
}
h1 span {
    color: #e31e24;
}
nav {
    display: flex;
    align-items: center;
}
.tel {
    transition: all 0.2s;
    font-size: 0.9vw;
    margin-right: 2vw;
}
.tel:hover {
    color: #07611b;
    font-size: 1vw;
    margin-right: 1.8vw;
}
nav .button {
	max-width: 7vw;
    height: 2vw;
}
nav .button:hover {
    padding-left: 0.7vw;
	width: 6.3vw;
	max-width: 6.3vw;
}
nav .button:hover .many-ico {
    max-width: 1.2vw;
    max-height: 1.2vw;
    right: 0.5vw;
}

main {
    display: flex;
    justify-content: center;
}
#catalog {
    display: flex;
    flex-wrap: wrap;
    width: 60vw;
    justify-content: space-between;
    margin-top: 5vw;
    margin-bottom: 3vw;
}
.cart {
    display: flex;
    flex-direction: column;
    width: 14vw;
    height: 13.85vw;
    transition: all .2s;
    margin-bottom: 2vw;
    padding-bottom: 1vw;
    border-radius: 0.2vw;
}
.cart:hover {
    background-color: #fff;
    box-shadow: 0vw 0vw 1vw #00000040;
}
.cart__img {
    width: 100%;
    min-height: 9vw;
    max-height: 9vw;
    object-fit: cover;
    display: flex;
    flex-direction: column;
    border-radius: 0.2vw;
}
.cart:hover .cart__img {
    border-bottom-right-radius: 0vw;
    border-bottom-left-radius: 0vw;
}
.cart__bottom {
    padding: 0.5vw 0.7vw;
}
.prise {
    font-size: 0.7vw;
    color: #07611b;
    margin-top: 0.2vw;
    margin-bottom: 0.5vw;
    margin-left: 0.08vw;
}
.name {
    font-size: 0.9vw;
    margin-left: 0.03vw;
}

.button {
    cursor: pointer;
	color: #000;
	width: 8vw;
	font-size: 0.8vw;
	transition: all 0.2s;
    background-color: #fff;
    box-shadow: 0vw 0vw 0.2vw #00000030;
    height: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.15vw;
}
.button:hover {
	background-color: #00a0e3;
	color: #fff;
    padding-left: 0.5vw;
	width: 7.5vw;
}
.many-ico {
    max-width: 0vw;
    max-height: 1vw;
    position: relative;
    right: 1.5vw;
    transition: right 0.3s;
}
.button:hover .many-ico {
    max-width: 1vw;
    max-height: 1vw;
    right: 0.5vw;
}

footer {
    background-color: #000;
    height: 3vw;
    box-shadow: 0vw 0vw 1vw #00000040;
}

#popap-mail, .popap-products {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    transition: all 0.8s ease 0s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}
.popap-close {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00000071;
    top: 0;
    left: 0;
    z-index: 2;
}
#popap-mail:target, .popap-products:target {
    opacity: 1;
    visibility: visible;
}
#popap-mail form {
    z-index: 3;
}
#close {
    position: fixed;
    opacity: 0;
    visibility: hidden;
}
#popap-mail form {
    position: relative;
    top: -50vw;
    width: 18vw;
    height: 16vw;
    padding: 2vw;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.2vw;
    transition: all 0.2s;
}
#popap-mail:target form {
    top: 0vw;
}
#popap-mail form input, #popap-mail form textarea, #popap-mail form button {
    width: calc(100% - 1.2vw);
    outline: none;
    padding: 0.6vw;
    border: 0px solid transparent;
    background-color: #fff;
    font-family: Jaro Cyrillic;
    box-shadow: inset 0vw 0vw 0.2vw #00000030;
    transition: all 0.2s;
	font-size: 0.75vw;
    border-radius: 0.15vw;
}
#popap-mail form input:hover, #popap-mail form textarea:hover {
    box-shadow: inset 0vw 0vw 0.5vw #00000030;
}
#popap-mail form textarea {
    resize: none;
    height: 4vw;
	margin-bottom: 0.7vw;
}
#popap-mail form button[type="submit"] {
    cursor: pointer;
	color: #000;
	width: 100%;
	font-size: 0.8vw;
	transition: all 0.2s;
    background-color: #fff;
    box-shadow: 0vw 0vw 0.2vw #00000030;
    height: 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.15vw;
}
#popap-mail form button[type="submit"]:hover {
	background-color: #00a0e3;
	color: #fff;
    padding-left: 1vw;
}
.moto-ico {
    width: 0vw;
    height: 2.5vw;
    position: relative;
    right: 3vw;
    top: 0.44vw;
    transition: right 0.3s;
}
button[type="submit"]:hover .moto-ico {
    width: 2.5vw;
    right: 1vw;
}

.images {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.images img {
    width: 21vw;
    height: 15vw;
    margin: 1vw;
    object-fit: cover;
    border-radius: 0.2vw;
    box-shadow: 0vw 0vw 0.5vw #00000030;
}
.content {
    width: 22vw;
    padding: 2vw;
    background-color: #fff;
    overflow: auto;
    transition: all 0.2s;
    padding-top: 200vh;
    height: calc(100% - 4vw);
}
.popap-products:target .content {
    z-index: 3;
    padding: 2vw;
    margin-top: 0vh;
}
.text {
    font-size: 0.87vw;
    margin: 1vw 0vw;
    font-weight: normal;
    font-family: Roboto;
    letter-spacing: 0.05vw;
}
.content .button {
    width: 100%;
}
.content .button:hover {
    width: calc(100% - 0.5vw);
}

.mail-main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 95vh;
}
.mail-main {
    font-size: 1.5vw;
}
.mail-main .button {
    width: 18vw;
    margin-top: 1vw;
}


@media(max-width: 500px) {
    header {
        box-shadow: 0vw 0vw 3vw #00000040;
        height: 9vw;
        padding: 3vw 5vw;
    }
    .logo img {
        width: 16.5vw;
        height: 16.5vw;
        margin-right: 3vw;
        margin-top: 6vw;
    }
    h1 {
        font-size: 4vw;
    }
    .tel {
        font-size: 2.7vw;
        margin-right: 3vw;
    }
    .tel:hover {
        font-size: 2.7vw;
        margin-right: 3vw;
    }
    nav .button {
        padding-left: 2.1vw;
    	width: 18.9vw;
    	max-width: 18.9vw;
        height: 6vw;
        border-radius: 0.45vw;
    }
    nav .button .many-ico {
        max-width: 3.6vw;
        max-height: 3.6vw;
        right: 1.5vw;
    }
    nav .button:hover {
        padding-left: 2.1vw;
    	width: 18.9vw;
    	max-width: 18.9vw;
    }
    nav .button:hover .many-ico {
        max-width: 3.6vw;
        max-height: 3.6vw;
        right: 1.5vw;
    }

    main {
        display: flex;
        justify-content: center;
    }
    #catalog {
        width: 60vw;
        margin-top: 10vw;
        margin-bottom: 6vw;
    }
    .cart {
        width: 28vw;
        height: 27.7vw;
        margin-bottom: 4vw;
        padding-bottom: 2vw;
        border-radius: 0.4vw;
    }
    .cart__img {
        min-height: 18vw;
        max-height: 18vw;
        border-radius: 0.4vw;
    }
    .cart__bottom {
        padding: 1vw 1.4vw;
    }
    .prise {
        font-size: 1.4vw;
        margin-top: 0.4vw;
        margin-bottom: 1vw;
        margin-left: 0.16vw;
    }
    .name {
        font-size: 1.8vw;
        margin-left: 0.06vw;
    }

    .button {
    	color: #fff;
    	width: 15vw;
    	font-size: 1.6vw;
    	background-color: #00a0e3;
        box-shadow: 0vw 0vw 0.4vw #00000030;
        height: 3vw;
        border-radius: 0.3vw;
    }
    .button:hover {
    	background-color: #00a0e3;
    	color: #fff;
        padding-left: 1vw;
    	width: 15vw;
    }
    .many-ico {
        max-width: 2vw;
        max-height: 2vw;
        right: 3vw;
    }
    .button:hover .many-ico {
        max-width: 2vw;
        max-height: 2vw;
        right: 3vw;
    }
    footer {
        height: 10vw;
    }

    #popap-mail form {
        width: 54vw;
        height: 48vw;
        padding: 6vw;
        border-radius: 0.6vw;
    }
    #popap-mail form input, #popap-mail form textarea, #popap-mail form button {
        width: calc(100% - 3.6vw);
        padding: 1.8vw;
    	font-size: 1.5vw;
        border-radius: 0.45vw;
    }
    #popap-mail form textarea {
        height: 12vw;
    	margin-bottom: 1.4vw;
    }
    #popap-mail form button[type="submit"] {
    	font-size: 1.6vw;
        height: 5vw;
        border-radius: 0.3vw;
    	background-color: #00a0e3;
    	color: #fff;
    }
    #popap-mail form button[type="submit"]:hover {
    	background-color: #00a0e3;
    	color: #fff;
        padding-left: 1vw;
    }
    .moto-ico {
        height: 7.5vw;
        width: 7.5vw;
        right: 3vw;
        top: 1.3vw;
    }
    button[type="submit"]:hover .moto-ico {
        width: 7.5vw;
        right: 3vw;
    }

/*  */
    .images img {
        width: 65vw;
        height: 45vw;
        margin: 3vw 0;
        border-radius: 0.6vw;
    }
    .content {
        width: 66vw;
        padding: 6vw;
        height: calc(100% - 12vw);
    }
    .popap-products:target .content {
        padding: 6vw;
    }
    .text {
        font-size: 2.4vw;
        margin: 3vw 0vw;
        letter-spacing: 0.07vw;
    }
    .content .button {
    	font-size: 2.4vw;
        height: 6vw;
        border-radius: 0.6vw;
    }
    .content .button:hover {
        width: calc(100% - 1vw);
    }
    .content .many-ico {
        max-width: 4vw;
        max-height: 4vw;
        right: 3vw;
    }
    .content .button:hover .many-ico {
        max-width: 4vw;
        max-height: 4vw;
        right: 3vw;
    }

    .mail-main {
        font-size: 4.5vw;
    }
    .mail-main .button {
        width: 54vw;
        margin-top: 3vw;
    }
    .mail-main .button {
    	font-size: 2.4vw;
        height: 6vw;
        border-radius: 0.6vw;
    }
    .mail-main .button:hover {
        width: calc(100% - 1vw);
    }
    .mail-main .many-ico {
        max-width: 4vw;
        max-height: 4vw;
        right: 3vw;
    }
    .mail-main .button:hover .many-ico {
        max-width: 4vw;
        max-height: 4vw;
        right: 3vw;
    }
}