html {
font-size: 30px;
scroll-behavior: smooth;
}
strong {
font-weight: bold;
}
.yellow {
color: #f6eb0f;
}
.black {
color: #181818;
}
img.black {
filter: brightness(0%);
}
body {
font-size: 0.7rem;
font-weight: 400;
font-family: "Open Sans";
background-color: #181818;
}
h1 {
font-size: 1.9rem;
font-weight: 700;
font-family: "Noto Serif";
}
h2 {
font-size: 1.3rem;
font-weight: 600;
font-family: "Noto Serif SemBd";
}
p {
line-height: 36px;
margin-top: 8%;
}
p>p {
margin-top: unset;
}
.button {
font-family: "Open Sans";
font-size: 0.65rem;
background-color: #181818;
border: 1px solid #181818;
padding: 15px;
border-bottom-right-radius: 10px;
color: #f6eb0f;
font-weight: 600;
text-decoration: none;
}
a.button::after,
button.button::after {
margin-left: 15px;
content: "";
display: inline-block;
width: 20px;
height: 15px;
-webkit-mask: url("../images/right-arrow.svg") no-repeat 50% 50%;
mask: url("../images/right-arrow.svg") no-repeat 50% 50%;
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center;
mask-position: center;
}
.button::after {
background-color: #f6eb0f;
}
.button:hover,
#lower .button.thanks {
cursor: pointer;
background-color: #f6eb0f;
color: #181818;
}
.button:hover::after {
background-color: #181818;
}
#upper,
#lower {
height: 100vh;
}
#upper {
background-color: #f6eb0f;
color: #202020;
display: flex;
flex-direction: column;
}
header {
display: flex;
justify-content: space-between;
align-items: start;
padding: 50px 2% 0 2%;
height: 10%;
}
header>.left img {
width: 280px;
}
header>.right>.desktop,
header>.right>.desktop div {
display: flex;
align-items: center;
padding-left: 30px;
}
header>.right>.desktop span,
header>.right>.mobile span {
margin-left: 10px;
font-size: 0.5rem;
}
header>.right>.mobile {
display: none;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 28px;
height: 3px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.mobile {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mobile.change .bar1 {
transform: translate(0, 9px) rotate(-45deg);
}
.mobile.change .bar2 {
opacity: 0;
}
.mobile.change .bar3 {
transform: translate(0, -9px) rotate(45deg);
}
.mobile>.contacts {
display: none;
position: absolute;
right: 20px;
}
header>.right>.mobile.change>.contacts {
display: flex;
flex-direction: column;
border: 2px solid #000;
background-color: #f6eb0f;
}
header>.right>.mobile.change>.contacts div {
display: flex;
align-items: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 10px;
}
header a {
color: #202020;
text-decoration: none;
}
#upper .main {
display: flex;
padding: 5% 0 5% 15%;
height: 90%;
justify-content: space-between;
flex-direction: row;
align-items: center;
}
#upper .main>.left {
width: 35%;
}
#upper .main>.right {
width: 65%;
padding: 0 5%;
overflow: hidden;
}
#upper .main>.right img {
width: 100%;
height: auto;
display: block;
margin-left: 0;
margin-bottom: 0;
animation: premik 4s forwards;
}
@keyframes premik {
from {
margin-left: 60vw;
margin-bottom: 50px;
}
to {
margin-left: 0vw;
margin-bottom: 0vw;
}
}
#lower {
background-color: #181818;
color: #bcbfc2;
display: flex;
flex-direction: column;
}
#lower .main {
display: flex;
padding: 5% 15% 5% 15%;
height: 85%;
justify-content: space-between;
flex-direction: row;
align-items: center;
}
#lower .main>.left,
#lower .main>.right {
width: 38%;
}
#lower>.main>.left>.contacts {
margin-top: 10%;
}
#lower>.main>.left>.contacts,
#lower>.main>.left>.contacts div {
display: flex;
align-items: center;
}
#lower>.main>.left>.contacts div {
padding-right: 30px;
}
#lower>.main>.left>.contacts span {
margin-left: 10px;
font-size: 0.6rem;
}
#lower>.main>.left>.contacts a {
color: inherit;
text-decoration: none;
}
#lower>.main>.left>div h2 {
margin-bottom: 10px;
}
#lower input,
#lower textarea {
margin-bottom: 15px;
padding: 20px;
border: none;
width: 100%;
min-width: 100%;
max-width: 100%;
vertical-align: top;
font-size: 0.7rem;
box-sizing: border-box;
}
#lower textarea {
height: 140px;
max-height: 200px;
}
#lower .button {
width: unset;
max-width: unset;
min-width: unset;
border: 1px solid #f6eb0f;
display: inline;
padding-left: 25px;
}
#lower button.button::after {
margin-left: 25px;
}
#lower .button.thanks {
cursor: context-menu;
display: none;
}
#lower .button.thanks:hover::after {
background-color: #f6eb0f;
}
footer {
font-size: 0.5rem;
height: 15%;
text-align: center;
padding: 0 15%;
}
footer hr {
border-color: #f6eb0f;
margin-bottom: 20px;
}
@media(max-width:1640px) {
html {
font-size: 28px;
}
}
@media(max-width:1530px) {
html {
font-size: 26px;
}
}
@media(max-width:1422px) {
#upper .main {
padding: 5% 0 5% 10%;
}
#lower .main {
padding: 5% 10% 5% 10%;
}
footer {
padding: 0 10%;
}
}
@media(max-width:1345px) {
html {
font-size: 24px;
}
}
@media(max-width:1245px) {
#upper .main {
padding: 5% 0 5% 7%;
}
#lower .main {
padding: 5% 7% 5% 7%;
}
footer {
padding: 0 7%;
}
}
@media(max-width:1200px) {
html {
font-size: 22px;
}
}
@media(max-width:1105px) {
#upper .main {
padding: 5% 0 5% 5%;
}
#lower .main {
padding: 5% 5% 5% 5%;
}
footer {
padding: 0 5%;
}
}
@media(max-width:1080px) {
#upper .main>.left {
width: 40%;
}
#upper .main>.right {
width: 60%;
}
#lower .main>.left,
#lower .main>.right {
width: 45%;
}
}
@media(max-width:960px) {
#upper {
height: unset;
}
#upper .main {
flex-direction: column;
}
#upper .main {
padding: 5% 0;
}
#upper .main>.left {
width: 45%;
}
#upper .main>.right {
width: 100%;
}
#upper .main>.right img {
width: 600px;
height: auto;
display: block;
margin-left: 50px;
}
@keyframes premik {
from {
margin-left: 60vw;
}
to {
margin-left: 50px;
}
}
}
@media(max-width:890px) {
#lower {
height: unset;
}
#lower .main {
flex-direction: column;
padding: 0;
padding-bottom: 100px;
}
#upper .main>.left,
#lower .main>.left,
#lower .main>.right {
width: 45%;
}
#upper .main>.right {
padding: unset;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
#upper .main>.left,
#lower .main>.left {
margin-top: 50px;
}
#upper .main>.left {
margin-bottom: 10px;
}
#lower .main>.left {
margin-bottom: 55px;
}
footer {
height: 70px;
padding: 0 calc(55%/2);
}
}
/*@media (min-width:780px) and (max-width:860px) {
#lower>.main>.left>.contacts {
flex-direction: column;
align-items: unset;
}
#lower>.main>.left>.contacts div {
margin-bottom: 10px;
}
}*/
@media(max-width:800px) {
#upper .main>.left,
#lower .main>.left,
#lower .main>.right {
width: 60%;
}
footer {
padding: 0 calc(40%/2);
}
}
@media (max-width:650px) {
header {
padding: 15px 5% 0 5%;
}
header>.left img {
width: 240px;
}
header>.right>.desktop {
display: none;
}
header>.right>.mobile {
display: inline-block;
}
#upper .main>.left,
#lower .main>.left {
margin-top: 30px;
}
p {
margin-top: 3%;
line-height: 24px;
}
.button_paragraph{
margin-top:20px;
}
html {
font-size: 20px;
}
#lower .main {
padding-bottom: 40px;
}
#lower>.main>.left>.contacts {
margin-top: 15px;
}
#lower .main>.left {
margin-bottom: 20px;
}
#lower input,
#lower textarea {
padding: 15px;
}
#lower textarea {
height: 100px;
max-height: 200px;
}
}
@media(max-width:550px) {
#upper .main>.left,
#lower .main>.left,
#lower .main>.right {
width: 70%;
}
footer {
padding: 0 15%;
}
header>.left img {
width: 200px;
}
}
@media(max-width:460px) {
html {
font-size: 18px;
}
}
@media(max-width:430px) {
#upper .main>.left,
#lower .main>.left,
#lower .main>.right {
width: 80%;
}
footer {
padding: 0 10%;
}
#upper .main>.right img {
width: 550px;
margin-left: 20px;
}
@keyframes premik {
from {
margin-left: 60vw;
}
to {
margin-left: 20px;
}
}
}
@media(max-width:360px) {
html {
font-size: 16px;
}
#lower>.main>.left>.contacts {
align-items: unset;
}
#lower>.main>.left>.contacts a:first-of-type {
margin-bottom: 20px;
}
}