/*****************************************************************************************/
section{
	position:relative;
}

section a.clsBtnSeeAll:link,
section a.clsBtnSeeAll:visited,
section a.clsBtnSeeAll:active,
section a.clsBtnSeeAll:hover{
	color:#3e90a4;
	font-size:25px;
	text-decoration:none;
	text-align:center;
    line-height: 18px;
	position:relative;
	display:inline-block;
	width:365px;
	height:58px;
	padding:17px 0 0 0;
	margin:23px auto 33px auto;
	border:1px solid #3e90a4;
}

section a.clsBtnSeeAll:after{
	content:"";
	position:absolute;
	left:40px;
	top:21px;
	width:7px;
	height:13px;
	background:url(/derech/sites/environments/milestones/images/arrow2.png) no-repeat center center;
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
	transition: all .15s ease-in-out;
}

section a.clsBtnSeeAll:hover:after{
	left:20px;
}



/*****************************************************************************************/
.clsHomeMainBanner{
	position:relative;
	width:100%;
	max-width:100%;
	height:800px;
	overflow:hidden;
	background:#000;
}

.clsHomeMainBanner ul{
	font-size:0;
	line-height:0;
	height:100%;
	white-space:nowrap;
}

.clsHomeMainBanner ul li{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:500px;
	height:100%;
	overflow:hidden;
	transition: all .8s cubic-bezier(0.215,.61,.355,1);
}

.clsHomeMainBanner ul li.clsHidden{
	width:0;
}

.clsHomeMainBanner ul li.clsSmall{
	width:20%;
	background:#fff;
}

.clsHomeMainBanner ul li.clsBig{
	width:60%;
	cursor:pointer;
}

.clsHomeMainBanner ul li img{
	position:absolute;
	left:50%;
	bottom:0;
	width:1250px;
	height:auto;
	min-height:100%;
	margin-left:-625px;
	opacity:1;
	transition: all .4s ease-in-out;
}

.clsHomeMainBanner.clsAnimated ul li.clsBig img{
	-webkit-animation: homeImageAnim 0.8s ease-in-out 1;
	animation: homeImageAnim 0.8s ease-in-out 1;
}

.clsHomeMainBanner ul li.clsBig img{
	opacity:0.8;
}

.clsHomeMainBanner ul li.clsSmall img{
	-webkit-filter: saturate(30%);
	filter: saturate(30%);
}

@-webkit-keyframes homeImageAnim {
	0% { width:1250px; margin-left:-625px; bottom:0; }
	20% { width:1450px; margin-left:-725px; bottom:-100px; }
	100% { width:1250px; margin-left:-625px; bottom:0; }
}
@keyframes homeImageAnim {
	0% { width:1250px; margin-left:-625px; bottom:0; }
	20% { width:1450px; margin-left:-725px; bottom:-100px; }
	100% { width:1250px; margin-left:-625px; bottom:0; }
}

.clsHomeMainBanner ul li.clsBig.clsHover img{
	width:1300px;
	margin-left:-650px;
	bottom:-15px;
}

/**********************************/
.clsHomeMainBanner ul li .clsTitle{
	color:#fff;
	font-size:36px;
	line-height:50px;
	text-align:center;
	
	position:absolute;
	left:0;
	bottom:40px;
	width:100%;
	opacity:0;
	text-shadow: 1px 1px #000;
	transition: all .6s ease-in-out;
	transform:scale(1,1);
}

.clsHomeMainBanner ul li.clsBig .clsTitle{
	opacity:1;
}

/*/this.planetNameTween = TweenMax.fromTo(o, .5, { scaleX: 1.4, scaleY: 0, opacity: 0 }, { scale: 1, opacity: 1, force3D: !0, ease: Elastic.easeOut });


.clsHomeMainBanner ul li.clsBig .clsTitle{
	-webkit-animation: titleAmin 0.05s ease-out 10;
	animation: titleAmin 0.05s ease-out 10;	
}

@keyframes titleAmin {
	0% { transform:scale(0.9,1); }
	50% { transform:scale(1.1,1); }
	100% { transform:scale(0.9,1); }
}*/

/**********************************/
.clsHomeMainBanner .clsArrowRight,
.clsHomeMainBanner .clsArrowLeft{
	position:absolute;
	right:0;
	top:50%;
	z-index:10;
	width:100px;
	height:200px;
	margin-top:-80px;
	cursor:pointer;
	background:url(/derech/sites/environments/milestones/images/arrow1.png) no-repeat 40px center;
	transition: all .15s ease-in-out;
}

.clsHomeMainBanner .clsArrowLeft{
	right:auto;
	left:0;
	transform:rotate(180deg);
}

.clsHomeMainBanner .clsArrowRight:hover,
.clsHomeMainBanner .clsArrowLeft:hover{
	background-position-x:60px;
}

/**************************************/
.clsHomeMainBanner .clsCompass{
	position:absolute;
	left:50%;
	top:50%;
	width:278px;
	height:278px;
	margin-left:-139px;
	margin-top:-130px;
	background:url(/derech/sites/environments/milestones/images/compass_bg.png) no-repeat center center;
	transition: transform .6s ease-in-out;
	transform:rotate(0deg);
}

.clsHomeMainBanner.clsAnimated .clsCompass{
	-webkit-animation: compassAnim 0.8s ease-in-out 1;
	animation: compassAnim 0.8s ease-in-out 1;	
}

@-webkit-keyframes compassAnim {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(-120deg); }
}
@keyframes compassAnim {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(-120deg); }
}
/*
.clsHomeMainBanner .clsCompass:hover{
	transition: all .3s ease-in-out;
	-webkit-animation: compassHoverAnim 0.3s ease-in-out 1;
	animation: compassHoverAnim 0.3s ease-in-out 1;	
}

@-webkit-keyframes compassHoverAnim {
	0% { transform:rotate(0deg); }
	33% { transform:rotate(-5deg); }
	66% { transform:rotate(5deg); }
	100% { transform:rotate(0); }
}
@keyframes compassHoverAnim {
	0% { transform:rotate(0deg); }
	33% { transform:rotate(-5deg); }
	66% { transform:rotate(5deg); }
	100% { transform:rotate(0); }
}
*/
.clsHomeMainBanner .clsCompass .clsSpotDot{
	position:absolute;
	left:0;
	top:0;
	width:278px;
	height:278px;
	background:url(/derech/sites/environments/milestones/images/compass_mask.png) no-repeat center center;
	transition: opacity .5s ease-in-out;
	transform:rotate(0deg);
	opacity:0;
}

.clsHomeMainBanner .clsCompass .clsSpotDot.clsVisible{
	opacity:1;
}

.clsHomeMainBanner .clsCompass .clsSpotDot1{transform:rotate(0deg);}
.clsHomeMainBanner .clsCompass .clsSpotDot2{transform:rotate(60deg);}
.clsHomeMainBanner .clsCompass .clsSpotDot3{transform:rotate(120deg);}
.clsHomeMainBanner .clsCompass .clsSpotDot4{transform:rotate(180deg);}
.clsHomeMainBanner .clsCompass .clsSpotDot5{transform:rotate(240deg);}
.clsHomeMainBanner .clsCompass .clsSpotDot6{transform:rotate(300deg);}

.clsHomeMainBanner .clsCompass .clsSpotTitle{
	color:#fff;
	font-size:19px;
	line-height:19px;
	text-align:right;
	
	position:absolute;
	top:0;
	padding-right:0;
	opacity:0;
	transition: all .5s ease-in-out;
}

.clsHomeMainBanner .clsCompass .clsSpotTitle.clsVisible{
	padding-right:30px;
	opacity:1;
}

.clsHomeMainBanner .clsCompass .clsSpotTitle1{right:85px;top:-22px; width:100px;}
.clsHomeMainBanner .clsCompass .clsSpotTitle2{right:-40px;top:48px;}
.clsHomeMainBanner .clsCompass .clsSpotTitle3{right:-54px;top:207px;}
.clsHomeMainBanner .clsCompass .clsSpotTitle4{right:63px;top:282px; width:100px;}
.clsHomeMainBanner .clsCompass .clsSpotTitle5{right:230px;top:210px;}
.clsHomeMainBanner .clsCompass .clsSpotTitle6{right:233px;top:49px;}



/*****************************************************************************************/
.clsHomeAppBanner{
	position:relative;
	height:503px;
	padding:0 0 0 0; 
	border-bottom:1px solid #c2c2c2;
	background: #ebf7f5;
	background: #ebf7f5;
	background: -moz-linear-gradient(left,  #ebf7f5 0%, #f9f9f7 30%, #f7f7f4 100%);
	background: -webkit-linear-gradient(left,  #ebf7f5 0%,#f9f9f7 30%,#f7f7f4 100%);
	background: linear-gradient(to right,  #ebf7f5 0%,#f9f9f7 30%,#f7f7f4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf7f5', endColorstr='#f7f7f4',GradientType=1 );
}

.clsHomeAppBanner h2{
	color:#000;
	font-size:32px;
	line-height:38px;

	width:280px;
	padding:166px 0 0 0;
	margin:0 330px 13px 0;
}

.clsHomeAppBanner .clsText{
	color:#878989;
	font-size:20px;
	line-height:24px;

	width:280px;
	margin:0 330px 15px 0;
}

.clsHomeAppBanner .clsImg{
	position:absolute;
	left:350px;
	top:40px;
}



/*****************************************************************************************/
.clsHomeTriviaBox{
	text-align:center;
	padding:55px 0 30px 0;
}

.clsHomeTriviaBox h2{
	color:#2c7686;
	font-size:40px;
	font-weight:bold;
	line-height:30px;
	padding:0;
	margin:0 0 12px 0;
}

.clsHomeTriviaBox h3{
	color:#000000;
	font-size:22px;
	line-height:30px;
	padding:0;
	margin:0 0 60px 0;
}

.clsHomeTriviaBox ul.clsList{
	font-size:0;
	line-height:0;
}

.clsHomeTriviaBox ul.clsList li{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:250px;
	height:250px;
	overflow:hidden;
	cursor:pointer;
	margin:0 20px 40px 20px;
}

.clsHomeTriviaBox ul.clsList li .clsImg{
	position:relative;
	z-index:1;
	width:250px;
	height:250px;
}

.clsHomeTriviaBox ul.clsList li .clsDetails{
	position:absolute;
	left:0;
	top:0;
	z-index:2;
	width:250px;
	height:250px;
	padding:63px 30px 0 30px;
	opacity:0;
	background:rgba(44,118,134,0.8);
	transition: all .2s ease-in-out;
}

.clsHomeTriviaBox ul.clsList li .clsDetails:hover{
	opacity:1;
}

.clsHomeTriviaBox ul.clsList li .clsDetails h4{
	color:#fff;
	font-size:26px;
	line-height:29px;
}

.clsHomeTriviaBox ul.clsList li .clsDetails .clsBtn{
	color:#fff;
	font-size:23px;
	line-height:26px;

	width:100px;
	height:45px;
	padding:6px 0 0 0;
	margin:35px auto 0 auto;
	border-radius:20px;
	border:2px solid #fff;
	transition: all .15s ease-in-out;
}

.clsHomeTriviaBox ul.clsList li .clsDetails .clsBtn:hover{
	background:rgba(255,255,255,0.2)
}



/*****************************************************************************************/
.clsHomeQuote{
	height:426px;
	text-align:center;
	padding:276px 0 0 0; 
	
    background:transparent;
	background:#000 url(/derech/sites/environments/milestones/images/img3.jpg) no-repeat center 0;
	background-size:100% auto;
	background-position-y:0;
}

.clsHomeQuote .clsQuote{
	color:#fff;
	font-size:24px;
	line-height:34px;

	width:680px;
	margin:0 auto 11px auto;
}

.clsHomeQuote .clsAuthor{
	color:#fff;
	font-size:20px;
	line-height:30px;
}



/*****************************************************************************************/
.clsHomeIndexBox{	
	text-align:center;
	padding:65px 0 6px 0;
}

.clsHomeIndexBox h2{
	color:#2c7686;
	font-size:40px;
	font-weight:bold;
	line-height:30px;
	padding:0;
	margin:0 0 12px 0;
}

.clsHomeIndexBox h3{
	color:#000000;
	font-size:22px;
	line-height:30px;
	padding:0;
	margin:0 0 30px 0;
}

/*****************************/
.clsHomeIndexBox ul.clsTabs{
	font-size:0;
	line-height:0;
	margin:0 0 54px 0;
}

.clsHomeIndexBox ul.clsTabs li{
	color:#000;
	font-size:19px;
	line-height:19px;
	list-style:none;
	cursor:pointer;
	
	display:inline-block;
	vertical-align:top;
	width:148px;
	height:44px;
	padding:11px 0 0 0;
	margin:0 2px 0 2px;
	background:#ebebeb;
	transition: all .15s ease-in-out;
}

.clsHomeIndexBox ul.clsTabs li:hover{
	background:#d7d7d7;
}

.clsHomeIndexBox ul.clsTabs li.clsSelected{
	background:#d7d7d7;
}

/*****************************/
.clsHomeIndexBox .clsItems{
	text-align:right;

	
	position:relative;
	width:990px;
	height:410px;
	margin:0 auto 35px auto;
	overflow:hidden;
}

.clsHomeIndexBox .clsItems .clsItemsScroll{
	font-size:0;
	line-height:0;
	white-space:nowrap;
	
	position:absolute;
	right:0;
	top:0;
	height:100%;	
}

.clsHomeIndexBox .clsItems .clsItemsScroll .clsBlock{
	display:inline-block;
	vertical-align:top;
	width:1000px;
	height:100%;
	overflow:hidden;
}

.clsHomeIndexBox .clsItems .clsItem{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:300px;
	height:410px;
	overflow:hidden;
	cursor:pointer;
	margin:0 15px 40px 15px;
	border:1px solid #e1e1e1;
	transition: all .35s ease-in-out;
}

.clsHomeIndexBox .clsItems .clsItem.clsHidden{
	width:0;
	margin:0 0 40px 0;
	border:0 none;
}

.clsHomeIndexBox .clsItems .clsItem:hover{
	background:#fbf9f9;
}

.clsHomeIndexBox .clsItems .clsItem .clsImgBox{
	position:relative;
	z-index:1;
	width:298px;
	height:200px;
	overflow:hidden;
}

.clsHomeIndexBox .clsItems .clsItem .clsImgBox img{
	position:absolute;
	left:0;
	top:0;
	width:298px;
	min-height:200px;
	transition: all .35s ease-in-out;
}

 .clsHomeIndexBox .clsItems .clsItem:hover .clsImgBox img{
	left:-15px;
	top:-10px;
	width:328px;
}

.clsHomeIndexBox .clsItems .clsItem .clsDetails{
	white-space:normal;
}

.clsHomeIndexBox .clsItems .clsItem .clsDetails h4{
	color:#3790a6;
	font-size:18px;
	line-height:20px;
	font-weight:bold;
	text-align:center;
	margin:12px 0 9px 0;
}

.clsHomeIndexBox .clsItems .clsItem .clsDetails .clsText{
	color:#000;
	font-size:16px;
	line-height:21px;
	text-align:right;
	padding:0 15px 0 15px;
}

.clsHomeIndexBox .clsArrowRight{
	position:absolute;
	right:0;
	top:440px;
	width:64px;
	height:45px;
	cursor:pointer;
	background:url(/derech/sites/environments/milestones/images/arrow3.png) no-repeat 20px 0;
	transition: all .15s ease-in-out;
}

.clsHomeIndexBox .clsArrowRight:hover{
	background-position-x:30px;
}

.clsHomeIndexBox .clsArrowLeft{
	position:absolute;
	left:0;
	top:440px;
	width:64px;
	height:45px;
	cursor:pointer;
	background:url(/derech/sites/environments/milestones/images/arrow3.png) no-repeat 20px 0;
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
	transition: all .15s ease-in-out;
}

.clsHomeIndexBox .clsArrowLeft:hover{
	background-position-x:30px;
}




/*****************************************************************************************/
.clsDownloadAppBanner{
	height:262px;
	text-align:center;
	padding:62px 0 0 0; 
	background:#2c7686;
}

.clsDownloadAppBanner h2{
	color:#fff;
	font-size:28px;
	line-height:30px;
}

.clsDownloadAppBanner img{
	margin:40px 25px 0 25px;
}



/*****************************************************************************************/
@media only screen and (max-width : 768px) {

	section a.clsBtnSeeAll:link,
	section a.clsBtnSeeAll:visited,
	section a.clsBtnSeeAll:active,
	section a.clsBtnSeeAll:hover{
		font-size:20px;
		width:260px;
	}

	section a.clsBtnSeeAll:after{
		left:20px;
	}


	/*****************************************************************************************/
	.clsHomeMainBanner ul li.clsSmall{
		width:10%;
	}

	.clsHomeMainBanner ul li.clsBig{
		width:80%;
	}

	.clsHomeMainBanner .clsCompass{
		zoom:0.6;
		margin-top:-170px;
	}

	.clsHomeMainBanner ul li .clsTitle{
		font-size:28px;
	}

	.clsHomeMainBanner .clsCompass .clsSpotTitle{
		font-size:25px;
		line-height:19px;
	}
		
	/**********************************/
	.clsHomeMainBanner .clsArrowRight,
	.clsHomeMainBanner .clsArrowLeft{
		top:0;
		width:50px;
		height:100%;
		margin-top:0;
		background:transparent;
	}

	/*****************************************************************************************/
	.clsHomeAppBanner{
		position:relative;
		height:300px;
		padding:0 0 0 0; 
		border-bottom:1px solid #c2c2c2;
		background: #ebf7f5;
		background: #ebf7f5;
		background: -moz-linear-gradient(left,  #ebf7f5 0%, #f9f9f7 30%, #f7f7f4 100%);
		background: -webkit-linear-gradient(left,  #ebf7f5 0%,#f9f9f7 30%,#f7f7f4 100%);
		background: linear-gradient(to right,  #ebf7f5 0%,#f9f9f7 30%,#f7f7f4 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf7f5', endColorstr='#f7f7f4',GradientType=1 );
	}

	.clsHomeAppBanner h2{
		color:#000;
		font-size:22px;
		line-height:30px;

		width:180px;
		padding:60px 20px 0 0;
		margin:0 0 13px 0;
	}

	.clsHomeAppBanner .clsText{
		color:#878989;
		font-size:16px;
		line-height:24px;

		width:130px;
		margin:0 20px 15px 0;
	}

	.clsHomeAppBanner .clsImg{
		left:20px;
		top:30px;
		width:150px;
	}



	/*****************************************************************************************/
	.clsHomeTriviaBox{
		text-align:center;
		padding:30px 0 20px 0;
	}

	.clsHomeTriviaBox h2{
		font-size:30px;
		margin:0 0 6px 0;
	}

	.clsHomeTriviaBox h3{
		font-size:18px;
		margin:0 0 30px 0;
	}
	
	.clsHomeTriviaBox ul.clsList li{
		width:140px;
		height:140px;
		margin:0 7px 20px 8px;
		background:#ddd;
	}

	.clsHomeTriviaBox ul.clsList li .clsImg{
		width:140px;
		height:140px;
	}

	.clsHomeTriviaBox ul.clsList li .clsDetails{
		left:0;
		top:auto;
		bottom:0;
		width:100%;
		height:auto;
		padding:7px 10px 8px 10px;
		opacity:0;
		transition: all .2s ease-in-out;
		opacity:1;
	}

	.clsHomeTriviaBox ul.clsList li .clsDetails h4{
		color:#fff;
		font-size:16px;
		line-height:16px;
	}

	.clsHomeTriviaBox ul.clsList li .clsDetails .clsBtn{
		display:none;
	}


	/*****************************************************************************************/
	.clsHomeQuote{
		height:300px;
		text-align:center;
		padding:110px 0 0 0; 
		background:#000 url(/derech/sites/environments/milestones/images/img3.jpg) no-repeat center 0;
		background-size:auto 300px;
	}

	.clsHomeQuote .clsQuote{
		color:#fff;
		font-size:19px;
		line-height:34px;

		width:100%;
		padding:0 20px  20px 20px;
		margin:0 auto 0 auto;
	}

	.clsHomeQuote .clsAuthor{
		font-size:17px;
	}



	/*****************************************************************************************/
	.clsHomeIndexBox{	
		text-align:center;
		padding:30px 0 6px 0;
	}

	.clsHomeIndexBox h2{
		font-size:30px;
		margin:0 0 6px 0;
	}

	.clsHomeIndexBox h3{
		color:#000000;
		font-size:18px;
		line-height:30px;
		padding:0;
		margin:0 0 20px 0;
	}

	.clsHomeIndexBox ul.clsTabs li{
		font-size:16px;
		width:auto;
		height:35px;
		padding:7px 6px 0 6px;
	}

	/*****************************/
	.clsHomeIndexBox .clsItems{
		width:320px;
	}

	.clsHomeIndexBox .clsItems .clsItem{
		width:260px;
		margin:0 30px 40px 30px;
	}

	.clsHomeIndexBox .clsItems .clsItem.clsHidden{
		width:0;
		margin:0 0 40px 0;
		border:0 none;
	}

	.clsHomeIndexBox .clsItems .clsItem:hover{
		background:#fbf9f9;
	}

	.clsHomeIndexBox .clsItems .clsItem .clsImgBox{
		position:relative;
		z-index:1;
		width:100%;
		height:190px;
		overflow:hidden;
	}

	.clsHomeIndexBox .clsItems .clsItem .clsImgBox img{
		width:100%;
		min-height:190px;
	}

	.clsHomeIndexBox .clsArrowRight,
	.clsHomeIndexBox .clsArrowLeft{
		zoom:0.7;
	}

	.clsHomeIndexBox .clsArrowLeft:hover{
		background-position-x:30px;
	}



	/*****************************************************************************************/
	.clsDownloadAppBanner{
		height:auto;
		padding:40px 0 40px 0; 
	}

	.clsDownloadAppBanner h2{
		font-size:22px;
	}

	.clsDownloadAppBanner img{
		height:42px;
		margin:30px 8px 0 8px;
	}


}