@import "variables";
@import "functions";
@import "mixins";

a:link,a:active,a:hover,a:visited {
	text-decoration: none !important;
	outline: none !important;
}
.opacity-null {
	opacity: 0;
}
/******************* notification css *******************/

.pos-notification {
	background: #444444 url("../images/notification.png") no-repeat scroll 24px 16px;
    position: fixed;
    bottom: 4px;
    left: 4px;
    right: 4px;
    text-align: center;
    border-radius: 2px;
    z-index: 1000;
    transition: 0.4s;
	.font(@font-muli, 300, 20px, #FFFFFF);

    &.pos-err {
	    background-color: #d8544e !important;
	}
}
/******************* end notification css *******************/

header {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	padding-top: 0.9375em;
	padding-bottom:0.9375em;
	background-color: #FFFFFF;
	.menu {
		a {
			.font(@font-muli, 600, 1em, #333333);
			padding: 10px 2.25em !important;
			&:hover {
				color: #64acf4;
				background-color: transparent !important;
			}
			&:visited {
				background-color: transparent !important;
			}
			&:focus {				
				background-color: transparent !important;
			}
		}

		li.active > a {
			background: transparent !important;
			color: #64acf4;
			border: 0.125em solid #64acf4;
		}
	}

	&.box-shadow {
		//.box-shadow(0px, 0px, 0.3125em, 0px, #888888);
	}
}

#home {
	padding-top: 5.5em;
	.slogan {
		.font(@font-muli, 200, 2.625em, #222222);
		@media screen and (min-width:1366px){
			margin-top: 84px;
		}
		@media screen and (max-width:1366px) {
			margin-top:72px;
		}
		@media screen and (max-width:1120px) {
			font-size: 2em !important;
		}
		@media screen and (min-width:768px) and (max-width:920px) {
			font-size: 1.5em !important;
		}
	}
	.sub-slogan {
		.font(@font-muli, 600, 1em, #555555);
	}

	[name=shop_name] {
		@media screen and (min-width:768px) and (max-width:920px) {
			height: 32px !important;
			padding: 2px 15px;
		}
		border: 0.125em solid #64acf4;
		height: 64px;
		padding: 15px;
		font-style: italic;
		outline: none !important;
		.font(@font-muli, 700, 1em, #99B8D7);
		&.has-err {
			border-color: #D8544E !important;
		}
	}
	[name=install] {
		@media screen and (min-width:768px) and (max-width:920px) {
			height: 32px !important;
		}
		@media screen and (max-width:767px) {
			margin-top: 15px !important;
		}
		height: 64px;		
	}
	img {
		margin-top: 52px;
		margin-bottom: 44px;
	}
}
.btn-blue {
	.font(@font-muli, 700, 1em, #FFFFFF);
	background-color: #64acf4;
	border: 0 none;
	color: white;
	width: 100%;
	margin-bottom: 2em;
}
::-moz-placeholder{
	font-family : @font-muli;
	font-weight : 600 !important ;
	font-size : 1em !important ;
	color : #99B8D7 !important;
}
::-ms-placeholder {
	font-family : @font-muli;
	font-weight : 600 !important ;
	font-size : 1em !important ;
	color : #99B8D7 !important;
}
::-webkit-placeholder {
	font-family : @font-muli;
	font-weight : 600 !important ;
	font-size : 1em !important ;
	color : #99B8D7 !important;
}

.heading {
	.font(@font-muli, 400, 34px, #FFFFFF);
}
.sub-heading {
	.font(@font-muli, 600, 16px, #d4e9ff);
}

footer {
	background-color: #1E2E3D;
	padding-top: 24px;
	padding-bottom: 24px;
	.font(@font-muli, 700, 14px, #344B61);
	
	a {
		cursor: pointer;
		.font(@font-muli, 700, 14px, #344B61);
		&:hover	{
			color:#677E94;
		}
	}
}

.color-white {
	color: white;
}

.sup {
	.font(@font-muli, 400, 18px, #FFFFFF);
}

.get-this-app {
	border: 0 none;
	border-radius: 2px;
	box-shadow: 0 0 6px -1px #000000;
	height: 55px;
	margin-top: 15px;
	width: 200px;
	background-color: #f2f2f2;
	.font(@font-muli, 600, 14px, #64acf4);

	&:hover {
		background-color: #FFFFFF;
	}
}

.form-control {
	font-family : @font-muli;
	font-weight: 700;
	font-size: 18px !important;
	color: #222222;
	border-width: 0 0 1px 0 !important;
	border-bottom-color: #777777 !important;
	border-style: solid !important;
	border-radius: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	transition : 1s;
	padding-left: 0 !important;
	padding-right: 0 !important;
	&:focus {
		border-bottom-width: 3px !important;
		border-bottom-color: #64acf4 !important;
	}
}
.btn-send {
	width: 172px;
	height: 52px;
}
label {
	font-family: @font-muli;
	font-size: 14px;
	color: #333333;
	font-weight: 400 !important;
}

@media (max-width: 768px) {
	.navbar-toggle {
		margin: 0px !important;
	}
	.menu {
		#navbar {
			margin-top: 0.9375em;			
		}		
		&.pull-right{
			float: unset !important;
		}
		a {
			border: none !important;
			margin-top: 0.3125em;
			margin-bottom: 0.3125em;
		}
	}
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  animation-name: bounceInUp;
}

@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  animation-name: bounceOutDown;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}