/* == Framework "Lanc 9" by German Bodunov (v 0.01 - 15.03.2017) == */

body {margin: 0; padding: 0; font: normal 15px/24px sans-serif;}

/*``````````````Text``````````````````````````*/
h1 {font: normal 55px/80px 'Roboto', sans-serif;}
h2 {font: normal 34px/50px 'Roboto', sans-serif; text-align: center;}
.text_content h2 {text-align: left; margin-top: 70px;}
h3 {font: normal 21px/31px 'Roboto', sans-serif;}
.text_content h3 {margin-top: 50px;}
p {font: 300 18px/28px 'Roboto', sans-serif; color: dimgray;}
p.grey_block {background: whitesmoke; padding: 20px;}
a {font: normal 20px/24px 'Roboto', sans-serif; text-decoration: none; color: #ff6666;}
a:focus {outline: none;}
ul {padding: 0; list-style-type: none;}
li {font: normal 18px/25px 'Roboto', sans-serif; color: #54555d;}
dl {font: 300 18px/28px 'Roboto', sans-serif; background: whitesmoke; padding: 20px;}
dt {font-weight: normal;}
span {font: normal 13px/19px 'Roboto', sans-serif;}
button:focus {outline: none;}
b.phone {color: #ff6666; font-weight: 400;}

/*```````````Main Blocks``````````````````````*/
header {width: 100%; height: 50px; will-change: transform; padding: 15px 0; display: flex; justify-content: center; position: fixed; top: 0; z-index: 100; background: radial-gradient(at 50% 200%, #616269 30%, #2b2d37 70%);}
main {min-height: 600px;}
footer {display: flex; flex-direction: column;}
.screen_area {width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;}
.content_area {width: 1200px; height: calc(100% - 100px); margin-top: 100px;}
.row {width: 100%;}
.column {height: 100%;}
.t_content-c {padding: 20px; position: relative; top: 25%; left: 25%; width: 50%;}
.t_content-l {padding: 20px; text-align: center;}
.t_content-r {padding: 20px; text-align: center;}

/*```````````Modificators`````````````````````*/
.f_left {float: left;}
.center_text {text-align: center;}
.flex_row {display: flex; flex-direction: row;}
.flex_column {display: flex; flex-direction: column;}

/*`````````````Sizes```````````````````````````*/
.w_100 {width: 100%;}
.h_100 {height: 100%}
.h_auto {height: auto;}

/*````````````Graphics```````````````````````````*/
.v_raz {border-image: linear-gradient(to left, #62646d 1px, #2a2c31 1px)2; border-right: 2px solid;}
p.phone {background: url(/images/smms_phone.svg) no-repeat;}
p.mail {background: url(/images/smms_mail.svg) no-repeat; background-size: 26px; background-position-y: 50%; line-height: 16px !important; font-size: 14px !important;}
p.time {background: url(/images/smms_time.svg) no-repeat;}
.phone2 {background: url(/images/smms_phone2.svg) no-repeat;}
.mail2 {background: url(/images/smms_mail2.svg) no-repeat; text-align: left;}
.preim1 {background: url(/images/smms_check.svg) no-repeat; background-size: 70px; background-position: 30px 50%;}
.preim2 {background: url(/images/smms_complex.svg) no-repeat; background-size: 70px; background-position: 30px 50%;}
.preim3 {background: url(/images/smms_delivery.svg) no-repeat; background-size: 55px; background-position: 35px 50%;}
.usl1 {background: url(/images/smms_2_3.jpg) no-repeat; background-size: cover;}
.usl2 {background: url(/images/smms_2_7.jpg) no-repeat; background-size: cover;}
.usl3 {background: url(/images/smms_2_4.jpg) no-repeat; background-size: cover;}
.back_gray {background: whitesmoke;}
p.white_pol {width: 90px; height: 1px; background: white; margin: 0; transition: all 0.5s ease;}
.back_img-1 {background: url(/images/_.jpg) no-repeat; background-size: cover;}

/*`````````````Sliders`````````````````````````````*/
.slider_area {display: flex; justify-content: space-around; width: 100%; position: relative;}
.slider_wrap {width: 100%; height: auto; overflow: hidden;}
.slider {display: flex; justify-content: center; position: relative; top: 0; left: -100%; width: 400%; will-change: transform; transform: translateX(0);}
.slider div {width: 100%; height: auto;}
.slider img {width: 100%;}
.slider_area button {position: absolute; z-index: 2; border: none; width: 100px; height: 100px; padding: 0; transition: all 0.5s ease;}
button.left_slide {top: 14vw; left: 0; background: url(/images/smms_arrow_left.svg) no-repeat; background-size: 80px 80px; background-position: 40%;}
button.right_slide {top: 14vw; right: 0; background: url(/images/smms_arrow_right.svg) no-repeat; background-size: 80px 80px; background-position: 60%;}
.slider_area button:hover {background-color: rgba(255, 255, 255, 0.6);}
.slide_left {transform: translateX(25%);}
.slide_right {transform: translateX(-25%);}
.trans_slide {transition: all 0.3s ease;}
/*--------*/
.slider_area2 {display: flex; justify-content: space-around; width: 100%; position: relative;}
.slider_wrap2 {width: 100%; height: auto; overflow: hidden;}
.slider2 {display: flex; justify-content: center; position: relative; top: 0; left: -33.33%; width: 266.64%; will-change: transform; transform: translateX(0);}
.slider2 div {width: 33.33%; height: auto;}
.slider2 img {width: 100%; height: 100%;}
.slider_area2 button {position: absolute; z-index: 2; border: none; width: 100px; height: 100px; padding: 0; transition: all 0.5s ease;}
button.left_slide2 {top: 14vw; left: 0; background: url(/images/smms_arrow_left.svg) no-repeat; background-size: 80px 80px; background-position: 40%;}
button.right_slide2 {top: 14vw; right: 0; background: url(/images/smms_arrow_right.svg) no-repeat; background-size: 80px 80px; background-position: 60%;}
.slider_area2 button:hover {background-color: rgba(255, 255, 255, 0.6);}
.slide_left2 {transform: translateX(12.50%);}
.slide_right2 {transform: translateX(-12.50%);}
.trans_slide2 {transition: all 0.3s ease;}
.ekran {width: 100%; height: 100%; position: absolute; top: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0.85) 33.33%, rgba(255, 255, 255, 0) 33.33%, rgba(255, 255, 255, 0) 66.66%, rgba(255, 255, 255, 0.85) 66.66%);}
.ek_hov {width: 33.33%; height: 100%; margin: 0 auto; text-align: center; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); transition: opacity 1s ease; opacity: 0;}
a.insta_gallery {color: white; line-height: 28px; font-weight: 300;}
.ek_hov:hover {opacity: 1;}

/*````````````Preloader````````````````````````*/
.preloader {position: fixed; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; z-index: 200; background: radial-gradient(at 50% 0%, #616269 10%, #2b2d37 90%); display: flex; justify-content: center; align-items: center;}
.pre_promo {text-align: center;}
.pre_promo ul {display: flex;}
.pre_promo li {width: 15px; height: 15px; background: white; filter: brightness(.5); margin: 20px 10px; border-radius: 10px; transition: all 0.3s ease;}
.pre_promo li:nth-child(1) {animation: lamp1 3s infinite ease;}
.pre_promo li:nth-child(2) {animation: lamp2 3s infinite ease;}
.pre_promo li:nth-child(3) {animation: lamp3 3s infinite ease;}
.pre_promo li:nth-child(4) {animation: lamp4 3s infinite ease;}
.pre_promo li:nth-child(5) {animation: lamp5 3s infinite ease;}
@keyframes lamp1 {
	from {filter: brightness(.5);}
	10% {filter: brightness(1);}
	to {filter: brightness(1);}
}
@keyframes lamp2 {
	from {filter: brightness(.5);}
	20% {filter: brightness(.5);}
	30% {filter: brightness(1);}
	to {filter: brightness(1);}
}
@keyframes lamp3 {
	from {filter: brightness(.5);}
	40% {filter: brightness(.5);}
	50% {filter: brightness(1);}
	to {filter: brightness(1);}
}
@keyframes lamp4 {
	from {filter: brightness(.5);}
	60% {filter: brightness(.5);}
	70% {filter: brightness(1);}
	to {filter: brightness(1);}
}
@keyframes lamp5 {
	from {filter: brightness(.5);}
	80% {filter: brightness(.5);}
	90% {filter: brightness(1);}
	to {filter: brightness(1);}
}

/*-------------Header-------------------------------*/
.logo {display: flex; align-items: center; height: 100%; padding-right: 35px;}
.logo a {line-height: 0;}
.logo img {height: 50px;}
nav.menu {display: flex;}
nav.menu a {font: 100 18px/26px 'Roboto', sans-serif; color: whitesmoke; display: flex; height: 100%; padding: 0 16px; align-items: center; transition: color 0.2s ease;}
nav.menu a:hover {color: gray;}
.head_kont {display: flex; align-items: center; margin-left: 5px;}
p.phone, p.mail, p.time {padding-left: 34px; font: 100 18px/26px 'Roboto', sans-serif; color: whitesmoke; margin: 0; margin-left: 20px;}

/*--------------Footer--------------------------------*/
.foot_top {text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.foot_top img {width: 70px;}
.foot_top a {padding: 10px; transition: box-shadow 0.3s ease;}
.foot_top a:hover {box-shadow: #ff6666 0 0 0 1px;}
.foot_top a p {margin: 0; font-weight: 300; font-size: 14px; color: #ff6666;}
.foot_kont {display: flex; justify-content: center; margin-bottom: 40px;}
.foot_kont div {margin: 0 50px; display: flex; align-items: center; padding-left: 80px; background-size: 55px; background-position-y: 50%;}
.foot_bottom {height: 325px; background: radial-gradient(at 50% 0%, #616269 10%, #2b2d37 90%); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: whitesmoke;}
.foot_menu a {color: whitesmoke; margin: 0 30px; font-size: 24px; font-weight: 300;}
.foot_menu a:hover {border-bottom: 1px solid whitesmoke;}
.socseti {margin: 20px 0;}
.socseti a {margin: 0 10px;}
.socseti img {width: 50px;}
.copyr p {margin: 0; color: whitesmoke;}


/*======================CONTENT=========================*/
.screen1 .content_area {margin-top: 80px; height: calc(100% - 80px);}
.preim_area {display: flex; justify-content: space-between; width: 1200px; margin: 0 auto; margin-top: 7vh;}
.preim_area div {width: 250px; padding: 10px 10px 15px 130px; border: 1px solid gray;}
.preim_area p {color: gray; font: 300 16px/20px 'Roboto', sans-serif; margin: 0;}
.preim_area h3 {margin: 0; margin-bottom: 10px;}
.uslugi {display: flex; justify-content: space-between;}
.uslugi div {width: 384px; height: 550px; overflow: hidden; position: relative;}
.usl_text {top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; transition: all 0.8s ease; will-change: transform; transform: translateY(290px);}
.usl_text h3 {margin: 0;}
.usl_text p {font-weight: 300; color: white;}
p.u_podr {margin: 0; transition: all 0.8s ease;}
.uslugi div:hover .usl_text {transform: translateY(0); background: rgba(0, 0, 0, 0.65);}
.uslugi div:hover p.u_podr {opacity: 0;}
.uslugi div:hover p.white_pol {transform: scaleX(2);}
.oborud {display: flex; height: 600px; margin: 50px 0;}
.oborud div {width: 50%;}
.im_oborud {background: whitesmoke;}
.text_left, .text_right {padding: 0 40px; width: 520px !important;}
.text_right {text-align: right;}

/*-------------Home-----------------------------*/


/*```````````Responsive`````````````````````````*/
@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation: portrait) {
header {flex-direction: column; height: 100vh; align-items: center; position: relative;}
.screen_area {height: auto;}
.content_area {width: 100%; margin-top: 0;}
.v_raz {border: none;}
.logo {height: auto;}
nav.menu {margin: 30px 0;}
nav.menu a {padding: 10px;}
.head_kont {flex-direction: column; align-items: flex-start;}
p.phone, p.mail, p.time {margin: 10px 0;}
.screen1 .content_area {margin-top: 0; height: 100%; margin-bottom: 40px;}
.slider_area button {width: 40px; height: 40px;}
button.right_slide, button.left_slide {top: 30%; background-size: 40px 40px;}
.preim_area {width: 100%; flex-direction: column; align-items: center;}
.preim_area div {width: 220px; padding: 5px 5px 10px 90px; margin: 10px 0; border: none;}
.preim1, .preim2, .preim3 {background-size: 50px; background-position: 19px 50%;}
.preim_area p {font-size: 14px;}
.uslugi {flex-direction: column; align-items: center;}
.uslugi div {width: 300px; height: 360px; justify-content: flex-start;}
.usl_text {transform: translateY(0); background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));}
.uslugi div:hover .usl_text {transform: translateY(0); background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));}
.usl_text p {font-size: 14px; line-height: 20px;}
.usl_text h3 {margin-top: 20px;}
p.u_podr {display: none;}
.slider_area2 button {width: 40px; height: 40px;}
button.right_slide2, button.left_slide2 {top: 30%; background-size: 40px 40px;}
footer {height: auto; margin: 0;}
.foot_kont {flex-direction: column; margin-bottom: 20px;}
.foot_kont div {background-size: 40px;}
.foot_top p {font-size: 12px;}
.foot_menu a {font-size: 16px; margin: 0 10px;}
.foot_bottom {height: 250px;}
.copyr p {font-size: 12px;}
.slider_area2 {margin-bottom: 40%;}
.ek_hov {position: absolute; top: 100%; width: 100%; opacity: 1;}
a.insta_gallery {font-size: 16px;}
}

@media only screen and (min-width : 481px) and (max-width : 1020px) and (orientation: portrait) {
header {flex-direction: column; height: 100vh; align-items: center; position: relative;}
.screen_area {height: auto;}
.content_area {width: 100%; margin-top: 0;}
.v_raz {border: none;}
.logo {height: auto;}
nav.menu {margin: 30px 0;}
nav.menu a {padding: 10px;}
.head_kont {flex-direction: column; align-items: flex-start;}
p.phone, p.mail, p.time {margin: 10px 0;}
.screen1 .content_area {margin-top: 0; height: 100%; margin-bottom: 40px;}
.slider_area button {width: 40px; height: 40px;}
button.right_slide, button.left_slide {top: 30%; background-size: 40px 40px;}
.preim_area {width: 100%; flex-direction: column; align-items: center;}
.preim_area div {width: 220px; padding: 5px 5px 10px 90px; margin: 10px 0; border: none;}
.preim1, .preim2, .preim3 {background-size: 50px; background-position: 19px 50%;}
.preim_area p {font-size: 14px;}
.uslugi {flex-direction: column; align-items: center;}
.uslugi div {width: 300px; height: 360px; justify-content: flex-start;}
.usl_text {transform: translateY(0); background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));}
.uslugi div:hover .usl_text {transform: translateY(0); background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));}
.usl_text p {font-size: 14px; line-height: 20px;}
.usl_text h3 {margin-top: 20px;}
p.u_podr {display: none;}
.slider_area2 button {width: 40px; height: 40px;}
button.right_slide2, button.left_slide2 {top: 30%; background-size: 40px 40px;}
footer {height: auto; margin: 0;}
.foot_kont {flex-direction: column; margin-bottom: 20px;}
.foot_kont div {background-size: 40px;}
.foot_top p {font-size: 12px;}
.foot_menu a {font-size: 16px; margin: 0 10px;}
.foot_bottom {height: 250px;}
.copyr p {font-size: 12px;}
.slider_area2 {margin-bottom: 40%;}
.ek_hov {position: absolute; top: 100%; width: 100%; opacity: 1;}
a.insta_gallery {font-size: 16px;}
}

@media only screen and (min-width : 1020px) and (max-width : 1600px) and (orientation: portrait) {
header {flex-direction: column; height: 100vh; align-items: center; position: relative;}
.screen_area {height: auto;}
.content_area {width: 100%; margin-top: 0;}
.v_raz {border: none;}
.logo {height: auto;}
nav.menu {margin: 30px 0;}
nav.menu a {padding: 6px;}
.head_kont {flex-direction: column; align-items: flex-start;}
p.phone, p.mail, p.time {margin: 10px 0;}
.screen1 .content_area {margin-top: 0; height: 100%; margin-bottom: 40px;}
.slider_area button {width: 40px; height: 40px;}
button.right_slide, button.left_slide {top: 30%; background-size: 40px 40px;}
.preim_area {width: 100%; flex-direction: column; align-items: center;}
.preim_area div {width: 220px; padding: 5px 5px 10px 90px; margin: 10px 0; border: none;}
.preim1, .preim2, .preim3 {background-size: 50px; background-position: 19px 50%;}
.preim_area p {font-size: 14px;}
.uslugi {flex-direction: column; align-items: center;}
.uslugi div {width: 300px; height: 360px; justify-content: flex-start;}
.usl_text {transform: translateY(0); background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));}
.uslugi div:hover .usl_text {transform: translateY(0); background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));}
.usl_text p {font-size: 14px; line-height: 20px;}
.usl_text h3 {margin-top: 20px;}
p.u_podr {display: none;}
.slider_area2 button {width: 40px; height: 40px;}
button.right_slide2, button.left_slide2 {top: 30%; background-size: 40px 40px;}
footer {height: auto; margin: 0;}
.foot_kont {flex-direction: column; margin-bottom: 20px;}
.foot_kont div {background-size: 40px;}
.foot_top p {font-size: 12px;}
.foot_menu a {font-size: 16px; margin: 0 10px;}
.foot_bottom {height: 250px;}
.copyr p {font-size: 12px;}
.slider_area2 {margin-bottom: 40%;}
.ek_hov {position: absolute; top: 100%; width: 100%; opacity: 1;}
a.insta_gallery {font-size: 16px;}
}

@media only screen and (min-width : 480px) and (max-width : 860px) and (orientation: landscape) {
header {flex-direction: column; height: 100vh; align-items: center; position: relative;}
.screen_area {height: auto;}
.content_area {width: 100%; margin-top: 0;}
.v_raz {border: none;}
.logo {height: auto;}
nav.menu {margin: 30px 0;}
nav.menu a {padding: 6px;}
.head_kont {flex-direction: column; align-items: flex-start;}
p.phone, p.mail, p.time {margin: 10px 0;}
.screen1 .content_area {margin-top: 0; height: 100%; margin-bottom: 40px;}
.slider_area button {width: 40px; height: 40px;}
button.right_slide, button.left_slide {top: 30%; background-size: 40px 40px;}
.preim_area {width: 100%; flex-direction: column; align-items: center;}
.preim_area div {width: 220px; padding: 5px 5px 10px 90px; margin: 10px 0; border: none;}
.preim1, .preim2, .preim3 {background-size: 50px; background-position: 19px 50%;}
.preim_area p {font-size: 14px;}
.uslugi {flex-direction: column; align-items: center;}
.uslugi div {width: 300px; height: 360px; justify-content: flex-start;}
.usl_text {transform: translateY(0); background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));}
.uslugi div:hover .usl_text {transform: translateY(0); background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));}
.usl_text p {font-size: 14px; line-height: 20px;}
.usl_text h3 {margin-top: 20px;}
p.u_podr {display: none;}
.slider_area2 button {width: 40px; height: 40px;}
button.right_slide2, button.left_slide2 {top: 30%; background-size: 40px 40px;}
footer {height: auto; margin: 0;}
.foot_kont {flex-direction: column; margin-bottom: 20px;}
.foot_kont div {background-size: 40px;}
.foot_top p {font-size: 12px;}
.foot_menu a {font-size: 16px; margin: 0 10px;}
.foot_bottom {height: 250px;}
.copyr p {font-size: 12px;}
.slider_area2 {margin-bottom: 40%;}
.ek_hov {position: absolute; top: 100%; width: 100%; opacity: 1;}
a.insta_gallery {font-size: 16px;}
}

@media only screen and (min-width : 861px) and (max-width : 1200px) and (orientation: landscape) {
header {flex-direction: column; height: 100vh; align-items: center; position: relative;}
.screen_area {height: auto;}
.content_area {width: 100%; margin-top: 0;}
.v_raz {border: none;}
.logo {height: auto;}
nav.menu {margin: 30px 0;}
nav.menu a {padding: 6px;}
.head_kont {flex-direction: column; align-items: flex-start;}
p.phone, p.mail, p.time {margin: 10px 0;}
.screen1 .content_area {margin-top: 0; height: 100%; margin-bottom: 40px;}
.slider_area button {width: 40px; height: 40px;}
button.right_slide, button.left_slide {top: 30%; background-size: 40px 40px;}
.preim_area {width: 100%; flex-direction: column; align-items: center;}
.preim_area div {width: 220px; padding: 5px 5px 10px 90px; margin: 10px 0; border: none;}
.preim1, .preim2, .preim3 {background-size: 50px; background-position: 19px 50%;}
.preim_area p {font-size: 14px;}
.uslugi {flex-direction: column; align-items: center;}
.uslugi div {width: 300px; height: 360px; justify-content: flex-start;}
.usl_text {transform: translateY(0); background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));}
.uslugi div:hover .usl_text {transform: translateY(0); background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));}
.usl_text p {font-size: 14px; line-height: 20px;}
.usl_text h3 {margin-top: 20px;}
p.u_podr {display: none;}
.slider_area2 button {width: 40px; height: 40px;}
button.right_slide2, button.left_slide2 {top: 30%; background-size: 40px 40px;}
footer {height: auto; margin: 0;}
.foot_kont {flex-direction: column; margin-bottom: 20px;}
.foot_kont div {background-size: 40px;}
.foot_top p {font-size: 12px;}
.foot_menu a {font-size: 16px; margin: 0 10px;}
.foot_bottom {height: 250px;}
.copyr p {font-size: 12px;}
.slider_area2 {margin-bottom: 40%;}
.ek_hov {position: absolute; top: 100%; width: 100%; opacity: 1;}
a.insta_gallery {font-size: 16px;}
}

@media only screen and (min-width : 1200px) and (max-width : 1600px) and (orientation: landscape) {
.content_area {margin-top: 50px;}
.preim_area {margin-top: 45px;}
.uslugi div {height: 500px;}
.usl_text {transform: translateY(265px);}
.foot_top h2 {margin-bottom: 0;}
.foot_top p {font-size: 16px; line-height: 22px;}
.foot_kont div {background-size: 45px; padding-left: 60px;}
.foot_menu a {font-size: 20px;}
}