@font-face {
    font-family: 'Sporting Grotesque';
    src: url('SportingGrotesque-Regular.woff2') format('woff2'),
        url('SportingGrotesque-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sporting Grotesque';
    src: url('SportingGrotesque-Bold.woff2') format('woff2'),
        url('SportingGrotesque-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

h1{
  font-size: 126px;
  font-family: 'Sporting Grotesque';
  text-align: left;
  margin-bottom: 0;
  line-height: 1.2;
  color: white;
  transform: rotate(90deg);
  transform-origin: top left;
  margin-bottom: 40px;
  margin-left: 620px;
  margin-top: 414px;
}

h2 {
  font-size: 18px;
  font-family: 'Sporting Grotesque';
  margin-bottom: 8px;
}

h3 {
  font-size: 18px;
  font-family: 'Sporting Grotesque';
  margin-bottom: 8px;
}

h4 {
  font-size: 18px;
  font-family: 'Sporting Grotesque';
  margin-bottom: 8px;
}

h5 {
  font-size: 18px;
  font-family: 'Sporting Grotesque';
  margin-bottom: 8px;
  margin-top: 15px;
}


body{
  background-image:url(image/backgroundok.jpg);
  background-repeat: no-repeat;
  background-color: #ff3131;
  background-size: 100%;
  cursor:url(image/curseur.png), auto;
}

.element {
  z-index: 2;
  float: right;
  position: relative;
  bottom: 0px;
  top: -886px;
  left: 650px;
}

.apercu {
  width: 280px;
  height: 0px;
  font-family: Roboto;
  position: absolute;
}

.apercu img {
  width:100%;
}

.grrrlsneedmodems img {
  width:130%;
  left: 10px;
}
.invisible {  display: none;}

.infoleft {left: 0;}
.inforight {right: 0;}

/*
placement box */

.grrrlsneedmodems {
  z-index: 5;
  left: 310px;
  top:0;
  font-family: Roboto;
  font-size: 20px;
  background: #24bcbf;
  text-transform: uppercase;
}

.cube {
    margin: 52px;
    position:relative;
    width: 252px;
    height: 330px;
    left: 62px;
    bottom: 395px;
    border: 0px solid red;
}

.cube:hover .cube-texte{
    opacity:1;
}

.cube-texte {
    opacity:0;
    position: absolute;
    top:0;
    text-align: left;
    margin-top: 71px;
    width: 330px;
    height: 190px;
    left: 201px;
    background: #ff3131;
    color: white;
    font-size: 16px;
    text-transform: none;
    line-height: 20px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 12px;
}

.lindadement {
width: 550px;
z-index: 1;
left: 0;
top:150px;
font-family: Roboto;
}

.cube2 {
    margin: 52px;
    position:relative;
    z-index: 5;
    width: 500px;
    height: 354px;
    bottom: 300px;
    top: -422px;
    right: 40px;
    border: 0px solid red;
}

.cube2:hover .cube-texte2{
    opacity:1;
}

.cube-texte2 {
    opacity:0;
    z-index: 4;
    position: absolute;
    text-align: left;
    margin-bottom: 390px;
    width: 360px;
    height: 136px;
    left: 90px;
    background: #ff3131;
    color: white;
    font-size: 16px;
    text-transform: none;
    line-height: 20px;
    padding-left: 17px;
    padding-top: 5px;
    padding-right: 9px;
    padding-bottom: 7px;

}

.cyberpunk {
z-index: 2;
width: 620px;
left: 685px;
top: 0;
bottom: 120px;
}

.cube3 {
    margin-left: 5px;
    position:relative;
    width: 625px;
    height: 647px;
    bottom: 400px;
    border: 0px solid red;
}

.cube3:hover .cube-texte3{
    opacity:1;
}

.cube-texte3 {
    opacity:0;
    position: absolute;
    text-align: left;
    margin-bottom: 290px;
    width: 330px;
    height: 167px;
    left: 190px;
    top: 237px;
    background: #ff3131;
    color: white;
    font-size: 16px;
    text-transform: none;
    line-height: 20px;
    padding-left: 15px;
    padding-top: -5px;
}

.Ghost{
z-index: 1;
width: 620px;
right: 687px;
top: 900px;
bottom: 420px;
}

.cube4 {
    margin-left: 5px;
    position:relative;
    width: 510px;
    height: 260px;
    bottom: 322px;
    border: 0px solid red;
}

.cube4:hover .cube-texte4{
    opacity:1;
}

.cube-texte4 {
    z-index: 8;
    opacity:0;
    position: absolute;
    text-align: left;
    margin-bottom: 290px;
    width: 330px;
    height: 135px;
    left: 289px;
    top: -106px;
    background: #ff3131;
    color: white;
    font-size: 16px;
    text-transform: none;
    line-height: 20px;
    padding-left: 15px;
    padding-top: 4px;
}

.background04 {
z-index: 1;
width: 10%;
left: 487px;
top: 870px;
bottom: 420px;
}

.cube5 {
    margin-left: 5px;
    position:relative;
    z-index: 1;
    width: auto;
    height: 320px;
    bottom: 410px;
    border: 0px solid red;
}

.cube5:hover .cube-texte5{
    opacity:1;
}

.cube-texte5 {
    opacity:0;
    position: absolute;
    text-align: left;
    margin-bottom: 290px;
    width: 330px;
    height: 110px;
    left: 190px;
    top: 420px;
    background: #0000ff;
    color: white;
    font-size: 16px;
    text-transform: none;
    line-height: 20px;
    padding-left: 15px;
    padding-top: 10px;
}