/*
	Проект: Rocketa Video
	Технический специалист: Андрей Литвинов (FRO1D) - https://fl.ru/users/FRO1D/
	Дата: 01.12.2014
	Версия: 1.0
*/

/**************** RESET *****************************/

html, body, div, span, h1, h2, h3, h4, h5, h6, a, p, img, ol, ul, li,
form, input, button, textarea, label, fieldset, legend, blockquote,
table, caption, tbody, tfoot, thead, tr, th, td, sub, sup, object, iframe  {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
* {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
*:focus{outline: 0;}
b,strong{font-weight: 700;}
i,em{font-style: italic;}
ul {list-style: disc;}
ol {list-style: decimal;}
table {border-spacing: 0; border-collapse: collapse;}
td, th {text-align: center; vertical-align: middle;}
a, [type="submit"], [type="button"], label, select {cursor: pointer;}
a {color: inherit; text-decoration: none;}
textarea {resize: none; overflow: auto;}
sup {vertical-align: super;}
sub {vertical-align: sub;}
aside, header, footer, article, section, nav {display: block; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
html {-webkit-text-size-adjust: none;}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, input[type="submit"] {-webkit-appearance: none;}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color:#787878;}
input::-moz-placeholder, textarea::-moz-placeholder{color:#787878;}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {color:#787878;}
input.placeholder, textarea.placeholder{color:#787878;}
	input.error::-webkit-input-placeholder, textarea.error::-webkit-input-placeholder{color:#f00;}
	input.error::-moz-placeholder, textarea.error::-moz-placeholder{color:#f00;}
	input.error::-ms-input-placeholder, textarea.error::-ms-input-placeholder {color:#f00;}
	input.error.placeholder, textarea.error.placeholder{color:#f00;}
	input.error {color: #f00; border-color: #f00;}


/**************** GLOBAL *****************/

html {background: #fff; color: #474747; font: 14px/18px Roboto;}
	#global_wrapper {overflow: hidden; position: relative;}
		.wrapper {margin: 0 auto; position: relative; width: 945px; height: 100%;}

.non-scroll {overflow: hidden !important; margin-right: 17px !important;}
.clear {clear: both;}
.table {display: table; width: 100%; height: 100%;}
.cell {display: table-cell; height: 100%; vertical-align: middle;}
.icon {display: block; position: relative; background: url(../images/icons.png) -9999px 0 no-repeat;}
.logo {display: block; width: 213px; height: 87px; background: url(../images/logo.png) no-repeat;}
.justify {text-align: justify; line-height: 0; position: relative;}
	.justify:after {content:''; display: inline-block; width: 100%; height: 0;}

	/*------ Headers  ------*/
	h1, h2, h3, h4, h5, h6 {text-align: center;}
	h1 {font: 300 48px/50px Roboto; color: #fff; text-align: left;}
		h1 span {display: block; font: 100 42px/50px Roboto; color: #ffe400;}
	h2 {font: 300 40px/40px Roboto; color: #424242; margin-bottom: 18px;}
	h3 {}

	/*------ Buttons  ------*/
	.button {display: block;}
		.button:hover {}
		.button:active {}

	/*------ Forms  ------*/
	form {background: rgba(0,0,0,0.6); border-radius: 12px; padding: 38px 32px 29px; position: relative; behavior:url(/PIE/PIE.php);}
		input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea[name="client_message"] {display: block; width: 100%; background: #fff; font: 300 21px/25px Roboto; padding: 12px 16px; margin-bottom: 20px;}
		textarea[name="client_message"] {height: 123px;}
		input[type="submit"] {width: 100%; height: 51px; background: #ce0606; border-bottom: 4px solid #b90606; font: 300 21px/47px Roboto; color: #fff; text-align: center; margin-top: 39px; position: relative;}
			input[type="submit"]:hover {background: #a80101;}
			input[type="submit"]:active {top: 1px;}


/**************** HEADER *****************/

header {width: 100%; height: 134px; background: url(../images/backgrounds/header_bg.png) center top repeat-x; margin: auto; position: absolute; left: 0; right: 0; top: 0; z-index: 10;}
header .wrapper {padding: 12px 0;}
	header .logo {float: left;}
	header .slogan {font: 300 16px/21px Roboto; color: #777; float: left; margin: 16px 22px;}
	header .choose_lang {float: right; margin: 22px 14px 0 0;}
		header .choose_lang a {display: block; width: 17px; height: 12px; background: url(../images/icons.png) no-repeat; margin-bottom: 5px;}
		header .choose_lang #choose_lang_ru {background-position: -834px -53px;}
			header .choose_lang #choose_lang_ru.active, header .choose_lang #choose_lang_ru:hover {background-position: -815px -53px;}
		header .choose_lang #choose_lang_en {background-position: -872px -53px;}
			header .choose_lang #choose_lang_en.active, header .choose_lang #choose_lang_en:hover {background-position: -853px -53px;}
	header .callback {float: right; color: #ff4343; text-align: right; padding-top: 18px;}
		header .callback .phone {display: block; font: 500 33px/33px Roboto; }
		header .callback .mail {font: 500 18px/18px Roboto;}
		header .callback .skype {font: 500 18px/18px Roboto; position: relative; left: -3px;}
		header .callback .skype:before {content:''; display: block; width: 15px; height: 15px; background: url(../images/icons.png) -798px -53px no-repeat; position: absolute; left: -20px; top: 6px;}
			header .callback a:hover {color: #ee2c2c;}


/**************** TOP FORM *****************/

#top_form {height: 739px; background: url(../images/backgrounds/top_form_bg.jpg) center top no-repeat fixed;}
#top_form .wrapper {padding: 180px 0 0;}
	#top_form h1 {float: left;}
	#top_form p {width: 270px; float: right; margin: 10px 20px 0 0; font: 300 20px/27px Roboto; color: #fff; position: relative;}
	#top_form p:before {content:''; display: block; width: 2px; height: 43px; background: #363637; margin: auto; position: absolute; top: 0; bottom: 0; left: -23px;}
		#top_form p b {font-weight: 500;}
	#top_form form {width: 320px; border-radius: 0 12px 12px 0; float: right; margin-top: 60px;}
	#top_form .video {width: 770px; height: 424px; padding: 32px 0; background: url(../images/backgrounds/top_form_video_bg.png) no-repeat; position: absolute; left: -69px; bottom: -12px;}
		#top_form .video iframe {display: block; width: 558px; height: 314px; margin: auto;}


/**************** BENEFITS *****************/

#benefits {}
#benefits .wrapper {padding: 65px 0 25px;}
#benefits .wrapper:after {content:''; display: block; width: 1920px; height: 122px; background: url(../images/backgrounds/benefits_bottom.png) center top no-repeat; position: absolute; left: -487px; bottom: -121px;}
	#benefits p {font: 300 20px/24px Roboto; color: #808080; text-align: center; margin-bottom: 35px;}
	#benefits [class*="item"] {width: 157px; float: left; font: 500 14px/18px Roboto; text-align: center;}
		#benefits [class*="item"] .icon {width: 131px; height: 131px; margin: 0 auto 14px;}
		#benefits [class*="item"] .icon:hover {
			-webkit-transition: all 0.3s ease-out 0;
			-moz-transition: all 0.3s ease-out 0;
			-o-transition: all 0.3s ease-out 0;
			transition: all 0.3s ease-out 0;
			-moz-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
			#benefits .item-1 .icon {background-position: 0 0;}
			#benefits .item-2 .icon {background-position: -133px 0;}
			#benefits .item-3 .icon {background-position: -266px 0;}
			#benefits .item-4 .icon {background-position: -399px 0;}
			#benefits .item-5 .icon {background-position: -532px 0;}
			#benefits .item-6 .icon {background-position: -665px 0;}


/**************** EXAMPLES *****************/

#examples {background: url(../images/backgrounds/examples_bg.jpg) repeat;}
#examples .wrapper {width: 979px; padding: 130px 0 55px;}
	#examples h2 {margin-bottom: 25px;}
	#examples .type_buttons {width: 430px; margin: 0 auto 40px;}
		#examples .type_buttons a {display: block; float: left; width: 207px; height: 47px; margin: 0 4px; border-top: 4px solid #ffbebe; font: 500 21px/38px Roboto; color: #fc8b8b; text-align: center;}
		#examples .type_buttons a:hover {border-top-color: #c81b1b;}
		#examples .type_buttons a.active {background: #c81b1b; border-top-color: #c81b1b; font-weight: 300; color: #fff;}
	#examples .content .item {display: none;}
	#examples .video, #examples .visualisation {width: 292px; height: 292px; float: left; margin: 17px; position: relative; overflow: hidden;}
		#examples .video img, #examples .visualisation img {display: block; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
		#examples .video iframe {display: none;}
		#examples .video a, #examples .visualisation a {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
	#examples p.more {text-align: center; margin-top: 20px;}
		#examples a.more {font: 500 26px/30px Roboto; text-transform: uppercase; border-bottom: 2px dashed #474747;}
			#examples a.more:hover {border-bottom-color: transparent;}
	#examples .more_video, #examples .more_3D {display: none;}


/**************** PRICE *****************/

#price {background: #f4f4f4;}
#price .wrapper {padding: 23px 0 58px;}
	#price .items {}
		#price .items [class*="item"] {display: inline-block; vertical-align: top; width: 300px; height: 898px; padding: 15px 12px; background: #fff; border-top: 4px solid transparent; position: relative;}
			#price .items [class*="item"] img {display: block; width: 263px; height: 258px;}
			#price .items [class*="item"] .title {font: 500 24px/24px Roboto; text-align: center; position: relative; top: -80px;}
			#price .items [class*="item"] .for {height: 100px; font: 18px/24px Roboto; color: #e68852; text-align: center; margin-bottom: 14px;}
			#price .items [class*="item"] p {font: 15px/24px Roboto; color: #545454; text-align: center; letter-spacing: -0.1px; padding: 4px 0; border-bottom: 1px solid #e6ebee;}
				#price .items [class*="item"] p:last-of-type {border-bottom: none;}
			#price .items [class*="item"] .price {width: 194px; height: 51px; background: #ccc; border-bottom: 4px solid #bbb; font: 500 28px/47px Roboto; color: #fff; text-align: center; margin: auto; position: absolute; left: 0; right: 0; bottom: -19px;}

		#price .items .item-1 {border-top-color: #dd473a;}
			#price .items .item-1 .title {color: #dd473a;}
			#price .items .item-1 .price {background: #dd473a; border-bottom-color: #d70748;}

		#price .items .item-2 {border-top-color: #ffb32e;}
			#price .items .item-2 .title {color: #ffb32e;}
			#price .items .item-2 .price {background: #ffb32e; border-bottom-color: #ff9c2c;}

		#price .items .item-3 {border-top-color: #6da3de;}
			#price .items .item-3 .title {color: #6da3de;}
			#price .items .item-3 .price {background: #6da3de; border-bottom-color: #5a91d0;}


/**************** REVIEWS *****************/

#reviews {}
#reviews .wrapper {padding: 40px 0 55px;}
	#reviews h2 {margin-bottom: 10px;}
	#reviews p {font: 300 20px/24px Roboto; color: #808080; text-align: center; margin-bottom: 45px;}
	/*------ Slider ------*/
	#reviews .fslider_big_wrapper {cursor: url(../images/grab.png) 8 8, move; margin: auto;}
		#reviews .fslider > li {width: 944px; height: 420px; margin-right: 1px;}
			#reviews .fslider > li .left, #reviews .fslider > li .right {width: 50%; float: left;}
			#reviews .fslider > li .left {padding-right: 30px;}
			#reviews .fslider > li .right {padding-left: 30px;}
				#reviews .fslider > li img {display: block; width: 131px; height: 131px; border-radius: 50%; margin-bottom: 5px;}
					#reviews .fslider > li .left img {float: right;}
				#reviews .fslider > li b {display: block; font: 500 20px/24px Roboto; color: #000;}
					#reviews .fslider > li .left b {text-align: right;}
				#reviews .fslider > li span {display: block; font: 300 italic 16px/20px Roboto; color: #808080;}
					#reviews .fslider > li .left span {text-align: right;}
				#reviews .fslider > li .text {height: 190px; font: 300 14px/18px Roboto; color: #fff; padding: 18px 20px; background: #c81b1b; margin-top: 16px;}
	/* Arrows */
	#reviews .fslider_big_wrapper a.fslider_arrow {width: 25px; height: 51px; background: url(../images/icons.png) no-repeat; top: 40px; opacity: 0.7;}
	#reviews .fslider_big_wrapper a.fslider_arrow:hover {opacity: 1;}
		#reviews .fslider_big_wrapper a.fslider_arrow.prev {left: 0; background-position: -798px 0;}
		#reviews .fslider_big_wrapper a.fslider_arrow.next {right: 0; background-position: -825px 0;}


/**************** BOTTOM FORM *****************/

#bottom_form {height: 768px; background: url(../images/backgrounds/bottom_form_bg.jpg) center top no-repeat;}
#bottom_form .wrapper {padding: 40px 0 0;}
	#bottom_form h2 {font: 300 48px/50px Roboto; color: #fff; margin: 0;}
		#bottom_form h2 span {display: block; font: 100 42px/50px Roboto; color: #ffe400;}
	#bottom_form .separator {display: block; width: 530px; height: 2px; background: #80888a; margin: 20px auto;}
	#bottom_form p {font: 300 20px/24px Roboto; color: #fff; text-align: center; margin-bottom: 40px;}
	#bottom_form form {width: 605px; margin: auto; background: rgba(8, 16, 23, 0.6);}
		#bottom_form form .left_col {float: left; width: 250px;}
		#bottom_form form .right_col {float: right; width: 250px;}
			#bottom_form form input[type="submit"] {width: 250px; height: 50px; font: 300 21px/46px Roboto; margin: auto;}


/**************** FOOTER *****************/

footer {height: 107px; background: url(../images/backgrounds/footer_bg.png) center top repeat-x; margin-top: -107px;}
footer .wrapper {padding: 40px 0 0;}
	footer .copyright {display: block; float: left; font: 300 16px/21px Roboto; color: #fff;}
	footer .social {float: left; margin: 9px 20px;}
		footer .social a {
			display: block; width: 30px; height: 30px; float: left; margin: 0 5px; background: url(../images/icons.png) -9999px 0 no-repeat;
			-webkit-transition: all 0.3s ease-out 0s;
			-moz-transition: all 0.3s ease-out 0s;
			-o-transition: all 0.3s ease-out 0s;
			transition: all 0.3s ease-out 0s;
		}
		footer .social a:hover {
			-moz-transform: scale(1.05);
			-webkit-transform: scale(1.05);
			-o-transform: scale(1.05);
			-ms-transform: scale(1.05);
			transform: scale(1.05);
		}
			footer .social a.vkontakte {background-position: -798px -70px;}
			footer .social a.facebook {background-position: -830px -70px;}
			footer .social a.youtube {background-position: -798px -102px;}
			footer .social a.vimeo {background-position: -830px -102px;}
	footer .logo {width: 136px; height: 55px; background: url(../images/bottom_logo.png) no-repeat; float: right; margin-top: -5px;}



/**************** MODAL WINDOWS *****************/

#overlay_modal {display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 1000;}
#modals {display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1001; overflow: auto; -webkit-transform: translateZ(0px); -webkit-overflow-scrolling: touch;}
[id^="modal_"], [id^="modal-"] {display: none; margin: auto; position: absolute; left: 0; right: 0; top: 50px; z-index: 1005;}
	/*------ Close button ------*/
	.modal_close {width: 20px; height: 20px; background: url(../images/close_modal.png) 0 0 no-repeat; position: absolute; top: -20px; right: -25px; z-index: 1010;}
		.modal_close:hover {background-position: 0 -23px;}
		.modal_close:active {background-position: 0 -46px;}
	/*------ Callback ------*/
	#modal_callback_form {}
	/*------ Request ------*/
	#modal_request_form {}
	/*------ Example ------*/
	#modal_example {width: 920px; height: 405px; top: 0; bottom: 0;}
		#modal_example iframe {display: block; width: 500px; height: 300px; float: left;}
		#modal_example form {width: 420px; float: right; background-color: transparent; padding: 0 20px;}
			#modal_example form b {display: block; font: 500 26px/24px Roboto; color: #05bcc3; text-align: center; margin-bottom: 30px;}
			#modal_example form input[type="submit"] {width: 250px; margin: auto;}
		#modal_example .info {margin-top: -20px;}
			#modal_example .info p {font: 300 16px/24px Roboto; color: #fff;}
				#modal_example .info p span {color: #05bcc3; font-weight: 400;}
	/*------ Success ------*/
	#modal_success {width: 400px; height: 300px; top: 0; bottom: 0; background: #05bcc3; color: #fff; border-radius: 12px; behavior:url(/PIE/PIE.php);}
		#modal_success h3 {font: 500 50px/70px Roboto; text-transform: uppercase;}
		#modal_success h4 {font: 24px/24px Roboto;}