body{
	background:#111;
	font-family:Arial, Helvetica, sans-serif;
	color:#ccc;
	padding:0;
	margin:0;
	height:100%;
	width:100%;
}

html{
	height:100%;
	margin:0;
	padding:0;
}

img{
	border:none;
}

a, a:hover, a:visited{
	outline:none;
	border:none;	
	text-decoration:none;
}

a{
	color:#ccc;
	font-weight:bold;
}

a:hover{
	color:#fff;
	text-decoration:underline;
}

h1{
	padding:0;
	margin:0;
	font-size:5vw;
	font-weight:bold;
	color:#fff;
}

h2{
	font-size:1.5vw;
	padding:10px 0px;
	margin:0;
	color:#ccc;
}

h3{
	font-size:2vm;
	color:#ccc;

}

p{
	text-align:justify;
	clear:both
}


.videocontainer {
    position: absolute;
	top:0;
	left:0;
    width: 100%;
    height: 100%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	
}

.container {
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: space-around;
        height: 100%;
        width: 100%;
        background:none;
    }
	
.container a {
	display:block;
	padding-top:45%;
	width:100%;	
	height:65%;
	text-align:center;
	text-decoration:none;
	font-size:2vw;
	background:url(../images/overlay.png) center no-repeat;
	background-size:cover;
	color:#fff;
}

.container a:hover {
	background:url(../images/overlay_on.png) center no-repeat;
	background-size:cover;
	color:#fff;
}

.container a:hover strong {
}
	
.cell {
        height: 30%;
        width: 30%;
		top: 0;
  		left: 0;
  		bottom: 0;
  		right: 0;
    }

/* MAIN DIVS WINDOW ABOVE 900px 

HORIZONTAL VIEW */

@media (min-width: 900px) {

div.stretchy-wrapper {
	width:50%;
	padding-bottom: 50%;
	position: relative;
	float:left;
	background-size:cover;	
	background-repeat:no-repeat;
	background-color:#222;
	color:#CCC;	
	
}

div.stretchy-wrapper > div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	padding:30px;
}

.separator1 {
	width:50%;
	padding-bottom: 5%;
	position: relative;
	float:left;
	background-color:#000;
}
.separator2 {
	width:50%;
	padding-bottom: 5%;
	position: relative;
	float:left;
	background-color:#222;
}

#slacklinetarget {
	position:fixed;
	height:10%;
	width:5%;
	left:50%;
	margin-left:-6%;
	top:20%;
	background:url(../images/slacklinetarget.png) center no-repeat;
	z-index:1;	
}


}




/* MAIN DIVS WINDOW UNDER 799px

VERTICAL VIEW */

@media (max-width: 900px) {
	
h1{
	padding:0;
	margin:0;
	font-size:10vw;
	font-weight:bold;
	text-align:left;
}

h2{
	font-size:3vw;
	padding:0;
	margin:0;
}

h3{
	font-size:2vm;
	color:#ccc;
	padding:0;
	margin:0;

}

.container a {
	display:block;
	padding-top:45%;
	width:100%;	
	height:65%;
	text-align:center;
	text-decoration:none;
	font-size:4vw;
	background:url(../images/overlay.png) center no-repeat;
	background-size:cover;
	color:#fff;
}


div.stretchy-wrapper {
	width:100%;
	padding-bottom: 100%; /* ratio 1:1 */
	position: relative;
	background-color:#222;
	color:#CCC;
	float:left;
	background-size:cover;	
	background-repeat:no-repeat;
	overflow:hidden;
}

div.stretchy-wrapper > div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	padding:30px;
}

#slacklinetarget {
	visibility:hidden;
	width:0;
	height:0;
}
#slacklinetarget img {
	visibility:hidden;
	width:0;
	height:0;
}

}