@font-face {
  font-family: "nunito";
  src: url('./Nunito-SemiBold.woff2') format('woff2'),
       url('./Nunito-SemiBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


body { margin: 0; font-size:18px; font-family: Nunito, sans-serif; background: #F5F2EE; color: #1F2A44;  position:relative; margin:auto; background-repeat:no-repeat; }
.main { position:relative; display:block; overflow:hidden; width:1050px; height:1000px; padding-bottom:50px; background: #F5F2EE; margin:auto; background: #F5F2EE url(bgbg.png) no-repeat; background-size:contain; }
h1{  }
.header { display: block; padding: 20px; text-align: center;}
.header span { color: #E88A9B;}
.hero { text-align: center; padding: 60px 20px;}
.btn-primary { background: #F4A261; border: none; padding: 10px 20px; border-radius: 20px; color: white;}
.btn-secondary { background: #E88A9B; border: none; padding: 10px 20px; border-radius: 20px; color: white;}
.btn-outline { border: 1px solid #1F2A44; padding: 10px 20px; border-radius: 20px; background: transparent;}
.features { display: flex; gap: 20px; padding: 40px;}
.card { background: white; padding: 20px; border-radius: 15px; flex: 1;}
.profiles { padding: 40px;}
.grid { display: flex; gap: 20px;}
.profile-card { background: white; border-radius: 15px; overflow: hidden; flex: 1; text-align: center;}
.profile-card img { width: 100%; height: 200px; object-fit: cover;}
.cta { text-align: center; padding: 60px; background: white;}
footer { position:absolute; width:100%; height:20px; background:#F5F2EE; bottom:0px; text-align: center; padding: 10px; color: gray;}
.preinscription { display:block; position:absolute; width:45%; top:40%; left:5%; padding:25px; background:rgba(255,255,255,0.7); border-radius:15px; }
body span { color:#E88A9B; } /*#1F2A44*/
.blocradio { margin:10px 0; }
.blocradio p { margin:5px 0 0 0; }
form input { border-radius:8px; border:1px solid #7A7A7A; padding:8px; font-family: Nunito, sans-serif; font-size:16px; }
form input[type="submit"] { border-radius:15px; border:none; margin:20px 0; padding:8px; width:100%; font-family: Nunito, sans-serif; text-align:center; background:#F4A261; }
a.submit { display:block; color:black !important; text-decoration: none; border-radius:15px; border:none; margin:20px 0; padding:5px 3px; width:90%; font-family: Nunito, sans-serif; text-align:center; background:#F4A261; }

select{
  height: 38pxpx;
  line-height: 38px;
  vertical-align: middle;
  margin: 2px 15px;
  padding: 0 4px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.3);
  font-size: 1.15em;
}


.whitebox {
  text-align:center;
  max-width: 800px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin: auto;
  width: calc(100% - 60px);
  margin-bottom: 20px;
  overflow: hidden;
}
.whitebox picture img { filter: blur(5px); }

.fa-eye-slash { -moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }

input[type="submit"] { cursor:pointer; }
@media (min-width: 415px) {
  .avatarscontain img {
    width: 20%
  }
}

@media (max-width: 359px) {
  .avatarscontain img {
    width:calc(50% - 3px)
  }
}

@media (min-width: 360px) and (max-width:444px) {
  .avatarscontain img {
    width:calc(25% - 3px)
  }
}

@media (min-width: 445px) and (max-width:729px) {
  .avatarscontain img {
    width:calc(20% - 3px)
  }
}

@media (min-width: 730px) {
  .whitebox { opacity:0.8; }
  .avatarscontain img {
    width:calc(12.5% - 3px)
  }
}

.avatarscontain {
  margin: auto;
  text-align: center;
  width: 100%
}

.avatarscontain img {
  aspect-ratio: 133/146;
  height: auto;
  padding: 1.5px;
  margin: 0;
  float: left;
  border-style: none;
  vertical-align: top;
  filter: contrast(1.15) saturate(1.1) brightness(1.02);
  -webkit-filter: contrast(1.15) saturate(1.1) brightness(1.02)
}


@media (max-width: 680px){
  body { background-size:cover; overflow:scroll; }
  .main { width:100%; min-height:650px; }
  .preinscription { top:20%; width:70%; left:10%; }
  .preinscription p { margin:5px 0;}
  .blocradio p { margin:5px 0 0 0; }
  .blocradio input { margin:0px 0 0 0; line-height:20px;}
  form input { padding:3px 5px; margin:5px 10px 5px 0;}
  footer { overflow:hidden; font-size:14px; }
}