/* --------------------------------------------------------------------------------------------*/
/* ------------------------------------------- SHOWREEL ----------------------------------------*/

.central-showreel{	position:relative;	width:100%;}
.central-ves {
	position:relative;
	width:95%;
	left:2.5%;	
	z-index: 100;
}
.movie-area {
	position:relative;
	width:95%;
	left:2.5%;	
	z-index: 100;
}
.poster-area {
	position:relative;
	width:95%;
	left:2.5%;	
	z-index: 100;
}
.movie-pic {
	position:relative;	
	float: left;
	margin: 0 auto;
	width: 25%;
	min-height:32px;
	padding: 0.5%;
}
@media screen and (max-width: 800px) {
  .movie-pic {    width: 50%;  }
}

.ves_{
	position:relative;
	width:100%;
	z-index: 100;
	display: flex;	
	margin: 0 auto;
}
.ves_thumb {
	position:relative;	
	width: 30%;
}
.ves_thumb img {
    width: 100%; /* or any custom size */	
	object-fit:contain;
	object-position:center;
}

.ves_description{
	position:relative;	
	float: right;
	margin: 0 auto;
	width: 65%;
	padding: 0.5%;
}

/* --------------------------------------------------------------------------------------------*/
/* ------------------------------------------- PHOTO ------------------------------------------*/




.explain { 
	position:relative;
	width: 90%;
	margin: 0 auto;
	/*border: 1px solid #999;*/
  	text-align: center;
}



.gallery{
	position: relative;
	height: auto;
	width: 100%; /* to add space near the scroll bar */
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
}
.gallery img {
	width:100%;
	height:auto;
}

.column2 a {
	position: relative;
	float: left;
	width:50%;
	padding: 2px;
}
.column3 a {
	position: relative;
	float: left;
	width:33.33%;
	padding: 2px;
}
.column4 a {
	position: relative;
	float: left;
	width:25%;
	padding: 2px;
}
.column5 a {
	position: relative;
	float: left;
	width:20%;
	padding: 2px;
}
.column6 a {
	position: relative;
	float: left;
	width:16.66%;
	padding: 2px;
}

/* Responsive layout - makes a two column-layout instead of 2 columns */
@media screen and (max-width: 800px) {
  .column2 a, .column4 a, .column3 a, .column5 a, .column6 a {    width:50%; 	padding: 2px; }
}




/* --------------------------------------------------------------------------------------------*/
/* ------------------------------------------- EVENT ------------------------------------------*/

.event-area	{
	width:70%;
	margin-left: 15%;
	margin-top: 100px;
}
@media screen and (max-width: 800px) {
  .event-area {    width: 90%; margin-left: 5%; }
}

.expo_ {	
	position:relative;
}

.expo_thumb {
	position: relative;
	width: 100%;
}
.expo_thumb img {
    width: 100%; /* or any custom size */
    object-fit: cover;
}

.expo_description{
	position:relative;
	width: 90%;	
	left:5%;
	margin-top: 20px;
	text-align: center;
	line-height: 25px;
}

.expo_bt{
	position:relative;
	width: 100%;
	display: flex;
	justify-content: center; 
	align-items: center;
}

.bt {	
	width: 30%; 
	border: 1px solid #000;
}

.bt-movie {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
    font-size: 14px;
	font-weight: bolder;
	text-align:center;
    display: block;
	line-height:30px;
	
	color: #999;
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}


/* --------------------------------------------------------------------------------------------*/
/* ------------------------------------------- RELAXE BTS  ------------------------------------------*/

.explainbts { 
	position:relative;
	width: 90%;
	margin: 0 auto;
  	text-align: center;
	padding: 15px;
}

.goback{
	top : 74px;
	background-color: #000;
	color: white;
	cursor: pointer;
	width: 160px;
	text-align: center;
	font-size: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;	
	/*text-transform: uppercase*/
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	padding-top: 4px;
	padding-bottom: 8px;
	
	border-top-left-radius: 6px;
	border-bottom-left-radius: 50px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 50px;
	
	z-index:8000;
	
}
.arrow {
	position: relative;
	display: inline-block;
	height: 6px;
	width: 6px;
	border-style: solid;
	border-color: white;
	border-width: 0px 2px 2px 0px;
	transform: rotate(135deg);	
	top: -1px;
	right: 5px;
}

.gallerybts{
	position: relative;
	height: auto;
	width: 98%; /* to add space near the scroll bar */
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;	
	margin: 0 auto;
}
.gallerybts img {
	width:100%;
	height:auto;
}



/* --------------------------------------------------------------------------------------------*/
/* ------------------------------------------- ABOUTME ------------------------------------------*/

#aboutme-pic {
	position: relative;
	height:300px;
	left : 0px;
	top: 60px;
}
@media screen and (max-width: 800px) {
  #aboutme-pic {    height:200px; }
}
#aboutme-pic img{
	width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: cover;
}
#aboutme-text	{	position:relative;	width:70%;	height:auto; left:15%; }

@media screen and (max-width: 800px) {
  #aboutme-text {    width: 90%; left: 5%; }
}


/* --------------------------------------------------------------------------------------------*/
/* ------------------------------------------- CONTACT ------------------------------------------*/

#social {
	position: relative;
	width: 100%;
	height: 40px;
}
#social a{
	margin: 0 5px;
}
#contact-middle {
	position: relative;
	width: 80%;
	height: 700px;
	left : 10%;
}

@media screen and (max-width: 800px) {
  #contact-middle {    width: 100%; left: 0%; }
}



#contact-title {
	position: relative;
	width: 90%;
	margin: 0 auto;	
}

#contactwrapper {
	position: relative;
	width: 80%;
	margin: 0 auto;	
}

/* form stuff */
form { display: block; }
form input, textarea, select { border: none; outline: none; background: transparent; }
form label {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0px;
    font-size: 15px;
	font-weight: bold;
    display: block;
	color: #000;
	text-transform: none;
}

form .err { color: #F00; display: none; position: relative; font-style:italic; font-size: 15px; }
form .capter { padding-left: 0px !important; }
form .txarea { padding-left: 50px !important;  }
form .topp { padding-left: 50px; }

form .textinput{ font-family:Arial, sans-serif; display: block; outline: none; width: 100%; border-bottom: 1px solid #666; padding: 3px 10px; margin-bottom: 10px; font-size: 1em; color: #888; }
form .textinput:focus{ color: #666;  }

form .msgtextarea {font-family:Arial, sans-serif;  display: block; outline: none; font-size: 1em; padding: 6px 10px; width: 400px; width: 100%; height: 180px; border: 1px solid #666; color: #888; margin-top: 20px; margin-bottom: 20px; resize: none; }
form .msgtextarea:focus { color: #666; border-color: #666; }
/* form stuff */

#captcha-area {	position:relative;	margin: 30 auto;	width:100%;}
#captchaimg { display: block; border: 1px solid #a1a1a1; margin-bottom: 7px;  }
form .textcaptcha { display: block; outline: none; width: 150px; border: 1px solid #666; padding: 3px 10px; margin-top: 10px; font-size: 1em; color: #888; right: 0px; }

#subber {
	position:relative;
	width:100%;	
	height:40px;
	line-height: 40px; /* same as height! to center verticaly the text */
}
.thanks{
	position: relative;
	width:90%;
	text-align:center;
	top: 20px;
	color: #000;
	font-family: Arial, Helvetica, sans-serif; /* font marche par tjr sur tout les browsers et ca creer des variation de size letter*/
	letter-spacing: 1px;
    font-size: 20px;
	-webkit-letter-spacing: 1px;
	-moz-letter-spacing: 1px;
	-o-letter-spacing: 1px;
	-ms-letter-spacing: 1px;
}





/*---------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------ BUTTON CONTACT   -------*/

form a.btn {
	color:  #fff;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	background-color: #000;
	border: 1px solid #000;
	padding: 10px 22px;	
	font-family: Arial, Helvetica, sans-serif;
	/*background:linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0));*/
}
	
	
form a.btn:hover { 
	color:  #000;
	background-color: #BBBBBB;
	cursor: pointer;
}
form a.btn:active {
	border: 1px solid #aaa;
	border-bottom: 1px solid #888;
	-webkit-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
	-moz-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
	box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
}