html { height:100%; margin: 0; padding: 0;}

    article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, address {display: block;}    
	audio, canvas {display: inline-block;}
	video {display: block;}
	audio:not([controls]) {display: none; height: 0;}
    
	address {font-style: normal;}
    
    ul, ol, li, form, fieldset, a, img, div, figure, address { margin: 0; padding: 0; border: 0; }
    
    ul {list-style: inside;}
    ol {list-style: inside;}
	
    ul li {list-style: none;}
    ol li {list-style: decimal inside;}
    
    ol {padding: 10px 0;}
    ol li {margin: 0 0 20px 0;}
	
    body {height:100%; position: relative; background: #fff;}
    body, td, input, textarea {margin: 0px; padding: 0px; color: #000; font: bold 16px MuseoSans;}
    
    body * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    
    a {text-decoration: none; color: inherit;}
    a:hover {text-decoration: none;}
    
	h1 {font: bold 26px MuseoSans; color: #000; margin: 0 0 20px 0; padding: 0;}
	h2 {font: bold 20px MuseoSans; color: #333; margin: 0 0 20px 0; padding: 0; text-align: center;}
	h3 {font: bold 16px MuseoSans; color: #333; margin: 0 0 20px 0; padding: 0;}
	
	p {margin: 0 0 20px; padding: 0; line-height: 26px;}
	
	table {border-collapse: collapse; border-spacing: 0;}
	
	.cbc {position: relative; height: 100%; overflow: hidden; min-width: 320px; margin: 0 auto;}
	
	@media (max-width: 1000px) {
		.cbc {height:auto; min-height: 100%;}
	}
	
	
/* page content */
  
	
  /* structure */	
	
	.content_box {position: relative; height: 100%; min-height: 450px; margin-left: 360px;}
	
	.r_fix_col {width: 360px; position: fixed; left: 0; top: 0; bottom: 0; min-height: 450px;}
	
	header {padding: 50px 0; width: 360px; position: fixed; left: 0; top: 0;}
	header .logo_box {text-align: center; margin-bottom: 30px;}
	header .slogan {font-size: 22px; line-hieght: 28px; padding: 0 50px;}
	header .decor_box {text-align: right; padding: 50px 10px 0 0;}
	
	
	footer {width: 360px; position: fixed; bottom: 0; left: 0; z-index: 500; color: #fff; padding-top: 10px;}
	footer .email {margin: 0 0 25px 50px; padding: 0 0 1px 53px; font: 300 20px Ubuntu; color: #168cc9; background: url(../img/ico_mail.png) 0 bottom no-repeat;}
	footer .phone_box {color: #fff; padding: 27px 0 30px 110px; background: url(../img/ico_phone.png) #168cc9 40px center no-repeat;}
	footer .phone_box .phone {font-size: 24px; margin-bottom: 6px; line-hieght: 1;}
	footer .phone_box .hint {font: 300 15px Ubuntu;}
	
	
	@media (max-height: 850px)  {
		.content_box {margin-left: 300px;}
		
		header,
		footer {width: 300px;}
		
		header {padding: 30px 0 40px;}
		header .slogan {font-size: 18px; line-hieght: 24px; padding: 0 50px;}
		header .decor_box img {width: 250px;}
		
		
		footer .email {margin: 0 0 25px 30px; background: url(../img/ico_mail.png) 0 bottom no-repeat;}
		footer .phone_box {padding: 27px 0 30px 85px; background-position: 20px center;}
		footer .phone_box .phone {font-size: 20px;}
		footer .phone_box .hint {font-size: 14px;}
		
	}
	
	@media (max-width: 1100px) {
		.content_box {margin-left: 300px;}
		
		header,
		footer {width: 300px;}
		
		header .slogan {font-size: 18px; line-hieght: 24px; padding: 0 50px;}
		header .decor_box img {width: 250px;}

		footer .email {margin: 0 0 25px 30px;}
		footer .phone_box {padding: 27px 0 30px 85px; background-position: 20px center;}
		footer .phone_box .phone {font-size: 20px;}
		footer .phone_box .hint {font-size: 14px;}
		
	}	
	
	
	@media (max-height: 700px) {
		header .decor_box {display: none;}
	}
	
	
	@media (max-width: 1000px) {
		header,
		footer {position: static; width: auto;}
		
		header {height: 130px; padding: 20px 20px 0; text-align: center;}
		header .logo_box,
		header .slogan {display: inline-block; vertical-align: middle; margin: 0; text-align: left;}
		
		header .slogan {padding: 0 0 0 20px;}
		
		header .decor_box {display: none;}

		footer {height: 175px; padding-top: 20px; position: absolute; bottom: 0; left: 0; width: 100%;}
		
		.content_box {margin-left: 0; position: absolute; top: 130px; bottom: 175px; left: 0; width: 100%; height: auto;}
	}
	
	@media (max-width: 640px) {
		header {height: auto; text-align: center;}
		header .slogan {padding: 20px 0; text-align: center;}
		footer {position: static;}
		.content_box {position: static; height: 640px;}
	}
	
	
  /* content */	
	
	.cover_list {position: absolute; height: 100%; width: 100%;}
	.cover_list * {-o-transition:all 0.5s linear; -ms-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -webkit-transition:all 0.5s linear; transition:all 0.5s linear;}
	.cover_list .item {overflow: hidden; float: left; position: relative; height: 100%; width: 25%; border-left: 1px solid #e9e9e9;}
	.cover_list .item:after {opacity: 0; content: " "; position: absolute; left: 0; top: 160px; bottom: 0; width: 100%; background: none; transition : all .4s linear;}
	.cover_list .item figure {position: absolute; overflow: hidden; left: -10px; right: -10px; height: 100%; filter:  blur(0) grayscale(1); -webkit-filter:  blur(0) grayscale(1); background-size: cover !important;}
	.cover_list .title {position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 160px; padding-top: 70px; background: #f7f7f7;}
	.cover_list h3 {text-align: center; text-transform: uppercase; color: #808080;}
	
	.cover_list .descr {opacity: 0; position: relative; z-index: 200; margin-top: 137px; text-align: center;}
	.cover_list .descr .more {display: inline-block; width: 240px; height: 80px; font-size: 16px; line-height: 40px; text-transform: uppercase; color: #fff; text-align: center; background: #168cc9;}
	.cover_list .descr .more:hover {background: #2172e3}
	.cover_list .descr ul {display: inline-block; width: 350px; padding-top: 45px; color: #fff; padding-left: 10px; font-weight: normal; font-size: 16px; }
	.cover_list .descr li {position: relative; text-align: left; margin-bottom: 20px; padding-left: 25px;}
	.cover_list .descr li:after {content: " "; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}

	.cover_list .item.sm {width: 15%;}
	.cover_list .item.active {width: 55%;}
	.cover_list .item.active:after {opacity: 1; background: -moz-linear-gradient(top,  rgba(64,174,220,0.9) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,144,190,0.9)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  rgba(37,144,190,0.9) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  rgba(64,174,220,0.9) 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  rgba(64,174,220,0.9) 0%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to bottom,  rgba(64,174,220,0.9) 0%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e640aedc', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */}
	.cover_list .item.active figure {filter: blur(5px) grayscale(0); -webkit-filter: blur(5px) grayscale(0);}
	
	.cover_list .item.active .title {background: #f5f5f5;}
	.cover_list .item.active h3 {color: #77c4e4;}
	.cover_list .item.active .descr {opacity: 1;}
	
	
	@media (max-width: 1100px) {
		.cover_list h3 {font-size: 14px;}
	}
	
	@media (max-width: 1000px) {
		.cover_list .item:after {top: 80px;}
		.cover_list .title {height: 80px; padding-top: 30px;}
		.cover_list .descr {margin-top: 57px;}
	}
	
	
	@media (max-width: 640px) {
		.cover_list {position: static;}
		.cover_list .item {width: 100%; height: 25%; border-left: none; border-top: 1px solid #e9e9e9;}
		.cover_list .item.sm,
		.cover_list .item.active {width: 100%;}
		.cover_list .item .title {height: 100%; background: rgba(0,0,0,0.3);}
		.cover_list .item .title h3 {color: #fff;}	
		
		.cover_list .item:after {display: none;}
		.cover_list .item.active .title {background: rgba(97,200,238,0.5);}
		.cover_list .descr {margin-top: 80px;}
		.cover_list .descr ul {display: none;}
	}
	
	
	
  /* plugins */
	
	
	
  /* support class style */	
	
	.clear {clear: both; float: none !important;}
	.fleft {float: left !important;}
	.fright {float: right !important;}
	
	.cf:before,
	.cf:after {content: " "; /* 1 */ display: table; /* 2 */}
	.cf:after {clear: both;}	
	
	.disp_none {display: none;}
	
	.inl_bottom_box > * {display: inline-block; vertical-align: bottom;}
	.middle_box > * {display: inline-block; vertical-align: middle;}
	.inl_block {display: inline-block;}
	
	
	.pos_right {text-align: right !important;}
	.pos_center {text-align: center;}
	.pos_left {text-align: left;}
	.pos_justify {text-align: justify;}