@charset "UTF-8";

header {
	font-family: 'Bebas Neue', cursive;
	font-size : 20px;
	width: 100%;
	top: 10px;
	position : absolute;	
	background : transparent;
	z-index: 2;
}


body {
	margin-top: 0px;
	margin-left : 0px;
	margin-bottom:0px;
	margin-right:0px;
	background : black;
	
}

#titleBG {
/*not work if the screen ratio is below 16/9*/
	background-position: bottom;
	z-index: -1;
    width:100%;     
    height: auto;
	margin-bottom:0;
}

	
nav ul{
	margin: 0;
	padding:0;
	list-style: none;
}

nav li{
	display : inline-block;
	margin-left: 20px;
}

nav a{
	color : white;
	text-decoration: none;
	text-transform: uppercase;
	font-size :3vw;
	font-weight : bold;
}

 nav a:hover {
	color : antiquewhite;
}


main {
	font-family: 'Bebas Neue', cursive;
	
}

.col1 {
	border-style: groove;
    border-color: darkgray;
    border-width: 5px;
	float:left;
	width : 49%;
	height : auto;
}

.col2 {
	border-style: groove;
    border-color: darkgrey;
    border-width: 5px;
	margin-top:0;
	float:right;
	width :49%;
	height : auto;
}

.col3 {
	border-style: solid;
    border-color: lightgrey;
    border-width: 5px;
	margin-top:0;
	float:left;
	width :49%;
	height : auto;
	background-color: black;
}

.col4 {
	border-style: groove;
    border-color: lightgrey;
    border-width: 5px;
	margin-top:0;
	float:right;
	width :49%;
	height : auto;
	background-color: black;
}


#CoMVideo {

    z-index: -1;
/*not work if the screen ratio is below 16/9*/
    width:100%;     
    height: auto;
	margin-bottom:0;
}


#MPHVideo {
    z-index: -1;
/*not work if the screen ratio is below 16/9*/
    width:100%;     
    height: auto;
	margin-bottom:0;
}

#SCOTTVideo {
	z-index: -1;
    width:100%;     
    height: auto;
	margin-bottom:0;
}

#TWEVideo {
	z-index: -1;
    width:100%;     
    height: auto;
	margin-bottom:0;
}