@import url("font-awesome.min.css");

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-Regular-webfont.eot');
    src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
	}

@font-face {
	font-family: 'OpenSans-Semibold';
	src: url('/fonts/OpenSans-Semibold.eot'); /* IE */
    src: url('/fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/OpenSans-Semibold.ttf') format('truetype');
	}


/* Css Reset */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video
	{
	margin: 0px;
	padding: 0px;
	font:inherit;
	outline: 0;
	border:0;
	outline:0;
	}

body							{ background-color: #fff; }

body, html
	{
	font-family: 'Open Sans',arial,sans-serif;
	font-size:0.95em;
	color:#4d4d4;
	padding:0;
	margin:0;
	}

li		{ list-style:none; margin-left:15px;}

.bold, strong	{ font-weight:bold;}

.clear	{ clear:both; }
img		{ max-width:100%; }

a
	{
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''
	}

a		{ color:#4c91ce; text-decoration:none; }
a:hover	{ color:#373a44; text-decoration:underline; }
p		{ line-height:25px; margin-top:0px; }

a img:hover	{opacity:0.7;}
h5			{ font-weight:bold; font-size:1.3em; color:#000; }

a h5:hover	{ text-decoration:underline; }
.list li h5	{ display:inline-block;}
.bg-3 h5, .bg-5 h1	{display:inline-block;}

.bg-1
	{
	background: url(/grfx/services-bg.png) no-repeat center center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100% !important;
    width: 100% !important;
	}

.bg-2
	{
	background: url(/grfx/marine-bg.png) center center;
	-webkit-background-size: cover !important;
	-moz-background-size: cover;
	-o-background-size: cover;
	-background-size: cover;
	background-size: cover;
	}

.bg-3
	{
	background: url(/grfx/publisher-bg-services.png) center center fixed;
	-webkit-background-size: cover !important;
	-moz-background-size: cover;
	-o-background-size: cover;
	-background-size: cover;
	background-size: cover;
	}

.bg-4
	{
	background: url(/grfx/responsive-bg.png) center center;
	-webkit-background-size: cover !important;
	-moz-background-size: cover;
	-o-background-size: cover;
	-background-size: cover;
	background-size: cover;
	}

.bg-5
	{
	background: url(/grfx/projects-bg.png) center center;
	-webkit-background-size: cover !important;
	-moz-background-size: cover;
	-o-background-size: cover;
	-background-size: cover;
	background-size: cover;
	}

.bg-6
	{
	background: url(/grfx/contact-bg.png) center center;
	-webkit-background-size: cover !important;
	-moz-background-size: cover;
	-o-background-size: cover;
	-background-size: cover;
	background-size: cover;
	}

header h1
	{
	background: url(/grfx/logo.png) no-repeat;
	display: block;
    float: left;
    height: 89px;
    text-indent: -9999px;
    width: 156px;
    margin:20px 0px;
	}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), not all, not all, not all, only screen and (min-resolution: 124.8dpi), only screen and (min-resolution: 1.3dppx)
{
	span.logo
		{
		background: url(/grfx/logo@2x.png) no-repeat;
		background-size:156px 89px;
		}

}


h1		{ font-size:3.5em; color:#373a44; margin-bottom:40px;}
h2		{ font-size:3em; color:#373a44; margin-bottom:40px;}
h2 span	{ font-family: 'OpenSans-Semibold', sans-serif;}
h4		{ font-size:1.2em; display:inline-block; font-weight:bold;}

header 	{ background-color: #fff; position:fixed; top:0; width:100%; z-index:100; border-bottom: 1px #ebebeb solid; }
.inner	{ max-width:1280px; margin:0 auto; padding:0px 20px; }
header .inner	{ border-left:2px solid #fff; }

#header-img
	{
	background: url(/grfx/vervolg-header.jpg) no-repeat;
	border-bottom:1px solid #dad7d7;
	background-position:91% 35%;
    background-size: cover;
    max-width: 100%;
    width: 100%;
	}

#header-img::after {
    content: " ";
    display: block;
    height: 300px;
    margin-top:100px;
}


#language		{ float:right; margin-top:50px; padding-left:20px;}
#language button
	{
	float:left;
	width:25px;
	height:17px;
	cursor:pointer;
	background:none;
	border:0px;
	}

/* Navigatie */


#nav > a { display: none; }


#nav
	{
	display: block;
    position: relative;
	}

#nav > ul
	{
    float: right;
    height: 100%;
    margin: 0;
    margin-top:40px;
    font-size:1.3em;
    font-family:'OpenSans-Semibold', sans-serif;
    padding-left:15px;
    }

#nav ul > li
	{
    display: block;
    float: left;
    list-style: outside none none;
    padding: 5px 0px;
    position: relative;
    z-index: 1;
	cursor: pointer;
    float: left;
    text-transform:uppercase;
    color:#373a44;
    margin:0;
    padding-bottom:20px;
    padding-top:20px;
	}

#nav li::after
	{
    color: #373a44;
    content: "|";
    padding-left: 15px;
    padding-right:15px;
	}

#nav li ul
	{
	background:#fff;
    display: none;
    min-width: 200px;
    padding: 5px 5px;
    position: absolute;
    top: 100%;
    border:1px solid #ccc;
    margin-top:-10px;
	}

#nav li ul::before
	{
	background: url(/grfx/arrow-menu.png) no-repeat;
	content:"";
	position:relative;
	float:left;
	margin-top:-13px;
	margin-left:30px;
	z-index:999;
	width:15px;
	height:8px;
	}

#nav ul > li > ul > li { float: none; font-size:0.7em; margin-left:0px; padding:5px 0px;}


#nav ul > li:last-child::after, #nav ul > li > ul > li:after
	{
    border-bottom: 0px;
    content: none;
	}

#nav ul > li > ul > li a, #nav li:hover ul 	{ display: block; }
#nav li a 									{ color: #373a44; text-decoration:none;}
#nav ul li.active a, #nav ul li:hover a		{ color: #4c91ce; text-decoration:none;}

#nav li ul li a 							{ color: #373a44 !important;}
#nav li ul li a:hover 						{ color: #4c91ce !important; text-decoration:none;}

/* Main */

#breadcrumb
	{
	background: #5592b1 none repeat scroll 0 0;
    padding:10px;
    height:20px;
    margin-bottom:40px;
	}

#breadcrumb ul	{ margin:0; padding:0;}
#breadcrumb li 	{ float:left; list-style:none; margin-right:10px; margin-left:0px; color:#fff; }
#breadcrumb li a	{color:#fff; text-decoration:underline;}
#breadcrumb li:after
	{
	content:"/";
	display:block;
	float:right;
	margin-left:10px;
	color:#fff;
	cursor:default;
	text-decoration:none;
	}

#breadcrumb li:last-child:after	{display:none;}

dl.banners dt 	{ float:none;}


.join-us {
	background: url(/grfx/banner-vacature.png) no-repeat;
	border: 2px solid #5e59d5;
	width: 396px;
	height: 252px;
	float: right;
	}

.join-us a {
	text-indent: -9999px;
	height: 252px;
	display: block;
	}


.primary-banners .content-slider a	{ display:inline; }
.primary-banners .content-slider	{ height:125px; }

dl.banners dt, dl.banners dd
	{
	margin-bottom:8px;
	list-style:none;
	height:44px;
	width:266px;
	margin-left:0;
	}

dl.banners dd:last-child	{ margin-bottom:0px; }

dl.banners
	{
	width:auto;
	border:1px solid #5a83a1;
	background: rgba(167,199,220,1);
	background: -moz-linear-gradient(left, rgba(167,199,220,1) 0%, rgba(167,199,220,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(167,199,220,1)), color-stop(100%, rgba(167,199,220,1)));
	background: -webkit-linear-gradient(left, rgba(167,199,220,1) 0%, rgba(167,199,220,1) 100%);
	background: -o-linear-gradient(left, rgba(167,199,220,1) 0%, rgba(167,199,220,1) 100%);
	background: -ms-linear-gradient(left, rgba(167,199,220,1) 0%, rgba(167,199,220,1) 100%);
	background: linear-gradient(to right, rgba(167,199,220,1) 0%, rgba(167,199,220,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c7dc', endColorstr='#a7c7dc', GradientType=1 );
	padding:20px;
	margin-bottom:50px;
	overflow:hidden;
	Float:right;
	}

dl.banners dt a, dl.banners dd a
	{
    display:block;
    width:100%;
    height:100%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}

a.projects-btn
	{
	background:#5592b1;
	color:#fff;
	padding:8px 15px;
	border-radius:1px;
	margin-top:15px;
	display:inline-block;
	border-radius:3px;
	text-align:center;
	}

#content	{ padding-top:130px; }

#content .description ol,
#content .description ul,
#content .description p		{ margin-bottom: 18px; }
#content .description ul li 	{ list-style: disc; }

ul.list
	{
	margin:10px 20px; list-style:none;
	}

ul.list li:before
	{
  	content: "\f105";
  	font-family: FontAwesome;
  	float:left;
  	margin-left: -1.3em;
  	width: 1.3em;
  	margin-top:4px;
	}

#content ul.list li	{margin-bottom:10px; list-style:none;}

.description ul li::before {
    font-family: FontAwesome;
    display: inline-block;
    margin-left: 10px;
    width: 1.3em;
}

.box-services, .box-projects
	{
	border:3px solid #5592b1;
	margin-right:25px;
	float:left;
	height:125px;
	margin-bottom:25px;
	max-width:300px;
	width:100%;
	overflow:hidden;
	}

.box-projects
	{
	height:auto;
	border:none;
	display:inline-block;
	float:none;
	max-width:775px;
	margin-top:60px;
	margin-bottom:0px;
	margin-right:0px;
	}



.box-responsive	{ margin-bottom:0px; }
.tablet-box		{ margin-right:0px; max-width:275px;}

.box-marine
	{
	background: url(/grfx/marine-bg-home.png) #fff no-repeat;
	background-position: center center;
    background-size: cover;
	}

.box-services:hover	{opacity:0.7;}

.box-publisher
	{
	background: url(/grfx/publisher-bg1.png) no-repeat;
	background-position: center center;
    background-size: cover;
	}

a .box-publisher h4
	{
	float:right;
	}

.box-responsive
	{
	background: url(/grfx/app-bg.png) no-repeat;
	background-position: center center;
    background-size: cover;
	}

a .box-services h4
	{
	max-width:125px;
	margin-left:15px;
	margin-top:10px;
	}

/* Portfolio */

.overview
	{
	position:relative;
	padding-bottom:80px;
	}

ul#nav-portfolio	{ margin: 20px auto 0; position:relative; width:300px; }

.total-found	{float:left; border-bottom:1px solid #3b9baf; padding-bottom:10px; margin-top:20px;}

ul#nav-portfolio li
	{
	list-style:none;
	float:left;
	min-width:40px;
	text-align:center;
	margin:0px 5px;
	color:#373a44;
	font-size:18px;
	border-bottom:1px solid #c7c2c2;
	padding-bottom:5px;
	list-style:none !important;
	}

ul#nav-portfolio .jump {
	cursor:pointer;
	}

dl.services dt a, dl.services dd a	{color:#fff; white-space:normal; display:inline-block; text-indent:1px;}
dl.services dt, dl.services dd	{height:auto;}

ul#nav-portfolio li.active, ul#nav-portfolio li:hover				{ color:#5592b1; border-bottom:1px solid #5592b1;}
ul#nav-portfolio .fa-angle-left, ul#nav-portfolio .fa-angle-right, ul#nav-portfolio .fa-caret-right, ul#nav-portfolio .fa-caret-left	{ color:#c7c2c2; border-bottom:0px !important; width:auto; min-width:10px; margin-top:5px;}
ul#nav-portfolio .fa-caret-right, ul#nav-portfolio .fa-caret-left {color:#5592b1;}
ul#nav-portfolio .fa-angle-left.active, ul#nav-portfolio .fa-caret-right.active, .fa-caret-left.active		{ border-bottom:0px; }
ul#nav-portfolio .disable, ul#nav-portfolio .disable:hover						{ color:#c7c2c2; cursor:auto; border-bottom:0px; }
ul#nav-portfolio .fa-angle-right:hover, ul#nav-portfolio .fa-angle-left:hover	{color:#c7c2c2; cursor:default;}

ul li .fa-angle-right			{margin-right:5px;}
ul#nav-portfolio .fa-angle-right, ul#nav-portfolio .fa-angle-left	{cursor:default;}


.folio
	{
    width: 310px;
    height: 245px;
    float: left;
    border: 1px solid #dad7d7;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin-right:10px;
    margin-bottom:10px;
	}

.folio:nth-child(4), .folio:nth-child(8)	{ margin-right:0px; }

.folio .face
	{
    width: 310px;
    height: 245px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
	}

.folio img
	{
    display: block;
    position: relative;
    width:100%;
    height:auto;
    background-size:295px 245px;
    height:245px;
	}

.folio h4
	{
	height: 54px;
	overflow:hidden;
    color: #fff;
    text-align: center;
    position: relative;
    font-size:1.6em;
    font-weight:normal;
    padding: 10px;
    opacity:0;
	background: transparent;
    transition: 300ms;
    display:block;
	}

.fa-external-link
	{
    display: inline-block;
    font-size:24px;
    color: #fff;
    border:2px solid #fff;
    width:95px;
    padding:10px 0px;
    margin-top:20px;
	}

.fa-external-link:hover { color:#668fc9; border:2px solid #668fc9; }

.folio img { transition: 0.4s;}

.folio .face
	{
    background-color: rgba(0,0,0,0.7);
    transform: translateX(200px);
    opacity:0;
    transition: 300ms;
	}

.folio .face p
	{
	z-index:1;
	color:#fff;
	font-size:1.2em;
	margin-top:10px;
	line-height:1.3em;
	padding:10px;
	}

.folio a.icon
	{
    opacity:0;
    transition: 300ms;
	}

/* Hover overs */

.folio:hover .face
	{
    opacity:1;
    transition-delay: 0s;
    transform: translateX(0px);
	}

.folio:hover img { transition-delay: 0s; }

.folio:hover h4
	{
    opacity: 1;
    transition-delay: 0.1s;
	}

a.folio-href
	{
	display:block;
	width:auto;
	border:none;
	margin:0;
	padding:0;
	}

a.folio-href:hover	{ border:none; }

/* projects */

#content .description	{ width:100%; padding-bottom:60px;}
.table-projects
	{
	width:100%;
	border:0;
	text-align:left;
	font-size:1.3em;
	border-collapse:collapse;
	}

.table-projects th						{ background:#5592b1; color:#fff; text-align: left; }
.table-projects th, .table-projects td	{ padding:10px; font-weight:normal;}
.table-projects th:nth-child(2)			{ width:20%; }
.table-projects th:first-child			{ width:35%; }
.table-projects td						{ font-size:0.8em; border:0;}
.table-projects td .fa-search			{ color:#fff; background:#5592b1; padding:8px; }
tr:nth-child(even)						{ background:#dce9ec; }
tr:nth-child(odd)						{ background:#fff; }
.table-projects th:last-child, .table-projects td:last-child			{ vertical-align:middle; text-align:center; }

.print-table tr	{background:#fff; border-top:1px solid #fff;}
.print-table td:first-child	{ min-width:200px; background:#dce9ec; vertical-align:top;}
.print-table td:last-child	{ text-align:left;}

.results
	{
	float:right;
	text-align:right;
	font-weight:bold;
	background:#5592b1;
	color:#fff;
	padding:8px 15px;
	border-radius:1px;
	margin-top:15px;
	border-radius:3px;
	text-align:center;
	}

.results:hover	{color:#fff; text-decoration:underline;}

aside		{ float:right; width:200px; border:1px solid #c7c2c2; padding:15px;}
aside dl	{ margin-top:0px;  }
aside dt
	{
    font-weight: 700;
    letter-spacing: 1px;
    color:#373a44;
	}

aside dd			{ margin-left:0px; }
aside dd:last-child	{ margin-bottom:0px; }
address 			{ font-style: normal; }
.bg-1 aside, .bg-2 aside	{ max-width:305px; width:100%; border:none; padding:0;}

.pub-img		{ margin-right:20px;  max-width:40%; width:100%; }
.pub-img:hover	{ opacity:0.7; }

/* Contact */


.form-errors li	{color:#ff0000; margin:0;}


.contact-form					{ margin-top:20px; border-collapse: collapse; background: rgba(255, 255, 255, 0.7); }
.contact-form td				{ border:none; padding:0px 10px; }
.contact-form td:first-child	{ width:20%; }

.contact-form tr	{ margin:0; padding:0; height:auto; vertical-align:top; background:none; }

.contact-form input[type=text], .contact-form textarea
	{
    background-color: #e4e7ed;
    width: 60%;
    padding: 12px 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    border:1px solid #ccc;
    margin-bottom:20px;
	}

.contact-form textarea
	{
	width:75%;
	height:90px;
	}

.form-mandatory
	{
    letter-spacing: 1px;
    position: relative;
    font-style: normal;
    line-height: 1px;
    color: #e8554e;
	}

.form-comment
	{
	margin-bottom:20px;
	display:block;
	margin-top:20px;
	}

input[type=submit], input[type=reset]
	{
    display: inline-block;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1.4em
    line-height: 14px;
    text-transform: uppercase;
    color: #fff;
    background-color: #5592b1;
    cursor: pointer;
    border:0px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    padding: 8px 30px;
    margin-bottom:20px;
    margin-top:20px;
    -webkit-appearance: none;
	}

/* TDM / OGEL */

.call-for-papers {
	margin-top: 18px;
	}

.call-for-papers ul li {
	list-style: disc;
	margin-bottom: 18px;
	}

.call-for-papers li > a {
	font-size: 1.2em;
	}


/* Footer */


footer	{ background:#e8e8e8; border-top:1px solid #c7c2c2; padding:20px 0px;}

footer .right, footer .left, footer .mid	{ float:left; }
footer .left								{ width:25%; }
footer .mid									{ padding-right:20px; width:36%; }
footer .mid	p								{ border-right:1px solid #c7c2c2; padding-right:40px;}
footer .right								{ float:right; width:34%;}
footer .right dd, footer .right dt			{ float:left; }
footer .right dt							{ margin-right:15px; width:200px; clear:left; line-height:25px;}
footer .right dd							{ margin:0;}
footer .right dd::first-word				{ font-weight:bold; }
footer .left img							{ margin-top:10px; }

footer h4
	{
	font-size:28px;
	color:#373a44;
	margin:15px 0px;
	font-weight:100;
	}

@media only screen and ( max-width: 1340px ) {

	.folio, .folio .face, .folio img	{width:275px; height:220px;}
	.folio .face p 		 				{font-size:1em; }
	a.folio-href h4 					{ font-size:1.4em; }

}

@media only screen and ( max-width: 1195px ) {

	.folio, .folio .face, .folio img 	{width:250px; height:200px; }
	a.folio-href h4 					{ font-size:1.2em; }
	.fa-external-link 					{margin-top:0px;}

}


@media only screen and ( max-width: 1095px ) {

	.folio, .folio .face, .folio img 	{width:225px; height:180px; }
	.folio .face p 						{font-size:0.8em; }


}

@media only screen and ( max-width: 1040px ) {

	.folio, .folio .face, .folio img 	{width:190px; height:150px; }
	.folio .face p 						{ /*display:none;*/ }
	a .box-responsive					{ margin-bottom:50px;}

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1),
screen and (min-device-width: 1024px) and (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) and (max-height: 800px),
screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1),
screen and (max-device-width: 768px)
{

	.folio .face {
		background-color: rgba(0,0,0,0.3);
		transform: none;
		opacity: 1;
		}

	.folio h4					{ opacity: 1; transition: 0s; }
	.folio .face p 				{ font-size: 1em; }

}

@media only screen and (min-device-width : 1024px) and (max-device-width : 1280px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {

	.folio, .folio .face, .folio img 	{ width: 250px; height: 200px; }

	.fa-external-link {
		font-size: 18px;
		width: 72px;
		margin-top: 10px;
		}

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {

	.folio, .folio .face, .folio img 	{ width: 225px; height: 180px; }

	.folio .face p {
		height: 28px;
		margin-top: 0px;
		overflow: hidden;
		}

}

@media only screen and ( max-width: 860px ) {

    #content .description, dl.banners	{ width:auto; float:none;}
    h1								{ font-size:3.5em; margin-top:20px;}
    .folio 							{ width:48%; height:245px; }
    .folio .face 					{ /*display:none;*/ width: 100%; height: 100%; }
	dl.banners dd,  dl.banners dt	{ float:left; }
	dl.banners dt					{ margin-right:20px; }
	#nav li::after					{ padding:0px 10px; }
	aside dl						{ display:none; }
	aside dl#contact				{ display:block; }
	aside							{ width:95%; float:left; margin-bottom:30px;}
	dl.banners						{ background:none; border:none; padding:0px; margin-top:40px;}

	.primary-banners 				{ border: 0px; background: none; padding: 0px; }

	dl.services dt a, dl.services dd a	{color:#668fc9; font-weight:bold;}
	dl.services dd, dl.services dt	{float:none; width:100%;}
	.box-services					{ width:100%; max-width:100%; margin-bottom:0px;}
	a .box-responsive				{ margin-bottom:50px;}
	a .box-services h4				{ max-width:150px; margin-right:10px;}
	.box-services					{ height:100px; width:100%; max-width:100%; margin-bottom:20px;}

	.bg-1 aside, .bg-2 aside, .folio img 	{ max-width:100%; width:100%;}
	.folio img 						{height:245px;}

}

@media only screen and ( max-width: 760px ) {

    #nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type
        {
		border: 3px solid #668fc9;
		color: #668fc9;
		display: block;
		float: right;
		padding: 7px 10px;
		margin-top:20px;
        }

    #nav li
    	{
    	border-bottom:1px solid #000;
    	font-size:1.2em;
    	margin-left:0px;
    	}

    #nav li	a					{ width:100%; display:block; font-size:0.7em; padding:10px;}
	#nav li:after				{ content:none;}
	#nav ul > li > ul > li a	{ font-size:1em; padding:5px; }
	#nav:target > ul 			{ display: block; }
	#nav li ul 					{ position: static; margin-left:-10px; padding-left:10px; margin:0;}
 	#nav li ul li 				{ border:none;}

    #nav > ul {
    	position: absolute;
    	background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
        height: auto;
        display: none;
        right: 0;
        top:33px;
        width:99%;
        border:1px solid #000;
        z-index:2000;
        padding-left:0px;
   	 	}

	#nav li:hover ul, #nav li.hover ul 	{ display: block; }
	#nav li {  -webkit-tap-highlight-color: transparent; }

    #nav > ul > li {
        width: 100%;
        float: none;
        padding:0px;
        }

    .pub-img		{ max-width:100%; margin-bottom:20px; }
    #language		{ margin-top:30px; }
    .folio 			{ width:47.5%; }
    footer h4		{ font-size:21px; }
    footer .right	{ width:100%; border-top:1px solid #c7c2c2;  }
	footer .mid p	{ border-right:0px; padding-right:0px; }
	footer .mid		{ width:55%; float:right; margin-left:10px; padding-right:0px; margin-bottom:30px;}
	.box-services					{ margin-bottom:20px;}
	a .box-responsive				{ margin-bottom:50px;}
	.contact-form td, .contact-form td:first-child, .contact-form input[type=text], .contact-form textarea		{display:block; width:100%; padding-left:0px; }
	.contact-form	{background:none;}

}

@media only screen and (min-width: 300px) and ( max-width: 650px ) {


	dl.banners dt, dl.banners dd	{ background-size:185px 29px; width:185px; height:29px; }
	.folio 							{ width:100%; height:198px; }
	ul#nav-portfolio				{ margin:0 auto; width:220px;}
	.folio img						{height:auto;}
   .table-projects thead, .total-found { display: none; }

   .table-projects tr {
      margin-bottom: 20px;
      display: block;
      border: 1px solid #ddd;
    }

   .table-projects td {
      display: block;
      text-align: left;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
      min-height:20px;
      padding-left:140px;
    }

   .table-projects td:last-child {
      border-bottom: 0;
    }

   aside							{ width:90%; margin-top:-20px;}
   .bg-2 aside		{margin-bottom:40px;}

  .table-projects td:before {
  	  position:absolute;
  	  left:10px;
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
      width:40%;
      text-align:left;
      min-height:20px;
    }

   .table-projects td:last-child	{ text-align:right; }
   	#breadcrumb						{ display:none; }
	#header-img::after 				{ margin-top:100px; height:160px !important; }
	.contact-form .row.half			{ width:100%; margin-left:0px; }
	footer .right dt				{ width:225px; }
	a .box-responsive				{ margin-bottom:50px;}
	.print-table td, .print-table td:last-child		{ text-align:left;}

}


@media only screen and (min-width: 300px) and ( max-width: 455px ) {


	footer .right dt 	{ width:125px; }
	footer .right dd 	{ width:135px; }
	.breadcrumb			{ display:none; }
	.folio 				{ }
	header				{ padding:10px 0px; }
	span.logo 			{ width:100px; height:63px; background: url(/grfx/logo-small.png) no-repeat; }
	#header-img::after  { margin-top:70px; height:100px !important; }
	#language			{ padding-left:10px;}
	header				{ padding:0px; }
	h1					{ font-size:2.3em; margin-top:0px; }
	.results			{ margin-top:0px;}
 	.table-projects td:before {font-size:0.85em;}
    .table-projects td { padding-left:115px; }

	@media only screen and (-webkit-min-device-pixel-ratio: 1.3), not all, not all, not all, only screen and (min-resolution: 124.8dpi), only screen and (min-resolution: 1.3dppx)
	{
	span.logo
		{
		background: url(/grfx/logo-small@2x.png) no-repeat;
		background-size:100px 63px;
		}

	}
}