/**
 * CSS
 */
 @font-face {
     font-family: "roboto light";
     font-style: normal;
     font-weight: normal;
     src:url('./font/Roboto-Light.ttf') format('truetype')
 }
 @font-face {
     font-family: "roboto regular";
     font-style: normal;
     font-weight: normal;
     src:url('./font/Roboto-Regular.woff2') format('woff2'),
         url('./font/Roboto-Regular.ttf') format('truetype');

 }
 @font-face {
     font-family: 'Montserrat Regular';
     font-style: normal;
     font-weight: normal;
     src: local('Montserrat Regular'), url('./font/Montserrat-Regular.woff') format('woff');
 }
 @font-face {
	font-family: 'SansationRegular';
	src: local('SansationRegular'),
            url('./font/Sansation_Regular.woff2') format('woff2'),
            url('./font/Sansation_Regular.woff') format('woff'),
            url('./font/Sansation_Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'SansationLight';
	src: url('./font/SansationLight/SansationLight.eot');
	src: local('SansationLight'),
            url('./font/SansationLight/SansationLight.woff') format('woff'),
            url('./font/SansationLight/SansationLight.ttf') format('truetype');
}
@font-face {
	font-family: 'OpenSansRegular';
	src: local('OpenSansRegular'),
            url('./font/OpenSansRegular.woff') format('woff'),
            url('./font/OpenSansRegular.ttf') format('truetype');
}

 body {
    --color1:darkgreen;
    --color2:#004c00;
    --color3:#933;
    color:var(--color2);
    font-family: "roboto regular";
    font-family: SansationRegular;
    font-size: 1.2em;
    --bg-image:hsla(123.2, 67.9%, 89%, 0.19);
 }
 h1,h2,h3,h4 {
    font-family: "Monserrat Regular";
 }
 h2 {
    /*background-color: var(--color1);*/
    color: white;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    color: var(--color1);
text-shadow: 1px 1px var(--color2);
 }
 header {
    width:80%;
    margin-left:10%;

 }
 h1 {
    background-color: var(--color1);
    color:white;
    font-size:10rem;
    text-align: center;
    width: 60%;
    margin-left: 20%;
    font-size: 5rem;
    padding: 0;
    margin: 0;
    margin-left: 20%;
    position: fixed;top: 0;color: var(--color1);
    width: 100%;
    backdrop-filter: blur(3px);background-color: inherit;
    margin-left: 0;

 }
 #img-aevalys  {

    top: 0;color: var(--color1);
    padding:0;
    margin:0;
    width: 524px;
    background-color:transparent;
    margin-left:min(40%,1020px);

 }
  @media screen and (max-width:799px) {
     #img-aevalys  {
         margin-left: min(18%,195px);
     }
  }

 #div-img-aevalys {
     background-color: var(--bg-image);
    top:0;
    left:0;
    padding:0;
    position:fixed;
    width: 100%;
    margin-left: 0%;
    z-index: 20;
    backdrop-filter: blur(5px);
    }
#header_glass {
        backdrop-filter:blur(5px);
        z-index:5;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:200px
    }
 @media screen and (max-width:799px) {
     #div-img-aevalys {
        top:0;
        left:0;
        padding:0;
        backdrop-filter: blur(10px);
        position:fixed;
        width: 100%;
        margin-left: 0%;

     }
 }
 #bg-image {
    top:0px;
    z-index:-1;
    width: 100%;
    position: fixed;
    opacity: 0.8;
    width: 100%;
    filter:blur(5px);
    /*filter: drop-shadow(1px 1px 1px #198f6e);*/
 }
p {
    text-wrap: balance;
}
 div.framex
 {
    width:32%;
    padding:3px;
    /*min-width: 40%;*/
    margin-top: 10px;
    margin-bottom: 10px;
    /* animation:fade_in 0.8s linear;*/

 }
 .reveal {
     opacity: 0;
     transform: scale(0.6);
     transition: 0.8s ;
 }
 .reveal.visible{
     opacity: 1;
     transform: scale(1);
    /* animation:fade_in 0.8s linear;*/
 }
 @keyframes fade_in {

     from {
         opacity:0.5;
         scale : 0.2;
     }
     to {
         opacity:1;
         scale:1;
     }

 }
 div.no-border {
    border-width: 0px;
 }
#block1
{

}
#multi-instructeur  {

}
main {

}

#img-agenda {
    width: 473px;
    margin-left: 131px;
    margin-top: 78px;
}
#img-smartphone {
    width: 20rem;
    float: left;
}
#img-logo {
  width: 443px;
  margin-left: 150px;
  margin-top: 142px;
}
#img-autoecole {
    width: 20rem;
    margin-left: 30%;
    margin-top: 138px;

}
@media screen and (max-width:1440px){
	#img-autoecole {
    width: 20rem;
    margin-left: 0;
    margin-top: 138px;

}
	}
a{
    font-weight: 600;
    text-decoration-color: var(--color3);
    text-decoration-thickness: 2px;
    color: var(--color3);
    font-family: "roboto regular";
}
a:hover {
    color:white;
    background-color: var(--color1);
}


@media screen and (max-width:1024px){
    #img-agenda,#img-smartphone ,#img-logo,#img-autoecole {
        display:none;
    }
    div.framex{
        width: 100%;
        min-width:99%;
        height:auto;

    }


    body {
        font-size: 1em;
    }
    div.no-1024 {
        display:none;
    }
    #img-aevalys {
        width: 260px;

    }

}
@media screen and (max-width:799px) {
    #bg-image {
        display:none;
    }

}
#nocookie {
    width: 20rem;
    background-color: var(--color1);
    color: white;
    padding: 1.2em;
    border-radius: 5px;
    position: fixed;
    bottom: 0;
    right: 0px;
    opacity: 0.6;
    font-family: "roboto regular";
    font-size: 0.9rem;
    text-align: center;
}
@media screen and (max-width:799px) {
    #nocookie {
        font-size:0.8rem;
        opacity:0.5;
        text-orientation: sideways;
        writing-mode: vertical-rl;
        padding:2px;
        width:auto;
    }
}
#alchimerys {
    bottom:0;
    left:0;
   backdrop-filter: blur(5px);
  position:fixed;
  padding:0 20px 0 0;
}
@media screen and (max-width:799px) {
    #alchimerys {
        position:static;
    }
}
div.div-sep {
    z-index:-1;
}

#dv_tarif {
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
    /* align-content: stretch;*/
    gap:15px;
    border:1px solid var(--color1);
    flex-direction: row;
}
#dv_dossier,#dv_formation,#dv_supplement {
    max-width: 32%;
    padding:0.5ch;
}

@media screen and (max-width:1387px) {
   #dv_tarif {
       flex-direction: column;
   }
   #dv_dossier,#dv_formation,#dv_supplement {
    max-width: 90%;
    padding:0.5ch;
}
}

div.flex-row {
    display:flex;
    margin-top:10px;
    flex-wrap: wrap;
    justify-content: space-around;
}
@media screen and (min-width:1387px) {
main {
    width: 80%;
  margin: 0 10%;
}
}