Skip to content

T
taskonsite-архив-перенесен
Commit 4f42eef4 authored by Олег Гиммельшпах's avatar Олег Гиммельшпах
Browse files
Options

update template

parent d1d8031b
Hide whitespace changes
Inline Side-by-side
Showing with 2604 additions and 704 deletions
frontend/web/css/screen.css
View file @ 4f42eef4
...@@ -135,6 +135,26 @@ u { ...@@ -135,6 +135,26 @@ u {
line-height: 22px; line-height: 22px;
} }
@media only screen and (min-width: 320px) and (max-width: 479px) {
.wow {
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 970px) { @media only screen and (min-width: 768px) and (max-width: 970px) {
.container { .container {
width: 750px; width: 750px;
...@@ -577,7 +597,7 @@ a.toggle_bottom:hover, a.toggle_bottom:active, a.toggle_bottom:focus { ...@@ -577,7 +597,7 @@ a.toggle_bottom:hover, a.toggle_bottom:active, a.toggle_bottom:focus {
transition: all 0.3s linear 0.1s; transition: all 0.3s linear 0.1s;
} }
a.toggle_bottom:hover .icon-arrowDown2:after, a.rosneft_btn:hover .icon-arrowDown2:after, a.gem_mail_top-btn:hover .icon-arrowDown2:after, a.appl_btn:hover .icon-arrowDown2:after { a.toggle_bottom:hover .icon-arrowDown2:after, a.rosneft_btn:hover .icon-arrowDown2:after, a.gem_mail_btn:hover .icon-arrowDown2:after, a.appl_btn:hover .icon-arrowDown2:after, a.ops_btn:hover .icon-arrowDown2:after {
background: url(../images/icon/arrow_down_black.png) no-repeat; background: url(../images/icon/arrow_down_black.png) no-repeat;
} }
...@@ -12705,250 +12725,200 @@ p.sborka_shkafov_bigp { ...@@ -12705,250 +12725,200 @@ p.sborka_shkafov_bigp {
position: relative; position: relative;
padding-top: 67px; padding-top: 67px;
} }
@media only screen and (min-width: 320px) and (max-width: 767px) {
.gen_mail_top {
padding-bottom: 40px;
}
}
.gen_mail_top-title { .gen_mail_top-title {
font-family: "RobotoBold"; font-family: "RobotoBold";
font-size: 36px; font-size: 36px;
line-height: 50px; line-height: 50px;
letter-spacing: 0.8px; letter-spacing: 0.8px;
} }
@media only screen and (min-width: 480px) and (max-width: 767px) {
.gen_mail_top-title {
font-size: 34px;
line-height: 40px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.gen_mail_top-title {
font-size: 20px;
line-height: 30px;
text-align: center;
}
}
.gen_mail_top-zadacha_title { .gen_mail_top-zadacha_title {
font-size: 16px; font-size: 16px;
font-family: "RobotoBold"; font-family: "RobotoBold";
display: block; display: block;
margin-top: 17px; margin-top: 17px;
} }
@media only screen and (min-width: 320px) and (max-width: 479px) {
.gen_mail_top-zadacha_title {
margin-top: 40px;
}
}
.gen_mail_top-zadacha_txt { .gen_mail_top-zadacha_txt {
font-size: 16px; font-size: 16px;
width: 540px; width: 540px;
margin-top: 15px; margin-top: 15px;
line-height: 21px; line-height: 21px;
} }
a.gen_mail_top-btn {
display: block;
font-size: 20px;
color: #fff;
width: 201px;
height: 47px;
border: 2px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
margin-top: 66px;
float: left;
-moz-transition: all 0.3s linear 0.1s;
-o-transition: all 0.3s linear 0.1s;
-webkit-transition: all 0.3s linear 0.1s;
-ms-transition: all 0.3s linear 0.1s;
transition: all 0.3s linear 0.1s;
}
@media only screen and (min-width: 480px) and (max-width: 767px) { @media only screen and (min-width: 480px) and (max-width: 767px) {
a.gen_mail_top-btn { .gen_mail_top-zadacha_txt {
position: static; width: 100%;
top: 0;
left: 0;
float: none;
margin: 20px auto 40px;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
a.gen_mail_top-btn { .gen_mail_top-zadacha_txt {
position: static; width: 100%;
top: 0;
left: 0;
float: none;
margin: 20px 0 40px;
} }
} }
a.gen_mail_top-btn:hover, a.gen_mail_top-btn:active, a.gen_mail_top-btn:focus { .gen_mail_top h2 {
color: #000;
text-decoration: none;
background: #fff;
}
.gen_mail-title_list {
font-size: 30px; font-size: 30px;
color: #fff; color: #fff;
background: #64649B; background: #64649B;
padding: 10px 15px; padding: 13px 20px;
display: inline-block; display: inline-block;
margin-top: 206px; margin-top: 206px;
}
.keys_appl_top {
width: 100%;
height: 444px;
background: #60AD26 url(../images/keys_appl_bg.png) no-repeat bottom center;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
padding-top: 53px;
position: relative;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.keys_appl_top {
height: 574px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.keys_appl_top {
height: 535px;
}
}
.keys_appl_top h1 {
font-size: 36px;
line-height: 50px;
letter-spacing: 0.72px;
font-family: "RobotoBold"; font-family: "RobotoBold";
} }
@media only screen and (min-width: 768px) and (max-width: 970px) { @media only screen and (min-width: 768px) and (max-width: 970px) {
.keys_appl_top h1 { .gen_mail_top h2 {
font-size: 28px; margin-top: 170px;
line-height: 45px;
} }
} }
@media only screen and (min-width: 480px) and (max-width: 767px) { @media only screen and (min-width: 480px) and (max-width: 767px) {
.keys_appl_top h1 { .gen_mail_top h2 {
font-size: 25px; margin-top: 90px;
line-height: 30px;
margin-bottom: 20px;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.keys_appl_top h1 { .gen_mail_top h2 {
font-size: 22px; margin-top: 40px;
line-height: 30px; font-size: 21px;
margin-bottom: 20px;
} }
} }
.appl_p1 { .mail_p1 {
background: url(../images/parallax/appl_p1.png) no-repeat center center; background: url(../images/parallax/mail_p1.png) no-repeat center center;
width: 357px; width: 250px;
height: 321px; height: 159px;
position: absolute; position: absolute;
top: 90px; top: 134px;
left: 0; left: 138px;
} }
@media only screen and (min-width: 320px) and (max-width: 1300px) { @media only screen and (min-width: 320px) and (max-width: 1300px) {
.appl_p1 { .mail_p1 {
display: none; display: none;
} }
} }
@media only screen and (min-width: 1301px) and (max-width: 1600px) { @media only screen and (min-width: 1301px) and (max-width: 1600px) {
.appl_p1 { .mail_p1 {
top: 60px; top: 90px;
left: -85px; left: -70px;
}
}
@media only screen and (min-width: 1501px) and (max-width: 1600px) {
.mail_p1 {
top: 0px;
left: -90px;
} }
} }
.appl_p2 { .mail_p2 {
background: url(../images/parallax/appl_p2.png) no-repeat center center; background: url(../images/parallax/mail_p2.png) no-repeat center center;
width: 270px; width: 289px;
height: 295px; height: 273px;
position: absolute; position: absolute;
top: 333px; top: 384px;
left: 225px; left: 255px;
z-index: 4;
} }
@media only screen and (min-width: 320px) and (max-width: 1300px) { @media only screen and (min-width: 320px) and (max-width: 1300px) {
.appl_p2 { .mail_p2 {
display: none; display: none;
} }
} }
@media only screen and (min-width: 1301px) and (max-width: 1600px) { @media only screen and (min-width: 1301px) and (max-width: 1600px) {
.appl_p2 { .mail_p2 {
left: 60px; top: 384px;
left: -40px;
} }
} }
.appl_p3 { .mail_p3 {
background: url(../images/parallax/appl_p3.png) no-repeat center center; background: url(../images/parallax/mail_p3.png) no-repeat center center;
width: 386px; width: 350px;
height: 448px; height: 266px;
position: absolute; position: absolute;
top: 109px; top: 389px;
right: 76px; right: 342px;
z-index: 4;
} }
@media only screen and (min-width: 320px) and (max-width: 1300px) { @media only screen and (min-width: 320px) and (max-width: 970px) {
.appl_p3 { .mail_p3 {
display: none; display: none;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 1300px) {
.mail_p3 {
right: 130px;
}
}
@media only screen and (min-width: 1301px) and (max-width: 1600px) { @media only screen and (min-width: 1301px) and (max-width: 1600px) {
.appl_p3 { .mail_p3 {
right: 0; top: 389px;
top: 50px; right: 200px;
} }
} }
.appl_p4 { .mail_p4 {
background: url(../images/parallax/appl_p4.png) no-repeat center center; background: url(../images/parallax/mail_p4.png) no-repeat center center;
width: 268px; width: 553px;
height: 279px; height: 663px;
position: absolute; position: absolute;
top: 352px; top: 94px;
right: 442px; right: 467px;
z-index: 4;
} }
@media only screen and (min-width: 320px) and (max-width: 1300px) { @media only screen and (min-width: 320px) and (max-width: 970px) {
.appl_p4 { .mail_p4 {
display: none; display: none;
} }
} }
@media only screen and (min-width: 1301px) and (max-width: 1600px) { @media only screen and (min-width: 320px) and (max-width: 1300px) {
.appl_p4 { .mail_p4 {
top: 390px;
right: 150px; right: 150px;
} }
} }
@media only screen and (min-width: 1301px) and (max-width: 1600px) {
.appl_zak { .mail_p4 {
font-size: 16px; top: 94px;
font-family: "RobotoBold"; right: 230px;
display: block;
margin-top: 18px;
margin-bottom: 33px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.appl_zak {
display: inline-block;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.appl_zak {
display: inline-block;
} }
} }
.appl_zak_logo {
width: 140px; .mail_p5 {
height: 41px; background: url(../images/parallax/mail_p5.png) no-repeat center center;
display: block; width: 159px;
height: 130px;
position: absolute;
top: 154px;
right: 234px;
} }
@media only screen and (min-width: 480px) and (max-width: 767px) { @media only screen and (min-width: 320px) and (max-width: 1300px) {
.appl_zak_logo { .mail_p5 {
display: inline-block; display: none;
position: relative;
left: 10px;
top: 15px;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 1301px) and (max-width: 1600px) {
.appl_zak_logo { .mail_p5 {
display: inline-block; top: 85px;
position: relative; right: 40px;
left: 10px;
top: 15px;
} }
} }
a.appl_btn { a.gem_mail_btn {
display: block; display: block;
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
...@@ -12962,9 +12932,7 @@ a.appl_btn { ...@@ -12962,9 +12932,7 @@ a.appl_btn {
-webkit-border-radius: 50px; -webkit-border-radius: 50px;
-o-border-radius: 50px; -o-border-radius: 50px;
-ms-border-radius: 50px; -ms-border-radius: 50px;
position: relative; margin-top: 66px;
top: 157px;
left: 0px;
float: left; float: left;
-moz-transition: all 0.3s linear 0.1s; -moz-transition: all 0.3s linear 0.1s;
-o-transition: all 0.3s linear 0.1s; -o-transition: all 0.3s linear 0.1s;
...@@ -12973,7 +12941,7 @@ a.appl_btn { ...@@ -12973,7 +12941,7 @@ a.appl_btn {
transition: all 0.3s linear 0.1s; transition: all 0.3s linear 0.1s;
} }
@media only screen and (min-width: 480px) and (max-width: 767px) { @media only screen and (min-width: 480px) and (max-width: 767px) {
a.appl_btn { a.gem_mail_btn {
position: static; position: static;
top: 0; top: 0;
left: 0; left: 0;
...@@ -12982,706 +12950,1880 @@ a.appl_btn { ...@@ -12982,706 +12950,1880 @@ a.appl_btn {
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
a.appl_btn { a.gem_mail_btn {
position: static; position: static;
top: 0; top: 0;
left: 0; left: 0;
float: none; float: none;
margin: 20px 0 40px; margin: 40px 0;
} }
} }
a.appl_btn:hover, a.appl_btn:active, a.appl_btn:focus { a.gem_mail_btn:hover, a.gem_mail_btn:active, a.gem_mail_btn:focus {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
background: #fff; background: #fff;
} }
.appl_par { .keys_mail_list {
background: url(../images/appl_par.png) no-repeat center center; margin-top: 52px;
max-width: 539px;
height: 389px;
top: 21px;
left: 10px;
position: relative;
} }
@media only screen and (min-width: 768px) and (max-width: 970px) { .keys_mail_list li {
.appl_par { background: url(../images/icon/keys_mail_list.png) no-repeat 0% 50%;
background-size: cover; padding-left: 30px;
-moz-background-size: cover; font-size: 21px;
-webkit-background-size: cover; font-family: "RobotoBold";
-o-background-size: cover; color: #fff;
height: 242px; margin-bottom: 14px;
top: 42px !important;
}
} }
@media only screen and (min-width: 480px) and (max-width: 767px) { @media only screen and (min-width: 480px) and (max-width: 767px) {
.appl_par { .keys_mail_list li {
position: static; font-size: 18px;
background-size: cover; line-height: 20px;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
height: 303px;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.appl_par { .keys_mail_list li {
width: 270px; font-size: 16px;
height: 195px; line-height: 20px;
top: 10px !important; background: url(../images/icon/keys_mail_list.png) no-repeat 0% 20%;
left: 0 !important;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
position: relative;
} }
} }
.keys_appl_bt { .short_keys_sect_mail {
background: url(../images/keys_appl_bt.png) no-repeat bottom center; background: #D6E4E7;
}
.short_keys_sect_mail .short_keys_title {
color: #2d323a;
margin-left: 0;
}
.module_gen {
width: 100%; width: 100%;
min-height: 62px;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
position: relative;
z-index: 2;
top: -62px;
}
.appl_how_works {
width: 100%;
background: #60AD26;
min-height: 100px; min-height: 100px;
position: relative; background: #D6E4E7;
top: -62px; padding-top: 48px;
padding-top: 45px;
padding-bottom: 41px;
} }
.appl_how_works h2 { .module_gen h2 {
font-size: 30px; font-size: 30px;
color: #fff; color: #fff;
background: #262E38; font-family: "RobotoBold";
background: #0090AF;
padding: 8px 14px;
display: inline-block; display: inline-block;
padding: 10px 15px 17px 23px; }
@media only screen and (min-width: 320px) and (max-width: 479px) {
.module_gen h2 {
font-size: 25px;
}
}
.module_gen h3 {
font-size: 20px;
color: #444;
margin-top: 31px;
line-height: 24px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.module_gen h3 {
font-size: 16px;
}
}
.module_gen_title {
font-size: 31px;
color: #444;
font-family: "RobotoBold"; font-family: "RobotoBold";
margin-bottom: 36px;
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.appl_how_works h2 { .module_gen_title {
font-size: 20px; font-size: 27px;
margin-bottom: 30px;
} }
} }
.module_gen_txt {
font-size: 16px;
color: #2d323a;
line-height: 19px;
}
.appl_list { .module_mail_img {
margin-top: 23px; width: 686px;
float: right;
margin-top: 33px;
position: relative;
margin-bottom: 169px;
} }
.appl_list li { @media only screen and (min-width: 768px) and (max-width: 970px) {
background: url(../images/appl_list.png) no-repeat center left; .module_mail_img {
padding-left: 27px; margin-bottom: 30px;
font-size: 21px; }
margin-bottom: 14px;
font-family: "RobotoBold";
} }
@media only screen and (min-width: 480px) and (max-width: 767px) { @media only screen and (min-width: 480px) and (max-width: 767px) {
.appl_list li { .module_mail_img {
font-size: 19px; width: 100%;
margin-bottom: 30px;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.appl_list li { .module_mail_img {
font-size: 16px; width: 100%;
margin-bottom: 30px;
} }
} }
.module_mail_img img {
.appl_content { max-width: 100%;
background: #fff; height: auto;
}
.module_mail_img p {
font-size: 16px;
color: #2d323a; color: #2d323a;
margin-top: -62px; text-align: center;
padding-top: 70px; margin-bottom: 20px;
padding-bottom: 48px;
} }
.appl_content p {
margin-bottom: 15px; .module_mail_img2 {
font-size: 17px; width: 688px;
line-height: 26px; float: right;
position: relative;
margin-bottom: 44px;
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 768px) and (max-width: 970px) {
.appl_content p { .module_mail_img2 {
font-size: 14px; margin-bottom: 30px;
} }
} }
@media only screen and (min-width: 480px) and (max-width: 767px) {
.blog_container { .module_mail_img2 {
background: #fff; width: 100%;
width: 100%; margin-bottom: 30px;
padding-top: 46px; }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) {
.blog { .module_mail_img2 {
padding-bottom: 30px; width: 100%;
margin-bottom: 30px;
}
} }
.blog h1 { .module_mail_img2 img {
font-size: 29px; max-width: 100%;
font-family: "RobotoBold"; height: auto;
color: #2d3642;
margin-bottom: 16px;
} }
.subsc_blog { .module_mail_img3 {
background: #F1F1F1; width: 687px;
padding: 20px; float: right;
position: relative;
margin-bottom: 123px;
} }
.subsc_blog_title { @media only screen and (min-width: 768px) and (max-width: 970px) {
color: #2d323a; .module_mail_img3 {
font-size: 25px; margin-bottom: 30px;
font-family: "RobotoBold"; }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.module_mail_img3 {
width: 100%;
margin-bottom: 30px;
}
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.subsc_blog_title { .module_mail_img3 {
font-size: 17px; width: 100%;
margin-bottom: 30px;
} }
} }
.subsc_blog_txt { .module_mail_img3 img {
font-size: 17px; max-width: 100%;
height: auto;
}
.module_mail2_itm1 {
position: absolute;
left: -254px;
top: 42px;
width: 221px;
font-size: 16px;
color: #2d323a; color: #2d323a;
line-height: 26px; line-height: 19px;
margin: 15px 0px;
} }
@media only screen and (min-width: 768px) and (max-width: 970px) { @media only screen and (min-width: 320px) and (max-width: 970px) {
.subsc_blog_txt { .module_mail2_itm1 {
margin: 10px 0 15px; display: none;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { .module_mail2_itm1:after {
.subsc_blog_txt { content: "";
font-size: 14px; display: block;
} background: url(../images/icon/module_mail2_itm1.png) no-repeat;
width: 348px;
height: 77px;
position: absolute;
left: 80px;
top: 72px;
} }
.subsc_blog_form input[type="email"] { .module_mail3_itm1 {
display: block; position: absolute;
width: 273px; left: -254px;
height: 49px; top: 5px;
background: #FDFDFD; width: 221px;
border: 1px solid #E9E9E9;
padding: 0 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
font-size: 16px; font-size: 16px;
color: #83999e; color: #2d323a;
line-height: 19px;
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 970px) {
.subsc_blog_form input[type="email"] { .module_mail3_itm1 {
width: 100%; display: none;
} }
} }
.subsc_blog_form input[type="email"]::-webkit-input-placeholder { .module_mail3_itm1:after {
color: #83999e; content: "";
display: block;
background: url(../images/icon/module_mail3_itm1.png) no-repeat;
width: 349px;
height: 78px;
position: absolute;
left: 80px;
top: 51px;
}
.module_mail3_itm2 {
position: absolute;
left: -254px;
bottom: 9px;
width: 200px;
font-size: 16px; font-size: 16px;
opacity: 1; color: #2d323a;
line-height: 19px;
} }
.subsc_blog_form input[type="email"]:-moz-placeholder { @media only screen and (min-width: 320px) and (max-width: 970px) {
color: #83999e; .module_mail3_itm2 {
display: none;
}
}
.module_mail3_itm2:after {
content: "";
display: block;
background: url(../images/icon/module_mail3_itm2.png) no-repeat;
width: 236px;
height: 26px;
position: absolute;
left: 108px;
top: 32px;
}
.module_mail_itm1 {
position: absolute;
left: -254px;
top: 144px;
width: 221px;
font-size: 16px; font-size: 16px;
opacity: 1; color: #2d323a;
line-height: 19px;
} }
.subsc_blog_form input[type="email"]::-moz-placeholder { @media only screen and (min-width: 320px) and (max-width: 970px) {
color: #83999e; .module_mail_itm1 {
display: none;
}
}
.module_mail_itm1:after {
content: "";
display: block;
background: url(../images/icon/module_mail_itm1.png) no-repeat;
width: 363px;
height: 75px;
position: absolute;
left: 75px;
top: 109px;
}
.module_mail_itm2 {
position: absolute;
left: -254px;
bottom: 200px;
width: 221px;
font-size: 16px; font-size: 16px;
opacity: 1; color: #2d323a;
line-height: 19px;
} }
.subsc_blog_form input[type="email"]:-ms-input-placeholder { @media only screen and (min-width: 320px) and (max-width: 970px) {
color: #83999e; .module_mail_itm2 {
display: none;
}
}
.module_mail_itm2:after {
content: "";
display: block;
background: url(../images/icon/module_mail_itm2.png) no-repeat;
width: 285px;
height: 2px;
position: absolute;
left: 188px;
top: 11px;
}
.module_mail_itm3 {
position: absolute;
left: -254px;
bottom: -63px;
width: 205px;
font-size: 16px; font-size: 16px;
opacity: 1; color: #2d323a;
line-height: 19px;
} }
.subsc_blog_form .field-input.input-error { @media only screen and (min-width: 320px) and (max-width: 970px) {
background: #fff url(../images/icon-fail.png) no-repeat 96% center; .module_mail_itm3 {
border: 1px solid #E9A2A2; display: none;
}
} }
.subsc_blog_form button { .module_mail_itm3:after {
width: 178px; content: "";
height: 50px; display: block;
border-radius: 50px; background: url(../images/icon/module_mail_itm3.png) no-repeat;
-moz-border-radius: 50px; width: 285px;
-webkit-border-radius: 50px; height: 42px;
-o-border-radius: 50px; position: absolute;
-ms-border-radius: 50px; left: 104px;
text-align: center; top: -48px;
color: #655d04;
font-family: "RobotoBold";
font-size: 20px;
background-image: linear-gradient(to top, #fdd000 0%, #fff04e 100%);
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12);
color: #908505;
border: none;
border-bottom: 4px solid #D2BF00;
line-height: 43px;
display: inline-block;
margin: 20px 0px 0px;
}
.subsc_blog_form button:hover, .subsc_blog_form button:focus {
background-image: linear-gradient(to top, #fde654 0%, #fef77d 100%);
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12);
color: #908505;
border-bottom: 4px solid #D2BF00;
text-decoration: none;
}
.subsc_blog_form button:active {
background-image: linear-gradient(to top, #f4db15 0%, #fbd20d 100%);
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12);
color: #908505;
border: none;
border-top: 4px solid #D2BF00;
text-decoration: none;
} }
.article_short { .module_mail_itm4 {
margin-bottom: 57px; position: absolute;
right: 34px;
bottom: -38px;
width: 228px;
font-size: 16px;
color: #2d323a;
line-height: 19px;
} }
.article_short:last-child { @media only screen and (min-width: 320px) and (max-width: 970px) {
margin-bottom: 0; .module_mail_itm4 {
display: none;
}
} }
.article_short_title { .module_mail_itm4:before {
font-size: 25px; content: "";
line-height: 35px; display: block;
color: #3d3d3d; background: url(../images/icon/module_mail_itm4.png) no-repeat;
font-family: "RobotoBold"; width: 2px;
height: 62px;
position: absolute;
left: -10px;
top: -40px;
}
.uchet_img {
margin-top: 115px;
position: relative;
margin-bottom: 17px;
} }
@media only screen and (min-width: 768px) and (max-width: 970px) { @media only screen and (min-width: 768px) and (max-width: 970px) {
.article_short_title { .uchet_img {
font-size: 20px; margin-top: 30px;
line-height: 27px;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 480px) and (max-width: 767px) {
.article_short_title { .uchet_img {
font-size: 20px; margin-top: 30px;
line-height: 27px;
} }
} }
.article_short_title:hover, .article_short_title:focus, .article_short_title:active {
color: #49acc5;
text-decoration: none;
}
.article_short_head {
height: 30px;
width: 100%;
line-height: 30px;
font-size: 13px;
color: #949494;
margin-top: 5px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_head { .uchet_img {
height: auto; margin-top: 30px;
} }
} }
.article_short_date { .uchet_img img {
margin-right: 19px; max-width: 100%;
height: auto;
} }
.article_short_view { .uchet_img_itm1 {
position: relative; font-size: 16px;
color: #2d323a;
position: absolute;
top: -63px;
left: 170px;
width: 195px;
line-height: 19px;
} }
.article_short_view:hover .blog_toltip_left { @media only screen and (min-width: 320px) and (max-width: 970px) {
display: block; .uchet_img_itm1 {
display: none;
}
} }
.article_short_view:before { .uchet_img_itm1:before {
content: ""; content: "";
background: url(../images/icon/article_view.png) no-repeat; display: block;
width: 21px; background: url(../images/icon/uchet_img_itm1.png) no-repeat;
height: 14px; width: 22px;
display: inline-block; height: 132px;
vertical-align: middle;
margin-right: 6px;
margin-top: -3px;
}
.article_short_view .blog_toltip_left {
display: none;
width: 209px;
height: 66px;
line-height: 65px;
padding-left: 5px;
background: url(../images/blog_toltip_left.png) no-repeat center center;
text-align: center;
font-size: 14px;
font-family: "RobotoLight";
position: absolute; position: absolute;
right: -214px; left: -20px;
top: -23px; top: 60px;
} }
.article_short_tags { .uchet_img_itm2 {
margin-top: 11px; font-size: 16px;
color: #2d323a;
position: absolute;
top: -73px;
right: 80px;
width: 195px;
line-height: 19px;
} }
.article_short_tags a { @media only screen and (min-width: 320px) and (max-width: 970px) {
font-size: 14px; .uchet_img_itm2 {
color: #49acc5; display: none;
margin-right: 10px; }
} }
.article_short_tags a:hover, .article_short_tags a:focus, .article_short_tags a:active { .uchet_img_itm2:before {
text-decoration: underline; content: "";
display: block;
background: url(../images/icon/uchet_img_itm2.png) no-repeat;
width: 22px;
height: 132px;
position: absolute;
left: 1px;
top: 70px;
} }
.article_short_txt {
overflow-x: auto; .taskon_mail_block {
padding: 10px 0px 34px 33px;
background: #eaeeef;
margin-bottom: 40px;
} }
.article_short_txt img { @media only screen and (min-width: 768px) and (max-width: 970px) {
margin: 14px 0 11px; .taskon_mail_block {
width: 100%; padding: 33px;
height: auto; }
} }
.article_short_txt p { @media only screen and (min-width: 480px) and (max-width: 767px) {
font-size: 16px; .taskon_mail_block {
line-height: 25px; padding: 33px;
color: #525252; }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_txt p { .taskon_mail_block {
font-size: 14px; padding: 33px;
line-height: 22px;
} }
} }
.article_short_txt p a { .taskon_mail_block_txt {
color: #49acc5; display: inline-block;
} font-size: 20px;
.article_short_txt p a:hover, .article_short_txt p a:focus, .article_short_txt p a:active { color: #2d323a;
text-decoration: underline; line-height: 23px;
font-family: "RobotoBold";
} }
.article_short_txt ol { @media only screen and (min-width: 768px) and (max-width: 970px) {
margin-top: 25px; .taskon_mail_block_txt {
display: block;
text-align: center;
}
} }
.article_short_txt ol li { @media only screen and (min-width: 480px) and (max-width: 767px) {
color: #3c4755; .taskon_mail_block_txt {
font-size: 16px; display: block;
text-align: center;
}
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_txt ol li { .taskon_mail_block_txt {
font-size: 14px; display: block;
text-align: center;
font-size: 16px;
} }
} }
.article_short_txt ol li:before { .taskon_mail_block_logo {
counter-increment: myCounter;
content: counter(myCounter);
color: #fff;
font-size: 15px;
font-family: "RobotoBold";
background: #00AEC7;
display: inline-block; display: inline-block;
text-align: center; position: relative;
margin: 4px 12px 4px 4px; margin-left: 71px;
line-height: 23px; top: 8px;
width: 23px;
height: 23px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
} }
.article_short_txt ul { @media only screen and (min-width: 768px) and (max-width: 970px) {
margin-top: 32px; .taskon_mail_block_logo {
display: block;
top: 0px;
width: 202px;
margin: 20px auto;
}
} }
.article_short_txt ul li { @media only screen and (min-width: 480px) and (max-width: 767px) {
background: url(../images/icon/ul_list_blue.png) no-repeat left center; .taskon_mail_block_logo {
height: 30px; display: block;
line-height: 30px; top: 0px;
padding-left: 34px; width: 202px;
font-size: 16px; margin: 20px auto;
color: #3c4755; }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_txt ul li { .taskon_mail_block_logo {
font-size: 14px; display: block;
line-height: 17px; top: 0px;
margin-bottom: 10px; width: 202px;
margin: 20px auto;
} }
} }
.article_short_txt .tb_blog { .taskon_mail_block_link {
margin-top: 23px; display: inline-block;
overflow-x: auto; font-size: 14px;
} color: #57a2b5;
.article_short_txt tr th { text-decoration: underline;
padding: 15px 20px; margin-left: 70px;
border: 1px solid #C7C7C7; position: relative;
vertical-align: top; top: -10px;
color: #2d323a;
font-size: 16px;
line-height: 20px;
} }
.article_short_txt thead tr th { @media only screen and (min-width: 768px) and (max-width: 970px) {
background: #00AEC7; .taskon_mail_block_link {
font-family: "RobotoBold"; display: block;
color: #fff; top: 0px;
font-size: 16px; width: 100px;
line-height: 21px; text-align: center;
padding: 0px 0px 0px 20px; margin: 0 auto;
border: 1px solid #C7C7C7; }
vertical-align: middle;
} }
.article_short_social { @media only screen and (min-width: 480px) and (max-width: 767px) {
float: right; .taskon_mail_block_link {
display: block;
top: 0px;
width: 100px;
text-align: center;
margin: 0 auto;
}
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_social { .taskon_mail_block_link {
float: none; display: block;
top: 0px;
width: 100px;
text-align: center;
margin: 0 auto;
} }
} }
.taskon_mail_block_link:hover, .taskon_mail_block_link:active, .taskon_mail_block_link:focus {
text-decoration: none;
color: #57a2b5;
}
.sidebar { .keys_appl_top {
margin-top: 5px; width: 100%;
height: 444px;
background: #60AD26 url(../images/keys_appl_bg.png) no-repeat bottom center;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
padding-top: 53px;
position: relative;
} }
.sidebar_module h2 { @media only screen and (min-width: 480px) and (max-width: 767px) {
font-size: 18px; .keys_appl_top {
line-height: 20px; height: 574px;
color: #3d3d3d; }
font-family: "RobotoBold";
margin-bottom: 25px;
} }
.sidebar_module_body a.cat_link_mod { @media only screen and (min-width: 320px) and (max-width: 479px) {
display: inline-block; .keys_appl_top {
font-size: 14px; height: 535px;
color: #fff; }
background: #00AEC7; }
padding: 14px 20px; .keys_appl_top h1 {
border-radius: 5px; font-size: 36px;
-moz-border-radius: 5px; line-height: 50px;
-webkit-border-radius: 5px; letter-spacing: 0.72px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
margin-right: 10px;
font-family: "RobotoBold"; font-family: "RobotoBold";
margin-bottom: 21px;
} }
@media only screen and (min-width: 768px) and (max-width: 970px) { @media only screen and (min-width: 768px) and (max-width: 970px) {
.sidebar_module_body a.cat_link_mod { .keys_appl_top h1 {
margin-right: 0px; font-size: 28px;
margin-bottom: 4px; line-height: 45px;
} }
} }
.sidebar_module_body a.cat_link_mod:hover, .sidebar_module_body a.cat_link_mod:focus, .sidebar_module_body a.cat_link_mod:active { @media only screen and (min-width: 480px) and (max-width: 767px) {
text-decoration: none; .keys_appl_top h1 {
background: #FFDF00; font-size: 25px;
color: #2d3642; line-height: 30px;
margin-bottom: 20px;
}
} }
.sidebar_module .article_itm { @media only screen and (min-width: 320px) and (max-width: 479px) {
margin-bottom: 30px; .keys_appl_top h1 {
font-size: 22px;
line-height: 30px;
margin-bottom: 20px;
}
} }
.sidebar_module .article_itm img {
max-width: 100%; .appl_p1 {
height: auto; background: url(../images/parallax/appl_p1.png) no-repeat center center;
display: block; width: 357px;
height: 321px;
position: absolute;
top: 90px;
left: 0;
} }
.sidebar_module a.article_itm_link { @media only screen and (min-width: 320px) and (max-width: 1300px) {
font-size: 16px; .appl_p1 {
color: #2d3642; display: none;
line-height: 25px; }
} }
@media only screen and (min-width: 768px) and (max-width: 970px) { @media only screen and (min-width: 1301px) and (max-width: 1600px) {
.sidebar_module a.article_itm_link { .appl_p1 {
line-height: 20px; top: 60px;
left: -85px;
} }
} }
.sidebar_module a.article_itm_link:hover, .sidebar_module a.article_itm_link:focus, .sidebar_module a.article_itm_link:active {
color: #49acc5; .appl_p2 {
text-decoration: none; background: url(../images/parallax/appl_p2.png) no-repeat center center;
width: 270px;
height: 295px;
position: absolute;
top: 333px;
left: 225px;
z-index: 4;
} }
.sidebar_social li { @media only screen and (min-width: 320px) and (max-width: 1300px) {
display: inline-block; .appl_p2 {
margin-right: 26px; display: none;
margin-bottom: 26px; }
} }
@media only screen and (min-width: 768px) and (max-width: 970px) { @media only screen and (min-width: 1301px) and (max-width: 1600px) {
.sidebar_social li { .appl_p2 {
margin-right: 20px; left: 60px;
margin-bottom: 20px;
} }
} }
@media only screen and (min-width: 480px) and (max-width: 767px) {
.sidebar_social li { .appl_p3 {
margin-right: 20px; background: url(../images/parallax/appl_p3.png) no-repeat center center;
margin-bottom: 20px; width: 386px;
height: 448px;
position: absolute;
top: 109px;
right: 76px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 1300px) {
.appl_p3 {
display: none;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 1301px) and (max-width: 1600px) {
.sidebar_social li { .appl_p3 {
margin-right: 20px; right: 0;
margin-bottom: 20px; top: 50px;
} }
} }
.sidebar_social li:nth-child(4) {
margin-right: 0; .appl_p4 {
background: url(../images/parallax/appl_p4.png) no-repeat center center;
width: 268px;
height: 279px;
position: absolute;
top: 352px;
right: 442px;
z-index: 4;
} }
@media only screen and (min-width: 768px) and (max-width: 970px) { @media only screen and (min-width: 320px) and (max-width: 1300px) {
.sidebar_social li:nth-child(4) { .appl_p4 {
margin-right: 20px; display: none;
}
}
@media only screen and (min-width: 1301px) and (max-width: 1600px) {
.appl_p4 {
top: 390px;
right: 150px;
} }
} }
.appl_zak {
font-size: 16px;
font-family: "RobotoBold";
display: block;
margin-top: 18px;
margin-bottom: 33px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) { @media only screen and (min-width: 480px) and (max-width: 767px) {
.sidebar_social li:nth-child(4) { .appl_zak {
margin-right: 20px; display: inline-block;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.sidebar_social li:nth-child(4) { .appl_zak {
margin-right: 20px; display: inline-block;
} }
} }
.sidebar_social_fb { .appl_zak_logo {
background: #324C84 url(../images/icon/sidebar_social_fb.png) no-repeat center center; width: 140px;
width: 48px; height: 41px;
height: 48px; display: block;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
} }
.sidebar_social_fb:hover, .sidebar_social_fb:focus, .sidebar_social_fb:active { @media only screen and (min-width: 480px) and (max-width: 767px) {
background: #0093A9 url(../images/icon/sidebar_social_fb.png) no-repeat center center; .appl_zak_logo {
display: inline-block;
position: relative;
left: 10px;
top: 15px;
}
} }
.sidebar_social_ok { @media only screen and (min-width: 320px) and (max-width: 479px) {
background: #daaa03 url(../images/icon/sidebar_social_ok.png) no-repeat center center; .appl_zak_logo {
width: 48px; display: inline-block;
height: 48px; position: relative;
display: inline-block; left: 10px;
border-radius: 50%; top: 15px;
-moz-border-radius: 50%; }
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
} }
.sidebar_social_ok:hover, .sidebar_social_ok:focus, .sidebar_social_ok:active {
a.appl_btn {
display: block;
font-size: 20px;
color: #fff;
width: 201px;
height: 47px;
border: 2px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
position: relative;
top: 157px;
left: 0px;
float: left;
-moz-transition: all 0.3s linear 0.1s;
-o-transition: all 0.3s linear 0.1s;
-webkit-transition: all 0.3s linear 0.1s;
-ms-transition: all 0.3s linear 0.1s;
transition: all 0.3s linear 0.1s;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
a.appl_btn {
position: static;
top: 0;
left: 0;
float: none;
margin: 20px auto 40px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
a.appl_btn {
position: static;
top: 0;
left: 0;
float: none;
margin: 20px 0 40px;
}
}
a.appl_btn:hover, a.appl_btn:active, a.appl_btn:focus {
color: #000;
text-decoration: none;
background: #fff;
}
.appl_par {
background: url(../images/appl_par.png) no-repeat center center;
max-width: 539px;
height: 389px;
top: 21px;
left: 10px;
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.appl_par {
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
height: 242px;
top: 42px !important;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.appl_par {
position: static;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
height: 303px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.appl_par {
width: 270px;
height: 195px;
top: 10px !important;
left: 0 !important;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
position: relative;
}
}
.keys_appl_bt {
background: url(../images/keys_appl_bt.png) no-repeat bottom center;
width: 100%;
min-height: 62px;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
position: relative;
z-index: 2;
top: -62px;
}
.appl_how_works {
width: 100%;
background: #60AD26;
min-height: 100px;
position: relative;
top: -62px;
padding-top: 45px;
padding-bottom: 41px;
}
.appl_how_works h2 {
font-size: 30px;
color: #fff;
background: #262E38;
display: inline-block;
padding: 10px 15px 17px 23px;
font-family: "RobotoBold";
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.appl_how_works h2 {
font-size: 20px;
}
}
.appl_list {
margin-top: 23px;
}
.appl_list li {
background: url(../images/appl_list.png) no-repeat center left;
padding-left: 27px;
font-size: 21px;
margin-bottom: 14px;
font-family: "RobotoBold";
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.appl_list li {
font-size: 19px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.appl_list li {
font-size: 16px;
}
}
.appl_content {
background: #fff;
color: #2d323a;
margin-top: -62px;
padding-top: 70px;
padding-bottom: 48px;
}
.appl_content p {
margin-bottom: 15px;
font-size: 17px;
line-height: 26px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.appl_content p {
font-size: 14px;
}
}
.blog_container {
background: #fff;
width: 100%;
padding-top: 46px;
}
.blog {
padding-bottom: 30px;
}
.blog h1 {
font-size: 29px;
font-family: "RobotoBold";
color: #2d3642;
margin-bottom: 16px;
}
.subsc_blog {
background: #F1F1F1;
padding: 20px;
}
.subsc_blog_title {
color: #2d323a;
font-size: 25px;
font-family: "RobotoBold";
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.subsc_blog_title {
font-size: 17px;
}
}
.subsc_blog_txt {
font-size: 17px;
color: #2d323a;
line-height: 26px;
margin: 15px 0px;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.subsc_blog_txt {
margin: 10px 0 15px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.subsc_blog_txt {
font-size: 14px;
}
}
.subsc_blog_form input[type="email"] {
display: block;
width: 273px;
height: 49px;
background: #FDFDFD;
border: 1px solid #E9E9E9;
padding: 0 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
font-size: 16px;
color: #83999e;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.subsc_blog_form input[type="email"] {
width: 100%;
}
}
.subsc_blog_form input[type="email"]::-webkit-input-placeholder {
color: #83999e;
font-size: 16px;
opacity: 1;
}
.subsc_blog_form input[type="email"]:-moz-placeholder {
color: #83999e;
font-size: 16px;
opacity: 1;
}
.subsc_blog_form input[type="email"]::-moz-placeholder {
color: #83999e;
font-size: 16px;
opacity: 1;
}
.subsc_blog_form input[type="email"]:-ms-input-placeholder {
color: #83999e;
font-size: 16px;
opacity: 1;
}
.subsc_blog_form .field-input.input-error {
background: #fff url(../images/icon-fail.png) no-repeat 96% center;
border: 1px solid #E9A2A2;
}
.subsc_blog_form button {
width: 178px;
height: 50px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
text-align: center;
color: #655d04;
font-family: "RobotoBold";
font-size: 20px;
background-image: linear-gradient(to top, #fdd000 0%, #fff04e 100%);
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12);
color: #908505;
border: none;
border-bottom: 4px solid #D2BF00;
line-height: 43px;
display: inline-block;
margin: 20px 0px 0px;
}
.subsc_blog_form button:hover, .subsc_blog_form button:focus {
background-image: linear-gradient(to top, #fde654 0%, #fef77d 100%);
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12);
color: #908505;
border-bottom: 4px solid #D2BF00;
text-decoration: none;
}
.subsc_blog_form button:active {
background-image: linear-gradient(to top, #f4db15 0%, #fbd20d 100%);
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12);
color: #908505;
border: none;
border-top: 4px solid #D2BF00;
text-decoration: none;
}
.article_short {
margin-bottom: 57px;
}
.article_short:last-child {
margin-bottom: 0;
}
.article_short_title {
font-size: 25px;
line-height: 35px;
color: #3d3d3d;
font-family: "RobotoBold";
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.article_short_title {
font-size: 20px;
line-height: 27px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_title {
font-size: 20px;
line-height: 27px;
}
}
.article_short_title:hover, .article_short_title:focus, .article_short_title:active {
color: #49acc5;
text-decoration: none;
}
.article_short_head {
height: 30px;
width: 100%;
line-height: 30px;
font-size: 13px;
color: #949494;
margin-top: 5px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_head {
height: auto;
}
}
.article_short_date {
margin-right: 19px;
}
.article_short_view {
position: relative;
}
.article_short_view:hover .blog_toltip_left {
display: block;
}
.article_short_view:before {
content: "";
background: url(../images/icon/article_view.png) no-repeat;
width: 21px;
height: 14px;
display: inline-block;
vertical-align: middle;
margin-right: 6px;
margin-top: -3px;
}
.article_short_view .blog_toltip_left {
display: none;
width: 209px;
height: 66px;
line-height: 65px;
padding-left: 5px;
background: url(../images/blog_toltip_left.png) no-repeat center center;
text-align: center;
font-size: 14px;
font-family: "RobotoLight";
position: absolute;
right: -214px;
top: -23px;
}
.article_short_tags {
margin-top: 11px;
}
.article_short_tags a {
font-size: 14px;
color: #49acc5;
margin-right: 10px;
}
.article_short_tags a:hover, .article_short_tags a:focus, .article_short_tags a:active {
text-decoration: underline;
}
.article_short_txt {
overflow-x: auto;
}
.article_short_txt img {
margin: 14px 0 11px;
width: 100%;
height: auto;
}
.article_short_txt p {
font-size: 16px;
line-height: 25px;
color: #525252;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_txt p {
font-size: 14px;
line-height: 22px;
}
}
.article_short_txt p a {
color: #49acc5;
}
.article_short_txt p a:hover, .article_short_txt p a:focus, .article_short_txt p a:active {
text-decoration: underline;
}
.article_short_txt ol {
margin-top: 25px;
}
.article_short_txt ol li {
color: #3c4755;
font-size: 16px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_txt ol li {
font-size: 14px;
}
}
.article_short_txt ol li:before {
counter-increment: myCounter;
content: counter(myCounter);
color: #fff;
font-size: 15px;
font-family: "RobotoBold";
background: #00AEC7;
display: inline-block;
text-align: center;
margin: 4px 12px 4px 4px;
line-height: 23px;
width: 23px;
height: 23px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
}
.article_short_txt ul {
margin-top: 32px;
}
.article_short_txt ul li {
background: url(../images/icon/ul_list_blue.png) no-repeat left center;
height: 30px;
line-height: 30px;
padding-left: 34px;
font-size: 16px;
color: #3c4755;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_txt ul li {
font-size: 14px;
line-height: 17px;
margin-bottom: 10px;
}
}
.article_short_txt .tb_blog {
margin-top: 23px;
overflow-x: auto;
}
.article_short_txt tr th {
padding: 15px 20px;
border: 1px solid #C7C7C7;
vertical-align: top;
color: #2d323a;
font-size: 16px;
line-height: 20px;
}
.article_short_txt thead tr th {
background: #00AEC7;
font-family: "RobotoBold";
color: #fff;
font-size: 16px;
line-height: 21px;
padding: 0px 0px 0px 20px;
border: 1px solid #C7C7C7;
vertical-align: middle;
}
.article_short_social {
float: right;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.article_short_social {
float: none;
}
}
.sidebar {
margin-top: 5px;
}
.sidebar_module h2 {
font-size: 18px;
line-height: 20px;
color: #3d3d3d;
font-family: "RobotoBold";
margin-bottom: 25px;
}
.sidebar_module_body a.cat_link_mod {
display: inline-block;
font-size: 14px;
color: #fff;
background: #00AEC7;
padding: 14px 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
margin-right: 10px;
font-family: "RobotoBold";
margin-bottom: 21px;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.sidebar_module_body a.cat_link_mod {
margin-right: 0px;
margin-bottom: 4px;
}
}
.sidebar_module_body a.cat_link_mod:hover, .sidebar_module_body a.cat_link_mod:focus, .sidebar_module_body a.cat_link_mod:active {
text-decoration: none;
background: #FFDF00;
color: #2d3642;
}
.sidebar_module .article_itm {
margin-bottom: 30px;
}
.sidebar_module .article_itm img {
max-width: 100%;
height: auto;
display: block;
}
.sidebar_module a.article_itm_link {
font-size: 16px;
color: #2d3642;
line-height: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.sidebar_module a.article_itm_link {
line-height: 20px;
}
}
.sidebar_module a.article_itm_link:hover, .sidebar_module a.article_itm_link:focus, .sidebar_module a.article_itm_link:active {
color: #49acc5;
text-decoration: none;
}
.sidebar_social li {
display: inline-block;
margin-right: 26px;
margin-bottom: 26px;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.sidebar_social li {
margin-right: 20px;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.sidebar_social li {
margin-right: 20px;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.sidebar_social li {
margin-right: 20px;
margin-bottom: 20px;
}
}
.sidebar_social li:nth-child(4) {
margin-right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.sidebar_social li:nth-child(4) {
margin-right: 20px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.sidebar_social li:nth-child(4) {
margin-right: 20px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.sidebar_social li:nth-child(4) {
margin-right: 20px;
}
}
.sidebar_social_fb {
background: #324C84 url(../images/icon/sidebar_social_fb.png) no-repeat center center;
width: 48px;
height: 48px;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
.sidebar_social_fb:hover, .sidebar_social_fb:focus, .sidebar_social_fb:active {
background: #0093A9 url(../images/icon/sidebar_social_fb.png) no-repeat center center;
}
.sidebar_social_ok {
background: #daaa03 url(../images/icon/sidebar_social_ok.png) no-repeat center center;
width: 48px;
height: 48px;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
.sidebar_social_ok:hover, .sidebar_social_ok:focus, .sidebar_social_ok:active {
background: #0093A9 url(../images/icon/sidebar_social_ok.png) no-repeat center center; background: #0093A9 url(../images/icon/sidebar_social_ok.png) no-repeat center center;
} }
.sidebar_social_tw { .sidebar_social_tw {
background: #69baf3 url(../images/icon/sidebar_social_tw.png) no-repeat center center; background: #69baf3 url(../images/icon/sidebar_social_tw.png) no-repeat center center;
width: 48px; width: 48px;
height: 48px; height: 48px;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
.sidebar_social_tw:hover, .sidebar_social_tw:focus, .sidebar_social_tw:active {
background: #0093A9 url(../images/icon/sidebar_social_tw.png) no-repeat center center;
}
.sidebar_social_gp {
background: #ff5400 url(../images/icon/sidebar_social_gp.png) no-repeat center center;
width: 48px;
height: 48px;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
.sidebar_social_gp:hover, .sidebar_social_gp:focus, .sidebar_social_gp:active {
background: #0093A9 url(../images/icon/sidebar_social_gp.png) no-repeat center center;
}
.sidebar_social_yt {
background: #e73500 url(../images/icon/sidebar_social_yt.png) no-repeat center center;
width: 48px;
height: 48px;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
.sidebar_social_yt:hover, .sidebar_social_yt:focus, .sidebar_social_yt:active {
background: #0093A9 url(../images/icon/sidebar_social_yt.png) no-repeat center center;
}
.sidebar_social_vk {
background: #5872c4 url(../images/icon/sidebar_social_vk.png) no-repeat center center;
width: 48px;
height: 48px;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
.sidebar_social_vk:hover, .sidebar_social_vk:focus, .sidebar_social_vk:active {
background: #0093A9 url(../images/icon/sidebar_social_vk.png) no-repeat center center;
}
.sidebar_social_inst {
background: #745e51 url(../images/icon/sidebar_social_inst.png) no-repeat center center;
width: 48px;
height: 48px;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
.sidebar_social_inst:hover, .sidebar_social_inst:focus, .sidebar_social_inst:active {
background: #0093A9 url(../images/icon/sidebar_social_inst.png) no-repeat center center;
}
.sidebar_btn {
width: 190px;
height: 35px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
text-align: center;
color: #655d04;
font-size: 15px;
background-image: linear-gradient(to top, #fdd000 0%, #fff04e 100%);
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12);
color: #908505;
border: none;
border-bottom: 4px solid #D2BF00;
line-height: 30px;
display: inline-block;
margin: 15px 0px 15px;
position: relative;
}
.sidebar_btn:hover, .sidebar_btn:focus {
background-image: linear-gradient(to top, #fde654 0%, #fef77d 100%);
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12);
color: #908505;
border-bottom: 4px solid #D2BF00;
text-decoration: none;
}
.sidebar_btn:hover .blog_toltip_right, .sidebar_btn:focus .blog_toltip_right {
display: block;
}
.sidebar_btn:active {
background-image: linear-gradient(to top, #f4db15 0%, #fbd20d 100%);
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12);
color: #908505;
border: none;
border-top: 4px solid #D2BF00;
text-decoration: none;
}
.sidebar_btn:last-child {
margin-bottom: 40px;
}
.sidebar_btn .blog_toltip_right {
display: none;
width: 209px;
height: 66px;
line-height: 17px;
color: #3c4755;
background: url(../images/blog_toltip_right.png) no-repeat center center;
text-align: left;
font-size: 14px;
font-family: "RobotoLight";
position: absolute;
padding: 14px 30px 14px 20px;
left: -215px;
top: -16px;
}
.top_ops {
background: url(../images/top_ops_bg.jpg) repeat center center;
width: 100%;
min-height: 541px;
padding-top: 48px;
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.top_ops {
min-height: 530px;
}
}
.top_ops h1 {
font-size: 36px;
line-height: 50px;
color: #fff;
font-family: "RobotoBold";
letter-spacing: 0.9px;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.top_ops h1 {
font-size: 25px;
line-height: 43px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.top_ops h1 {
font-size: 19px;
line-height: 33px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.top_ops h1 {
font-size: 17px;
line-height: 33px;
text-align: center;
}
}
.ops_shema {
width: 237px;
height: 288px;
position: relative;
background: url(../images/ops_shema.png) no-repeat center center;
bottom: -174px;
left: 59px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.ops_shema {
margin-top: 135px;
margin-left: 82px;
margin-bottom: 170px;
left: 0px;
top: 0px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.ops_shema {
width: 270px;
height: 283px;
margin-bottom: 200px;
left: 0px;
top: 0px;
background: url(../images/ops_shema_mobile.png) no-repeat center center;
margin-top: 30px;
}
}
.ops_shema_item1 {
position: absolute;
width: 93px;
height: 70px;
background: url(../images/icon/ops_shema_item1.png) no-repeat center center;
top: 34px;
left: -68px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.ops_shema_item1 {
display: none;
}
}
.ops_shema_item2 {
position: absolute;
width: 96px;
height: 80px;
background: url(../images/icon/ops_shema_item2.png) no-repeat center center;
top: -45px;
left: -54px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.ops_shema_item2 {
display: none;
}
}
.ops_shema_item3 {
position: absolute;
width: 91px;
height: 103px;
background: url(../images/icon/ops_shema_item3.png) no-repeat center center;
top: -103px;
left: -5px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.ops_shema_item3 {
display: none;
}
}
.ops_shema_item4 {
position: absolute;
width: 54px;
height: 99px;
background: url(../images/icon/ops_shema_item4.png) no-repeat center center;
top: -119px;
left: 116px;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.ops_shema_item4 {
left: 112px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.ops_shema_item4 {
display: none;
}
}
.ops_shema_item5 {
position: absolute;
width: 118px;
height: 103px;
background: url(../images/icon/ops_shema_item5.png) no-repeat center center;
top: -100px;
right: -83px;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.ops_shema_item5 {
right: -69px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.ops_shema_item5 {
display: none;
}
}
.ops_two_section {
width: 100%;
min-height: 100px;
background: #478700;
padding-top: 91px;
padding-bottom: 31px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.ops_two_section {
padding-top: 40px;
}
}
.ops_two_section h2 {
background: #262B3A;
font-size: 30px;
font-family: "RobotoBold";
display: inline-block; display: inline-block;
border-radius: 50%; padding: 16px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
} }
.sidebar_social_tw:hover, .sidebar_social_tw:focus, .sidebar_social_tw:active { @media only screen and (min-width: 320px) and (max-width: 479px) {
background: #0093A9 url(../images/icon/sidebar_social_tw.png) no-repeat center center; .ops_two_section h2 {
font-size: 20px;
}
} }
.sidebar_social_gp {
background: #ff5400 url(../images/icon/sidebar_social_gp.png) no-repeat center center; .ops_api_shema {
width: 48px; background: url(../images/icon/ops_api_shema.png) no-repeat center center;
height: 48px; width: 214px;
display: inline-block; height: 55px;
border-radius: 50%; position: absolute;
-moz-border-radius: 50%; top: 133px;
-webkit-border-radius: 50%; right: -220px;
-o-border-radius: 50%;
-ms-border-radius: 50%;
} }
.sidebar_social_gp:hover, .sidebar_social_gp:focus, .sidebar_social_gp:active { @media only screen and (min-width: 480px) and (max-width: 767px) {
background: #0093A9 url(../images/icon/sidebar_social_gp.png) no-repeat center center; .ops_api_shema {
right: -62px;
top: 403px;
}
} }
.sidebar_social_yt { @media only screen and (min-width: 320px) and (max-width: 479px) {
background: #e73500 url(../images/icon/sidebar_social_yt.png) no-repeat center center; .ops_api_shema {
width: 48px; right: 0px;
height: 48px; top: 420px;
display: inline-block; }
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
} }
.sidebar_social_yt:hover, .sidebar_social_yt:focus, .sidebar_social_yt:active {
background: #0093A9 url(../images/icon/sidebar_social_yt.png) no-repeat center center; .ops_shema_pic {
background: url(../images/icon/ops_shema_pic.png) no-repeat center center;
width: 157px;
height: 107px;
position: absolute;
right: -285px;
top: 4px;
} }
.sidebar_social_vk { @media only screen and (min-width: 480px) and (max-width: 767px) {
background: #5872c4 url(../images/icon/sidebar_social_vk.png) no-repeat center center; .ops_shema_pic {
width: 48px; top: 290px;
height: 48px; right: -97px;
display: inline-block; }
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
} }
.sidebar_social_vk:hover, .sidebar_social_vk:focus, .sidebar_social_vk:active { @media only screen and (min-width: 320px) and (max-width: 479px) {
background: #0093A9 url(../images/icon/sidebar_social_vk.png) no-repeat center center; .ops_shema_pic {
top: 300px;
right: 0px;
}
} }
.sidebar_social_inst {
background: #745e51 url(../images/icon/sidebar_social_inst.png) no-repeat center center; .ops_zadacha {
width: 48px; position: relative;
height: 48px; left: -62px;
display: inline-block; top: 43px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
} }
.sidebar_social_inst:hover, .sidebar_social_inst:focus, .sidebar_social_inst:active { @media only screen and (min-width: 768px) and (max-width: 970px) {
background: #0093A9 url(../images/icon/sidebar_social_inst.png) no-repeat center center; .ops_zadacha {
left: 0;
}
} }
.sidebar_btn { @media only screen and (min-width: 480px) and (max-width: 767px) {
width: 190px; .ops_zadacha {
height: 35px; left: 0;
top: 0;
margin-bottom: 80px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.ops_zadacha {
left: 0;
top: 0;
margin-bottom: 40px;
}
}
.ops_zadacha h2 {
font-size: 16px;
font-family: "RobotoBold";
line-height: 35px;
}
.ops_zadacha p {
font-size: 18px;
line-height: 22px;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.ops_zadacha p {
font-size: 16px;
line-height: 20px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.ops_zadacha p {
font-size: 15px;
}
}
a.ops_btn {
display: block;
font-size: 20px;
color: #fff;
width: 201px;
height: 47px;
border: 2px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 50px; border-radius: 50px;
-moz-border-radius: 50px; -moz-border-radius: 50px;
-webkit-border-radius: 50px; -webkit-border-radius: 50px;
-o-border-radius: 50px; -o-border-radius: 50px;
-ms-border-radius: 50px; -ms-border-radius: 50px;
text-align: center;
color: #655d04;
font-size: 15px;
background-image: linear-gradient(to top, #fdd000 0%, #fff04e 100%);
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12);
color: #908505;
border: none;
border-bottom: 4px solid #D2BF00;
line-height: 30px;
display: inline-block;
margin: 15px 0px 15px;
position: relative; position: relative;
top: 157px;
left: 0px;
right: -28px;
float: right;
-moz-transition: all 0.3s linear 0.1s;
-o-transition: all 0.3s linear 0.1s;
-webkit-transition: all 0.3s linear 0.1s;
-ms-transition: all 0.3s linear 0.1s;
transition: all 0.3s linear 0.1s;
} }
.sidebar_btn:hover, .sidebar_btn:focus { @media only screen and (min-width: 768px) and (max-width: 970px) {
background-image: linear-gradient(to top, #fde654 0%, #fef77d 100%); a.ops_btn {
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12); top: 152px;
color: #908505; }
border-bottom: 4px solid #D2BF00;
text-decoration: none;
} }
.sidebar_btn:hover .blog_toltip_right, .sidebar_btn:focus .blog_toltip_right { @media only screen and (min-width: 480px) and (max-width: 767px) {
display: block; a.ops_btn {
top: 16px;
right: 0;
}
} }
.sidebar_btn:active { @media only screen and (min-width: 320px) and (max-width: 479px) {
background-image: linear-gradient(to top, #f4db15 0%, #fbd20d 100%); a.ops_btn {
box-shadow: 2px 3.5px 5px rgba(0, 0, 0, 0.12); top: 16px;
color: #908505; right: 0;
border: none; float: none;
border-top: 4px solid #D2BF00; margin: auto;
}
}
a.ops_btn:hover, a.ops_btn:active, a.ops_btn:focus {
color: #000;
text-decoration: none; text-decoration: none;
background: #fff;
} }
.sidebar_btn:last-child {
margin-bottom: 40px; .ops_list {
margin-top: 30px;
} }
.sidebar_btn .blog_toltip_right { .ops_list li {
display: none; background: url(../images/appl_list.png) no-repeat 0% 30%;
width: 209px; padding-left: 28px;
height: 66px; margin-bottom: 1px;
line-height: 17px; line-height: 34px;
color: #3c4755; font-size: 20px;
background: url(../images/blog_toltip_right.png) no-repeat center center; font-family: "RobotoBold";
text-align: left; }
font-size: 14px; @media only screen and (min-width: 768px) and (max-width: 970px) {
font-family: "RobotoLight"; .ops_list li {
font-size: 17px;
line-height: 26px;
margin-bottom: 10px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.ops_list li {
font-size: 17px;
line-height: 26px;
margin-bottom: 10px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.ops_list li {
font-size: 15px;
line-height: 20px;
margin-bottom: 10px;
background: url(../images/appl_list.png) no-repeat 0% 10%;
}
}
.ops_p1 {
background: url(../images/parallax/ops_p1.png) no-repeat center center;
width: 240px;
height: 231px;
position: absolute; position: absolute;
padding: 14px 30px 14px 20px; top: 150px;
left: -215px; left: 4px;
top: -16px; }
@media only screen and (min-width: 320px) and (max-width: 1300px) {
.ops_p1 {
display: none;
}
}
@media only screen and (min-width: 1301px) and (max-width: 1600px) {
.ops_p1 {
top: 60px;
left: -85px;
}
}
.ops_p2 {
background: url(../images/parallax/ops_p2.png) no-repeat center center;
width: 215px;
height: 219px;
position: absolute;
top: 431px;
left: 289px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 1300px) {
.ops_p2 {
display: none;
}
}
@media only screen and (min-width: 1301px) and (max-width: 1600px) {
.ops_p2 {
left: 60px;
}
}
.ops_p3 {
background: url(../images/parallax/ops_p3.png) no-repeat center center;
width: 237px;
height: 248px;
position: absolute;
top: -59px;
right: -20px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 1300px) {
.ops_p3 {
display: none;
}
}
@media only screen and (min-width: 1301px) and (max-width: 1600px) {
.ops_p3 {
right: -95px;
}
}
.ops_p4 {
background: url(../images/parallax/ops_p4.png) no-repeat center center;
width: 228px;
height: 228px;
position: absolute;
top: 306px;
right: 244px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 1300px) {
.ops_p4 {
display: none;
}
}
@media only screen and (min-width: 1301px) and (max-width: 1600px) {
.ops_p4 {
top: 390px;
right: 50px;
}
} }
frontend/web/js/common.js
View file @ 4f42eef4
...@@ -52,7 +52,6 @@ $(document).ready(function() { ...@@ -52,7 +52,6 @@ $(document).ready(function() {
$('.dep_block_hide__btn').click(function(){ $('.dep_block_hide__btn').click(function(){
if ($('.dep_block_hide__btn').text() == $(this).data('show')){ if ($('.dep_block_hide__btn').text() == $(this).data('show')){
$('.dep_block__hide').slideDown(1000); $('.dep_block__hide').slideDown(1000);
$('.dep_block .line_hide').fadeTo( "slow" , 0);
$(this).text($(this).data('hide')); $(this).text($(this).data('hide'));
} }
else { else {
...@@ -410,9 +409,6 @@ $(window).scroll(function() { ...@@ -410,9 +409,6 @@ $(window).scroll(function() {
$(".p7").css({ $(".p7").css({
"transform" : "translate(0%, -" + st /6 + "%" "transform" : "translate(0%, -" + st /6 + "%"
}); });
});
$(window).scroll(function() {
var st = $(this).scrollTop();
$(".kns_box4").css({ $(".kns_box4").css({
"transform" : "translate(0%, -" + st /1 + "%" "transform" : "translate(0%, -" + st /1 + "%"
...@@ -426,9 +422,6 @@ $(window).scroll(function() { ...@@ -426,9 +422,6 @@ $(window).scroll(function() {
$(".kns_box3").css({ $(".kns_box3").css({
"transform" : "translate(0%, -" + st /13 + "%" "transform" : "translate(0%, -" + st /13 + "%"
}); });
});
$(window).scroll(function() {
var st = $(this).scrollTop();
$(".appl_p1").css({ $(".appl_p1").css({
"transform" : "translate(0%, -" + st /6 + "%" "transform" : "translate(0%, -" + st /6 + "%"
...@@ -442,6 +435,35 @@ $(window).scroll(function() { ...@@ -442,6 +435,35 @@ $(window).scroll(function() {
$(".appl_p4").css({ $(".appl_p4").css({
"transform" : "translate(0%, -" + st /3 + "%" "transform" : "translate(0%, -" + st /3 + "%"
}); });
$(".ops_p1").css({
"transform" : "translate(0%, -" + st /6 + "%"
});
$(".ops_p2").css({
"transform" : "translate(0%, -" + st /3 + "%"
});
$(".ops_p3").css({
"transform" : "translate(0%, -" + st /8 + "%"
});
$(".ops_p4").css({
"transform" : "translate(0%, -" + st /3 + "%"
});
$(".mail_p1").css({
"transform" : "translate(0%, -" + st /6 + "%"
});
$(".mail_p2").css({
"transform" : "translate(0%, -" + st /4 + "%"
});
$(".mail_p3").css({
"transform" : "translate(0%, -" + st /4 + "%"
});
$(".mail_p4").css({
"transform" : "translate(0%, -" + st /15 + "%"
});
$(".mail_p5").css({
"transform" : "translate(0%, -" + st /8 + "%"
});
}); });
jQuery(function($){ jQuery(function($){
$(document).mouseup(function (e){ $(document).mouseup(function (e){
......
frontend/web/sass/screen.sass
View file @ 4f42eef4
...@@ -65,6 +65,23 @@ i ...@@ -65,6 +65,23 @@ i
u u
color: #494949 color: #494949
line-height: 22px line-height: 22px
.wow
+r(320,479)
-o-transition-property: none !important
-moz-transition-property: none !important
-ms-transition-property: none !important
-webkit-transition-property: none !important
transition-property: none !important
-o-transform: none !important
-moz-transform: none !important
-ms-transform: none !important
-webkit-transform: none !important
transform: none !important
-webkit-animation: none !important
-moz-animation: none !important
-o-animation: none !important
-ms-animation: none !important
animation: none !important
.container .container
+r(768,970) +r(768,970)
width: 750px width: 750px
...@@ -340,9 +357,8 @@ a.toggle_bottom ...@@ -340,9 +357,8 @@ a.toggle_bottom
vertical-align: middle vertical-align: middle
margin-left: 13px margin-left: 13px
+transition(all 0.3s linear 0.1s) +transition(all 0.3s linear 0.1s)
a.toggle_bottom, a.rosneft_btn, a.gem_mail_top-btn, a.appl_btn a.toggle_bottom, a.rosneft_btn, a.gem_mail_btn, a.appl_btn, a.ops_btn
&:hover &:hover
.icon-arrowDown2 .icon-arrowDown2
&:after &:after
...@@ -8413,22 +8429,119 @@ p.sborka_shkafov_bigp ...@@ -8413,22 +8429,119 @@ p.sborka_shkafov_bigp
+cover +cover
position: relative position: relative
padding-top: 67px padding-top: 67px
+r(320,767)
padding-bottom: 40px
&-title &-title
font-family: "RobotoBold" font-family: "RobotoBold"
font-size: 36px font-size: 36px
line-height: 50px line-height: 50px
letter-spacing: 0.8px letter-spacing: 0.8px
+r(480,767)
font-size: 34px
line-height: 40px
+r(320,479)
font-size: 20px
line-height: 30px
text-align: center
&-zadacha_title &-zadacha_title
font-size: 16px font-size: 16px
font-family: "RobotoBold" font-family: "RobotoBold"
display: block display: block
margin-top: 17px margin-top: 17px
+r(320,479)
margin-top: 40px
&-zadacha_txt &-zadacha_txt
font-size: 16px font-size: 16px
width: 540px width: 540px
margin-top: 15px margin-top: 15px
line-height: 21px line-height: 21px
a.gen_mail_top-btn +r(480,767)
width: 100%
+r(320,479)
width: 100%
h2
font-size: 30px
color: #fff
background: #64649B
padding: 13px 20px
display: inline-block
margin-top: 206px
font-family: "RobotoBold"
+r(768,970)
margin-top: 170px
+r(480,767)
margin-top: 90px
+r(320,479)
margin-top: 40px
font-size: 21px
.mail_p1
background: url(../images/parallax/mail_p1.png) no-repeat center center
width: 250px
height: 159px
position: absolute
top: 134px
left: 138px
+r(320,1300)
display: none
+r(1301,1600)
top: 90px
left: -70px
+r(1501,1600)
top: 0px
left: -90px
.mail_p2
background: url(../images/parallax/mail_p2.png) no-repeat center center
width: 289px
height: 273px
position: absolute
top: 384px
left: 255px
+r(320,1300)
display: none
+r(1301,1600)
top: 384px
left: -40px
.mail_p3
background: url(../images/parallax/mail_p3.png) no-repeat center center
width: 350px
height: 266px
position: absolute
top: 389px
right: 342px
+r(320,970)
display: none
+r(320,1300)
right: 130px
+r(1301,1600)
top: 389px
right: 200px
.mail_p4
background: url(../images/parallax/mail_p4.png) no-repeat center center
width: 553px
height: 663px
position: absolute
top: 94px
right: 467px
+r(320,970)
display: none
+r(320,1300)
right: 150px
+r(1301,1600)
top: 94px
right: 230px
.mail_p5
background: url(../images/parallax/mail_p5.png) no-repeat center center
width: 159px
height: 130px
position: absolute
top: 154px
right: 234px
+r(320,1300)
display: none
+r(1301,1600)
top: 85px
right: 40px
a.gem_mail_btn
display: block display: block
font-size: 20px font-size: 20px
color: #fff color: #fff
...@@ -8452,18 +8565,378 @@ a.gen_mail_top-btn ...@@ -8452,18 +8565,378 @@ a.gen_mail_top-btn
top: 0 top: 0
left: 0 left: 0
float: none float: none
margin: 20px 0 40px margin: 40px 0
&:hover, &:active, &:focus &:hover, &:active, &:focus
color: #000 color: #000
text-decoration: none text-decoration: none
background: #fff background: #fff
.gen_mail-title_list .keys_mail_list
font-size: 30px margin-top: 52px
color: #fff li
background: #64649B background: url(../images/icon/keys_mail_list.png) no-repeat 0% 50%
padding: 10px 15px padding-left: 30px
display: inline-block font-size: 21px
margin-top: 206px font-family: "RobotoBold"
color: #fff
margin-bottom: 14px
+r(480,767)
font-size: 18px
line-height: 20px
+r(320,479)
font-size: 16px
line-height: 20px
background: url(../images/icon/keys_mail_list.png) no-repeat 0% 20%
.short_keys_sect_mail
background: #D6E4E7
.short_keys_title
color: #2d323a
margin-left: 0
.module_gen
width: 100%
min-height: 100px
background: #D6E4E7
padding-top: 48px
h2
font-size: 30px
color: #fff
font-family: "RobotoBold"
background: #0090AF
padding: 8px 14px
display: inline-block
+r(320,479)
font-size: 25px
h3
font-size: 20px
color: #444
margin-top: 31px
line-height: 24px
+r(320,479)
font-size: 16px
&_title
font-size: 31px
color: #444
font-family: "RobotoBold"
margin-bottom: 36px
+r(320,479)
font-size: 27px
margin-bottom: 30px
&_txt
font-size: 16px
color: #2d323a
line-height: 19px
.module_mail_img
width: 686px
float: right
margin-top: 33px
position: relative
margin-bottom: 169px
+r(768,970)
margin-bottom: 30px
+r(480,767)
width: 100%
margin-bottom: 30px
+r(320,479)
width: 100%
margin-bottom: 30px
img
max-width: 100%
height: auto
p
font-size: 16px
color: #2d323a
text-align: center
margin-bottom: 20px
.module_mail_img2
width: 688px
float: right
position: relative
margin-bottom: 44px
+r(768,970)
margin-bottom: 30px
+r(480,767)
width: 100%
margin-bottom: 30px
+r(320,479)
width: 100%
margin-bottom: 30px
img
max-width: 100%
height: auto
.module_mail_img3
width: 687px
float: right
position: relative
margin-bottom: 123px
+r(768,970)
margin-bottom: 30px
+r(480,767)
width: 100%
margin-bottom: 30px
+r(320,479)
width: 100%
margin-bottom: 30px
img
max-width: 100%
height: auto
.module_mail2_itm1
position: absolute
left: -254px
top: 42px
width: 221px
font-size: 16px
color: #2d323a
line-height: 19px
+r(320,970)
display: none
&:after
content: ''
display: block
background: url(../images/icon/module_mail2_itm1.png) no-repeat
width: 348px
height: 77px
position: absolute
left: 80px
top: 72px
.module_mail3_itm1
position: absolute
left: -254px
top: 5px
width: 221px
font-size: 16px
color: #2d323a
line-height: 19px
+r(320,970)
display: none
&:after
content: ''
display: block
background: url(../images/icon/module_mail3_itm1.png) no-repeat
width: 349px
height: 78px
position: absolute
left: 80px
top: 51px
.module_mail3_itm2
position: absolute
left: -254px
bottom: 9px
width: 200px
font-size: 16px
color: #2d323a
line-height: 19px
+r(320,970)
display: none
&:after
content: ''
display: block
background: url(../images/icon/module_mail3_itm2.png) no-repeat
width: 236px
height: 26px
position: absolute
left: 108px
top: 32px
.module_mail_itm1
position: absolute
left: -254px
top: 144px
width: 221px
font-size: 16px
color: #2d323a
line-height: 19px
+r(320,970)
display: none
&:after
content: ''
display: block
background: url(../images/icon/module_mail_itm1.png) no-repeat
width: 363px
height: 75px
position: absolute
left: 75px
top: 109px
.module_mail_itm2
position: absolute
left: -254px
bottom: 200px
width: 221px
font-size: 16px
color: #2d323a
line-height: 19px
+r(320,970)
display: none
&:after
content: ''
display: block
background: url(../images/icon/module_mail_itm2.png) no-repeat
width: 285px
height: 2px
position: absolute
left: 188px
top: 11px
.module_mail_itm3
position: absolute
left: -254px
bottom: -63px
width: 205px
font-size: 16px
color: #2d323a
line-height: 19px
+r(320,970)
display: none
&:after
content: ''
display: block
background: url(../images/icon/module_mail_itm3.png) no-repeat
width: 285px
height: 42px
position: absolute
left: 104px
top: -48px
.module_mail_itm4
position: absolute
right: 34px
bottom: -38px
width: 228px
font-size: 16px
color: #2d323a
line-height: 19px
+r(320,970)
display: none
&:before
content: ''
display: block
background: url(../images/icon/module_mail_itm4.png) no-repeat
width: 2px
height: 62px
position: absolute
left: -10px
top: -40px
.uchet_img
margin-top: 115px
position: relative
margin-bottom: 17px
+r(768,970)
margin-top: 30px
+r(480,767)
margin-top: 30px
+r(320,479)
margin-top: 30px
img
max-width: 100%
height: auto
&_itm1
font-size: 16px
color: #2d323a
position: absolute
top: -63px
left: 170px
width: 195px
line-height: 19px
+r(320,970)
display: none
&:before
content: ''
display: block
background: url(../images/icon/uchet_img_itm1.png) no-repeat
width: 22px
height: 132px
position: absolute
left: -20px
top: 60px
&_itm2
font-size: 16px
color: #2d323a
position: absolute
top: -73px
right: 80px
width: 195px
line-height: 19px
+r(320,970)
display: none
&:before
content: ''
display: block
background: url(../images/icon/uchet_img_itm2.png) no-repeat
width: 22px
height: 132px
position: absolute
left: 1px
top: 70px
.taskon_mail_block
padding: 10px 0px 34px 33px
background: #eaeeef
margin-bottom: 40px
+r(768,970)
padding: 33px
+r(480,767)
padding: 33px
+r(320,479)
padding: 33px
&_txt
display: inline-block
font-size: 20px
color: #2d323a
line-height: 23px
font-family: "RobotoBold"
+r(768,970)
display: block
text-align: center
+r(480,767)
display: block
text-align: center
+r(320,479)
display: block
text-align: center
font-size: 16px
&_logo
display: inline-block
position: relative
margin-left: 71px
top: 8px
+r(768,970)
display: block
top: 0px
width: 202px
margin: 20px auto
+r(480,767)
display: block
top: 0px
width: 202px
margin: 20px auto
+r(320,479)
display: block
top: 0px
width: 202px
margin: 20px auto
&_link
display: inline-block
font-size: 14px
color: #57a2b5
text-decoration: underline
margin-left: 70px
position: relative
top: -10px
+r(768,970)
display: block
top: 0px
width: 100px
text-align: center
margin: 0 auto
+r(480,767)
display: block
top: 0px
width: 100px
text-align: center
margin: 0 auto
+r(320,479)
display: block
top: 0px
width: 100px
text-align: center
margin: 0 auto
&:hover, &:active, &:focus
text-decoration: none
color: #57a2b5
.keys_appl_top .keys_appl_top
width: 100% width: 100%
height: 444px height: 444px
...@@ -9064,4 +9537,267 @@ a.appl_btn ...@@ -9064,4 +9537,267 @@ a.appl_btn
position: absolute position: absolute
padding: 14px 30px 14px 20px padding: 14px 30px 14px 20px
left: -215px left: -215px
top: -16px top: -16px
\ No newline at end of file .top_ops
background: url(../images/top_ops_bg.jpg) repeat center center
width: 100%
min-height: 541px
padding-top: 48px
position: relative
+r(768,970)
min-height: 530px
h1
font-size: 36px
line-height: 50px
color: #fff
font-family: "RobotoBold"
letter-spacing: 0.9px
+r(768,970)
font-size: 25px
line-height: 43px
+r(480,767)
font-size: 19px
line-height: 33px
+r(320,479)
font-size: 17px
line-height: 33px
text-align: center
.ops_shema
width: 237px
height: 288px
position: relative
background: url(../images/ops_shema.png) no-repeat center center
bottom: -174px
left: 59px
+r(480,767)
margin-top: 135px
margin-left: 82px
margin-bottom: 170px
left: 0px
top: 0px
+r(320,479)
width: 270px
height: 283px
margin-bottom: 200px
left: 0px
top: 0px
background: url(../images/ops_shema_mobile.png) no-repeat center center
margin-top: 30px
&_item1
position: absolute
width: 93px
height: 70px
background: url(../images/icon/ops_shema_item1.png) no-repeat center center
top: 34px
left: -68px
+r(320,479)
display: none
&_item2
position: absolute
width: 96px
height: 80px
background: url(../images/icon/ops_shema_item2.png) no-repeat center center
top: -45px
left: -54px
+r(320,479)
display: none
&_item3
position: absolute
width: 91px
height: 103px
background: url(../images/icon/ops_shema_item3.png) no-repeat center center
top: -103px
left: -5px
+r(320,479)
display: none
&_item4
position: absolute
width: 54px
height: 99px
background: url(../images/icon/ops_shema_item4.png) no-repeat center center
top: -119px
left: 116px
+r(768,970)
left: 112px
+r(320,479)
display: none
&_item5
position: absolute
width: 118px
height: 103px
background: url(../images/icon/ops_shema_item5.png) no-repeat center center
top: -100px
right: -83px
+r(768,970)
right: -69px
+r(320,479)
display: none
.ops_two_section
width: 100%
min-height: 100px
background: #478700
padding-top: 91px
padding-bottom: 31px
+r(320,479)
padding-top: 40px
h2
background: #262B3A
font-size: 30px
font-family: "RobotoBold"
display: inline-block
padding: 16px
+r(320,479)
font-size: 20px
.ops_api_shema
background: url(../images/icon/ops_api_shema.png) no-repeat center center
width: 214px
height: 55px
position: absolute
top: 133px
right: -220px
+r(480,767)
right: -62px
top: 403px
+r(320,479)
right: 0px
top: 420px
.ops_shema_pic
background: url(../images/icon/ops_shema_pic.png) no-repeat center center
width: 157px
height: 107px
position: absolute
right: -285px
top: 4px
+r(480,767)
top: 290px
right: -97px
+r(320,479)
top: 300px
right: 0px
.ops_zadacha
position: relative
left: -62px
top: 43px
+r(768,970)
left: 0
+r(480,767)
left: 0
top: 0
margin-bottom: 80px
+r(320,479)
left: 0
top: 0
margin-bottom: 40px
h2
font-size: 16px
font-family: "RobotoBold"
line-height: 35px
p
font-size: 18px
line-height: 22px
+r(768,970)
font-size: 16px
line-height: 20px
+r(320,479)
font-size: 15px
a.ops_btn
display: block
font-size: 20px
color: #fff
width: 201px
height: 47px
border: 2px solid #fff
text-align: center
line-height: 40px
+br(50px)
position: relative
top: 157px
left: 0px
right: -28px
float: right
+transition(all 0.3s linear 0.1s)
+r(768,970)
top: 152px
+r(480,767)
top: 16px
right: 0
+r(320,479)
top: 16px
right: 0
float: none
margin: auto
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
.ops_list
margin-top: 30px
li
background: url(../images/appl_list.png) no-repeat 0% 30%
padding-left: 28px
margin-bottom: 1px
line-height: 34px
font-size: 20px
font-family: "RobotoBold"
+r(768,970)
font-size: 17px
line-height: 26px
margin-bottom: 10px
+r(480,767)
font-size: 17px
line-height: 26px
margin-bottom: 10px
+r(320,479)
font-size: 15px
line-height: 20px
margin-bottom: 10px
background: url(../images/appl_list.png) no-repeat 0% 10%
.ops_p1
background: url(../images/parallax/ops_p1.png) no-repeat center center
width: 240px
height: 231px
position: absolute
top: 150px
left: 4px
+r(320,1300)
display: none
+r(1301,1600)
top: 60px
left: -85px
.ops_p2
background: url(../images/parallax/ops_p2.png) no-repeat center center
width: 215px
height: 219px
position: absolute
top: 431px
left: 289px
z-index: 4
+r(320,1300)
display: none
+r(1301,1600)
left: 60px
.ops_p3
background: url(../images/parallax/ops_p3.png) no-repeat center center
width: 237px
height: 248px
position: absolute
top: -59px
right: -20px
z-index: 4
+r(320,1300)
display: none
+r(1301,1600)
right: -95px
.ops_p4
background: url(../images/parallax/ops_p4.png) no-repeat center center
width: 228px
height: 228px
position: absolute
top: 306px
right: 244px
z-index: 4
+r(320,1300)
display: none
+r(1301,1600)
top: 390px
right: 50px
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

task-on.com - ООО "Арт Проект"