/*!
 *  CORE STYLESHEET for ionWhite
 *  Created by ionWhite
 */
 
 /* ###--- BODY GENERAL STYLING - START ---### */
* {
	box-sizing: border-box; /* APPLIES TO ALL HTML ELEMENTS - Ensures all element total width is a product of itself plus any applied padding */
}

body {
	background-color: #000;
	background-image: url('https://ionwhite.com/assets/img/DK-BD-pat-hex1.png');
	background-repeat: repeat-y; 				/* Background will be repeated in both x and y directions */
	background-attachment: fixed; 			/* Background will not scroll with the page */
	margin: 0;
	font-size: 1.0em;
	font-family: Arial, Helvetica, sans-serif;
	color: #DDD
}

hr {
	margin: 20px; 							/* Provide some padding around the HR bars */
}

a {
	text-decoration: none;					/* Hide underlines on hyperlinks */
	color: #FF8800;							/* Set colour of hyperlink text */
}

a:hover {
	text-decoration: none;				/* Only show underline on hyperlinks when the cursor is over them */
	color: #FFFF00;							/* Colour of hyperlink text when the mouse is over them */
}



.orange {
	color: #FF8800;
}

.yellow {
	color: #FFFF00;
}

.full-height {
	height: 100vh;
}

/* ###### BODY GENERAL STYLING - END ###### */



/* ###--- NAVBAR STYLING - START ---### */	
ul.topnav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	list-style-type: none;
	margin: 0px;
	padding: 0;
	overflow: hidden;
	background-color: #000;
	box-shadow: 0px 0px 8px 4px #000;
	z-index: 150;
}	

ul.topnav li {float: right;}

ul.topnav li a {
	display: inline-block;
	border-radius: 25px;
	color: #DDD;
	text-align: center;
	padding: 2px 8px;
	text-decoration: none;
	min-width: 15px;
	max-width: 400px;
}

ul.topnav li a:hover {
	background-color: #770; 
	color: #FF0;
	box-shadow: inset 0px 0px 8px 8px #000;
}

/* ul.topnav li a.active {
	background-color: #FF0; 
	color: #00F;
	box-shadow: inset 0px 2px 8px 4px #000;
} */

ul.topnav li.left {float: left;}

ul.topnav img {
	display: inline-block;
	vertical-align: middle;
	padding: 2px 8px;
	margin: 0px;
	height: 50px;
	text-decoration: none;
}	

/* Pop-up Menu */
.menu {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 110; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.0); /* Black w/ opacity */
}

/* Pop-up Menu Content and box */
.menu-content {
	position: fixed;
  background-color: #000;
  margin-right: 8px;
  top: 35px;
  right: 8px;
  padding: 30px;
  border: 1px solid #FF0;
  border-radius: 15px 0px 15px 0px;
  min-width: 200px;
  max-width: 300px; /* Could be more or less, depending on screen size */
  box-shadow: 0px 0px 8px 8px #000;
  animation-name: animatetop;
  animation-duration: 0.4s;
  
}

/* Pop-up Menu Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

.menu-content img {
	height: 50px;
}


/* Pop-up Menu Close Button */
.close {
  color: #FF8800;
  float: right;
  font-size: 3em;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #FF0;
  text-decoration: none;
  cursor: pointer;
}
/* ###### NAVBAR STYLING - END ###### */



/* ###--- DIV STYLING - START ---### */
.container {
	width: 95%;
	max-width: 1100px;						/* Set the maximum width of the div */
	min-width: 400px;
	margin: auto;							/* "auto" centers the DIV on the page, otherwise it will align to the left */
	margin-bottom: 1em;					/* Adding a margin to the bottom spaces out the DIV's without affecting the above settings */
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 15px;					/* Apply a 15 pixel radius to the corners of the div borders */
	background: rgba(20, 19, 25, 0.7);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	padding: 8px; 							/* spacing around inside of object border, in the order of Top Right Bottom Left */
	color: #DDD;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);	/* horizontal offset, vertical offset, blurring, spread, colour */
	z-index: 100;
}

.container p, h1, h2, h3, h4, h5, h6{
	padding: 0px 8px 4px 8px;
}

.shadow {
	box-shadow: 0px 0px 8px 8px #000;	
}
.shadow-ins {
	box-shadow: inset 0px 0px 8px 8px #000;
}

.item {							
	width: 95%;								/* Width of each element */
	max-width: 1100px;
	min-width: 300px;
	height: auto;							/* Height */
	padding: 5px;							/* Inside padding */
	margin: auto;							/* Outside spacing */
	border: 2px solid #ff8800;
	border-top-left-radius: 10px; 			/* Add a radius to the borders to make them look smarter */
	border-bottom-right-radius: 10px;
	text-align: left;
	background: rgba(0, 0, 0, 0.5);
	white-space: normal;					/* WORKS WITH "display: inline-grid" to fix inline SPANs to wrap text inside themselves */
}	

.centered {
	border: 2px solid #FF8800;
	border-radius: 10px 0px 10px 0px;
	margin: 10px;
	width: 75%;
	padding: 8px;
	position: relative;
	left:50%;
	transform: translate(-50%,0%);
}

/* ###### DIV STYLING - END ###### */



/* ###--- FOOTER STYLING - START ---### */

#footer { 
	position: flow;
	bottom: 0;
	width: 100%;
	left: 0;
	background-color: #000;
	background-image: url("https://ionwhite.com/assets/img/DK-pattern-hex1a.png");
	background-repeat: repeat;
	text-align: center;
	font-size: 0.9em;
	color: #EEE;
	padding-bottom: 16px;
	padding-top: 4px;
	border-top: 1px solid #DDD;
}

.footerImg {
	max-width: 100%;
}

#footer a { color: #EEE; }

#footer a:hover { color: #FF0; }

#footer a.active { color: #FF8800; }

/* ###### FOOTER STYLING - START ###### */



/* ###--- BUTTON STYLING - START ---### */
.buttonBar {
	display: inline-grid;
	grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
	grid-gap: 20px;
	vertical-align: top;
	width: 98%;
}

button.large {
	padding: 8px;
	margin: 8px;
	border: 1px solid #FF8800;
	border-radius: 10px;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	background-color: #141319;
	color: #DDD;
	box-shadow: 0px 0px 4px 4px #000;
}

button.large:hover {
	border: 1px solid #FFFF00;
	color: #FFF;
	background-color: #770;
	box-shadow: 0px 0px 4px 4px #770;
}

button.small {
	padding: 5px;
	margin: 6px;
	border: 1px solid #FF8800;
	border-radius: 10px;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	background-color: #141319;
	color: #DDD;
	box-shadow: 0px 0px 4px 4px #000;
}

button.small:hover {
	border: 1px solid #FFFF00;
	color: #FFF;
	background-color: #770;
	box-shadow: 0px 0px 4px 4px #770;
}

button.largespecial {
	padding: 8px;
	margin: 8px;
	border: 1px solid #FF8800;
	border-radius: 10px 0px 10px 0px;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	background-color: #141319;
	color: #DDD;
	box-shadow: 0px 0px 4px 4px #000;
}

button.largespecial:hover {
	border: 1px solid #FFFF00;
	color: #FFF;
	background-color: #770;
	box-shadow: 0px 0px 4px 4px #770;
}

.clearfloat:after {
	content: "";
	display: table;
	clear: both;
}
/* ###### BUTTON STYLING - END ###### */



/* ###--- TABLE STYLING - START ---### */
.tables {
	width: 90%;
	margin: auto;
}

table {
	width: 100%;
}

table, th, td {
	border: 1px solid #DDD;
	border-collapse: collapse;
	padding: 5px;
	margin: auto;
	margin-bottom: 5px;
	text-align: left;
}

tr:nth-child(even) { /* Even row colour for tables */
	background-color: #333;
}

tr:nth-child(odd) { /* Odd row colour for tables */
	background-color: #141319;
}

th {
	color: white; /* Table header row colour */
	background-color: #00A;
}

.prices td:nth-of-type(2), td:nth-of-type(3) {
	text-align: center;
}

.prices th:nth-of-type(2), th:nth-of-type(3) {
	text-align: center;
}
/* ###### TABLE STYLING - END ###### */



/* ###--- THREE COLUMN STYLING - START ---### */
.threeColRow {
	width: 90%;
	max-width: 1100px;
	text-align: left;
	margin: auto;
}

.threeColumn {
	float: left;
	width: 33.33%;
	min-width: 250px;
	padding: 10px;
}

/* Clear floats after the columns */
.threeColRow:after { /*Use <div class="threeColRow"> as the container and <div class="threeColumn"> for each column */
	content: "";
	display: table;
	clear: both;
}
		
/* The above is compatable with IE10 and earlier, but for modern browsers only, use the two lines below instead... */
/* .row { display: flex; } */
/* .column { flex: 30%; } */
/* ###### THREE COLUMN STYLING - END ###### */



/* ###--- IMAGE STYLING - START ---### */	
.container-image-max { /* This section styles any text within the image container */
	text-align: center;
	font-style: italic;
	font-variant: small-caps;
	font-size: 0.85em;
	font-weight: normal;
}
	
.container-image-max img { /* This section styles the image */
	max-width: 100%;
	height: auto;
	margin: 0px 0px 10px 0px;	/* 10px margin below the image */
	z-index: 5;
}

.image-title200 { /* This section styles an image DIV for page titles that will not exceed 200px in height */
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-style: italic;
	font-variant: small-caps;
	font-size: 0.85em;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 10px;
	width: 100%;
	text-align: center;
}

.image-title200 div {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.image-title200 img { /* This section styles the page title image within the image DIV */
	width: 100%;
	height: 300px;
	margin: 0px;
	object-fit: cover; /* The image will scale to fit the container width and height, but anything sticking out will be clipped */
	object-position: 50% 50%; /* This keeps the center of the image in the center of the container. */
	z-index: 10;
}

.image-title200 p {			/* Allows you to place text (possible image?) right in the middle of an image - The image and this div must be the only things inside the containing div for this to work */
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3em;
	color: #FFF;
	z-index:100;
	padding: 20px;
	border: 3px solid #FF8800;
	border-radius: 20px 0px 20px 0px;
	Background: rgba(0, 0, 0, 0.4);
}


/* PUT IMAGES AND TEXT SIDE-BY-SIDE */
/* ....Text styling */
.image-text-inline {
	padding: 5px;
	width: 95%;
	margin: auto;
	display: inline-block;
}

/* ....Image styling */
.image-text-inline img {
	margin: 10px;
	float: left;
	box-shadow: 2px 4px 8px 4px #000;
}

/* ###### IMAGE STYLING - END ###### */



/* ###--- IMAGE GALLERY STYLING - START ---### */
div.gal-container {
	display: inline-grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 25px;
	vertical-align: top;
	width: 98%;
}

.gallery-box {
  padding: 0 6px;
  float: left;
  width: 100%;
}

div.gal-img {
	border: 1px solid rgba(255,255,255,0);
}

div.gal-img:hover {
	border: 1px solid #FF8800;
}

div.gal-img img {
	width: 100%;
	height: auto;
	box-shadow: 2px 4px 8px 4px #000;
}

div.desc {
	padding: 15px;
	text-align: center;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
/* ###### IMAGE GALLERY STYLING - END ###### */



/* ###--- GRID LAYOUT - START ---### */
.gridContainer { /* This defines the area the grid layout will fill.  Use the .gridBox DIV class (below) to place content*/
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 25px;
  vertical-align: top;
  width: 98%;
}

.gridContent {
	vertical-align: top;
	text-align: center;
	padding: 4px;
	width: 95%;
}

.gridText {
	text-align: justify;
	padding: 4px;
	width: 100%;
}

.gridContent img {
	vertical-align: top;
	border-radius: 30px 0px 30px 0px;
	box-shadow: 4px 4px 8px 4px #000;
	width: 95%;
	min-width: 200px;
	max-width: 400px;
	margin: auto;
}

.gridContainer:after {
	content: "";
	display: table;
	clear: both;
}

.hBoxContainer {
	display: grid;
	width: 95%;
	margin: auto;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); /* Minimum width of a cell is 290px, with the max set to one unit of the available space.  This means the browser will fit as many 300px wide boxes into the available width, but then stretch all boxes to fill the full width if it's not devisable into 300px (plus any padding / gap). */
	gap: 5px;
	grid-auto-rows: minmax(50px, auto); /* Minimum height of 50px, and allows the maximum height to stretch to fit the content. */
}

.hBoxImg {
	grid-column: 1;
	margin: 10px;
	max-width: 300px;
}

.hBoxImg img { /* new */
	width: 300px;
	height: 300px;
	object-fit: cover; /* The image will scale to fit the container width and height, but anything sticking out will be clipped */
	object-position: 50% 50%; /* This keeps the center of the image in the center of the container. */
	box-shadow: 4px 4px 12px #000;
}

.hBoxText { /* new */
	grid-column: 2;
	width: 95%;
	padding-right: 10px;
	margin: 0px;
}

/* ###### GRID LAYOUT - END ###### */



/* ###--- CONTACT FORM STYLING - START ---### */
.formContainer {
  border-radius: 10px;
  background-color: #222;
  padding: 20px;
}

.col-25 {					/* Floating column for labels: 25% width */
  float: left;
  width: 25%;
  margin-top: 24px;
}

.col-75 {					/* Floating column for inputs: 75% width */
  float: left;
  width: 75%;
  margin-top: 24px;
}

.error {
	color: #FF8800;
	font-size: 0.9em;
}

/* Format text entry boxes */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #EEE;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

label.inline {
	padding: 12px 12px 12px 0;
	display: inline-block;
}

button.right {
	cursor: pointer;
	float: right;
}

/* ###### CONTACT FORM STYLING - END ###### */



/* ###--- RESPONSIVE STYLING - START ---### */	

.hideOnWide {display: inline-block; padding: 0; margin: 0;}
.showOnWide {display: none;}

.hideOnMedium {display: inline-block; padding: 0; margin: 0;}
.showOnMedium {display: none;}

.hideOnNarrow {display: inline-block; padding: 0; margin: 0;}
.showOnNarrow {display: none;}

@media screen and (max-width: 1440px) {
	.hideOnWide {display: none;}
	.showOnWide {display: inline-block; padding: 0; margin: 0;}
}

@media screen and (max-width: 950px) { /* This hides the navbar text on narrower screens to just show the icons */
	ul.topnav img {height: 40px;}
	body {
		background-image: url('https://ionwhite.com/assets/img/DK-BD-pat-hex1a.png');
		background-color: #040; /* ####### TEST LINE - Changes BG colour when browser width is "medium" */
	} 
	button.large {min-width: 46%; max-width: 100%;}
	button.small {min-width: 48%; max-width: 100%;}
	.gallery-box {margin: 6px 0;}
	.menu-content  {padding: 20px;}
	.menu-content img {height: 40px;}
	.hideOnWide {display: none;}
	.showOnWide {display: inline-block; padding: 0; margin: 0;}
	.hideOnMedium {display: none;}
	.showOnMedium {display: inline-block; padding: 0; margin: 0;}
	.hideOnNarrow {display: inline-block; padding: 0; margin: 0;}
	.showOnNarrow {display: none;}
}

@media screen and (max-width: 600px) { /* Responsive layout - when the screen is less than 600px wide, make the following changes to stack items rather than float side by side */
	body {
		background-image: url('https://ionwhite.com/assets/img/DK-BD-pat-hex1a.png');
		background-color: #004; /* ####### TEST LINE - Changes BG colour when browser width is "small" */
	} 
	ul.topnav img {height: 40px;}
	.threeColumn { width: 100% }
	.threeColRow {text-align: center;}
	button.large {width: 100%;}
	button.small {width: 100%;}
	.gallery-box {width: 100%;}
	.col-25, .col-75 {width: 100%; margin-top:8px;}
	.menu-content img {height: 40px;}
	.hideOnWide {display: none;}
	.showOnWide {display: inline-block; padding: 0; margin: 0;}
	.hideOnMedium {display: none;}
	.showOnMedium {display: inline-block; padding: 0; margin: 0;}
	.hideOnNarrow {display: none;}
	.showOnNarrow {display: inline-block; padding: 0; margin: 0;}
}

/* ###### RESPONSIVE STYLING - END ###### */