Файл: index.css
Строк: 351
body, html {
margin: 0;
padding: 0;
border: 0;
outline:
0;
vertical-align: top;
background: 0 0;
font-size: 16px;
line-height: 1;
width: 100%;
min-width: 320px;
height:
100%;
box-sizing: border-box;
background: #fff;
font-family:
'Roboto',sans-serif;
}
a, abbr, acronym, address, applet, b, big,
blockquote, caption, center, cite, code, dd, del, dfn, div, dl, dt, em,
fieldset, font, form, h1, h2, h3, h4, h5, h6, i, iframe, img, ins, kbd,
label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike,
strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: top;
background: 0
0;
}
header {
background-color: #43d3ab;
padding: 30px
0;
}
header .logo_box {
display: block;
}
@media (max-width:
430px){
header .logo_box img {
max-width: 100%;
display:
inline-block;
margin: 0 auto;
}
}
.container, footer, header {
width: 100%;
}
.cont_center {
margin: 0 auto;
max-width:
1200px;
}
@media (max-width: 640px){
.cont_center {
padding: 0
20px;
}
}
@media (max-width: 1200px){
.cont_center {
padding: 0
30px;
}
}
a {
color: #21b372;
text-decoration: none;
}
a
{
transition: all .3s;
}
@media (max-width: 768px){
.top_box
.paralax_box, header .logo_box {
text-align: center;
}
}
header
.logo_box {
color: aliceblue;
font-size: 32px;
}
.top_box {
background-color: #43d3ab;
margin-top: -1px;
}
.top_box
.title_box {
width: 100%;
color: #f3f3f3;
margin-bottom:
55px;
}
@media (max-width: 768px){
.top_box .title_box {
width:
100%;
text-align: center;
}
}
.pptos_box h2, .top_box .title_box
h1 {
font-size: 3.5em;
font-weight: 700;
margin-bottom:
28px;
}
@media (max-width: 430px){
.top_box .title_box h1 {
font-size: 2.2em;
}
}
.top_box .title_box h2 {
font-size:
1.125em;
font-weight: 400;
line-height: 1.563em;
}
.top_box
.buttons_box {
max-width: 100%;
}
@media (max-width:
1200px){
.top_box .buttons_box {
max-width: 100%;
}
}
@media
(max-width: 768px){
.top_box .buttons_box {
width: 100%;
text-align: center;
}
}
.top_box .buttons_box a.store_btn, footer
.lang_block .lang_box {
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
transition: all
.4s;
}
.top_box .buttons_box a.store_btn {
margin: 0 30px 30px
0;
display: inline-block;
box-shadow: 0 16px 32px
rgba(0,0,0,.3);
-webkit-border-radius: 8px;
-moz-border-radius:
8px;
-ms-border-radius: 8px;
border-radius: 8px;
background:
mediumseagreen;
padding: 10px;
color: whitesmoke;
}
.top_box
.buttons_box a.vk {
background: #4D7198;
}
.top_box .buttons_box
a.reg {
background: palevioletred;
}
.top_box .buttons_box a.suces
{
background: mediumseagreen;
}
@media (max-width:
768px){
.top_box .buttons_box a.store_btn {
margin: 0 20px 30px;
width: 80%;
}
}
.top_box .buttons_box .links .apk:hover, .top_box
.buttons_box a.store_btn:hover {
transform: translateY(-10px);
box-shadow: 0 26px 40px rgba(0,0,0,.2);
}
.top_box .buttons_box .links
{
font-size: .875em;
padding-bottom: 50px;
}
@media
(max-width: 640px){
.top_box .buttons_box .links, footer {
text-align: center;
font-size: 1em;
}
}
.top_box .buttons_box
.links span {
display: inline-block;
margin-right: 50px;
color: #052517;
opacity: .5;
}
.top_box .buttons_box .links a {
color: #abddc7;
margin-right: 20px;
}
@media (max-width:
640px){
.top_box .buttons_box .links a, .top_box .buttons_box .links span
{
display: inline-block;
margin: 0 0
10px;
}
}
.contacts_block .cont_box br, .top_box .buttons_box .links
br, footer br {
display: none;
}
@media (max-width:
640px){
.contacts_block .cont_box br, .top_box .buttons_box .links br,
footer .links_box a, footer br {
display:
inline-block;
}
}
.tri_block {
margin-top: 40px;
margin-bottom: 70px;
display: flex;
justify-content:
space-between;
}
.tri_block .tri_box {
width: 33%;
text-align: center;
padding: 0 65px;
line-height:
1.3em;
}
@media (max-width: 768px){
.contacts_block, .tri_block {
display: block;
}
}
@media (max-width: 430px){
.tri_block {
margin-bottom: 30px;
}
}
@media (max-width: 1024px){
.tri_block
.tri_box {
padding: 0 20px;
}
}
@media (max-width:
768px){
.tri_block .tri_box {
width: 100%;
padding: 20px
0px;
}
}
@media (max-width: 430px){
.tri_block .tri_box {
padding: 20px 0;
}
}
.tri_block .tri_box .img {
display:
inline-block;
margin-bottom: 30px;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
transition:
all .4s;
}
.tri_block .tri_box:hover .img {
transform:
scale(1.3);
}
.tri_block .tri_box h3 {
color: #21b372;
font-size: 1.125em;
font-weight: 700;
text-transform:
uppercase;
margin-bottom: 30px;
}
.vhod_block
{
border-top: 1px solid #ebebeb;
padding-top: 40px;
margin-bottom:
70px;
display: flex;
justify-content:
space-between;
}
.vhod_block .aut_box, .vhod_block .reg_box {
width: 33%;
text-align: center;
padding: 0 65px;
line-height: 1.3em;
}
@media (max-width: 768px){
.vhod_block {
display: block;
}
}
@media (max-width: 430px){
.vhod_block {
margin-bottom: 30px;
}
}
@media (max-width: 1024px){
.vhod_block
.aut_box, .vhod_block .reg_box {
padding: 0 20px;
}
}
@media
(max-width: 768px){
.vhod_block .aut_box, .vhod_block .reg_box {
width: 100%;
padding: 20px 0px;
}
}
@media (max-width:
430px){
.vhod_block .aut_box, .vhod_block .reg_box {
padding: 20px
0;
}
}
.vhod_block .aut_box .img, .vhod_block .reg_box .img {
display: inline-block;
margin-bottom: 30px;
-webkit-transition:
all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.vhod_block .aut_box:hover .img, .vhod_block
.reg_box:hover .img {
transform: scale(1.3);
}
.vhod_block
.aut_box h3, .vhod_block .reg_box h3 {
color: #43d3ab;
font-size:
1.125em;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 30px;
}
.vhod_block .aut_box h1, .vhod_block .reg_box h1
{
color: #43d3ab;
font-size: 1.6em;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 30px;
}
/*
ПЕРЕКЛЮЧАТЕЛИ В ВИДЕ КНОПОК */
.form_radio_btn
{
display: inline-block;
margin-right: 1px;
}
.form_radio_btn
input[type=radio] {
display: none;
}
.form_radio_btn label {
display: inline-block;
cursor: pointer;
padding: 0px 10px;
line-height: 30px;
border: 1px solid #999;
border-radius: 5px;
user-select: none;
}
/* Checked */
.form_radio_btn
input[type=radio]:checked + label {
background: #00b894;
color:
white;
}
/* Hover */
.form_radio_btn label:hover {
color:
#160306;
}
/* Disabled */
.form_radio_btn input[type=radio]:disabled
+ label {
background: #dcdde1;
color:
#160306;
}
.contacts_block {
display: flex;
justify-content: space-between;
}
.contacts_block {
border-top:
1px solid #ebebeb;
padding: 60px 0;
}
@media (max-width:
1200px){
.contacts_block {
padding: 60px 30px;
}
}
@media
(max-width: 768px){
.contacts_block{
display: block;
}
}
@media
(max-width: 640px){
.contacts_block {
padding: 40px
20px;
}
}
.contacts_block .cont_box {
font-size: .875em;
line-height: 1.3em;
width: 100%;
text-align: center;
}
@media
(max-width: 768px){
.contacts_block .cont_box {
width: 100%;
padding: 0 0;
text-align: center;
}
}
@media (max-width:
640px){
.contacts_block .cont_box {
font-size: 1em;
}
}
@media
(max-width: 430px){
.contacts_block .cont_box {
padding:
0;
}
}
.contacts_block .cont_box h3 {
margin-bottom: 10px;
font-size: 1.9em;
display: inline-block;
}
@media (max-width:
640px){
.contacts_block .cont_box h3 {
font-size:
1.5em;
}
}
.contacts_block .cont_box p {
margin-bottom:
10px;
}
footer {
text-align: center;
font-size:
.875em;
}
footer {
width: 100%;
}
footer .cont_center {
border-top: 1px solid #ebebeb;
padding: 60px 10px 10px;
}
@media
(max-width: 640px){
footer .cont_center {
padding: 30px
20px;
}
}
footer .text_box {
color: #4e5869;
margin-bottom:
14px;
}
footer .links_box a {
margin: 0 14px;
display:
inline-block;
}
@media (max-width: 640px){
footer .links_box a,
footer br {
display: inline-block;
}
}
@media (max-width:
640px){
footer .links_box a {
margin-bottom:
10px;
}
}
.modal_div {
width:
100%;
height: auto;
background: #fff;
position: fixed;
margin: 0 auto;
display: none;
opacity: 0;
z-index:
5;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке)
*/
.modal_close {
color: aliceblue;
font-size: 21px;
position:
absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: block;
}
/* Пoдлoжкa */
#overlay {
z-index:3; /*
пoдлoжкa дoлжнa быть выше слoев элементoв
сaйтa, нo ниже слoя мoдaльнoгo oкнa */
position:fixed; /* всегдa перекрывaет весь сaйт */
background-color:#000; /* чернaя */
opacity:0.8; /* нo
немнoгo прoзрaчнa */
-moz-opacity:0.8; /* фикс
прозрачности для старых браузеров */
filter:alpha(opacity=80);
width:100%;
height:100%; /*
рaзмерoм вo весь экрaн */
top:0; /* сверху и
слевa 0, oбязaтельные свoйствa! */
left:0;
cursor:pointer;
display:none; /* в oбычнoм сoстoянии её
нет) */
}
.m_chat {
color: #54a0ff;
}
.ui-form {
/* max-width: 350px; */
padding: 20px 10px 10px;
/* margin: 50px
auto 30px; */
background: white;
}
.ui-form h3 {
position:
relative;
z-index: 5;
margin: 0 0 30px;
text-align: center;
color: #4a90e2;
font-size: 30px;
font-weight: normal;
}
.form-row
{
position: relative;
margin-bottom: 40px;
}
.form-row input {
display: block;
width: 90%;
padding: 0 10px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
background: none;
border-width:
0;
border-bottom: 2px solid #4a90e2;
transition: all 0.2s
ease;
}
.form-row label {
position: absolute;
left: 13px;
color:
#9d959d;
font-size: 14px;
font-weight: 300;
transform:
translateY(-35px);
transition: all 0.2s ease;
}
.form-row input:focus
{
outline: 0;
border-color: #F77A52;
}
.form-row input:focus +
label,
.form-row input:valid + label {
transform: translateY(-60px);
margin-left: -14px;
font-size: 14px;
font-weight: 400;
outline:
0;
border-color: #F77A52;
color: #F77A52;
}
.ui-form
input[type="submit"] {
width: 90%;
padding: 0px;
line-height: 42px;
background: #4a90e2;
border-width: 0;
color:
white;
font-size: 20px;
}
.ui-form p {
margin: 0;
padding-top:
10px;
}