/* Page format and coloring ################################################### */

* {
  box-sizing: border-box;
}

:root
	{
	--whisky_shade: #b8860b;	/*var(--whisky_shade)*/
	--whisky_shine: #ffd700;	/*var(--whisky_shine)*/
	--whisky_dark: #483c32;		/*var(--whisky_dark)*/
	--whisky_darker: #3B2F25;	/*var(--whisky_darker)*/
	--white_shade: #f1f1f1;		/*var(--white_shade)*/
	--gray_shade: #818181;		/*var(--gray_shade)*/
	--black_shade: #1a1a1a;		/*var(--black_shade)*/
	--background_foggy: #483c32;	/*var(--background_foggy)*/
	}

body {
	font-family: "Lato-Regular", sans-serif;
	margin: 0;
	background-image: url('../img/style/background/background.jpg');
	background-position: center top;
	background-attachment: fixed;
	background-size: 2000px;
	overflow-x: hidden;
	overflow-y: scroll;
	#scrollbar-color: var(--gray_shade) transparent;
}

/* Fonts ####################s################################################## */

@font-face {
	font-family: Kleymisska;
	src: url(../fonts/Kleymisska/Kleymisska.ttf);
}

@font-face {
	font-family: Lato-Regular;
	src: url(../fonts/Lato/Lato-Regular.ttf);
}

@font-face {
	font-family: Lato-Medium;
	src: url(../fonts/Lato/Lato-Medium.ttf);
}

@font-face {
	font-family: Lato-Bold;
	src: url(../fonts/Lato/Lato-Bold.ttf);
}

@font-face {
	font-family: Lato-Black;
	src: url(../fonts/Lato/Lato-Black.ttf);
}

/* Page menu ################################################################## */

#webpage_main_foggy_background_dialog {
	position: absolute;
	top: 0%;
	left: 0%;
	background-color: rgba(26,26,26,0.3);
	width: 100%;
	height: 100%;
	display: none;
}

.webpage_heading_position_menu_button {
	padding-right: 10px;
	vertical-align: bottom;
	width: 0px;
}

#menu_button_open{
	position: relative;
	top: 0px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	display: block;
	#background-color: rgba(72, 60, 50,0.5);
	background: var(--whisky_dark) ;
	box-shadow: inset 0px 0px 2vw -0.5vw var(--black_shade);
}

#menu_button_open_bar_one {
	position: absolute;
	left: 13px;
	top: 16px;
	height: 4px;
	width: 25px;
	background-color: var(--whisky_shade);
	border-radius: 25px;
	display: inline-block;
}

#menu_button_open_bar_two {
	position: absolute;
	left: 13px;
	top: 23px;
	height: 4px;
	width: 25px;
	background-color: var(--whisky_shade);
	border-radius: 25px;
	display: inline-block;
}

#menu_button_open_bar_three {
	position: absolute;
	left: 13px;
	top: 30px;
	height: 4px;
	width: 25px;
	background-color: var(--whisky_shade);
	border-radius: 25px;
	display: inline-block;
}

#menu_button_close{
	position: relative;
	top: 0px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	display: block;
	#background-color: rgba(72, 60, 50,0.5);
	background: var(--whisky_dark) ;
	box-shadow: inset 0px 0px 2vw -0.5vw var(--black_shade);
}

#menu_button_close_x_bar_one {
	position: absolute;
	left: 14px;
	top: 22px;
	height: 5px;
	width: 23px;
	background-color: var(--whisky_shade);
	border-radius: 5px;
	display: inline-block;
	rotate: 45deg;
}

#menu_button_close_x_bar_two {
	position: absolute;
	left: 14px;
	top: 22px;
	height: 5px;
	width: 23px;
	background-color: var(--whisky_shade);
	border-radius: 5px;
	display: inline-block;
	rotate: 315deg;
}

#menu_button_open + input{
	display: none; /* hide the checkboxes */
}

#menu_button_close + input{
	display: none; /* hide the checkboxes */
}

#menu_button_open + input + #webpage_main_foggy_background_dialog{
	###animation-delay: 2s;
	###animation: menu_fadeOut 1s;
	###animation-fill-mode: forwards;
	display:none;
}

#menu_button_open + input:checked + #webpage_main_foggy_background_dialog{
	display:block;
	z-index: 1;
	###animation: menu_fadeIn 1s;
	###animation-fill-mode: forwards;
}

#menu {
	position: absolute;
	top: calc(75px + 5vw);
	left: 25%;
	width: 50%;
	height: 30%;
	background-color: var(--whisky_darker);
	border-radius: 0.75vw;
	#border-radius: 10px;
	padding: 0.5vw;
	box-shadow: 1vw 1vw 10vw var(--black_shade);
	box-shadow: inset 0px 0px 10vw -3vw var(--black_shade);
}

@keyframes menu_fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes menu_fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

#menu_table, #whisky_cat {
	
	#border: 1px white solid;
	width: 100%;
	#height: 40%;
	font-size:calc(14px + 0.5vw);
	font-family: "Lato", sans-serif;
	#font-weight: normal;
	#color: #818181;
	text-align: left;


}

#whisky_cat {
	

	width: 33%;
	padding-top: 3px;
	padding-left: 7px;
	padding-right: 3px;
	padding-bottom: 3px;
}



#whisky_fav, a:hover {
	

	#width: 33%;
	text-decoration: none;
	font-size:calc(14px + 0.5vw);
	font-family: "Lato", sans-serif;
	font-weight: normal;
	color: var(--whisky_shine);

}

#whisky_cat, a:link, a:visited {
	

	#width: 33%;
	text-decoration: none;
	font-size:calc(14px + 0.5vw);
	font-family: "Lato", sans-serif;
	font-weight: normal;
	color: var(--gray_shade);

}

#whisky_cat, a:hover {
	

	#width: 33%;
	text-decoration: none;
	font-size:calc(14px + 0.5vw);
	font-family: "Lato", sans-serif;
	font-weight: normal;
	color: var(--white_shade);

}





#whisky_head {
	

	font-weight: 900;
	color: var(--whisky_shade);
	#padding-top: 3px;

}





/* Page message ############################################################### */

#page_message {
	position: absolute;
#	top: calc(14vw + 40px);
	width: 92%;
	z-index: 1;
	text-align: center;
	font-size: calc(1.5vw + 5px);
	font-weight: 900;
	#color: var(--gray_shade);
	color: var(--gray_shade);
	#color: var(--whisky_shine);
	#text-shadow: 0px 0px 25px 0px rgba(0,0,0,1);
	text-shadow: 0px 0px 10px var(--black_shade);
	#border: 1px solid yellow;
}

/* Tiled menu ################################################################# */

.empty_tile_display {
  #background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
#height: 10vw;
	#background-color: var(--whisky_dark);
	#box-shadow: 1vw 1vw 10vw var(--black_shade);
	#box-shadow: inset 0px 0px 10vw -3vw var(--black_shade);
	#border-radius: 10px;
	#margin: 1%;
 opacity: 0;
}

.flex-container {
  display: flex;
  flex-direction: row;
  #font-size: 30px;
  text-align: center;
}

.tiles {
	padding: 10px;
	flex: 50%;
	background-color: rgba(72, 60, 50,0.5);
	box-shadow: 1vw 1vw 10vw var(--black_shade);
	box-shadow: inset 0px 0px 10vw -3vw var(--black_shade);
	border-radius: 0.75vw;
	margin: 1%;	

}



.tiles table {
	width: 100%;
	height: 100%;
	#text-align: center;
	#border: 1px solid red;
}

.tiles td {
	width: 50%;
	#height: 100%;
	#border: 1px solid yellow;
	text-align: left;
	vertical-align: top;
	font-size: calc(0.5vw + 10px);
}

.tiles img {
	width: 80%;
	#height: 80%;
	#width: 8vw;
	#border: 1px solid green;
}

/* Collection list ############################################################ */

#main_collection {
	position: absolute;
	#top: 25%;
	top: calc(75px + 5vw);
	#top: calc(75px + 5vw + 30%);
	left: 25%;
	width: 50%;
	height: calc(100% - 10% - calc(75px + 5vw));
	#height: calc(85% - 4vw);
	#height: calc(75px + 41vw);
	#background-color: green;
	z-index: 0;
	padding-left: 2vw;
	padding-right: 2vw;
	#font-size:calc(14px + 0.5vw);
	font-size:calc(12px + 0.5vw);
	color: var(--white_shade);
	#overflow-x: hidden;
	overflow-y: scroll;
	#text-align: justify;
	#box-shadow: inset -100px 10px 25px -100px var(--whisky_dark);
#	box-shadow: inset 5px 5px 25px 5px var(--whisky_dark);
	/* Hide scrollbar for IE, Edge and Firefox */
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
#main_collection::-webkit-scrollbar {
	display: none;
}

.left_white_shade  {
	text-align: left;
	color: var(--white_shade);
}

.right_white_shade  {
	text-align: right;
	color: var(--white_shade);
}

.left_gray_shade  {
	text-align: left;
	color: var(--gray_shade);
}

.right_whisky_shade  {
	text-align: right;
	color: var(--whisky_shade);
}