/*
STEPPING STONE RENTALS CSS

Notes

colors:
HEX: #11111f
RGB: 17, 17, 31
CMYK: 45,45,0,87

HEX: #ff9e1b
RGB: 255, 158, 27
CMYK: 0,38,89,0

font:
Beklon

colour match:
Orange peel : ff9e1b main . buttons
Orange (web) : ffaf44 secondary
Earth yellow : ffc16d
Sunset : ffd297
Wheat . Ffe4c0 background

ink: #11111f

https://coolors.co/palette/ff9e1b-ffaf44-ffc16d-ffd297-ffe4c0
*/
* {
  box-sizing: border-box;
}

html {
	height: 100%;
	font: 110%/1.6 system-ui;
}

body {
	display: flex;
	flex-direction: column;
	/* gap: 2rem;
	background-color: #11111f !important;*/
	background: radial-gradient(circle,rgba(61, 47, 27, 1) 33%, rgba(84, 64, 33, 1) 79%, rgba(150, 88, 6, 1) 100%);
	color:#ff9e1b !important;
	/* padding: 2rem max(1rem, 5vw); */
}

a {
	color: #4d3c20 !important;
	font-weight: 600;
	text-decoration: none;
}

.logo-colour {
	color:#ff9e1b !important;
}

h1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: calc(.8rem + .6vw) !important;
	color: #3c3233 !important ;

}

button {
	background-color: #ff9e1b !important;
	color:#11111f !important;
	border-radius: 8px;
	border:1px solid #735231 !important;
	font-family: 'Quicksand', sans-serif;
}

@media (min-width: 1200px) {
	h3 {
		color:#6d6566 !important;
	}
}

.gendisplay {
	background-color: #Ffe4c0;
	color:#11111f;
}
.window-container {
	position: relative;
	min-height:996px;
	/*
	width: 500px;
	height: 500px;
	border:red solid 1px;*/
}
.window {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
}
.view {
	position: absolute;
	margin-top: 0;
	margin-left: 0;
	z-index: 2;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.view.active {
	opacity: 1;
}

.album {
	background: #Ffe4c0 !important;
	color: #11111f;
	border-radius: 8px;
	margin: auto auto 16px;
	padding:16px 24px;
	box-shadow:0 0 32px #ff9e1b;
	border:1px solid #ff9e1b;
	font-family: 'Quicksand', sans-serif;
}
.album  h2 {
	padding:15px 40px;
}
/*
@media (min-width: 768px) {
	.album {
		max-width: 70%;
	}
}
*/

.imgrow {
	/*padding:0 !important;
	--bs-gutter-x: 1.5rem !important;
	*/
	--bs-gutter-y: .25rem !important;
}

.toppic {
	border-radius: 8px;
	margin: auto;
	max-width: 70%;
	/* box-shadow:0 0 32px #ff9e1b; */
	box-shadow: 0 0 32px rgba(255, 158, 27, .5);
	/* border:1px solid #ff9e1b; */
	border: 1px solid rgba(255, 158, 27, .25);
	padding-left:0 !important;
	padding-right:0 !important;
}

.gallery {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	grid-auto-flow: dense;

	grid-template-columns: repeat(1, 100%);
	grid-template-rows: repeat(2, 23vw);
}

.darklink {color:#496a81 !important;}

@media (max-width: 575px) {
/*
	.row {
		margin-right:0;
		margin-left:0;
	}
*/
/*
	.row>* {
		padding-right:0 !important;
		padding-left:0 !important;
	}
*/
}

@media (min-width: 576px) {
	.gallery {
		grid-template-columns: repeat(4, 22.5%);
		grid-template-rows: repeat(4, 12vw);
	}
}

@media (min-width: 768px) {
	.gallery {
		grid-template-columns: repeat(5, 17.5%);
		grid-template-rows: repeat(5, 12vw);
	}
}

.gallery li {
	list-style-type: none;
	padding: 1px;
	/* background-color: #fff;
	border-radius: 3%;*/
	box-shadow:
		0 1px 1px hsl(0deg 0% 0% / 0.36),
		1px 2px 2px -0.8px hsl(0deg 0% 0% / 0.36),
		2px 4px 5px -1.7px hsl(0deg 0% 0% / 0.36),
		5px 10px 13px -2.5px hsl(0deg 0% 0% / 0.36);
}
.gallery li img {
	/* margin:6px;*/
}
.gallery li:nth-child(2),
.gallery li:nth-child(7) {
	grid-column: span 2;
	grid-row: span 2;
}
.gallery :nth-last-child(10) {
	grid-column: span 2;
	/* border-radius: 24px;; */
}

img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.carousel-item img {
	max-height: 392px;
}

.deskwindow {
	z-index:-10;
}

.infobox {
	border:1px solid orange;
	border-radius: 8px;
	background: #ffbf68;
	color:#22334f;
	padding:24px;
}

.navbar {
	background: #FFD297;
	color:#11111f;
}

#map {
  height: 400px;
  width:100%;
}

.warning {
	color:red;
	font-weight:700;
}

.nav-link {
	color: #11111f !important;
}

.inforow {
	max-width:80%;
	margin-left:auto !important;
	margin-right:auto !important;
	margin-top:48px !important;
}
.inforow .col-2 {
	border:1px solid brown;
}

.footerblock a { color:#ffc16d !important;}

.modal-content, .card {
	color: #11111f !important;
}

.rowsizer {
  width:90%;
  margin:auto;
  text-align:center;
}
@media (max-width: 575px) {
  .rowsizer {
	width:95%;
  }
}
@media (min-width: 576px) {
  .rowsizer {
	width: 90%;
  }
}
@media (min-width: 768px) {
  .rowsizer {
	width: 60%;
  }
}
@media (min-width: 992px) {
  .rowsizer {
	width: 77%;
  }
}@media (min-width: 1200px) {
  .rowsizer {
	width: 66%;
  }
}@media (min-width: 1400px) {
  .rowsizer {
	width: 54%;
  }
}
.rowsizer .col {
	padding:8px;
	background:#555;
	margin-left:8px;
}

.card {
	color: #11111f !important;
}

.article-content-col {;
	color: #11111f;
	border-radius: 16px;
	margin: auto auto 16px;
	box-shadow: 0 0 32px #ff9e1b;
	border: 1px solid #ff9e1b;
	font-family: 'Quicksand', sans-serif;
	overflow: hidden;
}

.footerbox {
	border-radius: 8px;
	margin: auto auto 16px;
	padding: 16px 24px;
	box-shadow: 0 0 16px #ff9e1b;
	border: 1px solid #ff9e1b;
}

/* Footerbox Background color
All the same on smaller sizes, 2 different colours on large
 */
.fblight {
	background-color: #6b6962;
}

table.dataTable.display tbody tr.odd {
	// HOME PAGE
	background-color: red; // #c9c9c9;
}


@media (min-width: 992px) {
	.fbdark-lg {
		background-color: #828078 !important;
	}
}

.nobackground {
	background-color: transparent !important;
	border: none !important;
}