@charset "utf-8";

/* ----------------------------LEGACY------------------------------ */
html { 
	font-size: 100%; 
	overflow-y: scroll; 
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%; /* for Microsoft */
}

/* --------------------BASE STYLE SIDE WIDE--------------------------- */
img, object, embed, video {max-width: 100%; /* maximize media in element */
	height: auto; /* important MS browsers */
} 
body {margin: 1em; /* breathing space site */
  background: url(https://www.moerman.family/images/body/spread_Copyright_Promised_Lands_EAM09486.jpg) no-repeat center center fixed;
  background-size: cover; 
}

body {margin: 1em; /* breathing space site */
	/* background-image: linear-gradient(#605951, #B38C69, #605951); */ /* USE I.O. IMAGE gradient liver - brown */
	background-color: #09738A; /* color fallback */
}	
body, button, input, select, textarea { /* legacy */
	font-family: sans-serif; 
	font: 100%/1.3 Helvetica, Verdana, sans-serif, Arial; /* DEFAULT size, line spacing, font */
	color: #605951; /* text liver. Alternatives: #002654=navy */
}
p {text-align: justify;}

b, strong { font-weight: bold; }

i, em {
  font-style: italic;
}

section, article, aside, details, figcaption, figure { 
	display: block; 
}
a {	color: #605951; /* hyperlink default color:  liver. Alternatives: #002654=navy */
	cursor: pointer; /* switch cursor into finger */
}
a.lucid {
	color: #FFF; /* link style specificaly on transparent */
}
ol { /* ordered lists are numbered by default */
	padding-left: 1.4em; /* override default padding lists */
}
ul {/* to change list style in specific class add new class eg: .sand4 ul */
	padding-left: 1em; /* override default padding lists */
	text-align: justify;
}
ul.usp {/* list style for this specific class */
	padding-left: 0; /* override default padding lists */
	list-style-type: none;
	font-weight: bold;	
	/* list-style-position: outside;  bullets will be outside list item */
}
li.usp {
	margin-bottom: 10px;
}
table {
	width: 100%;
	border-collapse: collapse; /* remove space between table cells */
}
th, td {
	border: 1px solid #000;
	padding: 2px;
	text-align: center; /* centers data in cells */
}
.tablecap {
	padding: 2px 4px 2px 4px; /* breathing space content inside element (top,right,bottom,left) */
	font-size: 0.8em;
	font-style: italic;
}

/* -----------------------------THE GRID ------------------------- */
#gridcontainer {
	display: grid; /* browser: show grid */
	margin: auto; /* center site */
    grid-gap: 7px; /* breathing space between cell(block)s min.4px */
}
.nest-itin8d { /* nested grid parent */
	display: grid; /* browser: show nested grid */
	grid-gap: 2px; /* breathing space between nested cell(block)s */
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* ---------------------------NAVIGATION STYLE ------------------------------ */
span.drop-down, span.drop-right {
	display: block; 
	/* box-shadow:inset 2px 0px 0px #023334; /* vertical dark blue divider menu items */
	position: absolute; /* positions content absolute inside parent (span) div */
	width:100%; /* button width */
	height: 100%; /* button height */
	top: 0; /* start content in top */
	left: 0; /* start content on left */
}
span.drop-down {
	position: absolute; 
	width: 100%; 
	bottom: 0px; 
}
nav {/* grid-row: 1; add this if menu to be on top of all */
    display: block; 
    margin: 0px; /* positions nav bar. 0px; aligns left. 10px, auto (auto centers horizontaly) */
    /* box-shadow: 1px #023334; /* dark blue */
	background: #527C92; /* blue */
    border-bottom: 5px solid white; /* line bottom nav bar */
}
nav ul {margin:0; /* specific list style for nav. Overrides default margin lists */
	padding:0; /* override default padding lists */
    list-style:none; 
}
nav ul ul {   /* UL UL = drop down items */
	opacity:0;
	position:absolute; /* important - lines up menu horizontaly, drop down items verticaly */
	top:160%; /* forces drop down items to start below nav bar */
	visibility:hidden; /* important - hides all drop down items in menu */
	transition:all .4s ease; 
	-webkit-transition:all .4s ease; 
}
nav ul ul ul {
	top:0%;
	left:160%;
}
nav ul ul li:hover > ul { /* specific list item style for nav element */
	top:0%; /* positions sub dropdown horizontaly next to dropdown */
	left:100%; /* important - shows sub dropdown on right */
	opacity:1; 
	visibility:visible; 
}
nav ul li:hover > ul {
	opacity:1; 
	top:100%; 
	visibility:visible; /* important - shows drop down items only when hovering */
}
nav ul li {
    float: left; /* important - lines up all dropdown items horizontaly */
    position: relative; 
	background-color:#527C92; /* blue */
	cursor: pointer; /* switch cursor into finger */
}
nav ul ul li {
	float:none; 
}
nav ul a {
	text-decoration:none; /* remove underline */
	display:block; 
	color:#FFF; /* color ALL menu items */
	padding:10px 15px; /* space around ALL menu items */
	width: 10em; /* specify width menu 'buttons' */
	text-align:center; /* center button text */
    font-family: 'Open Sans', sans-serif; 
    text-shadow: 0px -1px 0px rgba(0,0,0,.2); 
}
nav ul li:hover {
	background-color:#62A6AB; /* change button color when hovering */
}
nav ul li a:hover {
	background-color:#62A6AB; 
}

/*--------------------GRID LAYOUT specific for MOBILE --------------------------------*/
@media (max-width: 480px) { 

#mobile-hide, #screen-only {
	display: none; /* do not display these id-styles in mobile */
} 
	} /* End of MOBILE query */


/* ------------------GRID LAYOUT specific for TABLET 8 COLUMN - VARYING ROWS ------------------------- */
@media screen and (max-width: 768px) and (min-width: 481px) { 

#tablet-hide, #screen-only {
	display: none; /* do not display these id-styles on tablet */
} 
#gridcontainer {
	grid-template-columns: repeat(8, 1fr); /* NO auto-fill: will otherwise override fr value */
}
	.sand2, .white2, .lucid2, .sand2-span2, .white2-span2, .lucid2-span2 {
		grid-column: span 2; /* Horizontal definition */
	}
	header, #info, .theme, .sand4, .white4, .lucid4, .sand4-span2, .white4-span2, .lucid4-span2, .sand8, .white8, .lucid8, .sand8-span2, .white8-span2, .lucid8-span2 {
		grid-column: span 4; /* Horizontal definition */
	}
	.sand6, .white6, .lucid6, .sand6-span2, .white6-span2, .lucid6-span2 {
		grid-column: span 6; /* Horizontal definition */
	}
nav, .divider, footer, .white12, .lucid12, .brown12 {
	grid-column: span 8; /* Horizontal definition */
}
	.sand2-span2, .white2-span2, .lucid2-span2, .sand4-span2, .white4-span2, .lucid4-span2, .sand6-span2, .white6-span2, .lucid6-span2, .sand8-span2, .white8-span2, .lucid8-span2 {
		grid-row: span 1; /* Override VERTICAL definition in tablet mode */
	}

/* ------------------NESTED GRID LAYOUTS for TABLET -------- */
.nest-itin8d {
	grid-column: span 8; /* Horizontal definition */
}

} /* End of TABLET query */

/* ------------------GRID LAYOUT specific for SCREEN 12 COLUMN - VARYING ROWS ------------------------- */
@media screen and (min-width: 769px) {

#gridcontainer {
	grid-template-columns: repeat(12, 1fr); /* NO auto-fill: will otherwise override fr value */
   	max-width: 1440px; /* restrain website to this max width in full screen */
}
#screen-hide {
	display: none; /* do not display this id-style on screen */
} 
.sand2, .white2, .lucid2, .sand2-span2, .white2-span2, .lucid2-span2 {
	grid-column: span 2; /* Horizontal definition */
}
header, .theme, #info {
	grid-column: span 3; /* Horizontal definition */
}
.sand4, .white4, .lucid4, .sand4-span2, .white4-span2, .lucid4-span2 {
		grid-column: span 4; /* Horizontal definition */
	}
.sand6, .white6, .lucid6, .sand6-span2, .white6-span2, .lucid6-span2 {
	grid-column: span 6; /* Horizontal definition */
}
.sand8, .white8, .lucid8, .sand8-span2, .white8-span2, .lucid8-span2 {
	grid-column: span 8; /* Horizontal definition */
}
nav, .divider, footer, .nest-itin8d, .white12, .lucid12, .brown12 {
	grid-column: span 12; /* Horizontal definition */
}
	.sand2-span2, .white2-span2, .lucid2-span2, .sand4-span2, .white4-span2, .lucid4-span2, .sand6-span2, .white6-span2, .lucid6-span2, .sand8-span2, .white8-span2, .lucid8-span2 {
		grid-row: span 2; /* VERTICAL definition */
	}

/* ------------------NESTED grid LAYOUTS for SCREEN ---------- */
.nest-itin8d {  /* 8 day itinerary grid parent */
	grid-template-columns: repeat(12, 1fr);
}
.day-pic {
	grid-column: span 2; /* Horizontal definition */
}
.day {
	grid-column: span 6; /* Horizontal definition */
}	
.form-span8 {
	grid-column: span 4; /* Horizontal definition */
	grid-row: span 8; /* VERTICAL definition */
}	
.form-span10 {
	grid-column: span 4; /* Horizontal definition */
	grid-row: span 10; /* VERTICAL definition */
}	
.form-span12 {
	grid-column: span 4; /* Horizontal definition */
	grid-row: span 12; /* VERTICAL definition */
}	

} /* End of SCREEN query */

/* ----------------------------- GRID LAYOUT styles  ------------------------------------------ */
.white2, .white4, .white6, .white8, .white2-span2, .white4-span2, .white6-span2, .white8-span2, .white12, .day {
	background: white; 
	padding: 7px; /* breathing space content inside element. Specify 7px 2px 7px 2px; =top,right,bottom,left */
    }
.sand2, .sand4, .sand6, .sand8, .sand2-span2, .sand4-span2, .form-span8, .form-span10, .form-span12, .sand6-span2, .sand8-span2 {
	background: #eee4c5; /*color sand*/
    padding: 7px; /* breathing space content inside element. Specify 7px 2px 7px 2px; =top,right,bottom,left */
}
.lucid2, .lucid4, .lucid6, .lucid8, .lucid2-span2, .lucid4-span2, .lucid6-span2, .lucid8-span2, .lucid12 {
	background: rgba(9,43,90, 0.2); /* NEW navy transparant */
	padding: 7px; /* breathing space content inside element. Specify 7px 2px 7px 2px; =top,right,bottom,left */
	color: #FFF; /* text on transparent */
}

.lucid2, .lucid4, .lucid6, .lucid8, .lucid2-span2, .lucid4-span2, .lucid6-span2, .lucid8-span2 {
	border-top: 5px solid white; /* NEW : white*/
	border-radius: 5px; /* NEW */
}

/* .theme and #info see below in IMAGE styles */
.divider {
	text-align: right; /* move content right. Non-defined background color: will inherit body background */
    font-size: 0.9em;
	padding-right: 1em;	/* breathing space content right side inside element */
} 
.white2, .white4, .white6, .white8, .white2-span2, .white4-span2, .white6-span2, .white8-span2, .white12, 
 .sand2, .sand4, .sand6, .sand8, .sand2-span2, .sand4-span2, .nest-itin8d, .sand6-span2, .sand8-span2 {
	border-top: 5px solid #B38C69; /*brown */
}
.brown12 {
	background: #B38C69; /* brown bar e.g. for H1's */
	padding: 7px; /* breathing space content inside element */
	color: #FFF;
}

/* ----------------------------- NESTED grid LAYOUT styles  ------------------------------------------ */
.day-pic {
	background: #eee4c5; /*color sand*/ 
}
.day {
	background: white; 
	padding: 7px; /* breathing space content inside element */
}	

/* ------------------------------TOP SECTIONS (and IMAGE) styles------------- */
header { /* Logo section */
	background: white; 
	padding: 7px; /* breathing space content inside element */
    }
.theme { /* theme banner style */
	position: relative; /* (slide) content will be positioned absolute against this (autoslider) div */ 
	padding-top: 22.7%; /* this forces the heigth of the theme banners specific for ratio 160:705 */
}
.theme img {/* specific image style inside this (theme) class element */
	position: absolute; /* positions images absolute inside parent (theme) div */
	top: 0; /* start image from top of theme div */
	width: 100%;
	height: 100%; 	
}
#info {
    padding-top: 20px; /* breathing space content inside element top side */
    padding-bottom: 5px; /* breathing space content inside element top side */
    font-size: 0.9em;
	background: white; 
	border-bottom: 7px solid red; /* enable only for calamities */
}
footer { /*icon bar en copyright */
    padding: 7px; /* breathing space content inside element */
	background: #eee4c5; /*sand color */
	font-size: 0.9em;
    text-align: center; /* center copyright notice */
	border-top: 10px solid #B38C69; /* brown top bar */
    border-radius: 0 0 10px 10px; /* rounded corners leftbottom & rightbottom */
}
.left-float { 
	float: left;  /* position item (eg.image) left of text */ 
	padding: 0 1em 1em 0; /* create space between item and text */
}
.right-float {
	float: right; /* position item (eg.image) left of text */
	padding: 0 1em 1em 0; /* create space between item and text */
}
.left-clear { 
	clear: left; /* blocks content on left of this class */ 
}

/* ------------------------------STATIC IMAGE & CAPTION styles------------- */	
.static {
	width: 100%; 
	position: relative; /* (image) content will be positioned absolute against this (.static) div */ 
	/* border: 1px solid #000;  /* thin border mainly for coding purposes (can be removed) */
	padding-top: 66.67%; /* this forces the heigth of 'autoslider' specific for ratio 10:15 */
}
.static img {  
	position: absolute; /* positions image absolute inside parent (.static) div */
	top: 0; /* start content in top */
	left: 0; /* start content on left */
	width: 100%;
	height: 100%; 	
}
.subcap {background: hsl(0, 0%, 40%); /* hsl=hue (0-360), saturation, lightness (0%=black) */
	color: white;
	font-style: italic;
	padding-left: 5px;
}

/* --------------------------IMAGE AUTOSLIDER LEGACY style - RESPONSIVE UPDATE------------- */
.autoslider {
	width: 100%; 
	position: relative; /* (.slide) content will be positioned absolute against this (.autoslider) div */ 
	/* border: 1px solid #000;  /* border mainly for coding purposes (can be removed) */
	padding-top: 66.67%; /* this forces the heigth of 'autoslider' specific for ratio 10:15 */
}
.slide {
	position: absolute; /* positions images absolute inside parent (.autoslider) div */
	top: 0; /* start content in top */
	left: 0; /* start content on left */
	width: 100%;
	height: 100%; 	
	animation: pltpics 15s infinite; /* animation named 'pltpics' has duration 15s and infinitely repeats */
	opacity: 0; /* transition transparency; value 0.0 - 1.0. Non= 1 (default) */
}
@keyframes pltpics {  /* pltpics animation */  
  25%{opacity:1;} /* when x% of slide animation is complete, transparency will set in */ 
  45%{opacity:0;} /* when x% of slide animation is complete, transparency will be zero */ 
} 
img:nth-child(1){animation-delay:0s;} /* will play this slide at start */
img:nth-child(2){animation-delay:3s;} /* will play this slide after delay 3 seconds */
img:nth-child(3){animation-delay:6s;} /* will play this slide after delay 6 seconds */
img:nth-child(4){animation-delay:9s;} /* will play this slide after delay 9 seconds */
img:nth-child(5){animation-delay:12s;} /* will play this slide after delay 12 seconds */

/* ------------------------------VIDEO styles------------- */
.tubes { 
	width: 100%;
	position: relative; /* (iframe) content will be positioned absolute against this (tubes) div */ 
	border: 1px solid #000; /* thin border mainly for coding purposes (can be removed) */
}
.tubes::before {
	content: '';
	display: block; 
	padding-top: 56.25%; /* this forces the heigth of 'tubes' specific for video ratio 16:9 (For 4:3=75%) */
}
.tubes iframe { /* specific style for iframes when inside tubes class */
	position: absolute; /* positions iframes absolute inside parent tubes div */
	border: none; /* overrides thicker border */
	top: 0; /* start content in top */
	left: 0; /* start content on left */
	width: 100%; /* width now scales with width tubes-div */
	height: 100%; /* width now scales with height tubes-div */
}