@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700;900&display=swap');

*{
	transition: all 0.5s;
}
 
body,html{
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	direction: rtl;
	font-family: "Rubik";
}

.clearpm{
	padding: 0;
	margin: 0;
}

.ltr{
	direction: ltr;
}

.rtl{
	direction: rtl;
}

.mt20{
	margin-top: 20px !important;
}

.jconfirm-content-pane{
	overflow: hidden;
}

.jconfirm-box-container,
.full_screen{
	width: 100%;
	height: 70vh;
}

textarea{
	resize: none;
	width: 100%;	
}

#ajax{
	background: rgba(2,169,227,1);
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: table;
}

#ajax .ajax_animation{
	display: table-cell;
	height: 100%;
	width: 100%;
	vertical-align: middle;
	text-align: center;	
}

#ajax .logo{
	height: 42px;
	background: url(../images/logo_white.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 20px auto;
}


#ajax .spinner{
	-webkit-animation: rotator 1.4s linear infinite;
	animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator{
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(270deg);
	}
}

@keyframes rotator {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(270deg);
	}
}
.path{
	stroke-dasharray: 187;
	stroke-dashoffset: 0;
	transform-origin: center;
	-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
	animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors{
	0% {
		stroke: #4285F4;
	}
	25% {
		stroke: #DE3E35;
	}
	50% {
		stroke: #F7C223;
	}
	75% {
		stroke: #1B9A59;
	}
	100% {
		stroke: #4285F4;
	}
}

@keyframes colors{
	0%{
		stroke: #4285F4;
	}
	25%{
		stroke: #DE3E35;
	}
	50%{
		stroke: #F7C223;
	}
	75%{
		stroke: #1B9A59;
	}
	100%{
		stroke: #4285F4;
	}
}

@-webkit-keyframes dash{
	0%{
		stroke-dashoffset: 187;
	}
	
	50%{
		stroke-dashoffset: 46.75;
		transform: rotate(135deg);
	}
	
	100%{
		stroke-dashoffset: 187;
		transform: rotate(450deg);
	}
}

@keyframes dash{
	0%{
		stroke-dashoffset: 187;
	}
	
	50%{
		stroke-dashoffset: 46.75;
		transform: rotate(135deg);
	}
	
	100%{
		stroke-dashoffset: 187;
		transform: rotate(450deg);
	}
}


#general_info{
	position: relative;
	background-color: rgba(2,169,227,0.95);
	min-height: 100vh;
	color: #fff;
	padding: 0;
}

#general_info .row > *{
	padding: 0;
	margin: 0 auto;
}

#general_info .content{
	position: absolute;
	height: 100%;
	width: 100%;
	text-align: center;
	padding: 10px 12px;
}

#general_info .content img{
	max-width: 320px;
	display: block;
	margin: 13px auto;
}

#general_info .content p{
	font-size: 22px;
	text-align: center;
	max-width: 365px;
	line-height: 130%;
	margin: 15px auto;
}

#general_info .content ul{

}

#general_info .content ul.highlights li{
	margin: 20px;
	list-style: none;
}

#general_info footer.row{
	padding: 15px 0 5px 0;
}

#general_info .background{
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	
	background-image: url(../images/our_people.jpg?v=2);
	background-color: rgba(2,169,227,0.95);
	background-size: 100% auto;
	background-repeat: repeat;
	
	background-position: 0 0;
	transition: all 90s;
	
	z-index: -1;
}

header .assafmedia{
	text-align: center;
	height: 50px;
	background: url(../images/logo_white.png);
	background-size: 128px;
	background-repeat: no-repeat;
	background-position: center 20px;
	overflow: hidden;
	text-indent: -999vw;
}

#social_media_icons_wrapper ul{
	padding: 0;
	margin-top: 24px;	
	margin-right: 13px;	
}

#social_media_icons_wrapper ul li{
	list-style: none;
	text-align: center;
	padding: 0;
}

#social_media_icons_wrapper ul li a{
	color: #fff;
	opacity: 0.72;
}

#social_media_icons_wrapper ul li a:hover{
	color: #fff;
	opacity: 1;
}

.information .btn{
	background: #006da9;
	margin: 20px auto;
	border-radius: 50px;
	color: #fff;
	display: block;
	max-width: 250px;
	font-size: 27px;
	padding: 6px 10px;	
	transition: all 0.72s;
}

.information .btn.small{
	font-size: 18px;
}

.information .btn:hover{
	background: #ff61b7;
	transform: rotate(-4deg) scale(1.1);
	transition: all 1.5s;

}

.information h2.small{
	margin-top: 30px;
	font-size: 20px;
	font-weight: 900;
}

.information p small{
	font-size: 20px;
	font-weight: 100;
}

#wizard{
	color: #fff;
	position: relative;
	padding: 50px;
}

#wizard .veryImportantRowMustBeExactly{
	position: absolute;
	top: -999vh;
	width: 100%;	
}

#wizard .progressbar_wrapper{
	height: 13px;
	background: #cdcdcd;
	border-radius: 20px;
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}

#wizard .progressbar_wrapper .progressbar_done{
	position: absolute;
	right: 0;
	top: 0;
	
	height: 100%;
	background: #00a930;
	width: 0px;
	padding: 0;
	
	border-radius: 10px;
	
	margin: 0 auto;
}

#wizard .step{
	position: absolute;
	display: none;
	width: calc(100% - 100px);
	margin: 0px auto;
	padding-top: 20px;
}

#wizard .step h1,
#wizard .step h2,
#wizard .step h3,
#wizard .step h4,
#wizard .step h5,
#wizard .step h6,
#wizard .step form,
#wizard .step label{
	margin: 0;
	padding: 0;
}

#wizard .step p{
	padding: 0;
	margin-top: 20px;
	margin-bottom: 5px;
}

#wizard .step h2{
	font-size: 42px;
	font-weight: bold;
	letter-spacing: 1px;
}

#wizard .step h3{
	letter-spacing: 0.8px;
}

#wizard .step form{
	margin-top: 10px;
}

#wizard .step form .error{
	border: 3px solid red;
}

#wizard .step label{
	font-size: 18px;
	font-weight: 100;
}

#wizard .step input,
#wizard .step select{
    width: 100%;
    padding: 18px;
    font-weight: 100;
}

#wizard .step select{
	height: 100%;	
}

#wizard .step input.phone{
    width: 100%;
}

#wizard .step select.phone_prefix{
	height: 100%;
    width: 100%;
}

#wizard .step input.err,
#wizard .step select.err,
#wizard .step textarea.err{
	border: 3px solid red;
}

#wizard .step.current{
	display: block;	
}

#wizard .step.wait_for_been_shown{
	display: block;
	opacity: 0;
}

#wizard .background{
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	position: absolute;
	z-index: -10;
}

#wizard .background .layers{
	width: 100%;
	height: 100%;
	position: relative;
}

#wizard .background .layers .layer{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -20;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100vw auto;
	background-attachment: fixed;
}

#wizard .background .layers .top_layer{
	background-color: rgba(41,41,41,0.85);
	z-index: -10;
}

#wizard .background .layers .layer2{
	background-image: url(../images/background01.jpg);
	z-index: -15;
	display: none;
}

#wizard .background .layers .layer3{
	background-image: url(../images/background02.jpg);
	z-index: -15;
	display: none;
}

#wizard .background .layers .layer4{
	background-image: url(../images/background03.jpg);
	z-index: -15;
	display: none;
}

#wizard .background .layers .layer5{
	background-image: url(../images/background04.jpg);
	z-index: -15;
	display: none;
}

#wizard .background .layers .layer6{
	background-image: url(../images/background05.jpg);
	z-index: -15;
	display: none;
}

#wizard .background .layers .layer7{
	background-image: url(../images/background06.jpg);
	z-index: -15;
	display: none;
}

.layers .layer.shown{
	opacity: 1;
	z-index: -13 !important;
	display: block !important;	
}

.layers .layer.wait_for_been_shown{
	z-index: -12 !important;
	display: block !important;
}

.layers .cache{
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.layers .cache img{
	opacity: 0.001;
}

#wizard .button_wrapper{
	text-align: left;
}

#wizard button{
	padding: 20px 40px;
	font-weight: 600;
	border: none;
	margin-top: 30px;
	background: #006da9;
	color: #fff;
	font-size: 20px;	
}

#progress_in_words{
	text-align: left;
	width: 100%;
	display: block;
	font-size: 13px;
	margin-top: 2px;
}

footer.row,
footer.row > *{
	margin: 0;
	padding: 0;
}

footer a{
	color: #fff;
	font-size: 14px;
	opacity: 0.8;
	text-decoration: none;
}

footer a:hover{
	color: #fff;
	opacity: 1;
}

.hvntselectedyet{
	border: 0;
	border-radius: 13px;
	background: deepskyblue;
}

iframe{
	min-height: 500px;
	width: 100%;
}

#sms_verification_code .mustBeFilled{
	position: absolute;
	top: -999vh;	
}

.hidden-text{
	opacity: 0.5;
	color: rgba(255, 255, 255, 0.072);
}

.floated-hidden-text{
	opacity: 1;
	position: absolute;
	left: -999%;
}

.hidden-text::selection {
	background: rgba(0, 0, 0, 1);
	color: rgba(255, 255, 255, 1);
}

.btn_accessibility{
	margin-top: 40px !important;
}

.inv_qr_code{
	position: absolute;
	width: 100px;
	right: -315px;	
}
.inv_qr_code img{
	width: 100%;
}