* 					{ margin: 0; padding: 0; box-sizing: border-box }
html				{ touch-action: pan-x pan-y }
body 				{ width: 100%; height: 100%; min-width: 750px; min-height: 700px; background: #222222 linear-gradient(0deg, #222222, #0001fc) 0 100% no-repeat; background-size: cover;
					  color: #fff; font-family: "Trebuchet MS", Tahoma, Arial, Verdana; font-size: 1.125rem; letter-spacing: 0.5px }
h1					{ display: block; border-bottom: 1px solid #fff; font-size: 2rem; text-shadow: 0px 0px 2px #000 }
a, a:visited		{ color: #fff }
.center				{ max-width: 730px; margin: auto }


/* Header Banner styles */
header				{ width: 100%; height: 80px; top: 20px; position: relative; background: url('images/logo-bas.png') 0% 100px no-repeat; animation: scrollY 0.5s ease-out 0.5s 1 forwards }
					  
@keyframes scrollY	{    0%	{ background-position: 0% 100px }
					   100%	{ background-position: 0%   0px } }


/* Section content styling */
section				{ margin-top: 50px; margin-bottom: 100px; /* to compensate for the footer-placemater when scrolling */ }
section a 			{ display: block; padding: 2px 5px 2px 50px; text-decoration: none; border-radius: 5px; line-height: 26px; text-shadow: 0px 0px 2px #000 }
section a:before 	{ display: inline-block; width: 35px; margin-left: -40px; content: '💾' }
section a:hover     { background: #222 linear-gradient(135deg,  #fffc, #0001fce0) }
section a:visited 	{ color: #fec }

section.hide 		{ display: none; opacity: 0 }
@keyframes fadeIn   {     0%   { opacity: 0 }
						100%   { opacity: 1 } }


/* Footer placemat styles */
footer 				{ position: fixed; z-index: 20; bottom: 0; width: 100%; height: 90px; border-top: 1px solid #282828; background-color: #222; text-align: center; padding: 20px 15px 0 15px }
footer a img		{ margin: 0 20px; width: auto; height: 50px; min-width: 50px; border-radius: 3px; transition: 2s transform ease }
footer a img:hover	{ transform: rotate(360deg) }


/* Menu styles */
nav 				{ position: absolute; z-index: 10; left: calc(50% - 625px); top: 20px; width: 225px; text-align: right; line-height: 25px; user-select: none }
nav a 				{ color: #fff; text-decoration: none; display: inline-block; width: 100%; padding: 3px 10px 3px 3px; border-radius: 5px; text-shadow: 0px 0px 2px #000 }
nav a:hover			{ background: #000 linear-gradient(135deg,  #fffc, #0001fce0) }
nav figure			{ padding: 0 8px }
nav figure a 		{ width: 64px; height: 40px; margin: 0 5px 0 0; padding: 0; transition: 1s transform ease; box-shadow: 0 0 5px #fff }
nav figure a img	{ border-radius: 5px }
nav figure a:hover	{ background: transparent; transform: rotate(180deg) }
nav figure .flagUK	{ transform: rotate(180deg) }

nav #hamburger		{ display: none; width: 0; margin-top: 4px; border: 1px solid #000; border-radius: 5px 5px 0px 0px } 
nav .hamburger		{ cursor: pointer; background: #222 linear-gradient(135deg,  #fffc, #0001fce0); color: #fff; padding: 5px 10px 5px 2px }
nav .hamburger svg	{ width: 22px; height: 22px; vertical-align: top; margin-left: 5px }
nav .hide4Mobile	{ width: 225px; visibility: visible;  height: auto; margin-bottom: 50px;  /* to compensate for the footer-placemater when scrolling */  }
nav .line 			{ fill: none; stroke: #fff; stroke-width: 8; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1) }
nav .line1 			{ stroke-dasharray: 60 207; stroke-width: 8 }
nav .line2 			{ stroke-dasharray: 60 60;  stroke-width: 8 }
nav .line3 			{ stroke-dasharray: 60 207; stroke-width: 8 }
nav .opened .line1 	{ stroke: #f22; stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 8 }
nav .opened .line2 	{ stroke: #f22; stroke-dasharray: 1 60;   stroke-dashoffset: -30;  stroke-width: 8 }
nav .opened .line3 	{ stroke: #f22; stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 8 }


/* Photo Slider styles */
.slider 					{ position: relative; width: 100%; height: 350px; overflow: hidden; opacity: 0; animation: fadeIn 0.2s ease 0.5s 1 forwards }
.slider img 				{ position: absolute; display: block; width: 100%; height: 350px; object-fit: contain; transition: all 0.5s ease }
.slider .btn 				{ position: absolute; width: 38px; height: 38px; vertical-align: middle; border: 1px solid #2228; border-radius: 50%; z-index: 10; cursor: pointer; background-color: #fffc; box-shadow: 0px 0px 5px 0 #ccc; color: #2228; font-size: 2rem; line-height: 1.8rem; font-family: arial }
.slider .btn:hover			{ background-color: #fffe }
.slider .btn-prev 			{ top: 45%; left:  2%; transform: rotate(180deg) }
.slider .btn-next 			{ top: 45%; right: 2% }
.slider .btn-prev:active	{ transform: rotate(180deg) scale(1.1) }
.slider .btn-next:active	{ transform: scale(1.1) }


/* Round Toggle Switch styles */
.switch 					{ position: relative; display: inline-block; width: 50px; height: 26px }
.switch input 				{ opacity: 0; width: 0; height: 0 }
.switch .toggle				{ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 20px; transition: 0.4s }

.switch .toggle:before 			{ position: absolute; content: ''; height: 20px; width: 20px; left: 4px; bottom: 3px; background-color: #fff; border-radius: 50%; transition: 0.4s }
input:checked + .toggle 		{ background-color: #2196F3 }
input:checked + .toggle:before 	{ transform: translateX(22px) }
input:focus   + .toggle 		{ box-shadow: 0 0 1px #2196F3 }


/* Responsive override to Burger Menu and alignment of content for smaller width screens */
@media only screen and (max-width: 1259px)
{
	nav					{ left: calc(50% - 498px) }
	.center				{ max-width: 730px; margin-left: calc(50% - 240px) }
}

@media only screen and (max-width: 1079px)
{
	footer				{ padding: 20px 10px 0 10px }
}

@media only screen and (max-width: 1023px)
{
	nav					{ left: 5px }
}

@media only screen and (max-width: 980px)
{
	header				{ margin-top: 20px }
	section				{ width: 100%; min-width: 730px }
	nav					{ left: calc(50% - 365px); top: 0px; width: 200px; text-align: left; color: #222; font-size: 1.1rem }
	nav a,
	nav a:visited 		{ color: #222; text-shadow: none; padding: 3px 0 3px 8px }
	nav a:hover			{ background: #222 linear-gradient(-45deg,  #fffc, #0001fce0); color: #fff }
	nav div				{ background: #fffc; border-radius: 0px 5px 5px 5px; box-shadow: 0 0 2px 2px #2228; padding: 5px; margin-top: 1px; visibility: hidden }
	nav #hamburger		{ display: inline-block; width: 101px }
	nav .hide4Mobile	{ background: #cccc linear-gradient(60deg, #aaac, #eeee, #aaac) }
	.center				{ width: 100%; margin-left: calc(50% - 365px) }
}

/* Zoom fonts only on touch-devices  */
@media only screen and (max-width: 980px) and (pointer: coarse)
{
	nav 				{ left: calc(50% - 181px); top: 18px; zoom: 2.0 }
	section				{ font-size: 150% }
	section a 			{ line-height: 175% }
}

@media only screen and (max-width: 910px)
{
	footer				{ margin: 0 5px; zoom: 0.95 }
	footer a img		{ margin: 0 10px }
}

@media only screen and (max-width: 810px) and (pointer: coarse)
{
	nav					{ left: calc(50% - 181px) } 
}

@media only screen and (max-width: 768px)
{
	nav					{ left: 10px }
}

@media only screen and (max-width: 768px) and (pointer: coarse)
{
	nav					{ left: 11px }
}