@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {
	margin: 0;
	padding: 0;
	font-family: "Courier New", sans-serif;
}


/*header*/

header,
main {
	background: #F7F7F7;
	margin: 0;
	padding: 0;
	overflow: auto;
}

.entete {
	height: 250px;
}

header img {
	width: 200px;
	height: 200px;
	margin-top: 12%;
}

header h1,
header h2 {
	font-family: "Courier New", sans-serif;
	font-weight: bold;
}

header h1 {
	color: #2F291D;
	font-size: 4em;
	margin-top: 12%;
}

header h2 {
	color: #512B20;
	margin-left: 5%;
}

header .stamp {
	height: auto;
	width: 100%;
	background: #2F291D;
	padding-top: 1%;
}

header nav {
	background: #2F291D;
	z-index: 125;
	position: -webkit-sticky;
	padding: 1% 0;
}

header nav ul {
	margin-bottom: 0;
	font-weight: bold;
}

.circle {
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	/* IE 9 */
	-webkit-transform: rotate(45deg);
	width: 200px;
}

.circle1 {
	width: 200px;
	height: 200px;
	border: 3px solid #FFF;
	position: relative;
	border-radius: 150px;
}

.circle2 {
	width: 190px;
	height: 190px;
	border: 3px dotted #FFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 150px;
}

.circle3 {
	width: 100px;
	height: 100px;
	border: 3px dotted #FFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 150px;
}

.circle_text {
	position: absolute;
	top: 50%;
	left: 15%;
	width: 150px;
	transform: translateY(-50%);
	font-size: 2em;
	font-weight: bold;
	color: #FFF;
}

.one_star {
	position: absolute;
	top: 48%;
	left: 6%;
	color: #FFF;
}

.two_star {
	position: absolute;
	top: 48%;
	right: 6%;
	color: #FFF;
}


/*menu de nav*/

.sticky {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	border-top: 0;
}

.active{
	color: red;
}
header nav li {
	display: inline;
	font-size: 1.5em;
	text-align: center;
	padding: 4px 1%;
	color: #FFF;
	cursor: pointer;
}

header nav li a {
	color: #FFF;
}

header nav li a:hover {
	background: #58503f;
	color: #FFF;
	text-decoration: none;
}

header nav li:hover {
	background: #58503f;
}

.stamp {
	overflow: hidden;
}

.bande {
	overflow: hidden;
	position: relative;
	height: 350px;
}


/*fin header début main*/

main {
	position: relative;
}

video {
	width: 100vw;
	position: absolute;
	bottom: -60%;
}


/*général*/

h3 {
	text-align: center;
	padding-bottom: 7%;
	font-weight: bold;
	font-size: 2.3em;
}

.swap_text_menu {
	margin: 0 0 5% 0;
	font-weight: bold;
}

.swap_text_menu li {
	display: inline-block;
	width: 20%;
	text-align: center;
	border: 1px solid #FFF;
	border-right: none;
	padding: 1% 1%;
}

.swap_text_menu li:last-child {
	border-right: 1px solid #FFF;
	!important;
}

.hover {
	background: #c9c9c9;
}

.vals_text,
.tools_text,
.partners_img,
.school_text,
.pros_text,
.assoc_text,
.skills_text,
.exp_text,
.docs_text,
.calendar_text {
	display: none;
}

.active {
	background: #adadad;
}

.vals,
.tools,
.partners,
.school,
.pros,
.docs,
.assoc,
.skills,
.exp,
.calendar {
	cursor: pointer;
}

#fabrique,
#diffusions,
#empty,
#contact {
	color: #FFF;
	padding-bottom: 5%;
	padding-top: 5%;
}

#qui_sommes_nous p,
#formations p,
#fabrique p,
#diffusions p,
#empty p {
	color: #FFF;
	text-align: justify;
	font-size: 1.4em;
	line-height: 2em;
}


/*Qui somme nous*/

#qui_sommes_nous {
	background: url("../images/P1090086.jpg") center right no-repeat fixed;
	color: #FFF;
	padding-bottom: 35%;
	padding-top: 5%;
}


/*la fabrique*/

#fabrique {
	background: url("../images/Bocage.jpg") no-repeat fixed;
}

#empty {
	position: relative;
}

#empty ul {
	margin-top: 5%;
}

.logo_box {
	width: 15%;
	margin: 0 5% 5% 0;
	height: 250px;
	float: left;
	position: relative;
}

.partners_img img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	max-height: 350px;
}


/*video partie fabrique*/

.video_box {
	background-size: 100% 100%;
	width: 90%;
	height: 250px;
	padding: 3% 0;
	margin-top: 8%;
	position: relative;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	filter: grayscale(100%);
}

.video_box:hover {
	background-size: 100% 100%;
	filter: grayscale(0);
	cursor: pointer;
}

.video {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 150;
}

.video_legend {
	top: 80%;
	left: 55%;
	position: absolute;
	background: #2F291D;
	color: white;
	font-size: 1.4em;
	width: 40%;
	text-align: center;
}

.overlay {
	position: fixed;
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 100;
}

.cross {
	position: fixed;
	z-index: 105;
	color: #FFFFFF;
	top: 5%;
	right: 5%;
	cursor: pointer;
	font-size: 3em;
}


/*diffusions*/

#diffusions {
	background: url("../images/diffusion2%20-%20Copie.jpg") no-repeat fixed;
	padding-bottom: 35%;
}

#diffusions a {
	color: #FFF;
}


/*formation*/

#formations {
	background: url("../images/formations.jpg") center left no-repeat fixed;
	color: #FFF;
	padding-bottom: 35%;
	padding-top: 5%;
}

.calendar_text a {
	color: #4a4746;
	font-weight: bold;
	text-decoration: underline;
}

.calendar_text ul {
	list-style: none;
}

.calendar_text li {
	font-size: 1.4em;
}

.pros {
	width: 30% !important;
}


/*contact*/

#contact {
	background: url("../images/riviere.jpg") no-repeat fixed;
}

form {
	padding: 2%;
	border-radius: 20px;
	background: #2F291D;
	left: 50%;
	transform: translateX(-50%);
}

form label {
	color: #FFF;
}

#infos {
	margin-bottom: 3%;
}

#formations .swap_text_menu li {
	width: 25%;
}

#contact form button {
	color: #000;
}


/*Fléche retour*/

.arrow {
	position: absolute;
	bottom: 1%;
	right: 5%;
	color: #FFF;
}

.arrow a {
	color: #FFF;
}

.fa-arrow-circle-up {
	font-size: 4em;
	cursor: pointer;
}

footer {
	background: #2F291D;
	color: #FFF;
	padding: 0.5% 0;
}

.legal {
	cursor: pointer;
}

.tab_contact {
	list-style-type: none;
	background: #2F291D;
	padding: 10%;
	border-radius: 25px;
	width: 100%;
}

.tab_contact li {
	padding: 0 20% 0 0;
}

.tab_contact a {
	color: #FFF;
}

.mention {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 75%;
	height: 500px;
	overflow: scroll;
	transform: translate(-50%, -50%);
	z-index: 150;
	background: #FFF;
	border: 30px solid #000;
	border-radius: 25px;
}

.copyright {
	font-size: 0.8em;
	width: 30%;
	float: left;
	line-height: 25px;
}

.address {
	line-height: 25px;
	width: 65%;
	float: right;
}

#movies {
	background: url("../images/Herbes.jpg") no-repeat fixed;
	min-height: 200px;
	margin: 0;
	padding: 0;
}

.admin_movie{
	margin-bottom: 10%;
}
/*début media queries*/

.vimeo{
	width: 20%;
	height: auto;
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
	#main_title {
		text-align: center;
	}
	header nav li {
		padding: 4px 15px 4px 4px;
	}
	.swap_text_menu li {
		display: inline-block;
		width: 25%;
		border: 1px solid #FFF;
	}
	.pros {
		width: 40% !important;
	}
	#formations .swap_text_menu li {
		width: 30%;
	}
}

.box_movie{
	margin: 3% 0;
}
.poster_movie{
	
width: 45%;
height: auto;
margin-left: 40%;
}


.buy_button{
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	color: #FFF;
	background: #3298DA;
}

#flag{
	height: 30px;
}
@media only screen and (min-width: 961px) and (max-width: 1024px) {
	#main_title {
		text-align: center;
	}
	header nav li {
		padding: 4px 15px 4px 4px;
	}
	.swap_text_menu li {
		display: inline-block;
		width: 20%;
		border: 1px solid #FFF;
	}
	.pros,
	.exp,
	.calendar {
		width: 70% !important;
	}
	#formations .swap_text_menu li {
		width: 50%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 960px) {
	#main_title {
		text-align: center;
	}
	header nav li {
		padding: 4px 6px 4px 4px;
	}
	.bande {
		overflow: hidden;
		position: relative;
		height: 250px;
	}
	video {
		width: 100vw;
		position: absolute;
		bottom: -50%;
	}
	.swap_text_menu li {
		display: inline-block;
		width: 25%;
		border: 1px solid #FFF;
	}
	.pros,
	.exp,
	.calendar {
		width: 50% !important;
	}
	.video_legend {
		opacity: 100;
		top: 80%;
		left: 40%;
		position: absolute;
		background: #2F291D;
		color: white;
		font-size: 1.2em;
		width: 60%;
		text-align: center;
	}
	#formations .swap_text_menu li {
		width: 40%;
	}
	.video_box {
		height: 200px;
		padding-top: 30%;
	}
	.logo_box {
		width: 30%;
		margin: 0 5% 5% 15%;
		height: 250px;
		float: left;
		position: relative;
	}
}

.addmovie_form{
	margin: 10% 0;!important	
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
	.logo {
		margin-left: 35%;
	}
	#main_title {
		text-align: center;
	}
	header nav ul {
		width: 85%;
	}
	header nav li {
		padding: 10px;
	}
	.bande {
		overflow: hidden;
		position: relative;
		height: 250px;
	}
	video {
		width: 100vw;
		position: absolute;
		bottom: -50%;
	}
	.swap_text_menu li {
		width: 30%;
		border: 1px solid #FFF;
	}
	.pros,
	.calendar,
	.exp {
		width: 70% !important;
	}
	#formations .swap_text_menu li {
		width: 40%;
	}
	.video_legend {
		opacity: 100;
		top: 80%;
		left: 40%;
		position: absolute;
		background: #2F291D;
		color: white;
		font-size: 1.2em;
		width: 60%;
		text-align: center;
	}
	.video_box {
		height: 300px;
	}
	.logo_box {
		width: 30%;
		margin: 5% 5% 5% 10%;
		height: 250px;
		float: left;
		position: relative;
	}
}

@media only screen and (min-width: 321px) and (max-width: 480px) {
	.logo {
		margin-left: 35%;
	}
	#main_title {
		text-align: center;
	}
	.minus {
		display: none;
	}
	header nav li {
		display: list-item;
		list-style-type: none;
		padding: 4px;
	}
	.bande {
		display: none;
	}
	.swap_text_menu li {
		width: 75%;
		border: 1px solid #FFF;
	}
	.pros {
		width: 100% !important;
	}
	.video_legend {
		opacity: 100;
		top: 80%;
		left: 40%;
		position: absolute;
		background: #2F291D;
		color: white;
		font-size: 1.2em;
		width: 60%;
		text-align: center;
	}
	.video_box {
		height: 200px;
	}
	#formations .swap_text_menu li {
		width: 100%;
		list-style-type: none;
		float: none;
	}
	.logo_box {
		width: 40%;
		margin: 0 5% 5% 5%;
		height: 250px;
		float: left;
		position: relative;
	}
}

@media only screen and (max-width: 320px) {
	#main_title {
		text-align: center;
	}
	.minus {
		display: none;
	}
	header nav li {
		display: list-item;
		list-style-type: none;
		padding: 4px;
	}
	.bande {
		display: none;
	}
	.swap_text_menu li {
		width: 100%;
		border: 1px solid #FFF;
	}
	.pros {
		width: 100% !important;
	}
	#formations .swap_text_menu li {
		width: 100%;
		list-style-type: none;
		float: none;
	}
	.video_box {
		height: 125px;
	}
	.video_legend {
		opacity: 100;
		top: 80%;
		left: 40%;
		position: absolute;
		background: #2F291D;
		color: white;
		font-size: 1.2em;
		width: 60%;
		text-align: center;
	}
	.stamp {
		display: none;
	}
	.logo_box {
		width: 75%;
		margin: 0 0 5% 5%;
		height: 250px;
		float: left;
		position: relative;
	}
}