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

h1 {
	
}

h2 {
	margin:0;
	font-weight: 700;
}

html,body {
	margin:0;
	padding:0;
	/*font-family: Bungee;*/
	font-family: "Source Sans Pro", sans-serif;
	height: 100%;
}

iframe {
	border:0;
	width:100%;
	height:100%;
}

.container {
	display:flex;
	flex-direction: column;
	
	height:calc(100% - 60px);
	padding-top:60px;
}

.popup {
	display: none;
	position: absolute;
	z-index: 99 !important;
	background: rgba(230,230,230,1);
	border: 1px solid black;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	max-width: 90%;
	max-height: 90%;
	overflow: auto;
	
	font-family: Arial;
}

.user {
	padding:0;
	left:0;
	top:0;
	transform:unset;
	border: 1px solid black;
	border-collapse: collapse;
	white-space: nowrap;
}

.header {
	/*height:8%;*/
	height:60px;
	width:100%;
	background-color:white;
	
	text-align: center;
	
	position: fixed;
	top: 0;
	z-index: 100;
}

.header img {
	z-index: 90;
	position: relative;
	height:140%;
}

.menu {
	height:92%;
	display:flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-evenly;
}

/*------------- TOP MENU -------------------*/

.topMenu {
	display:flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-evenly;
	transition: 0.1s;
	overflow:hidden;
	height: 60px;
}

.topMenuHidden {
	height: 0px;
}

.topMenuEl {
	flex-grow: 1;
	position:relative;
	cursor:pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.topMenuElText {
	z-index: 95;
	position: relative;
	color:white;
	font-size: 22px;
	text-shadow: 0px 0px 5px rgba(66,66,66,.75);
	text-transform: uppercase;
	white-space: nowrap;
	transition:1s;
}

/*-------------------MID TILES----------------*/

.tiles {
	/*height:92%;*/
	display:flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-evenly;
	height: 100%;
}

.tilesElement {
	border:10px solid;
	flex-grow: 1;
	flex-basis: 30%;
	min-width:350px;
	min-height:250px;
	position:relative;
	cursor:pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tilesElementImage {
	background-size:cover;
	background-position: center;
	width:100%;
	height:100%;
	transition:0.5s;
	position: absolute;
}

.greyed {
	filter: grayscale(100%);
	transition: 2s;
}

.tilesElement > h2 {
	z-index: 95;
	position: relative;
	
	color:rgba(255,255,255,1);
	font-size: 35px;
	text-shadow: 0px 0px 5px rgba(66,66,66,.75);
	text-transform: uppercase;
	white-space: nowrap;
	
	transition:1s;
	
	user-select:none;
}

.tilesElMax {
	position:absolute !important;
	transition:0.5s;
	z-index: 96;
}

.tilesElMax > h2 {
	/*transition: color 1s;
	color:rgba(0,0,0,0);
	text-shadow: 0px 0px 5px rgba(66,66,66,0);*/
}

.tilesElMax > h3 {
	font-size:0px;
}

/*--------------------------------------------*/

.contentPage {
	display:none;
	
	/*height: calc(85vh - 20px);
	width: calc(100vw - 20px);*/
	min-height:1px;
	
	border: 10px solid;
	flex-grow:1;
	/*padding:10%;*/
}

table,th,td {
	border: 1px solid black;
	border-collapse: collapse;
	white-space: nowrap;
	padding: 0pt;
}

th,td {
	padding-left:4px;
	padding-right:4px;
}

.bigBold {
	font-size:43px;font-weight:900;text-transform:uppercase;color: #dc1d03;
}

.midBold {
	font-size:16px;font-weight:900;text-transform:uppercase;color: #dc1d03;
}

.right {
	text-align:right;
	width:100%;
}

.just {
	text-align:justify;
	width:100%;
}