@charset "utf-8";
/* font-family: 'Lato', sans-serif; 
    300 - Light
    400 - Normal
    700 - Bold
*/

/*----------------------------*/
/* RESETTING BROWSER DEFAULTS */
/*----------------------------*/
* {margin: 0; padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}

/* Border Box! */
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* Other Annoying Things */
*:invalid, *:-moz-submit-invalid, *:required, *:-moz-placeholder, *:-moz-focusring {outline: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
input[type=submit] {cursor: pointer; }
* :focus {outline: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
a {text-decoration: none;}
sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; font-size: 70%;}
sup { bottom: 1ex; }
sub { top: .5ex; }
input, textarea {font-family: 'Lato', sans-serif;}

/* HTML Height */
body, html {height: 100%; font-weight: 400; font-size: 14px; }

/*---------------------------*/
/*       GENERAL STUFF       */
/*---------------------------*/
html {font-family: 'Lato', sans-serif; }
body {background: #fff; color: #3a3e41;  }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
.enlarge {font-size: 1.4em; }
/* Responsive Images */
img {max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; }

/* Elements */
.float-left { display: block; float: left; width: 49%; }
.float-right { display: block; float: right; width: 49%;  }
.left {text-align: left; }
.center {text-align: center; }
.right {text-align: right; }
.red { color: #d13e3c; }
.blue { color: #0071bc; }

.hr { display: block; width: 100%; height: 1px; font-size: 0px; border-bottom: #939598 1px dotted; margin: 20px 0; }
hr { border: 0; height: 0; border-top: /*1px solid rgba(255, 255, 255, 0.1)*/ none; border-bottom: #a5a5a5 1px dotted; margin: 20px 0; }

/* Container */	
.container { width: 100%; /*max-width: 980px;*/ padding: 0 230px; /*margin: 0px auto; border: #0F0 1px solid;*/ }
	.container:after {content: "."; visibility: hidden; display: block; height: 0; clear: both;  }

/* Message if Java Script is turned off */
.java-is-missing { position: fixed; top: 0px; left: 0px; width: 100%; background-color: #ee3222; background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px); border-bottom: #fff 1px dashed; color: #fff; text-align: center; font-weight: 700; padding: 10px; z-index: 9998; }

.top-section { position: relative; display: table; height: 220px; width: 100%; background-repeat: no-repeat; background-position: 50% 30%; background-size: cover;}
	.top-about { background-image: url(../images/pictures/bg_about.jpg); background-position: 50% 0; }
	.top-projects { background-image: url(../images/pictures/bg_projects.jpg); background-position: 50% 50%; }
	.top-contacts { background-image: url(../images/pictures/bg_contacts.jpg);  }
	.top-project {background-position: 50% 50%; }
	.top-project .top-section-overlay { background: rgba(8,78,125,0.4); }
	.top-project .top-section-overlay h1 { text-shadow: 2px 2px 0px rgba(0,0,0,0.3); }

.top-section-overlay { display: table-cell; background: rgba(8,78,125,0.7); width: 100%; height: 100%; text-align: left; color: #fff; vertical-align: bottom; padding: 0px 30px 0px 230px;}
.top-section-overlay h1 { font-weight: 300; font-size: 67px; margin-bottom: 20px;}

	
.full-screen {display: table; width: 100%; height: 100%; text-align: center; vertical-align: top; position: relative;  }
.overlay {display: table-cell; height: 100%; width: 100%; vertical-align: middle; background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 25px; }
	.overlay .hr { font-size: 0px; overflow: hidden; height: 2px; width: 70%; max-width: 350px; background: #fff; margin: 24px auto;}
	.overlay h1 { font-weight: 300; font-size: 100px; text-transform: uppercase; }
	.overlay h2 { font-weight: 300; font-size: 60px; text-transform: uppercase; }
	.overlay p { font-size: 14px; line-height: 20px; /*text-transform: uppercase;*/ max-width: 600px; margin: 0px auto; }

/*----------------------------*/
/*           HEADER           */
/*----------------------------*/
header { display: block; height: 60px; position: absolute; top: 0px; z-index: 9499; width: 100%; background: #fff; text-align: right; }
header h1 { font-size: 0px; }
header h1 a { display: block; width: 150px; height: 170px; overflow: hidden; text-indent: -9999px; margin: 0px auto 0 40px; /*background: #fff url(../images/Remco_Group.png) 50% 50% no-repeat;*/
	background: url(../images/fallback/Remco_Group.png); /*background-image: url(../images/Remco_Group.svg)*/, none; background-position: 50% 50%; background-repeat: no-repeat; background-color: #fff;
	-webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease;}
	header h1 a:hover {  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /*IE8*/ filter: alpha(opacity=90); /*IE 5-7*/ opacity: 0.9; }
	header h1:after { content: "It always starts with a dream"; display: block; font-size: 13px; text-indent: 0px; background: none; color: #fff; position: absolute; left: 40px; top: 180px; font-style: italic;}

/* ---Navigation--- */
#menu-icon { display: none; }

#nav { margin: 0px; position: absolute; top: 0; right: 0; }

#main-menu { position: absolute; top: 0; right: 0; z-index: 9100; text-align: right;}
#main-menu ul, #main-menu ul li, #main-menu ul li a { display: block; position: relative; }
	#main-menu:after, #main-menu > ul:after { content: "."; visibility: hidden; display: block; height: 0; clear: both;}
	#main-menu > ul > li { float: left; }
/*Main level button styles*/
	#main-menu > ul > li > a { font-size: 14px;  color: #393939; text-transform: uppercase; line-height: 60px; padding: 0 15px; /*background: #CCC;*/
		-webkit-transition: color 0.3s ease, background 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease; -ms-transition: color 0.3s ease, background 0.3s ease; -o-transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease; }
		#main-menu > ul > li:hover > a { background: #d0d2d4;  }
/*".sub-menu" class is automatically added by the script*/
	#main-menu > ul > li.sub-menu > a { padding-right: 37px; }
/*Main level button Arrows styles*/
		#main-menu > ul > li.sub-menu > a:after {  position: absolute; top: 0; right: 10px; display: block; content: '\f107'; font-family: FontAwesome;}
		#main-menu > ul > li.sub-menu:hover > a:after { }
	#main-menu ul ul { position: absolute; left: -9999px; }

	#main-menu ul ul li { max-height: 0; -webkit-transition: max-height 0.3s ease; -moz-transition: max-height 0.3s ease; -ms-transition: max-height 0.3s ease; -o-transition: max-height 0.3s ease; transition: max-height 0.3s ease; }
	#main-menu li:hover > ul { left: auto; }
	#main-menu li:hover > ul > li { height: auto; max-height: 100px; }

	#main-menu ul ul ul { margin-left: 100%; top: 0;}
/*Sub level button styles*/
	#main-menu ul ul li a { border-bottom: #efefef 1px solid; padding: 10px 35px 10px 20px; width: 200px; font-size: 14px; line-height: 16px; color: #000; background: #fff;
		-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
		#main-menu ul ul ul li a { width: auto; -ms-word-break: keep-all; word-break: keep-all; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; }
/*Border of the end of each sub level*/
		#main-menu ul ul li:last-child > a, #main-menu ul ul li.last-item > a {  border-bottom: #efefef 5px solid; }
		#main-menu ul ul li:hover > a, #main-menu ul ul li a:hover { color: #66ccff; background: #f0f0f0;}
/*Sub level button Arrows styles*/
	#main-menu ul ul li.sub-menu > a:after { display: block; content: '\f105'; font-family: FontAwesome; position: absolute; top: 50%; margin-top: -8px; right: 5px; padding: 0 10px;}
/*---Offscreen styles---*/
#nav .edge ul { right: 100%; }
	#nav .edge ul li a { background: #CCC; }
/*Active button styles*/
	#nav li.act > a { color: #fff; background: #0071bc;  }
	#nav li.act > a:hover { background: #939598;}
/*Language button*/
	#nav li.language a { color: #939598; padding-left: 50px; background: url(../images/fallback/flag_egypt.png); background-position: 10px 50%; background-repeat: no-repeat;
		 -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease;  }
		#nav li.language a:hover, #main-menu > ul > li.language:hover > a { color: #0071bc; background: url(../images/fallback/flag_egypt.png); background-image: url(../images/flag_egypt.svg), none; background-position: 10px 50%; background-repeat: no-repeat;}



/* Slider */
.slide-overlay {background: rgba(8,78,125,0.7); width: 100%; height: 100%; text-align: left; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 30px 30px 30px 230px; }
.slide-overlay h1, .slide-overlay h2 { font-weight: 400; font-size: 30px; line-height: 36px; }
	.slide-overlay h1 { font-size: 60px; line-height: 66px; font-weight: 300; }
.slide-overlay p { width: 50%; margin: 10px 0px; font-size: 16px; line-height: 21px;   }
.slide-overlay .button {margin: 20px 0 0 0; }
.slide-overlay .button a {display: inline; text-transform: uppercase; color: #fff; border: #fff 1px solid; padding: 10px 40px; background: none;
	-webkit-transition: color 0.3s ease, background 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease; -ms-transition: color 0.3s ease, background 0.3s ease; -o-transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease; }
	.slide-overlay .button a:hover { color: #0071bc; background: #fff;}

.slide_beach-hotel-and-spa { background-image: url(../images/pictures/Slide_01_Beach-Hotel-and-Spa.jpg); }
.slide_golf-hotel { background-image: url(../images/pictures/Slide_02_Golf-Hotel-Lobby.jpg); }
.slide_gardens-makadi { background-image:url(../images/pictures/Slide_03_Stella-Gardens-Makadi.jpg); }

/* Projects */
.projects { height: 120px; width: 100%; border-top: #fff 1px solid; font-size: 0px; }
.projects-home {  transform: translateY(-120px); margin-bottom: -120px; }
.projects li { font-size: 0px; display: inline-block; height: 100%; width: 33.33%; border-right: #fff 1px solid; position: relative; background-size: cover; background-position: 50% 50%; text-align: center; padding: 29px 0 0 0;}
	.projects li:after { display: block; content: " "; width: 100%; height: 12px; background: #0071bc; position: absolute; bottom: 0; right: 0; left: 0; }
	.projects li:nth-child(2n):after {background: #939598;}
	.projects li:last-child { border-right: none; }
	.projects li { background-image: url(../images/pictures/bg_projects_01.jpg); }
	.projects li+li { background-image: url(../images/pictures/bg_projects_02.jpg); }
	.projects li+li+li { background-image: url(../images/pictures/bg_projects_03.jpg); }
.projects li a { display: inline-block; font-size: 16px; line-height: 46px; text-transform: uppercase; color: #fff; border: #fff 1px solid; width: 160px; height: 50px; background: #0071bc;
	-webkit-transition: color 0.3s ease, background 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease; -ms-transition: color 0.3s ease, background 0.3s ease; -o-transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease; }
	.projects li:nth-child(2n) a { background: #6d7177; }
	.projects li a:hover { background: #fff; color: #0071bc; }


/*-----------------------------*/
/*           CONTENT           */
/*-----------------------------*/
.content { width: 100%; background: #fff; }
	.content:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

/* Content Basics */
.content a { color: #0071bc; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; }
	.content a:hover, .content a:focus { color: #17a3f4; }
.content {color: #3a3e41; font-size: 14px; line-height: 22px; font-weight: 400;  }

/* Responsive Images */
.content img {max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; }

/* Typography Basics */
.content p,
.content ul,
.content ol,
.content blockquote,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 { margin: 20px 0px; }

/* Preventing single paragraph to push container heights */
.content p { margin: 0px 0px 20px 0px; }
.content p + p { margin: 20px 0px; }
/* Preventing single... END */

.content ul, .content ol { margin: 20px 0px 20px 44px; /*overflow: hidden; */}
	.content ul ul, .content ol ol, .content ol ul, .content ul ol { margin: 0px 0px 0px 40px; }
.content ul, .content ol ul { list-style-type: disc; list-style-position: outside; }
	.content ul ul { list-style-type: circle; list-style-position: inside; }
.content ol { list-style-type: decimal; list-style-position: inside; }
	.content ol ol { list-style-type: lower-latin; list-style-position: inside; }

.content blockquote { margin: 20px 40px; font-style: italic; }

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #0071bc; }

.content h1 { font-size: 40px; line-height: 46px; }
.content h2 { font-size: 30px; line-height: 36px; }
.content h3 { font-size: 30px; line-height: 36px; }
.content h4 { font-size: 20px; line-height: 26px; }
.content h5 { font-size: 20px; line-height: 26px; font-weight: 700; }
.content h6 { font-size: 18px; line-height: 24px; font-weight: 700;color: #3a3e41; }

/* Special Links */
.content .close a { display: inline-block; font-weight: 400; line-height: 40px; font-size: 16px; color: #0071bc; margin: 16px 0;  }
	.content .close a:before { display: inline-block; content: "\f00d"; font-family: fontAwesome; font-style: normal; font-size: 22px; line-height: 40px; text-align: center; width: 40px; height: 40px; margin-right: 10px; padding-left: 1px; background: #d0d2d4; color: #0071bc;
		-webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease;  }
	.content .close a:hover {  }
	.content .close a:hover:before { background: #0071bc; color: #fff; }
	
.content .more a { display: inline-block; font-weight: 400; line-height: 40px; font-size: 16px; color: #0071bc; margin: 16px 0; }
	.content .more a:before { display: inline-block; content: "\f054"; font-family: fontAwesome; font-style: normal; font-size: 22px; line-height: 40px; text-align: center; width: 40px; height: 40px; margin-right: 10px; padding-left: 1px; background: #d0d2d4; color: #0071bc;
		-webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease;  }
	.content .more a:hover {  }
	.content .more a:hover:before { background: #0071bc; color: #fff; }
	
.content .back a { display: inline-block; font-weight: 400; line-height: 40px; font-size: 16px; color: #0071bc; margin: 16px 0; }
	.content .back a:before { display: inline-block; content: "\f053"; font-family: fontAwesome; font-style: normal; font-size: 22px; line-height: 40px; text-align: center; width: 40px; height: 40px; margin-right: 10px; padding-left: 1px; background: #d0d2d4; color: #0071bc;
		-webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease;  }
	.content .back a:hover {  }
	.content .back a:hover:before { background: #0071bc; color: #fff; }
	
.content .external a { display: inline-block; font-weight: 400; line-height: 40px; font-size: 16px; color: #0071bc; margin: 16px 0; }
	.content .external a:before { display: inline-block; content: "\f08e"; font-family: fontAwesome; font-style: normal; font-size: 22px; line-height: 40px; text-align: center; width: 40px; height: 40px; margin-right: 10px; padding-left: 1px; background: #d0d2d4; color: #0071bc;
		-webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease;  }
	.content .external a:hover {  }
	.content .external a:hover:before { background: #0071bc; color: #fff; }

	
/* Sections */	
.content section { padding: 20px 0; }
.content section:nth-of-type(even) { background: #e7e7e7; } /*Automated zebra coloring of sections*/


/* Gallery */
.image-gallery { font-size: 0px; margin-left: -2.5%; /* Must match the ".image-gallery .image-wrap margin" */  }
	.image-gallery a {  }
	.image-gallery .image-wrap { display: inline-block; margin: 0 0 2.5% 2.5%; background: #fff; font-size: 16px; font-size: 1rem; vertical-align: top; width: 47.5%; height: 120px; background: url(../images/fallback/zoom.png); background-image: url(../images/zoom.svg), none;  background-position: 50% 50%; background-repeat: no-repeat; position: relative; overflow: hidden;} /*Div.image is automatically added by java script*/
		.image-gallery .image-wrap:hover {  }
	.image-gallery .image-wrap img {position: absolute; left: -100%; right: -100%; top: -100%; bottom: -100%; margin: auto; height: auto; width: auto;
	-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
	.image-gallery .image-wrap img:hover {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5; }
.image-gallery.two-columns .image-wrap {width: 47.5%; /* this value + 2.5 should = 50% */}
.image-gallery.three-columns .image-wrap {width: 30.83%; /* this value + 2.5 should = 33% */}
.image-gallery.four-columns .image-wrap {width: 22.5%; /* this value + 2.5 should = 25% */}

/* Three Boxes */
.boxes { font-size: 0px; margin-left: -2.5%;
	/*-ms-word-break: break-all;-ms-word-wrap: break-all;-webkit-word-break: break-word;-webkit-word-wrap: break-word;word-break: break-word;word-wrap: break-word;-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;*/ }
	.boxes a { }
	.boxes .box { display: inline-block; padding: 0px; background: #fff; font-size: 16px; font-size: 1rem; vertical-align: top; width: 30.83%; margin: 0 0 2.5% 2.5%; }
		/*.boxes .box h1, .boxes .box h2, .boxes .box h3, .boxes .box h4, .boxes .box h5, .boxes .box h6 { font-size: 30px; line-height: 36px; margin: 20px 0; color: #0071bc;   }*/
		.boxes .box h2 { font-size: 30px; line-height: 36px; margin: 20px 0; color: #0071bc;   }
		.boxes .box p { font-size: 14px; line-height: 22px;}
	.boxes .box .image { display: block; margin: 0px auto; text-align: center;  }
.boxes.two-columns .box {width: 47.5%;}
.boxes.three-columns .box {width: 30.83%;}
.boxes.four-columns .box {width: 22.5%;}
.boxes.three-first-wide .box {width: 64.16%;}
	.boxes.three-first-wide .box+.box {width: 30.83%;}
		.boxes.three-first-wide .box+.box h2 { text-align: right; }

/* Projects List */

.content ul.project-list { margin: 0px;  }
.project-list li { list-style-type: none; }
.project-list li a { display: block; padding: 10px 20px; font-size: 16px;  border-bottom: #fff 1px solid; background: #e7e7e7; color: #393939;
	-webkit-transition: color 0.3s ease, background 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease; -ms-transition: color 0.3s ease, background 0.3s ease; -o-transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease; }
	.project-list li:nth-of-type(even) a { background: #f1f1f1; }
	.project-list li a:hover, .project-list li:nth-of-type(even) a:hover, .project-list li.act a { color: #fff; background: #0071bc; }
	.boxes.three-first-wide .box .project-list li a { font-size: 14px; }
	
/*Tables*/

table {font-size: 13px; width: 100%; max-width: 940px; margin: 40px 0px;  }
table td, table th { padding: 10px;}
table td {border-bottom: #fff 1px solid; border-right: #fff 1px solid;}
table td:first-child {border-left: #fff 1px solid;}
table tr:first-child td {border:none; border-right: #fff 1px solid; background: #0071bc; color: #fff; font-weight: 700; }
table tr:first-child td:last-child {border:none;}
table tr:nth-of-type(odd) { background: #f1f1f1; }
	

/* ---Contact Form--- */
.form { /* Form width class */ margin: 40px 0 0 0; max-width: 100%; }
.form label {display: none;}
.form input {width: 100%; font-size: 16px; font-weight: 400; border: #fff 1px solid; background: #fff; color: #3a3e41; height: 44px; line-height: 26px; padding: 10px; margin: 0 0 30px 0;
	-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
	-webkit-appearance: none; -moz-appearance: none; appearance: none; }
	.form input[type="text"]:focus, .form input[type="email"]:focus, .form input[type="url"]:focus, .form input[type="number"]:focus, .form input[type="tel"]:focus { background: #fff; color: #000; border: #0071bc 1px solid;}
	.form input[type="submit"] { text-transform: uppercase; color: #fff; font-weight: 400; font-size: 16px; background: #0071bc; border: #fff 1px solid; 
	-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
	.form input[type="submit"]:hover, .form input[type="submit"]:focus {background: #3a3e41;  }
.form .scrollarea { display: block; /*float: right;*/ width: 100%; font-size: 16px; font-weight: 400; border: #fff 1px solid; background: #fff; color: #3a3e41; padding: 10px; margin: 0 0 30px 0; }
	.form .scrollarea-focus { display: block; width: 100%; font-size: 16px; font-weight: 400; border: #0071bc 1px solid; background: #fff; padding: 10px; margin: 0 0 30px 0;
	-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.form textarea {/* Textarea height class */ width: 100%; height: 110px; resize: none; border: none; background: none; color: #3a3e41; font-size: 16px; font-weight: 400; }
	.form textarea:focus { color: #000; border-color: #75757b;  }
	/* Drop Down (with applied background area via parent div) */
	.form select, .form option {width: 100%; /*no use of styling this, but anyway...*/ font-size: 16px; font-weight: 400; height: 44px;  }
			.form select { padding: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: transparent; color: #3a3e41; color: #0071bc; background-image: url(../images/arrow-down.svg); background-position: 100% 50%; background-repeat: no-repeat; font-family: 'Lato', sans-serif; cursor: pointer;  }
				.form select.selected { color: #3a3e41; }
			.form option { padding: 5px; font-family: 'Lato', sans-serif; color: #3a3e41;  }
			.form option:first-child { color: #0071bc; }
		.form .selectarea {  display: block; width: 100%; font-size: 16px; font-weight: 400; border: #fff 1px solid; background: #fff; color: #3a3e41; padding: 0px 10px; margin: 0 0 30px 0; height: 44px;
			-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
			.form .selectarea-focus { display: block; width: 100%; font-size: 16px; font-weight: 400; border: #0071bc 1px solid; background: #fff; padding: 0px 10px; margin: 0 0 30px 0; height: 44px;}
	/* Checkboxes */
	.form .checkbox {white-space: nowrap;}
		.form .checkbox label, .form .checkbox input { vertical-align: middle; cursor: pointer; }
	.form .checkbox input[type="checkbox"] { width: auto; margin: 0 7px 30px 0; padding: 0px; border: none; background: none; }
	.form .checkbox label { display: inline-block; line-height: 20px; margin: 0 0 30px 0; white-space: normal; width: 90%; font-size: 16px; }
	/* Radio Buttons */
	.form .radiobuttons {white-space: nowrap;  }
		.form .radiobuttons label, .form .radiobuttons input { vertical-align: middle; cursor: pointer; }
	.form .radiobuttons input[type="radio"] { width: auto; margin: 0 7px 30px 0; padding: 0px; border: none; background: none; }
	.form .radiobuttons label { display: inline-block; line-height: 20px; margin: 0 20px 30px 0; white-space: normal; word-break: break-all; font-size: 16px;}
/* Placeholder */
::-webkit-input-placeholder {color: #0071bc; opacity: 1 !important;}
:-moz-placeholder { /* Firefox 18- */ color: #0071bc; opacity: 1 !important;}
::-moz-placeholder {  /* Firefox 19+ */ color: #0071bc; opacity: 1 !important;}
:-ms-input-placeholder {color: #0071bc; opacity: 1 !important;}
placeholder {color: #0071bc; opacity: 1 !important;}
/* ---Contact Form END--- */

/* Video */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.video-embed iframe, .video-embed object, .video-embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Contacts*/
ul.contact-list {list-style: none; margin: 16px 0; font-size: 14px; line-height: 1.4em;  }
	ul.contact-list li { padding: 0 0 0 30px; margin: 16px 0; position: relative;  }
		ul.contact-list li a { color: #3a3e41; }
		ul.contact-list li a:hover { color: #0071bc; }
	ul.contact-list li:before { content: "\f069"; font-family: fontAwesome; color: #0071bc; font-size: 16px; text-align: center; display: inline-block; position: absolute; left: 0px; width: 20px; margin-right: 10px;
	-webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease;  }
		/*ul.contact-list li:hover:before, ul.contact-list li:focus:before { color: #66ccff; }*/
ul.contact-list li.address:before {content: "\f041";}
ul.contact-list li.phone:before {content: "\f095";}
ul.contact-list li.phone-square:before {content: "\f098";}
ul.contact-list li.mobile:before {content: "\f10b";}
ul.contact-list li.fax:before {content: "\f1ac";}
ul.contact-list li.email:before {content: "\f003";}
ul.contact-list li.envelope:before {content: "\f0e0";}
ul.contact-list li.website:before {content: "\f0ac";}
ul.contact-list li.skype:before {content: "\f17e";}
ul.contact-list li.facebook:before {content: "\f09a";}
ul.contact-list li.twitter:before {content: "\f099";}
ul.contact-list li.google:before {content: "\f0d5";}
ul.contact-list li.resume:before {content: "\f0f6";}

#contact-menu { margin-top: 84px; }

#purchase, #investment, #feedback { display: none; background: #e7e7e7; }


/* Map */
section.map { padding: 0px;  }
#map-canvas { width: 100%; height: 700px; /*margin-top: 40px;*/ }
	.individual #map-canvas { height: 500px; margin: 0px; border-top: #fff 1px solid; }
	#map-canvas img { max-width: none; }
	.info_content h3 { line-height: 0.9em; }

	
/*----------------------------*/
/*           FOOTER           */
/*----------------------------*/
footer { width: 100%; color: #939598; padding: 20px 40px; font-weight: 400;  background: #fff; text-transform: uppercase; }
	footer:after {content: "."; visibility: hidden; display: block; height: 0; clear: both; }
	footer a { color: #939598; transition: color 0.3s ease; }
	footer a:hover { color: #0071bc;  }
.footer-container { width: 100%; margin: 0px auto; }
.footer-left { display: block; float: left; width: 59%; }
	.footer-left ul li { display: inline-block; }
	.footer-left ul li a { display: block; font-size: 11px; line-height: 47px;  margin: 0px 7px; }
.footer-right { display: block; float: right; font-size: 11px; line-height: 47px; text-align: right; width: 39%; }
	.footer-right img, .footer-right svg { vertical-align: middle; margin-left: 20px; }
	

/* Back to top */

.cd-top {
  display: inline-block;
  height: 60px;
  width: 60px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  /*background: rgba(238, 85, 80, 0.8) url(../images/back_to_top.svg) no-repeat center 50%;*/
  background: rgba(8,78,125,0.8) url(../images/back_to_top.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: .8;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .8;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}

/*-----------------------------*/
/*        BREAK POINTS         */
/*-----------------------------*/

@media (max-height: 650px) {

.slide-overlay p { width: 90%;  }

}


@media (max-height: 600px) {

.projects-home { transform: translateY(0px); margin-bottom: 0px; }
}

@media (max-width: 1200px) {
/* Container */	
.container {  padding: 0 40px 0 230px; }

}
@media (max-width: 950px) {

/* Elements */
.container {  padding: 0 40px; }

.float-left { float: none; width: 100%; }
.float-right { float: none; width: 100%;  }


.top-section {  height: 140px; width: 100%; }
.top-section-overlay { padding: 0px 30px 0px 160px;}
.top-section-overlay h1 { font-size: 40px; }


	.overlay h1 { font-size: 50px; }
	.overlay h2 { font-size: 30px; }
	.overlay p { font-size: 14px; line-height: 18px; max-width: 90%;} 


/*--------------HEADER----------------*/
header h1 a {  width: 100px; height: 120px; background-image: url(../images/Remco_Group_small.png);
	background: url(../images/fallback/Remco_Group_small.png); , none; background-position: 50% 50%; background-repeat: no-repeat; background-color: #fff;}
	header h1:after { color: #0071bc; left: 160px; top: 22px;}

/* Navigation */
#menu-icon { display: block; font-size: 0px; line-height: 25px; font-weight: 400; text-transform: uppercase; text-align: right; padding: 20px 0 20px 20px; margin: 30px 0 0 0; color: #393939; cursor: pointer; position: absolute; right: 40px; top: -92px;/* background: #CC0;*/ }
	#menu-icon:after { content: "\f0c9"; display: inline-block; width: 22px; height: 25px; margin: 0 0 0 10px; font-family: FontAwesome; font-size: 25px;  }
	#menu-icon:hover, #menu-icon:focus { color: #0071bc;}
	#menu-icon.active { }
		#menu-icon.active:hover { color: #0071bc; }
		#menu-icon.active:after { content: "\f00d";  }

#main-menu {width: 320px; width: 100%; margin-top: 60px;}
#main-menu ul {width: 100%; display: none; margin-top: 0px; background: #fff; }
#main-menu > ul {border-bottom: #0071bc 5px solid; margin-bottom: 20px; position: absolute; z-index: 9999;}
#main-menu > ul > li > a { padding: 0 30px; }
#main-menu ul li {width: 100%; border-top: #efefef 1px solid; }
	#main-menu ul li:first-child {border-top: #0071bc 2px solid; }

#main-menu ul ul li, #main-menu li:hover > ul > li { height: auto; max-height: none; }
#main-menu ul li a, #main-menu ul ul li a { width: 100%; border-bottom: 0; }
#main-menu ul ul li:last-child > a, #main-menu ul ul li.last-item > a { border-bottom: none;}

#main-menu > ul > li { float: none; }
#main-menu ul ul li a { padding-left: 25px; }
	#main-menu ul ul ul li a { padding-left: 35px; }
	#main-menu ul ul ul ul li a { padding-left: 45px; }
	#main-menu ul ul ul ul ul li a { padding-left: 55px; }
	#main-menu ul ul ul ul ul ul li a { padding-left: 65px; }
	#main-menu ul ul ul ul ul ul ul li a { padding-left: 75px; }

#main-menu ul ul, #main-menu ul ul ul { position: relative; left: 0; width: 100%; margin: 0; }
#main-menu > ul > li.sub-menu > a:after, #main-menu > ul > li.sub-menu > a:before, #main-menu ul ul > li.sub-menu > a:after, #main-menu ul ul > li.sub-menu > a:before { display: none; }

#main-menu .sub-menu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: #efefef 1px solid; height: 70px; width: 70px; cursor: pointer; }
	#main-menu .sub-menu-button:after { position: absolute; display: block; content: '\f078';/*arrow down*/ /*content: '\f067';plus*/ font-family: FontAwesome; line-height: 70px; width: 100%; height: 100%; text-align: center; color: #000;
		-webkit-transition: color 0.3s ease, background 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease; -ms-transition: color 0.3s ease, background 0.3s ease; -o-transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease; }
		#main-menu .sub-menu-button:hover:after { color: #66ccff; }
		
	#main-menu ul ul .sub-menu-button { height: 37px; width: 37px; }
	#main-menu ul ul .sub-menu-button:after { line-height: 37px; }
  
#main-menu .sub-menu-button.sub-menu-opened { background: #66ccff; 
	-webkit-transition: color 0.3s ease, background 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease; -ms-transition: color 0.3s ease, background 0.3s ease; -o-transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease;}
	#main-menu .sub-menu-button.sub-menu-opened:hover { background: #89e3e3; }
	#main-menu .sub-menu-button.sub-menu-opened:after { content: '\f077';/*arrow up*/ /*content: '\f068';minus*/ color: #fff; }

/*Language Button*/
	#nav li.language a { background-position: 100% 50%; padding-right: 70px;    }
		#nav li.language a:hover, #main-menu > ul > li.language:hover > a { background-position: 100% 50%;  padding-right: 70px; }




/* Slider */
.slide-overlay {padding: 40px;  }
	.slide-overlay h1 { font-size: 56px; line-height: 60px; }
	.slide-overlay p { width: 90%; font-size: 14px; line-height: 19px; }
.slide-overlay .button a { font-size: 14px; }

/* Three Boxes (Become One) */
.boxes { margin-left: 0; }
.boxes .box { width: 100% !important; /* over-ride all li styles */ margin: 0 0 20px; }
	.boxes.three-first-wide .box+.box h2 { text-align: left; }
	
#contact-menu { margin-top: 0px; }

/*--------------FOOTER----------------*/

footer { position: relative;  }
.footer-left, .footer-right { float: none; width: 100%; max-width: none; text-align: center; margin: 18px 0; line-height: 20px;}
	.footer-left ul li a { line-height: 20px; }
	.footer-right img, .footer-right svg { display: block; margin: 20px auto; }
	


/* Back to top */

.cd-top {height: 52px; width: 52px; background: rgba(8,78,125, 0.7) url(../images/back_to_top.svg) no-repeat center 50%; /*-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;*/ bottom: 10px; right: 10px;}

}

@media (min-width: 951px) {
  #nav {display: block !important; } /*Bug fix for displaying Menu when resizing window. Media query must be 1px wider than the menu break point, must be "min-width", and must be after the break point*/
}

@media (max-width: 800px) {
/* Gallery */
.image-gallery.four-columns .image-wrap {width: 30.83%; /* 4 columns become 3 columns */}

}

@media (max-width: 600px) {

/* Slider */
.slide-overlay {padding: 40px;  }
	.slide-overlay h1 { font-size: 30px; line-height: 36px; }
	.slide-overlay h2 { font-size: 20px; line-height: 36px; }
	.slide-overlay p { width: 90%; font-size: 14px; line-height: 19px; }
.slide-overlay .button a { font-size: 14px; }

/* Projects */
.projects { height: auto; /*border-top: none;*/ }
.projects-home {  transform: translateY(0px); margin-bottom: 0px; }
.projects li { height: 120px; width: 100%; border-right: none;/* border-top: #fff 1px solid;*/ }





/* Gallery */
.image-gallery.four-columns .image-wrap {width: 47.5%; /* 3 (was 4) columns become 2 columns */}
.image-gallery.three-columns .image-wrap {width: 47.5%; /* 3 columns become 2 columns */}

}






@media (max-width: 420px) {

.container {  padding: 0 20px; }
	
header h1 a { margin: 0px auto 0 20px;}
header h1:after { display: none;}
#menu-icon { right: 20px;}
.top-section {  height: 180px;  }
.top-section-overlay { padding: 0px 20px 0px 20px;}
.top-section-overlay h1 { font-size: 30px; margin-bottom: 17px; }
.slide-overlay {padding: 20px;  }

.boxes .box { padding: 0px; }
.boxes .box:last-child{ margin: 0 0 20px 0; }

/* Gallery (all columns became one) */
.image-gallery { margin-left: 0; }
	.image-gallery a { display: block; }
	.image-gallery .image-wrap { width: 100% !important; /* over-ride all li styles */ margin: 0 0 20px; }


}