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

/*@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: 'Montserrat', sans-serif;
	font-weight: 400; 
	color: #000000;
	background: #ffffff;
/*	background: #776655;*/ /*FOR WORK*/
/*		background-color: rgba(255,255,255,1.0); */
/*		background-image: url('../img/other/bgdotspattern.png');*/
/*		background-repeat: no-repeat;
		background-position: 50% 50%; */
	}
	
	.container {
		width: 100%;
		max-width: 80em; /* this defines maximum width of web page - in case of full screen width just delete or comment this line */
		margin: 0em auto;
/*		box-shadow: 0.0em 0.0em 0.5em #959595;*/
		}

header { 
	position: relative;
	background: transparent;
/*		background: linear-gradient(270deg, #222222 20%, #555555 100%);
		background: -moz-linear-gradient(270deg, #222222 20%, #555555 100%);
		background: -webkit-linear-gradient(270deg, #222222 30%, #555555 100%);
		background: -o-linear-gradient(270deg, #d2d2d2 0%, #ffffff 60%);*/
	/* border-top: 0.125em solid #dddddd; */ /* most upper line at the very top of webpage */
	border-bottom: 0.0625em solid #dddddd; /* line at the bottom of menu, 0.0625em=1px */
	}
	
	/* define bgcolor or bggradient only if different than header */
	.headerinsidewrapper {
		background: #ffffff; 
	}
	
header p {
/*	font-size: 1.0em;*/
	color: #2f7ba2;
		background: transparent;
	}
	
/*header a {
	display: inline;
	font-weight: 400;
	font-size: 1.0em;
	color: #333333;
	text-decoration: none;
	background: transparent;
	}

header1 a:hover {
	color: #666666;
	text-decoration: underline;
  	background: #000000; 
  	box-shadow: 50px 50px 50px 5px black; 
		text-shadow:0px 1px 2px #ff0000; 
	}*/

/* ------------------------------------- */	
/* all wrappers */
		
/*	.wrapper {
		width: 100%;
		max-width: 64em; 
		margin: 0em auto;
		box-shadow: 0.0em 0.0em 0.5em #959595;
		}*/	
		
	/* stretches web page to the size of container */
	.nowrapper {
		width: 100%;
		margin: 0em auto;
		}
		
	.logowrapper {
		width: 100%;
/*		max-width: 80em;*/ 
		margin: 0em auto;
		background: #ffffff;
		}
		
	.menuwrapper {
		width: 100%;
		max-width: 80em; 
		margin: 0em auto;
		}
		
	/* part of menu stretching outside of wrapper and very bottom "layer" of backgrounds below menu */
	.nowrapper-menu {
		background: #ffffff;
/*				background: #333333;*/ /*FOR WORK*/
		}
		
	.openingshotwrapper {
		width: 100%;
/*		max-width: 60em;*/ 
		margin: 0em auto;
		}
		
	.beginningwrapper {
		width: 100%;
/*		max-width: 80em;*/ 
		margin: 0em auto;
/*		background: #ee00ee;*/
		background: transparent;
		/*padding: 1.25em 0.0em 1.0em 0.0em;*/ /* top right bottom left */
		padding: 0.0em 0.0em 0.0em 0.0em; /* top right bottom left */
		}
		
	.beginningwrapper p {
			color: #000000;
			font-weight: normal; 
			text-align: center;
		}

	.visiblehomeonly {	
		display: inline-block;
		}
			
	.centralwrapper {
			width: 100%;
			max-width: 80em; 
			margin: 0em auto;
			background: #ffffff;
/*			background: #000099;*/ /*FOR WORK*/
/*			background: transparent;*/
			padding: 0.0em 0.0em 0.0em 0.0em; /* top right bottom left */
			}
			
	/* last part of main content of the web page just above footer, same for all subpages */		
	.endingwrapper {
			width: 100%;
			max-width: 64em; 
			margin: 0em auto;
/*			background: #eeeeee;*/ /*FOR WORK*/
			background: #ffffff;
/*			background: transparent;*/
			padding: 1.5em 0% 0.5em 0%; /* top right bottom left */
			}
		
	.footerwrapper {
		width: 100%;
		max-width: 80em; 
		margin: 0em auto;
			border-top: 0.0625em solid #dddddd; /* the line between main part and footer */
		}
		
		
/*	.logo {	  
		display: inline;
		float: left;
		padding: 1% 2% 1% 2%; 
		}*/
			
	.tagline {
		font-size: 1.0em;
/*		font-weight: bold;*/
		font-weight: normal;
		text-align: center;
	 	text-transform:capitalize;
		text-transform: uppercase;
		color: #000000;
/*		color: #666666;*/
		padding: 0.0em 0.0em 0.5em 0.0em; /* top right bottom left */
		}
			
	.languageselector a {
		font-size: 1.0em;
		font-weight: 400;
		color: #333333;
		}
			
	.languageselector a:hover {
		color: #183861;
		text-decoration: underline;
		}
		
/*	.logo-right {
		display: inline;
		float: right;
		color: #2f7ba2;
			background: #ffffff;
		padding: 1% 2% 1% 2%;
		overflow: visible;
		}
		
	.logo-right a {
		font-size: 0.916667em;
		font-weight: 400;
		}*/
		
		/* additional wrapper styling, as the name says opening = opening shot or hero shot and h1 */		
/*		.opening {
			width: 100%;
			position: relative;
			padding: 0% 0% 0% 0%; 
			background: #ffffff;
			}*/
		
			
		.beginning p {
/*				position: absolute; */
			font-size: 1.0em;
			color: #000000;
			font-weight: bold; 
			background: #ffccff;
			text-align: center;
/*				margin-top: -5.0em;*/
/*				padding: 0.0em 0.0em 4.5em 0.0em;*/ /* top right bottom left */
/*				background-image: url('../img/other/crta.png');
				background-repeat: no-repeat;
				background-position: 50% 30%; */
			}
			
		/* H1 and H2 displacement if located over openingshot */		
		.higher {
			position: relative;
			margin-top: -3.0em; /* this moves whole div higher */
			padding: 0.25em 0.0em 0.25em 0.0em;
			background-color: rgba(0,0,0,0.5);
			} 

	/* 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% 0% 0.5em 0%; /* top right bottom left */
		/*background: #ffffff;*/ 
/*		border: 1px solid #ff0000;*/ 
		}

	/* 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;
		}
		
	.photo, video, slider { 
		position: relative;
		color: #1f1f1f;
		/*background: #ffffff;*/
		padding: 0% 0% 0% 0%; /* top right bottom left */
		} 

	/* single column div, should be inserted in line div, width and L/R position of text is controlled with padding */		
	.main1 { 
		position: relative;
		color: #1f1f1f;
		padding: 0% 15% 1% 15%; /* top right bottom left */
		background: #ffffff;
/*		background: #ffffcc;*/ /*FOR WORK*/
		}

	/* single column div, should be inserted in line div, width and L/R position of text is controlled with padding */		
	.main1title { 
		position: relative;
		color: #1f1f1f;
		padding: 0% 0% 1% 0%; /* top right bottom left */
		background: #ffffff;
/*		background: #ffffcc;*/ /*FOR WORK*/
		}
		
	/* single column div, should be inserted in line div, almostfull width - alternative to main1 */		
	.main1almostfull { 
		position: relative;
		color: #1f1f1f;
		padding: 1% 4% 1% 4%; /* top right bottom left */
		background: transparent;
/*		background: #ffffff;*/
		}
		
	/* single column div, should be inserted in line div, full width - alternative to main1 */		
	.main1full { 
		position: relative;
		color: #1f1f1f;
		padding: 1% 0% 1% 0%; /* top right bottom left */
		background: transparent;
/*		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 inserted 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-align: center;*/
		text-decoration: none;
		background: #ffffff;
/*		background: #9999ff;*/ /*FOR WORK*/
		padding: 2% 2% 2% 2%; /* top right bottom left */
		text-align: center;
/*		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;
/*		background: #99cc33;*/ /*FOR WORK*/
		padding: 2% 2% 2% 2%; /* top right bottom left */
/*		border: 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 for header only, three should be inserted in line div */	
	.main3header {	  
		display: block;
		float: left;
		width: 29.333333%;
		min-width: 8em;
		color: #1f1f1f;
		text-decoration: none;
		background: #ffffff;
/*		background: #ccffff;*/ /*FOR WORK*/
		padding: 2% 2% 0% 2%; /* top right bottom left */
/*		border: 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, one this and one main3double should be inserted in line div, no matter which is left or right */
	.main3single {	  
		display: block;
		float: left;
		width: 29.333333%;
		min-width: 8em;
		color: #1f1f1f;
/*		text-align: center;*/
		text-decoration: none;
		background: #ffffff;
/*		background: #ffffcc;*/ /*FOR WORK*/
		padding: 2% 2% 2% 2%;
		border: 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 */
/*		border-radius: 1.0em 1.0em 1.0em 1.0em; */ /* topleft topright bottom right bottomleft */
		}

	/* div representing two of three columns in one line, one this div and one main3single should be inserted in line div */		
	.main3double {
		display: block;
		float: left;
		width: 62.666667%;
		min-width: 20em;
		color: #1f0000;
		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 */
		}
		
		/* additional wrapper styling, as the name says before ending = just above ending if any */		
		.beforeending {
			background: #c6980b;
			text-align: center;
			padding: 0.0em 0.0em 1.5em 0.0em; /* top right bottom left */
/*				box-shadow: 0.0em 0.0em 0.5em #959595; */
			}
			
		.beforeending p {
			text-align: center;
/*				padding: 0.0em 0.0em 1.5em 0.0em; */ /* top right bottom left */
/*				box-shadow: 0.0em 0.0em 0.5em #959595;*/
			}
		
footer {
	width: 100%;
	color: #666666;
	text-decoration: underline;
/*	background: #bbbbbb;*/ /*FOR WORK*/
/*	background: #ffffff;*/
	padding: 0%;
/*	border-top: 0.625em solid #dddddd;*/ /* the line between main part and footer */
/*	border-bottom: 1px solid #00a3e2; */ /* the very bottom line on the web page */
	
	
/* background-image: url('../img/other/vinjeta.png');*/
		/*background-repeat: no-repeat;*/
		/*background-position: 5% 45%;*/
	}
	
	/* define bgcolor or bggradient only if different than footer */
	.footerinsidewrapper {
/*		background: #ffffff;*/
/*background: transparent;*/
	}

footer p {
	font-size: 1.0em;
	padding: 0.0em 0.0em 0.0em 0.0em; /* top right bottom left */
	}

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

footer a:hover {
	color: #333333;
	text-decoration: underline;
/*  background: #000000; */
	}
	
	.footertop {
/*		background: #cccccc;*/ /*FOR WORK*/
/*		background: #fafafa;*/ 
				background: #eeeeee; 
		}	
	
	.footerbottom {
		display: block;
		position: relative;
		float: left;
		width: 96%;
/*			color: #666666; */
		text-decoration: none;
			/*background: #fafafa;*/
		background: #eeeeee;
		padding: 2%;
/*		border-top: 1px solid #c6980b;*/ /*golden*/ /* line between top and bottom part of footer */
		border-top: 1px solid #dddddd; /* line between top and bottom part of footer */
		/*border-bottom: 0.625em solid #dddddd;*/ /* bottom line of footer */
/*			border-radius: 2em; */ /* can look interesting */
/*			box-shadow: 0px 0px 5px 2px #ffffff inset; */ /* can look interesting */
		}	
		
	.footerbottom p {
/*			font-variant: small-caps; */ /* can look interesting */
		font-size: 0.875em;
		text-align: right;
		color: #666666;
		}	
		
	.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;
		}
		
/* ------------------------------------- */	
/* div - area with different content as link */

	.divlink {
		background: #ffffff;
		/* W3C */
		transition: box-shadow 0.3s 0.0s ease-out, background 0.3s 0.0s ease-out;
		/* Firefox */
		-moz-transition: box-shadow 0.3s 0.0s ease-out, background 0.3s 0.0s ease-out;
		/* Safari and Chrome */
		-webkit-transition: box-shadow 0.3s 0.0s ease-out, background 0.3s 0.0s ease-out;
		/* Opera */
		-o-transition: box-shadow 0.3s 0.0s ease-out, background 0.3s 0.0s ease-out;
				padding: 2% 2% 2% 2%;
		}

	.divlink:hover {
/*			background: #f6f6f6;*/
		box-shadow: 0.0em 0.0em 0.5em #959595;
		}


/* ------------------------------------- */		
/* 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;
		}
	
	/* used mainly with inline colorboxes, but also other */
	.hidden { 
		display: none;
		}


/* ------------------------------------- */		
/* background color or gradient for part of web page outside of wrapper. but it can be used also as additional div styling */

	/* used in footer for line div */	
/*	.transparent { 
		background: transparent;
		} */
		
	.white { 
		background: #ffffff;
		}
		
	.red { 
		background: #660000;
		}
		
	.turquise { 
		background: #2d9ab9;
		}
		
	.grey { 
		background: #2d9ab9;
		}
		
	.browngradient {
		width: 100%;
		/* TYJ brown */
/*		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%);*/
		}
		
/* ------------------------------------- */	
/* p, a, h1 to h6 */

p  {
	font-size: 1.125em; /* this is 18px */
/*		letter-spacing:	1px; */
	text-align: justify;
/*		padding: 0.0em 0.0em 0.75em 0.0em;*/ /* top right bottom left */
	}
	
	.txtcenter {
		text-align:center;
		}
		
	.txtright {
		text-align:right;
		}
		
	.txtrightsscrleft {
		text-align: right;
		}
		
	.invisible {	
		display: none;
		}
		
	.ph1 {
		font-family: 'Montserrat', sans-serif;
		font-weight: normal; 
		font-size: 2.5em; 
		font-style: normal;
		color: #999999;
		text-decoration: none;
		text-transform: capitalize;
/*			font-variant: small-caps;*/
/*			text-shadow: 1px 1px 3px #78a22f; */
		text-shadow: 1px 1px 0px #666666;
		text-align: center;
/*			background: #c6980b;*/
/*			background-color: rgba(153,0,153,0.1);*/  /* r,g,b, transparency */
/*			position: relative;
			left: 0.0em;
			top: 0.0em; */
/*			border-bottom: 1px solid #7a5111;*/
/*			background-image: url('../img/other/crta.png');
			background-repeat: no-repeat;
			background-position: 50% 50%;*/
		padding: 0.0em 0.0em 0.5em 0.0em; /* top right bottom left */
	}
	
.ph2 {
	display: block;
	font-family: 'Montserrat', sans-serif; 
	font-weight: 400;
	font-size: 1.25em; 
	font-style: normal;
/*		font-variant: small-caps; */
	color: #000000;
	text-decoration: none;
/*		text-shadow:1px 1px 3px #78a22f; */
/*		background: #78a22f; */
/*		padding: 0.0em 0.5em 0.0em 0.5em; */ /* top right bottom left */
/*		margin: -1.5em 0.0em 0.0em 0.0em; */ /* top right bottom left */
	text-align: left;
	}

	.txtblack {
		color: #000000;
		}
	
	.txtred {
		color: #ff0000;
		}
		
	.txtgreen {
		color: #78a22f;
		}
		
	.txtblue {
		color: #183861;
		}
		
	.txtgrey {
		color: #777777;
		}
	
	.txtsmall {
		font-size: 0.8125em;
		}

	.txtlarge {
		font-size: 1.25em;
		}
		
	.txtxlarge {
		font-size: 2.00em;
		}
		
	.txtbold {
		font-weight: 600;
		}
		
	.txtlinethrough {
		text-decoration:line-through;
		}
		
	.txtquote {
		font-family: 'Montserrat', sans-serif;
		font-weight: 400;
/*			font-size: 2.0em; */ 
		font-style: italic;
/*			color: #78a22f; */
/*			text-align: center; */
		}

	.txtnew {
/*		font-size: 1.25em; */
/*		font-weight: 700; */
/*		color: #009900; */
		font-style: italic;
		}
		
	/* caption text on photo */	
	.openingshotcaption {
		margin: -2.25em 1.0em 0.375em 0.0em; /* top right bottom left */
		font-family: 'Montserrat', sans-serif;
		font-variant:small-caps;
		font-size: 1.125em; 
		color: #ffffff;
		text-align: right;
		/*background-color: rgba(0,0,0,0.5);*/ 
		padding: 0.0em 0.0em 0.0em 0.0em; /* top right bottom left */		
/*		position: relative;
		left: 0.0em;
		top: -2.25em; */
		}

	/* caption text on photo */	
	.heroshotcaption {
		margin: -2.25em 1.0em 0.0em 0.0em;
		font-family: 'Montserrat', sans-serif;
		font-variant:small-caps;
		font-size: 1.125em; 
		color: #ffffff;
		text-align: right;
		padding: 0.0em 0.0em 0.0em 0.0em;
		}
		
	/* caption text on photo */	
	.caption {
		margin: -2.0em 1.25em 0.0em 0.0em; /* top right bottom left */
		font-family: 'Montserrat', sans-serif;
		font-variant:small-caps;
		font-size: 1.125em; 
		font-weight: 400;
		color: #ffffff;
		/*font-style: italic;*/
		text-align: right;
		padding: 0.0em 0.0em 0.0em 0.0em;
		}

	.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: #004488;
		}
		
	.promoprice {
		padding-top: 0.25em;
		font-size: 1.25em;
		font-weight: 700;
		color: #78a22f;
		}
		
	.paypal {
		font-size: 1.125em;
		font-weight: 700;
		color: #ffffff;
		padding: 0.5em 1.0em 0.5em 1.0em; /* top right bottom left */
		background: #00a3e2;
		border-style:solid;	
		border-width: 1px 1px 1px 1px; /* top right bottom left */
/*			border-color: #004488 #004488 #004488 #004488;*/ /* top right bottom left */
/*			border-radius: 0.5em 0.5em 0.5em 0.5em;*/
		}	
		
	/*	tipically used to create a free line in between text */
	.break {
		padding-top: 1.0em;
		}
		
	/*	tipically used to split content on one web page */
	.breaklarge {
		padding-top: 1.5em;
		}

	.breaklargebottom {
		padding-bottom: 2.0em;
		}

a  {
	display: inline;
	font-weight: 400;
/*		color: #00a3e2;*/ /*BOS blue*/
/*		color: #ff286e;*/ /*Giro official pink*/
	color: #fe94f6; /*pink ribbon ecwid shop*/
	text-decoration: none;
	}

a:hover {
	text-decoration: underline;
/*		text-decoration: none; */
	}
	
	.selectorlink {
		display: block;
		font-size: 1.25em;
		color: #ffffff;
		margin: -0.5em 0.0em 0.0em 0.0em; /* top right bottom left */
		padding: 0.5em 1.5em 0.5em 0.5em; /* top right bottom left */
		background: #2d9ab9;
		border-radius: 0.0em 0.0em 1.0em 0.0em; /* topleft topright bottomright bottomleft */   
		}
		
	.selectorlink:hover {
		display: block;
		color: #ffffff;
		background: #990000;
		opacity:1.0;    
		}
		
	.ctalink {
/*		font-size: 1.125em;*/
/*		color: #00a3e2;*/ /*BOS blue*/
				color: #fe94f6;
		font-weight: 400;
/*			padding: 1.25%;
			background: #78a22f;
			border-radius: 0.25em 0.25em 0.25em 0.25em; */
		}
		
	.ctalink:hover {
/*			background: #c6980b; */
/*			padding: 1.5%; */
		text-decoration: underline;
		}
		
	.ctabutton {
		font-size: 1.0em;
/*		color: #c6980b;*/ /* golden */
		color: #ffffff;
		font-weight: bold;
		text-transform: uppercase;
/*			text-transform: capitalize; */
		padding: 0.5em 1.0em 0.5em 1.0em; /* top right bottom left */
/*		background: #153053;*/ /*Maserati blue*/
				background: #183861;	
		/*border-style: solid;*/	
		/*border-width: 1px 1px 1px 1px;*/ /* top right bottom left */
		/*border-color: #153053 #153053 #153053 #153053;*/ /* top right bottom left */
		border-radius: 0.0em 0.0em 0.0em 0.0em;
		}
		
	.ctabutton:hover {
		background: #183861;
				padding: 0.5em 1.25em 0.5em 1.0em; /* top right bottom left */
		/*border-color: #c6980b #c6980b #c6980b #c6980b;*/ /* top right bottom left */
		}
		
	/*	tipically used for p containing cta link and for div containing ctabutton, just makes some free space around cta */		
	
	.ctadistance {
		padding-top: 1.0em;
		padding-bottom: 1.5em;
		}
			
	/*	just makes some free space around "buy now" between selection and image of paypal buy now button */		
	.paypalbuttondistance {
		padding-bottom: 0.25em;
		padding-left: 0.5em;
		}
		
	.backtotoplink {
		display: block;
		font-size: 0.875em;
		color: #333333;
		font-weight: bold;
		text-align: center;
		padding: 1.0em 0.0em 1.0em 0.0em; /* top right bottom left */
		}
		
	.backtotoplink:hover {
		text-decoration: underline;
		color: #183861;
		}
		
	.fakelink {
		color: #c6980b;
		padding-left: 0.5em;
		}
		
	.fakenolink {
		font-weight: 400; 
		color: #000000;
		}
		
	.nounderlineonhover:hover {
		text-decoration: none;
		}
		
	
h1 {
/*google fonts*/
	font-family: 'Montserrat', sans-serif;
/*	font-family: 'Verdana', sans-serif;*/
/*	font-family: 'Montserrat', sans-serif;*/
/*	font-family: 'Open Sans', sans-serif;*/
/*	font-family: 'Rubik One', sans-serif;*/
/*	font-family: 'PT Serif Caption', serif;*/
/*	font-family: 'Arial', sans-serif;*/

/*adobe fonts*/
/*    font-family: poiret-one, sans-serif; */ 
/*    font-family: paytone-one, sans-serif; */

/*	font-weight: bold;*/
	font-weight: 200; 
/*	font-size: 2.25em;*/
	font-size: 4.0em; 
	font-style: normal;
/*	color: #666666;*/
	color: #000000;
/*	color: #c6980b;*/ /*golden*/
/*text-decoration: underline;*/
/*	text-transform: capitalize;*/
/*	text-transform: uppercase;*/
	/*	font-variant: small-caps;*/
/*	text-shadow: 1px 1px 0px #666666;*/
	text-align: center;
/*		background: #f8f8f8;*/
/*		background-color: rgba(153,0,153,0.1);*/  /* r,g,b, transparency */
/*		position: relative;
		left: 0.0em;
		top: 0.0em; */
/*		border-bottom: 1px solid #7a5111;*/
/*		background-image: url('../img/other/crta.png');
		background-repeat: no-repeat;
		background-position: 50% 50%;*/
		/*margin: 0.0em 0.0em 0.0em 0.0em;*/ /* top right bottom left */
	padding: 0.0em 0.0em 0.0em 0.0em; /* top right bottom left */
			/*border-bottom: 2px solid #dddddd;*/
	}

h2 {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1.25em; /* 1.375*/
	font-style: normal;
/*	font-variant: small-caps; */
/*	color: #000000;*/
		/*color: #c6980b;*//*golden TYJ*/
		color: #666666;
	text-decoration: none;
/*		text-shadow:1px 1px 3px #78a22f; */
/*		background: #78a22f;*/
	/*padding: 0.5em 0.0em 1.0em 0.0em;*/ /* top right bottom left */ /* when using line (border) between h1 and h2 */
	padding: 0.0em 0.0em 1.0em 0.0em; 
/*		margin: -1.5em 0.0em 0.0em 0.0em; */ /* top right bottom left */
/*	text-align: left;*/
	text-align: center;
	}
	
h3 {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1.5em; /*1.25*/ 
	font-style: normal;
		text-transform: uppercase;
	color: #000000;
	text-decoration: none;
/*		text-shadow:1px 1px 3px #78a22f; */
	text-align: left;
		padding: 1.0em 0.0em 0.0em 0.0em; /* top right bottom left */
	}
	
		.chooserdistance {
		padding: 0.5em 0.0em 0.0em 0.0em; /* top right bottom left */
		}
	
	
h4 {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1.75em;
/*		font-variant: small-caps; */
/*		font-style: normal; */
/*  	text-shadow: 1px 1px 4px #000000; */
	/*color: #c6980b;*//*golden TYJ*/
	color: #000000;
	text-align: left;
	text-decoration: none;
/*		text-shadow: 1px 1px 0px #cccccc;*/
/*		background: #f8f8f8;*/
	line-height: 1.0;
	padding: 1.0em 0.0em 0.5em 0.0em; /* top right bottom left */
	}
		
footer h4 {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.125em;
	font-style: normal;
	color: #666666;
	text-decoration: none;
/*		background: #transparent; */
	}
	
h5 {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1.375em; /*1.25*/ 
	font-style: normal;
	color: #000000;
	text-decoration: none;
/*		text-shadow:1px 1px 3px #78a22f; */
	text-align: left;
			padding: 1.25em 0.0em 0.0em 0.0em; /* top right bottom left */
	}
	
h6 {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1.625em; /*1.5*/
	font-style: normal;
			font-variant: small-caps;
	color: #000000;
	text-decoration: none;
/*		text-shadow:1px 1px 3px #78a22f; */
	text-align: center;
		padding: 0.5em 0.0em 0.0em 0.0em; /* top right bottom left */
	}
	
		
/* ------------------------------------- */
/* additional (h2, h3,...) styling (can be used also for div) */

	.border-h1 {
/*		border-top: 5px solid #ff0000;*/
		border-bottom: 1px solid #cc0000;
		}

	.border-h2 {
		border-bottom: 2px solid #00a3e2;
		}
		
	.border-h3 {
		border-bottom: 2px solid #999999;
		}


/* ------------------------------------- */
/* 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: 10%;
					}
					
				/* defines custom column width if necessary when columns are not equal */	
/*				.wide {
					width: 30%;
					} */

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


/* ------------------------------------- */
/* bullet list */
ul { 
		background: transparent;
/*			list-style-image: url('../img/other/checkbox.png'); */
		list-style-position: inside;
/*			border-radius: 0.0em 0em 0em 0em;  */
/*			list-style: none; */
/*			position: relative; */
		padding: 0.0em 0.0em 0.0em 0.0em; /* top right bottom left */
/*			display: inline-table; */ /* WTF? */
		}
		
li { 
	font-weight: normal; 
	font-size: 1.125em; 
	font-style: normal;
/*	color: #000000;*/
	padding: 0.0em 0.0em 0.0em 0.0em;
		}
		
		.checkbox 	{ 
			background: transparent;
			list-style-image: url('../img/other/checkbox.png');
			list-style-position: inside;
			padding: 0.0em 0.0em 2.0em 0.0em; /* top right bottom left */
		}


/* ------------------------------------- */
/* (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: 24.0em;
    margin-left: auto; /* this two lines center logo inside div */
    margin-right: auto;
	margin-top: 0.0em;
		}

	.imglanguageselector {
		float: right;
		display: inline;
		width: 1.5em;
		margin: 0.0em 0.0em 0.0em 0.375em; /* top right bottom left */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottom right bottomleft */
		}	

	/* used for index.php only */
	.openingshot {
		width: 100%;
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottomright bottomleft */
		padding: 0em;
		}

	/* the same idea as for openingshot (different parameters can be set) but for all other pages = not for index.php */
	.heroshot {
		width: 100%;
		margin: 0.0em 0.0em -0.375em 0.0em; /* top right bottom left */ /* set bottom margin to -0.325 to fill container to the edge. if 0.0 then there is some bottom edge - strange!? */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottomright bottomleft */
		}
		
	.chooser {
/*		max-width: 15em; */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottomright bottomleft */
		}
	
	/* usually used together with text */
	.imgsmall {
		float: left;
		display: inline;
		width: 8em;
		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 */
		}
	
	/* usually used together with text */	
	.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 */
		}
	
	/* usually used together with text */	
	.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 */
		}
		
	.imgalmostfull {
/*			display: block;*/
		width: 92%;

/*			height: 12em; */
/*			padding: 0.0em 0.0em 0.5em 0.0em; */ /* top right bottom left */
/*			border-radius: 0.0em 0.0em 0.0em 0.0em; */ /* topleft topright bottom right bottomleft */
		}
	
	/* usually used together with text */	
	.imgfull {
/*			display: block; */
		width: 100%;
/*			height: 12em; */
			/*margin: 0.0em 0.0em 0.0em 0.0em;*/ /* top right bottom left */
			/*padding: 2.5em 0.0em 1.0em 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 */
		}
		
	.imgborder {
		border: 1px solid #999999; /* if needed overwrites default border:0 in reset.css */
		}
		
iframe {
	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 */
	}
	
	.googlemaps {
/*			float: left;
			display: inline; */
		width: 100%;
		height: 22em;
		margin: 0.5em 0.0em 1.0em 0.0em; /* top right bottom left */
		border-radius: 0.0em 0.0em 0.0em 0.0em; /* topleft topright bottom right bottomleft */
/*			overflow: hidden; */
		}

	.movie {
/*			float: left;
			display: inline; */		
		width: 100%;
		height: 22em;
		margin: 0.5em 0.0em 1.0em 0.0em; /* top right bottom left */
/*			overflow: visible; */
		}

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

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

		
/* ------------------------------------- */
/* 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;
		}

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

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

/* ------------------------------------- */
/* changes to tags and classes*/
body {
/*	background: #ffffff; */ 
	min-width: 26em; /* defines minimum size of screen when scrolling becomes mandatory */
	}
		
	.container {
		width: 100%;
		max-width: 30em;
  		}
		
/*    .wrapper {
		width: 100%;
		max-width: 30em;
  		}*/
		
/*	.beginningwrapper {
		padding: 0.0em 0.0em 0.0em 0.0em; 
		}*/
		
	.mainlogo {
		width: 15.0em;
		margin-top: 0.5em;
		}
		
		.tagline {
/*			font-size: 0.75em; */
			}
		
	.main1 {
		padding: 1% 2% 1% 2%; /* top right bottom left */ /* small amount of padding on small screen is just ok as the lines of text are much shorter */
		}
		
	.main1title {
		padding: 0% 2% 1% 2%; /* top right bottom left */ /* small amount of padding on small screen is just ok as the lines of text are much shorter */
		}
  
	.main2,
	.main3header,
/*  .main3, */
	.main3single,
	.main3double {
/*    	float: none;*/
/*    	width: auto;*/
		width: 96%;
		padding: 1% 2% 1% 2%; /* top right bottom left */ /* small amount of padding on small screen is just ok as the lines of text are much shorter */
/*		border: 0px solid #2f7ba2; */
  		}
		
	/*  this class only applies on small screens - it stretches main3 to defined width on small screen */
	.main3 {
		float: none;
		margin-left:auto; /* together with next line centers content on small screen */
		margin-right:auto;
		max-width: 18.75em; /* not suitable for MF template! */
	    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 */	
		}

		/*	tipically used to split content on one web page */
	.breaklarge {
		padding-top: 1.0em;
		}

	.breaklargebottom {
		padding-bottom: 1.0em;
		}
	
h1 { 
	font-size: 2.25em; 
	font-weight: 400;
	}
	
/*	.productpage {
		text-align: center;
	}*/
	
	.txtrightsscrleft {
		text-align: left;
		}
	
/*	.h4rightsscrleft {
		text-align: left;
		}*/

/* ------------------------------------- */
/* this classes apply on small screen (prefix sscr) only and they are not defined for big screens */

	/*  this class only applies on small screens */  
	.sscrpart {
		width: 46%;
/*			min-width: 5em; */
		float: left;
  		}	
		
		/*  this class only applies on small screens and makes div, img or anything else just as it says */
	.sscrinvisible {	
		display: none;
		}
		
/* H1 displacement */
/*		.higher {
			position: relative;
			margin-top: 0.0em;
			padding: 1.0em 0.0em 1.0em 0.0em; 
			background-color: rgba(255,255,240,1.0);
		}*/
		
		
}