/*SECTION 1: DESKTOP STYLING - This contains all the styling used for desktop devices*/

/*Section 1A: This has the primary styling attributes I use for the majority of my paragraphs, headers, and images. However, individual paragraphs do also
need individual styling to specify their locations within their respective grids (these stylings are in lower sections).*/
body
{
	overflow: scroll;
}
.MainImage
{
	border: 8px solid #91908c;
	padding: 2%;
	margin: center;
}
.MainParagraph
{
	background-color: #f5f5f5;
	font-family:Arial;
	font-size: 20px;
	outline:1px solid black;
	margin-left: 1%;
	margin-right:1%;
	padding: 3%;
}
.ParagraphHeader
{
	font-family:Arial;
}

/*Section 1B: This contains the styling for my top banner and my main menu*/
#SwitchLanguageButton
{
	position: absolute;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-left: 4.5%;
	padding-right: 4.5%;
	top: 13%;
	left: 89%;
	opacity: 0;
}
#TopBanner
{
	width: 100%;
}
#MobileMenu
{
	background-color:rgb(90,147,154);
	padding-top:0%;
	margin-top:-2%;
	margin-left:0%;
	text-align:center;
	color:white;
	font-size:20px;
	font-family: Arial;s
}
a.MenuLink
{
	color:white;
	text-decoration:none;
	margin-left: 0%;
	margin-right: 0%;
	font-family: Arial;
	margin-left: 1.5%;
	margin-right: 1.5%;
}
#BookingInfo
{
	text-align: center;
	font-family: Arial;
	background-color: #d0eff7;
	padding: 0.2%;
	margin-top: -1.5%;
	font-size: 18px;
}
#BookingInfoFirstLine
{
	font-size: 20px;
}
#MobileMenu
{
	display: none;
}
#MenuTextDesktop
{
	display:block;
	background-color:rgb(90,147,154);
	text-align: center;
	margin-top: -1%;
	padding-top: 0.2%;
	padding-bottom: 0.05%;
	margin-bottom: 2%;
	font-size: 20px;
}
@media only screen and (max-width: 2000px) 
{
	#SwitchLanguageButton
	{
		padding-top: 1.5%;
		padding-bottom: 1.5%;
		padding-left: 3%;
		padding-right: 3%;
		top: 10%;
		left: 89%;
	}
}
@media only screen and (max-width: 1600px) 
{
	#BookingInfo
	{
	}
}
@media only screen and (max-width: 700px) 
{
	#BookingInfo
	{
		font-size: 18px;
	}
}

/*Section 1C: This contains the styling for my footer*/
.Footer
{
	margin-top: 2%;
	display:flex;
	justify-content: center;
	gap: 10%;
}
.FooterText
{
	font-size: 25px;
	font-family: Arial;
}
#FooterBar
{
	width:95%;
	background-color:#d7adf0;
	height:3px;
	outline:1px solid transparent;
	justify-content: center;
}

/*SECTION 1D: This contains all of the styling for my mobile menu */
.MobileMenuDropdownDivLink::after
{
    content: "\a";
    white-space: pre;
}
.MobileMenuDropdownDivLink
{
	display:block;
	text-align: center;
	font-family: Arial;
	font-size: 20px;
	text-decoration: none;
	padding-top: 5%;
	padding-bottom: 5%;
	background: white;
	padding-left: 50px;
	padding-right: 50px;
}
#MobileMenuDropdownDiv
{
	display: none;
}

/*SECTION 2: This contains all the styling used for mobile devices*/
@media only screen and (max-width: 700px)
{
	#GOCFooterLogo
	{
		height: 10%;
	}
	#FPOFooterLogo
	{
		height: 10%;
	}
	#FooterBar
	{
		margin-top: 15%;
	}
	.FooterText
	{
		display: none;
	}
	#TopBanner
	{
		display: none;
	}
	#MenuTextDesktop
	{
		display:none;
	}
	#MobileMenu
	{
		display:block;
	}
	a.MenuLink
	{
	display: none;
	}
	#MobileMenuDropdownDiv
	{
	margin-top: -10%;
	position:fixed;
	text-align: center;
	padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 10%;
	padding-right: 10%;
	border-top: hidden;
	}
	#MobileMenuDropdownDiv
	{
	display: block;
	}
}