/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {

  color: #5a5a5a;
  font-family: Lato, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Lato, Arial, sans-serif;
font-weight: 400;
letter-spacing: 0.02em;
margin: 0 0 20px;
}


/** navbar menu css **/
.navbar {
margin-bottom: 0px;
}
.navbar-inverse {
	background-color: transparent;
	border-color: transparent;
}
.navbar {
	background: #fff;
	color: #4E5961;
	z-index: 9999;
	box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.navbar-static-top {
	z-index: 1000;
	border-width: 0 0 0px;
}
.navbar-default .navbar-nav > li > a {
	font-size: 15px;
	line-height: 36px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	background: transparent;
	color: #4E5961;
	-webkit-transition:all .2s ease-out;
    transition:all .2s ease-out;
}
.navbar-default .navbar-nav > li > a:hover {
	font-size: 15px;
	line-height: 36px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	background: transparent;
	
	color: #fff;
	background-color: #31A3DD;

}/*
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: #fff;
	background-color: #31A3DD;
}
*/
.navbar-default .navbar-nav > .current_page_item > a, .navbar-default .navbar-nav > .current_page_item > a:hover, .navbar-default .navbar-nav > .current_page_item > a:focus {
	color: #fff;
	background-color: #31A3DD;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #fff;
	background-color: #31A3DD;
}
.navbar-brand, .navbar-brand:hover, .navbar-brand:active, .navbar-brand:focus {
position: relative;
padding: 10px 0px 10px 0px;
font-size: 28px;
line-height: 54px;
font-weight: 600;
color: #777;
font-variant: small-caps;
letter-spacing: 0.02em;
-webkit-transition: font-size .2s ease-out;
transition: font-size .2s ease-out;

}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
  padding-left: 0;
  padding-right: 0;
}
.navbar-wrapper .navbar {
  padding-left: 15px;
  padding-right: 15px;
}

/** haeder slider **/


/*-----------------------
---iPad Slider Styles----
-------------------------*/

.ipad-frame {
    display:block;
    position:relative;
    width:100%;
    margin:0 auto;
    overflow:hidden;
}

.ipad-screen{
    display: block;
	position: absolute;
	top: 6.7%;
	left: 14.375%;
	width: 71.25%;
	height: 81.3%;
	overflow: hidden;
}

.flexslider {
    margin:0;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	z-index:1;
}

.ipad-slider .flex-direction-nav .flex-prev,
.ipad-slider .flex-direction-nav .flex-next{
    background:#31A3DD;
    background-image:none;
    display:inline;
    text-indent:0;
    position:absolute;
    top:50%;
    width:44px;
    height:44px;
    padding:0;
    padding-left:12px;
    margin:0;
    margin-top:-22px;
    font-size:42px;
    line-height:38px;
    color:#fff;
    border-radius:5px;
    -webkit-transition:all .2s ease-out;
    transition:all .2s ease-out;
}

.ipad-slider .flex-direction-nav .flex-next{
    text-align:right;
    padding-right:12px;
}

.ipad-slider .flex-direction-nav a:hover,
.ipad-slider .flex-direction-nav a:active,
.ipad-slider .flex-direction-nav a:focus{
    text-decoration:none;
}

.ipad-slider .flex-direction-nav a:hover {  
    background:#363B46;
}

.ipad-slider:hover .flex-next {opacity: 1; right: 5px;}
.ipad-slider:hover .flex-prev {opacity: 1; left: 5px;}

/** product thumb style **/
.theme-frame {
    display:block;
    position:relative;
    width:100%;
    margin:0 auto;
    overflow:hidden;
}

.theme-screen{
    display: block;
    position: absolute;
    top: 4.0%;
    left: 11.7%;
    width: 77.00%;
    height: 87.0%;
    overflow: hidden;
}


/*-----------------------
-----Scrollimations------
------------------------*/   
.scrollimation.fade-in{
	opacity:0;
	-webkit-transition:opacity 0.6s ease-out;
	transition:opacity 0.6s ease-out;
}

.scrollimation.fade-in.in{
	opacity:1;
}

.scrollimation.scale-in{
	opacity:0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform:scale(0.5);
	-webkit-transition: -webkit-transform .6s cubic-bezier(.17,.89,.67,1.57), opacity .6s ease-out;
	transition: transform .6s cubic-bezier(.17,.89,.67,1.57), opacity .6s ease-out;
}

.scrollimation.scale-in.in{
	opacity:1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform:scale(1);
}

.scrollimation.fade-right{
	opacity:0;
	-webkit-transform: translateX(-100px);
	-moz-transform: translateX(-100px);
	-ms-transform: translateX(-100px);
	transform:translateX(-100px);
	-webkit-transition: -webkit-transform .4s ease-out,opacity .4s ease-out;
	transition: transform .4s ease-out,opacity .4s ease-out;
}

.scrollimation.fade-right.in{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.scrollimation.fade-left{
	opacity:0;
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	-ms-transform: translateX(100px);
	transform:translateX(100px);
	-webkit-transition: -webkit-transform .4s ease-out,opacity .4s ease-out;
	transition: transform .4s ease-out,opacity .4s ease-out;
}

.scrollimation.fade-left.in{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.scrollimation.fade-up{
	opacity:0;
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-ms-transform: translateY(100px);
	transform:translateY(100px);
	-webkit-transition: -webkit-transform .4s ease-out,opacity .4s ease-in;
	transition: transform .4s ease-out,opacity .4s ease-in-out;
}

.scrollimation.fade-up.in{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}

.scrollimation.d1{
	transition-delay:.2s;
}

.scrollimation.d2{
	transition-delay:.4s;
}

.scrollimation.d3{
	transition-delay:.6s;
}

.scrollimation.d4{
	transition-delay:.8s;
}

.touch .scrollimation.fade-in{
	opacity:1;
}

.touch .scrollimation.scale-in{
	opacity:1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform:scale(1);
}

.touch .scrollimation.fade-right{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.touch .scrollimation.fade-left{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.touch .scrollimation.fade-up{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}

/** theme  filter  nav menu css **/
.align-center{
	text-align:center;
	margin-bottom:50px;
}
.nav-pills{
	
	display: inline-block;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
}

.current-menu-item a{
    background-color: #31a3dd !important;
}
.current-menu-item a{
    color: #ffffff !important;
}

.nav-pills > li  > a{
	color: #fff;
	border: 3px solid #fff;
	margin-right:15px;
	margin-bottom:15px;
	border-radius: 0px;
	padding: 9px 27px;
	background-size: 100% 200%;
    background-image: linear-gradient(to bottom, transparent 50%, #31A3DD 50%);
   -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5s;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 18px;

}
.nav-pills > li  > a:hover{
	color: #fff;
	background-position: 0 -100%;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
	color: #fff;
	background-image: linear-gradient(to bottom, #31A3DD 50%, #31A3DD 50%);
   -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5s;
}

/** pricing table **/

.promos {
  max-width: 1140px;
  margin: 0 auto;
  font-size: 100%;
  padding: 3em 0;
  overflow:hidden;
  margin-bottom:100px;
}

.promo {
  margin: 1em .5em 1.625em;
  padding: .25em 0 2em;
  background: #0f1012;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  line-height: 1.625;
  color: #f9f9f9;
  text-align: center;
  font-size: 18px
 
}
.promo  .features{
	font-size: 18px !important;
	
}
.scale{
	font-size: 18px !important;
}
@media (min-width: 40em) {
  .promo {
    display: inline;
    float: left;
    width: 33.333%;
    margin: 1em 0 0;
  }
  .promo.first {
    border-right: none;
	font-size: 18px
  }
  .promo.second {
    float: right;
    border-left: none;
	font-size: 18px
  }
}
.promo h4 {
  margin: .25em 0 0;
  font-size: 170%;
  font-weight: normal;
}
.promo .features {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #999999;
}
.promo li {
  padding: .25em 0;
}
.promo .brief {
  color: #f9f9f9;
}
.promo .price {
  margin: .5em 0;
  padding: .25em 0;
  background: #292b2e;
  font-size: 250%;
  color: #f9f9f9;
}
.promo .buy {
  margin: 1em 0 0;
}
.promo button {
  padding: 1em 3.25em;
  border: none;
  border-radius: 40px;
  background: #292b2e;
  color: #f9f9f9;
  cursor: pointer;
}
.promo button:hover {
  background: #27282b;
}

.scale button {
  background: #64aaa4;
}
.scale button:hover {
  background: #4e8d88;
}
@media (min-width: 40em) {
  .scale {
    -webkit-transform: scale(1.2);
    box-shadow: 0 0 4px 1px rgba(20, 20, 20, 0.8);
  }
  .scale .price {
    color: #64aaa4;
  }