/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/*main*/

ul,li{
	list-style:none;
}


html,body{
	height: 100%;
	background: rgb(51, 54, 63);
	font-family: 'Roboto', sans-serif;
	color: #fff;
}

a {
			text-decoration: none;
-webkit-transition: all 150ms ;
	-moz-transition: all 150ms ;
	-ms-transition: all 150ms ;
	-o-transition: all 150ms ;
	transition: all 150ms ;

}

h1{
	font-weight: normal;
    font-size: 40px;
	font-family: 'Roboto Condensed', sans-serif;
	padding-bottom: 12px;
	color: #fff;
	text-transform:uppercase;
}

.wrapper1{
	min-height: 100%;
	margin-bottom:-120px;
	overflow: hidden;
}

.headers-section{

}

.wrapper1 .auto-height{
	height: auto;
}

.wrapper2{
	padding-bottom:120px;
}


.content-holder{
	width: 960px;
	margin: 0 auto;
	position: relative;
	-webkit-transition: width .2s linear .2s, height .2s linear .2s;
	-moz-transition: width .2s linear .2s, height .2s linear .2s;
}

.content-holder:after{
	content:'';
	display: block;
	clear:both;
}


.headers-section{
	position: relative;
	z-index:100;
}


.headers-section .content-holder{
	background: url(../images/header.png) 50%  50%  no-repeat;
	height: 145px;
}

.headers-section .content-holder:before{
	content: '';
	display: block;
	position: absolute;
	left:-300%;
	right: 100%;
	background: url(../images/header_wrapper_left.png) 50% 50%  repeat-x;
	height: 145px;
	top: 0px;
}

.headers-section .content-holder:after{
	content: '';
	display: block;
	position: absolute;
	right:-300%;
	left: 100%;
	background: url(../images/header_wrapper_right.png) 50%  50%  repeat-x;
	height: 145px;
	top: 0px;
}

.open-mobile-menu,
.main-menu li.mobile{
	display: none;
}

.top-logo {
	position: absolute;
    left: 78px;
    top: 28px;
}
.top-logo img {
	vertical-align: middle;
}

.main-menu{
	position: absolute;
	left:404px;
	top: 0;

}

.main-menu li {
	display: table-cell;
	float:left;
	vertical-align: middle;
}

.main-menu li a{
	display: block;
	height: 71px;
		display: inline-block;
		text-transform: uppercase;
	padding: 0 28px;
	line-height: 71px;
	color: rgb(51, 51, 59);
	text-align: center;
	font-size: 13px;
}

.main-menu li a:hover{
	background: #fff;
}

.main-menu li a.selected{
	background: #fff;
	cursor: default;
}

.content-section .content-holder{
	margin-top: -75px;
}

.content-section h1{
	padding-left: 455px;
    padding-top: 70px;
    margin-bottom: -70px;
}

.main-image{
	vertical-align: middle;
}

.content-style-1{
	min-height: 550px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#32c0ff+0,006fa1+100 */
	background: #32c0ff; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #32c0ff 0%, #006fa1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#32c0ff), color-stop(100%,#006fa1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  #32c0ff 0%,#006fa1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  #32c0ff 0%,#006fa1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  #32c0ff 0%,#006fa1 100%); /* IE10+ */
	background: linear-gradient(135deg,  #32c0ff 0%,#006fa1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32c0ff', endColorstr='#006fa1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.fono{
	background: url(../images/canvas.png) 0 -1px no-repeat;
	height: 1702px;
	position: absolute;
	top: 0;
	left:0;
	width:100%;

}

.content-style-1:after,
.list-columns:after,
.content-style-3:after{
	content:'';
	display: block;
	clear:both;
}

.content-style-2{
		padding-top: 44px;
			padding-left: 80px;
	min-height: 204px;
	padding-bottom:52px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4e4f53+0,707075+100 */
background: #4e4f53; /* Old browsers */
background: -moz-linear-gradient(45deg,  #4e4f53 0%, #707075 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#4e4f53), color-stop(100%,#707075)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #4e4f53 0%,#707075 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #4e4f53 0%,#707075 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #4e4f53 0%,#707075 100%); /* IE10+ */
background: linear-gradient(45deg,  #4e4f53 0%,#707075 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4f53', endColorstr='#707075',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.swiper-pagination-bullet:first-child {

    background: #fff!important;
}

.swiper-pagination-bullet:last-child {

    background: #2c2c2c!important;
}



.swiper-pagination-bullet {
       width: 14px !important;
    height: 14px !important;
    opacity: 1!important;
}

.product-column{
	float: left;
	width: 420px;
	padding-left:36px;
	padding-top: 38px;
	padding-bottom: 50px;

}

.description-column{
	float: left;
	width: 454px;
	color: #fff;
	padding-top:76px;
	padding-right: 50px;
	padding-bottom: 100px;
	position: relative;
	
}

.auto-height .buy-button{
	bottom: 30px;
}

.buy-button{
	display: inline-block;
    position: absolute;
    bottom: -20px;
    left: 0px;
    padding: 0px 158px;
    color: rgb(255, 255, 255);
    border: 2px solid rgb(255, 255, 255);
    font-size: 30px;
    font-family: 'Roboto Condensed', sans-serif;
    height: 48px;
    line-height: 48px;

}

.buy-button:hover{;
	background: #fff;
	color: #006FA1;

}

.list-column-left{
	float:left;
	width: 370px;
}


.list-column-right{
	float:left;
	width: 480px;
}
.structure-header{
	font-weight: normal;
    font-size: 38px;
	font-family: 'Roboto Condensed', sans-serif;
	padding-bottom: 21px;	
	color: #fff;
	text-transform:uppercase;
}

.content-style-3{
			padding-left: 80px;
	height: 400px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#006fa1+0,32c0ff+100 */
background: #006fa1; /* Old browsers */
background: -moz-linear-gradient(45deg,  #006fa1 0%, #32c0ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#006fa1), color-stop(100%,#32c0ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #006fa1 0%,#32c0ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #006fa1 0%,#32c0ff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #006fa1 0%,#32c0ff 100%); /* IE10+ */
background: linear-gradient(45deg,  #006fa1 0%,#32c0ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006fa1', endColorstr='#32c0ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.extra-box{
	padding-top: 44px;
}

.structure-header-2{
	font-weight: normal;
    font-size: 20px;
    line-height: 1.2;
    max-width: 284px;
	font-family: 'Roboto Condensed', sans-serif;
	padding-bottom: 9px;	
	color: #fff;
	text-transform:uppercase;
}

.ogl{
	font-size: 10px;
}

.ogl .start{
	width: 132px;
    display: inline-block;
    position: relative;
    overflow:hidden;
    margin-right: 4px;
    	height: 17px;
	line-height: 17px;
	vertical-align: middle;
}
.list-column-right .ogl .start{
	width: 241px;
}

.ogl .start span{
	position: relative;
	display: inline-block;
	height: 17px;
	line-height: 17px;
}
.ogl .end{
	display: inline-block;
		height: 17px;
	line-height: 17px;
	vertical-align: middle;
}


.ogl .start span:after{
	content: '';
    display: block;
    left: 100%;
    top: -10px;
    margin-left:4px;
    width: 500px;
    height: 20px;
    border-bottom: 2px dotted rgb(255, 255, 255);
    position: absolute;

}




/*footer*/


.footer {
	position: relative;
	background: rgb(51, 54, 63);
}

.footer .content-holder{
	height: 120px;
}

.footer .content-holder:before{
	content: '';
	display: block;
	position: absolute;
	height: 46px;
	left:0;
	width: 100%;
	top: -46px;
	background: url(../images/footer.png) right 0 no-repeat;

}
.copyrights{
	position: absolute;
    right: 3px;
    top: -28px;
    color: rgb(118, 121, 126);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
}


/*default format begin*/

.default-format p {
	margin-bottom: 40px;
	font-size: 13px;
		line-height: 1.6;
		letter-spacing: 1px;
		letter-spacing: 0.5px;
		font-weight: 300;
}


.default-format li {
	font-size: 11px;
		line-height: 1.65;
		letter-spacing: 1px;
		letter-spacing: 0.5px;
		font-weight: 300;
	list-style-type: disc;
	padding-left:3px;
	list-style-position: inside;
}


.default-format h2{
	margin-bottom: 20px;
}

.default-format ul{

}

.default-format li {

}

/*default format end*/






/*MEDIA QUERIES*/	



@media screen and (max-width: 960px){

	.main-menu {
		display: none;
	}

	.main-image{
		width: 100%;
	}
	
	.content-holder{
		width: 100%;
	}

	.content-style-2 {
		padding-left: 20px;
		padding-right: 20px;
	}
	.open-mobile-menu{
		display: block;
		position: absolute;
		right: 20px;
		top: 20px;
		width: 57px;
		height: 33px;
		background: url(../images/mobile_menu.png) 0 0 no-repeat;
		cursor: pointer;
	}

	.main-menu li a.close-mobile-menu{
		display: block;
		margin: auto;
		width: 154px;
		height: 154px;
		background: url(../images/close_mobile_menu.png) center center no-repeat;
		cursor: pointer;
	}

	.list-column-left,
	.list-column-right{
		width: auto;
	}


	.headers-section .content-holder{
	   background: url(../images/header.png) -118px 50% no-repeat;
	}

	.top-logo {
    	left: 30px;
	}

	.product-column {
		float: none;
		padding-left: 0;
		padding-right: 80px;
		text-align: center;
		padding-bottom: 30px;
		margin:auto;
	}

	.description-column{
		float: none;
		width: auto;
		padding: 40px 30px;

	}

	.content-section h1{
		padding: 40px 0 0;
		margin: 0;
		text-align: center;
	}

	img.product{
		max-width: 100%;
	}

	.content-style-1{
		height: auto;
	}

	.content-style-2{
		height: auto;
		padding-bottom: 44px;
	}

	.buy-button{
		left: auto;
		right: auto;
		position:static;
	}

	.to-buy{
		text-align: center;
	}

	.content-style-3{
		padding-left: 0;
		height: auto;
		padding-bottom: 50px;
	}

	.content-style-3 .list-column-left,
	.content-style-3 .list-column-right{
		width: 370px;
		padding: 0;
	}

	.content-style-3 .list-columns{
		padding-left: 30px;
		padding-right: 30px;
	}



	.main-menu.opened{
		position: relative;
    	width: 100%;
    	left: 0;
    	top: 70px;
	}

	.main-menu li{
		float: none;
		display: block;
		position: static;
		text-align: center;
		text-transform: uppercase;
	}

	.main-menu li:first-child{
		padding-top: 40px;
	};

	.main-menu li a{
		display: block;
		text-align: center;
		font-size: 20px;
	}

	.opened.main-menu li.mobile{
		display:block;
		min-height: 71px;
		line-height: 71px;
		text-transform: uppercase;
		font-size: 20px;
	}

	.opened.main-menu li a{
		color:#fff;
		display: block;
		font-size: 20px;
	}

	.opened.main-menu li a.selected,
	.opened.main-menu li a:hover{
		background: rgb(31, 160, 217);
	}

	.opened.main-menu li.mobile a:hover{
		background-color: none;
		background: url(../images/close_mobile_menu.png) center center no-repeat;
	}

	.content-section.opened{
		background: rgb(51, 54, 63);
		height: 600px;
	}

 	.opened.content-section .content-holder{
 		display: none;
 	}
	
}