/* MENU */
.positioner_openNav_language{
  font-family: "Clarika";

  position: fixed;
  top: 50%;
  right: 20.5px;

  margin-top: -260px;

  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 25% 25% 25% 25%;
  row-gap: 11.25%;

  text-align: right;
  z-index: 1000;
  mix-blend-mode: exclusion;
}
.positioner_openNav_language.static{
  position: absolute;
}
.positioner_openNav_language #language{
  font-size: 20px !important;
  margin: 0 5px;
}
.positioner_openNav_language a, .positioner_openNav_language span{
  display: block;
}
.openNav{
  font-family: "Clarika";

  position: fixed;
  top: 50vh;
  right: 30px;
  transform: translateY(-50%) scale(.7);

  cursor: pointer;
  
  font-variant-caps: small-caps;
  /* font-size: 130%; */
  font-size: 1.2em;
  
  /* color: #fff9; */
  /* text-shadow: rgb(255, 255, 255) 0px 0px 10px; */
    
  transition: all .5s, animation 1.5s;
  z-index: 10;
  color: rgba(119, 119, 119, 0.9);
  filter: grayscale(100%);
}
/* .openNav.static{
  color: #fff8;
  position: absolute;
  position: absolute;
    right: -1.5px;
    top: 27.5vh;
} */
.openNav:hover{
  color: rgba(119, 119, 119, 1);;
  animation: none;
}
/* .openNav.static:hover{
  color: #fff;
  animation: none;
} */
.unseen-menu{
  text-shadow: #fff 0 0 15px;
  animation: flash;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;

  opacity: 0;

  position: fixed;
  right: auto;
  top: 22.5px;
  /* transform: translateX(20px); */

  z-index: -1;
}
@keyframes flash{
  0%{
    opacity: 0;
    text-shadow: lightblue 0 0 10px;
  }
  80%{
    opacity: 1;
    text-shadow: lightblue 0 0 10px;
  }
  100%{
    opacity: 1;
    text-shadow: lightblue 0 0 10px;
  }
}
/* .title{
  position: relative;
  text-align: center;
  background: url(banniere3.jpg) repeat;
  background-position: center 48%;
  background-size:cover;
  padding: 5% 0;
  margin-block-start: 0;
  margin-block-end: 0;
} */
/* The side navigation menu */
.sidenav {
	height: 100vh; 
  width: 500px; 

  font-family: "Clarika";

  margin-right:-500px;
    
	position: fixed;
	z-index: 10000000;
	top: 0;
  right: 0;
    
  font-size: 110%;
  font-size: 1.1em;
  box-shadow: rgba(255, 255, 255, 1) 0px 0px 10px;
	background-color: #fff; 
	overflow-x: hidden; 
	padding-top: 60px; 
	transition: 0.5s;
}
.sidenav.show{
    margin-right: 0%;
}
  .sidenav a{
    padding: 8px 8px 8px 32px;
    
    text-decoration: none;
    
	  /* font-size: 120%; */
    font-size: 1.25em;
    /* color: #000; */
    color: #1a0b00;

    display: block;

    width: 50%;

    text-align: left!important;

	  transition: 0.3s;
  }
  .sidenav a:hover {
    color: #1a0b00;
    /* yo */
    text-shadow: rgba(0, 0, 0, .5) 0px 0px 10px;
  }
  .sidenav .rs:hover{
    transform: scale(1.2);
    margin: 0!important;
  }
  .socialbuttons{
    position: relative;
    top: 0em;
    width: min-content;
    left: 100%;
    transform: translateX(-100%);
    display: grid;
    z-index: 10;
  }
  .sociallinks{
    transform: translateX(-100%);
  }
  .sidenav .closebtn {
    position: absolute;
    top: 44vh;
    right: 20px;

    transform: rotate(-90deg) translateX(75%);

    z-index: 100;

    /* font-size: 190%; */
    font-size: 1.6em;
    font-family: initial;
    color: #1a0b00;

    cursor: pointer;

    text-shadow: #000 0 0 0px;
    transition: .5s text-shadow ease;

    padding: 0px 8px;
    
    text-decoration: none;
  }
  .sidenav .closebtn:hover{
    text-shadow: #000 0 0 10px;
  }

@media only screen and (min-width:0px) and (max-width:735px){
  .openNav {
    position: fixed;
    top: 10px;
    right: 10px;
    transform: translateY(0%) scale(1);
    font-size: 130%;
  }
  .sidenav .closebtn {
    top: -35px;
    right: 2px;
    transform: rotate(0deg) translateY(-25%);
    font-size: 190%;
  }
  .positioner_openNav_language{
    position: fixed;
    top: 23px;
    left: 27.5%;
    right: initial;
    margin-top: 0px;
    display: initial;
  }
  .sociallinks{
    position: relative;
    top: 150%;
    left: 0;
    transform: translate(-50%, -20%);
  }
}