html, body{
	margin: 0;
	padding: 0;
	height: 100%;
}
*:focus {
    outline: 0;
}
::-webkit-input-placeholder {
   color: #666;
}
:-moz-placeholder { /* Firefox 18- */
   color: #666;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #666;  
}
:-ms-input-placeholder {  
   color: #666;  
}
#container{
	width: 100%;
	height: 100%;
	position: relative;
	direction: rtl;
	overflow: hidden;
}
#logo{
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	height: 130px;
	overflow: hidden;
	background: ;
	background-position: -160px 0;
}
#logo:hover,#logo.effect{
  background-position: 30px 0;
  /*change speed to see in slow motion*/
  transition: all 0.5s;
}
#logo::after{
  content:'';
  position: absolute;
  pointer-events: none;
  top:0; left:0; right:0; bottom: 0;
  background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 85%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 85%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background-position: inherit; 
  -webkit-mask-image: url('images/logo_130.png');
  -webkit-mask-size: 100% 100%;
  mask-image: url('#mask-firefox');
  mask-size: 100% 100%;
}

#logo img{
	height: 100%;
}
#lead{
	position: fixed;
	top: 0;
	left: 0;
	width: 40px;
	height: 100%;
	background-color: #151515;
	border-right: 2px solid #540e11;
	background-image: url(images/lead_text.png);
	background-size: 20px auto;
	background-position: 5px center;
	background-repeat: no-repeat;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	padding-top: 140px;	
}
#categories .cat#cat-meizu {
    display: none;
}

#categories .cat#cat-pmobile {
    display: none;
}
#lead-arrow{
	background-image: url(images/arrow_right.png);
	background-size: 100% 100%;
	width: 32px;
	height: 32px;
	cursor: pointer;
	position: absolute;
	top: 50%;
	margin-top: -16px;
	right: 0;
	margin-right: -20px;
	-webkit-transition: transform 0.5s ease;
	-moz-transition: transform 0.5s ease;
	-ms-transition: transform 0.5s ease;
	-o-transition: transform 0.5s ease;
	transition: transform 0.5s ease;
}
#lead-form{
	position: relative;
	display: none;
}
#lead-form img{
	width: 100%;
	display: block;
}
#lead-form input{
	background-color: transparent;
	background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
	border: none;
	color: #fff !important;
	font-family: Arial;
	font-size: 14px;
	height: 16.027%;
	left: 5.069%;
	position: absolute;
	padding: 0 4%;
}
#lead-name{
	width: 63.133%;
	top: 31.828%;
}
#lead-email{
	width: 72.119%;
	top: 52.821%;
}
#lead-submit{
	position: absolute;
	top: 75.846%;
	left: 5.069%;
	width: 89.631%;
	height: 20.090%;
	cursor: pointer;
}
#lead-buttons{
	position: absolute;
	bottom: 40px;
	display: none;
}
#branches{
	position: absolute;
	top: 6.185%;
	left: 17.281%;
	width: 65.207%;
	height: 33.505%;
	cursor: pointer;
}
#facebook{
	position: absolute;
	top: 53.608%;
	left: 0%;
	width: 100%;
	height: 39.175%;
	cursor: pointer;
	text-align: left;
}
img#formFaceBook {
    left: 0;
    width: 86% !important;
    position: initial;
    margin: 0 auto;
}
#lead-buttons img{
	display: block;
	width: 100%;
}
.page-0 #lead{
	width: 250px;
	background: #151515;
}
.page-0 #lead-arrow{
	display: none;
}
.page-0 #lead-form, .page-0 #lead-buttons{
	display: block;
}
#lead.open{
	width: 250px;
	background-image: url(images/lead_bug.png);
	background-size: 25% auto;
	background-position: right 20px;
}
#lead.open #lead-arrow{
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
#lead.open #lead-form, #lead.open #lead-buttons{
	display: block;
}
#lead-form.thanks{
	background-image: url(images/lead_thanks.png);
	background-size: 100% 100%;
}
#lead-form.thanks *{
	display: none;
}
#lead-form.thanks img{
	visibility: hidden;
	display: block;
}
#categories{
	position: fixed;
	height: 85%;
	top: 2%;
	right: 0;
	width: 200px;
	box-sizing: border-box;
	padding: 40px 0;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.page-0 #categories{
	top: 17px;
	height: 100%;
	width: 380px;
	padding: 30px 0 10px 0;
}
#categories-inner{
	height: 100%;
}
#categories .cat{
	background-size: auto 90%;
	background-position: 85% center;
	background-repeat: no-repeat;
	cursor: pointer;
	margin-top: 7%;
	-webkit-transition: background 0.3s ease;
	-moz-transition: background 0.3s ease;
	-ms-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	transition: background 0.3s ease;
}
.page-0 #categories .cat{
	background-size: auto 90%;
}
#categories .cat:hover,#categories .cat.active{
	background-size: auto 100%;
}
#pages{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.page{
	height: 100%;
	background-color: #111;
	position: relative;
	background-image: url(images/pages_background.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position-y: 0%;
	padding: 0 190px 70px 170px;
	text-align: center;
}
.page.products-1{
	padding-bottom: 50px;
}
#page-main{
	background-color: #000;
	padding: 0px 0 30px 250px;
}
.end #page-main{
	padding-left: 260px;
	padding-right: 20px;
}
.page .title{
	height: 18%;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.page .products{
	height: 82%;
	display: inline-block;
	position: relative;
}
.page .products .carousel{
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	text-align: center;
	direction: rtl;
}
.page.products-1 .products .carousel{
	display: none;
}
.page .products .carousel .bullet{
	width: 10px;
	height: 10px;
	border: 1px solid #fff;
	display: inline-block;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	cursor: pointer;
	
	-webkit-transition: background 0.3s ease;
	-moz-transition: background 0.3s ease;
	-ms-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	transition: background 0.3s ease;
}
.page .products .carousel .bullet.active{
	background-color: #fff;
}
.page .products .dummy{
	height: 100%;
	max-width: 100%;
}
.page .products .arr-right{
	position: absolute;
	top: 50%;
	height: 110px;
	margin-top: -55px;
	left: 100%;
	cursor: pointer;
	margin-left: 10px;
}
.page .products.page-0 .arr-right{
	display: none;
}
.page .products .arr-left{
	position: absolute;
	top: 50%;
	height: 110px;
	margin-top: -55px;
	right: 100%;
	cursor: pointer;
	margin-right: 10px;
}
.page .products.page-last .arr-left{
	display: none;
}
.page .products .items{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.page .products .items .item{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background-image: url(images/loader.gif);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 10%;
}
.page .products .items .item.loaded{
	background: none;
}
.page .products .items .item img{
	width: 100%;
	/* max-height: 100%; */
	height: auto;
	position: absolute;
	top: 50%;
	left: 0;
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 2;
	background-color: #111;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.page-0 #footer{
	border-top: 2px solid #540e11;
	height: 25px;
}
#terms-link{
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 5px;
	margin-right: 5px;
	height: 18px;
	cursor: pointer;
}
#footer-down{
	position: absolute;
	left: 50%;
	margin-left: -14px;
	height: 32px;
	bottom: 10px;
	cursor: pointer;
}
.page-0  #footer-down{
}
#main-content{
	height: 100%;
	background-image: url(images/main.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding-top: 30px;
}
.end #main-content{
	background-image: url(images/theend.png);
}
#terms{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 999;
	display: none;
}
#terms-content{
	position: absolute;
	bottom: 0;
	right: 0;
}
#terms img{
	max-width: 80%;
}
#terms-arrow{
	width: 36px;
	height: 100%;
	position: relative;
	display: inline-block;
	margin-right: -18px;
}
#terms-arrow img{
	cursor: pointer;
	width: 100%;
	top: 50%;
	margin-top: -18px;
	position: absolute;
}

.page-last #footer-down{
	display: none;
}
#page-computer.prods-page-4 .title{
	background-image: url(images/cats/computer_title1.png) !important;
}
#main-content{
	position: relative;
}
#main-facebook{
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	width: 20%;
}
.left_icons{
	width: 170px;
	left: 20px;
	display: none;
	position: absolute;
	cursor: pointer;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.end .left_icons{
	display: none;
}
#main-meizu{
	top: 74px;
}
#main-mobile{
	top: 157px;
}
#main-yes{
	top: 251px;
}
#main-office{
	top: 369px;
}
#main-face{
	width:230px;
	height: 70px;
	top:460px;
	display: none;
}
.left_icons:hover{
	width:200px;
	left:5px;
}

div#Mseeyounextyear{
		display: none;
	}
	div#seeyounextyear {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}
div#seeyounextyear img {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
}

@media only screen and (min-width:1200px){
	.left_icons{
		display: block;
	}
}

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

	div#seeyounextyear{
		display: none;
	}
	div#Mseeyounextyear{
		display: block;
	}
	div#Mseeyounextyear {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}
#main-content{
	background-image: url(images/main_mob.png);
	background-color: black;
	background-size: 100%;
	top: 0 !important;
	height: 100% !important;
}
	.page{
		    background-image: url(images/pages_mob_background.jpg);
		    background-color: black;
	}
	#main-facebook{
		display: none;
	}
	body{
		overflow: hidden;
	}
	#container{
		min-height: 400px;
	}
	#logo{
		height: 15%;
	}
	#lead,.page-0 #lead{
		position: absolute;
		height: 30px;
		width: 100% !important;
		padding: 0 !important;
		background-image: url(images/mobile/lead_text.png);
		background-size: auto 100%;
		background-position: right;
		border-right: none;
		border-bottom: 2px solid #540e11;
	}
	#lead-arrow, .page-0 #lead-arrow{
		display: block;
		width: 24px;
		height: 24px;
		top: 100%;
		right: 50%;
		margin-right: -12px;
		margin-top: -8px;
		background-image: url(images/arrow_down.png);
	}
	#lead-form,.page-0 #lead-form, .page-0 #lead-buttons{
		display: none;
	}
	#footer,.page-0 #footer{
		height: 15px;
		position: absolute;
	}
	#footer-down,.page-0 #footer-down{
		height: 20px;
		bottom: 5px;
	}
	#terms-link{
		height: 13px;
		bottom: 0;
	}
	.page-0 #terms-link{
		bottom: 100%;
	}
	#categories{
		display: none;
	}
	.page-0 #categories{
		display: block;
		padding: 0;
		width: 90%;
		height: 45%;
		top: auto;
		bottom: 82px;
		right: 5%;
		position: absolute;
	}
	.page-0 #categories-inner{
		text-align: center;
		overflow: hidden;
		line-height: 0;
	}
	.page-0 #categories .cat{
		display: inline-block;
		height: 17% !important;
		width: 44%;
		background-size: contain;
		background-position: center top;
	}
	.page{
		padding: 0 0 30px 0 !important;
	}
	#main-content{
		height: 32%;
		position: absolute;
		background-position:60% 0px;
		width: 100%;
		top: 4%;
		left: 0;
		/* background-image: url(images/mobile/main.png); */
	}
	.end #main-content{
		height: 80%;
		width: 90%;
		left: 5%;
	}
	.page .title{
		position: absolute;
		top: 15%;
		width: 100%;
		left: 0;
		background-position: center top;
		background-size: contain;
		height: 10%;
	}
	.page .products{
		position: absolute;
		left: 20px;
		right: 20px;
		height: 65%;
		top: 25%;
	}
	.page .products .arr-right,.page .products .arr-left{
		width: 15px;
		height: auto;
		margin-top: -20px;
	}
	.page .products .arr-left{
		margin-right: 2px;
	}
	.page .products .arr-right{
		margin-left: 2px;
	}
	#lead.open{
		height: auto;
		z-index: 2;
		background-image: none;
	}
	#lead.open > *{
		z-index: 3;
	}
	#lead-form img{
		content: url(images/mobile/lead.png);
	}
	#lead-email{
		top: 45% !important;
		left: 13.437% !important;
		width: 58.75% !important;
		height: 18.478% !important;
	}
	#lead-name{
		top: 20.434% !important;
		left: 13.437% !important;
		height: 18.478% !important;
		width: 51.406% !important;
	}
	#lead-form input{
		font-size: 22px;
	}
	#lead-submit{
		top: 71.304%;
		width: 72.968%;
		left: 13.437%;
		height: 23.478%;
	}
	#lead-buttons{
		position: relative;
		bottom: auto;
	}
	#lead-buttons img{
		content: url(images/mobile/buttons.png);
	}
	#branches{
		top: 4.494%;
		left: 23.281%;
		width: 49.687%;
		height: 32.022%;
	}
	#facebook{
		top: 48.876%;
		left: 23.281%;
		height: 41.011%;
		width: 49.687%;
	}
	#terms-content > img{
		content: url(images/mobile/terms.png);
		max-width: 90%;
	}
	
	#page-computer.prods-page-4 .title{
		background-image: url(images/cats/computer_title.png) !important;
	}
	#page-computer.prods-page-6 .title,#page-computer.prods-page-7 .title{
		background-image: url(images/cats/computer_title1.png) !important;
	}
}
.page-0 #categories .cat#cat-yestv {
    width:0;
    height:0;
    display: none !important;
}

.page-0 #categories .cat#cat-pmobile {
    width:0;
    height:0;
    display: none !important;
}

.page-0 #categories .cat#cat-meizu {
	width:0;
	height:0;
	display: none !important;
}