@font-face { font-family:'Nunito'; font-display:swap; src:url('nunito.woff2') format('woff2'); }
/* top  right  bottom  left  */
/* top/bottom  left/right    */

:root {
	--height-navbar:35px; /* with screen scale of 150%, this shows a vertical scrollbar; if height=35px, it does not */
	--color-background:#ffe;
	--color-navbar:#ea0;
	--color-hover:#c80;
	--color-dropdown:#ea3;
	--color-sidebar:#fe8;
	--color-shadow:#420;
	--color-active:#fc0;
	--color-border:#000;
	--color-flag:#444;
	--color-text-link:#000;
	--color-text-hover:#ffe;
	--color-text-active:#000;
	--color-info:#404;
	--color-cross:#808;
/* calendar */
  --white: #fff;
  --main: #eaedf0;
  --accent: #0041ff;
  --accent-2: #cbcdd0;
  --occupied: #ff8028;
  --selected: #4db2e0;
/* nunito */
	--main:15px;
	--nav:18px;
	--more:14px;
	--menu:20px;
	--side:16px;
	--sidet:14px;
	--head:26px;
}

body { margin:0; font-family:nunito,verdana,arial,sans-serif; font-size:var(--main); height:100vh; background-color:var(--color-background); color:black;  }
main { width:760px; overflow:auto; border-left:1px solid var(--color-border); border-right:1px solid var(--color-border); padding:4px 8px; background-color:white; }
header { }
footer { padding-top:16px;color:#666;}
h1 { font-size:var(--head); color:black; background-color:var(--color-active); margin:13px -7px 24px -7px; padding:5px 20px; }
h3 { margin-bottom:4px; }
h4 { margin-bottom:2px; }
h5 { font-size:100%; margin: 2px 0; }
p { margin-top:0; }
hr { margin:24px -8px 8px -8px; }
a { color:black; }

/* navigation */
.c2-navbar-container { position:sticky; top:0; background-color: var(--color-navbar); padding-bottom:0px; }
.c2-navbar-container a { color:var(--color-text-link); text-decoration:none; padding:6px 7px 5px 7px; font-size:var(--nav); }
.c2-nav-base { display:flex; }
.c2-nav-responsive { display:none; }
.c2-dropdown { position:relative; }
.c2-dropdown .c2-dropdown-button { padding:6px 7px 5px 7px; border:none; outline:none; background-color:var(--color-navbar); color:var(--color-text-link); font-family:nunito,verdana,arial,sans-serif; font-size:var(--nav); cursor:pointer; }
.c2-dropdown .c2-dropdown-languages { padding:10px 9px 1px 8px; }
.c2-dropdown-content { display:block; position:absolute; background-color:var(--color-dropdown); width:180px; box-shadow:0px 8px 16px 0px var(--color-shadow); z-index:1; }
.c2-dropdown-content { opacity:0; visibility:hidden; transition: opacity 0.3s ease, transform 0.3s ease; transform:translateY(-5px); }
.c2-dropdown.c2-open .c2-dropdown-content { opacity:1; visibility:visible; transform:translateY(0); }
.c2-dropdown-content a { float:none; display:block; }
.c2-dropdown-more-general { font-size:var(--more); }
.c2-dropdown-more-languages { vertical-align:top; font-size:var(--more); }
.c2-language-flag { box-shadow: 2px 1px 3px 0px var(--color-flag); margin-right:10px; }
.c2-dropdown-right { margin-right: 0; margin-left: auto; }
.c2-dropdown-content-right { right:0; left:auto; }
.c2-dropdown-content-right a { font-size:var(--main); }
.c2-page-container { width:1000px; margin:auto; display:flex; height:calc(100vh - var(--height-navbar)); }
.c2-sidebar-container { width:240px; overflow:auto; border-left:1px solid var(--color-border); scrollbar-width:none; background-color:white; padding:1px; }
.c2-menu-button { cursor:pointer; outline:none; font-size:var(--menu); background:none; border:none; margin-left:auto; }
.c2-navbar-container .c2-active { background-color: var(--color-active); color: var(--color-text-active); }
.c2-navbar-container a:hover, .c2-dropdown-button:hover, .c2-menu-button:hover { background-color:var(--color-hover); color: var(--color-text-hover); transition:0.3s ease; }
.c2-navbar-container a:active, .c2-dropdown-button:active, .c2-menu-button:active { background-color:var(--color-navbar); transition:0.3s ease; }
.c2-login {color:var(--color-text-hover)!important;}
@media (max-width:760px) {
	.c2-nav-base { display:flex; flex-direction:column; background-color:var(--color-navbar); top:8px; position:absolute; left:8px; width:180px; box-shadow:0px 8px 16px 0px var(--color-shadow); }
	.c2-nav-base { opacity:0; visibility:hidden; transition: opacity 0.3s ease, transform 0.3s ease; transform:translateY(-5px); }
	.c2-nav-base.c2-open { opacity:1; visibility:visible; transform:translateY(0); }
	.c2-nav-responsive { display:flex; }
	.c2-dropdown .c2-dropdown-button { text-align:left; width:180px; }
	.c2-dropdown-content { left:8px; }
}
/* sidebar */
.c2-sidebar-button { background-color:var(--color-sidebar); color:black; padding:4px 0; margin-top:16px; width:100%; border:none; text-align:center; outline:none; font-size:var(--side); text-decoration:none;	display:inline-block; transition:0.3s ease; }
.c2-sidebar-button:hover { background-color:var(--color-active); }
.c2-sidebar { margin:6px 8px 4px 8px; font-size:var(--sidet);}
.c2-sidebar-image { display:flex; width:216px; height:113px; margin:auto; }
.c2-sidebar-border { border:1px solid black; }

/* icon */
.c2-icon { width:20px; height:20px; vertical-align:-4px; }
.c2-icon-text { display:inline-block; }
/*		.c2-icon-info{ color:#853; cursor:pointer; font-style:normal; font-weight:bold; font-size:12px; vertical-align:6px; }
			.c2-icon-info::before { content:"\24d8"; }	/* &#9432; */
.c2-icon-info { display:inline-block; font-family:times; font-size:12px; font-weight:bold; font-style:normal; width:13px; height:13px; background:white; border-radius:50%; border:1px solid var(--color-info); 
	line-height:1.17; vertical-align:1px; cursor: pointer; color:var(--color-info); }
.c2-icon-info::before { content:"i";  margin-left:4.7px; }

/* information */
.c2-info-modal { background-color:rgba(0,0,0,0.3); display:none;  position:fixed; z-index:3; left:0; top:0; width:100%; height:100%; overflow:auto; backdrop-filter:blur(6px); }
.c2-info-box { background-color:white; color:black; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; width:100%; max-width:400px; border-radius:15px; }
.c2-info-img { margin:auto; display:block; width:100%; border-radius:15px 15px 0 0; }
.c2-info-text { margin:auto; display:block; padding:16px; }
.c2-info-close { background-color:#fff; position:absolute; top:10px; right:10px; width:31px; height:31px; border-radius:50%; cursor:pointer; font-style:normal;  }
.c2-info-close::before { content:"\00d7"; color:var(--color-cross); position:absolute; font-size:30px; top:-8px; right:8px; }

/* book europarcs link */
.c2-button-book{background-color: #ef7d00; border: none; color: white; margin:12px 0 20px 0; padding: 12px 32px; text-align: center; font-size: 18px; display: inline-block; text-decoration: none; cursor: pointer;border-radius: 10px; transition: 0.3s;}
.c2-button-book:hover {box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.6); background-color: #f48820;}


/* horizontal page layout */
@media (max-width:1000px) {
  .c2-sidebar-container { display: none; }
  main, .c2-page-container { width:760px; }
}
@media (max-width:760px) {
  main, .c2-page-container { width:100%; }
}


/* faq */
details > summary { background-color:#eee; padding:4px; border:none; box-shadow:1px 1px 2px #bbb; cursor:pointer; }
details > p { background-color:#eee; margin:4px; padding:4px; box-shadow:1px 1px 2px #bbb; }

/* rating */
.c2-review-score { display:inline-block; font-size:20px; color:#444; position:relative; margin-top:-8px; }
.c2-review-score::before, .c2-review-score span::before { content:"\2605\2605\2605\2605\2605 "; display:block; } /* &#9733; */
.c2-review-score span { color:orange; position:absolute; top:0; left:0; overflow:hidden;}

/* calendar */
.calendar-container { background-color: white; display: flex; align-items: center; justify-content: center; }
.calendar { display: inline-block; background-color: var(--white); border-radius: 16px; padding: 0 1rem; margin: 0; border: 1px solid black;}
.calendar-header { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; padding: 0; }
.calendar-caption { display: flex; align-items: center; color: var(--accent); margin: 0px; font-size: 1.1rem; word-spacing: 0.5rem;}
.calendar-previous,.calendar-next { padding:8px; }
.calendar-previous:hover,.calendar-next:hover { background: var(--accent-2); }
.calendar-previous div { width: 0; height: 0; border-top: 10px solid transparent;	border-right: 20px solid var(--accent);	border-bottom: 10px solid transparent; margin:0; padding:0; }
.calendar-next div { width: 0; height: 0; border-top: 10px solid transparent;	border-left: 20px solid var(--accent);	border-bottom: 10px solid transparent; margin:0; padding:0; }
.calendar-days { border-left: 1px solid black; border-bottom: 1px solid black; font-size: 1.2rem; color:#666; }
.calendar-days div { border-right: 1px solid black; border-top: 1px solid black; }
.calendar-days,.calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); margin: 0; padding: 0; justify-content: space-between; }
.calendar-week div,.calendar-days div { display: flex; justify-content: center; align-items: center; height: 2.8rem; width: 2.8rem; } /* border-radius: 100%; } */
.calendar-week div { opacity: 0.5; }
.calendar-today { text-decoration: underline; font-weight: bold;  }
.calendar-occupied { background: var(--occupied); }
.calendar-occupied-arrival { background: linear-gradient(to bottom right, white 50%, transparent 50%), var(--occupied); }
.calendar-occupied-departure { background: linear-gradient(to top left, white 50%, transparent 50%), var(--occupied); }
.calendar-selectable { color:black; cursor: pointer; }
.calendar-selectable:hover { background: var(--accent-2); color: rgb(25, 25, 201);  }
.calendar-selection { margin-bottom: 0px; padding: 4px 0; font-size: 0.92rem;  }
.calendar-selected { background: var(--selected); }
.calendar-selected-arrival { background: linear-gradient(to bottom right, white 50%, transparent 50%), var(--selected); }
.calendar-selected-departure { background: linear-gradient(to top left, white 50%, transparent 50%), var(--selected); }
.calendar-occupied.calendar-selected  { background: var(--occupied); }
.calendar-occupied-arrival.calendar-selected { background: linear-gradient(to bottom right, white 50%, transparent 50%), var(--occupied); }
.calendar-occupied-departure.calendar-selected { background: linear-gradient(to top left, white 50%, transparent 50%), var(--occupied); }
.calendar-occupied-arrival.calendar-selected-departure { background: linear-gradient(to bottom right, var(--selected) 50%, transparent 50%), var(--occupied); }
.calendar-occupied-departure.calendar-selected-arrival { background: linear-gradient(to bottom right, var(--occupied) 50%, transparent 50%), var(--selected); }
.calendar-occupied-arrival.calendar-selected-arrival { background: linear-gradient(to bottom right, white 50%, transparent 50%), var(--occupied); }
.calendar-occupied-departure.calendar-selected-departure { background: linear-gradient(to top left, white 50%, transparent 50%), var(--occupied); }
.calendar-price { border: 1px solid black; padding: 0px 8px; margin-top: 16px; font-size: 0.9rem; }

/* photo */
.c2-home-container { position: relative; width: 95%; margin:16px 16px; cursor:pointer; transition: 0.3s;}
.c2-home-container:hover {  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.59);}
.c2-home-img {display: block; width: 100%; height: auto;border: 1px solid #555; }
.c2-home-text { color: white; font-size: 60px; position: absolute; top: 50%; left: 20%; transform: translate(-10%, -50%); text-align: center; font-weight: bold;text-shadow: 3px 3px 5px black;
		text-decoration: underline;text-decoration-color: #c22;}

.c2-photo-modal { display: none; position: fixed; z-index: 5; padding-top: 8px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black;}
.c2-photo-modal-content { position: relative; margin: auto; padding: 0 8px; width: 100%; max-width: 1200px; } 
.c2-photo-close { color: white; position: absolute; top: 8px; right: 8px; font-size: 35px; font-weight: bold; background-color: rgba(0, 128, 0, 1.0); cursor: pointer; 
	transition: 0.4s ease; border-radius: 6px; padding: 0 11px 3px 11px; z-index: 6;}
.c2-photo-close:hover,.c2-photo-close:focus { background-color: rgba(0, 64, 0, 1.0);}
.c2-photo-slide { display: none; text-align: center;}
.c2-photo { max-width:100%; max-height: 97vh; border-radius: 18px; }  
.c2-photo-prev,.c2-photo-next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; margin-left: 10px; color: white; background-color: rgba(0, 128, 0, 0.8);
	font-weight: bold; font-size: 28px; transition: 0.4s ease; border-radius: 18px 0 0 18px; user-select: none; -webkit-user-select: none;}
.c2-photo-next { right: 18px; border-radius: 0 18px 18px 0;}
.c2-photo-prev:hover,.c2-photo-next:hover { background-color: rgba(0, 64, 0, 0.8);}
.c2-photo-caption { text-align: center; font-size: 18px; margin-top: -30px; padding: 0px 16px; color: white; text-shadow: 1px 1px 3px black, 1px 1px 3px black, 1px 1px 3px black; }
.c2-thumb {width:95%;transition: 0.3s; cursor: pointer;}
.c2-thumb:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.59);}

/* equipment table */
.styled-table {
	--color-border:#888;
	--color-accent:#009879;
	--color-row:#f3f3f3;
	border-collapse: collapse; margin: 16px 0; width: 100%; min-width: 300px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);}
.styled-table thead tr {background-color: var(--color-accent); color: white; text-align: left;}
.styled-table th {padding: 4px 8px; border: 1px solid black;font-weight: normal;}
.styled-table td {padding: 1px 4px; border: 1px solid var(--color-border);}
.styled-table tbody tr:nth-child(even) {background-color: var(--color-row);}
.styled-table tbody tr:last-child {border-bottom: 4px solid var(--color-accent);}
.styled-table tbody tr {font-size: 80%;}	
.styled-table tbody tr:hover {background-color: #ddd;}	
.styled-table .c2-accent{background-color:var(--color-accent);}

/* other */
.c2-half { float:left;width:49.99999%; }
.c2-third { float:left;width:33.33333%; }
/* .c2-twothird { float: left; width:66.66666%} */
.c2-align-center{text-align:center}
.c2-align-right{text-align:right;}
.c2-clean-link{color: #666}
.c2-font-normal{font-weight:normal;}
.c2-map{width:100%; height:200px; border:1px solid black;margin:8px 0px;}
.c2-map-container { margin:6px 0px; }
.c2-large{font-size: 150%;}

.w3-padding-16 { padding:16px 0; }
.w3-row:after,.w3-row:before{content:"";display:table;clear:both}
.w3-col{float:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
