/********************************************************************************/
/* PROJECT
/********************************************************************************/

#project {
	position: relative;
	overflow: hidden;
}

/* Fluid boxes */
.fluid-box {
	position: absolute;
	z-index: 9;
	width: 42px;
	height: 42px;
	overflow: visible;
}
.fluid-box.animate,
.fluid-box.open {
	z-index: 10;
}
.toggle-box {
	display: block;
	width: 42px;
	height: 42px;
	cursor: pointer;
}
.toggle-box:before,
.toggle-box:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 9;
	top: 0;
	height: 42px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-transition: opacity 0.5s ease;
	   -moz-transition: opacity 0.5s ease;
		-ms-transition: opacity 0.5s ease;
		 -o-transition: opacity 0.5s ease;
			transition: opacity 0.5s ease;
}
.toggle-box:before {
	width: 252px;
	left: -115px;
	opacity: 1;
	background-image: url('../img/press.png');
}
.toggle-box:after {
	width: 42px;
	left: 0;
	opacity: 0;
	background-image: url('../img/close.png');
}
.invert-colors .toggle-box:after {
	background-image: url('../img/close-white.png');
}
.fluid-box.open .toggle-box:before {
	opacity: 0;
}
.fluid-box.open .toggle-box:after {
	opacity: 1;
}
.fluid-box.animate .toggle-box:before,
.fluid-box.animate .toggle-box:after {
	opacity: 0;

} 
.box-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 7;
	width: 42px;
	height: 42px;
	background: #fff;
}
.box-content {
	position: absolute;
	z-index: 8;
	left: -140px;
	top: -30px;
	width: 322px;
	padding: 102px 20px 10px 20px;
	opacity: 0;
	color: #003b48;
	visibility: hidden;
	overflow: auto;
}
.invert-colors .box-content {
	color: #fff;
}



/* Fluid box Vision */
#fluid-box-vision {
	top: 20%;
	left: 60%;
}
#fluid-box-vision .box-bg {
	background: rgba(241,164,190,0.95);
}
/***/



/* Fluid box Floors */
#fluid-box-floors {
	top: 35%;
	left: 30%;
}
#fluid-box-floors .box-bg {
	background: rgba(255,255,153,0.95);
}

/* Custom scrollbar fixes */
.mCS-dir-rtl>.mCSB_inside>.mCSB_container {
	margin-right: 30px;
}
.mCSB_scrollTools {
	width: 10px;
}
.mCSB_scrollTools .mCSB_dragger {
	width: 8px;
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	width: 8px;
}
/***/



/* Fluid box Project */
#fluid-box-about {
	top: 80%;
	left: 45%;
}
#fluid-box-about .box-bg {
	background: rgba(252,198,150,0.95);
}
/***/



/* Fluid box Haifa */
#fluid-box-haifa {
	top: 65%;
	left: 30%;
}
#fluid-box-haifa .box-bg {
	background: rgba(6,64,79,0.95);
}
#fluid-box-haifa .box-content {
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
}
/***/


/* Fluid box JBros */
#fluid-box-jbros {
	top: 50%;
	left: 60%;
}
#fluid-box-jbros .box-bg {
	background: rgba(199,178,214,0.95);
}
#fluid-box-jbros .box-content {
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
}
/***/


@media only screen and (min-width : 480px) {
	.box-content {
		left: -170px;
		width: 382px;
	}
}

@media only screen and (min-width : 768px) {
	#fluid-box-vision {
		top: 20%;
		left: 75%;
	}
	#fluid-box-floors {
		top: 35%;
		left: 20%;
	}
	#fluid-box-about {
		top: 55%;
		left: 50%;
	}
	#fluid-box-haifa {
		top: 20%;
		left: 35%;
	}
	
	.box-content {
		/*
		left: -229px;
		width: 500px;
		*/
		padding-left: 40px;
		padding-right: 40px;
	}
	#fluid-box-haifa .box-content {
		left: -170px;
		width: 382px;
	}
	
	#fluid-box-jbros {
		top: 35%;
		left: 60%;
	}
}


@media only screen and (min-width : 1200px) {
	#fluid-box-vision {
		top: 17%;
		left: 75%;
	}
	#fluid-box-floors {
		top: 30%;
		left: 15%;
	}
	#fluid-box-about {
		top: 50%;
		left: 40%;
	}
	#fluid-box-haifa {
		top: 20%;
		left: 40%;
	}
	.box-content {
		left: -220px;
		width: 482px;
	}
}


@media only screen and (min-width : 1600px) {
	#fluid-box-vision {
		top: 14%;
		left: 77%;
	}
	#fluid-box-floors {
		top: 33%;
		left: 15%;
	}
	#fluid-box-about {
		top: 35%;
		left: 45%;
	}
	#fluid-box-haifa {
		top: 18%;
		left: 30%;
	}
	#mCSB_3_container {
		padding-right: 60px;
	}
	.very-large-text {
		font-size: 1.25em;
		letter-spacing: 1px;
	}
	#fluid-box-jbros {
		top: 20%;
		left: 59%;
	}
}
@media only screen and (min-width : 1920px) {
}

/********************************************************************************/