@charset "utf-8";
/* css document */

/* for RehabMeter report !!! */
/*@media print
{
table {page-break-after:always}
}*/


/* ------------------------------------- */	
/* main layout (main html tags and div styling) */				
				
body {
	font-size: 100%;
	line-height: 1.5;
	font-family: 'Source Sans Pro', sans-serif;
/*	font-family: "Georgia", "Times", serif;*/
	font-weight: 400; 
	color: #1f1f1f;	
/*	background-color: rgba(255,255,255,1.0); */
	background: #fafafa;
	}

header { 
	position: relative;
	background: #ffffff;
	background: linear-gradient(270deg, #d2d2d2 0%, #ffffff 60%);
	background: -moz-linear-gradient(270deg, #d2d2d2 0%, #ffffff 60%);
	background: -webkit-linear-gradient(270deg, #d2d2d2 0%, #ffffff 60%);
	background: -o-linear-gradient(270deg, #d2d2d2 0%, #ffffff 60%);
	border-top: 2px solid #7094cf; /* most upper line at the very top of page */
/*	border-bottom: 4px solid #a0be6d;*/ /* MF green */
	border-bottom: 4px solid #c3c3c3; /* line at the bottom of menu */
	}
	
header p {
	font-size: 1.0em;
	color: #2f7ba2;
	}

	.wrapper {
		width: 100%;
		max-width: 60em;
/*		min-width: 48em; */
		margin: 0em auto;
		}

	/* part of menu stretching outside of wrapper*/
	.nowrapper-menu {
		width: 100%;
		/* SkyGuru blue */
		background: #3366bb;
		background: linear-gradient(270deg, #7094cf 10%, #244783 90%);  
		background: -moz-linear-gradient(270deg, #7094cf 10%, #244783 90%);
		background: -webkit-linear-gradient(270deg, #7094cf 10%, #244783 90%);
		
		/*MF green */
/*		background: #78a22f;
		background: linear-gradient(270deg, #a0be6d 10%, #547121 90%);  
		background: -moz-linear-gradient(270deg, #a0be6d 10%, #547121 90%); 
		background: -webkit-linear-gradient(270deg, #a0be6d 10%,#547121 90%);
		background: -o-linear-gradient(270deg, #a0be6d 10%,#547121 90%); */
		
		/* light grey */
/*		background: #959595;
		background: linear-gradient(270deg, #c3c3c3 10%, #686868 90%);  
		background: -moz-linear-gradient(270deg, #c3c3c3 10%, #686868 90%); 
		background: -webkit-linear-gradient(270deg, #c3c3c3 10%,#686868 90%); */
		}

	/* container for other multiple div to be inserted (main2, main3, main3double), full line, but can be also inside of another div but still represents full line inside this div */
	.line { 
		position: relative;
		overflow: hidden;
		padding: 0%;
		background: #ffffff;
		border: 0px solid #f00;
		}

	/* container for other multiple div to be inserted (main4), half line, two of line-half div should be inserted in one line div */
	.line-half { 
		position: relative;
		float: left;
		width: 50%;		
		padding: 0%;
/*		background: #cf0; */
		border: 0px solid #000000;
		}
		
	.logo {	  
		display: inline;
/*		width: 30%; */
		float: left;
/*		background: #ffffcc; */ 
		padding: 1% 2% 1% 2%; /* top right bottom left */
		}
		
		/* id for logo in svg format */		
/*		#mflogo {
			width: 16.625em;
			} */
			
		#tagline {
			font-size: 0.875em;
			color: #1f1f1f;
			}
		
	.logo-right {
		display: inline;
		float: right;
/*		width: 62.666667%; */
/*		min-width: 15em; */
		color: #2f7ba2;
/*		background: #ffffff;*/
		padding: 1% 2% 1% 2%;
		overflow: visible;
		}
		
	.logo-right a {
		font-size: 0.916667em;
		font-weight: 400;
		}
		
	.photo, video, slider { 
		position: relative;
		color: #1f1f1f;
		padding: 2% 2% 1% 2%; /* top right bottom left */
		background: #ffffff;
		}

	/* single column div, should be inserted in line div, width of text is controlled with padding */		
	.main1 { 
		position: relative;
		color: #1f1f1f;
		padding: 1% 19% 1% 19%;
		background: #ffffff;
		}
	/* same as main1 div with another padding control */		
	.main1-padding { 
		position: relative; 
		color: #1f1f1f;
		padding: 2% 15% 2% 38%;
		background: #ffffff;
		}

		/* feature for very noticable div, rarely used */
		#callout { 
			position: absolute;
			top: 5em;
			left: -5%;
			width: 10em;
			padding: 2% 2% 2% 2%;
			background: #f0f0f0;
			border-top: 4px solid #959595;
			border-radius: 2em 0em 2em 0em;
			}
			
	/* for gallery (photo and/or video), usually inserted in line div (can be also in any other div), same as main1 div with another padding control */
	.gallery {
		color: #1f1f1f;
		padding: 2% 2% 2% 2%;
		background: #ffffff;
		}

	/* double column div, two should be inserted in line div */		
	.main2 {
		display: block;
		float: left;
		width: 46%;
		min-width: 20em;
		color: #1f1f1f;
		text-decoration: none;
		background: #ffffff;
		padding: 2% 2% 2% 2%;
		border-right: 0px solid #666666; /* be careful if using border as border is in px and layout can be broken when resized, width and padding should be adjusted correctly */
		}
		
	/* three column div, three should be inserted in line div */
	.main3 {	  
		display: block;
		float: left;
		width: 29.333333%;
		min-width: 8em;
		color: #1f1f1f;
		text-decoration: none;
		background: #ffffff;
		padding: 2% 2% 2% 2%;
		border-right: 0px solid #666666; /* be careful if using border as border is in px and layout can be broken when resized, width and padding should be adjusted correctly */
		}

	/* div representing two of three columns in one line, one this div and one main3 should be inserted in line div */		
	.main3double {
		display: block;
		float: left;
		width: 62.666667%;
		min-width: 20em;
		color: #1f1f1f;
		text-decoration: none;
		background: #ffffff;
		padding: 2% 2% 2% 2%;
		border-right: 0px solid #666666; /* be careful if using border as border is in px and layout can be broken when resized, width and padding should be adjusted correctly */
		}

	/* four column div, two should be insetred in each line-half div (or four should be inserted in line div) */		
	.main4 {
		display: block;
		float: left;
		width: 42%;
		min-width: 5em;
		color: #1f1f1f;
		text-decoration: none;
/*		background: #666666; */ /* when using background in this div things might look very ugly */
		padding: 4% 4% 4% 4%;
		border-right: 0px solid #666666; /* be careful if using border as border is in px and layout can be broken when resized, width and padding should be adjusted correctly */
		}
		
footer {
	width: 100%;
	color: #ffff00;
	text-decoration: underline;
	background: #494949;
	background: linear-gradient(90deg, #686868 0%, #2a2a2a 100%); /* grey darker for "3 stops" */
	background: -moz-linear-gradient(90deg, #686868 0%, #2a2a2a 100%);
	background: -webkit-linear-gradient(90deg, #686868 0%, #2a2a2a 100%);
	background: -o-linear-gradient(90deg, #686868 0%, #2a2a2a 100%);
	padding: 0%;
	border-top: 2px solid #959595; /* the line between main part and footer */
	border-bottom: 0px solid #959595; /* the very bottom line on the web page */
	}

footer p {
	font-size: 1.0em;
	}

footer a {
	display: inline;
	font-weight: 400;
	font-size: 0.875em;
	color: #d2d2d2;
	text-decoration: none;
	background: transparent;
	}

footer a:hover {
	color: #ffffff;
	text-decoration: underline;
/*  background: #000000; */
/*  box-shadow: 50px 50px 50px 5px black; */
/*	text-shadow:0px 1px 2px #ff0000; */
	}
	
	.footerbottom {
		display: block;
		position: relative;
		float: left;
		width: 96%;
		color: #b4b4b4;
		text-decoration: none;
/*		font-variant: small-caps; */ /* can look interesting */
		font-size: 0.8125em;
/*		background: #333333; */
		padding: 2%;
/*		border-top: 1px solid #a0be6d; */ /* MF green */
		border-top: 1px solid #7094cf; /* line between top and bottom part of footer */
/*		border-radius: 2em; */ /* can look interesting */
/*		box-shadow: 0px 0px 5px 2px #ffffff inset; */ /* can look interesting */
		}		
		
	.footerbottom a {
		font-size: 1.0em; /* 13px */
		}
		
	.footerbottom a:hover {
/*		font-size: 1.25em; */
		}

		
/* ------------------------------------- */	
/* vertically stretchable div */

	.vertstretch {
		text-overflow: ellipsis; /* ellipsis works only if there is one line of text only */
		overflow: hidden;
		height: 4.125em;
		background: #f0f0f0;
		/* W3C */
		transition: height 0.5s 0.0s ease-out, background 0.5s 0.0s ease-out;
		/* Firefox */
		-moz-transition: height 0.5s 0.0s ease-out, background 0.5s 0.0s ease-out;
		/* Safari and Chrome */
		-webkit-transition: height 0.5s 0.0s ease-out, background 0.5s 0.0s ease-out;
		/* Opera */
		-o-transition: height 0.5s 0.0s ease-out, height 0.5s 0.2s ease-out, background 0.5s 0.0s ease-out;
		}

	.vertstretch:hover {
		height: 12em; /* must be in em, auto or % is not ok => transition is not smooth */
		color: #000000;
		background: #ffffff;
		}


/* ------------------------------------- */		
/* additional div styling */
	
	/* bugfix => do not change this, it is used in doublecolumn layout as second class additionally to line class */
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		}

/*	.clear {
		clear: both;
		} */
	
	/* usually used as shadow of wrapper, but can be used for any div or p */
	.shadow {
		box-shadow: 0.0em 0.0em 0.5em #959595;
		}

/*	.shadow-large {
		box-shadow: 0.0em 0.0em 1.5em #959595;
		} */
	
	/* used in footer for line div */	
	.transparent { 
		background: transparent;
		}
	
	/* used mainly with inline colorboxes, but also other */
	.hidden { 
		display: none;
		}
		
/*	.floatright {
		display: block;
		width: 29.333333%;
		min-width: 15em;
		float: right;
		color: #600;
		text-decoration: none;
		background: #fcc;
		padding: 2%;
		border: 1px solid #fff;
		} */
		
		
/* ------------------------------------- */	
/* p, a, h1 to h6 */

p  {
	font-size: 1.05em;
/*	letter-spacing:	1px; */
/*	text-align: justify; */
	}
	
	.red {
		color: #cc0000;
		}
		
	.green {
		color: #78a22f;
		}
		
	.blue {
		color: #3366bb;
		}
		
	.grey {
		color: #777777;
		}
	
	.txtsmall {
		font-size: 0.85em;
		}

	.txtlarge {
		font-size: 1.5em;
		}
		
	.txtxlarge {
		font-size: 2.00em;
		}
		
	.bold {
		font-weight: 700;
		}
		
	.linethrough {
		text-decoration:line-through;
		}
		
	.quote {
		font-family: Georgia, Times, serif;
		font-weight: 400;
/*		font-size: 2.0em; */ 
		font-style: italic;
/*		color: #78a22f; */
/*		text-align: center; */
		}
		
	/* caption text on photo (usually on heroshot) */	
	.caption {
		margin: -2.25em 0.75em 0.75em 0.0em; /* top right bottom left */
		font-family: 'Source Sans Pro', sans-serif;
		font-variant:small-caps;
		font-size: 1.05em; 
		color: #ffffff;
		text-align: right;
		}

	.oldprice {
		padding-top: 0.25em;
		font-size: 1.25em;
/*		font-weight: 700;*/
		color: #cc0000;
		text-decoration:line-through;
		}
		
	.regularprice {
		padding-top: 0.25em;
		font-size: 1.25em;
		font-weight: 700;
		color: #000099;
		}
		
	.promoprice {
		padding-top: 0.25em;
		font-size: 1.25em;
		font-weight: 700;
		color: #78a22f;
		}
		
	/*	tipically used to create a free line in between text */
	.break {
		padding-top: 1em;
		}
		


a  {
	display: inline;
	font-weight: 700;
	color: #3366bb;
	text-decoration: none;
	}

a:hover {
	text-decoration: underline;
	}
		
	.ctalink {
		font-size: 1.25em;
		color: #3366bb;
/*		padding: 1.25%;
		background: #78a22f;
		border-radius: 0.25em 0.25em 0.25em 0.25em; */
		}
		
/*	.ctalink:hover {
		background: #6c922a;
		padding: 1.5%;
		} */
		
	.ctabutton {
		font-size: 1.25em;
		color: #ffffff;
		padding: 1.25%;
		background: #78a22f;
		border-radius: 0.25em 0.25em 0.25em 0.25em;
		}
		
	.ctabutton:hover {
		background: #6c922a;
/*		padding: 1.5%; */ /* resizes the background => the button looks smaller or larger */
		}
		
	/*	tipically used for p containing cta link and for div containing ctabutton, just makes some free space around cta */		
	.ctadistance {
			padding-top: 1em;
			padding-bottom: 2em;
			}
			
	/*	just makes some free space around "buy now" between selection and image of paypal buy now button */		
	.paypalbuttondistance {
			padding-top: 0.5em;
			padding-left: 0.5em;
			}
		

h1 {
	display: block;
	font-family: "Georgia","Times", serif;
	font-weight: 400;
	font-size: 1.75em; 
	font-style: normal;
	color: #000000;
	text-decoration: none;
/*	text-shadow: 1px 1px 3px #78a22f; */
	text-align: center;
	}

h2 {
	display: block;
	font-family: "Georgia","Times", serif;
/*	font-family: 'Bitter', sans-serif; */ 
	font-weight: 400;
	font-size: 1.5em; 
	font-style: normal;
	font-variant:small-caps;
	color: #000000;
	text-decoration: none;
/*	text-shadow:1px 1px 3px #78a22f; */
	text-align: left;
	}
	
h3 {
	display: block;
	font-family: "Georgia","Times", serif;
/*	font-family: 'Bitter', sans-serif; */
	font-weight: 400;
	font-size: 1.5em; 
	font-style: normal;
	color: #000000;
	text-decoration: none;
/*	text-shadow:1px 1px 3px #78a22f; */
	text-align: left;
	}
	
h3 a {
	display: block;	
	font-family: "Georgia","Times", serif;
/*	font-family: 'Bitter', sans-serif; */
	font-weight: 400;
	font-size: 1.5em; 
	font-style: normal;
	color: #3366bb;
	text-decoration: none;
/*	text-shadow:1px 1px 3px #78a22f; */
	text-align: left;
	}
	
h4 {
	display: block;
	font-family: "Georgia","Times", serif;
/*	font-family: 'Bitter', sans-serif; */
	font-weight: 400;
	font-size: 1.25em;
	font-style: normal;
/*  text-shadow: 1px 1px 4px #000000; */
	color: #000000;
	text-decoration: none;
	}
		
footer h4 {
	display: block;
	font-family: 'Source Sans Pro', sans-serif;
/*	font-family: 'Bitter', sans-serif; */
	font-weight: 700;
	font-size: 1.125em;
	font-style: normal;
/*  text-shadow: 1px 1px 4px #000000; */
	color: #ffffff;
	text-decoration: none;
	}
	
		
/* ------------------------------------- */
/* additional (h2, h3,...) styling (can be used also for div) */
	.border-grey {
		border-bottom: 0.166667em solid #959595;
		}
		
	.border-green {
		border-bottom: 0.166667em solid #a0be6d;
		}
		
	.border-blue {
		border-bottom: 0.166667em solid #7094cf;
		}
		
	.border-red {
		border-bottom: 0.166667em solid #be736d;
		}


/* ------------------------------------- */
/* table */

table {
	width: 100%;
	max-width: 100%;
/*	border: 1px solid #7094cf; */
	background: #ffffff;
/*	cellspacing: 0; */
/*	border-radius: 0.0em 0.0em 0.0em 0.0em; */ /* topleft topright bottomright bottomleft */
	}
	
	tr {
/*		background: #ffff00; */
		}
		
		th {
			background: #e1e1e1;
			border-bottom: 0px solid #7094cf;
			color: #000000;
			font-weight: 400;
			text-align: left;
			text-decoration: none;
			padding: 0% 1% 0% 1%; /* top right bottom left */
			}
		
		td {
/*			width: 25%; */
/*			min-width: 20em; */
			color: #000000;
			text-decoration: none;
			background: #f0f0f0;
			border:0px solid #000;
			padding: 0% 1% 0% 1%; /* top right bottom left */
			}
				
				/* dimmed text for nonavailable products */
				.na {
					color: #959595;
/*					text-decoration: none; */
/*					background: #f0f0f0; */
					}
				
				/* defines custom column width if necessary when columns are not equal */	
				.narrow {
					width: 9%;
					}
					
				/* defines custom column width if necessary when columns are not equal */	
/*				.wide {
					width: 30%;
					} */

				/* paypal button selection table */
				.tdpaypal {
/*					color: #ff0000; */
					background: #ffffff;
					}


/* ------------------------------------- */
/* (multi) media */

img {
	max-width: 100%;
/*	border:1px solid #f00; */ /* if needed overwrites default border:0 in reset.css */
/*	border-radius: 0.0em 0.0em 0.0em 0.0em;  topleft topright bottom right bottomleft */
	}
	
	.mainlogo {
		width: 12.0em;
/*		height: 4.125em; */
		}	

	.heroshot {
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottomright bottomleft */
		}	
	
	.imgsmall {
		float: left;
		display: inline;
		width: 8em;
/*		height: 12em; */
		margin: 0.5em 1.0em 0.5em 0.0em; /* top right bottom left */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottom right bottomleft */
		}
		
	.imgmedium {
		float: left;
		display: inline;
		width: 12em;
/*		height: 12em; */
		margin: 0.5em 1.0em 0.5em 0.0em; /* top right bottom left */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottom right bottomleft */
		}
		
	.imglarge {
		float: left;
		display: inline;
		width: 16em;
/*		height: 12em; */
		margin: 0.5em 1.0em 0.5em 0.0em; /* top right bottom left */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottom right bottomleft */
		}
		
	.imgfull {
		float: left;
		display: inline;
		width: 100%;
/*		height: 12em; */
		margin: 0.5em 1.0em 0.5em 0.0em; /* top right bottom left */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottom right bottomleft */
		}
	
	/* thumbnail for colorbox on main page, when clicked colorbox opens (photo only or text and photos depending how you link to it) */
	.thumbcolorbox {
		float: left;
		display: inline;
		width: 12em;
/*		height: 12em; */
		max-height: 8em;
		margin: 0.5em 1.0em 1.0em 0.0em; /* top right bottom left */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottom right bottomleft */
		}
		
	/* img displayed in inline colorbox when colorbox is opened, valid for combination of text and photos */
	.inlinecolorbox {
		float: left;
		display: inline;
		width: 20em;
		max-width: 50%;
/*		height: 12em; */
		margin: 0.5em 1.0em 0.5em 0.0em; /* top right bottom left */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottom right bottomleft */
		}
	
	.gallerycolorbox {
		max-width: 6em;
		max-height: 4em;
/*		height: 6em; */
		margin: 0.0em 0.19em 0.0em 0.0em; /* top right bottom left */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottom right bottomleft */
		}

	
/* ------------------------------------- */
/* additional text styling - alignments and formatting */
	
/*	.txtcenter {
		text-align:right;
		} */

	.txtright {
		text-align:right;
		}
		
	.txtoverflow {
		text-overflow: ellipsis;
		}


/* ------------------------------------- */	
/* content OUTSIDE OF WRAPPER, supports multiple trasitions */
	.outside-right {
		position: fixed;
		height: 100%;
		width: 10em;
		right: -11em;
		top: 0%;
		z-index: 5;
		color: #343434;
		padding: 1em;
		background: #6da3be;
		/* W3C */
		transition: right 0.5s 0.2s ease-out, background 0.5s 0.2s ease-out; /* transition: transitionname duration delay timing-function, transition2,... */
		/* Firefox */
		-moz-transition: right 0.5s 0.2s ease-out, background 0.5s 0.2s ease-out;
		/* Safari and Chrome */
		-webkit-transition: right 0.5s 0.2s ease-in, background 0.5s 0.2s ease-in;
		/* Opera */
		-o-transition: right 0.5s 0.2s ease-in, background 0.5s 0.2s ease-in;
		border-left: 1px solid #2f7ba2;
		}

	.outside-right:hover {
		right: 0em;
		background: #f0f0f0;
		}
		
/* ------------------------------------- */
/* vertical alignments */

/*	.vertalign-20 {
		position: relative;
		top: 20%;
		padding: 0;
		} */
	
	.vertalign-absolute-20 {
		position: absolute;
		top: 20%;
		padding: 0;
		}

		
/* ------------------------------------- */
/* horizontal alignments */

	.displace-left {
		position: relative;
		left: -2em;
		}

	
/* ------------------------------------- */
/* css shapes */

	.triangle-left {
		width: 0em;
		height: 0em; /* makes trapez */
		border-right: 1.0em solid #2f7ba2; /* triangle real width */
		border-top: 2em dotted transparent; /* triangle upper height */ /* dotted makes no artifact at the edge as solid does */
		border-bottom: 2em dotted transparent; /* triangle lower height */
		z-index: 5;
		/* W3C */
		transition: right 0.5s 0.2s ease-out, border-right 0.5s 0.2s ease-out; 
		/* Firefox 4 */
		-moz-transition: right 0.5s 0.2s ease-out, border-right 0.5s 0.2s ease-out;
		/* Safari and Chrome */
		-webkit-transition: right 0.5s 0.2s ease-in, border-right 0.5s 0.2s ease-out;
		/* Opera */
		-o-transition: right 0.5s 0.2s ease-in, border-right 0.5s 0.2s ease-out;
		}


/* ------------------------------------- */
/* SMALL SCREEN LAYOUT */
/* set what is different from big screen only */

@media screen and (max-width: 48em) {

body {
/*	background: #ffffff; */ 
	min-width: 26em; /* defines minimum size of screen when scrolling becomes mandatory */
	}
	
    .wrapper {
		width: 100%;
		max-width: 30em;
  		}
		
/*	.logo {
		width: 60%;
		}*/
		
	.mainlogo {
		width: 12.0em;
		}
		
		#mflogo {
			width: 14.0em;
			}
		
		#tagline {
			font-size: 0.75em;
			}
		
	.main1 {
		padding: 1% 2% 1% 2%; /* small amount of padding on small screen is just ok as the lines of text are much shorter */
		}
  
	.main2,
/*  .main3, */
	.main3double {
    	float: none;
    	width: auto;
  		}
  
	.main4 {	
		padding: 2%;
		}
		
/*	.gallery {
		padding: 2% 2% 2% 2%;
		} */
		
	.line-half { 
		position: relative;
		width: 100%; /* on small screen line-half becomes full line */	
		}

	/*  this class only applies on small screens */  
	.part {
		width: 46%;
/*		min-width: 5em; */
		float: left;
  		}	
			
	/*  this class only applies on small screens */
	.full {
		float: none;
		width: 100%;
/*	    width: auto; */
		}
	
}