html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}ul{list-style: none;}input:focus,select:focus,textarea:focus{outline: none;}


@font-face {
    font-family: 'intro_regular';
    src: url('../fonts/8289-webfont.woff2') format('woff2'),
         url('./fonts/8289-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{
	font-family: 'Open Sans', sans-serif;
	background: #fff;
	font-size: 14px;
	color: #000;
}

.inner{width: 1140px; margin: 0 auto; box-sizing: border-box;}




header{font-family: 'intro_regular'; padding: 25px 0; background: #fff; position: fixed; z-index: 999; top: 0; left: 0; width: 100%;}
	header .logo{float: left;}
	header nav{float: right; margin: 20px 0 0;}
		header nav .pull{display: none;}
		header nav li{float: left; text-transform: uppercase; margin: 0 0 0 35px;}
			header nav li:first-child{margin: 0;}
			header nav li a{color: #010101; border-bottom: 1px solid #fff;}
				header nav li a:hover{border-color: #010101;}
	header.f-nav{box-shadow: 0px 5px 15px 0px rgba(48, 48, 48, 0.33);}





#promo{margin: 100px 0 0; background: url("../img/bg_promo.jpg") 50% -105px no-repeat; background-size: cover; height: 655px; box-sizing: border-box; color: #fff; padding: 170px 0 0;}
	#promo img{display: none;}
	#promo h1{text-transform: uppercase; font-family: 'intro_regular'; font-weight: normal; font-size: 48px; max-width: 460px; line-height: 1.2;}
	#promo p{font-size: 24px; margin: 25px 0 50px;}





#studio{padding: 65px 0 30px; background: #fbfbfb;}
	#studio h2{text-align: center; text-transform: uppercase; color: #e54d27; font-size: 44px; font-weight: normal; font-family: 'intro_regular'; position: relative; margin: 0 0 70px;}
	#studio h2:after{display: block; width: 36px; height: 6px; content: ''; background: #e54d27; position: absolute; top: 65px; left: 50%; margin: 0 0 0 -18px;}
	#studio .left,#studio .right{float: left; width: 49%; font-size: 16px; line-height: 1.6;}
	#studio .right{float: right;}
	#studio p{margin-bottom: 30px;}
	#studio b{color: #e54d27; font-weight: 700;}





#commander{padding: 70px 0;}
	#commander li{float: left; width: 49%; box-sizing: border-box; background: #fbfbfb; margin: 0 0 2%; padding: 28px 30px 15px 120px; min-height: 235px; position: relative;}
		#commander li:nth-child(2n){float: right;}
		#commander li .title{font-weight: 700; font-size: 18px; line-height: 1.3; margin-bottom: 20px;}
		#commander li p{font-size: 16px; line-height: 1.4;}
		#commander li img{position: absolute; top: 32px; left: 25px;}





#portfolio{padding: 70px 0; background: #fbfbfb;}
	/*#portfolio li{float: left; width: 265px; margin: 0 26px 26px 0;}*/
		/*#portfolio li:nth-child(4),#portfolio li:nth-child(8),#portfolio li:nth-child(12),#portfolio li:nth-child(16){margin-right: 0;}*/
		#portfolio li img{width: 100%; height: auto;}

	#portfolio li{width: 300px; float: left; margin: 0 120px 50px 0;}
		#portfolio video{display: block; width: 300px; height: 600px; margin: 0 auto;}
		#portfolio li:nth-child(3),#portfolio li:nth-child(6),#portfolio li:nth-child(9),#portfolio li:nth-child(12),#portfolio li.center__bl{margin: 0 0 50px;}
		#portfolio iframe{width: 300px; height: 600px; display: block; overflow: hidden; margin: 0 auto;}





#tarifs{padding: 70px 0 100px;}
	#tarifs li{float: left; width: 32%; background: #fbfbfb; position: relative; box-sizing: border-box; padding: 40px 25px; line-height: 1.3; text-align: center;}
		#tarifs li:nth-child(2){margin: 0 2%;}
		#tarifs li .title{font-size: 20px; font-family: 'intro_regular';}
			#tarifs li .title span{display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; margin: 5px 0 20px;}
		#tarifs li .price{margin-bottom: 25px;}
			#tarifs li .price span{font-size: 30px; font-family: 'intro_regular';}
				#tarifs li .price span i{font-family: "Myriad Pro"; font-style: normal;}
		#tarifs li p{margin-bottom: 13px;}
		#tarifs li a.btn-white{margin-top: 22px;}
	#tarifs li:hover{color: #fff; background: #e54d27}
	#tarifs li:hover:after,#tarifs li:hover:before{display: block;}
	#tarifs li:after,#tarifs li:before{position: absolute; left: 0; height: 25px; width: 100%; display: none; background: #e54d27; content: ''; position: absolute;}
	#tarifs li:after{top: -25px;}
	#tarifs li:before{bottom: -25px;}





#hw{padding: 70px 0 30px; background: #fbfbfb;}
	#hw ul{margin-top: 30px; display: inline-block; width: 100%;}
	#hw li{float: left; position: relative; box-sizing: border-box; width: calc(100%/3); text-align: center; margin-bottom: 60px;}
		#hw li p{margin: 0 auto; max-width: 220px; font-weight: 700; font-size: 18px; line-height: 1.3;}
		#hw li img{margin: 0 auto 25px;}
		#hw li i{position: absolute; display: block; background: url("../img/arr.png") 50% 50% no-repeat; top: 30px; right: 0; width: 19px; height: 35px;}





#counts{padding: 60px 0; background: #e54d27; color: #fff;}
	#counts li{float: left; font-size: 20px; line-height: 1.4;}
	#counts li:nth-child(2){margin: 0 30px;}
	#counts li p{float: left; position: relative; top: 21px; margin-left: 20px;}
	#counts li span{display: block; float: left; font-size: 62px; font-weight: 700;}
	#counts li span i{font-style: normal; font-family: 'intro_regular'; font-size: 72px;}





#order{padding: 70px 0; background: #fbfbfb; text-align: center;}
	#order .form{margin: 0 auto; max-width: 950px;}





#contact{padding: 70px 0;}
	#contact li{float: left; box-sizing: border-box; width: 265px; margin-right: 26px; line-height: 85px; position: relative; height: 85px; padding: 0 0 0 52px; font-size: 24px; font-weight: 700;}
	#contact li:last-child{margin: 0;}
		#contact li a{color: #000;}
		#contact li.whatsapp{background: #fbfbfb url('../img/whatsapp.png') 12px 50% no-repeat}
		#contact li.skype{background: #fbfbfb url('../img/skype.png') 12px 50% no-repeat}
		#contact li.email{background: #fbfbfb url('../img/email.png') 12px 50% no-repeat; font-size: 18px;}
		#contact li.phone{background: #fbfbfb url('../img/phone.png') 12px 50% no-repeat}





#faq{padding: 70px 0 30px; background: #fbfbfb;}
	#faq li{position: relative; box-sizing: border-box; font-size: 16px; line-height: 1.4; padding: 30px 65px 30px 118px; background: #fff url("../img/ls.png") 30px 30px no-repeat; margin-bottom: 20px;}
		#faq li .title{font-size: 18px; font-weight: 700; margin-bottom: 30px;}





#total{padding: 70px 0;}
	#total .bt p{display: inline-block; max-width: 750px;}





footer{background: #000; padding: 40px 0; text-align: center;}
	footer li{display: inline-block; margin: 0 10px;}
	footer li a:hover{opacity: 0.7; display: block;}










.bt{text-align: center; color: #e54d27; font-size: 40px; font-weight: 700; position: relative; margin: 0 0 70px;}
	.bt p{font-size: 24px; font-weight: 400; color: #000; line-height: 1.5; margin: 70px 0 0;}
	.bt:after{display: block; width: 36px; height: 6px; content: ''; background: #e54d27; position: absolute; top: 65px; left: 50%; margin: 0 0 0 -18px;}









.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form textarea{width: 49%; margin-bottom: 20px; font-size: 18px; float: left; background: #fff; border: none; height: 75px; padding: 0 20px;}
	.form textarea{height: 215px; padding: 20px; width: 100%; margin-bottom: 40px; resize: none;}
	.form .btn-orange:hover{color: #e54d27}






/* Slider */
.slick-slider{position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}

	.slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
	.slick-list:focus{outline: none;}
	.slick-list.dragging{cursor: pointer; cursor: hand;}

	.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

	.slick-track{position: relative; top: 0; left: 0; display: block;}
	.slick-track:before, .slick-track:after{display: table; content: '';}
	.slick-track:after{clear: both;}
	.slick-loading .slick-track{visibility: hidden;}
	.slick-slide{display: none; float: left; height: 100%; min-height: 1px;}
	[dir='rtl'] .slick-slide{float: right;}
	.slick-slide img{display: block;}
	.slick-slide.slick-loading img{display: none;}
	.slick-slide.dragging img{pointer-events: none;}
	.slick-initialized .slick-slide{display: block;}
	.slick-loading .slick-slide{visibility: hidden;}
	.slick-vertical .slick-slide{display: block; height: auto; border: 1px solid transparent;}
	.slick-arrow.slick-hidden {display: none;}





	.slick-loading .slick-list{background: none;}

	.slick-prev,.slick-next{border: none; font-size: 0; line-height: 0; position: absolute; top: 0%; display: block; width: 66px; height: 100%; padding: 0; cursor: pointer; margin-top: 0; opacity: 1;}

	.slick-prev,.slick-next{display: block!important; z-index: 10;}
	.slick-prev{background: #fbfbfb url("../img/arr_l.png") 50% 50% no-repeat; left: 0;}
	.slick-next{background: #fbfbfb url("../img/arr_r.png") 50% 50% no-repeat; right: 0;}

	.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus{color: transparent; outline: none; opacity: 1;}
	.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before{opacity: 1;}
	.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before{opacity: .25;}
	.slick-prev:before, .slick-next:before{display: none;}
	.slick-prev{display: none;}
	.slick-next{display: none;}

	.slick-dots{position: absolute; bottom: 0; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center;}
	.slick-dots li{position: relative; display: inline-block; margin: 0 7px; cursor: pointer;}
	.slick-dots li button{font-size: 0; line-height: 0; display: block; box-sizing: border-box; cursor: pointer; color: transparent; border: none; outline: none; background: #fff; border-radius: 50%; padding: 0; width: 20px; height: 20px;}
	.slick-dots li button{width: 20px; height: 20px; background: #f3faff; border: 2px solid #ffa200; box-sizing: border-box;}
	.slick-dots li.slick-active button{background: #ffa200}






.box__modal{display: none;}
	.box__modal .inn{text-align: center; padding: 20px 0 40px;}
	.box__modal p{font-size: 18px; line-height: 1.5;}
	.box__modal input[type="text"],.box__modal input[type="email"],.box__modal input[type="tel"],.box__modal textarea{background: #e9e9e9}
	.box__modal .form{max-width: 550px; margin: 0 80px;}
	.fancybox-close-small:after{color: #e54d27!important}






.clearfix{clear: both;}
.center{display: inline-block; width: 100%; text-align: center;}


a{text-decoration: none; transition: all 0.5s ease-out;}
	a:hover{transition: all 0.5s ease-out;}
a:focus{outline: none;}

img{display: block;}


.btn{display: inline-block; text-align: center; cursor: pointer; border: none; transition: all 0.5s ease-out; box-sizing: border-box;}
	.btn:hover{transition: all 0.5s ease-out;}


	input.btn{line-height: normal!important;}


	.btn-orange{color: #fff; font-size: 18px; font-weight: 700; background: #e54d27; width: 260px; height: 60px; line-height: 58px; border: 1px solid #e54d27; box-shadow: 0px 25px 25px 0px rgba(48, 48, 48, 0.33);}
		.btn-orange:hover{background: none; box-shadow: none;}


	.btn-white{color: #e54d27; font-size: 18px; font-weight: 700; background: #fff; width: 260px; height: 60px; line-height: 58px; border: 1px solid #fff; box-shadow: 0px 25px 25px 0px rgba(48, 48, 48, 0.33);}
		.btn-white:hover{background: #e54d27; box-shadow: none; border-color: #fff; color: #fff;}


input,textarea,select{-webkit-appearance: none; box-sizing: border-box; font-family: 'Open Sans', sans-serif;}

/*responsive*/

@media screen and (max-width: 1180px){
	.inner{width: 100%; padding: 0 4%;}

	#studio h2, .bt{font-size: 24px; margin-bottom: 40px;}
	#studio h2:after, .bt:after{display: none;}
	.bt p{font-size: 16px; margin-top: 20px;}



	header{padding: 10px 0;}
	header nav{margin: 10px 0 0;}
	header nav .pull{display: block; width: 30px; height: 30px; background: url("../img/pull.png") 50% 50% no-repeat; background-size: 100%;}
	header nav ul{display: none; position: absolute; top: 70px; left: 0; width: 100%; z-index: 1111; border-top: 1px solid #e54d27;}
	header nav ul li{float: none; margin: 0;}
	header nav ul li a{display: block; padding: 12px 3%; background: #fff; border-bottom: 1px solid #e54d27;}


	#promo{margin: 70px 0 0; background: #1a2e7d; height: auto; padding: 40px 0; text-align: center;}
	#promo img{display: block; margin: 30px auto 0; max-width: 100%; height: auto;}
	#promo h1{font-size: 24px; max-width: 100%;}


	/*#portfolio li{width: 23%; margin: 0 1% 2%!important}*/
	#portfolio{text-align: center;}
	#portfolio li{display: inline-block; float: none; margin: 0 0 2%!important;}


	#tarifs{text-align: center;}
	#tarifs li{float: none; display: inline-block; width: 330px; margin: 0 1% 2%!important}


	#counts{text-align: center;}
	#counts li{width: 100%; max-width: 340px; float: none; margin: 10px auto!important; font-size: 16px; display: inline-block; text-align: left;}
	#counts li span i{font-size: 40px;}
	#counts li p{top: 30px;}


	#contact{text-align: center;}
	#contact li{float: none; margin: 10px!important; display: inline-block; text-align: left;}
}





@media screen and (max-width: 768px){
	#studio h2, .bt{margin-bottom: 20px;}

	#studio,#commander,#portfolio,#tarifs,#hw,#counts,#order,#contact,#faq{padding: 30px 0;}
	#total{padding: 30px 0;}
	#studio .left, #studio .right{float: none!important; width: 100%; font-size: 14px;}


	#commander li{min-height: 0; float: none!important; width: 100%;}
	#commander li .title{font-size: 15px;}
	#commander li p{font-size: 14px;}


	/*#portfolio li{width: 48%; margin: 0 1% 2%!important}*/


	#hw li{float: none; width: 100%;}
	#hw li i{display: none; margin: 15px 0;}


	#tarifs li{width: 100%;}
	#tarifs li a.btn-white{max-width: 100%;}


	.form input{width: 100%!important; float: none!important;}

	#faq li{background: #fff; padding: 25px;}



	footer{padding: 15px 0;}
}

/*responsive*/