body {
	background-image: url("images/background-index.jpg");
	background-repeat: no-repeat center center fixed;
	background-size: cover;
}

.nav {
	background: #333333;
	display:flex;
	margin-bottom: 0%;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
}

.nav a {
	display: block;
	color: white;
	text-align: center;
	padding: 5px;
	text-decoration: none;
}

.center {
	padding: 70px 0;
	border: 3px;
	text-align: center;
	color: #000000;
	text-decoration: none;
}

.left {
	float: left;
	width: 100%%;
	padding: 20px;
	margin: 20px;
	text-decoration: none;
	background-color: #ffffff;
	opacity: 0.7;
}

@media only screen and (max-width : 700px){
	.nav {
		flex-direction: column;
	}

	.responsive iframe {
 		position:absolute;
 		left:50%;
 		top:50%;
 		margin-top:20%;
	}
}

.responsive {
	text-align: center;
	position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.responsive iframe {
	position: absolute;
    top: 0;
    left: 0;
    margin-top:10%;
    width: 100%;
    height: 100%;
}

.active {
	background-color: #99c0ff;
}

.embed {
	width: 100%;
	height: 100%;
	border: none;
}

.header-center {
	text-align: center;
	color : #ffffff;
	text-decoration: none;
}

.header-left {
	text-align: center;
	color : #000000;
	text-decoration: none;
}

.text-color {
	text-align: left;
	color : #000000;
	text-decoration: none;
}

.footer {
   position: fixed;
   font-size: 10px;
   height:3%;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #333333;
   color: white;
   text-align: center;
}