@charset "UTF-8";
/*

	TABLE OF CONTENTS
    ---------------------------
     1. Mobile  - portrait view
     2. Mobile  - lanscape view
     3. Tablets - portrait view
     4. Monitors - little resolution
*/

/*----------------------------------------------------------------------------------------
										MOBILE VIEW 320px - portrait view
-----------------------------------------------------------------------------------------*/
@media only screen and (min-width: 320px) and (max-width:565px) {
	/*----------------------------------------------------------------------------------------
										TIPOGRAPHY
	-----------------------------------------------------------------------------------------*/
	#inovations h3, #bennefits h3, #video h3,
	#screenshots h3, #reviews h3, #prices h3,
	#get_myapp h3, #contact h3{
	  font-size: 1.428em;
	  font-weight: 400;
	}
	.app-bennefits h4, .price-tabel p, .price-tabel .badge, #achievments h4, footer h4, #get_myapp h4{font-size: 1.142em}	

	.navbar span, .header-markets span, 
	#inovations span, #bennefits span, .app-bennefits p,
	#screenshots span, .slides p, #video span, #reviews span, .review-text p,
	#prices span, .price-tabel li, #get_myapp span, #achievments small,
	#contact span{	font-size: 0.928em;	}

	#achievments p, .price-tabel span{font-size: 2.2428em !important}

	.app-bennefits h4{font-weight: 500}

	/*----------------------------------------------------------------------------------------
										UI ELEMENTS
	-----------------------------------------------------------------------------------------*/
	.hidden-on-big{display: block !important;}

	header{
		background-position: center;
		background-size: cover;
	}
	/********** NavBar + NavBar Button *******/
	.navbar-toggle{
		float: right;
		border: none;
		margin: 18px 0px 10px 0;
	}
	.navbar-brand{
		float: right;
		width: 80%;
		padding-left: 0;
		margin-top: 10px;
	}

	/********** Main Menu ***************/
	.navbar-collapse{display: none;}
	#navbarCollapse{
		position: absolute;
		width: 100%;
		overflow-y: visible;
	}
	#main-menu{
		padding: 0;
		margin-top: 0;
		width: 84%;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
	}
	#main-menu li{background: steelblue}
	#main-menu li.active{
		background: #42a5f5;
		border-bottom: 1px solid #ffc107
	}
	#main-menu li a{
		padding-left: 25px;
		border-bottom: 1px solid #42a5f5
	}

	/********** Top-Slider *************/
	.top-carousel .item{
		height: 100%;
		min-height: 100vh;
	}	

	/********** Inovations Section ******/
	#inovations{
		padding: 35px;
		background-attachment: inherit;
		background-size: cover
	}

	.product-inovations{margin-top: 30px;}
	.product-inovations .col-md-3{
		margin-bottom: 30px;
	}

	/********* Bennefits Section *******/
	#bennefits{padding: 35px 0px;}
	.app-bennefits li{padding: 60px 0 5px;}
	.app-bennefits p{
		padding: 0 23px;
		text-align: center
	}
	.app-bennefits .icon{top: 15px;}
	.left-bennefits .icon{
		right: 50%;
		margin-right: -30px;
	}
	.right-bennefits .icon{
		left: 50%;
		margin-left: -30px;
	}
	#bennefits .center-mokup{
		width: 100%;
		max-width: 287px;
		height: 534px;
		padding: 55px 20px 65px;
		margin: 30px auto 60px;
	}
	.app-bennefits h4{
		text-align: center;
		padding: 0;
	}

	/********** Video Section **********/
	#video{	
		overflow: hidden;
		background-attachment: scroll;
	}
	#video video{height: 100%;}
	#video-controls{
		width: 100%;
    	bottom: 30px;
	}

	/******** Screenshots Section *************/
	#screenshot-carousel:before, 
	#screenshot-carousel:after{display: none;}
	#screenshots .center-border{
		width: 70%;
		bottom: 55px;
	}
	.owl-carousel .owl-stage-outer{
		padding: 20px 0 55px 0;
	}
	#screenshots .owl-item{padding: 0 50px;}

	/****** Achievments **********/
	#achievments{padding: 30px 70px;}
	#achievments .col-md-3{margin-bottom: 30px;}
	#achievments br{display: none;}

	/********* Reviews *********/
	#reviews {
		padding: 30px 0;
		background-attachment: inherit;
		background-size: cover;
	}
	#reviews .owl-stage-outer{
		padding: 20px 0 30px 0;
		margin: 0;
	}
	#reviews-carousel .owl-item{
		overflow: hidden !important;
		padding: 0 50px;
	}
	#reviews-carousel .reviews-slide img{
		width: 25% !important;
		margin-left: -50px;
	}
	#reviews-carousel .review-text{
		margin-left: 25px;
		width: 108%;
		padding: 10px;
		word-break: break-word;
	}
	#reviews-carousel .review-text:before{
		left: -10px;
		width: 10px;
		height: 20px;
		top: 7%;
	}
	#reviews-carousel .owl-nav{display: none;}

	/******** Prices **********/
	#prices{padding: 30px 40px;}
	.price-tabel{
		width: 100%;
		margin: 30px 0 0 0;
	}
	.price-tabel p{padding: 10px 0;}	
	.price-number h3{margin-top: 30px;}	
	.price-number .badge{
		top: 5px;
		left: 85px;
	}
	.price-tabel.selected{transform: translateY(0);}

	/****** Get MyApp **********/
	#get_myapp{padding: 20px 0 0 0;}
	#get_myapp h4 {
 	   margin: 40px 0 20px 0;
	}
	#get_myapp li{
		line-height: 1.6;
		font-size: 0.928em;
		margin-bottom: 8px;
		background-position: left top;
	}
	#get_myapp .btn{
		margin: 10px 0 10px 20%;
		width: 177px;
	}
	.nexus-hand{padding-right: 0;}
	.nexus-hand .hand-mockup{
		background-position: left;
		background-size: cover;
	}
	.nexus-hand .hand-mockup > img{
		width: 64%;
		max-width: 183px;
	}

	/***** Contact Us ********/
	
	#contact-form{margin-top: 20px}
	#contact-form .btn{margin-bottom: 30px;}
	.contacts-list{margin-top: 0;}
	.contacts-list i{margin-right: 10px;}

	/******** Footer ***************/
	.footer-logo img{margin-bottom: 7px}
	.footer-logo br{display: none;}
	.social-links ul{margin-left: 0}
	footer #subscribe-email{padding-left: 0;}

}
/*----------------------------------------------------------------------------------------
										MOBILE  - lanscape view
-----------------------------------------------------------------------------------------*/
@media only screen and (min-width: 565px) and (max-width:767px) {

	/*----------------------------------------------------------------------------------------
										TIPOGRAPHY
	-----------------------------------------------------------------------------------------*/
	#inovations h3, #bennefits h3, #video h3,
	#screenshots h3, #reviews h3, #prices h3,
	#get_myapp h3, #contact h3{
	  font-size: 1.428em;
	  font-weight: 400;
	}
	.app-bennefits h4, .price-tabel p, .price-tabel .badge, #achievments h4, footer h4, #get_myapp h4{font-size: 1.142em}	

	.navbar span, .header-markets span,
	#inovations span, #bennefits span, .app-bennefits p,
	#screenshots span, .slides p, #video span, #reviews span, .review-text p,
	#prices span, .price-tabel li, #get_myapp span, #achievments small,
	#contact span{	font-size: 0.928em;	}

	#achievments p, .price-tabel span{font-size: 2.2428em !important}

	.app-bennefits h4{font-weight: 500}

	/*----------------------------------------------------------------------------------------
										UI ELEMENTS
	-----------------------------------------------------------------------------------------*/
	.hidden-on-small{display: none;}
	.hidden-on-big{display: block !important;}
	.container{width: 100%; max-width: 565px}

	header{
		background-position: center;
		background-size: cover;
	}
	/********** NavBar + NavBar Button *******/
	.navbar-toggle{
		float: right;
		border: none;
		margin: 18px 0px 10px 0;
	}
	.navbar-brand{
		float: left;
		width: 80%;
		padding-left: 0;
		margin-top: 10px;
	}

	/********** Main Menu ***************/
	#navbarCollapse{
		position: absolute;
		width: 100%;
		left: 0;
		overflow: visible;
	}
	.navbar-collapse{display: none; overflow-x: scroll;}
	#main-menu{
		padding: 0;
		margin-top: 0;
		width: 84%;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
	}
	#main-menu li{background: steelblue}
	#main-menu li.active{
		background: #42a5f5;
		border-bottom: 1px solid #ffc107
	}
	#main-menu li a{
		padding-left: 25px;
		border-bottom: 1px solid #42a5f5
	}

	/********** Top-Slider *************/
	.top-carousel .item{
		height: 100%;
		min-height: 100vh;
	}	

	/********** Inovations Section ******/
	#inovations{
		padding: 35px;
		background-attachment: inherit;
		background-size: cover;
	}

	.product-inovations{margin-top: 30px;}
	.product-inovations .col-md-3{
		margin-bottom: 30px;
	}

	/********* Bennefits Section *******/
	#bennefits{padding: 35px 0px;}
	.app-bennefits li{
		padding-top: 45px;
		margin-bottom: 30px;
	}
	.app-bennefits p{
		padding: 0 23px;
		text-align: center
	}
	.app-bennefits p br{display: none;}
	.app-bennefits h4{
		text-align: center;
		padding: 0;
	}
	#bennefits .center-mokup{margin-bottom: 60px;}
	.app-bennefits img{
		width: 60% !important;
		margin: 0 auto;
	}
	.app-bennefits .icon{
		top: 0;
		left: 50%;
		right: auto;
		margin-left: -30px;
	}

	/********** Video Section **********/	
	#video video{
		height: 100%;
		top: 49%;
		background: rgba(0, 0, 0, 0.6);
	}
	#video .col-md-offset-3.col-md-6{top: -45px;}
	#video-controls{
		width: 100%;
    	bottom: 20px;
	}

	/******** Screenshots Section *************/
	#screenshots .center-border{width: 50%}
	.owl-carousel .owl-stage-outer{
		padding: 20px 0 55px 0;
	}
	#screenshot-carousel:before,
	#screenshot-carousel:after{
		top: 75px;
		height: 63.7%
	}


	/****** Achievments **********/
	#achievments{padding: 30px 70px;}
	#achievments .col-md-3{
		margin:15px 20px;
		float: left;
		width: 40%;
	}
	#achievments br{display: none;}

	/********* Reviews *********/
	#reviews{
		padding: 30px 0;
		background-attachment: scroll;
		background-size: cover;
	}
	.reviews-slide{margin: 0 50px;}
	#reviews-carousel .reviews-slide img{
		width: 20% !important;
		margin-left: -45px;
		margin-top: 25px;
	}
	#reviews-carousel .owl-stage-outer{margin: 35px 0;}
	#reviews-carousel .owl-item{overflow: hidden !important}
	#reviews-carousel .review-text{
		margin-left: 60px;
		width: 99%;
		padding: 10px;
	}
	#reviews-carousel .review-text:before{
		left: -15px;
		background-size: 55%;
		top: 33%;
	}
	#reviews-carousel .owl-nav{display: none;}

	/******** Prices **********/
	#prices{padding: 30px 40px;}
	.price-tabel{
		float: left;
		width: 45%;
		margin:40px 10px 10px;
	}
	.price-tabel p{padding: 10px 0;}
	.price-tabel ul{margin: 20px 0 10px 0;}
	.price-tabel li{margin: 10px 0;}
	.price-number .badge{
		top: 5px;
		left: 75px;
	}
	.clear{clear: both}
	.price-tabel.selected{transform: translateY(0);}

	/****** Get MyApp **********/
	#get_myapp{padding: 20px 0 0 0}
	#get_myapp h4 {
 	   margin: 40px 0 20px 0;
	}
	#get_myapp li{
		line-height: 1.6;
		font-size: 0.928em;
		margin-bottom: 8px;
		background-position: left top;
	}
	#get_myapp .btn{width: 177px;}	
	.nexus-hand .hand-mockup > img{
		width: 34%;
	    height: 66%;
	    max-width: 193px;
	    top: 60px;
	    left: 55px;
	}
	.nexus-hand .hand-mockup{top: 30px;}

	/***** Contact Us ********/
	.contacts-list{margin-top: 30px;}
	.contacts-list i{margin-right: 10px}
	
}


	/*----------------------------------------------------------------------------------------
										TABLETS - portrait view
	-----------------------------------------------------------------------------------------*/
	@media only screen and (min-width: 768px) and (max-width:1022px) {
		/*----------------------------------------------------------------------------------------
										TIPOGRAPHY
		-----------------------------------------------------------------------------------------*/
	#inovations h3, #bennefits h3, #video h3,
	#screenshots h3, #reviews h3, #prices h3,
	#get_myapp h3, #contact h3{
	  font-size: 1.714em;
	  font-weight: 400;
	}
	.app-bennefits h4, .price-tabel p, .price-tabel .badge, #get_myapp h4, .product-inovations h6{font-size: 1.142em}

	#achievments h4,
	footer h4{font-size: 1.4285em}

	#inovations span,
	.navbar span, .header-markets span,
	#bennefits span, .app-bennefits p,
	#screenshots span, .slides p, #video span, #reviews span, .review-text p,
	#prices span, .price-tabel li, #get_myapp span, #achievments small,
	#contact span{	font-size: 0.928em;	}

	.price-tabel span{font-size: 2.2428em !important}
	#achievments p{font-size: 2.8571em}

	.app-bennefits h4{font-weight: 500}

	/*----------------------------------------------------------------------------------------
										UI ELEMENTS
	-----------------------------------------------------------------------------------------*/

	.hidden-on-big{display: block !important;}
	.container{width: 100%; max-width: 768px}

	header{
		background-position: center;
		background-size: cover;
		background-attachment: scroll;
	}
	/********** NavBar + NavBar Button *******/
	.navbar{padding: 0;}
	.navbar-toggle{
		border: none;
		margin: 18px 0px 10px 0;
		display: block !important;
		float: right;
		z-index: 9999;
	}
	.navbar-brand{
		width: 80%;
		padding-left: 0;
		margin-top: 10px;
		margin-left: 0 !important;
	}
	.navbar-header{width: 100%}
	.navbar-collapse{display: none;}

	/********** Main Menu ***************/
	#navbarCollapse{
		position: absolute;
		width: 51.155%;
		overflow-y: visible;
		top: 70px;
		left: 0;
	}
	#main-menu{
		padding: 0;
		margin-top: 0;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
	}
	#main-menu li{
		background: steelblue;
		width: 100%;
	}
	#main-menu li.active{
		background: #42a5f5;
		border-bottom: 1px solid #ffc107
	}
	#main-menu li a{
		padding-left: 25px;
		border-bottom: 1px solid #42a5f5
	}

	/********** Top-Slider *************/
	.nexus-mockup  { margin-left: -112px; }
	.iphone-mockup { margin-right: 0; }
	
	/********** Inovations Section ******/
	#inovations{
		background-attachment: inherit;
		background-size: cover;
	}

	.product-inovations{margin-top: 30px;}
	.product-inovations .col-md-3{margin-bottom: 30px;}

	/********* Bennefits Section *******/
	#bennefits{padding: 35px 0px;}
	.app-bennefits{margin-top: 0;}
	.app-bennefits br{display: none;}
	.app-bennefits li{padding: 5px 0;}
	.app-bennefits p{padding: 0 23px;}
	
	ul.left-bennefits h4{text-align: right; padding-right: 60px;}
	ul.right-bennefits h4{text-align: left; padding-left: 60px;}

	ul.right-bennefits p.text-left{padding: 0 0 0 60px;}
	ul.left-bennefits p.text-right{padding: 0 60px 0 0;}

	#bennefits .center-mokup{
		width: 100%;
		max-width: 226px;
		height: 417px;
		margin-top: 60px;
		padding: 45px 15px 55px;
	}


	/********** Video Section **********/	
	#video{background-attachment: scroll;}
	#video video{
		height: 100%;
		top: 49%;
		background: rgba(0, 0, 0, 0.6);
	}
	#video-controls{
		width: 100%;
    	bottom: 20px;
	}
	#play-pause, #mute{margin: 0;}

	/******** Screenshots Section *************/
	#screenshots .center-border{width: 25%;}

	/****** Achievments **********/
	#achievments {padding: 40px 0;}
	#achievments br{display: none;}

	/********* Reviews *********/
	#reviews{
		padding: 30px 0;
		background-attachment: inherit;
		background-size: cover;
		background-attachment: scroll;
	}
	#reviews-carousel .reviews-slide img{
		width: 12.7% !important;
		margin-left: 4%;
	}
	#reviews-carousel .review-text{
		margin-left: 19.71%;
		width: 67.91%;
		padding: 15px;
	}
	#reviews-carousel .review-text:before{
		left: -9px;
		width: 10px;
		height: 10px;
		top: 40px;
		background-size: 100%;
	}
	#reviews-carousel .owl-nav{display: none;}
	.owl-carousel .owl-stage-outer{margin-bottom: 0 !important;}

	/******** Prices **********/
	#prices{padding: 40px 0;}
	.price-tabel{
		max-width: 235px;
		margin: 30px auto;
	}
	.price-tabel ul{margin: 20px 0 10px 0;}
	.price-tabel li{margin: 10px 0;}
	.price-number .badge{
		top: 5px;
		left: 75px;
	}

	/****** Get MyApp **********/
	#get_myapp{padding: 40px 0}
	
	#get_myapp h4 {margin: 40px 0 20px 0;}
	#get_myapp li{
		line-height: 1.6;
		font-size: 0.928em;
		margin-bottom: 8px;
		background-position: left top;
	}
	#get_myapp .nexus-hand{padding-right: 0;}
	.control-btns .btn{
		margin-right: 10px;
		width: 160px;
		padding: 5px 15px;
	}
	.nexus-hand .hand-mockup{
		background-position: left;
		background-size: cover;
	}
	.nexus-hand .hand-mockup > img{
		width: 50%;
		max-width: 187px;
		min-width: 187px;
		left: 58px;
	}

	/***** Contact Us ********/	
	.input-field.col-md-8{clear: both;}	
	.contacts-list i{margin-right: 10px}

	/******** Footer ***************/	
	.footer-logo img{margin-bottom: 7px}
	.footer-logo br{display: none;}
	.social-links{
		width: 50%;
		margin: 0 auto;
	}
	
}
/*----------------------------------------------------------------------------------------
				TABLETS - landscape view + MONITORS Low resolution
-----------------------------------------------------------------------------------------*/
	@media only screen and (min-width: 1023px) and (max-width:1365px) {

		/********* Header Section ***********/
		a.navbar-brand{padding: 0}
		#main-menu a{padding: 7px;}
		header{background-size: cover}		

		/******** Bennefits **********/
		#bennefits .center-mokup{padding: 75px 15px 85px;}
		/********* Video Section ***********/		
		#play-pause, #mute{
			float: left;
			margin: 0 10px;
		}				

		/******** Reviews *************/
		#reviews-carousel .owl-stage-outer{margin: 46px 0 30px;}

		/******** Prices *************/
		.price-number .badge{left: 65px;}

		/******* Get MyApp **********/
		.nexus-hand .hand-mockup > img{			
			left: 48px;
			height: 55%;
			top: 130px;
		}

	}