@font-face{
    font-family:"Aspaklarya";
	src:url(/css/aspaklaryaregular.woff) format('woff2');
}

body{
	margin:0;
	font-family:Rubik;
	background-color:#efe4d7;
}

input,button,textarea{
	font-family:Rubik;
	outline:none;
}

.header{
	background-color:#094668;
}

.body{
	width:1100px;
	display:inline-block;
	text-align:right;
}

.header .body>img{
	float:right;
	height:110px;
	margin:10px 0;
	cursor:pointer;
}

.notfound{
	text-align:center;
}

.notfound h1{
	margin:0 0 40px;
	font-size:40px;
	color:#d13131;
}

.notfound a{
	margin-bottom:200px;
	display:inline-block;
}

.first-popup{
	position:fixed;
	background:#fff;
	left:50%;
	margin-left:-300px;
	z-index:999;
	top:50%;
	margin-top:-305px;
	box-shadow:0 0 10px #000;
}

.first-popup button{
	position:absolute;
	border:none;
	background:url(/img/close-popup.png) center no-repeat;
	background-size:cover;
	width:50px;
	height:50px;
	cursor:pointer;
	right:40px;
	top:60px;
}

.first-popup nav{
	border:18px solid #094668;
	margin:16px;
	padding:50px 30px 30px;
}

.first-popup nav div{
	color:#094668;
	font-family:Aspaklarya;
	font-size:52px;
	font-weight:bold;
	text-align:center;
	border:2px solid #094668;
	padding:65px 45px
}

.divider{
	background-position-x:0;
	background-size:contain;
	height:40px;
	margin:-1px 0 -1px;
}

.divider.blue-beige,.divider.beige-blue{
	background-image:url(/img/line_blue-beige.png);
}

.divider.beige-blue{
	transform:scale(-1);
}

.divider.blue-green{
	background-image:url(/img/line_blue-green.png);
}

.divider.blue-light{
	background-image:url(/img/line_blue-light.png);
}

.divider.beige-orange{
	background-image:url(/img/line_beige-orange.png);
}

.divider.beige-green{
	background-image:url(/img/line_beige-green.png);
}

.divider.beige-light{
	background-image:url(/img/line_beige-light.png);
}

.divider.light-beige{
	background-image:url(/img/line_beige-light.png);
	transform:scaleY(-1);
}

.divider.blue-orange{
	background-image:url(/img/line_blue-orange.png);
}

.divider.orange-blue{
	background-image:url(/img/line_blue-orange.png);
	transform:scaleY(-1);
}

.divider.light-green{
	background-image:url(/img/line_light-green.png);
}

.divider.green-light{
	background-image:url(/img/line_light-green.png);
	transform:scaleY(-1);
}

.divider.orange-green{
	background-image:url(/img/line_green-orange.png);
}

.menu{
	float:right;
	border-right:5px solid #ce852f;
	margin:45px 40px 0 0;
	padding-right:15px;
	background-color:#094668;
}

.menu a{
	color:#fff;
	text-decoration:none;
	font-size:18px;
	font-weight:100;
	margin:13px 35px;
	display:inline-block;
	padding-bottom:6px;
	border-bottom:1px solid #094668;
	transition:border-color 0.2s ease;
}

.menu a:not(.active):hover{
	border-bottom-color:#fff;
}

.menu a:last-child{
	background-color:#d6edf7;
	border-bottom:none;
	color:#094668;
	margin:7px 25px 0 0;
	padding:7px 15px;
	border-radius:18px;
	font-weight:400;
	float:left;
	text-decoration:none;
	transition:background-color 0.2s ease;
}

.menu a:last-child:hover{
	background-color:#9cb9c6;
}

.menu a.active{
	font-weight:bold;
	color:#ce852f;
	border-bottom-color:#ce852f;
}

.header button{
	display:none;
	transition:all 0.2s ease;
}

.header.active button{
	transform:rotate(90deg);
}

.main{
	background-color:#efe4d7;
}

.main.blue{
	background-color:#094668;
}

.main.green{
	background-color:#8f9977;
}

.main.orange{
	background-color:#ce852f;
}

.main.light-blue{
	background-color:#def0f8;
}

.photo-frame{
	border:22px solid #fff;
	display:inline-block;
	box-shadow:7px 7px 10px rgba(0,0,0,0.4);
	position:relative;
}

.photo-frame.blue{
	border-color:#def0f8;
}

.photo-frame>video{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:#000;
	z-index:50;
}

.white-btn{
	text-decoration:none;
	font-weight:bold;
	font-size:19px;
	border:2px solid #094668;
	padding:9px 15px 10px;
	border-radius:25px;
	color:#094668;
	transition:all 0.2s ease;
	display:inline-block;
}

.white-btn:hover{
	color:#fff;
	background-color:#094668;
}

.compass{
	text-align:center;
}

.compass>h1{
	color:#fff;
	background-image:url(/img/title_home2.png);
	font-size:40px;
	display:inline-block;
	padding:16px 30px 26px;
	background-size:100% 100%;
	margin-top:60px;
}

.compass.list>h1{
	background-image:none;
}

.main:not(.blue) .compass.list>h1{
	color:#094668;
}

.compass>p{
	color:#fff;
	font-size:28px;
	font-weight:100;
	margin:0 0 50px;
}

.compass>i{
	color:#fff;
	font-size:20px;
	font-weight:100;
	display:block;
	margin-top:45px;
}

.compass>nav{
	display:inline-block;
	width:100%;
	margin:100px 0;
}

.compass.list>nav{
	margin-top:40px;
}

.compass>nav div{
	float:right;
	background:#fff;
	width:24%;
	margin:0 0.5%;
	border-radius:20px;
	text-align:center;
	height:335px;
	position:relative;
	cursor:pointer;
}

.compass.list>nav div{
	width:30%;
	margin:0 1.6%;
}

.compass>nav div h1{
	font-size:40px;
	color:#fff;
	background-size:100% 100%;
	display:inline-block;
	margin:-20px 0 0;
}

.compass>nav div p{
	color:#094668;
	font-size:23px;
	padding:0 25px;
	line-height:33px;
	margin:12px 0;
}

.compass>nav div p i{
	font-size:19px;
	font-weight:400;
}

.compass>nav div a{
	border:1px solid #094668;
	font-size:17px;
	padding:6px 16px;
	color:#094668;
	border-radius:20px;
	text-decoration:none;
	transition:all 0.2s ease;
	position:absolute;
	bottom:15px;
	left:50%;
	margin-left:-44px;
}

.compass>nav div a:hover{
	color:#fff;
	background-color:#094668;
}

.compass-zionism{
	background-image:url(/img/title_compass-light.png);
	padding:8px 16px 16px 19px;
	color:#094668!important;
}

.compass-belonging{
	background-image:url(/img/title_compass-orange.png);
	padding:9px 18px 14px;
	color:#fff;
}

.compass-professionalism{
	background-image:url(/img/title_compass-green.png);
	padding:9px 19px 18px 31px;
	color:#fff;
}

.compass-spirit{
	background-image:url(/img/title_compass-blue.png);
	padding:9px 23px 19px;
	color:#fff;
}

.arrow-up{
	display:none;
	position:fixed;
	bottom:30px;
	left:30px;
	cursor:pointer;
	transition:background-color 0.2s ease;
	background:#ce852f url(/img/arrow-up.png) center no-repeat;
	background-size:80% 60%;
	z-index:999;
	width:80px;
	height:80px;
	border-radius:50%;
}

.arrow-up:hover{
	background-color:#8c5c23;
}

.stories{
	text-align:center;
	position:relative;
}

.stories>h1{
	color:#094668;
	font-size:38px;
	background-image:url(/img/title_home3.png);
	background-size:100% 100%;
	display:inline-block;
	padding:17px 31px 20px;
}

.compass.list>h2,
.stories>h2{
	color:#fff;
	font-size:50px;
	margin:70px 0 20px;
}

.stories nav{
	display:inline-block;
	width:100%;
	margin-top:30px;
}

.stories nav div{
	float:right;
	width:30%;
	margin:0 1.6% 3.2%;
	background-color:#fff;
	position:relative;
	height:530px;
	border-radius:30px 30px 20px 20px;
	cursor:pointer;
}

.stories nav div:nth-child(4){
	margin-right:18%;
}

.stories nav div img{
	width:100%;
	border-radius:20px 20px 0 0;
}

.stories nav div h2{
	color:#094668;
	font-size:37px;
	margin:7px 0 -13px;
}

.stories nav div p{
	color:#094668;
	font-size:22px;
	padding:0 30px;
	line-height:30px;
}

.stories nav div p i{
	font-size:18px;
}

.stories nav div>a{
	border:1px solid #094668;
	font-size:17px;
	padding:6px 16px;
	display:inline-block;
	color:#094668;
	border-radius:20px;
	text-decoration:none;
	position:absolute;
	bottom:23px;
	left:50%;
	margin-left:-50px;
	transition:all 0.2s ease;
}

.stories nav div>a:hover{
	color:#fff;
	background-color:#094668;
}

.stories nav div>p>a{
	color:#ce852f;
	text-decoration:underline;
}

.bottom{
	padding:50px 0;
	color:#fff;
	font-size:18px;
	font-weight:100;
	background:#ce852f;
	text-align:center;
	font-style:italic;
}

.title{
	width:100%;
	text-align:center;
	color:#094668;
	display:inline-block;
}

.title h1{
	font-size:60px;
	display:inline-block;
	background-size:100% 100%;
	padding:7px 30px 25px;
}

.title_about h1,
.title_comments h1,
.title_zionism h1,
.title_his-way h1,
.title_aware h1,
.title_mother h1{
	background-image:url('/img/title_compass-light.png');
}

.title_story h1{
	background-image:url('/img/title_home3.png');
}

.title_belonging h1{
	color:#fff;
	background-image:url('/img/title_compass-orange.png');
}

.title_professionalism h1{
	color:#fff;
	padding:15px 30px 20px 40px;
	background-image:url('/img/title_zikim.png');
}

.title_spirit h1{
	color:#fff;
	padding:15px 30px 20px 40px;
	background-image:url('/img/title_compass-blue.png');
}

.path{
	display:block;
	margin:37px 0;
	font-weight:bold;
	font-size:20px;
}

.path>a:not(.white-btn){
	color:#094668;
	text-decoration:none;
}

.path>a:not(.active):not(.white-btn):after{
	content:">";
	margin:0 8px;
}

.path>a.active{
	color:#ce852f;
	margin-left:10px;
}

.path>a.set{
	color:#fff;
	background-color:#094668;
}

.path .white-btn{
	margin:0 0 10px 10px;
}

.play-audio{
	border:none;
	background-image:url(/img/play-audio.png);
	background-size:100% 100%;
	background-color:transparent;
	cursor:pointer;
	width:237px;
	height:57px;
	display:table;
	margin:9px 0;
}

.play-audio:hover{
	opacity:0.7;
}

.play-audio.itunes{
	background-image:url(/img/play-audio-itunes.png);
}

.play-audio.spotify{
	background-image:url(/img/play-audio-spotify.png);
}

.video-frame{
	text-align:center;
	padding:60px 0 140px;
}

.video-frame>span{
	text-align:right;
	display:inline-block;
	width:850px;
	margin-bottom:20px;
}

.video-frame>span h1{
	color:#094668;
	background-image:url(/img/title_letters2.png);
	background-size:100% 100%;
	display:table;
	font-size:24px;
	padding:10px 10px 15px 20px;
}

.video-frame>.photo-frame{
	cursor:pointer;
	position:relative;
	background-color:#000;
}

.text{
	color:#094668;
	font-size:25px;
	margin:0 0 50px;
}

.text i{
	font-size:19px;
	line-height:30px;
}

.photos{
	display:inline-block;
	width:100%;
	margin-bottom:80px;
}

.photos>div{
	width:35%;
	float:right;
	margin:3% 7%;
	text-align:center;
}

.photos>center>div{
	margin:3% 0;
	width:50%;
	text-align:center;
}

.photos .photo-frame img{
	width:100%;
	cursor:pointer;
}

.photos div a{
	background-color:#094668;
	color:#fff;
	text-decoration:none;
	padding:15px 59px;
	font-size:27px;
	font-weight:700;
	border-radius:22px;
	margin-top:40px;
	display:inline-block;
	transition:background-color 0.2s ease;
}

.photos div a:hover{
	background-color:#05283b;
}

.video{
	cursor:pointer;
	transition:opacity 0.2s ease;
}

.video:hover{
	opacity:0.9;
}

.contact-us{
	display:none;
	position:fixed;
	left:50%;
	top:30%;
	z-index:998;
	background-color:#ce852f;
	width:400px;
	margin-left:-200px;
	padding:70px 35px 40px;
	text-align:center;
}

.contact-us button{
	background:#094668 url(/img/close.png) center center no-repeat;
	background-size:45%;
	border:none;
	width:40px;
	height:40px;
	position:absolute;
	top:15px;
	right:15px;
	border-radius:50%;
	cursor:pointer;
	transition:background-color 0.2s ease;
}

.contact-us button:hover{
	background-color:#083d5b;
}

.contact-us h1{
	background-color:#094668;
	color:#fff;
	font-size:30px;
	padding:6px 0;
	margin:0;
}

.contact-us h2{
	display:none;
	color:#b14141;
	font-size:19px;
	background-color:#dcb9b9;
	border:3px solid #b14141;
	padding:8px;
}

.contact-us.error h2{
	display:block;
}

.contact-us input[type="text"],
.contact-us textarea{
	border:none;
	width:100%;
	font-size:14px;
	padding:10px;
	margin:7px 0 0;
}

.contact-us .error{
	background-color:#dcb9b9;
}

.contact-us span{
	display:inline-block;
	width:100%;
}

.contact-us span input{
	width:49.2%!important;
}

.contact-us span input:first-child{
	float:right;
}

.contact-us span input:last-child{
	float:left;
}

.contact-us textarea{
	height:100px;
}

.contact-us input[type="submit"]{
	color:#fff;
	font-size:17px;
	border:none;
	background-color:#094668;
	padding:10px 38px;
	margin-top:7px;
	cursor:pointer;
	transition:background-color 0.2s ease;
}

.contact-us input[type="submit"].sent{
	background-color:#d7eef7!important;
	color:#094668;
	pointer-events:none;
}

.contact-us input[type="submit"]:hover{
	background-color:#083d5b;
}

.slider{
	overflow:hidden;
	position:relative;
	height:570px;
}

.slider>nav{
	position:absolute;
	right:0;
	width:max-content;
}

.slider>nav div{
	float:right;
	width:330px;
	margin:0 16px 0!important;
	background-color:#fff;
	position:relative;
	height:530px;
	border-radius:30px 30px 20px 20px;
	cursor:pointer;
}

.stories>button{
	display:none;
	background:transparent url(/img/slider-arrow.png) no-repeat;
	background-size:100% 100%;
	width:20px;
	height:70px;
	position:absolute;
	left:-10px;
	top:420px;
	border:none;
	cursor:pointer;
	transition:opacity 0.2s ease;
	z-index:1;
}

.stories.arrows>button{
	display:inline-block;
}

.stories>button:hover{
	opacity:0.7;
}

.stories>button:last-child{
	left:auto;
	right:-23px;
	transform:scale(-1);
}

@media only screen and (max-width:1200px){
	.body{
		width:800px;
	}
}

@media only screen and (max-width:800px){
	body{
		padding-top:90pt;
	}

	.title>h1{
		font-size:25pt;
		padding:10pt 20pt 14pt;
		margin:20pt 0 5pt;
	}

	.photos>div{
		width:100%!important;
		float:none;
		margin:0;
	}

	.photos div a{
		font-size:17pt;
        padding:8pt 30pt 10pt;
		margin:15pt 0 40pt;
	}

	.text{
		font-size:17pt;
		margin:0 0 20pt;
	}

	.menu{
		display:inline-block;
		height:100%;
		left:-67%;
		transition:left 0.2s ease;
		width:60%;
		position:fixed;
	}

	.header.active .menu{
		display:inline-block;
		position:fixed;
		top:35pt;
		left:0;
		padding-top:15pt;
	}

	.menu a{
		display:block;
		font-size:18pt;
		text-align:left;
		margin:15pt 0 15pt 15pt;
		border-bottom:none;
	}

	.menu a:last-child{
		margin:10pt 0 0 13pt;
	}

	.photo-frame{
		position:relative!important;
		transform:rotate(0)!important;
		top:0!important;
		right:0!important;
		left:0!important;
		bottom:0!important;
		margin-top:4%!important;
		width:75%;
		border-width:13pt;
		display:inline-block!important;
	}

	.photo-frame img{
		width:100%!important;
	}

	.header .body>img{
		height:50pt;
		margin:10pt 0 4pt 0;
	}

	.body{
		width:92%!important;
		padding:5% 4% 0;
		text-align:center;
	}

	.compass>h1,
	.stories>h1{
		font-size:25pt;
		margin:10pt 0 25pt;
		display:inline-block;
	}

	.compass>p{
		font-size:18pt;
	}

	.compass>img{
		width:90%;
	}

	.compass>nav{
		margin:60pt 0 0;
	}

	.compass>nav div,
	.stories nav div{
		width:90%!important;
		margin:0 5% 15%!important;
		height:auto;
	}

	.stories nav div>a{
		margin:20pt 0 0 -42pt;
		font-size:16pt;
	}

	.stories nav div p{
		font-size:16pt;
		line-height:23pt;
		margin-bottom:70pt;
	}

	.compass>nav div p{
		font-size:19pt;
		line-height:30pt;
		margin-bottom:70pt;
	}

	.compass>nav div h1{
		font-size:24pt;
	}

	.stories nav div h2{
		font-size:23pt;
	}


	.slider{
		height:420pt;
	}

	.slider>nav div{
		margin:0 25px!important;
		height:395pt;
	}

	.stories>button{
		display:inline-block;
		width:12pt;
		height:50pt;
		left:10pt;
		top:270pt;
	}

	.stories>button:last-child{
		right:10pt;
	}

	.header,.head.divider{
		position:fixed;
		width:100%;
		z-index:998;
		top:0;
	}

	.head.divider{
		top:63pt;
		background-image:url(/img/line_blue-none.png);
	}

	.divider{
		background-size:cover;
		height:20pt;
	}

	.header .body{
		padding:0;
	}

	.bottom{
		padding:20pt 0 30pt;
	}

	.header button{
		display:inline-block;
		float:left;
		width:40pt;
		height:40pt;
		background:url(/img/menu.png);
		background-size:100% 100%;
		border:none;
		margin:13pt 0 0;
	}

	.compass>nav div a{
		position:relative;
		bottom:auto;
		left:auto;
		margin:10pt 0 15pt;
		display:inline-block;
	}

	.path{
		margin:0;
	}

	.compass.list>h2, .stories>h2{
		font-size:22pt;
		margin:10pt 0;
	}

	.path nav{
		float:none;
		position:absolute;
		margin-top:20pt;
	}

	.path nav a{
		margin-top:14px;
	}

	.path .white-btn{
		font-size:11pt;
		margin:7pt 2pt 0;
	}

	.white-btn{
		font-size:12pt;
	}

	.arrow-up{
		left:10pt;
		bottom:10pt;
		width:35pt;
		height:35pt;
	}

	.video-frame{
		padding-bottom:10%;
	}

	.video-frame>span{
		width:100%!important;
	}

	.video-frame>span h1{
		font-size:15pt;
		padding:7pt 11pt 11pt 13pt
	}

	.video-frame .photo-frame{
		border-width:7pt;
		width:94%;
		margin:0!important;
	}

	.pics{
		height:auto!important;
    	width:94%!important;
	}

	.pics .photo-frame{
		border-width:8pt!important;
		margin:0 0 30pt!important;
		width:93%;
		float:none!important;
	}

	.contact-us{
		width:88%;
		left:0;
		top:15%;
    	margin:0;
		padding:52pt 6%;
	}

	.contact-us input,
	.contact-us textarea,
	.contact-us span input{
		width:100%!important;
		font-size:18pt!important;
	}

	.first-popup{
		left:0;
    	top:20%;
		margin:0;
	}

	.first-popup button{
		top:32pt;
		right:32pt;
	}

	.first-popup nav{
		padding:24pt;
	}

	.first-popup nav div{
		font-size:26pt;
		padding:15pt;
	}
}