/*******************
    Responsive
*******************/

@media screen and (min-width: 1700px) and (max-width: 1920px) { 
*{margin: 0;padding:0;}
header { 
  height: 120px;
}

header figure {
  width: 145px;
}

#menus img {
  width: 16px
}
#subtitle {
 font-size: 11px;

}
#subtitle a {
 font-size:14px;
}

#middle ul li a {
    font-size: 14px;
}

#subtitle ul li a {
font-size:14px;
  
}
/*********************
slideshow
************************/
.bx-viewport {height:450px !important;}
.bx-viewport img {padding:0 0 140px 0;}

/*********************
content
************************/
#index article {
  /* padding: 20px; */
  vertical-align: top;
  display: inline-block;
}

#filmsLaBas p, #joseph p {
  /*taken from citeducinema */
  line-height: 19px;
  font-size: 13px;
}

main article h1:last-of-type {
  margin-bottom: 10px;
}

#film {
  margin-top:2%;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  padding-bottom:5%;
}
#filmsLaBas{
  margin-top:1%;
  float:left;
  width: 30;
}

#joseph {
   width: 60%;
   padding-left: 25px;
   margin-left: 25px;
   margin-bottom:5%;
   margin-top:1%;
}

.newIMG {
  width: 80%;
}

.newsLeft{
  float:left;
  width: 40%;
}
.newsRight{
  float:right;
  width: 55%;
  /* margin: 20%; */
  margin-bottom: 5%;
  MARGIN-RIGHT: 5%;
}
.wrap h1 {
  font-size:20px;
}
.wrap section article p {
  font-size:13px;
}

.footer p{
  font-size:13px;
}
footer p {
  font-size:11px;
}
/***********************
Realisations
************************/

  .IMGleft img {
    height:120px;
    float:left;
    margin:2% 0;
  }

  .TextRight {
    margin: 0.5% 0;
    float:right;
    width:60%;
    }

.TextRight p { 
    font-size:13px;
}

input, label, textarea {
  font-size:16px;
}
label{
  margin:0;
}
input{
  height:30px;
}
textarea{
  height:100px;
}
/**************************************
          See
***************************************/
.PRight{
  width:60%;
}
.PRight p {
  width:80%;
}
}

@media screen and (min-width: 1600px) and (max-width: 1750px) { 

p {font-size:13px;}
.bx-viewport {
    height: 400px !important;
}

#filmsLaBas p, 
#joseph p  { 
font-size:13px;
}

.newsRight{
  width:55%;
}
.newsRight p{
  font-size:13px;
}
.newsRight h1{
 font-size:20px; 
}
header {height:auto;}
header figure img {width:100%; }
header figure {
  width:15%;
}
#middle ul li a , #subtitle ul li a{
  font-size:13px;
}
.subH1 {
  font-size:20px;
}
.h1sub{
  font-size:15px;
}
.PRight {
    margin-right: 100px;
}
.project {
  height:320px;
}
.TextRight {
  width:55%;
  margin-right:3%;
}
.TextRight h1 {
  font-size:20px;
}
.TextRight p {
  font-size:13px;
}

input {
  height:auto;
}
label {
  font-size:20px;
  margin:5px 0;
}
textarea,input{
  font-size:15px;
}
textarea{
  height:100px;
}
}

/*******************************************************************/



/*******************************************************************/
@media screen and (min-width: 1200px) and (max-width: 1600px) { 
header { 
  height: 120px;
}

header figure {
  width: 15%;
}

#menus img {
  width: 12px
}


#middle ul li a {
    font-size: 10px;
}

#subtitle ul li a {
font-size:10px;  
}

#middle {
    margin: 0;
}
.PRight {
    margin-right: 0px;
    float: right;
    width: 61%;
}
nav li { margin:0; padding:0;}
/*********************
slideshow
************************/
.bx-viewport {height:300px !important;}
.bx-viewport img {padding:0 0 140px 0;}

/*********************
content
************************/
.wrap {width:90%;}
#index article {
  /*padding: 0;*/
  vertical-align: top;
  display: inline-block;
}

#filmsLaBas p, #joseph p {
  /*taken from citeducinema */
  line-height: 19px;
  font-size: 13px;
}

main article h1:last-of-type {
  margin-bottom: 30px;
}


#filmsLaBas{
  width: 30;
}

#joseph {
   width: 60%;
   padding-left: 25px;
   margin-left: 25px;
   margin-bottom:5%;
   margin-top:1%;
}



.newsLeft{
  float:left;
  width: 40%;
}
.newsRight{
  float:right;
  width: 55%;
  /* margin: 20%; */
}
.wrap h1 {
  font-size:20px;
}
.wrap section article p {
  font-size:13px;
}

.footer p{
  font-size:13px;
}
footer p {
  font-size:11px;
}
/***********************
Realisations
************************/

  main {width:90%;}
  .IMGleft img {
    height:120px;
    float:left;
    margin:2% 0;
  }

  .TextRight {
    margin: 0.5% 0;
    float:right;
    width:60%;
    }

.TextRight p { 
    font-size:13px;
}


}


/*******************************************************************/

/*                           Table

/*******************************************************************/
@media screen and (min-width: 700px) and (max-width: 1200px) { 
header { 
  height: auto;
}
#socio { margin:0;}
.container {width:90%;}
header figure {
  width: 15%;
}

#menus img {
  width: 12px
}


#middle ul li a {
    font-size: 12px;
}

#subtitle ul li a {
font-size:12px;  
}

#middle {
    margin: 0;
}
nav li { margin:0; padding:0;}
/*********************
slideshow
************************/
.bx-viewport {height:300px !important;}
.bx-viewport img {padding:0 0 140px 0;}

/*********************
content
************************/
.wrap {width:90%;}
#index article {
  /*padding: 0;*/
  vertical-align: top;
  display: inline-block;
}

#filmsLaBas p, #joseph p {
  /*taken from citeducinema */
  line-height: 19px;
  font-size: 13px;
}

main article h1:last-of-type {
  /* margin-bottom: 30px; */
  text-align: center;
}
.h1sub {font-size: 14px !important;}

#filmsLaBas{
  width: 100%;
  margin:0 auto;
  float:none;
}

#joseph {
   float:none;
   width: 100%;
   margin:0 auto;
}



.newsLeft{
  float:none;
  width: 100%;
  text-align: center;
}
.newsRight{
  float:none;
  width: 100%;
  /* margin: 20%; */
}
#joseph {margin-top:30px; margin-bottom:30px;}
.wrap h1 {
  font-size: 17px;
  text-align: center;
}
.wrap section article p {
  font-size:13px;
  margin-bottom: 30px;
}

.FooterWrap {width:80%}
.footer h2{
  font-size:25px;
}
.footer p{
  font-size:12px;
  margin: 0 20%;
}
footer p {
  font-size:12px;
}

/***********************
Realisations
************************/

  main {width:90%;}
  .project {height: auto;}
  .extraH {height: auto;/* text-align: center; */}
  .project p {
    margin-bottom: 20px;
  }
  .IMGleft {
    width:100%;
    text-align: center;
  }
  .IMGleft img {
    width: 70% !important;
    height: auto !important;
    float:none;
    margin:0 auto;
  }

  .TextRight {
    margin: 0 auto;
    float:none;
    width:100%;
    
    }

.TextRight p { 
   font-size:13px;
}
.PageVoir {
  width:100%;
}
.SeeLeft {
    width:25%;
}
.PRight {
 font-size:13px;
 width: 55%;
}
  .PRight p{
 width: 100%;
}
input{font-size:12px;height:30px;margin:0;}
label,textarea {font-size:15px;margin:0;} 
textarea {height:100px;} 
}



/*******************************************************************/

/*                           Mobile

/*******************************************************************/
@media screen and (max-width: 480px) and (min-width: 320px) { 
br {display:block;}
  .realMain{
        margin: 17.3% auto;
  }
/************************
contact
**************************/
input[type=submit] {
  width: 40%;
     -webkit-appearance: none;

  }

  input, label, textarea {
  font-size:14px;
  margin:10px 0; 
}

label{
  margin:0;
}
input{
  height: 20px;
}
textarea{
  height: 50px;
}


header {
  height: 210px;
  display:inline-block;
  width:100%;
}

#socio { margin:0;}
.container {width:100%;display:inline-block;/* height: auto; */}
header{height:auto;}

#menus {
   display: block;
   padding:0;
   margin:0;
   text-align:center;
}
header figure {width: 35%;padding:0;margin: 0;margin-left: 39%;}


#menus img {
  width: 15px;
  margin: 5px;
  margin-top: 20px;
}


#middle ul li a {
  font-size: 12px;
  
}

#subtitle ul li a {
  font-size:12px;  
}

#middle {
    margin: 0;
}
nav li { margin:0; padding:0;}
/*********************
slideshow
************************/
.bx-viewport {height:150px !important;}

/*********************
content
************************/
.wrap {margin: 0 auto;width: 90%;}

#index article {
  /*padding: 0px;*/
  vertical-align: top;
  display: inline-block;

}
.wrap article p {
  margin-bottom: 50px;
}
#index article p{
  font-size:12px;
}
#filmsLaBas p, #joseph p {
  /*taken from citeducinema */
  line-height: 16px;
  font-size: 12px;
  padding:0;
}
.h1sub {font-size: 10px !important;}
main article h1:last-of-type {
  margin: 10px 0 15px 0;
  text-align: left;
}
.reaHeader H1 {
  float:left;
}

.reaHeader h1, .reaHeader p {
  margin-bottom: 2px !important;
  margin-top: 10px !important;
}
#filmsLaBas{
  width: 100%;
  margin:0 auto;
  float:none;
}

#joseph {
   float:none;
   width: 100%;
   margin:0 auto;
}

.newsLeft img {
  width: 100%;
  height: auto;
}


.newsLeft{
  float:none;
  width: 100%;
}
.newsRight{
  float:none;
  width: 100%;
  /* margin: 20%; */
}
.newsRight h1 {
  margin-bottom:2px !important;
  margin-top: 12px !important;
}
.newsRight p{
  margin-bottom: 53px !important;
  margin-top: 9px;
}
.wrap h1 {
  font-size: 16px;
  text-align: left;
  margin: 10px 0;
}
.h1sub{
  margin-top:-5px !important;
}
.wrap section article p {
  font-size:13px;
}

.FooterWrap {width: 90%;}
.footer h2{
  font-size:20px;
}
.footer p{
  font-size:10px;
}
.footer {
  margin-top:15px;
}
footer p {
  font-size: 10px;
}

/***********************
Realisations
************************/

  main {width:90%;}
  .reaHeader h1{display:block;text-align:center;font-size: 16px;}
  .project {height:auto;}
  .project p {
    margin-bottom: 53px;
    margin-top: 10px;
  }
  .IMGleft {
    text-align:centeR;
    float: none;
  }
  .IMGleft img {
    width: 100% !important;
    height: auto !important;
  }
.fleche {
    display:none;
}
  .TextRight {
    margin: 0 auto;
    float:none;
    width: 100%;
    }

.TextRight p {
   font-size: 12px;
}
.PageVoir {
  width: 90%;
}
iframe {
  height:200px;
}
.SeeLeft {
    width: 100%;
}
.PRight {
 width:100%;
 margin:0; 
}
.PRight h1 {
 font-size:16px;
 margin-bottom: 2px;
 margin-top: 19px;
}
.PRight p {
  font-size:12px;
  word-spacing: 5px;
  margin-top: 10px;
  /* line-height: 17px; */
  width: 100%;
  /* margin-right: 0; */
}
form {
  width: 100%;
  padding: 0;
}
.Fbtm {
  bottom:auto;
}
#film {
  width: 100%;
  margin-top:2%;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  padding-bottom: 25px;
} 
}
@media screen and (max-width: 690px) and (min-width: 500px) { 
header { 
  height: 250px;
  display:inline-block;
  width:100%;

}
#socio { margin:0;}
.container {width:100%;display:inline-block;}


#menus {
   display: block;
   padding:0;
   margin:0;
   text-align:center;
}
header figure {

width: 25%;

padding:0;

margin: 0;

margin-left: 40%;
}


#menus img {
  width: 12px
}


#middle ul li a {
  font-size: 12px;
  
}

#subtitle ul li a {
  font-size:12px;  
}

#middle {
    margin: 0;
}
nav li { margin:0; padding:0;}
/*********************
slideshow
************************/
.bx-viewport {height:150px !important;}

/*********************
content
************************/
.wrap {margin: 0 auto;width: 90%;}

#index article {
 /* padding: 10px;*/
  vertical-align: top;
  display: inline-block;

}

#index article p{
  font-size:12px;
}
#filmsLaBas p, #joseph p {
  /*taken from citeducinema */
  line-height: 16px;
  font-size: 12px;
  padding:0;
}

main article h1:last-of-type {
  margin-bottom: 30px;
  text-align: center;
}


#filmsLaBas{
  width: 100%;
  margin:0 auto;
  float:none;
}

#joseph {
   float:none;
   width: 100%;
   margin:0 auto;
}

.newsLeft img {
  width: 100%;
  height: auto;
}


.newsLeft{
  float:none;
  width: 100%;
}
.newsRight{
  float:none;
  width: 100%;
  /* margin: 20%; */
}
.wrap h1 {
  font-size:20px;
}
.wrap section article p {
  font-size:13px;
}

.FooterWrap {width:80%;}
.footer h2{
  font-size:20px;
}
.footer p{
  font-size:10px;
}
footer p {
  font-size:10px;
}

/***********************
Realisations
************************/

  main {width:90%;}
  .reaHeader h1{ display:block; text-align:center;}
  .project {height:auto;}
  .project p {
    margin-bottom: 20px;
  }
  .IMGleft {
    text-align:centeR;
    float: none;
  }
  .IMGleft img {
    width: 100% !important;
  }
.fleche {
    display:none;
}
  .TextRight {
    margin: 0 auto;
    float:none;
    width: 100%;
    }

.TextRight p {
   font-size: 11px;
}
.PageVoir {
  width:100%;
}
.SeeLeft {
    width: 100%;
}
.PRight {
 font-size:13px; 
}
form {
  width: 100%;
  padding: 0;
}
.Fbtm {
  bottom:auto;
}

#film {
  width:70%;
  margin-top:2%;
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  padding-bottom:5%;
}
}

@media screen and (max-width: 1100px) and (min-width: 320px) {

#videoBackground {
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    display: none;
    background: black;
}

#videoBackground  video {
    display:none;
    margin: 0;
    min-height: 0;
    min-width: 0;
}



}