@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'ADLaMDisplay-Regular';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ADLaMDisplay-Regular.ttf');
}

:root{
	--color-background: #FDD089;
	--color-accent: #800032;
	--color-accent-dark: #720027;
	--color-highlight: #FFCC00;
	--color-text-1: #FFFFFF;
	--height-bar: 70px;
	--width-content: 1200px;
	--radius-border: 5px;
	--radius-border-img: 20px;
	--size-font-h1: 28pt;
	--size-font-h2: 22pt;
	--size-font-h3: 18pt;
	--size-font-p: 12pt;
	--size-font-h1-1245: 24pt;
	--size-font-h2-1245: 20pt;
	--size-font-h3-1245: 14pt;
	--size-font-p-1245: 12pt;
	--size-font-h1-768: 22pt;
	--size-font-h2-768: 18pt;
	--size-font-h3-768: 14pt;
	--size-font-p-768: 11pt;
}

*{
	margin: 0;
	padding: 0;
}

html{
	height: 100%;
}

body {
	height: 100%;
	background-color: var(--color-background);
	font-family: "ADLaMDisplay-Regular";
}

header{
	width: 100%;
	height: var(--height-bar);
	background-color: var(--color-accent);
	position: fixed;
	display: flex;
	justify-content: center;
	z-index: 5;
}

.content-head{
	width: var(--width-content);
	height: 100%;
	display: flex;
}

.logo{
	width: 25%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.logo img{
	width: auto;
	height: 75%;
}

.menu{
	width: 75%;
	height: 100%;
}

.menu nav{
	width: 100%;
	height: 100%;
}

.menu nav .toggle_button{
	width: 25px;
	height: 25px;
	position: absolute;
	top: -48px;
	right: 35px;
	display: none;
	cursor: pointer;
}

.toggle_button .bar1{
	top: 6px;
	height: 3px;
	width: 25px;
	position: absolute;
	background: var(--color-text-1);
	border-radius: 100px;
	transition: 500ms;
}

.toggle_button .bar2{
	top: 12px;
	height: 3px;
	width: 25px;
	position: absolute;
	background: var(--color-text-1);
	border-radius: 100px;
	transition: 500ms;
}

.toggle_button .bar3{
	top: 18px;
	height: 3px;
	width: 25px;
	position: absolute;
	background: var(--color-text-1);
	border-radius: 100px;
	transition: 500ms;
}

.menu ul{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	list-style: none;
}

.menu ul li{
	width: 190px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-text-1);
	font-size: var(--size-font-p);
}

.menu ul li a{
	color: var(--color-text-1);
	text-decoration: none;
}

.menu ul li:hover{
	background-color: var(--color-highlight);
	transition: 750ms ease-out;
}

.menu .expandable_li{
	position: relative;
	cursor: pointer;
}

.menu .expandable_li:hover .dropdown{
	transform: scale(1,1);
}

.menu .dropdown{
	height: min-content;
	display: flex;
	flex-direction: column;
	position: absolute;
	top: var(--height-bar);
	background-color: var(--color-accent);
	transform: scale(0,0);
	transition: 750ms ease-in-out;
}

.menu .dropdown li{
	height: var(--height-bar);
}

.menu input[type="checkbox"]{
	display: none;
}

.banner{
	width: 100%;
	height: 600px;
	position: relative;
	top: var(--height-bar);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("../images/Background1.jpg");
}

.banner .overlay{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(rgba(253, 208, 137, 0.01) 75%, rgba(253, 208, 137, 1) 100%);
}

.banner .overlay h1{
	font-size: var(--size-font-h1);
	line-height: 1.5em;
	text-align: center;
	color: var(--color-text-1);
	text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
}

.banner_slide{
	width: 100%;
	height: 600px;
	position: absolute;
	top: var(--height-bar);
	left: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("../images/Background2.jpg");
	opacity: 0;
	animation: slide 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.banner_slide .overlay{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(rgba(253, 208, 137, 0.01) 75%, rgba(253, 208, 137, 1) 100%);
}

.banner_slide .overlay h1{
	font-size: var(--size-font-h1);
	line-height: 1.5em;
	text-align: center;
	color: var(--color-text-1);
	text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
}

.container-main{
	width: 100%;
	margin-top: var(--height-bar);
	display: flex;
	justify-content: center;
}

.content-main{
	width: var(--width-content);
}

.content-main ul{
	width: 100%;
	list-style: none;
	display: flex;
	justify-content: space-evenly;
}

.content-main .content-main-ul-col1{
	flex-direction: column;
	align-items: center;
}

.content-main ul li{
	background-color: var(--color-accent);
}

.content-main ul li h1{
	font-size: var(--size-font-h1);
	text-align: center;
	color: var(--color-text-1);
	padding-top: 15px;
}

.content-main ul li p{
	font-size: var(--size-font-p);
	line-height: 1.5em;
	text-align: justify;
	color: var(--color-text-1);
	padding: 5px;
}

.content-main .content-main-li-col1{
	width: 80%;
}

.content-main .content-main-li-col1:first-child{
	border-top-left-radius: var(--radius-border);
	border-top-right-radius: var(--radius-border);
}

.content-main .content-main-li-col1:last-child{
	border-bottom-left-radius: var(--radius-border);
	border-bottom-right-radius: var(--radius-border);
}

.content-main .content-main-li-col1 img{
	width: 33%;
	height: auto;
	float: left;
	padding: 15px;
	border-radius: var(--radius-border-img);
}

.content-main .content-main-li-col1 p{
	padding: 10px 15px 10px 15px;
}

.content-main .content-main-li-col2{
	width: 40%;
	border-radius: var(--radius-border);
}

.container-grid{
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: calc(var(--height-bar)/2);
	margin-bottom: calc(var(--height-bar)/2);
}

.content-grid{
	width: auto;
	display: grid;
	justify-content: center;
	grid-template-columns: 450px 450px;
	grid-template-rows: 300px 150px 150px;
	gap: 5px;
	grid-template-areas: 
		"item1 item1"
		"item2 item4"
		"item3 item4"
}

.item-grid{
	background-color: var(--color-accent);
	border-radius: var(--radius-border);
}

.content-grid-item{
	padding-left: 15px;
}

.content-grid-item h2{
	font-size: var(--size-font-h2);
	color: var(--color-text-1);
}

.content-grid-item p{
	font-size: var(--size-font-p);
	color: var(--color-text-1);
}

.content-grid-item a{
	color: var(--color-text-1);
	text-decoration: none;
}

#grid-item1{
	grid-area: item1;
	display: flex;
	justify-content: center;
	align-items: center;
}

#grid-item1 img{
	width: auto;
	height: 90%;
}

#grid-item2{
	grid-area: item2;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#grid-item2 img{
	width: auto;
	height: 75%;
	padding-left: 18.75px;
}

#grid-item3{
	grid-area: item3;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#grid-item3 img{
	width: auto;
	height: 75%;
	padding-left: 18.75px;
}

#grid-item4{
	grid-area: item4;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#grid-item4 h2{
	font-size: var(--size-font-h2);
	color: var(--color-text-1);
	text-align: center;
}

#grid-item4 h3{
	font-size: var(--size-font-h3);
	color: var(--color-text-1);
	text-align: center;
}

#grid-item4 p{
	font-size: var(--size-font-p);
	color: var(--color-text-1);
	text-align: center;
}

#grid-item4 a{
	color: var(--color-text-1);
	text-decoration: none;
}

footer{
	width: 100%;
	height: var(--height-bar);
	background-color: var(--color-accent);
	display: flex;
	justify-content: center;
}

.content-foot{
	width: var(--width-content);
	height: 100%;
	display: flex;
}

.copyright{
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.copyright p{
	font-size: var(--size-font-p);
	color: var(--color-text-1);
	padding-left: 5px;
}

.disclaimer{
	width: 50%;
	height: 100%;
}

.disclaimer nav{
	height: 100%;
	width: 100%;
}

.disclaimer ul{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	list-style: none;
}

.disclaimer ul li{
	width: min-content;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 5px 0 5px;
}

.disclaimer ul li:hover{
	background: var(--color-highlight);
	transition: 750ms ease-out;
}

.disclaimer ul li a{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	font-size: var(--size-font-p);
	color: var(--color-text-1);
	text-decoration: none;
}

@media screen and (max-width:1245px){
	.content-head{
		width: 100%;
	}
	
	.logo{
		padding-left: 15px;
	}
	
	.menu{
		padding-right: 15px;
	}
	
	.banner .overlay h1{
		font-size: var(--size-font-h1-1245);
	}
	
	.banner_slide .overlay h1{
		font-size: var(--size-font-h1-1245);
	}
	
	.content-main{
		width: 100%;
	}
	
	.content-main ul li h1{
		font-size: var(--size-font-h1-1245);
	}
	
	.content-main ul li p{
		font-size: var(--size-font-p-1245);
	}
	
	.content-grid{
		grid-template-columns: 368px 368px;
		grid-template-rows: 246px 123px 123px;
	}
	
	.content-grid-item h2{
		font-size: var(--size-font-h2-1245);
	}
	
	.content-grid-item p{
		font-size: var(--size-font-p-1245);
	}
	
	#grid-item4 h2{
		font-size: var(--size-font-h2-1245);
	}
	
	#grid-item4 h3{
		font-size: var(--size-font-h3-1245);
	}
	
	#grid-item4 p{
		font-size: var(--size-font-p-1245);
	}
	
	.content-foot{
		width: 100%;
	}
	
	.copyright p{
		font-size: var(--size-font-p-1245);
		padding-left: 15px;
	}
	
	.disclaimer{
		padding-right: 15px;
	}
	
	.disclaimer ul li a{
		font-size: var(--size-font-p-1245);
	}
}

@media screen and (max-width:768px){
	.content-head{
		position: relative;
	}
	
	.logo{
		width: 100%;
	}
	
	.menu{
		width: 100%;
		position: absolute;
		top: var(--height-bar);
	}
	
	.menu nav{
		display: flex;
		justify-content: flex-end;
	}
	
	.menu nav .toggle_button{
		display: flex;
		z-index: 2;
	}
	
	.menu nav input[type="checkbox"]:checked ~ ul{
		right: 0;
	}
	
	.menu nav input[type="checkbox"]:checked ~ .toggle_button .bar1{
		transform: translateY(6px) rotate(-45deg);
	}
	
	.menu nav input[type="checkbox"]:checked ~ .toggle_button .bar2{
		opacity: 0;
	}	
	
	.menu nav input[type="checkbox"]:checked ~ .toggle_button .bar3{
		transform: translateY(-6px) rotate(45deg);
	}	
	
	.menu ul{
		width: 50%;
		height: min-content;
		background: var(--color-accent);
		position: absolute;
		right: -100%;
		display: block;
		transition: 750ms ease-in-out;
	}
	
	.menu ul li{
		width: 100%;
	}
	
	.menu ul li:hover{
		background: none;
	}
	
	.menu .expandable_li{
		height: min-content;
		width: 100%;
		display: block;
	}
	
	.menu .expandable_li:hover .dropdown{
		transform: none;
	}
	
	.menu .expandable_li label{
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 25px 0 25px 0;
		cursor: pointer;
		transition: 750ms ease-in-out;
	}
	
	.menu .dropdown{
		width: 100%;
		display: none;
		position: static;
		transform: none;
		background-color: var(--color-accent-dark);
	}
	
	.menu .expandable_li input[type="checkbox"]:checked ~ .dropdown{
		display: block;
	}
	
	.menu .expandable_li input[type="checkbox"]:checked ~ label{
		background-color: var(--color-highlight);
	}
	
	.banner .overlay h1{
		font-size: var(--size-font-h1-768);
	}
	
	.banner_slide .overlay h1{
		font-size: var(--size-font-h1-768);
	}
	
	.content-main ul{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 15px;
	}
	
	.content-main .content-main-ul-col1{
		gap: 0px;
}
	
	.content-main ul li h1{
		font-size: var(--size-font-h1-768);
	}
	
	.content-main ul li p{
		font-size: var(--size-font-p-768);
	}
	
	.content-main .content-main-li-col1{
		width: 90%;
	}
	
	.content-main .content-main-li-col2{
		width: 90%;
	}
	
	.content-grid{
		grid-template-columns: 300px;
		grid-template-rows: 200px 220px 120px 120px;
		grid-template-areas: 
			"item1"
			"item4"
			"item2"
			"item3"
	}
	
	.content-grid-item h2{
		font-size: var(--size-font-h2-768);
	}
	
	.content-grid-item p{
		font-size: var(--size-font-p-768);
	}
	
	#grid-item1 img{
		height: 75%;
	}
	
	#grid-item2 img{
		height: 50%;
	}
	
	#grid-item3 img{
		height: 50%;
	}
	
	#grid-item4 h2{
		font-size: var(--size-font-h2-768);
	}
	
	#grid-item4 h3{
		font-size: var(--size-font-h3-768);
	}
	
	#grid-item4 p{
		font-size: var(--size-font-p-768);
	}
	
	footer{
		height: calc(var(--height-bar)*1.25);
	}
	
	.content-foot{
		flex-direction: column-reverse;
	}
	
	.copyright{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
	}
	
	.copyright p{
		font-size: var(--size-font-p-768);
		padding: 0;
	}
	
	.disclaimer{
		width: 100%;
		height: 50%;
		padding: 0;
	}
	
	.disclaimer ul{
		justify-content: center;
	}
	
	.disclaimer ul li:hover{
		background: none;
	}
	
	.disclaimer ul li a{
		font-size: var(--size-font-p-768);
	}
}