/*
 *  CORE STYLESHEET for Vibara
 *  Created by Vibara
 */
 
 /* ###--- 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://vibara.solutions/assets/img/BD-V-400.png');
	background-repeat: repeat; 
	background-attachment: fixed; 	*/
	margin: 0;
	font-size: 1.0em;
	font-family: Arial, Helvetica, sans-serif;
	color: #DDD 							/* Font colour */
}

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

a {
	text-decoration: none;					/* Hide underlines on hyperlinks */
	color: #FFCC00;							/* 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 */
}



.golden {
	color: #FC0;
}

.yellow {
	color: #FF0;
}

.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;
	border-bottom: 2px solid rgba(200, 200, 200, 0.75);
	overflow: hidden;
	background: rgba(0, 0, 0, 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.4);
	/* background-color: #000036;
	box-shadow: 0px 0px 8px 4px #000; */
	z-index: 150;
}	

ul.topnav li {float: right;}

ul.topnav li a {
	display: inline-block;
	vertical-align: middle;
	margin: 0px;
	height: 50px;
	color: rgb(200,200,200);
	text-align: center;
	padding: 2px 8px; /* height width */
	text-decoration: none;
	min-width: 15px;
	max-width: 400px;
}

ul.topnav li a:hover { 
	color: #FF0;
	text-shadow: 0px 0px 8px #FFFF00;
	/* box-shadow: inset 0px 0px 8px 8px #000036; */
}

/* 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: #000036;
  margin-right: 8px;
  top: 35px;
  right: 8px;
  padding: 30px;
  border: 2px solid rgba(200, 200, 200, 0.5);
  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: #FC0;
  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(200, 200, 200, 0.5);
	border-radius: 15px;					/* Apply a 15 pixel radius to the corners of the div borders */
	background: rgba(0, 0, 0, 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: 4px 4px 16px rgba(0, 0, 0, 0.4);	/* horizontal offset, vertical offset, blurring, spread, colour */
	z-index: 100;
}

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

.pad-screen { 		/* Use this DIV to pad out empty-ish screens so that the footer is at the bottom of the page */
	width: 100%;
	height: 95vh;
	background-color: rgba(0,0,0,0);
}

.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 rgba(200,200,200,0.75);
	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, 54, 0.5);
	white-space: normal;					/* WORKS WITH "display: inline-grid" to fix inline SPANs to wrap text inside themselves */
}	

.centered {
	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: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 8px; 
	text-align: center;
	font-size: 0.9em;
	color: #EEE;
	padding-bottom: 8px;
	padding-top: 4px;
	border-top: 2px solid rgba(200, 200, 200, 0.5);
}

.footerImg {
	max-width: 100%;
	float: right;
}

#footer a { color: #EEE; }

#footer a:hover { color: #FF0; text-shadow: 0px 0px 8px #FF0;}

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

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



/* ###--- BUTTON STYLING - START ---### */
.buttonBar { /* Use for multiple buttons, where they are the same width and automatically resize or start a new row where required */
	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 #FFCC00;
	border-radius: 10px;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	background-color: rgba(0,0,0,0.75);
	color: #FFCC00;
	box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.0); /* Button has no visible shadow by default, to hide the glow effect when hovered / selected */
	transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
	transition-timing-function: ease;
}

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

button.small {
	padding: 5px;
	margin: 6px;
	border: 1px solid #FFCC00;
	border-radius: 10px;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	background-color: rgba(0,0,0,0.75);
	color: #FFCC00;
	box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.0); /* B/* Button has no visible shadow by default, to hide the glow effect when hovered / selected */
}

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

button.largeSpecial {
	padding: 8px;
	margin: 8px;
	border: 2px solid #FFCC00;
	border-radius: 10px 0px 10px 0px;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	background-color: #000036;
	color: #FFCC00;
	box-shadow: 0px 0px 4px 4px rgba(0,0,54,0.0);
}

button.largeSpecial:hover {
	border: 2px solid #FFFF00;
	color: #FF0;
	background-color: rgba(0,0,0,0.75);
	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: #111;
}

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

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

.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;
	opacity: 1;
}

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

/* 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-centered {	/* Use this to center an image in the title image.  If text is used, add "it200-txt" class (below) */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3em;
	color: #FFF;
	z-index:100;
	padding: 20px;
	border: 3px solid rgba(200,200,200,0.75);
	border-radius: 20px 0px 20px 0px;
	Background: rgba(0, 0, 0, 0.4);
}

.it200-txt {	/* Add this AFTER the class "image-title200-centered" if the object is just text to fix the height position issue */
	top: 35%;	/* e.g. class="image-title200-centered it200-txt" */
}


/* 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; /* To add a drop-shadow to the image, add class="shadow" to the image */
}

/* ###### 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: 2px solid rgba(200,200,200,0.75);
}

div.gal-img:hover {
	border: 2px solid #FF0;
}

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;
	max-width: 1100px;
	margin: 0 auto;
}

.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: #FF2200;
	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://vibara.solutions/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://vibara.solutions/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 ###### */