* { -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0 auto; }
html, body {
	margin: 0; padding: 1px; width: 100%; height: 100%;
	top: 0px !important;
	font-family: 'Open Sans', arial, helvetica, sans-serif;
	font-size: 16px;
	/*overflow: hidden;*/
}
a { color: #888; }
h2 { padding-bottom: 1%; color: #333; font-size: 1.5em; }
h3 { padding-bottom: 1%; color: #333; font-size: 1.2em; }
ul { list-style: none; }
small { font-size: 75%; }
.clear { clear: both; }
.clear2 { clear: both; height: 2vh; min-height: 2em; /*transition: height 1s;*/ }
.clear4 { clear: both; height: 4vh; min-height: 4em; /*transition: height 1s;*/ }
.clear6 { clear: both; height: 6vh; min-height: 6em; /*transition: height 1s;*/ }

#wrapper { position: relative; width: 100%; }
#mask {
	position: fixed; height: 100%; width: 100%;
	background-color: rgba(255,255,255,0.9);
	z-index: 50;
}

/* ---------------------------------------------------------------------
--------------------   COMMON HEADER    ----------------------
--------------------------------------------------------------------- */
.skiptranslate { display: none !important; }
#commonHeader { position: relative; padding: 1vh 2% 0; width: 100%; }
/* LOGO */
#mainLogo, #mainLogoMobile { float: left; margin-left: 3%; width: 20%; max-width: 157px; cursor: pointer; }
#mainLogoMobile { display: none; }
#mainRightLogo { display: none; }
#headerMessage, #headerMessageMobile {
	padding-top: 1em; width: 50%;
	font-family: arial; color: #888; font-size: 2.2em;
	text-shadow: 2px 2px 2px rgb(162,162,162);
	text-transform: uppercase;
	line-height: 1.2; text-align: center;
}
#headerMessageMobile {
	display: none; padding-top: 0.5em; width: 100%;
	font-size: 2.1em;
}
#backButton, #homeButton {
	position: relative; float: right; margin: 1em;
	width: 6%; max-width: 60px; min-width: 36px;
	background-color: #00A1CE; /*box-shadow: 0 0 0.8em 0 rgba(0,0,0,0.4);*/
	cursor: pointer;
}

/* FLAGS */
#langsButton,
#homeButton { box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.4); }
#translationsButtons {
	position: relative; float: right; margin: 1em 1em 0 1em;
	width: 6%; max-width: 60px; min-width: 36px;
	/*box-shadow: 0 0 0.8em 0 rgba(0,0,0,0.4);*/
}
#langsButton:hover,
#backButton:hover,
#translationsButtons:hover, #homeButton:hover { box-shadow: none; }
#translationsButtons img { display: block; width: 100%; height: auto; cursor: pointer; }
#flagsDiv {
	position: absolute; display: none; z-index: 100;
}
#flagsDiv img {
	margin-top: 0.5em; vertical-align: bottom;
	background-color: #FFF;
	box-shadow: 0 0 1em 0 rgba(0,0,0,0.5);
	border: 0.4em solid #FFF;
}
#flagsDiv img:hover { box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.2); }

/************ GOOGLE TRANSLATE ************/
.goog-te-banner-frame.skiptranslate {
	display: none !important;
}
div#google_translate_element {
	display: none; float: right; margin: 0.5em 0em 0.5em 1em;
}
#googleTranslateAttribution {
	position: absolute; bottom: 0px; right: 3%;
	color: #555; font-size: 0.8em;
}
#googleTranslateAttributionMobile {
	display: none; padding: 0 1em 1em 1em;
	color: #555; font-size: 0.8em; text-align: right;
}
#googleTranslateAttribution img,
#googleTranslateAttributionMobile img { max-height: 40px; vertical-align: middle; }


/* ---------------------------------------------------------------------
---------------------  MATERIAL ICONS    --------------------
--------------------------------------------------------------------- */
.material-icons { vertical-align: middle; }


/* ---------------------------------------------------------------------
----------------------------   MENU    ------------------------------
--------------------------------------------------------------------- */
#menuContainer {
	display: none; position: relative; float: right; margin-top: 1em;
}
#menuButton {
	display: inline-block; padding: 0.6em 2em;
	background: #777; color: #FFF;
	cursor: pointer;
}
#menuContainer img { display: block; width: 100%; height: auto; cursor: pointer; }
#menuDiv {
	position: absolute; right: 0; display: none; width: auto;
	background: #FFF;
	box-shadow: 0 0 1em 0 rgba(0,0,0,0.4);
	z-index: 50;
}
#menuList li { padding: 1.5em; border-bottom: 1px dotted #CCC; white-space: nowrap; cursor: pointer; }
#menuList li.current, #menuList li:hover { background: #777; color: #FFF; }

/* ---------------------------------------------------------------------
--------------------   COMMON FOOTER    ----------------------
--------------------------------------------------------------------- */
#commonFooter {
	padding: 0vh 2%; width: 100%;
	text-align: center;
}

/* ---------------------------------------------------------------------
--------------------------   COLUMNS    ---------------------------
--------------------------------------------------------------------- */
#leftColumn { float: left; width: 20%; padding: 1% 2%; min-height: 64vh; /*transition: width 1s;*/ }
#centerColumn { position: relative; display: inline-block; width: 60%; margin-top: 0; padding: 0 2%; overflow-y: auto; /*transition: width 1s;*/ }
#rightColumn { float: right; width: 20%; padding: 1% 2%; /*transition: width 1s;*/ }

#mainHeading {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background-size: cover;
	border: 1px solid grey;
}

/* ---------------------------------------------------------------------
---------------------------   BUTTONS    ---------------------------
--------------------------------------------------------------------- */
/*
<div class="bigButtonWrapper">
	<div class="button bigButton">
		<div class="buttonLabel bigButtonLabel">label</div>
	</div>
</div>
*/
.button {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background-size: cover;
	box-shadow: 0 0.2em 0.8em 0 rgba(0,0,0,0.4);
	cursor: pointer;
}
.buttonLabel {
	position: absolute; bottom: 0;
	width: 100%; height: auto;
	background-color: rgba(0,0,0,0.7); color: #FFF;
	font-size: 1.1em; text-align: center; text-transform: uppercase;
}

/* SIDE COLUMNS BUTTONS */
.bigButtonWrapper {
	position: relative; padding-bottom: 13vh; margin-bottom: 2vh; min-height: 8em;
}
.bigButton {}
.bigButtonLabel { padding: 2%; }

.longBigButtonWrapper {
	position: relative; padding-bottom: 27vh; margin-bottom: 2vh; min-height: 8em;
}
.longBigButton {}
.longBigButtonLabel { padding: 6% 4%; }

/* CENTER COLUMN BUTTONS */
.longButtonWrapper {
	position: relative; padding-bottom: 21vh; margin-bottom: 2vh; min-height: 8em;
}
.longButton {}
.longButtonLabel { padding: 1% 2%; }
.medButtonWrapper {
	display: inline-block; position: relative; padding-bottom: 16vh; margin-bottom: 2vh;
	min-height: 8em; width: 49.5%;
}
.medButton {}
.medButtonLabel { padding: 2%; }

/* DISABLED */
.disabled { box-shadow: none; cursor: default; }
.disabled .buttonLabel { bottom: 1em; background-color: #9AC051; }
/* HIDE LABEL */
.noLabel .buttonLabel { display: none; }
/* INSET SHADOW */
.insetShadow, .insetShadow:hover { box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.4) !important; }
#centerColumn h2 { cursor: pointer; }

input[type="button"] {
    padding: 0.8em 1.5em;
	font-size: 1em; color: #FFF;
	background: #777; border: none;
}

/* HOVER */
.button:hover { box-shadow: none; }
.button:hover .bigButtonLabel,
.button:hover .longButtonLabel,
.button:hover .medButtonLabel {
	background-color: rgba(0,0,0,0.9);
}

/* HIGHLIGHTED */
.highlightedButton {
	height: 100% !important;
	background-size: contain !important;
	box-shadow: none !important;
}
.highlightedButton .bigButtonLabel {
	background-color: rgba(164,0,0,1);
}

#buttonHebergements { background-image: url(img/button-accommodations.jpg); }
#buttonAgenda { background-image: url(img/button-events.jpg); }
#buttonLoisirs { background-image: url(img/button-loisirs.jpg); }
#buttonInfosPratiques { background-image: url(img/button-infos.jpg); }
#buttonPlan { background-image: url(img/button-map.png); }
#buttonVue360 { background-image: url(img/button-360-view.jpg); }
#buttonVotreCarnetDeVoyage { background-image: url(img/button-travelbook.jpg); }
#buttonVotreCarnetDeVoyage img { width: 36%; max-width: 60px; }
#buttonSmartphoneApp { background-image: url(img/button-smartphone.jpg); }

#buttonEscaleNautique { background-image: url(img/button-escale-nautique.jpg); }
#buttonEscaleCulture { background-image: url(img/button-escale-culture.jpg); }
#buttonEscaleSaveurs { background-image: url(img/button-escale-saveurs.jpg); }
#buttonEscaleNature { background-image: url(img/button-escale-nature.jpg); }
#buttonItineraireOdyssea { background-image: url(img/button-itinerary-odyssea.jpg); }

.button:hover .bigButtonLabel,
.button:hover .longButtonLabel,
.button:hover .medButtonLabel {
	background-color: #9AC051;
}

.current { box-shadow: none; }
.current .buttonLabel {
	background-color: #9AC051;
}

/* BOOKMARKS */
#bigButtonVotreCarnetDeVoyage img {
	position: absolute; right: 0; width: 30%; max-width: 54px; min-width: 40px;
}
#bookmarksButtons { margin-bottom: -1.5em; height: auto; text-align: right; }
.bookmarkButton {
	margin: 0 0 0.5em 0.5em; width: 7%; max-width: 60px; min-width: 40px; height: auto;
	box-shadow: 0 0 0.4em rgba(0,0,0,0.4);
}
.bookmarkButton:hover { box-shadow: none; }

/* ---------------------------------------------------------------------
-----------------------   TABLES INFO    -------------------------
--------------------------------------------------------------------- */
table.infoTable { margin-bottom: 1%; width: 100%; }
table.infoTable td {
	padding: 0.3em 0.5em 0.4em;
	font-size: 1em; line-height: 1.7;
	vertical-align: top;
	border-bottom: 1px solid #C0C0C0;
}
table.infoTable td.header {
	padding: 0.4em 0 0.4em;
	background: #000000;
	color: #FCFCFC; font-size: 1em;
	text-align: center; text-transform: uppercase;
	border-bottom: none;
}
table.infoTable td.sub-header {
	padding: 0.4em 0 0.4em;
	background: #AAA;
	color: #FFF; font-size: 1em; text-align: center;
	border-bottom: none;
}
table.infoTable td.nameColumn { width: 200px; visibility: hidden; display: none; border: 0; }
table.infoTable td.addressColumn { visibility: hidden; display: none; border: 0; }
table.infoTable td.telNumberColumn { width: 120px; visibility: hidden; display: none; border: 0; }
table.infoTable td.timeColumn { width: 40px; visibility: hidden; display: none; border: 0; }
table.infoTable tr:last-child td,
td.borderless {
	border: none !important;
}

/* MAP STUFF */
#mapBackButton {
	position: fixed; left: 2em; top: 2em;
	width: 8%; height: auto; max-width: 60px;
	box-shadow: 0 0 0.8em 0 rgba(0,0,0,0.4);
}

/* ---------------------------------------------------------------------
----------------------------   FOOTER    ---------------------------
--------------------------------------------------------------------- */
#footerLogos { width: 70%; max-width: 916px; min-width: 300px; }
#logoEuropeForCulture { margin: 1em 0; width: 10%; }

/* ---------------------------------------------------------------------
----------------------   MARKERS LIST    ------------------------
--------------------------------------------------------------------- */
#markersList, .markersList { position: relative; height: auto; overflow-y: auto; }
#markersList a, .markersList a { text-decoration: none; }
#markersList li, .markersList li { cursor: pointer; }
#markersList li:after, .markersList li:after {
	content: '';
	display: block;
	clear: both;
}
.menuCategory, .menuCategoryAlt {
	margin-bottom: 0.8em; padding: 0.7em;
	color: #FFF; font-size: 1.2em;
	background: #048CCA;
	box-shadow: 0 2px 2px rgba(0,0,0,0.5);
	cursor: pointer;
}
.menuCategory:hover, .menuCategoryAlt:hover {
	box-shadow: none;
}
.categorySmallIcon {
	margin-right: 0.5em; vertical-align: middle;
}
div.thumbed, li.thumbed {
	margin: 0 0.5em; padding: 0.5em 0 1em;
	height: auto; min-height: 6.5em;
	border-bottom: 1px dotted #A0A0A0;
	clear: right;
}
div.notThumbed, li.notThumbed {
	margin: 0 0.5em; padding: 0.5em 0;
	height: auto; min-height: 6.5em;
	border-bottom: 1px dotted #A0A0A0;
	clear: right;
}
li:last-child { border-bottom: none; }
.thumbnail, .thumbnailOver {
	float: left; height: auto;
	margin: 0 0.9em 0.5em 0;
	width: 20%; max-width: 160px; min-width: 73px;
}
.markerInfo {
	display: block; margin-top: 0.4em;
	white-space: normal; width: 100%;
	color: #333333; font-size: 0.9em; line-height: 1.2;
}
.groupNameRow {
	padding: 0.7em;
	margin: 0.5em 0 0.8em;
	background-color: #CE5D00; color: #FFF;
	font-size: 1.4em;
	text-align: center; text-transform: uppercase;
	border-radius: 6px;
	box-shadow: 0 0.2em 0.5em 0 rgba(0,0,0,0.4);
	cursor: pointer;
}
.groupNameRow:hover { background-color: #E2A619; box-shadow: none; }
.townsGroup { display: none; }
.townNameRow {
	padding: 0.7em; margin-bottom: 0.7em;
	background-color: #444 /*#CE5D00*/; color: #FFF;
	font-size: 1.2em; text-align: center; text-transform: uppercase;
	box-shadow: 0 0.2em 0.8em 0 rgba(0,0,0,0.4);
	cursor: pointer;
}
.townNameRow.even { background-color: #666; }
.townNameRow:hover { background-color: #E2A619; box-shadow: none; }
.townCategoriesContainer { display: none; }
.noResultsRow {
	padding: 0.7em;
	margin-bottom: 0.7em;
	background-color: #CE5D00; color: #FFF;
	font-size: 1.4em;
	text-align: center; text-transform: uppercase; font-style: italic;
}
#itineraireOdysseaDesc {
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 1px dotted #CCC;
}
#pageDesc {

}
#pageDesc font { /* FOR GOOGLE TRANSLATION */
	display: block;
	margin-bottom: 1em;
}

/* ---------------------------------------------------------------------
----------------------   TRAVELBOOK    -----------------------
--------------------------------------------------------------------- */
#emptyTravelbookMessage {
	margin: 2vh 0; padding: 2vh;
	border: 1px dotted #AAA;
}
#emailTravelbook {
	position: fixed; margin: auto; top: 0; right: 0; bottom: 0; left: 0;
	width: 40%; min-width: 240px; height: 25%;
	background-color: #FFF;
	box-shadow: 0 0 2em 0em rgba(0,0,0,0.2);
	z-index: 100;
}
#emailTravelbook .closeButton { margin: 0.5em; }
#emailTravelbookHeader { padding: 2em; }
#emailTravelbook fieldset {
	padding: 2em; width: 100%;
	background: #FFF;
	border: none; border-top: 1px dotted #AAA;
	line-height: 2.5;
}
#submitButtonDiv { margin-top: 1em; text-align: center; clear: both; }

/* ---------------------------------------------------------------------
-------------------------    QRCODE    --------------------------
--------------------------------------------------------------------- */
#QRcodePopup {
	position: fixed; margin: auto; top: 0; right: 0; bottom: 0; left: 0;
	padding: 2em; width: 52%; min-width: 320px; height: 50%; min-height: 480px;
	text-align: center;
	background-color: #FFF;
	box-shadow: 0 0 2em 0em rgba(0,0,0,0.2);
	z-index: 100;
}
#QRcodePopup h3 { margin-bottom: 1em; clear: both; }
#QRcodeImg { margin: 0 -2em; padding: 2em; background: #FFF; }
.closeButton {
	float: right; padding: 0.1em 0.5em; margin: -0.5em -0.5em 0.5em 0;
	color: #FFF; font-size: 2em;
	background-color: #B02000;
	cursor: pointer;
}

/* ---------------------------------------------------------------------
-------------    GEOLOCATED MARKERS LIST    -------------
--------------------------------------------------------------------- */
#popup {
	display: none; position: fixed; top: 0; left: 0;
	width: 100%; height: 100%; z-index: 100;
	color: #333; background: rgba(0,0,0,0.8);
	font-size: 12px;
}
#popupClose {
	height: 2px;
}
#popupList {
	position: absolute; top: 15%; left: 0; right: 0;
	width: 310px; max-height: 70%;
	padding: 1.5em;
	background: rgba(255,255,255,1);
	overflow-y: auto;
}
#popupList li:after {
	content: '';
	display: block;
	clear: both;
}
#popupList i.material-icons {
	font-size: 32px; background: #FFF; border-radius: 24px;
	float: right;	margin: -14px -16px;
	cursor: pointer;
}
#popupMessage {
	padding: 1em;
	background-color: #C05950; color: #FFF;
	border-radius: 8px;
}
#popupList h4 {
	padding: 0.5em 0.8em; margin-top: 1em;
	background-color: #9AC051; color: #FFF;
	font-size: 1.1em; font-weight: normal;
}
#popupList .markerThumbnail {
	width: 100%;
}
#popupList .maincontent { padding: 1em 0; }
#popupList p { margin-top: 0.5em; }
#popupList .markerButton {
	float: right; margin-top: 1em; padding: 6px;
	max-width: 38px;
	background-color: #4078B0;
	cursor: pointer;
	box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3);
}
#popupList .markerButton:hover { box-shadow: none; }
audio { margin: 1em 0; max-width: 100%; }
/* VIDEOTHEQUE PLAYER */
.videoDiv {
	position: relative; display: block; margin-bottom: 0.6em; width: 100%;
}
iframe.videoPlayer { width: 100%; height: 100%; }

/* ---------------------------------------------------------------------
---------------------------    PRINT    ------------------------------
--------------------------------------------------------------------- */
#printTravelbook { padding: 1em; }
#printTravelbook .menuCategory, #printTravelbook .menuCategoryAlt {
  margin: 1em 0 0.5em 0; padding: 0.5em;
  color: #000; font-size: 1.4em;
  box-shadow: none;
  background-color: #FFF;
  border-bottom: 1px solid #CCC;
  cursor: default;
}
#printTravelbook a { color: #000; text-transform: uppercase; }
#printTravelbook p { page-break-inside: avoid; page-break-before: auto; }
#printTravelbook span { font-size: 0.9em; }

/* ---------------------------------------------------------------------
--------------------    MS TRANSLATOR    -----------------------
--------------------------------------------------------------------- */
#MicrosoftTranslatorWidget, #MSTWContent { display: none !important; }
#printgoogleTranslateAttribution {
	position: relative; float: right; padding-top: 0.6em;
	font-size: 0.5em; font-weight: 400;
}
#printgoogleTranslateAttribution img { vertical-align: middle; width: 20px; }

/* ---------------------------------------------------------------------
-----------------------------    MAP    -----------------------------
--------------------------------------------------------------------- */
#mapImg { height: 100vh; }

/*****************************************/
/********** MEDIA QUERIES ***********/
/*****************************************/
@media only screen and (max-width: 720px){
	#headerMessage { display: none; }
	#headerMessageMobile { display: block; }
	#mainLogo { display: none; }
	#mainLogoMobile { display: inline-block; }
	#homeButton { display: none; }
	#menuContainer { display: block; }
	#translationsButtons img { height: 2.5em; }
	#flagsDiv img { border: 1px solid #DDD; }
	#googleTranslateAttribution { bottom: -4em; }
	#leftColumn { float: left; width: 50%; min-height: 50vh; padding: 2%; }
	#centerColumn { float: none; width: 100%; padding: 2%; }
	#rightColumn { float: right; width: 50%; padding: 2%; }
	#bigButtonTravelbook img { max-width: 50px; }
	.longButtonWrapper { min-height: 12em; }
	.medButtonWrapper { min-height: 10em; }
	.bigButtonWrapper { min-height: 10em; }
}
@media only screen and (max-width: 424px){
	#headerMessageMobile { font-size: 1.4em; }
	#googleTranslateAttribution { display: none; }
	#googleTranslateAttributionMobile { display: block; }
	#mapBackButton { width: 15%; }
	/*#mapImg { max-height: 200vh; }*/
}
@media only screen and (max-width: 424px) and (-webkit-min-device-pixel-ratio: 1.5){
	#headerMessageMobile { font-size: 1.7em; }
}
@media only screen and (max-width: 320px) and (-webkit-min-device-pixel-ratio: 1.5){
	body { font-size: 10px !important; }
	.categorySmallIcon { width: 24px; height: auto; }
	.medButtonWrapper { width: 100%;	}
}
@media only screen and (max-width: 220px) and (-webkit-min-device-pixel-ratio: 1.5){
	body { font-size: 7px !important; }
	#headerMessageMobile { font-size: 1.5em; }
}
@media only screen and (max-height: 820px){
	#popupList {
		position: absolute; top: 4%; left: 0; right: 0;
		width: 310px; max-height: 92%;
		padding: 1.5em;
		background: rgba(255,255,255,1);
		overflow-y: auto;
	}
}
@media only screen and (max-height: 400px){
	#popupList {
		position: absolute; top: 3%; left: 0; right: 0;
		width: 310px; height: 94%;
		padding: 1.5em;
		background: rgba(255,255,255,1);
		overflow-y: auto;
	}
}