@import url(http://fonts.googleapis.com/css?family=Gudea:400,700);

body{
	background-image: url("../images/fond.jpg")
}

html{
	
}

.full-page {
	overflow-x:hidden;
	overflow-y:hidden;
}

.knights-container {
	z-index: 10;
	position: relative;
	height: 100%;
	margin-left:auto;
	margin-right:auto;
	text-align: left;
}

.text-space {
	background-color: rgba(1, 1, 1, 0.6);
	padding: 40px 15px 40px 15px;
	width: 100%;
	float:left;
	vertical-align: baseline;
	font-family: 'Gudea', sans-serif;
	font-size: 20px;
	color:#EEF8E9;
	display: inline;
}

.humble {
	background-color: rgba(1, 1, 1, 0.6);
	text-align: center;
	padding-top: 15px;
}

.left {
	float: left;
}

.small-img {
	width: 240px;
	display: inline;
	vertical-align: baseline;
}

.right {
	float: right;
}

.section-title {
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 5px;
}

.dropshadow {
	box-shadow: 0px 0px 64px #000;
}

.clickable-img {
	border: 7px solid #000000;
}

.last-image-space {
	padding: 20px 15px 40px 15px;
}

.centered {
	margin-left:auto;
	margin-right:auto;
}

.centered-width {
	margin-left:auto;
	margin-right:auto;
}

#logo-div {
	background-image:url('../images/titre.png');
	background-size:contain;
	background-repeat: no-repeat;
	width: 160%;
	height: 100%;
	margin-left: -30%;
	z-index: 0;
	position: relative;
}

.image-space {
	background-color: rgba(1, 1, 1, 0.6);
	padding: 20px 15px 0px 15px;
	width: 100%;
	float:left;
	vertical-align: baseline;
}

.bottom-image-space {
	background-color: rgba(1, 1, 1, 0.6);
	padding: 0px 15px 25px 15px;
	width: 100%;
	float:left;
	text-align: center;
	vertical-align: baseline;
}

.bottom-image-space img:hover {
	padding-top: 3px;
}

.bottom-image {
	padding-right: 15px;
}

.last-bottom-image {
	padding-right: 0px;
}


.column {
	float:left;
	width: 280px;
	display:inline;
	text-align: center;
	margin-right: 45px;
}

.column img{
	width: 100%;
	display: inline;
	vertical-align: baseline;
}

.no-margin {
	margin-right: 0px !important;
}

.black-bg {
	margin-top: -25%;
	background-color: rgba(1, 1, 1, 0.6);
	height: 30%;
	width: 100%;
	z-index: -10;
}

#logo-container {
	z-index: 3;
	position: relative;
}

#greenlight-image {
	width: 100%;
}

#yellow-container {
	display: block;
}

#purple-container {
	display: block;
}

.full-img {
	width: 100%;
}

#trailerplayer {
	display: block;
	margin-left: auto;
	margin-right: auto;
	cursor:pointer;
	box-shadow: 0px 0px 64px #000;
}

#video-wrapper {
	text-align: center;
	background-color: rgba(1, 1, 1, 0.6);
	z-index: 6;
}

#greenlight {
	/*background-image:url('../images/baniere_greenlight.png');
	background-size:contain;
	background-repeat: no-repeat;*/
	background-color: rgba(1, 1, 1, 0.6);
	z-index: 10;
	/*height: 172px;*/
}

.coming-soon {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	font-size: 30px !important;
	text-align: center;
}

#contest-banner {
	background-color: rgba(1, 1, 1, 0.6);
	padding-bottom: 15px;
}

@media (max-width: 1000px) and (min-width: 600px) {
	#contest-img {
		width: 600px;
	}

	#trailerplayer {
		width: 600px;
		height: 304px;
	}
	
	.desktop-images {
		display: none !important;
	}

	#mobile-carousel {
		display: block !important;
	}

	#logo-container {
		width: 600px;
		height: 375px;
		margin-bottom: -37px;
	}

	.knights-container {
		width: 600px;
		text-align:center;
	}

	.small-img {
		margin: 0px auto;
		padding: 0px;
		width: 100%;
	}

	.left {
		float: none;
	}

	.right {
		float: none;
	}

	.column {
		width:80%;
		float:none;
	}

	.text-space {
		padding: 10px 15px 10px 15px;
	}
}

@media (max-width: 600px) {
	#contest-img {
		width: 300px;
	}

	#trailerplayer {
		width: 300px;
		height: 169px;
	}

	#logo-container {
		width: 300px;
		height: 175px;
	}

	.desktop-images {
		display: none !important;
	}

	#mobile-carousel {
		display: block !important;
	}

	.small-img {
		float:none !important;
		margin: 0px 0px 20px 0px;
		padding: 0px;
		width: 100%;
	}

	.black-bg {
		height: 43%;
		width: 300%;
		margin-left: -100%;
	}

	.knights-container {
		text-align: center;
	}

	.info {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}

	.left {
		float: none;
	}

	.right {
		float: none;
	}

	.column {
		width:80%;
		float:none;
	}

	.offset-y {
		margin-top: 0px;
	}

	.text-space {
		padding: 10px 15px 10px 15px;
	}

	.bottom-image {
		padding-right: 0px;
	}

	.last-bottom-image {
		padding-top: 15px;
		padding-right: 0px;
	}
}

@media (min-width: 1000px) {
	#contest-img {
		width: 960px;
	}

	#trailerplayer {
		width: 960px;
		height: 540px;
	}

	.desktop-images {
		display: block !important;
	}

	#mobile-carousel {
		display: none !important;
	}

	#logo-container {
		width: 960px;
		height: 600px;
		margin-bottom: -60px;
	}

	.centered-width {
		width: 960px;
	}

	.knights-container {
		width: 960px;
	}

	.info {
		width: 680px;
	}

	.last-image-space {
		padding: 20px 15px 40px 15px;
	}
}

@media (min-width: 1200px) {
	#yellow-knight {
		display: block;
		position: absolute;
		margin-top: -570px;
		margin-left: -410px;
		height: 659px;
		width: 384px;
		z-index: 0;
		background-image:url('../images/yellow_knight.png');
		background-repeat:no-repeat;
		background-size:cover;
	}

	#purple-knight {
		display: block;
		position: absolute;
		margin-top: -560px;
		margin-left: 933px;
		height: 636px;
		width: 401px;
		z-index: 0;
		background-image:url('../images/purple_knight.png');
		background-repeat:no-repeat;
		background-size:cover;
	}

	.top-tower {
		display: block;
		position: absolute;
		z-index: 1;
		background-image:url('../images/top_tour.png');
		background-repeat:no-repeat;
		background-size:cover;
		height: 421px;
		width: 365px;
	}

	.tower-intersection {
		display: block;
		position: absolute;
		z-index: 2;
		background-image:url('../images/bois.png');
		background-repeat:no-repeat;
		background-size:cover;
		height: 220px;
		width: 329px;
	}

	.tower-middle {
		display: block;
		position: absolute;
		z-index: 1;
		background-image:url('../images/milieu_tour.png');
		background-repeat:no-repeat;
		background-size:cover;
		height: 329px;
		width: 309px;
	}

	#top-tower-purple {
		margin-top: 40px;
		margin-left: 980px;
	}

	#top-tower-purple {
		margin-top: 40px;
		margin-left: 980px;
	}

	#intersection-purple-1 {
		margin-top: 440px;
		margin-left: 997px;
	}

	#tower-middle-purple-1 {
		margin-top: 630px;
		margin-left: 1000px;
	}

	#intersection-purple-2 {
		margin-top: 930px;
		margin-left: 992px;
	}

	#tower-middle-purple-2 {
		margin-top: 1120px;
		margin-left: 997px;
	}

	#intersection-purple-3 {
		margin-top: 1430px;
		margin-left: 992px;
	}

	#tower-middle-purple-3 {
		margin-top: 1600px;
		margin-left: 997px;
	}

	#intersection-purple-4 {
		margin-top: 1900px;
		margin-left: 992px;
	}

	#tower-middle-purple-4 {
		margin-top: 2100px;
		margin-left: 997px;
		height: 185px !important;
	}

	#top-tower-yellow {
		margin-top: 40px;
		margin-left: -380px;
	}

	#intersection-yellow-1 {
		margin-top: 440px;
		margin-left: -365px;
	}

	#tower-middle-yellow-1 {
		margin-top: 630px;
		margin-left: -360px;
	}

	#intersection-yellow-2 {
		margin-top: 930px;
		margin-left: -370px;
	}

	#tower-middle-yellow-2 {
		margin-top: 1120px;
		margin-left: -365px;
	}

	#intersection-yellow-3 {
		margin-top: 1430px;
		margin-left: -370px;
	}

	#tower-middle-yellow-3 {
		margin-top: 1600px;
		margin-left: -365px;
	}

	#intersection-yellow-4 {
		margin-top: 1900px;
		margin-left: -370px;
	}

	#tower-middle-yellow-4 {
		margin-top: 2100px;
		margin-left: -365px;
		height: 185px !important;
	}

	.social
	{
		position: fixed;
		top: 25%;
		left: 4px;
		width: 60px;
		z-index: 10;
	}

	#social-twitter {
		margin-top: -25px;
	}

	#social-greenlight {
		margin-top: -30px;
	}

	.social img:hover
	{
		padding-left: 10px;
	}
}

@media (max-width: 1200px) {
	#yellow-container {
		display: none;
	}

	#purple-container {
		display: none;
	}

	.social
	{
		width: 100%;
		text-align: center;
		height : 80px;
		float: left;
	}

	#social-twitter {
		margin-top: 10px;
	}

	#social-greenlight {
		margin-top: 0px;
	}

	.social-icon {
		width: 25%;
	}

	.social img:hover
	{
		margin-bottom: -8px;
		padding-top: 8px;
	}
}

.social-icon {
	position: relative;
	margin-top: 6px;
}