/* Page layout and formating ################################################## */

#webpage_main_foggy_background {
	position: absolute;
	top: 0%;
	left: 0%;
	background-color: var(--background_foggy);
	#background-color: rgba(26,26,26,0.85);
	opacity: 0.85;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.webpage_heading_position {
	margin-top: 1%;
	margin-left: 26%;
	margin-right: auto;
	width: 49%;
	font-family: "Lato-Black", sans-serif;
	font-weight: bold;
	text-align: right;
        background-image: linear-gradient(var(--white_shade),var(--whisky_shade),var(--whisky_shade));
    	-webkit-background-clip: text;
    		z-index: 10;
}


.webpage_heading_title {
	font-weight: bold !important;
	font-family: Kleymisska !important;
	font-size:calc(30px + 2vw) !important;
	-webkit-text-fill-color: transparent;
}


.webpage_heading_slogan {
	font-family: Kleymisska;
	font-size:calc(11px + 1vw);
	-webkit-text-fill-color: transparent;
}








#left_side {
	position: absolute;
	top: calc(75px + 5vw);
	left: 0%;
	width: 25%;
	height: calc(100% - calc(75px + 5vw));

	
	
}

#main {
	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::-webkit-scrollbar {
    display: none;
}

/* Right menu ################################################################# */

#right_side_scroll_none_scroll_section {
	position: absolute;
	top: calc(75px + 5vw);
	#top: calc(100% - 10% - calc(75px + 5vw) - calc(75px + 1vw) - calc(75px + 1vw));
	#padding-top: 1vw;
	#padding-right: 4vw;
	left: 76%;
	height: 60%;
	width: 24%;
	#font-size:calc(14px + 0.5vw);
	#font-weight: bold;
	#color: var(--gray_shade);
	overflow-y: scroll;	
	#border: 1px solid red;
}

#right_side_scroller_top {
	position: absolute;
	top: 0%;
	left: 0%;
	height: 10%;
	width: 100%;
	#text-align: center;
	#top: calc(75px + 5vw);
	#top: calc(100% - 10% - calc(75px + 5vw) - calc(75px + 1vw) - calc(75px + 1vw));
	#padding-top: 1vw;
	padding-left: calc(2vw + 20px);
	#left: 78%;
	font-size:calc(14px + 0.5vw);
	font-weight: bold;
	color: var(--gray_shade);
#border: 1px solid yellow;
}

#right_side {
	#display: none;
	position: relative;
	top: 10%;
	left: 0%;
	height: 76%;
	width: 100%;
	#height: calc(60%-20%);
	#top: calc(100px + 6vw);
	#top: calc(75px + 4vw);
	#top: calc(100% - 10% - calc(75px + 5vw) - calc(75px + 1vw) - calc(75px + 1vw) - 40%);
	padding-top: 0.5vw;
	#padding-bottom: 0.5vw;
	#padding-right: 4vw;
	#########left: 76%;
	#width: 25%;
	#########height: 60%;
	####height: calc(100% - calc(75px + 5vw));
	
	#background-color: yellow;
	#z-index: -1;
	font-size:calc(14px + 0.5vw);
	font-family: "Lato-Regular", sans-serif;
	overflow-y: auto;
	#margin-top: 3vw;	
#	border: 1px solid green;
	/* 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 */
#right_side::-webkit-scrollbar {
    display: none;
}

	#right_side a
		{
		#margin-right: 5vw;
		padding: 0vw 1vw calc(1vw + 10px) 1vw;
		text-decoration: none;
		color: #var(--gray_shade);
		display: block;
		}
		
		#right_side a:hover
			{
			color: #f1f1f1;
			}

	#collection_link a
		{
		color: yellow;
		}
		
	#collection_link:hover
		{
		color: #ffd700;
		}

#right_side_scroller_bottom {
	position: absolute;
	bottom: 0%;
	left: 0%;
	height: 10%;
	width: 100%;
	#text-align: center;
	#top: calc(75px + 5vw);
	#top: calc(100% - 10% - calc(75px + 5vw) - calc(75px + 1vw) - calc(75px + 1vw));
	#padding-top: 1vw;
	padding-left: calc(2vw + 20px);
	#left: 78%;
	font-size:calc(14px + 0.5vw);
	font-weight: bold;
	color: var(--gray_shade);


#border: 1px solid blue;
}

/* Footer menu ################################################################ */

#footer_side
	{
	padding-top: 2vw;
	#padding-left: 1%;
	height: 10%;
	width: 100%;
	position: absolute;
	z-index: 0;
	bottom: 0px;
	#calc(75px + 40vw);
	#top: 95%;
	#left: 25%;
#	right: 26%;
	overflow-x: scroll;
	overflow-x: hidden;
	#font-size: 2px;
	#font-size: 90%;
	#background-color: #1a1a1a;
	opacity: 0.9;
	text-align: center;
	#color: #818181;
	color: var(--gray_shade);
	font-family: "Lato-Regular", sans-serif;
	#vertical-align: bottom;
	#box-shadow: -1vw -1vw 10vw var(--whisky_dark);
	#box-shadow: 0px 0px 25px 0px rgba(0,0,0,1);
	}

#footer_links {
	font-size:calc(10px + 0.5vw);
	color: var(--gray_shade);
}

#footer_links:hover {
	#font-size: 12px;
	color: var(--white_shade);
	
}

#footer_side_shadows
	{
	height: 5%;
	width: 50%;
	position: absolute;
	z-index: 2;
	bottom: 0px;
	left: 25%;
	opacity: 0.9;
	box-shadow: 0px 0px 25px 0px var(--white_shade);
	}