u,,@font-face {
font-family: Simplon;
src: url(https://www.jordanmokou.ch/web/wp-content/themes/fonts/SimplonMono/SimplonEDUMono-Bold.otf);
font-weight: normal;
}

body{
    font-family: "Simplon_Mono_Reg", Arial, sans-serif;
    margin:0;
    padding:0;
    max-width: 1920px;
    position: relative;
    background-repeat: no-repeat;
    background-color: white;
    color: black;
    list-style: none;

}





h1{
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}

a{
  text-decoration:none;
}

a:visited{
  color: black;
}


/*header*/

/* header */

.header {
  
    margin-top: 1.5rem;
    padding: 0;
    top:0;
  position: fixed;
    overflow: hidden;
  width: 100%;
  height: 5vh;
  z-index: 3;
  transition:top 0.5s ease;
  mix-blend-mode: difference;

}


}


.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: transparent;

}

.header li a {
  display: block;
  text-decoration: none;
  
}


.header .logo {
  margin:0.5rem 4rem 0rem 4rem;
display: block;
float: left;
font-size: 1em;
text-decoration: none;
  text-transform: uppercase;
width: 10rem;
height: 2rem;
    
}


@media (max-width: 48em) {
  .header .logo{
    width: 5rem;
    height: 2rem;
    font-size: 0.8em;
    margin:1rem 1rem 2rem 1rem;
   
  }
}

/* menu */

.header .main-navigation{
  clear: both;
  float: right;
  max-height: 0;
  transition: max-height .2s ease-out;
    margin:0rem 4rem 1rem 1rem;
    text-decoration: none;
   
}

@media (max-width: 48em) {
.header .main-navigation{
float: left;
width: 100vw;

   
  }
}


.main-navigation li a{
    color: white;
    float: right;
    text-transform: uppercase;
text-align: right;
    font-family: "Arial", Arial, sans-serif;
    font-weight: 500;
    font-size: 0.8em;
    letter-spacing: 0.1rem;
    text-decoration: none;
}

@media (max-width: 48em) {
.main-navigation li a{
font-size: 0.8rem;
padding: 1rem 0rem 0rem 0rem;
color: white;
   
  }
}


.main-navigation li a:hover{
    color: white;
}





/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: white;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: white;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .main-navigation {
  max-height: 100%;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
   
  }
  
  
  .header li a {
    margin:1rem 0rem 0 1rem;
  }
  .header .main-navigation {
    clear: none;
    float: right;
    max-height: 100%;
      
  }
  .header .menu-icon {
    display: none;
  }
}

/*GRID*/
.grid_container{
  position: relative;
  max-width: 1920px;
  margin-left:0;
  margin-right: 0;
  margin-bottom: 0;
  margin-top: 0;

  
}
.grid{
  position: relative;
  max-width: 100vw;
  height: 100vh;
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw 3.3333vw;
 

}



.box1{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
  -webkit-transition: all 4s ease;
   -moz-transition: all 4s ease;
   -ms-transition: all 4s ease;
   -o-transition: all 4s ease;
   transition: all 4s ease;
}

.box1:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_1.jpg);
  -webkit-transition: all 0.1s ease;
   -moz-transition: all 0.1s ease;
   -ms-transition: all 0.1s ease;
   -o-transition: all 0.1s ease;
   transition: all 0.1s ease;
}


.box2{
  position: relative;
 background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box2:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_2.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box3{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box3:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_3.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box4{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box4:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_4.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box5{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box5:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_5.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box6{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box6:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_6.jpg);
 -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}



.box7{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box7:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_7.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box8{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box8:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_8.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box9{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box9:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_9.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}

.box10{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box10:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_10.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}

.box11{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
  -webkit-transition: all 4s ease;
   -moz-transition: all 4s ease;
   -ms-transition: all 4s ease;
   -o-transition: all 4s ease;
   transition: all 4s ease;
}

.box11:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_11.jpg);
  -webkit-transition: all 0.1s ease;
   -moz-transition: all 0.1s ease;
   -ms-transition: all 0.1s ease;
   -o-transition: all 0.1s ease;
   transition: all 0.1s ease;
}


.box12{
  position: relative;
 background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box12:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_12.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box13{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box13:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_13.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box14{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box14:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_14.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box15{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box15:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_15.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;

}


.box16{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box16:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_16.jpg);
 -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}



.box17{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box17:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_17.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box18{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box18:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_18.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box19{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box19:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_19.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}

.box20{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box20:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_20.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}

.box21{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
  -webkit-transition: all 4s ease;
   -moz-transition: all 4s ease;
   -ms-transition: all 4s ease;
   -o-transition: all 4s ease;
   transition: all 4s ease;
}

.box21:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_21.jpg);
  -webkit-transition: all 0.1s ease;
   -moz-transition: all 0.1s ease;
   -ms-transition: all 0.1s ease;
   -o-transition: all 0.1s ease;
   transition: all 0.1s ease;
}


.box22{
  position: relative;
 background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box22:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_22.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box23{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box23:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_23.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box24{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box24:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_24.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box25{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box25:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_25.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box26{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box26:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_26.jpg);
 -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}



.box27{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box27:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_27.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box28{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box28:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_28.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}


.box29{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box29:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_29.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}

.box30{
  position: relative;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_gif.gif);
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
 transition: all 4s ease;
}

.box30:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_30.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}

/*Titre site*/

.border_titre{
  position: absolute;
  width: 30vw;
  height: 20vh;
  border: solid 1px transparent;
margin: auto;
top: 0;
left: 0;
bottom: 0;
 right: 0;
  z-index: 5;
animation: animate 2s linear forwards;
mix-blend-mode: difference;
}

@keyframes animate {
  0%{
    width: 30vw;
    height: 20vh;
    border-top-color:transparent;
    border-bottom-color:transparent;
    border-left-color:transparent;
    border-right-color:transparent;
  }
  25%{
    width: 30vw;
    height: 20vh;
    border-top-color:white;
    border-bottom-color:transparent;
    border-left-color:transparent;
    border-right-color:transparent;
  }
  50%{
    width: 30vw;
    height: 20vh;
    border-top-color:white;
    border-bottom-color:white;
    border-left-color:transparent;
    border-right-color:transparent;
  }
  
  75%{
    width: 30vw;
    height: 20vh;
    border-top-color:white;
    border-bottom-color:white;
    border-left-color:transparent;
    border-right-color:white;
  }
  100%{
    width: 30vw;
    height: 20vh;
    border-top-color:white;
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
  }
  keyframes
}

.titre{

color: white;
font-size: 2rem;
mix-blend-mode: difference;
padding-top: 8%;
padding-bottom: 10%;
font-family: "Sangbleu_kingdom", Arial, sans-serif;
}

.titre p{
  margin:auto;
  text-align: center;
  
}


.sous_titre{
  font-size: 1rem;
  padding-top: 1rem;
}

/*footer*/

.footer {
  position: relative;
     display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.5vh;
  width: 100%;
  background-color: black;
    height: 0rem;
    z-index: 5000;
    margin: 0;

}

/*Contenu*/

.container{

    position: relative;
    max-width: 1920px;
    margin-left:0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 0;
    background-color: white;
    z-index: -2;
}

.container_grid{
  position: relative;
  max-width: 100vw;
  min-height: 100vh;
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: 20vw 50vw 30vw;

}

.sport{
margin:1rem 0rem 0rem 0rem;
text-decoration: none;
font-family: "Sangbleu_kingdom", Arial, sans-serif;
display: block;
z-index: 1;
color: black;
border-right: 1px solid black;   
word-wrap: break-word;
}

.sport p{
  margin:0 2rem 0.5rem 4rem;
  font-size: 4rem;
  color:black;
  
  
}

.sport a{
  margin:0 2rem 0.5rem 4rem;
  display: inline-block;
  font-size: 1.2rem;
  color: black;
  width: 30%;
}

.article{
  margin:1rem 0rem 0rem 0rem;
  text-decoration: none;
  font-family: "Sangbleu_kingdom", Arial, sans-serif;
  display: block;
  z-index: 1;
  color: black;
  border-right: 1px solid black;   
  word-wrap: break-word;

}

.article a{
  margin:1rem 2rem 0.5rem 4rem;
  display: inline-block;
  font-size: 1rem;
  color: black;
  width: 70%;
  border-bottom: 1px solid black;
  -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}

.article a:hover{
margin-bottom: 1rem;
-webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -ms-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;
}

.article_desc{
 visibility: hidden;
  color: white;
  width: 40%;
  max-height: 0rem;
  margin-left: 4rem;
  margin-top: 0;
  padding: 0;
  font-size: 1rem;
  -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transitions: all 1s ease;
}

.article a:hover ~ .article_desc{ 
  visibility: visible;
  color: black;
  max-height: 2rem;
  width: 40%;
  -webkit-transition: all 3s ease;
   -moz-transition: all 3s ease;
   -ms-transition: all 3s ease;
   -o-transition: all 3s ease;
   transitions: all 3s ease;
}


.col_lateral{
  margin-top: 1rem;
  margin-right: 2rem;
  text-decoration: none;
  font-family: "Sangbleu_kingdom", Arial, sans-serif;
  display: block;
  z-index: 1;
  color: black;
  border-top: 1px solid black;   
  word-wrap: break-word;

}

.photo{
  margin:4rem 2rem 0.5rem 4rem;
  border: solid 1px black;
  max-width: 25vw;
  height: 50vh;
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/damiano.jpg);
  background-size: 100% 100%;}
  
  
  /*Scroll*/
  
  .container_scroll{
    position: relative;
    max-width: 100vw;
    max-height: 160vh;
    overflow: hidden;
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: 33vw 33vw 33vw ;
    border-bottom: solid 2px black;
    background: #010000;
  
  }
  
  .colonne_1{
    border-right:solid 2px white;
  }
  
  .colonne_1 p{
    
  }
  
  .colonne_2{
    height:1300px;
    margin-top: -2500px;
    z-index: 0;
    min-height: 500vh;
  }
  
  .colonne_3{
    border-left:solid 2px white; 
    border-right:solid 2px white;
  }
  
  .colonne_4{
    height:1300px;
    margin-top: -2500px;
    z-index: -1;
    max-height: 200vh;
    margin-right: 1rem;
  }
  
  .border_bloc{
    width: 100%;
    margin: 0;
  
    border-bottom: solid 2px white;
    
  }
  
  .photo_desc{
    font-family: "Sangbleu_kingdom", Arial, sans-serif;
    margin-left: 1.3rem;
  }
  
  .photo_bloc{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 90%;
    min-height: 50vh;
    background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/damiano.jpg);
    background-size: cover;
    
  }
  .photo_bloc2{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 90%;
    min-height: 50vh;
    background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/auguste.jpg);
    background-size: cover;
  
  }
  
  .photo_bloc3{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 90%;
    min-height: 50vh;
    background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/mathilde.jpg);
    background-size: cover;
  
  }
  
  .photo_bloc4{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 90%;
    min-height: 50vh;
    background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/Yves.jpg);
    background-size: cover;
  
  }
  
  .photo_bloc5{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 90%;
    min-height: 50vh;
    background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/andre.jpg);
    background-size: cover;
  
  }
  
  .photo_bloc6{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 90%;
    min-height: 50vh;
    background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/marc.jpg);
    background-size: cover;
  
  }
  
  .photo_bloc7{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 90%;
    min-height: 50vh;
    background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/jean.jpg);
    background-size: cover;
  
  }
  
  .photo_bloc8{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 90%;
    min-height: 50vh;
    background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/mirco.jpg);
    background-size: cover;
  
  }
  
  .photo_bloc9{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: 90%;
    min-height: 50vh;
    background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/Louis.jpg);
    background-size: cover;
  
  }
  

  
  .texte_bloc{
    margin-left:1.7rem;
    margin-right: 1rem;
    text-align: left;
font-family: "Theinhardt", Arial, sans-serif;
    font-size: 1.5rem;
    color: white;
    
  }
  
  .button {
    background-color: white; /* Green */
    font-family: "Theinhardt", Arial, sans-serif;
    border: solid 2px black;
    color: black;
    padding: 0.3rem 0.5rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.8rem;
    margin-left:1rem;
    margin-top: 0;
    margin-bottom: 1rem;
  }
  
  /* Suite */
  .container_focus{
    position: relative;
    max-width: 100vw;
    max-height: 150vh;
    overflow: hidden;
    display: grid;
    margin-top: 3rem;
    padding: 0;
    grid-template-columns: 75vw 25vw;
    border-bottom: solid 2px black;
  
  }
  
  .focus{
    background: white;
    min-height: 50vh;
  }
  
  .focus_lateral{
    background: white;
    min-height: 50vh;
  }
  
  /*Page Article*/
  
  .container_article{
    
    position: relative;
    max-width: 1920px;
    margin:0;
    z-index: -2;
    background-color: white;
    
  }

.grid_article_page{
  position: relative;
  max-width: 100vw;
  display: grid;
  padding: 0;
grid-template-columns: 100vw;
opacity: 100%;

}

.banner_article{
  background-color: green;
  color: white;
  height: 50vh;
}


.banner_article:hover{
  background-image: url(https://bachelor.jordanmokou.ch/wp-content/uploads/2021/03/banner_24.jpg);
-webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
}