@import ".././font/CeraPro/style.css";

html, body{
	padding: 0px;
	margin: 0px;
	
}
body {
	background-color: #e3e3e3;
	background-image: url(.././img/bg.png);
	background-repeat: repeat-y;
	background-size: cover;
	height: 100%;
	font-family: 'Cera Pro Light';
	font-size: 14px;
}

/** Typografy **/
h1,h2,h3,h4,h5,h6{
	font-family: 'Cera Pro Bold'
}
.text_center{
	text-align: center;
}
.text_white{
	color:white;
}

.title{
	position: relative;
	display: block;
	text-align: center;
}


/** end typografy **/

.center{
	position: absolute;
	top: 50%;
  	left: 45%;
  	transform: translate(-50%, -50%); 
  	width: 650px
	
}

.logo{
	text-align: center;
}

.social {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row
}
.soc_logo {
	flex: 1 125px;
	text-align: center;
}
.soc_logo img {
	height: 46px;
	width: 46px;
	padding: 25px;
}

.soc_logo a:hover img{
	transform: scale(1.1);	
}
.video-list {
	display: flex;	
}
.change-video {
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
	margin-top:20px;
	margin-bottom:10px;
	border: 6px solid #BFE2FF;
	transition: box-shadow 0.3s linear;
	cursor: pointer;
	background: #BFE2FF;
}
.change-video:nth-child(2) {
	margin-left: 16px;
	margin-right: 16px;
}
.change-video span {
	display: block;
	padding: 6px 12px 0 12px;
	font-size: 18px;
	font-family: 'Roboto Condensed', sans-serif;
}
.change-video:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.change-video.active {
	border: 6px solid #00b3ff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	color: #FFF;
	background: #00b3ff;
}