@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

.goog-te-banner-frame.skiptranslate , #goog-gt-tt{
    display: none !important;
  visibility: none !important;
    } 

.goog-text-highlight {
  background: none !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
}


.text p{
  text-indent: 20px;
}

body {
    top: 0px !important; 
    }
h1{
  font-weight:bold;
  margin:none;
}
hr{margin-bottom:2em;}
.lvl{
  border-radius: 10px;
  padding:5px;
  background: white;
  font-size:bolder;
  margin: 5px;
  white-space:nowrap;
}

.frame .l{
  height: 100vh;
  float: left;
}
.frame .r{
  height: 100vh;
  float: right;
}


.lvl.easy{
  background: #77da90;
  color:white;
}
.lvl.med{
  background: #008cb4;
  color:white;
}
.lvl.part{
  background: #ac78e8;
  color:white;
}

.dtls{
  border-left:solid 2px white;
  padding: 5px;
}

a{
  text-decoration: none;
  color: inherit;
}
p > a {
  font-size:1.1em;
  font-weight:bold;
}
html, body {
  height: auto;
  width: auto;
  margin:0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.logos{
  position: absolute;
  z-index: 100;
  bottom: 40px;
  right:5px;
}
.logos img{
  width:50px;
  margin:3px;
}
.logos img:hover{
  width:56px;
  margin:0px;
}

.phone{
  position: absolute;
  bottom: 150px;
  z-index: 100;
  left:-70px;
  transform: rotate(-90deg);
  background: rgba(255,255,255,0.65);
  border-radius: 5px;
  padding:3px;
  font-size:1.3em;
  color:#4D2777;
  font-weight: bolder;
}
#main{
  width:auto;
  min-height:100vh;
  height:auto;
  position:relative;
  z-index:30;
  overflow-y:scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;
}
#main::-webkit-scrollbar {
  display: none;
}
#first-panel{
  width: auto;
  height:100vh;
  background: #fff;
  
  border-right: solid 1px #555;
  z-index:11;
  overflow-x:none;
  background-image: url('../imgs/background.jpg');
  background-position: center;
  background-size: cover;
}

.dropdown-container-alone{
  margin-top:44vh;
}

.logo-comp{
  position: absolute;
  top:5vh;
  left:50%;
  transform: translateX(-50%);
}
.logo{
  height:20vh;
}
.menu{
  position: absolute;
  left:50%;
  top:30vh;
  transform: translateX(-50%);
  z-index:11;
  display: inline-block;
  text-align: center;
}
.container{
  color:#4D2777;
  font-weight: bolder;
}

.dropdown-container{
  width:25vw;
  position: relative;
  margin-bottom: 10px;
  z-index:11;
  display: inline-block;
  border-radius: 8px;
}
.dropdown-menu{
  position: relative;
  left:50%;
  transform: translateX(-50%);
  width:200px;
  margin:0;
  border-radius: 8px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  color: #4D2777;
  font-weight: bolder;
  background-color:  rgba(255,255,255,0.65);
  
  z-index:11;
}
.title-dropdown{
  width:100%;
  height:45px;
  color: #4D2777;
  font-size:1.2em;
}
.dropdown{
  position: relative;
  width:200px;
  padding:0;
  color:#000;
  margin: 0;
  box-shadow: 0px 0px 14px -4px rgba(0,0,0,0.25);
  border-radius:8px;
}
.dropdown li{
  display: none;
  opacity: 0;
  height:0;
  background-color: rgba(255,255,255,0);
  transition: color .3s;
}
.dropdown li:hover,.dropdown li:active{
  color:#4D2777;
  background: rgba(245,243,250,.5);
}
.dropdown-menu:hover .dropdown li:nth-last-child(1),.dropdown-menu:active .dropdown li:nth-last-child(1){
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.dropdown-menu:hover .dropdown li:nth-child(2),.dropdown-menu:active .dropdown li:nth-child(2){
  animation-delay: .2s
}
.dropdown-menu:hover .dropdown li:nth-child(3),.dropdown-menu:active .dropdown li:nth-child(3){
  animation-delay: .4s;
}
.dropdown-menu:hover .dropdown li:nth-child(4),.dropdown-menu:active .dropdown li:nth-child(4){
  animation-delay: .6s;
}
.dropdown-menu:hover .dropdown li:nth-child(5),.dropdown-menu:active .dropdown li:nth-child(5){
  animation-delay: .8s;
}
.dropdown-menu:hover .dropdown li,.dropdown-menu:active .dropdown li{
  display: block;
  animation: menu1 .5s forwards;
}

.title-dropdown:hover,.title-dropdown:active{
  color:#fff;
  background: #4D2777;
  animation: drop .5s forwards;
}
.dropdown-container:hover  .title-dropdown,.dropdown-container:focus  .title-dropdown{
  color:white;
  background: #4D2777;
  border-radius:8px 8px 0 0
}

@keyframes drop{from{
    border-radius: 8px;
  }to{
    border-radius: 8px 8px 0 0;
  }}
@keyframes menu1{from{
    opacity:0;
    height:0;
    transform: translateX(-50px);
  }to{
    opacity: 1;
    height:45px;
    transform: translate(0);
  }}

.dropdown-menu ul{
  list-style : none;
  font-size: 1rem;
}

.accueil{
  color:black;
  background: white;
  border: solid 2px black;
}

body::-webkit-scrollbar {
  display: none;
}

.menu{
  opacity: 1;
}