h1{
  font-size: 1.3em;
  margin: 0em;
}
html {
  background-image: url('images/fond.jpg');
  background-size: cover;
}
*{
   font-family: 'Brown';
}

.contenu{
  background-color: #ffffff94;
  height: 100%;
  border: 5px;
  border-radius: 4px;
  width: 100%;
}
.menu{
  background: #ffffff94;
  height: 100%;
  border: 5px;
  border-radius: 4px;
  width: 100%
}
@media screen and (min-width: 800px) {
  .menu{
    float: left;
    width: 25%;
    max-width: 250px
  }
  .contenu{
    float: right;
    width: 75%;
  }
}
@media screen and (min-width: 1000px) {
  .contenu{
    float: right;
    width: calc(100% - 250px);
  }
}

@font-face {
font-family: 'Brown';
font-style: normal;
src: url(https://jbprod.fr/dev/newsletter/font/Brown-Regular.woff) format('woff');
}
@font-face {
font-family: 'Brown';
font-style: italic;
src: local('Brown-Italic'),
src: url(https://jbprod.fr/dev/newsletter/font/Brown-RegularItalic.woff) format('woff');
}
@font-face {
font-family: 'Brown';
font-style: bold;
src: local('Brown-Bold'),
src: url(https://jbprod.fr/dev/newsletter/font/Brown-Bold.woff) format('woff');
}
@font-face {
font-family: 'Brown Bold Italic';
font-style: italic;
font-weight: bold;
src: local('Brown-BoldItalic'), src: local('Brown Bold Italic'),  src: url(https://jbprod.fr/dev/newsletter/font/Brown-BoldItalic.woff) format('woff');
}
.file{
display: inline-flex;
width: 125px;
flex-direction: column;
text-decoration: none;
color: black;
margin: 0px;
padding-right: 5px;
}
img.file{
width: 100%
}
h6.file{
text-align: center;
font-size: 12pt;
font-style: normal;
overflow: hidden;
}
.contenuIn{
padding: 10px;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 70%;
height: 70%;
position: relative;
transition: all 5s ease-in-out;
}
.content{
height: 69%;
display: flex;
justify-content: center;
align-items: center;
min-height: 150px
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #d60a0a;
}
.popup{
height: 70%;
overflow: auto;
}
iframe{
height: 100%;
}

@media screen and (max-width: 700px){
.popup{
width: 70%;
}
}
.button {

background-image: linear-gradient(#009eff, #00ceff);
border: none;
color: white;
padding: 6px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

.button:hover {
box-shadow: 0 12px 16px 0 rgba(23, 192, 232,0.24),0 17px 50px 0 rgba(23, 192, 232,0.19);
}
.delete {

background-image: linear-gradient(#F43848, #e81717);
border: none;
color: white;
padding: 6px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

.delete:hover {
box-shadow: 0 12px 16px 0 rgba(255, 0, 0, 0.24),0 17px 50px 0 rgba(255, 0, 0, 0.19);
}
a.choix{
width: 100%;
text-decoration: none;
color: black;
display: block;
margin: 10px
}
a.choix:hover{
text-decoration:  underline;
text-decoration-color: #51b8d7;
color: #51b8d7;
}
.dropzone{
background: none;
padding: none;
border: none;
min-height: none;

}