/* =========== © 2017 Centroarts.com for https://magenta.su =========== */

/* --- Настройка главной страницы --- */
/* Видео */
.section_head_video {
	min-height: calc(100vh - 100px); width: 100%; position: relative; z-index: 1; background-color: transparent;
	display: flex; align-items: center; justify-content: center;
}
.menu_open .section_head_video, .soc_open .section_head_video { z-index: auto; }

.video_bg {
	position: absolute; inset: 0; z-index: -1; overflow: hidden;
	background: url("/video/magenta_bg.jpg") no-repeat 50% 50%;
	background-size: cover;
}
.video_bg > video {
	position: absolute; top: 50%; left: 50%; z-index: -1; min-width: 100%; min-height: 100%;
	width: auto; height: auto; pointer-events: none; user-select: none;
	transform: translateX(-50%) translateY(-50%);
	transition: 1s opacity;
}
@media screen and (max-device-width: 800px) {
	.video_bg > video { display: none; }
}
@media only screen and (max-width: 799px) {
	.section_head_video { min-height: 560px; }
}

.we_do { width: 100%; max-width: 900px; }
.we_do > div { width: 47%; }
.we_do > div.left { text-align: right; font-weight: normal; }
	.we_do > div.left > * { font-weight: inherit; }
	.we_do > div.left > .magenta_text { font-size: 2.6em; line-height: 1.1em; margin-top: -.14em; font-weight: bold; }
	.we_do > div.left > .magenta_text span { display: block; }
	.we_do > div.left > p { font-size: 2em; color: #484a55; }

.we_do > div.right > .btn {
	font-size: 1.8em; font-weight: bold; border-radius: 4px; padding: .6em 1em;
}
.we_do > div.right > p { font-size: .9em; opacity: .6; margin-top: 1em; margin-bottom: 0; }

@media only screen and (max-width: 998px) {
	.we_do { max-width: 780px; }
}
@media only screen and (max-width: 780px) {
	.headbar { margin-bottom: 40px; }
	.we_do {
		font-size: .7em; max-width: 600px;
	}
}
@media only screen and (max-width: 680px) {
	.we_do { padding-left: 20px; padding-right: 20px; text-align: center; }
	.we_do > div { float: none; width: auto; text-align: center !important; }
	.we_do > div.right > p { display: none; }
}

/* Блок с вертолетом */
.parallax { background-color: var(--odark-bg); color: #fff; overflow: hidden; z-index: 0; }
.parallax > .intro { position: absolute; left: 0; top: 0; width: 100%; z-index: 2; }

.parallax_magenta { width: 100%; height: 100%; position: relative; overflow: hidden; }
.parallax_magenta_action { height: 100%; position: relative; z-index: 1; }
.schema { z-index: 2; position: relative; width: 100%; height: 3836px; background: url(../images/parallax/schema.svg) no-repeat 50% 100%; }
.vorota {
	display: none; z-index: 3; position: absolute; left: 50%; top: 100%; margin-top: -154px; margin-left: 15%; width: 150px; height: 155px;
	background: url(../images/parallax/vorota.svg) no-repeat;
}

.helicopter {
	position: fixed; z-index: -1; left: 50%; top: 30%; opacity: 0; visibility: hidden;
	width: 116px; height: 144px; margin: -72px 0 0 -59px;
	background: url(../images/parallax/helicopter.svg) no-repeat 0 0;
	background-size: auto 100%;
	transform: scale(.8, .8);
	transition: all ease-out .2s;
}
.helicopter.on {
	transform: scale(1, 1);
	top: 50%; opacity: 1; visibility: visible;
}
.helicopter > i {
	display: block; width: 116px; height:14px;
	background: url(../images/parallax/helicopter.svg) no-repeat -116px 0;
	background-size: 232px auto;
}
.helicopter > i {
	animation: mixed .5s steps(5) infinite;
}
@keyframes mixed { from { background-position: -116px 0; } to { background-position: -116px -70px; } }

.parallax_magenta > ul { list-style: none; padding: 0; margin: 0; height: 100%; }
.parallax_magenta > ul > li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.space_1, .space_2 { border-radius: 50%; position: absolute; left: 50%; top: 0; }
.space_2 { width: 1200px; height: 1200px; background-color: #22272b; margin-left: -600px; margin-top: -600px; }
.space_1 { width: 1620px; height: 1620px; background-color: #282e34; margin-left: -810px; margin-top: -810px; }

.planets_sm, .planets_big, .parallax_magenta > ul { width: 2000px; margin-left: -1000px; left: 50%; position: absolute; }
.planets_sm, .planets_big { height: 842px; }
.planets_sm { background: url(../images/parallax/planets_sm.svg) no-repeat 50% 0; }
.planets_big { background: url(../images/parallax/planets_big.svg) no-repeat 50% 0; }

.stars { width: 100%; height: 1083px; opacity: .22; background: url(../images/parallax/stars.svg) no-repeat 50% -65px; margin-top: 100px; }
.clouds {
	height: 100%; background: url(../images/parallax/clouds.svg) no-repeat 50% -160px;
	animation: clouds 12s 0.1s infinite ease-in-out;
}
.clouds_dark {
	height: 100%; background: url(../images/parallax/clouds_dark.svg) no-repeat 50% 0;
	animation: dclouds 11s 0.1s infinite ease-in-out;
}
@keyframes clouds {
	0% { transform: translateX(10%); }
	50% { transform: translateX(0%); }
	100% { transform: translateX(10%); }
}
@keyframes dclouds {
	0% { transform: translateX(8%); }
	50% { transform: translateX(0%); }
	100% { transform: translateX(8%); }
}

.lines { width: 100%; height: 100%; background: url(../images/parallax/lines.svg) no-repeat 50% 100%; }

.mountaion_3, .mountaion_2, .mountaion_1 { position: absolute; left: 0; bottom: 0; width: 100%; }
.mountaion_3 {
	height: 593px; background: url(../images/parallax/mountain_3.svg) repeat-x 50% 100%;
	background-size: 1578px auto;
}
.mountaion_2 {
	height: 720px; background: url(../images/parallax/mountain_2.svg) repeat-x 50% 100%;
	background-size: 1647px auto;
}
.mountaion_1 {
	height: 778px; background: url(../images/parallax/mountain_1.svg) repeat-x 50% 100%;
	background-size: 1809px auto;
}

.planets_sm, .planets_big,
.stars, .clouds, .clouds_dark, .lines, .schema { background-size: 1920px auto; }
.clouds { background-size: 2000px auto; }

#parallax_scene { z-index: 2; }

.parallax_magenta_text { position: absolute; left: 50%; top: 0; height: 100%; z-index: 4; }
@media only screen and (min-width: 767px) {
	.parallax_magenta_text > p { position: absolute; font-size: 1.2em; }
}
.pmt_1 { margin: 745px 0 0 -570px; width: 230px; text-align: right; }
.pmt_2 { margin: 860px 0 0 320px; width: 180px; text-align: left; }
.pmt_3 { margin: 1170px 0 0 -25px; width: 180px; text-align: left; }
.pmt_4 { margin: 1720px 0 0 -565px; width: 220px; text-align: right; }
.pmt_5 { margin: 1880px 0 0 240px; width: 230px; text-align: center; }
.pmt_6 { margin: 2240px 0 0 -560px; width: 210px; text-align: center; }
.pmt_7 { margin: 2260px 0 0 115px; width: 220px; text-align: center; }
.pmt_8 { margin: 2560px 0 0 -447px; width: 160px; text-align: center; }
.pmt_9 { margin: 3050px 0 0 -503px; width: 124px; text-align: right; }
.pmt_10 { margin: 3700px 0 0 -600px; width: 200px; text-align: right; }
.pmt_11 { margin: 3580px 0 0 325px; width: 240px; text-align: left; }

.pmt_8m, .pmt_9m { display: none; }

@media only screen and (max-width: 1200px) and (min-width: 961px) {
	.parallax_magenta_text > p { font-size: 1.1em; }
	.schema { height: 3200px; }
	.planets_sm, .planets_big,
	.stars, .clouds, .clouds_dark, .lines, .schema { background-size: 1600px auto; }
	.clouds { background-position: 50% -60px; }

	.pmt_1 { margin: 625px 0 0 -470px; width: 180px; }
	.pmt_2 { margin: 720px 0 0 265px; width: 180px; }
	.pmt_3 { margin: 980px 0 0 -20px; width: 180px; }
	.pmt_4 { margin: 1440px 0 0 -480px; width: 190px; }
	.pmt_5 { margin: 1575px 0 0 197px; width: 200px; }
	.pmt_6 { margin: 1870px 0 0 -480px; width: 200px; }
	.pmt_7 { margin: 1890px 0 0 90px; width: 196px; }
	.pmt_8 { margin: 2140px 0 0 -410px; width: 200px; }
	.pmt_9 { margin: 2540px 0 0 -445px; width: 124px; }
	.pmt_10 { margin: 3080px 0 0 -455px; width: 120px; }
	.pmt_11 { margin: 2990px 0 0 272px; width: 180px; }
	.helicopter { transform: scale(.5, .5); }
	.helicopter.on { transform: scale(.7, .7); }
}

@media only screen and (max-width: 960px) and (min-width: 767px) {
	.parallax_magenta_text { font-size: .85em; }
	.parallax_magenta_text > p { font-size: 1em; }
	.schema { height: 2400px; }
	.planets_sm, .planets_big,
	.stars, .clouds, .clouds_dark, .lines, .schema { background-size: 1200px auto; }
	.clouds { background-position: 50% -30px; }
	.pmt_1 { margin: 465px 0 0 -400px; width: 180px; }
	.pmt_2 { margin: 540px 0 0 205px; width: 180px; }
	.pmt_3 { margin: 735px 0 0 -10px; width: 150px; }
	.pmt_4 { margin: 1080px 0 0 -380px; width: 160px; }
	.pmt_5 { margin: 1185px 0 0 142px; width: 160px; }
	.pmt_6 { margin: 1400px 0 0 -365px; width: 160px; }
	.pmt_7 { margin: 1420px 0 0 55px; width: 170px; }
	.pmt_8 { margin: 1600px 0 0 -280px; width: 100px; }
	.pmt_9 { margin: 1910px 0 0 -345px; width: 100px; }
	.pmt_10 { margin: 2310px 0 0 -355px; width: 100px; }
	.pmt_11 { margin: 2240px 0 0 205px; width: 140px; }
	.helicopter { transform: scale(.3, .3); }
	.helicopter.on { transform: scale(.5, .5); }
}

@media only screen and (max-width: 766px) {
	.parallax_magenta { font-size: 14px; }
	.schema {
		height: 1865px; background: url(../images/parallax/schema_mobile.svg) no-repeat 50% 100%;
		background-size: 320px auto;
	}
	.vorota { display: block; }
	.lines, .planets_sm, .planets_big, .clouds, .space_1, .space_2, .parallax_share_arrow { display: none; }
	.stars { background-size: 1200px auto; }
	.clouds_dark { background-size: 1500px auto; margin-top: -500px }
	.helicopter { left: 65%; margin-left: 17px; transform: scale(.3, .3); }
	.helicopter.on { transform: scale(.45, .45); }

	.mountaion_3 { height: 400px; background-size: 800px auto; }
	.mountaion_2 {height: 400px; background-size: 900px auto; }
	.mountaion_1 { height: 400px; background-size: 1000px auto; }

	.parallax_magenta_text > p { position: relative; margin-left: -82px; text-align: left; }
	.pmt_1 { margin-top: 154px; width: 180px; }
	.pmt_2 { margin-top: 29px; width: 180px; }
	.pmt_3 { margin-top: 29px; width: 150px; }
	.pmt_4 { margin-top: 145px; width: 160px; }
	.pmt_4 > span { display: none; }
	.pmt_5 { margin-top: 42px; width: 160px; }
	.pmt_6 { margin-top: 8px; width: 160px; }
	.pmt_7 { margin-top: 29px; width: 196px; }
	.pmt_8, .pmt_9, .pmt_10, .pmt_11 { display: none; }

	.pmt_8m, .pmt_9m { display: block; }
	.pmt_8m { margin-top: 400px; width: 196px; }
	.pmt_9m { margin-top: 415px; width: 196px; }
}

/* Поделиться сразу после параллакса */
.parallax_share { position: relative; z-index: 1; background-color: #fff; text-align: center; padding: 3% 5%; }
@media only screen and (max-width: 600px) {
	.parallax_share { padding: 20px 20px; }
}
.parallax_share_arrow::after, .parallax_share_arrow::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -20px; margin-top: -1px; border: solid transparent; border-top-color: #c42269; border-width: 19px 19px 0 19px; }
.parallax_share_arrow::after { border-top-color: var(--color-primary); border-right-width: 0; }

/* Наша продукция */
.section.portfolio {
	background: fixed #3f464d url(../images/pattern_triangle.svg) no-repeat 100% 50%;
	-webkit-background-size: auto 150%; background-size: auto 150%;
	color: #fff;
}
.section.portfolio.pad { padding-left: 3%; padding-right: 3%; }
.section.portfolio a { color: inherit; }
.border_box { border: 0 solid rgba(255,255,255,0.2); border-width: 0 3px; max-width: 1600px; padding: 3%; margin: 0 auto; position: relative; }

.border_box_top, .border_box_foot { position: absolute; top: 0; left: 0; width: 100%; height: 50px; margin-top: -25px; overflow: hidden; text-align: center; white-space: nowrap; }
.border_box_top > .heading, .border_box_foot > a { display: inline-block; line-height: 50px; margin: 0; }
.border_box_top > .heading:after, .border_box_top > .heading:before,
.border_box_foot > a:after, .border_box_foot > a:before { content: ""; background-color: rgba(255,255,255,0.2); height: 3px; width: 800px; position: absolute; top: 50%; }
.border_box_top > .heading:before, .border_box_foot > a:before { margin-left: -820px; }
.border_box_top > .heading:after, .border_box_foot > a:after { margin-left: 20px; }

.border_box_foot { top: 100%; margin-top: -28px; }

@media only screen and (max-width: 1239px) {
	.border_box { border-width: 0; padding: 0; }
	.border_box_top > .heading:after, .border_box_top > .heading:before,
	.border_box_foot > a:after, .border_box_foot > a:before { display: none; }
	.border_box_top, .border_box_foot { position: relative; height: auto; margin: 0; }
	.border_box_top { margin-bottom: 20px; }
	.border_box_foot { margin-top: 20px; }
}
@media only screen and (max-width: 998px) {
	.border_box_top { margin-bottom: 20px; }
	.border_box_foot { margin-top: 10px; }
}

/* Карусель - Наша продукция */
.carousel { position: relative; }
#carousel_video { margin-top: 1px; }

.carousel_list { margin-right: -1px; }
.carousel_list_in {
	opacity: 0; visibility: hidden;
	transition: all ease-out .6s;
}
.carousel_nav { display: inline; }
.carousel_nav > button {
	width: 75px; height: 75px; padding: 0; 
	border: 0 none; background: none; color: #fff;
	position: absolute; top: 50%; z-index: 12; margin-top: -37.5px;
	visibility: hidden; opacity: 0;
	transition: all ease-out .3s;
}
.carousel:hover .carousel_nav  > button { opacity: 1; visibility: visible; }
.carousel_nav > button > i { vertical-align: middle; }
.carousel_nav > button:hover { color: var(--color-primary); }
.carousel_nav > .carousel_next { right: 0; margin-right: -95px; }
.carousel_nav > .carousel_prev { left: 0; margin-left: -95px; }

@media only screen and (max-width: 1660px) {
	.carousel_nav > .carousel_next { right: 0; margin-right: -60px; }
	.carousel_nav > .carousel_prev { left: 0; margin-left: -60px; }
}
@media only screen and (max-width: 1239px) {
	.carousel_nav > .carousel_next { margin-right: -20px; }
	.carousel_nav > .carousel_prev { margin-left: -20px; }
}
@media only screen and (max-width: 998px) {
	.carousel_nav { display: none; }
}
@media only screen and (max-width: 600px) {
	.section.portfolio.pad { padding-left: 0; padding-right: 0; }

}

.carousel_list_in.owl-loaded, .modal-carousel.owl-loaded { opacity: 1; visibility: visible; }
.carousel_list_in.owl-loaded .portfolio_item, .modal-carousel .item { display: block; }

.portfolio_item { padding-right: 1px; }
.portfolio_item > a { width: 100%; height: 0; padding-top: 100%; position: relative; overflow: hidden; display: block; }
.portfolio_item .cover, .portfolio_item > a:after { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.portfolio_item > a:after {
	content: ""; opacity: 0; visibility: hidden; background-color: var(--color-primary);
	-webkit-transition: all ease .3s; transition: all ease .3s;
}
.portfolio_item > a:hover:after { visibility: visible; opacity: .85; }
.portfolio_item .text {
	position: absolute; left: 0; top: 50%; margin-top: -20px; width: 100%; height: 200px; display: table; z-index: 1; opacity: 0; visibility: hidden;
	font-size: 1.8em; text-transform: uppercase; text-align: center;
	-webkit-transition: all ease .4s; transition: all ease .4s;
}
	.portfolio_item .text > span { display: table-cell; text-align: center; vertical-align: middle; padding: 0 20px; }
	.icon_plus { display: inline-block; width: 57px; height: 57px; position: relative; }
	.icon_plus:after, .icon_plus:before { content: ""; border-radius: 2px; position: absolute; left: 0; top: 0; height: 57px; width: 3px; margin: 0 0 0 27px; background-color: #fff; }
	.icon_plus:before { height: 3px; width: 57px; margin: 27px 0 0 0; }
	
	.portfolio_item .text .icon_plus {
		display: block; margin: 0 auto 2em auto; 
		-webkit-transition: margin-bottom ease .8s; transition: margin-bottom ease .8s;
	}

.portfolio_item > a:hover .text { opacity: 1; visibility: visible; margin-top: -100px; }
.portfolio_item > a:hover .text .icon_plus { margin-bottom: .5em; }

/* Модификация под видео */
.portfolio_item.video > a { padding-top: 60%; }
.icon_play { position: absolute; left: 50%; top: 50%; z-index: 1; margin: -26px 0 0 -26px; width: 56px; height: 56px; border: 2px solid #fff; border-radius: 50%; }
.icon_play:before { content: ""; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -6px; border: solid transparent; border-left-color: #fff; border-width: 10px 0 10px 18px; }

/* Карусель - Для модальных окон */
.modal-carousel { position: relative; }
.modal-carousel, .modal-carousel .item, .modal-carousel .item > img { width: 100%; }
.modal-carousel .item { display: none; }
.modal-carousel .item:first-child, .modal-carousel .item > img { display: block; }

.owl-dots { display: none !important; }
.owl-dots .owl-dot { display: inline-block; vertical-align: top; }
.owl-dots .owl-dot span {
	backface-visibility: visible; background: #f1f1f1; border-radius: 50%;
	display: block; height: 10px; margin: 10px; transition: opacity 200ms ease 0s; width: 10px;
}
.owl-dots .owl-dot.active span { background: var(--color-primary) !important; }
.owl-dots .owl-dot:hover span { background: #dedede; }

.modal-carousel .owl-dots { display: block !important; position: absolute; left: 0; bottom: 0; margin: 0 0 20px 20px; }

/* Клиенты */
#carousel_brands { border-top: 1px solid #e1e1e1; }
.brand_item { padding: 24% 20%; text-align: center; }
.brand_item svg, .brand_item img { height: 60px; max-width: 130px; display: block; margin: 0 auto; }

#carousel_brands .carousel_nav > .carousel_next { margin-right: 6%; }
#carousel_brands .carousel_nav > .carousel_prev { margin-left: 6%; }
#carousel_brands .carousel_nav > button { color: var(--color-primary); }

/* Совместимость */
.progs > li { text-align: center; }
.progs > li img { max-width: 150px; }

@media only screen and (max-width: 767px) {
	.progs {
		margin: 0 -30px !important; white-space: nowrap; overflow: hidden; overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.progs > li { width: auto !important; padding: 0 20px; }
}
@media only screen and (max-width: 600px) {
	.progs { margin: 0 -20px !important; }
}

/* Sect7 - Соц.сети */
.social_widgets {
	padding: 4% 0; background: #f7f7f7 url(../images/soc_pattern.png) repeat;
	-webkit-background-size: 400px auto; background-size: 400px auto;
}
.social_widgets__box { background-color: #fff; padding: 30px; padding-right: 0; display: flex; }
.social_widgets__box > * { width: 25%; padding-right: 30px; }
.social_widgets__box .heading { align-self: center; margin-bottom: 0; font-weight: normal; font-size: 2rem; }

/* Виджет Инстаграма */
.instagram_widget > a { float: right; font-size: .9em; margin-top: .2em; }
.instagram_widget > a > i:before { margin: -.1em .3em 0 0; float: left; }
.instagram_widget > .title { font-weight: bold; margin-bottom: 30px; }
.instagram_widget > .title > svg { width: 32px; height: 32px; margin: -.1em .3em 0 0; vertical-align: middle; display: inline-block; }

#instafeed:after { clear: both; display: block; content: ""; }
	#instafeed > a { float: left; width: 20%; position: relative; }
	#instafeed > a:after { content: ""; background-color: var(--color-primary); opacity: 0; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
	#instafeed > a > img { display: block; width: 100%; }
	#instafeed > a:hover { z-index: 1; }
	#instafeed > a:after { transition: opacity .2s linear; }
	#instafeed > a:hover:after { opacity: .5; }

@media only screen and (max-width: 1100px) {
	.instagram_widget > .title > span { display: none; }
}
@media only screen and (max-width: 998px) {
	.social_widgets {
		z-index: 122;
		position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; width: 100%; height: 100%; padding: 160px 0 15% 0;
		background: none;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		transform: translateX(100%);
	}
	html.soc_open .social_widgets {
		opacity: 1; visibility: visible;
		transform: translateX(0); transition: all ease .4s;
	}
	.social_widgets__box .heading { margin-bottom: 30px; text-align: center; }
	.social_widgets__box { background-color: transparent; max-width: 340px; padding: 0; display: block; margin: 0 auto; }
	.social_widgets__box > * { width: auto; padding: 0; margin-bottom: 30px; }
}
@media only screen and (max-width: 600px) {
	.social_widgets { top: 50px; padding-top: 30px; background-color: #fff; }
	html.soc_open .overlay { background-color: var(--odark-bg); }
}