* { outline: 0;  outline-color: transparent; outline-style: none; outline-width: 0; }
html{color:#000;}

/* stuff */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
.black{ color: #000; }
.white{ color: #fff; }
.small{ font-size: 13px; }
.clear {clear: both;}

/* common */
html, body {
	width: 100%;
	min-height: 100%;
	margin: 0px;
	padding: 0px;
}
body {
	font-family: "Open Sans",Arial,Helvetica,sans-serif;
	font-size: 14px;
	line-height: 22px;
}

h3{
	font: normal 56px/56px 'bebas_neueregular';
	color: #fff;
	text-transform: uppercase;
	padding: 0 0 15px 0;
	margin: 0px;
}
.clear {
	clear: both;
}

/* specific */
div.banner {
    background-clip: border-box;
    background-attachment: fixed;
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 50;
}
div.move .container {
    max-width: 990px;
    margin: 0px auto;
}
.logo {
	padding-top:80px;
	width: 400px;
}

/* iPhone */
.iphone {
  background: url(../img/iphone-back.png);
  width: 299px;
  height: 577px;
  /*margin: 0 auto;*/
  float: right;
  position: relative;
  margin-bottom: 70px;
}

.iphone-slider {
  width: 212px;
  margin: 97px 44px 0;
  height: 379px;
  position: absolute;
  background: #000;
}

/* home */
#home {
    text-align: center;
    background: #fff url('../img/background.jpg');
    background-size: cover;
    background-position:  center center;
    min-height: 650px;
    z-index: 9999;
}
    #home h1{
      font-weight: 700;
      font-size: 44px;
      color: #fff;
      text-transform: uppercase;
      padding: 0px;
      margin: 0px;
      margin-bottom: 30px;
      padding-top: 40px;
      line-height: 40px;
    }
    #home h2{
        font-weight: 400;
        font-size: 33px;
        color: #fff;
        text-transform: none;
        padding: 0px;
        margin: 0px;
        padding-bottom: 80px;
    }

	#home .box-1{
	    float: left;
	    margin-top: -20px;
	    width: 50%;
	    text-align: right;
	}
	#home .box-2{
	    float: right;
	    margin-top: -10px;
	    width: 50%;
	    padding-top: 30px;
	    text-align: left;
	    z-index: 9999;
	}
	#home .box-2 ul{
	    margin: 0;
	    padding: 0;
	}
		#home .box-2 ul li{
		    display: block;
		    padding: 6px 0px;
		    font-size: 14px;
		}
			#home .box-2 ul li .icon-color, #home .box-2 ul li .text-color{
			    color: #fff;
			}
		#home .box-2 ul li span.text{
		    font-size: 18px;
		    text-align: left;
		    padding-left: 10px;
		}
	
/* center */
#center {
    background: #fcfcfc;  
    background-image: url("../img/background-metmap.png");
    z-index: 0;
}
	#center .container {
		padding-top: 0;
		padding-bottom: 70px;
	}
	#center h3{
		font-weight: 600;
		font-family: "Open Sans",Arial,Helvetica,sans-serif;
		font-size: 40px;
		color: #000;
		text-align: center;
		text-transform: none;
		padding: 0px;
		margin: 0px;
		width: 100%;
		float: left;
		padding-top: 110px;
	}
	#center .small-text{
		text-align: center;
		width: 100%;
		float: left;
	} 
	#center p.right-text{
		color: #000;
		text-align: left;
		padding-top: 30px;
		font-size: 13px;
		font-weight: 400;
		line-height: 18px;
		
	}

a.appstore_button {
    background-image: url("../img/store_buttons.png");
    display: block;
    float: left;
    height: 71px;
    margin-right: 10px;
    width: 208px;
}



a.google_play_button {
    background-image: url("../img/store_buttons.png");
    background-position: -208px 0;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 71px;
    width: 208px;
}

a.android_store_button {
    background-image: url("../img/store_buttons.png");
    background-position: -1040px 0;
    background-repeat: no-repeat;
    display: block;
    float: left;
    margin-top: 10px;
    height: 71px;
    width: 208px;
}


a.windows_store_button {
    background-image: url("../img/store_buttons.png");
		corner-radius: 10px;
    background-position: -416px 0;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 71px;
    margin-top: 10px;
    margin-right: 10px;
    width: 208px;
}

a.windows_phone_store_button {
    background-image: url("../img/store_buttons.png");
		corner-radius: 10px;
    background-position: -624px 0;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 71px;
    margin-top: 10px;
    width: 208px;
}

a.glass_store_button {
    background-image: url("../img/store_buttons.png");
		corner-radius: 10px;
    background-position: -832px 0;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 71px;
    margin-top: 10px;
    width: 208px;
}
a.appstore_button:hover,a.google_play_button:hover,a.windows_store_button:hover,a.windows_phone_store_button:hover,a.glass_store_button:hover,a.android_store_button:hover {
	 -webkit-animation: animatedBackground 1s ease-out 1;
        -moz-animation: animatedBackground 1s ease-out 1;
        animation: animatedBackground 1s ease-out 1;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
}

 @-webkit-keyframes animatedBackground {
        0% {
            -webkit-transform: scale(1, 1);
            -moz-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1)
        }
        100% {
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1)
        }

    }
    
    
    @-moz-keyframes animatedBackground {
        0% {
            -webkit-transform: scale(1, 1);
            -moz-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1)
        }
        100% {
            -webkit-transform: scale(1.1, 1.1);
            -moz-transform: scale(1.1, 1.1);
            -ms-transform: scale(1.1, 1.1);
            -o-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1)
        }

    }
    @keyframes animatedBackground {
        0% {
            -webkit-transform: scale(1, 1);
            -moz-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1)
        }
        100% {
            -webkit-transform: scale(1.1, 1.1);
            -moz-transform: scale(1.1, 1.1);
            -ms-transform: scale(1.1, 1.1);
            -o-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1)
        }

    }
    
.carousel {
  position: relative;
  margin-bottom: 20px;
  line-height: 1;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: 0.6s ease-in-out left;
     -moz-transition: 0.6s ease-in-out left;
       -o-transition: 0.6s ease-in-out left;
          transition: 0.6s ease-in-out left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  line-height: 1;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}

.carousel-inner > .active {
  left: 0;
}

.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner > .next {
  left: 100%;
}

.carousel-inner > .prev {
  left: -100%;
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}

.carousel-inner > .active.left {
  left: -100%;
}

.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #222222;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
     -moz-border-radius: 23px;
          border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.carousel-control.right {
  right: 15px;
  left: auto;
}

.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.carousel-indicators {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 5;
  margin: 0;
  list-style: none;
}
.carousel-indicators li {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  text-indent: -999px;
  background-color: #ccc;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 5px;
}

.carousel-indicators .active {
  background-color: #fff;
}

.carousel-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px;
  background: #333333;
  background: rgba(0, 0, 0, 0.75);
}

.carousel-caption h4,
.carousel-caption p {
  line-height: 20px;
  color: #ffffff;
}

.carousel-caption h4 {
  margin: 0 0 5px;
}

.carousel-caption p {
  margin-bottom: 0;
}
    

/* features */
#features {
    background: #f8f8f8;
}
#features .container {
	padding: 70px 0 50px 0;
}
    #features .container h3{
			font-weight: 600;
			font-family: "Open Sans",Arial,Helvetica,sans-serif;
			font-size: 23px;
			color: #292929;
			line-height: 29px;
			text-align: center;
			text-transform: none;
			padding: 0px;
			margin: 0px;
			padding-top: 0px;
			padding-bottom: 60px;
	}
		#features .container ul{
			margin: 0;
			padding: 0 auto;
			text-align: center;
		}
			#features .container ul li{
				display: inline-block;
				*zoom: 1;
				width: 40%;
				text-align: center;
				
				padding-bottom: 65px;
			}
				#features .container ul li p{
					font-size: 13px;
					color: #606060;
					width: 85%;
					margin: 0 auto;
					line-height: 19px;
				}
					#features .container ul li i{
						font-size: 52px;
						color: #292929;
						padding-bottom: 9px;
					}
						#features .container ul li h4{
							font-size: 18px;
							color: #292929;
							text-align: center;
							margin: 0;
							padding: 0;
							font-weight: 600;
							padding-bottom: 16px;
						}

/* more */
#more {
  background: #fff;
  
}
#more .container {
	padding: 80px 0 0px 0;
	margin-bottom: -90px;
}

    #more ul{
        margin: 0 auto;
        width: 80%;
        padding: 0;
        text-align: center;
        padding-bottom: 0px;
    }
        #more ul li{
            display: inline-block;
            *zoom: 1;
						width: 45%;
						vertical-align: middle;
            padding: 1px 0px;
        }
					#more ul li.left{
						text-align: left;
					}
					#more ul li.left h3{
						font-family: "Open Sans",Arial,Helvetica,sans-serif;
						font-size: 33px;
						margin-top: -50px;
						font-weight: 600;
						line-height: 40px;
						text-transform: none;
						color: #414141;
						text-align: left;
						padding-bottom: 45px;
						width: 70%;
					}
						#more ul li.left p{
							font-size: 14px;
							width: 80%;
							line-height: 22px;
							color: #414141;
							text-align: left;
							padding-bottom: 20px;
						}
				
/* downloads */
#downloads {
    background: #fff url('../img/background.jpg') center center repeat-x;
    background-size: cover;
}
#downloads .container {
	padding: 54px 0 60px 0;
}
#downloads .container h3{
			font-weight: 700;
			font-family: "Open Sans",Arial,Helvetica,sans-serif;
			font-size: 29px;
			color: #fff;
			text-align: center;
			text-transform: none;
			padding: 0px;
			margin: 0px;
			padding-bottom: 10px;
	}
    #downloads ul{
        margin: 0 auto;
        width: 80%;
        padding: 0;
        text-align: center;
        /*padding-bottom: 10px;*/
    }
        #downloads ul li{
            display: inline-block;
            *zoom: 1;
            padding: 1px 0px;
        }

/* contacts */
#contacts {
    background: #fff;
    
}
#contacts .container {
	padding: 60px 0 0px 0;
}
    #contacts ul{
        margin: 0 auto;
        width: 80%;
        padding: 0;
        text-align: center;
        padding-bottom: 30px;
    }
        #contacts ul li{
            display: inline-block;
            *zoom: 1;
            padding: 1px 15px;
        }
            #contacts ul li .social{
                font-size: 19px;
                color: #d4d4d4;
								
            }
						#contacts ul li .fb, #contacts ul li .twitter, #contacts ul li .vk,  #contacts ul li .mail{
							padding: 8px 14px;
							border-radius: 19px;
							border: 1px solid #fff;
						}
            #contacts ul li .fb:hover{
                color: #3b8fed;
								border: 1px solid #3b8fed;
            }
            #contacts ul li .twitter:hover{
                color: #3bd2ed;
								border: 1px solid #3bd2ed;
            }
            #contacts ul li .mail:hover{
                color: #2d3030;
								border: 1px solid #2d3030;
            }
						#contacts ul li .vk:hover{
                color: #13689a;
								border: 1px solid #13689a;
            }
					
				#contacts ul.links{
						margin: 0 auto;
						width: 80%;
						padding: 0;
						text-align: center;
						padding-bottom: 20px;
				}	
				#contacts ul.links li{
            display: inline-block;
            *zoom: 1;
            padding: 1px 10px;
        }
					#contacts ul.links li a{
						color: #a7a7a7;
						font-size: 12px;
						text-decoration: none;
					}
					#contacts ul.links li a:hover{
						color: #20a5f4;
					}
		#contacts .phone{
		    margin: auto;
		    
		    width: 480px;
		    background: url('../img/appicon.png') center no-repeat;
		    height: 160px;
		    margin-bottom: 20px;
		    z-index: 4;
		}


/*=======================================================================================*/
/* responsive */
@media screen and (min-width: 590px) and (max-width: 805px){
	#home {
		min-height: 610px;
	}
	#home .box-2{
		padding-top: 0px;
	}
	#home p.right-text{
		margin: 0 auto;
		width: 98%;
		text-align: center;
	}
	#center p.right-text {
		 padding-top: 10px;
	}
	#center h3 {
		font-size: 36px;
		padding: 70px 0 0;
	}
	#center a.appstore_button, #center a.google_play_button,#center a.windows_store_button,#center a.windows_phone_store_button,#center a.glass_store_button {
    	margin-top: 5px;
		margin-left: 0px;
	}
	
	   #more ul{
        margin: 20px auto;
        width: 90%;
    }
        #more ul li{
						width: 100%;
						text-align: center;
						vertical-align: middle;
        }
					#more ul li.left{
						text-align: center;
					}
					#more ul li.left h3{
						font-size: 33px;
						text-align: center;
						padding-bottom: 25px;
						width: 100%;
					}
						#more ul li.left p{
							width: 100%;
							text-align: left;
							padding-bottom: 20px;
						}
						
						
}

@media screen and (min-width: 590px) and (max-width: 715px){
	.iphone {
		margin: 0 auto;
		margin-bottom: 60px;
		float: none;
    }
	#home h2{
		font-size: 25px;
	}
	#home img.iphone{
		width: 260px;
		height: 478px;
	}
	#home .box-2 ul li{
            padding: 8px 0px;
            font-size: 11px;
        }
	#center p.right-text{
		padding-top: 30px;
		text-align: center;
		padding-bottom: 0px;
		float: left;
		width: 100%;
	}
	#center a.appstore_button, #center a.google_play_button, a.windows_store_button, a.windows_phone_store_button, a.glass_store_button {
    margin-top: 0px;
	}
	
}

@media screen and (min-width: 480px) and (max-width: 590px){
	.logo {
		width: 300px;
	}
	.iphone {
		margin: 0 auto;
		margin-bottom: 30px;
		float: none;
    }
	#home h1{
		font-size: 30px;
		line-height: 36px;
	}
	#home h2{
		font-size: 25px;
	}
	#home img.iphone{
		margin-top: -50px;
	}
	#home .box-1{
		text-align: center;
		width: 100%;
	}
	#home .box-2{
		display: block;
		float: right;
		width: 100%;
	}
		#home .box-2 ul{
			padding: 20px 140px;
		}
			#home .box-2 ul li{
			    padding: 8px 0px;
			    font-size: 11px;
			}
				#home .box-2 ul li .icon-color, #home .box-2 ul li .text-color{
					color: #000;
				}
					
	#center p.right-text{
		padding-top: 30px;
		text-align: center;
		padding-bottom: 0px;
		float: left;
		width: 100%;
	}
	#center h3 {
		font-size: 30px;
		line-height: 38px;
		padding: 60px 0 0;
	}

	#center a.appstore_button, #center a.google_play_button,#center a.windows_store_button,#center a.windows_phone_store_button,#center a.glass_store_button {
    	margin-top: 10px;
		margin-left: 150px;
	}

	
		   #more ul{
        margin: 20px auto;
        width: 90%;
    }
        #more ul li{
						width: 100%;
						text-align: center;
						vertical-align: middle;
        }
					#more ul li.left{
						text-align: center;
					}
					#more ul li.left h3{
						font-size: 33px;
						text-align: center;
						padding-bottom: 25px;
						width: 100%;
					}
						#more ul li.left p{
							width: 100%;
							text-align: left;
							padding-bottom: 20px;
						}


	#features .container ul li{
				width: 100%;
			}
						
}

@media screen and (min-width: 320px) and (max-width: 480px){
	.logo {
		padding-top:60px;
		width: 200px;
	}
	.iphone {
		margin: 0 auto;
		margin-bottom: 30px;
		float: none;
    }
	#home h1{
		font-size: 20px;
		line-height: 25px;
	}
	#home h2{
		font-size: 20px;
	}
	#home img.iphone{
		margin-top: -50px;
	}
	#home .box-1{
		text-align: center;
		width: 100%;
	}
	#home .box-2{
		display: block;
		float: right;
		width: 100%;
		z-index: 9999;
	}
		#home .box-2 ul{
			padding: 20px 50px;
		}
			#home .box-2 ul li{
			    padding: 8px 0px;
			    font-size: 11px;
			}
				#home .box-2 ul li .icon-color, #home .box-2 ul li .text-color{
					color: #000;
				}
					
	#center p.right-text{
		padding-top: 30px;
		float: left;
		text-align: center;
		width: 100%;
		padding-bottom: 30px;
	}
	#center a.appstore_button, #center a.google_play_button,#center a.windows_store_button,#center a.windows_phone_store_button,#center a.glass_store_button {
    	margin-top: 5px;
		margin-left: 50px;
	}
	
	
	#center h3 {
		font-size: 25px;
		line-height: 35px;
		padding: 40px 0 0;	
	}
	   #more ul{
        margin: 20px auto;
        width: 90%;
    }
        #more ul li{
						width: 100%;
						text-align: center;
						vertical-align: middle;
        }
					#more ul li.left{
						text-align: center;
					}
					#more ul li.left h3{
						font-size: 33px;
						text-align: center;
						padding-bottom: 25px;
						width: 100%;
					}
						#more ul li.left p{
							width: 100%;
							text-align: center;
							padding-bottom: 20px;
						}
						
			#more ul li img{
				width: 300px;
				height: 453px;
			}
			
			#features .container ul li{
				width: 100%;
			}
			
			#contacts .phone{
		    width: 100%;
		    height: 377px;
		}
			#contacts ul li{
            display: inline-block;
            *zoom: 1;
            padding: 1px 8px;
        }
		
}

@media screen and (max-width: 320px){
	.iphone {
		margin: 0 auto;
		margin-bottom: 30px;
		float: none;
    }


	#home h2{
		font-size: 25px;
	}
	#home img.iphone{
		margin-top: -50px;
	}
	#home .box-1{
		text-align: center;
		width: 100%;
	}
	#home .box-2{
		display: block;
		float: right;
		z-index: 9999;
		width: 100%;
	}
		#home .box-2 ul{
			padding: 20px 50px;
		}
			#home .box-2 ul li{
			    padding: 8px 0px;
			    font-size: 11px;
			}
				#home .box-2 ul li .icon-color, #home .box-2 ul li .text-color{
					color: #000;
				}
					
	#center p.right-text{
		padding-top: 30px;
		float: left;
		text-align: center;
		width: 100%;
		padding-bottom: 30px;
	}
	#center a.appstore_button, #center a.google_play_button,#center a.windows_store_button,#center a.windows_phone_store_button,#center a.glass_store_button {
    	margin-top: 5px;
		margin-left: 50px;
	}
	
	#features .container ul li{
				width: 100%;
			}
			
				#contacts .phone{
		    width: 100%;
		    height: 287px;
		}
			#contacts ul li{
            display: inline-block;
            *zoom: 1;
            padding: 1px 4px;
        }
}

/*=================================================================================================*/
/* effects */
@-webkit-keyframes moveUp {
	to { -webkit-transform: translateY(0); opacity: 1; }
}

@-moz-keyframes moveUp {
	to { -moz-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	to { transform: translateY(0); opacity: 1; }
}
@-webkit-keyframes bounceInDown {
	to {
	-webkit-transform: translateY(-200px);
	-moz-transform: translateY(-200px);
	transform: translateY(-200px);
	-webkit-animation: moveUp 0.75s ease forwards;
	-moz-animation: moveUp 0.75s ease forwards;
	animation: moveUp 0.75s ease forwards;
	}
}

@-moz-keyframes bounceInDown {
	to {
		-webkit-transform: translateY(-200px);
	-moz-transform: translateY(-200px);
	transform: translateY(-200px);
	-webkit-animation: moveUp 0.75s ease forwards;
	-moz-animation: moveUp 0.75s ease forwards;
	animation: moveUp 0.75s ease forwards;
	}
}

@-o-keyframes bounceInDown {
	to {
		-webkit-transform: translateY(-10px);
	}
}

@keyframes bounceInDown {
	to {
		-webkit-transform: translateY(-10px);
	}
}
.animated.bounceInDown {
	-webkit-transform: translateY(-200px);
	-moz-transform: translateY(-200px);
	transform: translateY(-200px);
	-webkit-animation: moveUp 2.75s ease forwards;
	-moz-animation: moveUp 2.75s ease forwards;
	animation: moveUp 2.75s ease forwards;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0; 
	-webkit-animation:fadeIn ease-in 1; /
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

.fade-in.four {
-webkit-animation-delay: 3.0s;
-moz-animation-delay: 3.0s;
animation-delay: 3.0s;
}

.fade-in.five {
-webkit-animation-delay: 3.2s;
-moz-animation-delay: 3.2s;
animation-delay: 3.2s;
}

        
    
    
