/*STYLE FÖR SKANSHOLMEN*/

:root {
	--main-acc: #f1f1f1;
	--main-btn:  #c5b387;
	--backgr: #fdf7ee;
	--cont: #fcf7ea;
	--menu: #D8C699;
	--menu-hover: #e3d6b5;
	--menu-active: 	#c5b287;
	--panel: #f0e2c2;
	--dark-text: #0F0E0A;
	--light-text: #f5f4f0;
	--link-text: #332E20;
}

body {
	background-color: var(--backgr);
	color: var(--dark-text);
	font-family: "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

h1, h2, h3, h4, h5 {
	text-align: center;
	font-family: "Century Gothic", "sans-serif";
} 

h1 {
	text-transform: uppercase;
	font-size: 5em;
}

#header a {
	color: var(--dark-text);
	text-decoration: none;
	user-select: none;
}

h2 {font-size: 2.25em;}
h3 {font-size: 1.75em;}
h4 {font-size: 1.5em;}
p {font-size: 1em;}

container > ul, li {
	margin: 0 0 10px;
	font-size: 1em;
	display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

a {
	color: var(--link-text);
}


.row{
	margin-bottom: 5px;
}
.d-none {display: none;}


.img-resp img {
	display: block;
	max-width: 100%;
	height:  auto;
}

.menu-bar {
    list-style-type: none;
    overflow: hidden;
	background-color: var(--menu);
	z-index: 1;
}

.container {
	box-shadow: 0px 5px 15px rgba(0,0,0,0.4);
	background-color: var(--cont);
	z-index: -1;

}

.bullet-list {
	list-style-type: circle;
	font-size: 1em;
}

.menu-bar li {
	margin: 0;
  	float: left;
}

.menu-bar li a {
	font-family: "Century Gothic", "sans-serif";
	display: block;
    color: var(--dark-text);
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
	font-size: 1.75em;
	-o-transition:.4s;
  	-ms-transition:.4s;
  	-moz-transition:.4s;
  	-webkit-transition:.4s;
  	transition:.4s;
}

li a:hover {
    background-color: var(--menu-hover);
}

.active {
	background-color: var(--menu-active);
}

.carousel {
	width: 100%;
	height: 500px;
	overflow: hidden;
    margin: 0 auto;
  }

.carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
	  width: 100%;
	  height: 500px;
	max-width: 100%;
	 object-fit: cover;
    margin: auto;
  }

.open-times p {
	text-align: center;
	font-size: 1.5em;
	font-family: "Century Gothic", "sans-serif";
}

.overlay-img {
	margin: 10px;
	background-color: rgba(98,98,98,0.30);
	height: 100%; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--light-text);
	padding: 10px;
}

.food-menu-cont {
	background-image: url("https://dataease.se/assets/guesthamn/img/bistropaviljongblur4px.jpg");
}

.harbor-cont {
	background-image: url("https://dataease.se/assets/guesthamn/img/MarinaskansholmenBLUR.jpg");
}

.event-cont {
	background-image: url("https://dataease.se/assets/guesthamn/img/eventblur10px.jpg");
}

.overlay-panel {
	padding: 5px;
	background-color: rgb(0,0,0); /* Fallback color */
 	background-color: rgba(0,0,0, 0.5); /* Black w/opacity/see-through */
  	color: var(--light-text);
	margin: 0 auto;
	width: 100%;
	font-size: 1em;
	font-family: "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

.food-menu {
	height: 650px;
	overflow: scroll;
}

.food-menu td {
	text-align: left;
	border-top: 2px solid var(--dark-text);
}

.alignleft td {
	text-align: left;
	
}
.alignright td {
	text-align: right;
	font-weight: bold;
}

::-webkit-scrollbar {
	width: 4px;
	height: 0;
}

::-webkit-scrollbar-track {background-color: none;}

::-webkit-scrollbar-thumb {
	width: 4px;
	background-color: #CCCCCC;
}

::-webkit-scrollbar-thumb:hover {background-color: #bbb;}

::-webkit-scrollbar-corner {
	width: 0;
	height: 0;
}
/* Chrome, Safari, Edge, Opera */
/*input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}*/

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.col-sm-2{
	padding-right: 5px;
	padding-left: 10px;
}
.read-only{
	background-color: lightgray;
	border: none;
}
.read-only-sum{
	background-color: lightgray;
	border: none;
	text-align: right;
	font-weight: bold;
}
.input-number{
	text-align: right;
}

.head-box {
	box-shadow: 0px 5px 15px rgba(0,0,0,0.4);
	background-color: var(--cont);
	padding-right: 5px;
	padding-left: 5px;
}

.head-box p {
	margin: 5px;
	
}

.book-btn {
	margin: 0 auto;
  	background-color: var(--menu);
  	border: none;
  	padding: 8px 16px;
	width: 100%;
  	text-align: center;
  	text-decoration: none;
	text-transform: uppercase;
  	display: inline-block;
  	font-size: 16px;
	touch-action: manipulation;
    cursor: pointer;
	-o-transition:.2s;
  	-ms-transition:.2s;
  	-moz-transition:.2s;
  	-webkit-transition:.2s;
  	transition:.2s;
}

.book-btn a {
	color: var(--dark-text);
	font-size: 2em;
}

.book-btn:hover {
	background-color: var(--main-btn);
	color: var(--link-text);
	text-decoration: none;
}

.book-btn:active {
	background-color: var(--menu-active);
	text-decoration: none;
	-moz-box-shadow:    inset 0 0 10px rgba(0,0,0, 0.25);
   	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0, 0.25);
   	box-shadow:         inset 0 0 10px rgba(0,0,0, 0.25);
}

.book-btn:focus {
	outline: 0;
	text-decoration: none;
	color: var(--link-text);
}

.panel-head {
	background-color: var(--menu);
	padding: 10px;
}

.panel-head:hover {
	background-color: var(--main-btn);
}

.panel-collap {
	background-color: var(--cont);
	border: 0;
	padding: 10px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.navbar-toggler {
	display: none;
	visibility: hidden;
}

.panel-head {
	cursor: pointer;
	margin-bottom: 1px;
}

.event-image {
	width: 100%;
	height: auto;
}

.fp-img img {
	width: 100%;
	height: auto;
	padding: 20px;
}

.val-error {
	text-align: center;
	width: auto;
	
}

.val-error p {
	font-style: bold;
	color: #4F0001;
}

.book-form {
	text-align: left;
	margin-top: 15px;
	margin-left: 10px;
	margin-right: 10px
		
}

.book-form label {
	text-align: right;
	padding: 3px;		
}

.book-form  input, select {
	text-align: left;
	padding: 3px;		
}
.book-form .input-number {
	text-align: right;
	padding: 3px;	
}

.book-form submit {
	width: auto;
	padding: 10px;
	margin: 10px;
}

#mobile-header {
	display: none;
	visibility: hidden;
} 

@media screen and (max-aspect-ratio: 13/9){
	li a {font-size: 1em;}
    .column {width: 100%;}
	h1 {font-size: 3em;}
	h2 {font-size: 1.625;}
	h3 {font-size: 1.375em;}
	.navbar-toggler {
		display: block;
		visibility: visible;
		background-color: var(--menu);
		border: none;
		font-size: 2em;
	}
	.navbar-toggler:focus {outline: 0;}
	.glyphicon {padding: 5px;}
	.nav-menu li {
		display: block;
		padding: 4px 6px;
		float: none;
	}
	.carousel {height: 200px;}
	.carousel-inner > .item > img,
  	.carousel-inner > .item > a > img {
	  height: 200px;
  }
}