* {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	height: 100%;
	font-weight: 400;
	font-size: 16pt;
	font-family: 'Carrois Gothic', sans-serif;
}

/* Style the video: 100% width and height to cover the entire window */
#video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}


.hero {
	background-image: url(images/Back_0.png);
	background-size: cover;
	background-position: center top;
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.menu {
	position: absolute;
	left: 48%;
	bottom: 20%;
	width: 100%;
	text-align: center;
	-ms-transform: translate(-48%, -20%);
	transform: translate(-48%, -20%);
}

.title-logo {
	position: absolute;
	left: 48%;
	top: 28%;
	transform: translate(-48%, -28%); /* (x, y)  => position */
	-ms-transform: translate(-48%, -28%); /* IE 9 */
	-webkit-transform: translate(-48%, -28%); /* Chrome, Safari, Opera */    
}

.title-logo img {
    max-width:100%;
    height:auto;
}

.menu-item {
	display: inline-block;
}

.menu-button {
	display: inline-block;
	text-align: center;
}

.menu-button a {
	text-transform: uppercase;
	text-decoration:none;
	color: rgb(221, 230, 222);
	font-size: 1em;
	border: 3px solid rgb(221, 230, 222);
	padding: 0.5em 1em;
	text-align: center;
}

.menu-button a:hover {
	background-color: rgb(106, 255, 168);
	border: 3px solid rgb(106, 255, 168);
	color: rgb(18, 14, 33);
	
}

.menu-item a {
	text-transform: uppercase;
	text-decoration:none;
	color: rgb(221, 230, 222);
	font-size: 1em;
	margin: 0.5em 3em;
	text-align: center;
}

.menu-item a:hover {
	color: rgb(106, 255, 168);
}



/*************responsive css***************/

@media only screen and (max-width: 1366px) and (orientation: portrait){

	
	
	.title-logo {
		width: 70%;
		position: absolute;
		left: 48%;
		top: 12%;
		transform: translate(-48%, -12%); /* (x, y)  => position */
		-ms-transform: translate(-48%, -12%); /* IE 9 */
		-webkit-transform: translate(-48%, -12%); /* Chrome, Safari, Opera */  
	}
	
	.title-logo img {
		width:100%;
		height:auto;
	}
		
	.menu {
		left: 50%;
		bottom: 10%;
		-ms-transform: translate(-50%, -10%);
		transform: translate(-50%, -10%);
		-webkit-transform: translate(-50%, -10%);
	}
	
	.menu-button a, .menu-item a {
		font-size:1.2em;
	}
	
	
}


@media only screen and (max-width: 950px) and (orientation: portrait){
	

	.menu {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 50%;
		bottom: 6%;
		width: 100%;
		text-align: center;
		-ms-transform: translate(-50%, -6%);
		transform: translate(-50%, -6%);
		-webkit-transform: translate(-50%, -6%);
	}
	
	.title-logo {
		order: 1;
		position: absolute;
		left:40%;
		top: 10%;
		-ms-transform: translate(-40%, -10%);
		transform: translate(-40%, -10%);
		-webkit-transform: translate(-40%, -10%);
		width:80%;
	}

	.title-logo img {
		max-width:100%;
		height: auto;
	}	
		
	.menu-button {
		order: 2;
		margin-bottom: 0.6em;
	}
	
	.menu-item {
		order: 3;
		margin-top: 1.2em;
	}
	
}

@media only screen and (max-height: 450px) and (orientation: landscape){
	

	.menu {
		position: absolute;
		left: 50%;
		bottom: 10%;
		width: 100%;
		text-align: center;
		-ms-transform: translate(-50%, -10%);
		transform: translate(-50%, -10%);
		-webkit-transform: translate(-50%, -10%);
	}
	
	.title-logo {
		position: absolute;
		left:48%;
		top: 15%;
		-ms-transform: translate(-48%, -15%);
		transform: translate(-48%, -15%);
		-webkit-transform: translate(-48%, -15%);
		max-width:50%;
	}

	.menu-button a, .menu-item a {
		font-size:0.7em;
		margin-left: 1em;
		margin-right: 1em;
	}
}
	
@media only screen and (max-height: 320px) and (orientation: landscape){
	

	.menu-button a, .menu-item a {
		font-size:0.6em;
		margin-left: 0.8em;
		margin-right: 0.8em;
	}
}

@media only screen and (max-width: 420px) and (orientation: portrait){
	

	.menu-button a, .menu-item a {
		font-size:0.8em;
	}
	
	.menu-button {
		order: 2;
		margin-bottom: 0.4em;
	}
	
	.menu-item {
		order: 3;
		margin-top: 0.8em;
	}
}

@media only screen and (orientation: portrait){
	
	#video {
	  right: -280px;	  
	  bottom: 0px;	  
	}
	
	.hero {
		background-image: url(images/Back_0_prt_lrg.png);
		background-position: center top;
		background-repeat: no-repeat;
	}
}