756 lines
11 KiB
CSS
756 lines
11 KiB
CSS
*{
|
||
/* margin: 0; */
|
||
padding: 0;
|
||
background-color: var(--baseBlue);
|
||
}
|
||
|
||
body{
|
||
z-index: -10;
|
||
}
|
||
|
||
/* */
|
||
/* */
|
||
|
||
/* */
|
||
input{
|
||
padding: 1% 1%;
|
||
}
|
||
|
||
a, h1, h2, h3, h4, h5, h6, label{
|
||
text-decoration: none;
|
||
color: inherit;
|
||
margin: 0 !important;
|
||
padding: 0;
|
||
}
|
||
/*
|
||
label{
|
||
padding: 0 0 1% 2%;
|
||
}
|
||
*/
|
||
li{
|
||
list-style: none;
|
||
}
|
||
|
||
.flex{
|
||
display: flex;
|
||
}
|
||
|
||
:root{
|
||
--baseBlue: #242430;
|
||
--blue: #4D54BA;
|
||
--lightBlue: #54AAFF;
|
||
--white: #fff;
|
||
}
|
||
|
||
.baseBlue{
|
||
color: var(--baseBlue);
|
||
}
|
||
|
||
.blue{
|
||
color: var(--blue);
|
||
}
|
||
|
||
.white{
|
||
color: var(--white);
|
||
}
|
||
|
||
.lightBlue{
|
||
color: var(--lightBlue);
|
||
}
|
||
|
||
.container{
|
||
padding: 0 10%;
|
||
}
|
||
|
||
.arial-regular{
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.arial-bald{
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.f14{
|
||
/* font-size: 14px; */
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.colms{
|
||
flex-direction: column;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.between{
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.w100{
|
||
width: 100%;
|
||
}
|
||
|
||
/* ---------- */
|
||
|
||
|
||
.header-inner{
|
||
margin: 1.5% 0 0;
|
||
padding: 0 14%;
|
||
}
|
||
|
||
.headerLi{
|
||
margin: 0% 1% 1%;
|
||
}
|
||
|
||
|
||
|
||
/* ----------- main ----------- */
|
||
.main{
|
||
text-align: center;
|
||
}
|
||
|
||
.inputText{
|
||
display: none;
|
||
}
|
||
|
||
.inputLink{
|
||
display: none;
|
||
margin-bottom: 3%;
|
||
}
|
||
|
||
.form1{
|
||
flex-direction: column;
|
||
text-align: center;
|
||
align-items: center;
|
||
align-self: center;
|
||
}
|
||
|
||
.radio1Div{
|
||
flex-direction: row;
|
||
margin: 0 !important;
|
||
text-align: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
#tel, #tg{
|
||
overflow-wrap: break-word;
|
||
box-sizing: border-box;
|
||
padding-left: 3%;
|
||
}
|
||
|
||
|
||
.inputZ{
|
||
border-style: solid;
|
||
border-color: var(--blue);
|
||
}
|
||
|
||
.zayavkaH1{
|
||
font-size: 34px;
|
||
padding: 2% 0 4%;
|
||
}
|
||
|
||
.input1Width{
|
||
width: 100%;
|
||
min-height: 25px;
|
||
box-sizing: border-box;
|
||
padding: 2.5% 2.5% 2.5% 3%;
|
||
color: var(--white);
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.w1{
|
||
/* align-content: flex-start;
|
||
*/ display: flex;
|
||
}
|
||
|
||
.input1Width:focus, .inpt2:focus{
|
||
border-color: var(--lightBlue);
|
||
outline: var(--lightBlue);
|
||
color: var(--white);
|
||
padding-left: 2%;
|
||
}
|
||
|
||
.inpt2{
|
||
color: var(--white);
|
||
}
|
||
|
||
.e1{
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
width: 70%;
|
||
text-align: start;
|
||
margin: 0 !important;
|
||
padding: 0 0 2%;
|
||
align-items: center;
|
||
align-self: center;
|
||
}
|
||
|
||
#email{
|
||
margin-top: 5%;
|
||
}
|
||
|
||
#hide2{
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
text-align: center;
|
||
}
|
||
|
||
#tgHover, #bt {
|
||
min-height: 70px;
|
||
border: var(--lightBlue) solid 2px;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
color: var(--white);
|
||
width: 23vw;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
border-radius: 17px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
#tgHover:after, #bt:after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 0; /* Начинаем с нулевой ширины */
|
||
background-color: var(--lightBlue);
|
||
transition: width 0.3s ease; /* Анимируем именно ширину */
|
||
z-index: -1;
|
||
}
|
||
|
||
#tgHover:hover:after, #bt:hover:after {
|
||
width: 100%; /* Расширяем до конца */
|
||
}
|
||
|
||
|
||
|
||
.e2{
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 70%;
|
||
margin: 0 !important;
|
||
text-align: start;
|
||
float: left;
|
||
}
|
||
|
||
#or{
|
||
padding: 0;
|
||
margin: 0 0 1.5%;
|
||
}
|
||
|
||
.ent{
|
||
width: 23vw;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.e3{
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
width: 70%;
|
||
margin: 0 !important;
|
||
text-align: start;
|
||
float: left;
|
||
padding: 0 0 1%;
|
||
|
||
}
|
||
|
||
input[type="radio"] {
|
||
accent-color: var(--blue);
|
||
margin: 0 2% 0 0;
|
||
}
|
||
|
||
#tel{
|
||
width: 20vw;
|
||
}
|
||
|
||
select option{
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
select{
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
/* border: #4D54BA; */
|
||
border-top: 2px solid #4D54BA;
|
||
border-bottom: 2px solid #4D54BA;
|
||
border-left: 2px solid #4D54BA;
|
||
border-right: none;
|
||
color: var(--white);
|
||
min-height: 26px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#telind{
|
||
width: 3vw;
|
||
min-height: 25px;
|
||
|
||
}
|
||
|
||
|
||
#l1{
|
||
padding-left: 1%;
|
||
}
|
||
|
||
#linkTao{
|
||
width: 100%;
|
||
min-height: 25px;
|
||
box-sizing: border-box;
|
||
padding-left: 1.2%;
|
||
border-radius: 13px;
|
||
|
||
/* margin: 0 0 3%; */
|
||
}
|
||
|
||
#linkItem{
|
||
width: 100%;
|
||
overflow-wrap: break-word;
|
||
box-sizing: border-box;
|
||
min-height: 185px;
|
||
padding: 2% 1.3%;
|
||
margin-top: 1%;
|
||
|
||
border-radius: 15px;
|
||
|
||
/* display: none; */
|
||
|
||
}
|
||
|
||
/* .btn{
|
||
padding: 0.8% 2%;
|
||
border-radius: 5px;
|
||
border-color: var(--lightBlue);
|
||
color: var(--white);
|
||
margin: 2% 0 0 0;
|
||
}
|
||
|
||
.btn:hover{
|
||
background-color: var(--lightBlue);
|
||
color: var(--baseBlue);
|
||
transition: .7s;
|
||
} */
|
||
|
||
.ptg{
|
||
margin: 0 0 2px 2%;
|
||
margin-bottom: 2px;
|
||
|
||
}
|
||
|
||
#linkUnderneath, #linkUnderneath1{
|
||
padding: 0;
|
||
margin: 7px 0 0 0;
|
||
}
|
||
|
||
.under{
|
||
margin: 0;
|
||
padding: 2% 0 0 0;
|
||
color: var(--lightBlue);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ----------- footer ------------- */
|
||
.notiInnner{
|
||
display: flex;
|
||
background-color: var(--blue);
|
||
text-align: center;
|
||
justify-content: center;
|
||
border: var(--white) solid 1px;
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.footerP, .footerA{
|
||
background-color: var(--blue);
|
||
font-size: 15px;
|
||
}
|
||
|
||
.footerP{
|
||
padding: 0 2%;
|
||
color: var(--white);
|
||
}
|
||
|
||
.footerA{
|
||
color: #a9d4ff !important;
|
||
}
|
||
|
||
footer{
|
||
text-align: center;
|
||
margin: 3% 0 0;
|
||
}
|
||
|
||
/* ---------------------------------- @media ---------------------------------- */
|
||
|
||
/* Small Mobile: 320px - 425px (for older or compact smartphones)*/
|
||
/* Modern Mobile: 375px - 575px (for modern smartphones)*/
|
||
/* Landscape Phones / Small Tablets: 576px - 767px*/
|
||
/* Tablets (Portrait): 768px - 991px*/
|
||
/* Laptops / Small Desktops: 992px - 1199px*/
|
||
/* Desktops: 1200px - 1400px (or higher)*/
|
||
/* Large Desktops / High-Resolution Screens: 1401px and above */
|
||
|
||
@media (min-width: 1921px) {
|
||
.container{
|
||
padding: 0 calc(100%/4);
|
||
}
|
||
|
||
.input1Width, #tel {
|
||
width: 15vw;
|
||
}
|
||
|
||
#tgHover, #bt{
|
||
width: 16vw;
|
||
}
|
||
|
||
.ent p{
|
||
width: 50%;
|
||
}
|
||
|
||
.ent{
|
||
width: 43%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1400px) and (min-width: 1200px) {
|
||
.container{
|
||
padding: 0 6%;
|
||
}
|
||
|
||
/* .input1Width {
|
||
width: 15vw;
|
||
} */
|
||
}
|
||
|
||
@media (max-width: 1199px) and (min-width: 992px) {
|
||
.container{
|
||
padding: 0 7%;
|
||
}
|
||
|
||
/* .input1Width {
|
||
width: 15vw;
|
||
} */
|
||
|
||
.f14{
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 991px) and (min-width: 768px) {
|
||
|
||
input::placeholder, textarea::placeholder {
|
||
font-size:10px;
|
||
}
|
||
|
||
.container{
|
||
padding: 0 7%;
|
||
}
|
||
|
||
.input1Width, #inputLink {
|
||
min-height: 20px;
|
||
}
|
||
|
||
.zayavkaH1{
|
||
font-size: 20px;
|
||
}
|
||
|
||
#tgHover, #bt{
|
||
font-size: 12px;
|
||
}
|
||
|
||
.inputZ, .f14, .footerP, .footerA {
|
||
font-size: 10.5px;
|
||
}
|
||
}
|
||
|
||
|
||
@media (max-width: 767px) and (min-width: 576px) {
|
||
|
||
input::placeholder, textarea::placeholder {
|
||
font-size: 9px;
|
||
}
|
||
|
||
.container{
|
||
padding: 0 7%;
|
||
}
|
||
|
||
.input1Width, #inputLink {
|
||
min-height: 20px;
|
||
}
|
||
|
||
#tgHover, #bt{
|
||
font-size: 10px;
|
||
min-height: 55px;
|
||
}
|
||
|
||
.zayavkaH1{
|
||
font-size: 18px;
|
||
}
|
||
|
||
.inputZ, .f14, .footerP, .footerA {
|
||
font-size: 9.5px;
|
||
}
|
||
|
||
.logoIMG{
|
||
max-width: 75%;
|
||
height: auto;
|
||
}
|
||
|
||
#linkItem{
|
||
min-height: 200px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 575px) and (min-width: 426px) {
|
||
*{
|
||
padding: 0;
|
||
background-color: var(--baseBlue);
|
||
margin: inherit;
|
||
}
|
||
|
||
input::placeholder, textarea::placeholder {
|
||
font-size: 7px;
|
||
}
|
||
|
||
.container, .cont{
|
||
padding: 0;
|
||
}
|
||
|
||
.e1 {
|
||
flex-direction: column;
|
||
text-align: start;
|
||
margin: 5% 0 0 0;
|
||
padding: 0 0 4%;
|
||
align-items: center;
|
||
}
|
||
|
||
.input1Width, #inputLink {
|
||
min-height: 20px;
|
||
}
|
||
|
||
#tgHover, #bt{
|
||
font-size: 14px;
|
||
width: 100%;
|
||
min-height: 50px;
|
||
}
|
||
|
||
.input1Width {
|
||
box-sizing: border-box;
|
||
padding-left: 3%;
|
||
color: var(--white);
|
||
}
|
||
|
||
.colms, .input1Width{
|
||
width: 100%;
|
||
}
|
||
|
||
.zayavkaH1{
|
||
font-size: 1.3em;
|
||
padding: 4% 0;
|
||
}
|
||
|
||
.inputZ, .f14, .footerP, .footerA {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.inputZ{
|
||
margin: 0 0 1%;
|
||
padding: 1% 0 0.5% 2%;
|
||
}
|
||
|
||
.logoIMG{
|
||
max-width: 70%;
|
||
height: auto;
|
||
margin: 6% 0 4% -21%;
|
||
}
|
||
|
||
#linkItem{
|
||
min-height: 200px;
|
||
}
|
||
|
||
#linkTao{
|
||
min-height: 20px;
|
||
}
|
||
|
||
#tel {
|
||
width: 100%;
|
||
}
|
||
|
||
.e3 {
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
margin: 0 !important;
|
||
padding: 0 0 3%;
|
||
width: 100%;
|
||
}
|
||
|
||
.v{
|
||
margin-bottom: 2% !important;
|
||
}
|
||
|
||
.forDown{
|
||
margin-bottom: 3%;
|
||
}
|
||
|
||
#email{
|
||
margin-top: 3%;
|
||
}
|
||
|
||
input[type="radio"] {
|
||
margin: 0 2% 2% 0;
|
||
}
|
||
|
||
.btn{
|
||
padding: 2%;
|
||
margin: 0;
|
||
}
|
||
|
||
.e1, .e2 {
|
||
width: 80%;
|
||
}
|
||
|
||
footer{
|
||
margin: 5% 1%;
|
||
}
|
||
|
||
.footerP{
|
||
padding: 0.5%;
|
||
}
|
||
|
||
#bt{
|
||
width: 100%;
|
||
}
|
||
|
||
.cont{
|
||
width: 80%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 426px) and (min-width: 350px) {
|
||
.container{
|
||
padding: 0;
|
||
}
|
||
|
||
#tgHover, #bt{
|
||
font-size: 12px;
|
||
width: 100%;
|
||
min-height: 42px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.zayavkaH1 {
|
||
font-size: 19px;
|
||
padding: 7% 0 8%;
|
||
}
|
||
|
||
.e1 {
|
||
flex-direction: column;
|
||
width: 70%;
|
||
text-align: start;
|
||
margin: 0 !important;
|
||
padding: 0 0 4%;
|
||
align-items: center;
|
||
}
|
||
|
||
.input1Width, #inputLink {
|
||
min-height: 20px;
|
||
}
|
||
|
||
.input1Width {
|
||
box-sizing: border-box;
|
||
padding-left: 3%;
|
||
color: var(--white);
|
||
}
|
||
|
||
.colms, .input1Width{
|
||
width: 100%;
|
||
}
|
||
|
||
.inputZ, .f14, .footerP, .footerA {
|
||
font-size: 14px;
|
||
/* padding: 0 0 3%; */
|
||
}
|
||
|
||
.inputZ{
|
||
margin: 0 0 5%;
|
||
padding: 1% 0 0.5% 2%;
|
||
margin-bottom: 3%;
|
||
}
|
||
|
||
#tel{
|
||
width: 100%;
|
||
}
|
||
|
||
.logoIMG{
|
||
max-width: 75%;
|
||
height: auto;
|
||
margin: 6% 0 0 -21%;
|
||
}
|
||
|
||
#linkItem{
|
||
min-height: 200px;
|
||
}
|
||
|
||
#linkTao{
|
||
min-height: 20px;
|
||
}
|
||
|
||
.e3 {
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
margin: 0 !important;
|
||
padding: 0 0 3%;
|
||
width: 100%;
|
||
}
|
||
|
||
.v{
|
||
margin-bottom: 2% !important;
|
||
}
|
||
|
||
input[type="radio"] {
|
||
margin: 0 2% 2% 0;
|
||
}
|
||
|
||
.btn{
|
||
padding: 2%;
|
||
}
|
||
|
||
.e1, .e2 {
|
||
width: 85%;
|
||
}
|
||
|
||
footer{
|
||
margin: 8% 1%;
|
||
}
|
||
|
||
.footerP{
|
||
padding: 1% 2%;
|
||
}
|
||
|
||
#bt{
|
||
width: 100%;
|
||
}
|
||
|
||
#tgHover a{
|
||
margin: 0;
|
||
}
|
||
|
||
.cont{
|
||
width: 86%;
|
||
}
|
||
|
||
.forDown{
|
||
margin: 0 0 3%;
|
||
}
|
||
#email{
|
||
margin-top: 3%;
|
||
}
|
||
}
|