/*-- ===============================================

- Description -

Product: 'Pixel - HTML5 App Landing Page'
Version: 1.0;
Author: Mohammad Ahsan Habib
Date Created: February 6, 2017
Support: ahsanthemes@gmail.com

==================================================== --*/


/*-- == Table of contents =====================

( Example: Type 'ctrl+f' and then '1.example' to jump to the
 "example" section. Click 'find' if needed.)
 
1.reset css
2.header css
3.banner css
4.overview css
5.features css
6.starter css
7.screenshots css
8.details css
9.feedback css
10.video css
11.pricing css
12.blog css
13.subscribe css
14.contact css
15.footer css
16.full screen popup
17.Media Queries

================================================== --*/


/*-- 1.reset css
======================================== --*/
html{
	padding: 0;
	margin: 0;
}

body{
	font-family: 'Arimo', sans-serif;
	margin: 0;
	padding: 0;
	position: relative;
	/*overflow: auto;*/
	/*overflow-y: hidden;*/
}
p{
	font-size: 15px;
	line-height: 26px;
	color: black;
}
a{
	text-decoration: none!important;
}
button:focus-visible,
a:focus-visible {
	outline: 3px solid blue !important;
}
.section_title{
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 2;
}
.section_title h2{
	width: 100%;
	display: block;
	font-size: 36px;
	line-height: 40px;
	color: #ffd202;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	z-index: 100;
	margin-bottom: 20px;
	position: absolute;
	top: -10px;
	left: 0;
}

.section_title .wt_mark{
	width: 100%;
	display: block;
	font-size: 45px;
	line-height: 1;
	color: #444444;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	opacity: 1;
}
.section_title p{
	max-width: 900px;
	margin: 0 auto;
}
h3{
	font-size: 18px;
	line-height: 30px;
	color: #444444;
	text-transform: capitalize;
	font-weight: 700;
}
h2.title{
	font-size: 30px;
	line-height: 40px;
	color: #444444;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}
.underline {
	text-decoration: underline!important;
}
.blackAndWhite {
	background: #000 !important;
	color: #ffffff !important;
}
.whiteAndBlack {
	background: #ffffff !important;
	color: #000 !important;
}
.whiteColor {
	background: transparent !important;
	color: #ffffff !important;
}
.contrastColor {
	background: transparent !important;
	color: #11FF9D !important;
}
.blackColor {
	color: #000000 !important;
}
.blackAndWhiteImage {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}
.contrastImage{
	-webkit-filter: hue-rotate(90deg); /* Safari 6.0 - 9.0 */
	filter: hue-rotate(90deg);
}
.btn{
	background: #ffffff;
	color: #555555;
	padding: 0 40px;
	font-size: 16px;
	line-height: 50px;
	font-weight: 700;
	text-transform: uppercase;
	border: 2px solid #ffffff;
	margin: 10px;
	margin-top: 20px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	border-radius: 50px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
}
.navbar .blackAndWhite a:hover,
.navbar .blackAndWhite a:focus{
	background: transparent!important;
	color: #777777!important;
}
.btn:hover{
	background: transparent;
	color: #ffffff;
}
.btn.start{
	background: transparent;
	color: #ffffff;
}
.btn.start:hover,
.btn.start:focus{
	background: #ffffff;
	color: #555555;
}
.btn.blue{
	background: #ffd202;
	color: #ffffff;
	border-color: #ffd202;
}
.btn.blue:hover,
.btn.blue:focus{
	background: transparent;
	color: #ffd202;
}
.bg-white{
	background: #ffffff;
}
.bg-off{
	background: #eeeeee;
}
.bg-off-2{
	background: #363636;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{
	background: #0066ff;
}
.hvr{
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	position: relative;
}
.hvr:before{
	content: '';
	position: absolute;
	border: #e1e1e1 solid 3px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}
.hvr:hover:before, 
.hvr:focus:before, 
.hvr:active:before {
	-webkit-animation-name: hvr;
	animation-name: hvr;
}

/*-- button hover effect --*/
@-webkit-keyframes hvr{
	100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}
}
@keyframes hvr{
	100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}
}

/*-- 2.header css
================================== --*/
.navbar-nav-rtl li {
	float: right!important;
}
.navbar-default{
	background: #494949;
	border: none;
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.10);
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.10);
	-ms-box-shadow: 0 0 3px rgba(0,0,0,.10);
	box-shadow: 0 0 3px rgba(0,0,0,.10);
	margin: 0;
}
.navbar-default li{
	margin:  0 15px;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
	border: none;
}

.navbar-brand a{
	color: inherit;
}

.langBtns{
	padding: 5px!important;
	border: 2px solid #b29002;
	background: #edc302;
	border-radius: 40px;
	display: inline-block;
}
.langBtns li{
	margin: 0!important;
	padding: 0;
	font-size: 15px!important;
	display: inline;
}
.langSelected {
	background: none;
	color: white;
}

.langBtn-en{
	position: absolute;
	top:0
}

.navbar-brand img {
	position: relative;
	display: inline;
	max-width: 125px;
}

#home-logo-tag {
	position: relative;
	display: inline;
	max-width: 200px;
}

.banner h1 span img,
.banner-sms h1 span img,
.banner-promo h1 span img{
	max-width: 280px;
}

.footer-li-a-selected {
	color: #ffd202;
	background-color: transparent;
}

.navbar-default .navbar-nav li a,
footer li a {
	font-size: 13px;
	line-height: 80px;
	/*color: #777777;*/
	color: white;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 0;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
}
.navbar-default .navbar-nav > li > a:focus, 
.navbar-default .navbar-nav > li > a:hover,
footer li a:hover,
footer li a:focus{
	color: #ffd202;
	background-color: transparent; 
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover{
	color: #ffd202;
	background-color: transparent;
}
.WebProduct-SubTitle{
	color: #777777;
}

/*-- 3.banner css
================================== --*/
.download-banner-col7-rtl{
	direction: rtl;
	margin: 0!important;
	float: right;
}
.download-banner-col4-rtl{
	direction: rtl;
	float: left;
}
.banner{
	 width: 100%;
	 height: 100vh;
	 background: linear-gradient(
			 rgba(20,20,20, .8),
			 rgba(20,20,20, .8)),
	 url(../images/iStock-1173258771.jpg) center no-repeat;
	 background-size: cover;
	 color: #ffffff;
	 position: relative;
 }

.banner .content{
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.banner-sms{
	 width: 100%;
	 /*background: linear-gradient(*/
		/*	 rgba(20,20,20, .8),*/
		/*	 rgba(20,20,20, .8)),*/
	 /*url(../images/bg.jpg) center no-repeat;*/
	 background-size: cover;
	 color: #ffffff;
	 position: relative;
	 direction: rtl;
	 min-height: 500px;
	 align-items: center;
	 justify-content: center;
 }
.banner-promo{
	width: 100%;
	background: linear-gradient(
			rgba(20,20,20, .8),
			rgba(20,20,20, .8)),
	url(../images/iStock-1173258771.jpg) center no-repeat;
	background-size: cover;
	color: #ffffff;
	position: relative;
	direction: rtl;
	min-height: 500px;
	align-items: center;
	justify-content: center;
}
.banner-sms .content,
.banner-promo .content{
	position: relative;
}
.banner h1,
.banner-sms h1 ,
.banner-promo h1{
	font-size: 40px;
	font-weight: 900;
	text-transform: capitalize;
}
.banner h1 span,
.banner-sms h1 span,
.banner-promo h1 span{
	font-size: 90px;
	display: block;
}
.banner p,
.banner-sms p,
.banner-promo p{
	color: #ffffff;
}

/*-- html5 video background --*/
.banner.video_bg{
	height: auto;
	background: none;
}
.banner.video_bg .video_inner{
	position: relative;
}
.banner.video_bg .video_inner .overlay{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3);
	position: absolute;
	left: 0;
	right: 0;
	top: -6px;
}
.banner.video_bg video{
	width: 100%;
}
.banner.video_bg .container,
.banner.video-section .container{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
}
.banner.video_bg h1,
.banner.video-section h1{
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 8px;
}
.banner.video_bg h1 span,
.banner.video-section h1 span{
	font-size: 50px;
	font-weight: 700;
	margin-bottom: 20px;
}

/*-- youtube video background --*/
.banner.video-section{
	background: #252525;
}
.video-section .pattern-overlay {
	background-color: rgba(0,0,0,.3);
	padding: 0 15px;
	height: 100vh;
	position: relative;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}


















/*-- 4.overview css
================================== --*/
.overview .h3{
	font-size: 18px;
	line-height: 30px;
	color: #444444;
	text-transform: capitalize;
	font-weight: 700;
}
.overview .content{
	padding: 0 20px;
}
.overview .icon{
	width: 100px;
	height: 100px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	background: #eeeeee;
}
.overview .icon i {
	font-size: 36px;
	line-height: 100px;
	color: #ffd202;
}
.overview .content:hover .hvr:before {
	-webkit-animation-name: hvr;
	animation-name: hvr;
}

/*-- 5.features css
================================== --*/
.features .content h1{
	position: relative;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
	cursor: pointer;
	font-size: 18px;
	line-height: 30px;
	color: #444444;
	text-transform: capitalize;
	font-weight: 700;
}
.features .content h1:hover{
	color: #ffd202;
}
.features .content h1 i{
	position: absolute;
	right: -60px;
	top: 8px;
	z-index: 5;
	font-size: 36px;
	line-height: 1;
	color: #ffd202;
	font-weight: bold;
}
.features .content.pl-70 h1 i{
	right: auto;
	left: -60px;
}

/*-- 6.starter css
================================== --*/
.starter h1{
	font-size: 30px;
	line-height: 30px;
	color: #444444;
	font-weight: 700;
}
.starter h6{
	font-size: 25px;
	line-height: 25px;
	color: #ffffff;
	font-weight: 400;
}
.starter p{
	color: black;
}

.get60days input{
	margin-bottom: 10px;
}

/*-- 7.screenshots css
================================== --*/
.screenshots .kc-item img{
	width: 100%;
	height: 100%;
	left: 0;
	position:absolute;
	cursor: pointer;
}
.screenshots .hvr-shutter-in-horizontal{
	background-color: #555555!important;
	margin: 30px 0 20px;
	color: #eaad13!important;
}
.screenshots .hvr-shutter-in-horizontal::before{
	background-color: #ffffff!important;
}
.screenshots .kc-wrap{
	padding-bottom: 33%;
}
.screenshots p{
	max-width: 900px;
	margin: 0 auto ;
}

/*-- 8.details css
================================== --*/
.details .empty-phone {
	position: absolute;
	width: 400px;
	left: 76px;
	height: 448px;
	top: 50px;
	z-index: 999;
	margin: auto;
}
.details h1{
	font-size: 48px;
	line-height: 1;
	font-weight: 700;
	color: #444444;
}
.details .btn{
	line-height: 10px;
	margin: 10px 0;
}
.details.get_app h1{
	font-size: 48px;
	text-transform: capitalize;
	color: #ffd202;
}
.details .content{
	position: relative;
}
.details .content .owl-carousel{
	position: relative;
	top: 10px;
	width: 400px;
	height: 600px;
	margin: 0 auto;
	background-size: contain;
	padding: 50px 90px 87px 81px;
}
.details .content .owl-carousel .item{
	height: 600px;
}
.details .content .figure{
	width: 290px;
	height: auto;
	position: absolute;
	top: -100px;
	left: 51%;
	transform: translateX(-50%);
}
.details .owl-dots{
	width: 100%;
	position: absolute;
	bottom: 85px;
	left: 0;
}
.details .list-inline a i{
	font-size: 24px;
	line-height: 1;
	color: #ffd202;
	padding: 5px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
}
.details .list-inline a:hover i{
	color: #555555;
}
.details .owl-dots .owl-dot span{
	width: 5px;
	height: 5px;
}
.details.get_app h2{
	font-size: 20px;
}
.get_app p{
	max-width: 800px;
	margin: 0 auto 30px;
}
.get_app a img:hover{
	opacity: .7;
}

/*-- 10.video css
================================== --*/
.video{
}

/*-- 11.pricing css
================================== --*/
.pricing ul{
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,.15);
	-moz-box-shadow: 0 3px 10px rgba(0,0,0,.15);
	-ms-box-shadow: 0 3px 10px rgba(0,0,0,.15);
	box-shadow: 0 3px 10px rgba(0,0,0,.15);
	overflow: hidden;
	margin-bottom: 30px;
	cursor: pointer;
}
.pricing.recommend{
	-webkit-box-shadow: 0 5px 50px rgba(0,0,0,.15);
	-moz-box-shadow: 0 5px 50px rgba(0,0,0,.15);
	-ms-box-shadow: 0 5px 50px rgba(0,0,0,.15);
	box-shadow: 0 5px 50px rgba(0,0,0,.15);
}
.pricing ul:hover{
	-webkit-box-shadow: 0 5px 50px rgba(0,0,0,.15);
	-moz-box-shadow: 0 5px 50px rgba(0,0,0,.15);
	-ms-box-shadow: 0 5px 50px rgba(0,0,0,.15);
	box-shadow: 0 5px 50px rgba(0,0,0,.15);
}
.pricing li{
	font-size: 12px;
	line-height: 1.5;
	padding: 10px 0;
	text-transform: uppercase;
	color: #999999;
	letter-spacing: 1px;
}
.pricing .heading{
	font-size: 16px;
	padding: 30px 0;
	color: #999999;
	font-weight: 700;
	position: relative;
}
.pricing.recommend .heading::after{
	content: " recommended ";
	background: #ffffff;
	font-size: 10px;
	line-height: 40px;
	color: #3fb200;
	padding: 0 40px;
	position: absolute;
	left: -48px;
	top: 15px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.15);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.15);
	-ms-box-shadow: 0 0 10px rgba(0,0,0,.15);
	box-shadow: 0 0 10px rgba(0,0,0,.15);
}
.pricing .price{
	padding: 25px 0;
	background: #eeeeee;
	margin-bottom: 20px;
}
.pricing .price span{
	font-size: 36px;
	line-height: 1;
	color: #ffd202;
	font-weight: 700;
	display: block;
	margin-bottom: 10px;
}
.pricing .btn{
	line-height: 40px;
	margin: 15px 0;
	padding: 0 30px;
}

/*-- 12.blog css
================================== --*/
.blog .item{
	border: 1px solid #eeeeee;
	margin-bottom: 30px;
}
.blog .content{
	padding-top: 0;
}
.blog a{
	font-size: 13px;
	color: #555555;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}
.blog h3 a{
	font-size: 16px;
	font-weight: 700;
	color: #555555;
}
.blog h6{
	font-size: 11px;
	line-height: 1;
	color: #999999;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.blog h6 a{
	font-size: 10px;
	color: #999999;
	font-weight: 400;
	border-left: 2px solid #cccccc;
}
.blog a i{
	vertical-align: middle;
}
.blog a:hover{
	color: #ffd202;
}
.blog .owl-theme .owl-nav{
	position: absolute;
	top: -65px;
	right: 0;
}
.blog .owl-theme .owl-nav [class*="owl-"]{
	background: #ffd202;
	border-radius: 0;
	font-size: 12px;
	line-height: 25px;
	text-transform: uppercase;
	margin: 1px;
}

/*-- 13.subscribe css
================================== --*/
.subscribe h3{
	font-size: 30px;
	line-height: 1;
	color: #ffffff;
	font-weight: 700;
}
.subscribe .section_title h2{
	position: static;
	color: #ffffff;
	margin-bottom: 10px;
}
.subscribe .section_title p{
	color: #ffffff;
}
.subscribe form{
	max-width: 570px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.subscribe .form-control{
	width: 100%;
	height: 50px;
	padding: 0 40px;
	background: #ffffff;
	color: #999999;
	box-shadow: none;
	border: none;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	border-radius: 50px;
}
.subscribe .btn{
	position: absolute;
	right: 3px;
	top: 3px;
	margin: 0;
	border: none;
	line-height: 44px;
}
.subscribe .btn:hover,
.subscribe .btn:focus{
	background: #e1e1e1;
}

/*-- 14.contact css
======================================== --*/
.starter .he .contactUs,
.starter .en .contactUs{
 margin-bottom: 30px !important;
}

.quform-outer-acc{
	max-width: 350px;
	width: 80%;
	background: #363636;
	position: fixed;
	top: 50px;
	right: -350px;
	z-index: 9999;
}

.quform-outer-acc a:hover{
	color: rgba(0, 136, 255, 0.6) !important;
}

.quform-outer{
	max-width: 350px;
	width: 100%;
	background: #363636;
	position: fixed;
	top: 80px;
	right: -350px;
	z-index: 9999;
}
.quform-outer p {
	color: white;
}
.quform-inner{
	position: relative;
}

.msg_icon_acc{
	width: 50px;
	height: 50px;
	background: #ffd202;
	/*position: absolute;*/
	/*left: -50px;*/
	position: fixed;
	right: 0;
	top: 50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	box-shadow: 0 2px 5px rgba(0,0,0,.10);
	color: white;
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
}
.msg_icon_acc_expand{
	position: absolute;
	left: -50px;
	right: unset;
}
.msg_icon{
	width: 50px;
	height: 50px;
	background: #363636;
	position: absolute;
	left: -50px;
	top: 50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	box-shadow: 0 2px 5px rgba(0,0,0,.10);
}
.quform-title{
	font-size: 18px;
	line-height: 30px;
	text-transform: capitalize;
	font-weight: 700;
	color: #ffffff;
}
.msg_icon .floating .floating-acc{
	display: block;
	cursor: pointer;
}
.msg_icon i{
	color: #ffffff;
	font-size: 20px;
	line-height: 50px;
}
.expand{
	right: 0;
	z-index: 10000;
}
.quform-outer-acc .form-control,
.quform-outer .form-control{
	width: 100%!important;
	padding: 0 20px;
	height: 50px;
	margin-bottom: 15px;
	box-shadow: none;
}
.quform-outer-acc textarea.form-control,
.quform-outer textarea.form-control{
	padding: 13px 20px;
}
.quform-outer-acc .form-control:hover,
.quform-outer-acc .form-control:focus,
.quform-outer .form-control:hover,
.quform-outer .form-control:focus{
	border-color: #ffc200;
}
label{
	color: #363636;
}
.quform-input label{
	color: #ff0037!important;
	border: none !important;
}
.quform-he .intl-tel-input .selected-flag .iti-flag{
	left: 8px;
}

.quform-he .quform-input label{
	top: 0;
	left: 20px;
	position: absolute;
}
#quform-en .quform-input label{
	top: 0;
	right: 20px;
	position: absolute;
}
.intl-tel-input {
	width: 100%;
	margin-bottom: 15px;
}

.quform-input .error{
	border: 1px solid #ff0037;
}
.quform-submit-inner,
.quform-submit-inner-acc{
	float: none;
}
.quform-outer-acc .btn,
.quform-outer .btn{
	width: 240px;
}
.quform-errors > .quform-error, 
.quform-outer-no-js .quform-error{
	background: #ffffff url('../images/info-flat.png') 6px center no-repeat;
	border:none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	padding: 10px 25px;
	font-size: 14px;
	color: #00c2fc;
}

/*-- 15.footer css
======================================== --*/
footer{
	background: #252525;
}
footer img{
	max-width: 200px!important;
}
footer .list-inline{
	margin: 30px 0;
}
footer ul li{
	padding: 0!important;
	margin: 0 10px;
}
footer li a{
	line-height: 30px;
	color: white;
}
footer .social img{
	width: 22px;
	height: 16px;
}
footer li.social{
	display: block;
	padding: 0;
}
footer .social ul{
	margin: 20px auto;
}
footer .social ul p{
	margin: 0;
	padding: 0;
}
footer li.social a .fa{
	width: 30px;
	line-height: 30px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
	background: #363636;
}

/*-- 16.full screen popup
======================================== --*/

/* The Overlay (background) */
.overlay {
	/* Height & width depends on how you want to reveal the overlay (see JS below) */
	height: 0%;
	width: 100%;
	position: fixed; /* Stay in place */
	z-index: 99999; /* Sit on top */
	left: 0;
	bottom: 0;
	background-color: rgb(0,0,0); /* Black fallback color */
	background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
	overflow-x: scroll; /* Disable horizontal scroll */
	overflow-y: scroll;
	overflow: scroll;
	transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content-he {
	position: relative;
	top: -80px; /* 25% from the top */
	width: 100%; /* 100% width */
	margin: 0; /* 30px top margin to avoid conflict with the close button on smaller screens */
	padding: 50px;
}

.overlay-content-en {
	position: relative;
	top: -80px; /* 25% from the top */
	width: 100%; /* 100% width */
	margin: 0; /* 30px top margin to avoid conflict with the close button on smaller screens */
	padding: 50px;
}

/* The navigation links inside the overlay */
.overlay a {
	text-decoration: none;
	font-size: 50px;
	color: #818181;
	display: block; /* Display block instead of inline */
	transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
	color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn-en {
	width: 80px;
	height: 80px;
	position: absolute;
	top: 10px;
	right: 25px;
	color: white;
}

.overlay .closebtn-he {
	width: 80px;
	height: 80px;
	position: absolute;
	top: 10px;
	left: 25px;
	color: white;
}

.overlay .title-he{
	direction: rtl;
	color: white;
	font-weight: bold;
	text-align: right;
	padding: 50px;
}

.overlay .developers-logo{
	max-width: 500px;
	top: 10%;
	position: relative;
}

.overlay .title-en{
	color: white;
	font-weight: bold;
	text-align: left;
	padding: 50px;
}

.enable-scrolling{
	overflow-x: hidden!important;
	overflow-y: hidden!important;
	overflow: hidden!important;
}
.overlay-content .sector,
.overlay-content-en .sector,
.overlay-content-he .sector {
	padding-bottom: 10px;
}

.overlay-content .sector h4,
.overlay-content-en .sector h4,
.overlay-content-he .sector h4{
	/* color: #FFFFFF; */
	color: black;
}

.overlay-content .sector ul,
.overlay-content-en .sector ul,
.overlay-content-he .sector ul{
	list-style-type: decimal;
	color: #999999;
	padding: 0px 30px 0 30px;
}

/*-- 17.Loading Queries
======================================== --*/

#loading-wrapper {

	background-color: rgba(34, 34, 34, 0.9);
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 99999999;
	display: flex;
	justify-content: center;
	align-items: center;
}

#loading-text {
	color: #999;
	text-align: center;
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 18px;
	position: relative;
	top: 60px;
}

#loading-content {
	width: 170px;
	height: 170px;
	position: relative;
	bottom: 35px;
}

#loading-content:after {
	content: "";
	position: absolute;
	border: 3px solid #0F0;
	left: 15px;
	right: 15px;
	top: 15px;
	bottom: 15px;
}

#loading-content:before {
	content: "";
	position: absolute;
	border: 3px solid #00F;
	left: 5px;
	right: 5px;
	top: 5px;
	bottom: 5px;
}

#loading-content {
	border: 3px solid transparent;
	border-top-color: #4D658D;
	border-bottom-color: #4D658D;
	border-radius: 50%;
	-webkit-animation: loader 2s linear infinite;
	-moz-animation: loader 2s linear infinite;
	-o-animation: loader 2s linear infinite;
	animation: loader 2s linear infinite;
}

#loading-content:before {
	border: 3px solid transparent;
	border-top-color: #D4CC6A;
	border-bottom-color: #D4CC6A;
	border-radius: 50%;
	-webkit-animation: loader 3s linear infinite;
	-moz-animation: loader 2s linear infinite;
	-o-animation: loader 2s linear infinite;
	animation: loader 3s linear infinite;
}

#loading-content:after {
	border: 3px solid transparent;
	border-top-color: #84417C;
	border-bottom-color: #84417C;
	border-radius: 50%;
	-webkit-animation: loader 1.5s linear infinite;
	animation: loader 1.5s linear infinite;
	-moz-animation: loader 2s linear infinite;
	-o-animation: loader 2s linear infinite;
}

@-webkit-keyframes loaders {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*-- 17.Media Queries
======================================== --*/

@media screen and (max-width: 1200px) {
	.navbar-default li{
		margin: 0 10px;
	}
	.features .content{
		padding-top: 10px;
	}
	.features .content.text-right{
		padding-right: 30px;
	}
	.features .content.text-left{
		padding-left: 30px;
	}
	.features .content p{
		line-height: 25px;
	}
	.features .content h1 i{
		right: -50px;
	}
	.features .content.pl-70 h1 i{
		left: -50px;
	}
}

@media screen and (max-width: 1200px) {
	.starter .he .contactUs{
		margin-bottom: 46px !important;
	}
	.details .empty-phone {
		left: 27px;
	}
}

@media screen and (max-width: 991px) {
	.container-fluid{
		padding: 0 30px;
	}
	.features .content{
		padding: 0 15px;
	}
	.features .content h1 i{
		display: block;
		position: static;
		margin-bottom: 15px;
	}
	.features .content h1::after{
		display: none;
	}
	.navbar-default li{
		margin: 0 8px;
	}
	.navbar-default .navbar-nav li a{
		font-size: 11px;
		letter-spacing: 0;
		text-align: center;
	}
	.features .row{
		margin-bottom: 20px;
	}
	.features [class*="col-"]{
		padding: 0 20px;
	}
	.features img{
		margin-top: 50px;
	}
	.starter .en .contactUs{
		margin-bottom: 60px !important;
	}
	.details .empty-phone {
		left: 0px;
		width: 400px;
		max-width: none;
	}
}

@media screen and (max-width: 768px) {
	.bg-off-2{
		background: #252525;
	}
	 .navbar-nav-rtl li {
		float: none!important;
	}
	.pull-right{
		float: none!important;
		margin: 0 auto;
	}
	h2{
		font-size: 24px!important;
		line-height: 1.2!important;
	}
	.section_title h2{
		font-size: 24px!important;
		top: -15px;
	}
	.section_title h2 span{
		font-size: 24px;
	}
	.section_title .wt_mark{
		font-size: 38px;
		top: 0;
	}
	.navbar-toggle{
		margin: 20px 15px 16px 15px;
		background: #555555;
		border: none;
		border-radius: 0;
	}
	.navbar-default .navbar-toggle .icon-bar{
		background: #ffffff;
	}
	.navbar-default .navbar-toggle:hover,
	.navbar-default .navbar-toggle:focus{
		background: #6a6a6a;
	}
	.navbar-default .navbar-nav li a{
		line-height: 40px;
		text-align: center;
	}
	.banner.video_bg video{
		padding-top: 50px;
	}
	.banner.video_bg h1{
		font-size: 20px;
		font-weight: 300;
		letter-spacing: 2px;
		padding-top: 50px;
	}
	.banner.video_bg h1 span{
		font-size: 36px;
		font-weight: 700;
		margin-bottom: 10px;
	}
	.features .content{
		padding: 0!important;
		text-align: center;
	}
	.grad{
		text-align: center;
	}
	.banner h1 span,
	.banner-sms h1 span,
	.banner-promo h1 span{
		font-size: 54px;
	}
	.banner h1,
	.banner-sms h1,
	.banner-promo h1{
		font-size: 30px;
	}
	.download-banner-col7-rtl{
		direction: rtl;
		margin: 0!important;
		float: none;
	}
	.download-banner-col4-rtl{
		direction: rtl;
		float: none;
	}
	.blog .owl-theme .owl-nav{
		right: 50%;
		-webkit-transform: translateX(50%);
		-moz-transform: translateX(50%);
		-ms-transform: translateX(50%);
		transform: translateX(50%);
	}
	.subscribe .form-control{
		max-width: 100%;
	}
	.subscribe .form-control{
		padding: 0 20px;
		text-align: left;
	}
	.subscribe .btn{
		padding: 0 20px;
		font-size: 14px;
	}
	.features .pt-70{
		padding-top: 0;
	}
	.quform-outer {
		position: static;
		max-width: 100%;
		padding: 30px 15px;
	}
	.quform-outer .quform-inner{
		padding: 0;
	}
	.msg_icon{
		display: none;
	}
	.overlay .developers-logo{
		max-width: 300px;
		top: 10%;
		position: relative;
	}
	#appDetails .col-sm-6{
		float: none !important;
		text-align: center;
	}
	.starter .he .contactUs,
	.starter .en .contactUs {
		margin-bottom: 8px !important;
	}
	.details .empty-phone {
		left: 0;
		right: 0;
	}
	#downloadAppItor h3 {
		font-size: 36px;
	}
	#downloadApp1900M h3 {
		font-size: 36px;
	}
	#iTorAppDetailsScreens,
	#iTorAppDetailsText {
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 440px) {
	.banner h1 span img,
	.banner-sms h1 span img,
	.banner-promo h1 span img{
		max-width: 200px;
	}
	.download-banner-col7-rtl{
		direction: rtl;
		margin: 0!important;
		float: none;
	}
	.download-banner-col4-rtl{
		direction: rtl;
		float: none;
	}
	.navbar-nav-rtl li {
		float: none!important;
	}
	.overlay .developers-logo{
		max-width: 250px;
		top: 10%;
		position: relative;
	}
	.starter .he .contactUs,
	.starter .en .contactUs {
		margin-bottom: 8px !important;
	}
}

/*-- ============== End of css ============== --*/