html,body {
height: max-content;
min-height: 100%;
margin: 0;
padding: 0 0 50vh 0;
overflow: auto;
background: linear-gradient(180deg, rgb(172, 183, 185), #768786) no-repeat;
font-family: 'adobe-garamond-pro', serif;
}
header {
position: absolute;
top: 0;
left: 0;
z-index: 5000;
width: 100%;
height: 23vh;
background-image: url(/images/header.jpg);
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.75);
margin-bottom: 0px;
padding: 0;
overflow: visible;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.headSale {
position: absolute;
left: 32.5%;
top: 75%;
display: flex;
justify-content: center;
align-items: center;
width: 18vw;
height: 4vh;
background: rgba(255,0,0,0.75);
color: #ffe47a;
border-radius: 10px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.headSale:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffe47a;
}
.logo {
position: absolute;
left: 8%;
top: 2.5vh;
width: 115px;
height: 90px;
}
.logotype {
text-decoration: none;
color: #ffe47a;
}
.logotype p {
text-decoration: none;
position: absolute;
left: 6.5%;
top: 13.5vh;
font-size: 12px;
font-weight: 600;
width: max-content;
height: max-content;
border-bottom: 2px solid #7DA9BB;
padding-bottom: 5px;
}
.ru {
z-index: 20000;
position: absolute;
left: 2%;
top: 4%;
width: 30px;
height: 30px;
border-radius: 15px;
border: none;
}
.ru img {
width: 100%;
height: 100%;
border-radius: 15px;
}
.ru:hover {
opacity: 0.8;
transition: ease-in .15s;
}
.ua {
z-index: 20000;
position: absolute;
left: 2%;
top: 10%;
width: 30px;
height: 30px;
border-radius: 15px;
border: none;
}
.ua img {
width: 100%;
height: 100%;
border-radius: 15px;
}
.ua:hover {
opacity: 0.8;
transition: ease-in .15s;
}
.headerText {
position: relative;
font-family: 'Courier New', Courier, monospace;
right: 9%;
top: 5vh;
text-align: center;
font-size: 68px;
letter-spacing: 12px;
font-weight: 600;
color: #ffe47a;
margin: 0;
padding: 0;
}
.txtLineL {
display: block;
position: absolute;
left: 19%;
top: 5vh;
width: 21%;
height: 4px;
background: #7DA9BB;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.txtLineR {
display: block;
position: absolute;
left: 40%;
top: 15vh;
width: 21%;
height: 4px;
background: #7DA9BB;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.sideText {
color: #FFE47A;
text-decoration: none;
font-size: 13px;
}
.sideText img {
width: 25px;
height: 25px;
}
.sideHome {
position: relative;
left: -4%;
}
.sidePhone {
position: relative;
left: -4%;
}
.sideMail {
position: relative;
left: -4%;
}
.sideSchedule {
position: relative;
left: -4%;
}
.sideAdd {
position: relative;
left: -5%;
}
.sideText:hover {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
border: none;
border-radius: 5px;
}
.adress {
display: flex;
justify-content: center;
align-items: center;
width: max-content;
height: max-content;
position: absolute;
width: 20vw;
height: 5vh;
left: 65%;
top: 1vh;
}
.email {
display: flex;
justify-content: center;
align-items: center;
width: max-content;
height: max-content;
position: absolute;
width: 14vw;
height: 5vh;
left: 85%;
top: 1vh;
}
.tele {
display: flex;
justify-content: center;
align-items: center;
width: max-content;
height: max-content;
position: absolute;
text-align: center;
width: 16vw;
height: 7vh;
left: 67.2%;
top: 5.5vh;
}
.schedule {
display: flex;
justify-content: center;
align-items: center;
width: max-content;
height: max-content;
position: absolute;
width: 14vw;
height: 5vh;
left: 85.1%;
top: 6vh;
}
.addTelegram {
top: 11vh;
left: 85%;
}
.addViber {
top: 11.5vh;
left: 65.6%;
}
.verticalHrL {
display: block;
position: absolute;
left: 65.5%;
top: 3vh;
width: 1px;
height: 45%;
background: #7DA9BB;
}
.verticalHrR {
display: block;
position: absolute;
left: 84.5%;
top: 3vh;
width: 1px;
height: 45%;
background: #7DA9BB;
}
.headBtn {
display: flex;
justify-content: center;
align-items: center;
width: 11vw;
height: 4vh;
background: #7DA9BB;
color: #ffe47a;
border-radius: 10px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.headBtn:hover {
background: cadetblue;
color: rgba(0, 0, 0, 0.75);
transition: ease-in 0.15s;
}
.headBtn picture {
position: relative;
left: 7%;
}
.headBtn img {
width: 16px;
height: 16px;
}
.mailus {
position: absolute;
left: 62%;
top: 17vh;
}
.mailus img {
width: 19px;
}
.phoneus {
position: absolute;
left: 74%;
top: 17vh;
}
.phoneus img{
width: 12px;
}
.cartus {
position: absolute;
left: 89%;
top: 17vh;
width: 8vw;
}
.cartus img {
left: 5%;
}
.sidebar {
z-index: 1000;
list-style-type: none;
padding-left: 0;
padding-top: 1vh;
width: 20.5%;
border: none;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
background: #1F3F65;
height: 80vh;
position: fixed;
margin: 0;
top: 20vh;
left: 0;
overflow: auto;
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.5);
}
li {
height: 3vh;
}
li a {
color: #ffffff;
padding: 0 0 0 10px;
text-decoration: none;
}
li img {
position: relative;
top: 1vh;
width: 25px;
height: 25px;
border-radius: 4px;
margin-right: 0.7vw;
}
li a:hover {
/* background-color: grey; */
transform: scale(1.05);
color: #ffe47a;
transition: ease-in .2s;
}
li p {
color: #ffffff;
padding: 0 0 0 10px;
margin: 1.5vh 0 1.5vh 0;
}
li p:hover {
transform: scale(1.05);
color: #ffe47a;
transition: ease-in .2s;
}
.pr {
margin-left: 10px;
padding: 0 0 0 0;
font-size: 15px;
letter-spacing: 2px;
margin-bottom: 3px;
height: max-content;
width: max-content;
border-bottom: 1px solid #c4c4c4;
}
.nrz {
position: relative;
top: 4vh;
font-size: 15px;
font-weight: 600;
margin-left: 5px;
margin-top: 10px;
}
.nrz:hover {
color: #ffffff;
transform: scale(1);
}
.fltr {
position: relative;
top: 2.5vh;
font-size: 15px;
font-weight: 600;
margin-left: 5px;
}
.fltr:hover {
color: #ffffff;
transform: scale(1);
}
.href {
position: relative;
top: 3vh;
font-size: 15px;
height: max-content;
width: max-content;
padding: 0 0 0 0;
margin-bottom: 3px;
border-bottom: 1px solid #c4c4c4;
}
.href1 {
display: block;
position: relative;
top: 1vh;
right: 5px;
margin: 0 0 0 0;
font-size: 15px;
font-weight: 600;
width: max-content;
}
.lia {
display: block;
position: relative;
top: 1.5vh;
margin-left: 10px;
margin-top: 10px;
font-size: 14px;
}
.fia {
top: 0;
}
.micro-hr {
position: relative;
top: 0.5vh;
border: none;
width: 100%;
height: 1px;
background: #c4c4c4;
}
.micro-hr-a {
position: relative;
top: 1.2vh;
border: none;
width: 100%;
height: 1px;
background: #c4c4c4;
}
.micro-hr-b {
position: relative;
top: 0;
border: none;
width: 100%;
height: 1px;
background: #c4c4c4;
}
.closer,.mob-ua,.mob-ru, .opacity,.mobile-footer,.mobile-navi,.sidebar {
display: none;
}
.opener {
display: none;
}
.navi {
display: flex;
justify-content: center;
padding: 0.5vh 2vw 0.5vh 2vw;
position: absolute;
top: 25%;
left: 32.5%;
width: 35%;
height: 7vh;
background: #D0D9DD;
border: none;
border-radius: 10px;
box-shadow: 0 1px 15px rgba(0, 0, 0, 0.25);
}
.navi a {
display: inline-block;
margin-right: 1vw;
margin-left: 1vw;
padding: 0.25vh 1vw 0.25vh 1vw;
border: none;
border-radius: 5px;
align-items: center;
text-align: center;
text-decoration: none;
color: rgba(0, 0, 0, 0.75);
}
.navi a:hover {
background: #c5c5c5;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
transition: ease-in-out .15s;
}
.navi p {
margin-top: 0.5vh;
font-size: 18px;
}
.navi img {
width: 25px;
height: 25px;
}
.table {
position: relative;
top: 35vh;
border-collapse: collapse;
margin-left: 0.5%;
width: 99%;
font-size: 18px;
box-shadow: 0 1px 15px rgba(0, 0, 0, 0.5);
}
.table td, .table th {
border-bottom: 1px solid #1F3F65;
padding: 2px;
}
.th-top-left {
border-top-left-radius: 8px;
}
.th-bottom-left {
border-bottom-left-radius: 8px;
}
.th-top-right {
border-top-right-radius: 8px;
}
.th-bottom-right {
border-bottom-right-radius: 8px;
}
.table th {
padding-left: 10px;
padding-top: 6px;
padding-bottom: 6px;
text-align: left;
background-color: #D0D9DD;
color: rgba(0, 0, 0, 0.75);
}
.table th img {
z-index: 20000;
position: relative;
width: 40px;
left: 5%;
}
.table th img:hover {
transform: scale(4) translateX(1vw) translateY(-1vh);
transition: ease-in-out .3s;
}
.textOrder {
position: relative;
padding: 0 1.5vw 2vh 1.5vw;
background: none;
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 5vh;
left: 40%;
top: 40vh;
color: rgba(0, 0, 0, 0.75);
font-weight: 600;
font-size: 36px;
width: max-content;
height: max-content;
border-bottom: 3px solid #ffe47a;
}
.modal {
display: block;
position: relative;
z-index: 0;
top: 50vh;
margin-bottom: 10vh;
padding: 3vh 0.5vw 5vh 1vw;
left: 0.5%;
width: 97.5%;
height: max-content;
background: #7DA9BB;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 1px 25px rgba(0, 0, 0, 0.5);
}
input[type=text] {
width: 99%;
height: 7vh;
padding: 1.5vh 1vw 1.5vh 1vw;
font-size: 16px;
border: none;
border-radius: 8px;
margin-bottom: 1.5vh;
background: #D0D9DD;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}
input[type=text]:hover {
background: lightslategray;
transition: ease-in-out .15s;
}
input[type=text]:focus {
background: #527D9F;
}
select {
width: 99%;
height: 6vh;
padding: 1.5vh 1vw 1.5vh 1vw;
font-size: 16px;
border: none;
border-radius: 8px;
margin-bottom: 1.5vh;
background: #D0D9DD;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}
select:hover {
background: lightslategray;
transition: ease-in-out .15s;
}
select:focus {
background: #527D9F;
}
label {
float: left;
font-size: 18px;
font-weight: 600;
color: rgba(0, 0, 0, 0.75);
}
.send-email {
width: max-content;
height: max-content;
padding: 1.5vh 3vw 1.5vh 3vw;
font-size: 30px;
font-weight: 600;
background: #FFE47A;
border: none;
border-radius: 20px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
position: relative;
left: 42%;
top: 20px;
cursor: pointer;
}
.send-email:hover {
background: lightgreen;
transition: ease-in-out .15s;
}
#comment {
width: 99%;
height: 18vh;
padding: 1.5vh 1vw 1.5vh 1vw;
font-size: 16px;
border: none;
border-radius: 8px;
margin-bottom: 1.5vh;
background: #D0D9DD;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}
#comment:hover {
background: lightslategray;
transition: ease-in-out .15s;
}
#comment:focus {
background: #527D9F;
}
.sweetA {
text-decoration: none;
color: green;
font-weight: bold;
}
.total {
position: relative;
width: 200px;
top: 35vh;
left: 85%;
overflow: hidden;
}
.total h2 {
width: max-content;
height: max-content;
padding-bottom: 1vh;
border-bottom: 2px solid #1F3F65;
color: rgba(0, 0, 0, 0.75);
}
.alternative {
display: none;
position: absolute;
top: 40vh;
left: 23%;
width: 60%;
margin: 5vh auto;
text-align: center;
}
.alternative h1 {
color: #ffe47a;
text-shadow: 1px 1px darkgrey;
}
.alternative button {
margin: 10px auto;
background: cornflowerblue;
width: 180px;
height: 40px;
border: 2px grey;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-size: 20px;
font-weight: bold;
}
.alternative button:hover {
background: cyan;
}
/* Mobile adaptation */
@media (min-width: 330px) and (max-width: 700px) {
.headSale {
width: 22vh;
height: 4vh;
font-size: 12px;
}
.navi {
display: none;
}
.mobile-navi {
display: flex;
justify-content: center;
padding: 0.5vh 1.5vw 0.5vh 3vw;
position: absolute;
top: 24%;
left: 16%;
width: 77%;
height: 7.5vh;
background: transparent;
border: none;
}
.mobile-navi a {
display: inline-block;
margin-right: 1.5vw;
margin-left: 1vw;
padding: 0.25vh 1vw 0.25vh 1vw;
border: none;
border-radius: 5px;
align-items: center;
text-align: center;
text-decoration: none;
color: rgba(0, 0, 0, 0.75);
}
.mobile-navi p {
margin-top: 0;
font-size: 14px;
}
.mobile-navi img {
width: 25px;
height: 25px;
}
.mobile-footer {
display: block;
position: fixed;
z-index: 21000;
top: 90%;
left: 0;
width: 100%;
height: 10%;
background: #1F3F65;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
padding: 2vh 1vw 1vh 7vw;
}
.footer-item {
display: inline-flex;
position: relative;
justify-content: center;
align-items: center;
width: 40%;
height: 50%;
margin-right: 5vw;
background: #7DA9BB;
font-size: 14px;
color: rgba(0, 0, 0, 0.75);
border-radius: 6px;
text-decoration: none;
font-weight: 600;
}
.footer-item img {
position: relative;
left: 7%;
width: 18px;
height: 18px;
}
.opener {
z-index: 20000;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 25%;
left: 2%;
width: 40px;
height: 40px;
background: #1F3F65;
border-radius: 20px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.opener img {
width: 18px;
height: 18px;
}
.box {
display: none;
}
.ru,
.ua {
display: none;
}
header {
height: 20vh;
}
.logo {
width: 90px;
height: 70px;
left: 2%;
top: 4vh;
}
.logotype p {
display: none;
}
.headerText {
width: max-content;
right: 0;
top: 32%;
left: 29%;
font-size: 30px;
letter-spacing: 5px;
}
.txtLineL {
width: 35%;
left: 25%;
top: 5.5vh;
}
.txtLineR {
top: 12.5vh;
left: 63%;
width: 35%;
}
.sidebar {
padding-top: 0.5vh;
top: 0;
z-index: 22000;
display: none;
height: 100%;
width: 80%;
}
li {
height: 4vh;
}
.nrz, .fltr, .href, .href1 {
font-size: 13px;
}
.lia {
font-size: 12px;
}
.opacity {
display: none;
position: absolute;
z-index: 5000;
top: 0;
left: 0;
width: 100%;
height: 1500vh;
color: rgba(0, 0, 0, 0.5);
}
.closer {
position: absolute;
left: 85%;
top: 2vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 600;
width: 32px;
height: 32px;
background: lightcoral;
border-radius: 16px;
}
.mob-ru {
display: block;
position: absolute;
left: 85%;
top: 90%;
width: 30px;
height: 30px;
border-radius: 15px;
border: none;
}
.mob-ru img {
width: 100%;
height: 100%;
border-radius: 15px;
}
.mob-ua {
display: block;
position: absolute;
left: 60%;
top: 90%;
width: 30px;
height: 30px;
border-radius: 15px;
border: none;
}
.mob-ua img {
width: 100%;
height: 100%;
border-radius: 15px;
}
.table {
font-size: 12px;
}
.total {
left: 5%;
}
.textOrder {
font-size: 22px;
left: 25%;
}
.modal {
left: 2%;
width: 87%;
padding: 3vh 4vw 3vh 4vw;
}
.send-email {
left: 28%;
}
}
/* 375px adaptation */
@media (min-width: 375px) and (max-width: 400px) {
.mobile-footer {
padding-top: 2vh;
}
}
/* 400px adaptation */
@media (min-width:400px) and (max-width: 500px) {
.mobile-footer {
padding-top: 2vh;
}
}
/* 320px adaptation */
@media (max-width:330px) {
.headSale {
width: 22vh;
height: 4vh;
font-size: 12px;
}
.navi {
display: none;
}
.mobile-navi {
display: flex;
justify-content: center;
padding: 0.5vh 1.5vw 0.5vh 3vw;
position: absolute;
top: 24%;
left: 16%;
width: 77%;
height: 7.5vh;
background: transparent;
border: none;
}
.mobile-navi a {
display: inline-block;
margin-right: 1.5vw;
margin-left: 1vw;
padding: 0.25vh 1vw 0.25vh 1vw;
border: none;
border-radius: 5px;
align-items: center;
text-align: center;
text-decoration: none;
color: rgba(0, 0, 0, 0.75);
}
.mobile-navi p {
margin-top: 0;
font-size: 14px;
}
.mobile-navi img {
width: 22px;
height: 22px;
}
.mobile-footer {
display: block;
position: fixed;
z-index: 3000;
top: 90%;
left: 0;
width: 100vw;
height: 10%;
background: #1F3F65;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
padding: 0;
}
.footer-item {
display: inline-flex;
position: relative;
justify-content: center;
align-items: center;
width: 40%;
height: 50%;
/* margin-right: 5vw; */
background: #7DA9BB;
font-size: 13px;
color: rgba(0, 0, 0, 0.75);
border-radius: 6px;
text-decoration: none;
margin: 3vh 2vw 0 4vw;
font-weight: 600;
}
.footer-item img {
position: relative;
left: 4%;
width: 18px;
height: 18px;
}
.opener {
z-index: 20000;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 25%;
left: 2%;
width: 36px;
height: 36px;
background: #1F3F65;
border-radius: 20px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.opener img {
width: 16px;
height: 16px;
}
.box {
display: none;
}
.ru,
.ua {
display: none;
}
header {
height: 20vh;
}
.logo {
width: 90px;
height: 70px;
left: 2%;
top: 4vh;
}
.logotype p {
display: none;
}
.headerText {
width: max-content;
right: 0;
top: 32%;
left: 29%;
font-size: 26px;
letter-spacing: 5px;
}
.txtLineL {
width: 35%;
left: 25%;
top: 5.5vh;
}
.txtLineR {
top: 12.5vh;
left: 63%;
width: 35%;
}
.sidebar {
padding-top: 0.5vh;
top: 0;
z-index: 20000;
display: none;
height: 100%;
width: 80%;
}
li {
height: 4.15vh;
}
.nrz, .fltr, .href, .href1 {
font-size: 13px;
}
.lia {
font-size: 12px;
}
.opacity {
display: none;
position: absolute;
z-index: 5000;
top: 0;
left: 0;
width: 100%;
height: 1500vh;
color: rgba(0, 0, 0, 0.5);
}
.closer {
position: absolute;
left: 85%;
top: 2vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 600;
width: 32px;
height: 32px;
background: lightcoral;
border-radius: 16px;
}
.mob-ru {
display: block;
position: absolute;
left: 85%;
top: 90%;
width: 30px;
height: 30px;
border-radius: 15px;
border: none;
}
.mob-ru img {
width: 100%;
height: 100%;
border-radius: 15px;
}
.mob-ua {
display: block;
position: absolute;
left: 60%;
top: 90%;
width: 30px;
height: 30px;
border-radius: 15px;
border: none;
}
.mob-ua img {
width: 100%;
height: 100%;
border-radius: 15px;
}
.table {
font-size: 11px;
}
.total {
left: 5%;
}
.textOrder {
font-size: 22px;
left: 25%;
}
.modal {
left: 2%;
width: 87%;
padding: 3vh 4vw 3vh 4vw;
}
.send-email {
left: 27%;
}
}
/* Custom adaptations */
@media (min-width:382px) and (max-width: 390px) and (max-height: 640px) {
.mobile-navi {
display: flex;
justify-content: center;
padding: 0.5vh 1.5vw 0.5vh 3vw;
position: absolute;
top: 24%;
left: 16%;
width: 77%;
height: 7.5vh;
background: transparent;
border: none;
}
.mobile-navi a {
display: inline-block;
margin-right: 1.5vw;
margin-left: 1vw;
padding: 0.25vh 1vw 0.25vh 1vw;
border: none;
border-radius: 5px;
align-items: center;
text-align: center;
text-decoration: none;
color: rgba(0, 0, 0, 0.75);
}
.mobile-navi p {
margin-top: 0;
font-size: 14px;
}
.mobile-navi img {
width: 25px;
height: 25px;
}
.mobile-footer {
display: block;
position: fixed;
z-index: 3000;
top: 90%;
left: 0;
width: 100%;
height: 10%;
background: #1F3F65;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
padding: 2vh 1vw 1vh 7vw;
}
.footer-item {
display: inline-flex;
position: relative;
justify-content: center;
align-items: center;
width: 40%;
height: 50%;
margin-right: 5vw;
background: #7DA9BB;
font-size: 14px;
color: rgba(0, 0, 0, 0.75);
border-radius: 6px;
text-decoration: none;
font-weight: 600;
}
.footer-item img {
position: relative;
left: 7%;
width: 18px;
height: 18px;
}
.opener {
z-index: 20000;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 25%;
left: 2%;
width: 40px;
height: 40px;
background: #1F3F65;
border-radius: 20px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.opener img {
width: 18px;
height: 18px;
}
.box {
display: none;
}
.ru,
.ua {
display: none;
}
header {
height: 20vh;
}
.logo {
width: 90px;
height: 70px;
left: 2%;
top: 4vh;
}
.logotype p {
display: none;
}
.headerText {
width: max-content;
right: 0;
top: 32%;
left: 29%;
font-size: 30px;
letter-spacing: 5px;
}
.txtLineL {
width: 35%;
left: 25%;
top: 5.5vh;
}
.txtLineR {
top: 12.5vh;
left: 63%;
width: 35%;
}
.sidebar {
padding-top: 0.5vh;
top: 0;
z-index: 20000;
display: none;
height: 100%;
width: 80%;
}
li {
height: 4vh;
}
.nrz, .fltr, .href, .href1 {
font-size: 13px;
}
.lia {
font-size: 12px;
}
.opacity {
display: none;
position: absolute;
z-index: 5000;
top: 0;
left: 0;
width: 100%;
height: 1500vh;
color: rgba(0, 0, 0, 0.5);
}
.closer {
position: absolute;
left: 85%;
top: 2vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 600;
width: 32px;
height: 32px;
background: lightcoral;
border-radius: 16px;
}
.mob-ru {
display: block;
position: absolute;
left: 85%;
top: 90%;
width: 30px;
height: 30px;
border-radius: 15px;
border: none;
}
.mob-ru img {
width: 100%;
height: 100%;
border-radius: 15px;
}
.mob-ua {
display: block;
position: absolute;
left: 60%;
top: 90%;
width: 30px;
height: 30px;
border-radius: 15px;
border: none;
}
.mob-ua img {
width: 100%;
height: 100%;
border-radius: 15px;
}
}
@media (min-width:375px) and (max-width:375px) and (max-height: 670px) {
}
@media (min-width:360px) and (max-width:360px) and (max-height: 630px) {
}
@media (max-height:550px) {
.headSale {
width: 25vh;
height: 4vh;
font-size: 12px;
}
.navi {
display: none;
}
.mobile-navi {
display: flex;
justify-content: center;
padding: 0.5vh 1.5vw 0.5vh 3vw;
position: absolute;
top: 24%;
left: 16%;
width: 77%;
height: 7.5vh;
background: transparent;
border: none;
}
.mobile-navi a {
display: inline-block;
margin-right: 1.25vw;
margin-left: 1vw;
padding: 0.25vh 1vw 0.25vh 1vw;
border: none;
border-radius: 5px;
align-items: center;
text-align: center;
text-decoration: none;
color: rgba(0, 0, 0, 0.75);
}
.mobile-navi p {
font-size: 13px;
}
.mobile-navi img {
width: 21px;
height: 21px;
}
.mobile-footer {
display: block;
position: fixed;
z-index: 3000;
top: 90%;
left: 0;
width: 100vw;
height: 10%;
background: #1F3F65;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
padding: 0;
}
.footer-item {
display: inline-flex;
position: relative;
justify-content: center;
align-items: center;
width: 40%;
height: 50%;
/* margin-right: 5vw; */
background: #7DA9BB;
font-size: 13px;
color: rgba(0, 0, 0, 0.75);
border-radius: 6px;
text-decoration: none;
margin: 3vh 2vw 0 4vw;
font-weight: 600;
}
.footer-item img {
position: relative;
left: 4%;
width: 18px;
height: 18px;
}
.opener {
z-index: 20000;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 25%;
left: 2%;
width: 36px;
height: 36px;
background: #1F3F65;
border-radius: 20px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.opener img {
width: 16px;
height: 16px;
}
.box {
display: none;
}
.ru,
.ua {
display: none;
}
header {
height: 20vh;
}
.logo {
width: 90px;
height: 70px;
left: 2%;
top: 4vh;
}
.logotype p {
display: none;
}
.headerText {
width: max-content;
right: 0;
top: 32%;
left: 29%;
font-size: 26px;
letter-spacing: 5px;
}
.txtLineL {
width: 35%;
left: 25%;
top: 5.5vh;
}
.txtLineR {
top: 12.5vh;
left: 63%;
width: 35%;
}
.sidebar {
padding-top: 0.5vh;
top: 0;
z-index: 20000;
display: none;
height: 100%;
width: 80%;
}
li {
height: 4.15vh;
}
.nrz, .fltr, .href, .href1 {
font-size: 13px;
}
.lia {
font-size: 12px;
}
.opacity {
display: none;
position: absolute;
z-index: 5000;
top: 0;
left: 0;
width: 100%;
height: 1500vh;
color: rgba(0, 0, 0, 0.5);
}
.closer {
position: absolute;
left: 85%;
top: 2vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 600;
width: 32px;
height: 32px;
background: lightcoral;
border-radius: 16px;
}
.mob-ru {
display: block;
position: absolute;
left: 85%;
top: 90%;
width: 30px;
height: 30px;
border-radius: 15px;
border: none;
}
.mob-ru img {
width: 100%;
height: 100%;
border-radius: 15px;
}
.mob-ua {
display: block;
position: absolute;
left: 60%;
top: 90%;
width: 30px;
height: 30px;
border-radius: 15px;
border: none;
}
.mob-ua img {
width: 100%;
height: 100%;
border-radius: 15px;
}
.table {
font-size: 11px;
}
.total {
left: 5%;
}
.textOrder {
font-size: 22px;
left: 25%;
}
.modal {
left: 2%;
width: 87%;
padding: 3vh 4vw 3vh 4vw;
}
.send-email {
left: 27%;
}
}
/* Tablet adaptation */
@media (min-width: 768px) and (max-width: 1020px) {
.headSale {
width: 22vh;
font-size: 20px;
left: 37.5%;
}
.navi {
display: none;
}
header {
height: 21vh;
}
.sidebar {
z-index: 21000;
display: none;
width: 50%;
}
.nrz,.fltr,.href,.href1 {
font-size: 14px;
}
.lia {
font-size: 13px;
}
.logo {
left: 5%;
top: 5vh;
}
.logotype p {
left: 3vw;
}
.ru {
top: 16%;
left: 93%;
}
.ua {
top: 16%;
left: 86%;
}
.headerText {
width: max-content;
left: 28%;
top: 6vh;
font-size: 60px;
}
.txtLineL {
width: 35%;
left: 25%;
top: 5.5vh;
}
.txtLineR {
width: 35%;
left: 63.5%;
top: 14vh;
}
.box {
display: none;
}
.mobile-navi {
display: flex;
justify-content: center;
padding: 0.5vh 1.5vw 0.5vh 3vw;
position: absolute;
top: 24%;
left: 17%;
width: 77%;
height: 10vh;
background: transparent;
border: none;
}
.mobile-navi a {
display: inline-block;
margin-right: 2.5vw;
margin-left: 2vw;
padding: 0.25vh 1vw 0.25vh 1vw;
border: none;
border-radius: 5px;
align-items: center;
text-align: center;
text-decoration: none;
color: rgba(0, 0, 0, 0.75);
}
.mobile-navi p {
margin-top: 0;
font-size: 22px;
}
.mobile-navi img {
width: 50px;
height: 50px;
}
.opener {
z-index: 20000;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 24%;
left: 5%;
width: 80px;
height: 80px;
background: #1F3F65;
border-radius: 40px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.opener img {
width: 36px;
height: 36px;
}
.opacity {
display: none;
position: absolute;
z-index: 3000;
top: 0;
left: 0;
width: 100%;
height: 1500vh;
color: rgba(0, 0, 0, 0.5);
}
.closer {
position: absolute;
left: 85%;
top: 4vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 600;
width: 50px;
height: 50px;
background: lightcoral;
border-radius: 25px;
}
.table {
font-size: 15px;
}
.textOrder {
left: 32%;
}
.modal {
padding: 2vh 2.5vw 2vh 2.5vw;
left: 2%;
width: 90%;
}
.total {
left: 1%;
}
.send-email {
left: 38%;
}
}
@media (min-width:800px) and (max-width: 820px) {
html,body {
height: 300vh;
}
}
@media (min-width: 800px) and (max-width:820px) and (max-height:600px) {
html,body {
height: 390vh;
}
header {
height: 30vh;
}
.logotype p {
top: 20vh;
}
.txtLineR {
top: 18vh;
}
.ua,.ru {
top: 22%
}
.sidebar {
padding-top: 4vh;
}
li {
height: 3.5vh;
}
.closer {
top: 9%;
}
.opener,.mobile-navi {
top: 37vh;
}
.table {
top: 60vh;
}
.textOrder {
top: 65vh;
}
.modal {
top: 80vh;
}
.total {
top: 60vh;
}
}
@media (min-width:1024px) and (max-width:1100px) {
.tele, .email, .schedule,.adress,.verticalHrL,.verticalHrR {
display: none;
}
.logo {
width: 190px;
height: 140px;
}
.logotype p {
font-size: 16px;
}
.headerText {
font-size: 82px;
width: max-content;
left: 30%;
}
.txtLineL {
left: 25%;
width: 33%;
top: 4vh;
}
.txtLineR {
width: 33%;
left: 65%;
top: 13.5vh;
}
.headBtn {
width: 16vw;
font-size: 18px;
}
.headSale {
left: 30%;
top: 17vh;
}
.phoneus {
left: 50%;
}
.mailus {
left: 68%;
}
.cartus {
left: 86%;
width: 12vw;
}
.navi {
left: 28%;
width: 44%;
height: 5vh;
}
.total {
left: 80%;
}
.textOrder {
left: 38%;
}
.modal {
left: 1%;
width: 93%;
padding: 3vh 2.5vw 3vh 2.5vw;
}
}
@media (min-width: 1920px) {
.logo {
width: 160px;
height: 135px;
}
.logotype p {
font-size: 14px;
left: 7.25%;
top: 15vh;
}
.headerText {
font-size: 90px;
}
.sideText {
font-size: 18px;
}
.phoneus,.cartus,.mailus {
top: 17.5vh;
font-size: 18px;
}
.micro-hr-a {
top: 2vh;
}
.micro-hr-b {
top: 0.7vh;
}
.micro-hr {
top: 1vh;
}
.navi {
width: 30%;
left: 35%;
}
.navi a {
font-size: 30px;
}
}