/* Style sheet for www.deskproto.com */
/* copyright (c) Delft Spline Systems, NL, 2014. */
/* This stylesheet is called ONLY for screens below 600 px. */
/* consider any screen below 600 to be a mobile phone, as "media handheld" is not supported by many phones */

/* Z-index values used: 
	#background -5
	<header> (navigation) 5
	#socialmediabuttons 3
	#isolate-main 4
	Slideshow buttons 1
*/

/* jul 21 - made this style code inline, for better performance
body {
	font-family: Arial, Verdana;
	font-size: 14px;
}
@media all and (max-width: 430px) {
	body {
		font-size: 12px;
	}
	body .not-on-mobile {
		display: none;
	}
}
*/

header {
	position: absolute;
	top: 0px;
	width: 100%;
	/* these three lines center the content horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 5; /* Z-index only works when 'position' is present */
}

/*  jul 21 - made this style code inline, for better performance
#background {
	background: url('../images/DP-background-400x200.jpg') no-repeat;
	background-size: 100% auto;
	position: fixed;
	width: 100%;
	height: 100px;
	left: 0;
	top: 0;
	z-index: -5;
}
@media all and (max-width: 430px) {
	#background {
		height: 70px;
	}
}
*/
#header-leftside {
	position: relative;
	width: 70%;
	height: 80px;
} 
@media all and (max-width: 430px) {
	#header-leftside {
		height: 60px;
	}
}


#BottomAlign {
	position: absolute;
	width: 100%;
	vertical-align: bottom;
	bottom: 0px;
}
#BottomAlign IMG {
	width: 100%; /* force the image to scale down if the container is too small */
	/* three lines added after again using width and height in html to avoid CLS penalties */
	/* this tag is used only for one image: 500 x 100 pixels (DP_Logo_Transp). */
	object-fit: contain;
	aspect-ratio: 5 / 1;
	height: auto;
}

#header-rightside {
	display: none;
} 
#header-rightside-mobile {
	position: absolute;
	width: 30%;
	height: 45px;
	top: 40px;
	right: 0;
	text-align: center;
	opacity: 1; 
} 
@media all and (max-width: 430px) {
	#header-rightside-mobile {
		top: 30px;
	}
}



/* Start of NAV MENU series of tags for the MOBILE version----------------------------*/
/* Draw the blue menu bar first, as it is wider than the contents. */
/* Total height of the bar is 40  (18 for icon + 15 padding in .show-menu) */
nav {
	position: absolute;
	top: 100px;
	background-color: #034EA2; /* color of the bar behind the menu blocks: dark blue */
	width: 100%;
	height: 40px;
	font-size: 18px; /* larger font for easy navigation on mobiles */
}
@media all and (max-width: 430px) {
	nav {
		top: 70px;
	}
}

/* Strip the ul of padding and list styling*/
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;
	display: none; /* hide until shown by the menu button */

}
/*make menu links full width*/
nav li {
	display: inline-block; /* block will force a break after the min-width */
	width: 100%;
}

/*Style for main menu links*/
nav li a {
	display: block;
	min-width: 160px; /* strange: without this line the mobile menu is not full width */
	height: 35px;
	text-align: right;
	line-height: 35px;
	padding: 0px 15px 0px 15px; /* padding top-right-bot-left*/
	color: #FEFFFF; /* text in the main menu blocks */
	background: #034EA2; /* color of the bar behind the menu blocks: dark blue */
	text-decoration: none;
	border-top: 2px solid #41A9FE; /* light blue spacing between menu options */
	cursor: default; /* the main menu options are no links */
}

/*Hover state for top level links*/
nav li:hover a {
	background: #FEEE1A; /* hovering on main menu: yellow */
	color: #034EA2; /* text hovering on main menu: dark blue  */
}

/*Style for dropdown links*/
nav li:hover ul a {
	display: block;
	min-width: 150px;  /* this is excl the padding */
	height: 35px;
	text-align: right;
	line-height: 35px;
	padding: 0px 15px 0px 0px; /* padding top-right-bot-left*/
	text-decoration: none;
	border-top: 2px solid #41A9FE; /* light blue spacing between menu options */
	background: #FEEE1A;  /* color of the submenu blocks non-hovered: yellow*/
	color: #033975; /* text on sub menu: darker blue */
	opacity: 0.85; 
	cursor: pointer;
}

/*Hover state for dropdown links*/
nav li:hover ul a:hover {
	background: #41A9FE; /* color of the submenu blocks hovered: light blue*/
}

/*Hide dropdown links until they are needed*/
nav li ul {
	display: none;
}

/*Make dropdown links*/
nav li ul li {
	display: block; /* inline-block not permitted, to keep the main menu active */
}

/*Display the dropdown on hover*/
/*The original 3 lines below made Android 2.3 crash */
/*ul li a:hover + .hidden, .hidden:hover {*/
/*	display: block;*/
/*} */

/*Display the dropdown on hover*/
nav ul li:hover ul {
	display: block;
} 
nav .hidden:hover {
	display: block;
} 



/*Style 'show menu' label button (which is a checkbox) */
nav .show-menu {
	text-decoration: none;
	color: #FEFFFF; /* text in the main menu blocks */
	height: 25px;  /* plus 15 padding makes total height 40 */
	font-size: 18px;
	padding: 11px 15px 4px 15px; /* padding top-right-bot-left also needed to align the top of the mobile menu */
					/* lot of left padding for larger click area */
	text-align: right;
	display: block;
	white-space: nowrap;
}
/*Hide checkbox  ---  still needed despite the -9999 hiding trick below */
/*add NAV, otherwise all checkboxes will be hidden */
nav input[type=checkbox]{
	display: none;
}
/*Show menu when invisible checkbox is checked*/
nav input[type=checkbox]:checked ~ #menu{
	display: block;
}
/* Fix for Mobile menu on Android: tapping the menu button did not work */
body { 
	-webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix { 
	from { padding: 0; } 
	to { padding: 0; } 
}
/* hide the checkbox icon off-screen */
nav input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
nav label { 
	cursor: pointer;
/*	user-select: none; ?? */
 }

/* End of NAV MENU series of tags */



/* Start of CURRENT NAV status series of tags --------------------------------*/
/* not used in the mobile version */
#CurrentNavStatus {
	display: none;
}
#active-nav {
	display: none;
}
/* End of CURRENT NAV status series of tags */



/* Start of Social Media buttons status series of tags ------------------------*/
/* on mobiles no room on top of page for fixed position */
#socialmediabuttons {
	width: 100%;
	position: relative;
	top: 600px; /* position next to the content below the slideshow on main */
	text-align: right;
	/* these three lines center the content horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
	/* Z-index only for IMG tag does not work for Google Chrome */
	/* problem: this z-index will obscure part of the figcaption link. */
	/* solution: set visibility of this full-width tag to hidden. */
	z-index: 3; /* Z-index only works when 'position' is present */
	visibility: hidden;
}
@media all and (max-width: 430px) {
	#socialmediabuttons {
		top: 520px;
	}
}

#socialmediabuttons-position {
/* empty tag, needed to position the three buttons above one another */
}
#socialmediabuttons img {
	position: relative;
	z-index: 3; /* Z-index only works when 'position' is present */
	visibility: visible;
	/* three lines added after again using width and height in html to avoid CLS penalties */
	/* this tag is used only for the social media buttons: each 50 x 50 pixels. */
	object-fit: contain;
	aspect-ratio: 1 / 1;
	height: auto;
}
/* make social media buttons respond to hovering */
.button {
	opacity: .85;
}
.button:hover {
	opacity: 1;
}
/* End of Social Media buttons status series of tags*/


/* not used in the mobile version */
aside {
	display: none;
}


/* main   --------------------------------------------------------------*/
#below-menu {
	position: absolute;
	top: 140px;
	background-color: #EEEEEE;
	width: 100%;
	/* these three lines center the block horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
}
@media all and (max-width: 430px) {
	#below-menu {
		top: 110px;
	}
}


/* Start of SlideShow series of tags --------------------------------*/
.Slideshow{
	position: relative;
	display: block;
	overflow: hidden;
}
.Slideshow figure{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	opacity: 0;
	transition: 2s opacity;
}
.Slideshow img{
	width: 100%; /* for the image to scale down in smaller container */
	/* three lines added after again using width and height in html to avoid CLS penalties */
	object-fit: contain;
	aspect-ratio: 2 / 1;
	height: auto;
}
.Slideshow figcaption{
	text-decoration: none;
	position: absolute;
	font-size: 18px;
	font-weight: bold;
	text-align: right;
	bottom: 10px;
	right: 10px;
	max-width: 50%; /* Google translate sometimes removes the line breaks in the caption text */
	padding: 5px;
	color: #FFFF00; /* text in yellow */
	background: rgba(65,169,254, .6); /* this is #41A9FE (light blue) plus alpha channel */
	border-radius: 2px;
	opacity: .9;
}
@media all and (max-width: 430px) {
	.Slideshow figcaption{
		font-size: 16px;
	}
}
@media all and (max-width: 350px) {
	.Slideshow figcaption{
		font-size: 14px;
	}
}
.Slideshow figcaption:hover{
	opacity: 1;
}
.Slideshow figcaption a {
	text-decoration: none;
	color: #FFFF00; /* text in yellow */
	display: block;/* make complete figcaption area clickable */
}
.Slideshow figure.show{
	opacity: 1;
	position: static;
	transition: 2s opacity;
}
.next, .prev, .start, .stop{
	position: absolute;
	z-index: 1;
	margin-top: -10px;
	padding: 0px 0px 0px 0px;
	opacity: .8;
/*	user-select: none;  ?? */
}
.next:hover, .prev:hover, .start:hover, .stop:hover{
	cursor: pointer;
	opacity: 1;
}
.next{
	right: 0;
}
.prev{
	left: 0;
}
.start{
	left: 0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	display: none;
}
.stop{
	left: 0;
	right:0;
	margin-left: auto;
	margin-right: auto;
}
/* End of SlideShow  series of tags */


/* Start of general series of tags --------------------------------*/
#home-content {
	position: relative;
	background-color: #EEEEEE;
	width: 92%;
	top: 10px;
	color:#033C7D; /* text color : a bit darker blue than the navigation bar*/
	/* these three lines center the block horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
}
#content {
	position: relative;
	background-color: #EEEEEE;
	width: 92%;
	padding: 4%;
	color:#033C7D; /* text color : a bit darker blue than the navigation bar*/
}
#content em {
	color:#033C7D; /* same color as normal text*/
	background: #FEFF91; /* a very light yellow background */
	font-weight: bold;
	font-style: normal; /* so not italic */
}
#content a:link {
	color:#3131BD; /* a bit less saturation than standard links */
}
#content a:visited {
	color:#551A8B; /* default for standard links */
}
#content a:hover {
	background: #FEFF91; /* a very light yellow background */
}
/* lists are used to navigate the page: for mobile these need to be large to allow selecting */
#content li a {
	font-size: 150%;
}
#content  img {
	/* needed to make the border exactly fit, if not some white will be added below */
	/* This will also prevent a light yellow background when hovering a link image */
	/*display: block; -- not used for all images as that would make in-line display impossible */

	/*max-width: 100%;  Prevents an image to be displayed wider than its container (the worldmap) */
	/* removed as this will override IMG settings in the style-forum.css stylesheet. */
}

.column {
	width: 100%;
}
.spacing {
	width: 100%;
}
.doublecolumn {  /* for non-mobile 65%:width equals two columns plus one spacing */
	width: 100%;
	float: left;
}
.doublecolumn em {
	color:#033C7D; /* same color as normal text*/
	background: #FEFF91; /* a very light yellow background */
	font-weight: bold;
	font-style: normal; /* so not italic */
}
.doublecolumn a:link {
	color:#3131BD; /* a bit less saturation than standard links */
}
.doublecolumn a:visited {
	color:#551A8B; /* default for standard links */
}
.doublecolumn a:hover {
	background: #FEFF91; /* a very light yellow background */
}
/* lists are used to navigate the page: for mobile these need to be large to allow selecting */
.doublecolumn li a {
	font-size: 150%;
}
.column-downloadbutton {  /* different name: only used on home page*/
	display: none
}
table.intro td {  /* On mobile set the review button below the introduction text*/
	display: block;
}
table.intro td img { 
	display: block;
	margin-right: auto;  /* center the image */
	margin-left: auto;
}
p.clear-floats {
	clear: both; /* close all open columns, to start again on a fresh horizontal line */
}

p.headline {
	font-size: 120%;
	font-weight: bold;
}
p.red-headline {
	color: #D6492F; /* same red as the video-pause button */
/*	font-size: 150%;  sept 17 replaced by H1 tag
	font-weight: bold;
	margin-top: 8px;
	margin-bottom: 5px; */
}
p.navigation-path {
	color: #6C6C6C; 
	font-size: 120%;
	font-weight: bold;
	margin-top: 8px;
	margin-bottom: 5px;
	margin-left: 2px;
}
/* Old code uses class, new code (with link) used id, both in CSS file */
#navigation-path {
	color: #6C6C6C; 
	font-size: 120%;
	font-weight: bold;
	margin-top: 8px;
	margin-bottom: 5px;
	margin-left: 2px;
}
#navigation-path a:link {
	color: #6C6C6C;  /* same as rest of line */
}
#navigation-path a:visited {
	color:#6C6C6C; /* same as rest of line */
}
#navigation-path a:hover {
	background: #FEFF91; /* a very light yellow background */
}

li.nobullet {
	list-style-type: none; /* Remove the bullet: used for 'headers' in an unsigned list */
}


/* the three tags below are only used on the home page */
.window {
	/*border: 1px solid;*/
	border-radius: 2px;
	background-color: #FFFFFF;
	overflow-x: hidden;
	width: 100%;
	max-width: 250px;
	left: 0;   /* these three lines center the content horizontally */
	right: 0;
	margin: 0 auto;
}
.window img {
	display: block;  /* needed to make the border exactly fit, if not some white will be added below */
	width: 100%;
	max-width: 250px;
	/* three lines added after again using width and height in html to avoid CLS penalties */
	/* this tag is used only for three images on the home page: each 274 x 160 pixels. */
	object-fit: contain;
	aspect-ratio: 274 / 160;
	height: auto;
}
.window-title {
	text-decoration: none;
	text-align: center;
	padding: 6px 0px 4px 0px; /* padding top-right-bot-left */
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #FEFFFF; /* text in the main menu blocks */
	white-space: nowrap;
	height: 18px; /* Width and height of top-level nav items */
	width: 100%;
}
.window-title a {
	text-decoration: none;
	text-align: center;
	padding: 6px 0px 4px 0px; /* padding top-right-bot-left */
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #FEFFFF; /* text in the main menu blocks */
}
.window:hover .window-title, .window:hover a {
	background: #0568D7; /* hovering on link: a bit lighter blue */
}

/* End of home page series of tags */


.illustration-block {
	/*border: 1px solid;*/
	border-radius: 2px;
	overflow-x: hidden;
	width: 100%;
}
.illustration-block img { 
	display: block; /* needed to make the border exactly fit, if not some white will be added below */
	left: 0;   /* these three lines center the content horizontally */
	right: 0;
	margin: 0 auto;
	max-width: 100%; /* scale down only in case he image is smaller than the screen. */
	height: auto;
}
.illustration-block video { 
	display: block; /* needed to make the border exactly fit, if not some white will be added below */
	left: 0;   /* these three lines center the content horizontally */
	right: 0;
	margin: 0 auto;
	max-width: 100%; /* scale down only in case he image is smaller than the screen. */
	height: auto;
}
.leftside { 
/* no left and right images on mobile: all in 1 column */
	max-width: 100%; /* needed for max width in the video tag */
}
.leftside-not-on-mobile { 
/* do not show in the mobile version */
	display: none;
}
.rightside { 
	max-width: 100%; /* needed for max width in the video tag */
	margin-top: 5px; /* margin between the left and right pictures in the column */
}
video {
	max-width: 100%;
	height: auto;
}
.rightside-youtube { 
	float: right;
	font-size: 80%; /* text below YouTube image on video pages */
	padding: 0px 0px 5px 10px; /* padding top-right-bot-left */
}
.vert-align {
	display: none;
}
.illustration-block-title {
	text-decoration: none;
	text-align: center;
	padding: 6px 2px 4px 2px; /* padding top-right-bot-left */
	-moz-box-sizing:border-box; /* prevent that left and right padding make the box wider */
	-webkit-box-sizing:border-box; 
	box-sizing:border-box;
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #FEFFFF; /* text in the main menu blocks */
	height: auto; /* Width and height of top-level nav items */
	width: 100%;
}

/* no markup needed for mobile version */
.left-floated-image {
}
.right-floated-image {
}

.commented-illustration-block {
	/*border: 1px solid;*/
	border-radius: 2px;
	overflow-x: hidden;
	width: 100%;
}
.commented-illustration-block img { 
	display: block; /* needed to make the border exactly fit, if not some white will be added below */
	left: 0;   /* these three lines center the content horizontally */
	right: 0;
	margin: 0 auto;
	max-width: 100%; /* scale down only in case he image is smaller than the screen. */
	height: auto;
}
.commented-illustration-block-title {
	text-decoration: none;
	text-align: center;
	padding: 6px 2px 4px 2px; /* padding top-right-bot-left */
	-moz-box-sizing:border-box; /* prevent that left and right padding make the box wider */
	-webkit-box-sizing:border-box; 
	box-sizing:border-box;
	background: #BDEEFF; /* very light blue background, text same color as on white */
	height: auto; /* Width and height of top-level nav items */
	width: 100%;
}


.comparisontable {
	width: 100%;
	background: #DDEEFF; /* light blue 1 */
	border-style: solid;
	border-width: 1px;
	border-color: #034EA2;
	padding: 0;
	margin: 0;
	border-spacing: 0;
	border-collapse: collapse;
}
.comparisontable td, .comparisontable th {
	padding: 4px 5px 2px 5px; /* padding top-right-bot-left */
	border-style: solid;
	border-width: 1px;
	border-color: #034EA2;
}
.comparisontable th {
	background: #DDDDDD; /* light grey */
}
.comparisontable tr:nth-child(odd) td{
	background: #C9E4FF; /* light blue 2: alternate per row. */
}
.comparisontable img{
	display: block;
	margin-right: auto;  /* center the images */
	margin-left: auto;
}


.languagetable {
	width: 100%;
	background: #DDEEFF; /* light blue 1 */
	border-style: solid;
	border-width: 1px;
	border-color: #034EA2;
	padding: 0;
	margin: 0;
}
@media all and (max-width: 430px) {
	.languagetable {
		font-size: 80%;  /* the longest word in each table cell will prevent making the table smaller */
	}
}
.languagetable  img {
	max-width: 100%;
	object-fit: contain;
	height: auto;
}
.languagetable td {
	width: 20%;
	vertical-align: top;
}


.pricetable {
	width: 100%;
	background: #DDEEFF; /* light blue 1 */
	border-style: solid;
	border-width: 1px;
	border-color: #034EA2;
	padding: 0;
	margin: 0;
	border-spacing: 0;
	border-collapse: collapse;
}
.pricetable th, .pricetable td {
	vertical-align: top;
	padding: 4px 4px 2px 4px; /* padding top-right-bot-left */
	border-style: solid;
	border-width: 1px;
	border-color: #034EA2;
}
.pricetable th.pr-prod, .pricetable td.pr-prod {
	width: 55%;
	text-align: left;
}
.pricetable th.pr-pric, .pricetable td.pr-pric {
	width: 15%;
	text-align: center;
}
.pricetable th.pr-shop, .pricetable td.pr-shop {
	width: 15%;
	text-align: center;
}
.pricetable td.pr-shop img {
	width: 100%;
	max-width: 50px;
}
.pricetable td.pr-matrix-pric {
	background: #EBF5FF; /* lighter blue */
	text-align: center;
}
.pricetable td.pr-matrix-pric-newblock {
	background: #EBF5FF; /* lighter blue */
	text-align: center;
	border-top-width: 2px;
}
.pricetable td.pr-matrix-nope {
	background: #FFC0C0; /* light red */
}
.pricetable td.pr-matrix-default {
	background: #C0FFC0; /* light green */
	text-align: center;
}
.pricetable th.pr-matrix-head, td.pr-matrix-head {
	background: #DDDDDD; /* light grey */
}
.pricetable td.pr-matrix-head-newblock {
	background: #DDDDDD; /* light grey */
	border-top-width: 2px;
}


.gallery-block {
	width: 100%;
}
.gallery-block figure { 
	padding: 0;
	margin: 0;
	position: relative;
}
.gallery-block img{ 
	display: block; /* needed to make the border exactly fit, if not some white will be added below */
	padding: 4px 15px 4px 15px; /* padding top-right-bot-left */
	overflow-x: hidden;
}
.gallery-block figcaption{ 
	position: absolute;
	left: 130px;
	bottom: 4px;
	font-size: 12px;
	padding: 4px 4px 4px 4px; /* padding top-right-bot-left */
	overflow-x: hidden;
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #FEFFFF; /* text in the main menu blocks */
	white-space: nowrap;
	height: 14px; /* Width and height of top-level nav items */
	width: 130px; /* this is excl the padding pixels */
	border-radius: 2px 2px 2px 2px; /* top-left, top-right, bottom-right, bottom-left */
}
.gallery-block figure:hover  figcaption {
	background: #0568D7; /* hovering on link: a bit lighter blue */
}
.gallery-block figure:hover  img {
	background: #FEFF91; /* hovering on link: very light yellow */
}
.gallery-references {
	display: none
}

.top-of-page-button {
	position: absolute;
	padding:  0 4%;  /* vertical 0, horizontal 4% to match the containing div (content) */
	right: 0;
}

/* display the correct image for the Shopping cart button: desktop or mobile. */
.CartIcon-desktop {
	display: none;
}
.CartIcon-mobile {
}


/* The thematic break tag (or 'horizontal ruler') is used in the Dealer list and... */
/* This strange css is needed to simply set the color of the horizonal line */
hr {
	background-color: #0568D7;
	height: 1px;
	border: 0;
}

.links-table {
	width: 100%;
	padding: 0;
	margin: 0;
	border-spacing: 0;
	border-collapse: collapse;
}
.links-table th, .links-table td {
	vertical-align: top;
	padding: 5px 3px 5px 3px; /* padding top-right-bot-left */
	text-align: left;
}
/* for mobile screens force the table NOT to behave like a table by setting BLCOK mode */
.links-table, .links-table th, .links-table th, .links-table td, .links-table tr { 
	display: block; 
}


.news-table {
	width: 100%;
	padding: 0;
	margin: 0;
	border-spacing: 0;
	border-collapse: collapse;
}
.news-table th, .news-table td {
	vertical-align: top;
	padding: 5px 10px 15px 10px; /* padding top-right-bot-left */
	text-align: left;
/*	height: 150px; May 16 replaced by extra botton padding */
}
.news-table th.nw-image, .news-table td.nw-image{
	width: 30%;
}
.news-table th.nw-text, .news-table td.nw-text {
	width: 70%;
}


.search-table {
	width: 100%;
	padding: 0;
	margin: 0;
}
.search-table td {
	padding: 5px;
	vertical-align: top;
}
.search-table td input.terms {
	width: 100%;
}


.download-table {
	border-style: solid;
	border-color: #0099FF;
	border-width: 1px;
	background-color: #DDEEFF;
	width: 100%;
	padding: 5px 5px 3px 3px; /* padding top-right-bot-left */
	margin: 0;
}
.download-table td {
	/*vertical-align: top;*/
	padding: 5px;
}
.download-table td.label {
	width: 40%;
}
.download-table td.input {
}
.download-table td input.terms {
	width: 100%;
}
.download-table td.checkbox {
	background-color: #FEFFB9; /* a very light yellow background */
	background-clip: content-box;
}
.downloadscript-button {
	max-width: 100%;
	float: right;
	opacity: .85;
	white-space: normal;  /* this will make the text on the button wrap in case too long */
}
.downloadscript-button:hover {
	opacity: 1;
}


.worldmap img{
	max-width: 100%;
}


/* End of general series of tags */


/* Start of Footer series of tags --------------------------------*/
/* the footer must be within the Main tag to be positioned at the bottom of the page */
footer {
	width: 100%;
	background-color: #FFFFFF;
	/* these three lines center the content horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
}

#footer-bar {
	background-color:#034EA2; /* color of the bar behind the menu blocks: dark blue */
	width: 100%;
	height: auto;
}

#footer-menu {
	width: 100%;
}
#footer-menu ul {
	font-size: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
#footer-menu a {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	padding: 6px 0px 4px 0px; /* padding top-right-bot-left */
	line-height: 200%;
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #E7ECF9; /* text in the footer bar */
}
#footer-menu ul li {
	display: inline-block;
	width: 100px;
}
#footer-menu ul li:hover, #footer-menu ul li:hover a {
	background: #0568D7; /* hovering on link: a bit lighter blue */
}
#footer-menu ul li a:hover {
	background: #0568D7; /* hovering on link: a bit lighter blue */
}

#footer-button{
	text-align: center;
	padding: 10px 0px 0px 0px; /* padding top-right-bot-left */
	background-color:#FFFFFF;
}
#footer-quote{
	text-decoration: none;
	text-align: center;
	padding: 10px 0px 4px 0px; /* padding top-right-bot-left */
	background-color:#FFFFFF;
	color: #034EA2; /* text in dark blue */
	width: 100%;
/*	padding: 2%;*/
	height: 18px;
}
/* End of Footer series of tags */