@font-face {
font-family: 'oswald';
src: url('/static/font/Oswald-Light.eot');
src: url('/static/font/Oswald-Light.otf') format('truetype'),
     url('/static/font/Oswald-Light.woff') format('woff'),
     url('/static/font/Oswald-Light.eot?#iefix') format('embedded-opentype'),
     url('/static/font/Oswald-Light.svg#oswald') format('svg');
font-weight: normal;
font-style: normal;
}

body{
  width: 100%;
  height: 90%;
  background-image:url('/static/moncompte/images/quadrillage.png');
  background-size: cover;
  background-repeat: repeat;
  background-color:#ececec;
  margin:0;
  padding:0;
}

.bg-image{
  width: 60%;
  height: 100%;
  background-image: url('/static/moncompte/images/assiette.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1500px) {
  .bg-image{
    width: 80%;
  }
}

@media screen and (max-width: 1100px) {
  .bg-image{
    width: 100%;
  }
}

.content{
  position: relative;
  z-index:10;
  width:45em;
  color:#fff;
  border-radius:5px;
  border-color:grey;
  background-color:#fff;
  margin:0 auto;
  padding:0 50px 15px 50px;
  margin-top:3%;
  border:solid 1px rgba(162,192,55, 1.0);
}


.logo{
  width:8em;
  height:auto;
  display:block;
  margin:0 auto;
  padding: 5px;
}

@media screen and (max-width: 1024px) {
  .title{
    text-align: center;
  }

  .content{
    width:23em;
  }
}

.title{
  margin-bottom: 20px;
}

.title span{
  font-family:oswald;
  font-weight:lighter;
  font-size:1.5em;
  color:#fff;
  background-color:#ff7700;
  padding:5px 10px 5px 10px;
}

.mdp{
  margin-top:15px;
}

.picto{
  display:inline-block;
  vertical-align:top;
  width:24px;
  height:24px;
  background-size: 100%;
}

.fa-lock:before {
    content: "\f023";
}

.picto.mail{
  background-image:url('/static/moncompte/images/icon-email.png');
}

.picto.lock{
  background-image:url('/static/moncompte/images/icon-lock.png');
}

label{
  font-family:oswald;
  font-size: 1.1em;
  font-weight:400;
  color:#464646;
  height: 28px;
  display: inline-block;
  vertical-align: top;
}

input{
  display: block;
  width: 80%;
  font-size: 1em;
  color: grey;
  font-family: oswald;
  padding: 5px;
}

.send{
  display: inline;
  background-color: rgba(162,192,55, 0.9);
  color: #ffffff;
  border: 1px solid rgba(56,56,56,0.2);
  border-radius: 3px;
  margin: 25px;
  height: 38px;
  font-size: 1.2em;
  width: 90%;
  max-width: 125px;
  font-family: oswald;
}

.link-inscription,
.link-inscription:hover {
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
  cursor: pointer;
  background-color: rgba(162,192,55, 0.9);
  border: 1px solid rgba(56,56,56,0.2);
  border-radius: 3px;
  width: 125px;
  margin-top: 25px;
  margin-bottom: 25px;
  height: 38px;
  font-size: 1.2em;
  font-family: oswald;
  padding-top: 6px;
}

.flat-text{
  font-family:oswald;
  color:#464646;
}

.retour-site-public{
  display: inline;
  -webkit-appearance: button;
  cursor: pointer;
  background-color: rgba(162,192,55, 0.9);
  border: 1px solid rgba(56,56,56,0.2);
  border-radius: 5px;
  width: 150px;
  height: 38px;
  font-size: 1.2em;
  /* border-radius: 5px; */
  font-family: oswald;
  padding: 5px;
}