/* 0.0. index */
	
/*	0.1. php variables and functions
	0.2. the z-index index
	0.3. @font-face
	
	1. initialisation
		1.0. general
		1.1. inherit default input styling
		1.2. remove default input styling on Safari and iOS
		
	2. typography
		2.0. general
		2.1. tables
		2.2. headings
		2.3. anchors & links
		2.4. lists
		2.5. captions
		2.6. forms
		2.7. blockquotes

	3. layout
		3.0. general
		3.1. pagewrap
		3.2. header
		3.3. content
			3.3.1.  flexible marketing area
			3.3.2.  titles
			3.3.3.  meta
			3.3.4.  tags
			3.3.5.  entry
			3.3.6.  images
			3.3.7.  sections
			3.3.8.  sharing
			3.3.9.  tiles
			3.3.10. accordeons
		3.4. contact 'footer' widget area
		3.5. footer
		3.6. social media
		3.7. page body classes
			3.7.1. home
			3.7.2. 404
	
	4. navigation
		4.0. general
		4.1. list
		4.2. visibility toggle
		4.3. languague
		
	5. backgrounds
		5.1. testing background
		
	6. other elements
		6.1. iframes
		
	7. fixes and hacks
		7.1. clearfix
		7.2. checkbox hack fix for Android
		7.3. webkit hacks
		7.4. Safari hacks
		7.5. Opera hacks
		
	8. size queries
		8.1. everything smallish [SMA]
		8.2. tiny phones [TIP] 
		8.3. small phones [SMP]
		8.4. small tablets [ST+] 
		8.5. breakpoint for the WP admin bar [WPA]
		8.6. tablet-ish and bigger [TB+]
		8.7. desktop-ish and bigger [DT+]
		8.8. do you need it this big? [LG+]
	*/

/* 0.1. php variables and functions */

/* 0.2. The z-index index */
/*	
	 
	*/

/* 0.3. @font-face */
@font-face { /* outside of @media screen to accomodate IE */
}

@media screen {

/* 1. initialisation */
/* 1.0. general */
* { /* remove all default styling */
	border: 0;
	padding: 0;
	margin: 0;	
	background-color: none;
	text-decoration: none;
		-moz-font-smoothing: antialiased;
}

html {
	height: 100%;
	width: 100%;
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden; /* allows the menu to be hidden left of the canvas, and the pagewrap to be hidden right of the canvas when the menu is open */
}

/* 1.1. ensure default styling is inherted in <input> elements */
input not:input[type="checkbox"],
textarea {
	font: inherit;
	color: inherit;
		-webkit-appearance: none;
	border-radius: 0;
}

/* 1.2. remove default styling from forms in webkit browsers and on iOS */
input:focus, textarea:focus, select:focus {  
	outline: none;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

/* 2. typography */
/* 2.0. general */
html {
	font-family: "Open Sans", Helvetica, "Helvetica Neue", "Neue Helvetica", Arial, sans-serif;
	color: #ffffff;
	line-height: 1.625em;
}

html * {
	-moz-hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
	hyphens: none;
}

p,
.entry ul,
.entry ol {
	font-size: .85em;
	line-height: 1em; /* 39 px */
	padding-top: 0.55em; /* 11px */
	margin-bottom: 0.75em;/* 15px*/
}

p:empty {
	display: none;
}

del {
	text-decoration: line-through;
}

em {
	font-weight: bold;
	font-variant: normal;
}

.entry hr {
	border-bottom: 1px solid #62d8fe;
	margin-bottom: 1.625em;
}

/* 2.1. tables */
table {
	border-collapse: collapse;
	line-height: 1.625em;
}

th {
	text-align: left;
	vertical-align: bottom;
}

tr {
	height: auto;
	width: 100%;
}

td {
	vertical-align: top;
}

	th ~ th,
	td ~ td {
		padding-left: 1em;
	}

/* 2.2. headings */
h1, h2, h3, h4, h5, h6,
.acc_header,
.acc_close_link {
	font-family: "Open Sans", Helvetica, "Helvetica Neue", "Neue Helvetica", Arial, sans-serif;
		-moz-hyphens: none;
		-ms-hyphens: none;
		-webkit-hyphens: none;
    hyphens: none;
  	font-weight: normal;
}

h1 {
	font-size: 2.5em;
	line-height: 1em;
	color: #62d8fe;
	margin-bottom: 0.5em; /* 4px */
}

h2,
.acc_header {
	font-size: 2em;
	line-height: 1.25;
	color: #62d8fe;
	padding-top: 1em; /* 4px */
	margin-bottom: 1em; /* 4px */
}

h3 {
	font-size: 1.5em;
	color: #62d8fe;
	padding-top: 1em; /* 4px */
	margin-bottom: 1em; /* 4px */
}

h4 {
	font-size: 1em;
	color: #62d8fe;
}

h5 {
}

h6 {
}

/* 2.3. anchors & links */
a {
	color: #62d8fe;
	cursor: default;
}

a:link {
	cursor: pointer;
}

a:visited {
/*color: #9291b5;*/
}

a:hover,
a:focus {
	color: #62d8fe;
}

	.post a:hover,
	.post a:focus,
	aside a:hover,
	aside a:focus {
		text-decoration: underline;
	}
	
		.post h2 a:hover,
		.post h2 a:focus,
		.post h3 a:hover,
		.post h3 a:focus,
		.post h4 a:hover,
		.post h4 a:focus {
			text-decoration: none;
		}

a:active {
	color: #ffffff;
	background-color: #9291b5;
	text-decoration: none;
}

a.anchor {
    display: block;
    position: relative;
	top: -3.25em;
    visibility: hidden;
}

/* 2.4. lists */
ul, ol {
	font-size: 1em;
	line-height: 2;
	list-style: none;
	padding: 40px;
}

ul {
}

	.post ul li:before {
		content: ' ';
		display: block;
		float: left;
		margin-right: .6em;
		margin-left: -1em;
		margin-top: .625em;
		width: .5em;
		height: .5em;
		background-color: #9291b5;
	}
	
	.post ul li {
		padding-left: 1em;
		padding-top: 1em;
	}
	
	.post ul ul li {
		margin-left: 1em;
		padding-top: 1em;
	}
	
		.post ul ul li:before {
			background-color: #62d8fe;
		}

ol {
	list-style: none;
	*list-style: decimal; /* backup for IE<8 */
	counter-reset: li; /* sets up the counter for lis */
}

	ol li:before {
		content: counter(li); /* outputs the content of the counter */
		counter-increment: li; /* increases the counter by 1 */
		position: relative;
		color: #9291b5;
		display: inline-block;
		width: 1em;
		font-family: "Open Sans", Helvetica, "Helvetica Neue", "Neue Helvetica", Arial, sans-serif;
		font-weight: 800;
		margin-right: .5em;
		margin-left: 0em;
		text-align: right;
	}
	
.post ul {
	overflow: hidden; /* prevents floating bullets from overlapping other floating elements */
}

.post li:before {
	position: relative;
}

.post ul { /* prevents floating bullets from having wonky overlap with other floating elements */
	overflow: hidden;
}

/* 2.5. captions */
.wp-caption {
}

.wp-caption-text {
	background-color: ;
	font-size: .75em;
	box-sizing: border-box;
	line-height: 1.625em;
}

	.wp-caption img {
	}
	
/* 2.6. forms */
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

#pagewrap input[type=text],
#pagewrap input[type=email],
#pagewrap input[type=tel],
#pagewrap input[type=date],
#pagewrap input[type=password],
#pagewrap textarea {
	background-color: #9291b5;
	height: 2.1666666666666666666666666666667em; /* three gridlines */
	padding: 0 1em;
	margin-bottom: .8125em;
	width: 100%;
	box-sizing: border-box;
	display: block;
	font-family: "Open Sans", Helvetica, "Helvetica Neue", "Neue Helvetica", Arial, sans-serif;
	font-size: 1em;
	color: #171730;
}

#pagewrap .contact input[type=text],
#pagewrap .contact input[type=email],
#pagewrap .contact input[type=tel],
#pagewrap .contact input[type=date],
#pagewrap .contact input[type=password],
#pagewrap .contact textarea {
	background-color: #ffffff;
}

#pagewrap textarea {
	padding-top: .5em;
	padding-bottom: .5em;
	height: 6.5em;
	display: inline;
	clear: both;
	resize: vertical;
	margin-bottom: 0;
}

#pagewrap input[type=text]:focus,
#pagewrap input[type=text]:hover,
#pagewrap input[type=email]:focus,
#pagewrap input[type=email]:hover,
#pagewrap input[type=tel]:focus,
#pagewrap input[type=tel]:hover,
#pagewrap input[type=date]:focus,
#pagewrap input[type=date]:hover,
#pagewrap input[type=password]:focus,
#pagewrap input[type=password]:hover,
#pagewrap textarea:focus,
#pagewrap textarea:hover {
}

#pagewrap button,
#pagewrap input[type=submit] {
	background-color: #445273;
	color: #ffffff;
	text-transform: uppercase;
	font-family: inherit;
	margin-top: .8125em;
	cursor: pointer;
	height: 1.85em;
	box-sizing: border-box;
	padding: 0 .5em .125em;
	font-size: 1em;
}

#pagewrap button:hover,
#pagewrap button:focus,
#pagewrap input[type=submit]:hover,
#pagewrap input[type=submit]:focus {
	background-color: #62d8fe;
	color: #171730;
}

#pagewrap button:active,
#pagewrap input[type=submit]:active {
	background-color: #9291b5;
	color: #171730;
}

.wpcf7 label {
	color: #62d8fe;
	font-weight: 800;
	display: inline-block;
	text-align: left;
	font-size: .85em;
	box-sizing: border-box;
	min-height: 2.4375em; /* three gridlines */
	width: auto;
	padding: .25em 1em .25em 1em;
	hyphens: auto;
		-webkit-hyphens: auto; /* Saf 5.1+ */
		-moz-hyphens: auto; /* Fx 6.0+ */
		-ms-hyphens: auto; /* IE 10+ */
}

#pagewrap .wpcf7-radio label {
	width: auto;
	padding-right: 1em;
}

#pagewrap .wpcf7-radio label:hover {
	background-color: #171730;
}
	
#pagewrap .wpcf7-radio .first {
	margin-left: 0em;
}

.wpcf7-response-output {
	display: inline-block;
}

#pagewrap div.wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	font-size: .85em;
}

#pagewrap div.wpcf7-mail-sent-ok {
	border: none;
	background-color: rgba(57,143,20,.4);
}

#pagewrap div.wpcf7-mail-sent-ng {
	border: none;
	background-color: rgba(255,0,0,.4);
}

#pagewrap div.wpcf7-spam-blocked {
	border: none;
	background-color: rgba(255,165,0,.4);
}

#pagewrap div.wpcf7-validation-errors {
	border: none;
	background-color: rgba(247,231,0,.4);
}

#pagewrap span.wpcf7-not-valid-tip {
	color: #62d8fe;
	background-color: rgba(23,23,48,.7);
	padding-left: 1em;
}

/* 2.7. blockquotes */
blockquote {
	width: 100%;
	/*font-style: italic;*/
	background-color: #62d8fe;
	box-sizing: border-box;
	line-height: 2.4375em;
	margin-bottom: 2.4375em;
	clear: both;
}

	blockquote p {
		margin: 0;
		padding: 0;
	}

/* 3. layout */
/* 3.0. general */
p:empty {
	display: none;
}

/* 3.1. pagewrap */
#pagewrap {
	width: 100%;
	transition: all .4s ease; /* for when the menu that slides in makes changes to the pagewrap */
	padding: 0 2em;
	box-sizing: border-box;
}

/* 3.2. header */
#header {
	display: none;
	width: 100%;
	height: 3.25em;
/* position: fixed; 
	top: 0;
	z-index: 10; /* on top of the page content */
}

#title {
	background-image: ;
	background-repeat: no-repeat;
	box-sizing: border-box;
	display: inline-block;
	float: left;
	background-color: #ffffff;
	height: 3.25em;
}

	.sitetitle  {
		color: #ffffff;
		font-size: 1.625em;
	}
	
	.description {
		color: #171730;
		font-family: "Open Sans", Helvetica, "Helvetica Neue", "Neue Helvetica", Arial, sans-serif;
	}

/* 3.3. content */ 

/* 3.3.1. flexible marketing area */
.fma {
	width: 100%;
	width: calc(100% + 4em);
	margin-left: -2em;
/* padding-left: 2em; */
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 100vh;
	padding: 0 2em;
	border-bottom: 1.625em solid #100e1c;
	background-position: center top;
	background-image: url(images/DTLShip_HD_notitle_darkoverlay.jpg);
}

.home .fma {
	/*background-size: auto 100%;*/
}

.fma .widgetbar {
	width: 100%;
	width: calc(100% - 4em);
	padding: 6vh 0;
	color: #ffffff;
	text-align: center;
}

.fma .widget ~ .widget {
	margin-top: 3vh;
}

.fma .widget.widget_media_image {
	height: 25vh;
}

.fma .widget.widget_media_image img {
	max-height: 100%;
	width: auto;
}

.page-template-default .fma .widgetbar,
.blog .fma .widgetbar,
.archive .fma .widgetbar,
.single .fma .widgetbar,
.error404 .fma .widgetbar {
	height: 100%;
	padding: 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-template-default .fma .logo,
.blog .fma .logo,
.archive .fma .logo,
.single .fma .logo,
.error404 .fma .logo {
	height: 12vh;
}


/* 3.3.1.1. scrolldown */
.scrolldown {
	width: 100%;
	width: calc(100% - 2.66666667em);
	height: .8125em;
	overflow: visible;
	text-align: center;
	font-weight: 800;
	animation: bounte 3s ease infinite;
	font-size: 1.5em;
	position: absolute;
	bottom: 0;
	background-image: url(images/go-white.svg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	opacity: .6;	
}

.scrolldown a:link,
.scrolldown a:visited {
	color: #ffffff;
color: transparent;
}

@keyframes bounte {
	0% {
		margin-top: -.5em;
		margin-bottom: .5em;
	}
	
	80% {
		margin-top: -.5em;
		margin-bottom: .5em;
	}

	90% {
		margin-top: -0em;
		margin-bottom: 0em;
	}
	
	100% {
		margin-top: -.5em;
		margin-bottom: .5em;
	}
}


		
/* 3.3.2. titles */
.pagetitle,
.posttitle {
}

.pagetitle {
}

.posttitle {
}

/* 3.3.3. meta */
.meta {
	font-size: .75em;
	color: #9291b5;
	text-transform: uppercase;
}

/* 3.3.4. tags */
.tags a {
	background-color: #62d8fe;
	text-transform: uppercase;
	font-size: .75em;
	line-height: 2.16666666667em;
	height: 2.16666666667em;
	display: inline-block;
	padding: 0 1em 0 1em;
}	

.tags a:link,
.tags a:visited {
	color: #171730;
}

.tags a:hover,
.tags a:focus {
	background-color: #171730;
	color: #ffffff;
	text-decoration: none;
}

.tags a:active {
	color: #62d8fe;
}

/* 3.3.5. entry */
.post {
	padding-top: 3.25em;
}

.catlist {
	width: 100%;
	padding: 3.25em 0 0;
	display: inline-block;
	line-height: 3.25em;
}

.catlist li {
	display: block;
	float: left;
	padding: 0 1em;
	background-color: #100e1c;
	border: .325em solid #171730;
}

.catlist .current-cat {
	background-color: #62d8fe;
}

.catlist .current-cat a:link,
.catlist .current-cat a:visited {
	cursor: default;
	color: white;
}

.entry {
	clear: both;
	hyphens: auto;
		-webkit-hyphens: auto; /* Saf 5.1+ */
		-moz-hyphens: auto; /* Fx 6.0+ */
		-ms-hyphens: auto; /* IE 10+ */
}

/* 3.3.6. images */	
.entry img {
	max-width: 100%;
	height: auto;
	clear: both;
}

.entry img.alignleft,
.entry img.alignright {
	margin-bottom: 1.625em;
	margin-top: 0.8125em;
}

.entry img.aligncenter {
	display: block;
	margin: 0 auto;
}

.entry img.alignnone {
}
	
/* 3.3.7. sections */  
			
/* 3.3.8. sharing */

/* 3.3.9. tiles */
.tilearea {
	margin-top: 1.6875em; /* 27px; */
	margin-bottom: 3.25em;
width: 100%;
width: calc(100% + 4em);
margin-left: -2em;
}

.tile {
	padding: 0 2em  3.25em;
}

.tile h2 {
	text-transform: uppercase;
	/*font-size: 1.25em;
	line-height: 1.56em; /* same as a p (1.95), divided by new size */
	padding-bottom: .75em;
}

.tileimage {
	width: 100%;
	height: 20em;
	margin-bottom: .8125em;
}

	.tileimage img {
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: 50% 0;
	}
		
/* 3.3.10. accordeons */
.acc_container {
	box-sizing: border-box;
	padding: 0 2em;
	margin: 0 -2em;
	background-color: #62d8fe;
	padding-bottom: 3.25em;
	overflow: hidden;
	margin-bottom: 3.25em;
}

.acc {
	display: block;
	max-height: 0em;
	overflow: hidden;
	transition: max-height .3s;
	clear: both;
	box-sizing: border-box;
	color: ;
}

.acc > p:nth-of-type(1) {
	padding-top: 1.625em;
}

.acc_switch {
	display: none;
}

.acc_open_label {
	width: 4.875em;
	height: 4.875em;
	display: block;
	background-image: url(images/arrow.svg);
	background-size: 40%;
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
	transition: all .4s ease;
	float: left;
	position: absolute;
	left: 1em;
	cursor: pointer;
}

.acc_header {
	float: left;
	display: inline;
	margin-left: -1em;
	margin-bottom: 0;
	padding-left: 2.4375em;
	width: 100%;
	width: calc( 100% + 2em );
	margin-right: -2em;
	cursor: pointer;
	height: auto;
	min-height: 2.4375em;
}

.acc_switch:checked ~ .acc_open_label {
	transform: rotate(90deg);
}

.acc_switch:checked ~ .acc {
	max-height: 300vh;
	height: auto;
	transition:all .6s ease-in;
}

.acc_close_link {
	float: right;
	color: #171730;
	padding-right: 2em;
background-image: ;
	background-repeat: no-repeat;
	background-position: center right;
	background-size: 30%;
	cursor: pointer;
	clear: both;
	margin-bottom: 1.625em;
}

/* 3.3.11. galleries */
.entry .gallery {
	background-color: darkcolor;
	padding-top: 1.625em;
	padding-bottom: 1.625em;
}

#pagewrap .entry .gallery {
margin: 1.625em 0 !important;
}
	
/* 3.4. contact footer */
.contact {
	margin-top: 3.25em;
	background-color: rgba(23,23,48,.7);
}

.wrap {
	width: 100%;
	width: calc(100% + 4em);
	margin-left: -2em;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(images/DTLShip_HD_notitle_darkoverlay.jpg);
}

.contact {
	width: 100%;
	padding: 1.625em 2em;
	box-sizing: border-box;
	text-align: center;
}

.contact p {
	font-size: .75em;
}

.contact .widget {
	margin-top: 0.3046875em;
	display: inline-block;
}

.contact .widget ~ .widget  ~ .widget {
	margin-left: .5em;
}

.contact .widget:first-of-type {
	width: 100%;
	text-align: center;
	margin-bottom: 1.625em;
}

.contact .widgettitle {
	display: none;
}

.contact .widget a:hover,
.contact .widget a:focus {
	opacity: 0.6;
}

.copyright {
	margin-top: 1.625em;
}

/* 3.5. footer */
#footer {
	background-color: #171730;
	width: 100%;
	width: calc(100% + 4em);
	box-sizing: border-box;
	padding: 0 2em;
	margin-left: -2em;
	border-top: 1.625em solid #100e1c;
}
		
/* 3.6. some */
.social.desktop {
	display: none;
}

/* 3.7. page body classes */

/* 3.7.1. home */
.home {
}

#pagewrap {
}

.home .tilearea {
	margin-bottom: 0;
}


.home .entry {
	background-color: #100e1c;
	width: 100%;
	margin-left: -2em;
	padding: 1.625em 2em;
}

.home .contact {
	margin-top: 0;
}

/* 3.7.2. 404 */
.error404 {
}

/* 3.7.3. page */
.page-template-default .fma .widgetbar,
.blog .fma .widgetbar,
.archive .fma .widgetbar,
.single .fma .widgetbar,
.error404 .fma .widgetbar {
	width: 100%;
	margin-left: -2em;
	padding-left: 2em;
	padding-right: 2em;
	box-sizing: border-box;
	background-color: rgba(23,23,48,.4);
}

.page-template-default .fma .widget ,
.blog .fma .widget,
.archive .fma .widget,
.single .fma .widget,
.error404 .fma .widget {
	max-height: 100%;
}

/* 3.7.3.blah */
.archive .defaultimage,
.blog .defaultimage {
	text-align: center;
	overflow: hidden; 
	background-color: #100e1c; 
	display: flex; 
	align-items: center; 
	justify-content: center;
}

.archive .defaultimage img,
.blog .defaultimage img {
	width: 50%; 
	height: auto;
}

.catlist li.cat-item-177 {
	display: none;
}

/* 3.7.4. index */
.blog .fma,
.archive .fma {
	background-image: url(images/DTLShip_HD_notitle_darkoverlay.jpg);
}

	
/* 4. navigation */
/* 4.0. general */
nav.mobile {
	width: 75%;
	height: 100%;
	background-color: #171730;
	margin-left: -75%;
	position: fixed;
	z-index: 11;
	display: inline-block;
	float: left;
	overflow-x: hidden;
	transition: all .4s ease;
	font-family: "Open Sans", Helvetica, "Helvetica Neue", "Neue Helvetica", Arial, sans-serif;
}

nav.desktop {
	display: none;
}

nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
	transition: color .25s ease;
	transition: background-color .25s ease;
}

/* 4.1. list */
nav.mobile ul {
	margin: 0;
	padding: 0;
	clear: both;
	text-transform: uppercase;
}

nav.mobile li {
	height: 2.4375em;
	width: 100%;
	font-size: 1em;
	margin: 0;
}

	nav.mobile li a {
			font-size: .85em;
		height: 2.8676470588235294117647058823529em;
		width: 100%;
		box-sizing: border-box;
		padding: 7px 0 0 8px;
		float: left;
	}

	nav.mobile li a:link,
	nav.mobile li a:visited {
		color: #ffffff;
	}
	
	nav.mobile li a:hover,
	nav.mobile li a:focus {
		text-decoration: none;
		background-color: #62d8fe;
	}
	
	nav.mobile li a:active {
		color: #171730;
		background-color: #ffffff;
	}

	nav.mobile li ul {
	}

nav.mobile li:before {
	display: none;
}

/* 4.2. visibility toggle */
input.menu-toggle {
	display: none;
}

label.menu-toggle {
	z-index: 101; /* above everything */
	position: fixed;
	top: 0;
	left: 0;
	text-indent: -9999px;
	background-image: url(images/hamburger.svg);
	background-size: 55%;
	background-repeat: no-repeat;
	background-position: 45% 50%;
	color: #ffffff;
	background-color: #171730;
	transition: all .4s ease;
		-webkit-transition: all .4s ease;
	box-sizing: border-box;
	width: 3.25em; 
	height: 3.25em;
}

	.admin-bar label.menu-toggle {
		top: 46px;
	}

label.menu-toggle:hover {
	cursor: pointer;
	background-color: #9291b5;
}

label.menu-toggle:active {
	background-color: #62d8fe;
}

.menu-toggle:checked ~ label { /* change and move the toggled label */
	margin-left: 75%;
	background-image: url(images/cross.svg);
	width: 3.25em;
	transition: all .4s ease;
		-webkit-transition: all .4s ease;
}

	.menu-toggle:checked ~ label:after {
		content: " ";
		width: 0;
		height: 0;
	}

.menu-toggle:checked ~ nav { /* move the toggled menu to the right */
	margin-left: 0%;
	transition: all .4s ease;
		-webkit-transition: all .4s ease;
}

#pagewrap:after { /* covering the pagewrap with a coloured sheen */
	opacity: 0;
	display: inline;
	background-color: #171730;
	height: 100%;
	width: 0%;
	content: " ";
	position: fixed;
	right: 0;
	top: 0;
}

.menu-toggle:checked ~ #pagewrap:after {
	width: 100%;
	opacity: .7;
	transition: opacity .4s ease;
		-webkit-transition: all .4s ease;
}

.menu-toggle:checked ~ #pagewrap {
	transition: opacity .4s ease;
		-webkit-transition: all .4s ease;
}

.page-template-page-under-construction nav {
	display: none;
}

.page-template-page-under-construction label.menu-toggle {
	display: none;
}

/* 4.3. language */
.language {
	display: none;
	background-color: #898989;
	border-left: 0.1px solid #898989;
	height: 2.4375em;
	padding-right: 2em;
	position: absolute;
	right: 0;
	box-sizing: border-box;
	padding: 0.325em 2em 0 1em;
	z-index: 0;
	margin-top: -0.4375em; /* -7px; */
}

/* 5. backgrounds */

/* 5.1. testing backgrounds */
html {
/*background-image: url(images/grid.gif);
	background-position: 0 -12px;/**/
	background-color: #171730;
}

/* 6. other elements */

/* 6.1. iframes */

/* 7. fixes and hacks */ /* END screen media */
/* 7.1. clearfix */
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	zoom: 1;
}

/* 7.2. Android fix for checkbox hack */
body { 
  -webkit-animation: bugfix infinite 1s; 
}

} /* END screen media */

@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

/* 7.3. webkit hacks */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
	}
	
/* 7.4. Safari hacks */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		::i-block-chrome,* { /*styles*/
		}
	}
	
/* 7.5. Opera hacks */	
	@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	}
	
/* 7.6. IE hacks */
	@media screen and (min-width:0\0) {  
		.home #pagewrap .fma input[type="submit"] {
			margin-bottom: -2.5em;
		}
	}
	
/* 8. size queries*/
/* 8.1. everything smallish [SMA] */
@media only all and (max-width: 990px) { 
/* [SMA]3.2. header */
		
/* [SMA]3.4. contact footer */
.contact .widget {
/*	margin-left: 0;
	clear:both;
	width: 100%;*/
}

/* [SMA]4.3. language */
.mobile .language {
	display: inline-block;
	left: 0;
}
}

/* 8.2. tiny phones [TIP] */ 
@media only all and (max-width: 440px) {
.home .fma .widgetbar {
	padding-top: 15vh;
}
	
.page-template-default .fma,
.blog .fma,
.archive .fma,
.single .fma,
.error404 .fma {
	height: 15vh;
	min-height: 150px;
}

/* [TIP]2.0 typography general*/

/* [TIP]2.2. headings */
h2,
.acc_header {
	font-size: 1.35em;
	margin-left: -1.5em;
	padding-left: 1.5em;
}

/* [TIP]3.4. contact footer */
.contact .widget {
}

/* [TIP]3.3.9 tiles */
.tileimage {
}

	.tileimage img {
	}
	
.tile h2 {
}

/* [TIP]3.3.10. accordeons */
.acc_header {
	padding-left: 3.25em;
}

.acc_open_label {
	height: 3.6em;
	background-size: 30%;
}

#footer {
}

/* [TIP]3.5 footer */
#footer p {
	font-size: .6em;
}
}

/* 8.3. small phones [SMP] */
@media only all and (min-width: 441px) { 
label.menu-toggle {
/*background-color: chartreuse;*/
}
/* [SMP]2.2. headings */
h2,
.acc_header {
}

/* 3.3.1. fma */
.page-template-page-home .fma {
	min-height: 65vh;
}

.page-template-default .fma,
.blog .fma,
.archive .fma,
.single .fma,
.error404 .fma {
	height: 20vh;
	min-height: 20vh;
}

.page-template-default .fma .widgetbar,
.blog .fma .widgetbar ,
.archive .fma .widgetbar,
.single .fma .widgetbar,
.error404 .fma .widgetbar {
	height: 100%;
}

.scrolldown {
	display: none;
}

/* [SMP] 3.3.6. images */
.entry img.alignleft {
	float: left;
	max-width: 50%;
	margin-right: 2em;
}

.entry img.alignright {
	float: right;
	max-width: 50%;
	margin-left: 2em;
}

/* [SMP]3.3.9 tiles */
.tileimage {
}

	.tileimage img {
	}
	
/* [SMP]3.3.10. accordeons */
.acc_header {
	padding-left: 3.5em;
	box-sizing: border-box;
	width: calc( 100% + 3em );
}

.acc_open_label {
	margin-top: -.5em;
}

/* [SMP]4. nav */
nav.mobile {
	width: 39%;
}

.menu-toggle:checked ~ label {
	margin-left: 39%;
}
}

/* 8.4. small tablets [ST+] */
@media only all and (min-width: 720px) { 
label.menu-toggle {
/*background-color: magenta;*/
}

p,
.entry ul,
.entry ol {
	font-size: 1em;
	line-height: 1.95em; /* 39 px */
	padding-top: 0.40em; /* 11px */
	margin-bottom: 0.75em;/* 15px*/
}

.entry {
/*width: 67%;*/
}

#pagewrap {
}

/* 3.2. header */
#header {
	width: 100%;
	height: 3.25em;
	position: fixed; 
	top: 0;
	z-index: 10; /* on top of the page content */
}

.home #pagewrap .fma input[type="email"] {
	max-width: 20em;
}

/* [ST+]3.3.7. sections */  		
	.contact .block:first-of-type {
		width: 100%;
	}
	
		.contact .block:first-of-type p {
			float: left;
			width: 30%;
		}
		
			.contact .block:first-of-type p:nth-of-type(n+3) {
				margin-left: 5%;
			}
			
	.contact .block:nth-of-type(2) {
		width: 30%;
		float: left;
	}
	
	.contact .block:nth-of-type(3) {
		float: right;
		width: 65%;
	}
	
/* [ST+]3.3.9. tiles */  
.tilearea {
/*background: cyan;*/
/*	width: 150%;
	width: calc(150% + 3.666667em);*/
}

.tile {
	margin-bottom: 3.25em;
}

	.tile p,
	.tile ul,
	.tile ol,
	.tile h2,
	.tile h3 {
		width: 65%;
	width: 58%;
		float: right;
	}
	
	.tile p:first-of-type {
	}
		
.tileimage {
		width: calc(25% + 2em);
width: calc(33% + 2em);
width: 37%;
margin-right: 5%;
		float: left;
		height: 11.375em;
}

#footer p {
	font-size: .75em;
}

/* [ST+]4. nav */
nav.mobile {
	font-size: 1.25em;
}

nav.mobile {
	width: 25%;
}

.menu-toggle:checked ~ label {
	margin-left: 25%;
}
}

/* 8.5. breakpoint for the WP admin bar [WPA] */
@media only all and (min-width: 783px) { 
/* [WPA]4.2. visibility toggle */ 
	.admin-bar label.menu-toggle {
		top: 32px;
	}
}

/* 8.6. tablet-ish and bigger [TB+] */
@media only all and (min-width: 990px) {
#header {
/*background-color: maroon;*/
	background-color: #100e1c;
}
	
#title {
	display: none;
}

#header {
	display: flex;
	justify-content: flex-end;
/*background-color: #100e1c;*/
	margin-left: -2em;
	padding: 0 2em;
	box-sizing: border-box;
	width: calc(100% + 4em);
width: 100%;
	height: 3.25em;
}

.admin-bar #header {
	margin-top: 32px;
}

.social.desktop {
	display: inline-block;
/*background: orange;*/
	height: 1.625em;
	width: auto;
	margin-left: 1em;
	padding: .2em 0 .3em;
	box-sizing: border-box;
}

.social.desktop .widget {
	float: left;
	height: 1.125em;
}

.social.desktop img {
	height: 1.125em !important;
	width: auto;
}

.social.desktop .widget ~ .widget {
}

.social.desktop a:link {
	height: 3.25em;
	display: block;
	box-sizing: border-box;
	padding: 0.975em .5em;
	margin-top: -0.1625em;
}

.social.desktop a:hover,
.social.desktop a:focus {
	opacity: 0.6;
}

.social.desktop h2 {
	display: none;
}

/* fma */
.fma,
.home .fma {
	margin-top: 3.25em; /* give place to the header */
	background-size: cover;
}

.fma {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-template-default .fma .widgetbar,
.blog .fma .widgetbar,
.archive .fma .widgetbar,
.single .fma .widgetbar,
.error404 .fma .widgetbar {
	margin-left: 0;
}

/* post */
.post {
	padding: 3.25em 10% 0;
}
	 	
/* [TB+]3.3.9. tiles */
.tilearea {
	padding: 0 2em;
	box-sizing: border-box;
}

.post .tilearea {
	width: 132%;
	margin-left: -16%;
	margin-right: -16%;
}

.blog .tilearea,
.archive .tilearea {
	width: 100%;
	width: calc(100% + 4em);
}

.blog .tilearea .entry,
.archive .tilearea .entry {
	width: 100%;
}

.tile {
	width: 30%;
	float: left;
	margin: 0;
	margin-bottom: 3.25em;
	padding: 0;
	box-sizing: border-box;
	background-color: transparent;
	border-top: none;
}

	.tile ~ .tile {
		margin-left: 5%;
	}
	
	.tile ~ .tile:nth-of-type(3n+1) {
		margin-left: 0;
		clear: both;
	}

	.tile p,
	.tile ul,
	.tile ol,
	.tile h2,
	.tile h3 {
		width: 100%;
		margin: 0;
	}
			
.tileimage,
.tileimage img.alignnone {
}

.tileimage {
	width: 100%;
	height: 16.25em;
}

.tileimage img.alignnone {
}

.tile h2 {
	background: #171730;
/*background: red;*/
	/*margin-top: -100%;*/
}

/* [TB+]4. navigation */
nav.mobile {
	display: none;
}

.menu-toggle {
	display: none;
}

nav.desktop {
	width: auto;
	text-align: right;
	height: 1.625em;
	display: inline-block;
	box-sizing: border-box;
	font-family: "Open Sans", Helvetica, "Helvetica Neue", "Neue Helvetica", Arial, sans-serif;
}

nav.desktop ul {
	padding: 0 0 0 0;
	float: right;
}

nav.desktop li {
	float: left;
	height: 3.25em;
}

	nav.desktop li ~ li {
		
	}

nav.desktop a {
	text-transform: uppercase;
	/*font-size: .85em;*/
}

nav.desktop a:link {
	height: 3.25em;
	display: block;
	box-sizing: border-box;
	padding: .8125em 0.8125em;
}

nav.desktop a:link,
nav.desktop a:visited {
	color: #ffffff;
}

nav.desktop a:hover,
nav.desktop a:focus {
	color: #62d8fe;
}

nav.desktop a:active {
	color: #ffffff;
}

/* [TB+]3.2. header */
#header {
/* 	box-shadow: 0px 0px 20px rgba(23,23,48,.25);*/
}

.home .entry {
	width: calc(125% + 4em);
	margin-left: calc(-12.5% - 2em);
	padding: 1.625em 20%;
	box-sizing: border-box;
}
}

/* 8.7. desktop-ish and bigger [DT+] */
@media only all and (min-width: 1280px) {
#header {
/*background-color: teal;*/
}
	
/* [DT+]0. general and unsorted */
#pagewrap {
	padding: 0 10em;
}

#header,
.fma,
.wrap,
#footer {
	margin: 0 -10em;
}

#header {
	padding: 0 10em;
}

/* [DT+]0. general and unsorted */
#footer,
.fma,
.wrap {
	width: calc(100% + 20em);
}

/* [DT+]3.3.1. fma*/
.fma {
	min-height: 32.5em;
}

.page-template-default .fma,
.blog .fma,
.archive .fma,
.single .fma,
.error404 .fma {
	height: 30vh;
	min-height: 30vh;
}

.page-template-default .fma .widgetbar,
.blog .fma .widgetbar,
.archive .fma .widgetbar,
.single .fma .widgetbar,
.error404 .fma .widgetbar {
	height: 100%;
	padding-top: 2em;
}

.page-template-default .fma .logo,
.blog .fma .logo,
.archive .fma .logo,
.single .fma .logo,
.error404 .fma .logo {
	height: 15vh;
}


/* [DT+]3.3.7. sections */
.contact {
	/*margin-left: -10em;*/
	padding-left: 10em;
	padding-right: 10em;
}

/* [DT+]3.3.10. accordeons */
.acc_open_label {
	left: 8.75em;
}

/* [DT+]3.4. contact footer */
.contact h2 {
	margin-bottom: 1.625em;
}

.home .entry {
	width: calc(125% + 22em);
	margin-left: calc(-12.5% - 12em);
	padding: 1.625em 40%;
}

}

/* 8.8. do you need it this big? [LG+] */
@media only all and (min-width: 1700px) {
#header {
/*background-color: hotpink;*/
}

/* [LG+]0. general and unsorted */
#pagewrap {
	padding: 0 15%;
}

#header {
	margin: 0 -15%;
	padding: 0 15%;
}

.fma {
}

.home .post,
.single .post,
.page .post,
.error404 .post {
	padding: 3.25em 15% 0;
}

.home .post .tilearea,
.single .post .tilearea,
.page .post .tilearea,
.error404 .post .tileares {
	width: 150%;
	margin-left: -25%;
	margin-right: -25%;
}

.page-template-default .fma,
.blog .fma,
.archive .fma,
.single .fma,
.error404 .fma {
	height: 39vh;
	min-height: 39vh;
}

.page-template-default .fma .widgetbar,
.blog .fma .widgetbar,
.archive .fma .widgetbar,
.single .fma .widgetbar,
.error404 .fma .widgetbar {
	height: 100%;
}

.page-template-default .fma .logo,
.blog .fma .logo,
.archive .fma .logo,
.single .fma .logo,
.error404 .fma .logo {
	height: 20vh;
}


/* [LG+]3.5. footer */
#footer {
	width: 142.85714285%;
	margin-left: -21.43%;
}

/* [LG+]3.3.7. sections */
.wrap {
	width: 142.85714285%;
	margin-left: -21.43%;
}

.contact {
	padding: 1.625em 21.43% 1.625em 21.43%;
}

/* [LG+]3.3.1. fma */
.fma {
	width: 142.85714285%;
	margin-left: -21.43%;
	min-height: 27.5em;
}

/* [LG+]3.3.101. accordeons */
.acc_open_label {
	left: calc( 15% - 1em );
}


.home .entry {
	width: calc(100vw - 1em);
	margin-left: -52%;
	padding: 1.625em 55%;
}

}

/* 9. print [PRN] */
@media print {

.do-not-print { display: none; }
#comments { page-break-before: always; }

body { width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt; }
h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
h1 { font-size: 19pt; }
h2 { font-size:17pt; }
h3 { font-size:15pt; }
h4,h5,h6 { font-size:12pt; }
code { font: 10pt Courier, monospace; } 
blockquote { margin: 1.3em; padding: 1em; }
img { display: block; margin: 1em 0; }
a img { border: none; }
table { margin: 1px; text-align:left; }
th { border-bottom: 1px solid #333;  font-weight: bold; }
td { border-bottom: 1px solid #333; }
th, td { padding: 4px 10px 4px 0; }
caption { background: #fff; margin-bottom: 2em; text-align: left; }
thead { display: table-header-group; }
tr { page-break-inside: avoid; } 
a { text-decoration: none; color: black; }
	
} /* END print media */