/* Site Wide */
body {
	/*background: url('../img/pattern.jpg');*/
	background: black;
	/*color: #666666;*/
	color: #b3b3b3;
	font-family: 'Arvo', serif;
	font-size: 16px;
}

h1, h2, h3 {
	font-weight: bold;
	font-family: inherit;
}

a {
	color: #9f0b07;
}

a:hover {
	color: #b3b3b3;
}

header {
	width: 100%;
	height: 60px;
	background-color: rgba(47, 47, 47, 0.8);
	position: fixed;
	z-index: 1;
}

@media all and (min-width: 768px){
	header {
		position: static;
		height: auto;
		background-color: transparent;
	}
}

#logo h1 {
	font-size: 0;
	line-height: 0;
	margin: 0;
}

#logo h1 a {
	color: transparent;
}

#logo h1 span {
	background-image: url('../img/logo.png');
	background-repeat: no-repeat;
	background-size: auto 100%;
	display: block;
	height: 51px;
	position: fixed;
	top: 4px;
	right: 20px;
	z-index: 15;
	-webkit-transition: width 300ms;
	-o-transition: width 300ms;
	transition: width 300ms; 
}

#front #logo h1 span {
	background-image: url('../img/logo.png');
	width: 170px;
}

@media all and (min-width: 768px){
	#logo h1 span {
		position: absolute;
		top: 48px;
		right: 62px;
	}

	#front #logo h1 span {
		position: fixed;
	}
}

/* preload small logo */
/*#logo span:before {
	content: '';
	width: 0;
	height: 0;
	background-image: url('../img/logo-small.png');
}*/

#logo h1 span, #front #logo.small h1 span {
	/*background-image: url('../img/logo-small.png');*/
	width: 40px;
}

.menu .hamb {
	cursor: pointer;
	position: fixed;
	top: 22px;
	left: 22px;
	width: 31px;
	height: 15px;
	z-index: 17;
}

.menu.open .hamb {
	top: 84px;
	right: 22px;
	left: auto;
}

@media all and (min-width: 768px){
	.menu .hamb {
		position: absolute;
		top: 56px;
		left: 40px;
	}

	.menu.open .hamb {
	  top: 40px;
	  left: 174px;
	  right: auto;
	}
}

.menu .hamb > span {
	display: block;
	width: 24px;
	height: 3px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	-webkit-transition: all 300ms;
	-o-transition: all 300ms;
	transition: all 300ms;
}

#front .hamb > span {
	background: white;
}

.hamb > span, #front .hamb.red > span {
	background: #9f0b07;
}


.menu .hamb > span:nth-child(2) {
	width: 100%;
	top: 6px;
}

.menu .hamb > span:nth-child(3) {
	top: 12px;
}

.menu.open .hamb > span {
	width: 18px;
}

.menu.open .hamb > span:nth-child(1) {
	transform: rotate(45deg);
	top: 6px;

}

.menu.open .hamb > span:nth-child(2) {
	opacity: 0;
	
}

.menu.open .hamb > span:nth-child(3) {
	transform: rotate(-45deg);
	top: 6px;
	
}

.menu .nav {
	
	width: 0;
	height: 0;
	/*background: rgba(0,0,0,.8);*/
	background: rgba(47, 47, 47, 0.8);
	z-index: 16;
	overflow: hidden;
}

.menu.open .nav {
	position: absolute;
	top: 62px;
	left: 0;
	width: 100%;
	height: 291px;
}

@media all and (min-width: 768px){
	.menu.open .nav {
		top: 0;
		width: 240px;
	}
}

.menu .nav ul {
	padding: 0;
	list-style: none;
	/*margin: 38px 43px 10px 106px;*/
	margin: 36px 43px 10px 58px;

}

.menu .nav li {
	margin-bottom: 24px;

}

.menu .nav li a {
	color: white;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
}

#slider {
	height:100%;
}
 
.slide {
	overflow: hidden;
}

.shape-container {
	position: relative;
}

@media all and (min-width: 768px){
	.slide {
		/*background: url('../img/pattern.jpg');*/
		position: absolute;
		top:0;
		left:0;
		height: 0;							
		width: 100%;

		/*-moz-transition: height 0.6s cubic-bezier(0.63, 0.64, 0.3, 1);
		-o-transition: height 0.6s cubic-bezier(0.63, 0.64, 0.3, 1);
		-webkit-transition: height 0.6s cubic-bezier(0.63, 0.64, 0.3, 1);
		transition: height 0.6s cubic-bezier(0.63, 0.64, 0.3, 1);*/

		-moz-transform: translateZ(0);
		-ms-transform: translateZ(0);
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	 
	.slide:nth-child(1) { 
		z-index:10; 
		-moz-transition: height 0.6s cubic-bezier(0.63, 0.64, 0.3, 1);
		-o-transition: height 0.6s cubic-bezier(0.63, 0.64, 0.3, 1);
		-webkit-transition: height 0.6s cubic-bezier(0.63, 0.64, 0.3, 1);
		transition: height 0.6s cubic-bezier(0.63, 0.64, 0.3, 1);
	}
	.slide:nth-child(2) { z-index:9; }
	.slide:nth-child(3) { z-index:8; }
	.slide:nth-child(4) { z-index:7; }
	.slide:nth-child(5) { z-index:6; }
	 
	.active.slide {
		height: 100%;
	}

	.shape-container {
		position: absolute;
		margin: 0 auto;
		top: 100%;
		left: 0;
		right: 0;
		max-width: 1200px;
		width: 90%;
	}

	.leaving.up .shape-container {
		-webkit-animation-name: leaveup;
		-o-animation-name: leaveup;
		animation-name: leaveup;
		-webkit-animation-duration: 550ms;
		-o-animation-duration: 550ms;
		animation-duration: 550ms;
	}

	.leaving.down .shape-container {
		-webkit-animation-name: leavedown;
		-o-animation-name: leavedown;
		animation-name: leavedown;
		-webkit-animation-duration: 550ms;
		-o-animation-duration: 550ms;
		animation-duration: 550ms;
	}

	.showing .shape-container {
		top: 13%;
		-webkit-animation-name: moveup;
		-o-animation-name: moveup;
		animation-name: moveup;
		-webkit-animation-duration: 550ms;
		-o-animation-duration: 550ms;
		animation-duration: 550ms;
	}

	@-webkit-keyframes moveup {
		from {
			top: 100%;
		}
		to {
			top: 13%;
		}
	}

	@keyframes moveup {
		from {
			top: 100%;
		}
		to {
			top: 13%;
		}
	}

	@-webkit-keyframes leaveup {
		from {
			top: 13%;
		}
		to {
			top: -100%;
		}
	}

	@keyframes leaveup {
		from {
			top: 13%;
		}
		to {
			top: -100%;
		}
	}

	@-webkit-keyframes leavedown {
		from {
			top: 13%;
		}
		to {
			top: 100%;
		}
	}

	@keyframes leavedown {
		from {
			top: 13%;
		}
		to {
			top: 100%;
		}
	}

	@-webkit-keyframes lagbehind {
		0% {
			top: 0;
		}
		35% {
			top: 200px;
		}
		100% {
			top: 0;
		}
	}

	@keyframes lagbehind {
		0% {
			top: 0;
		}
		35% {
			top: 200px;
		}
		100% {
			top: 0;
		}
	}
}



/* Helper Classes */

.red {
	color: #9f0b07;
}

.anim-fadein {
	opacity: 1;
	-webkit-transition: opacity 450ms;
	-o-transition: opacity 450ms;
	transition: opacity 450ms;
}

.anim-fadeout {
	opacity: 0;
	-webkit-transition: opacity 450ms;
	-o-transition: opacity 450ms;
	transition: opacity 450ms;
}

/* End Helper Classes */

.slide .cadre {
  /*background: rgba(0,0,0,.1);*/
  background: rgba(254,254,254,.15);
  background-position: top left;
  background-size: 100%;
}

.slide .content {
	padding: 90px 30px;
	position: relative;
	overflow: hidden;
}

@media all and (min-width: 768px){
	.slide .content {
		margin: 140px 0 40px;
		padding: 90px 80px;
	}
}

.slide.leaving.up .content {
	-webkit-animation-name: lagbehind;
	-o-animation-name: lagbehind;
	animation-name: lagbehind;
	-webkit-animation-duration: 400ms;
	-o-animation-duration: 400ms;
	animation-duration: 400ms;
}

.content h2 {
	color: #9f0b07;
	font-size: 30px;
	margin: 15px 0 40px;
	text-transform: uppercase;
}

/* First Screen */

.screen1 .video {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
}

video#bgvideo {
	display: none;
}

@media all and (min-width: 768px){
	.screen1 .video {
		background-attachment: fixed;
	}

	video#bgvideo {
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		margin: auto;
		background-position: center;
		background-size: cover;
	}
}

/*.screen1 .welcome {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10%;
	margin: auto;
	text-align: center;
}

.welcome h1 {
	color: white;
	font-size: 48px;
	margin: 0;
}

.welcome button.btn {
	background: none;
	border: 1px solid white;
	color: white;
	margin-top: 3%;
	font-size: 22px;
	font-weight: 300;
	outline: none;
	padding: 17px 50px;
	text-transform: uppercase;
}*/

/* Second Screen */

@media all and (min-width: 768px){
	.shape-container .content {
		margin: 0 40px;
	}
}

/* Third Screen */

.screen3 .shape-container {
	height:auto!important;/*previous value is 44% ..hisham*/
}

.screen3 .cadre {
	background-image: url('../img/pattern-red.jpg');
	background-size: auto;
  	background-color: transparent;
	height: 100%;
}

.screen3 .content {
	padding: 120px 30px 60px;
}

@media all and (min-width: 768px){
	.screen3 .content {
		height: 100%;
		overflow: visible;
		margin: 0;
		padding: 90px 50px;
	}
}

.screen3 .content h2 {
	color: white;
}

.projects-slider {
	overflow: hidden;
}

.projects-slider .project {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 99%;
	height: 380px;
	margin: 0 auto;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.projects-slider .project:before {
	content: ' ';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.7);
}

.projects-slider .project:hover:before {
	visibility: hidden;
}

.projects-slider .project h3 {
	color: white;
	position: absolute;
	width: 100%;
	text-align: center;
	top: 38%;
	left: 0;
	text-transform: uppercase;
	font-size: 16px;

	-webkit-transition: all 300ms;
	-o-transition: all 300ms;
	transition: all 300ms;
}

.projects-slider .project:hover h3 {
	top: 15%;
	font-size: 22px;
}

.project-status {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    font-family: inherit;
}

.projects-slider .project .linker {
	opacity: 0;
}

.projects-slider .project:hover .linker {
	opacity: 1;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	height: 80px;
	text-align: center;
	color: white;
	font-size: 14px;
	-webkit-transition: all 100ms;
	-o-transition: all 100ms;
	transition: all 100ms;
}

.project .linker .arrow {
	width: 53px;
	height: 52px;
	background: url('../img/project-link.png') no-repeat;
	background-size: 100%;
	background-position: center;
	margin: 0 auto 6px;
}

.project > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.horiz-pager {
	height: 4px;
	background: rgba(255,255,255,.1);
	margin-top: 30px;
}

.horiz-pager > div {
	width: 24%;
	height: 100%;
	background: rgba(255,255,255,.4);
	margin: 0 1px;
}


/* Fourth Screen */

.screen4 {
	font-size: 14px;
}

/*.screen4 .description {
	margin-top: -14px;
}*/

.screen4 form {
	margin-top: 26px;
}

.screen4 form input, 
.screen4 form select,
.screen4 form textarea {
	height: 64px;
	border: none;
	border-radius: 0;
	width: 100%;
	padding: 6px 24px;
}

@media all and (min-width: 768px){
	.screen4 form input, 
	.screen4 form select,
	.screen4 form textarea {
		width: 90%;
	}
}

.screen4 form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url('../img/caret.png');
	background-repeat: no-repeat;
	background-size: 14px 6px;
	background-position: 90% center;
}

.screen4 form select::-ms-expand {
    display: none;
}

.screen4 form textarea {
	height: 142px;
	padding: 24px;
}

.screen4 form input[type="submit"] {
	background: url('../img/send-arrow.png') no-repeat;
	background-size: 20px 17px;
	background-position: 14px;
	border: 1px solid #6d6d6d;
	color: #6d6d6d;
	padding: 6px 0 6px 30px;
	margin-top: 20px;
}


/* Fifth Screen */

.screen5 .cadre {
	background: none;
	margin-top: 20px;
}

.screen5 .content {
	/*background: #d7d5d7;*/
	background: white;
	padding: 10px;
}

#map-canvas {
	height: 620px;
}

.screen5 .polygon-map-desc {
	background: rgba(0,0,0,.9);
	position: absolute;
	top: -22px;
	left: 0;
	width: 430px;
	padding: 42px;

}

@media all and (min-width: 768px){
	.screen5 .cadre {
		margin-top: 0;
	}

	.screen5 .polygon-map-desc {
		top: 0;
	}
}

.screen5 .polygon-map-desc .info {
	color: white;
	padding: 30px 10px;
	font-size: 13px;
	font-weight: 200;;

}

.polygon-map-desc .info h1 {
	font-size: 24px;
	text-transform: uppercase;
	margin: 0;

}

.polygon-map-desc .info h2 {
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 200;
	margin: 4px 0 30px;
}

.polygon-map-desc .info p {
	margin: 0;

}

/* Inside */

.inside {
	padding-top: 60px;
}

@media all and (min-width: 768px){
	.inside {
		padding-top: 0;
	}
}

.inside:before {
	background: url('../img/pattern-red.jpg');
	content: '';
	height: 20px;
	display: block;
}

.inside h3 {
	color: #9f0b07;
	text-transform: uppercase;
	margin: 16px 0 0px;
}
.inside h4 {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 200;
	text-transform: uppercase;
	font-family: inherit;
}
.inside h4 + h4 {
	/*color: black;*/
	color: white;
	font-weight: 400;
}

.tabs-pager {
	list-style: none;
}

.tabs-pager li {
	padding-top: 18px;
	margin: 0 16px;
	text-align: center;
	float: left;
}

.tabs-pager li.slick-active {
	background: url('../img/caret.png') no-repeat;
	background-position: top center;
	background-size: 14px 6px;
}

.tabs-pager .slick-active + .slick-active {
	background: none;
}

.tabs-pager li a {
	/*color: black;*/
	color: inherit;
	font-size: 12px;
    text-transform: uppercase;
}

.tabs-pager li a:hover, .tabs-pager li.slick-center a {
	color: #9f0b07;
	text-decoration: none;
}

/*.tabs-pager li.slick-active + .slick-active a {
  color: inherit;
}*/

.content-slider {
	margin-top: 30px;
}

.pane h3 {
	margin: 0 0 26px;
}

.sidebar {
	padding: 0 18px;
}

ul.submenu {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

ul.submenu a {
	color: inherit;
}

ul.submenu a.selected {
	font-weight: bold;
	color: #9f0b07;
}

.pane .main {
	padding: 25px 15px;
	background-color: black;
}

@media all and (min-width: 768px){

	.content-slider {
		margin-top: 82px;
	}

	.sidebar {
		padding: 0;
	}

	.pane .main {
		padding: 25px 48px 80px;
		border-left: 1px solid #7c7c7c;
		background-color: black;
	}
}

.inside .screen3 {
	height: 700px;
  	margin-top: 104px;
  	overflow: visible;
}

.inside .screen3 .shape-container {
	position: static;
}

.intensify {
	background-position: center;
	background-size: auto 100%;
	background-repeat: no-repeat;
	cursor: pointer;
	cursor: url('../img/plus_cursor.png') 25 25, pointer;
	position: relative;
}

body > figure > img {
	cursor: move;
	cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFW