body{
	margin:0px;
	padding:0px;
    background-color:   rgb(250, 247, 247);
}

@font-face {
	font-family:MADESAON;
	src: url(font/MADESAONARAPERSONAL.otf);

}

.globale{
	margin:0;
	padding:0;
	width: 100%;
	height: 20%;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

.haeder{
	width: 100VW;
	display:flex;
	height:6.5vh;
	position: fixed;
	z-index: 1;
	background-color: rgb(250, 247, 247);
	border-bottom: 1px solid black;
	overflow: hidden;
}

.entete{
    padding-left: 85VW;
	padding: 0.2;	
}

.retour{
	margin-top: 0.4;		
}

.entete img{
	width: 100%;
	height: 100%;
}

.retour img{
	width: 80%;
	height: 80%;
}

.contenu{
    display: flex;
    height: 100vh;
    position: relative;
 
}

.image{
    width: 55vw;
    overflow-x: scroll;
	overflow-y: hidden;
    display: flex;
    border: solid 1px black;
}

.text{
    width: 45vw;
    overflow: hidden;
}
.image img{
    height: 100%;
    border-right: solid 1px black;
    width: auto;
}

.titre{
    font-family:MADESAON;
    color: rgb(242, 45, 27);
	font-size:7vw;
	padding-left:5%;
	padding-top:7%;
	flex: 1 1 80%;
}
.rotating{
    margin-top: 60px;
    margin-left: 70px;
    position: absolute;
    transform:  rotate(40deg);    
}

.droite{
    border: solid 1px black; 
    width: 25vw;
}

.gauche{
    border-top: solid 1px black; 
    border-bottom: solid 1px black; 
    width: 25vw;
    height: 30vh;
    padding: 2%;
}

.bas{
    margin-top: 40vh;
    display: flex;
}

.info{
    margin: 2%;
    border-bottom: solid 1px black;
    font-size:1.5vw;
}


@keyframes rotating {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .rotating {
    animation: rotating 15s linear infinite;
  }

  @media(min-width: 768px) and (max-width: 1388px) {

    .haeder{
        padding-left: 75VW;
        height: 5.5vh;
    }

    .titre{
        font-size:9vw;
        margin-bottom: 10%;
    }

    .contenu{
        display:inline-block;
        margin: 0%;
        padding: 0%;
    }

    .text{
        width: 100vw;
        height: 45vh;
        margin: 0%;
        padding: 0%;
        overflow: scroll;
    }

    .image{
        width: 100vw;
        height: 55vh;
        margin: 0%;
        padding: 0%;
    }

    .bas{
        margin: 0%;
        padding: 0%;

    }

    .droite{
      width: 35vw;
    }
    
    .gauche{
       width: 65vw;
    }
    
    .rotating{
        margin-top: 25%;
        margin-left: 70%;
    }

    .info{
        font-size:3vw;
     }

}



@media(max-width: 768px){

    .haeder{
		padding-left: 60VW;
		height: 4.5vh;
	}

    .titre{
        font-size:9vw;
        margin-bottom: 10%;
    }

    .contenu{
        display:inline-block;
        margin: 0%;
        padding: 0%;
    }

    .text{
        width: 100vw;
        height: 45vh;
        margin: 0%;
        padding: 0%;
        overflow: scroll;
    }

    .image{
        width: 100vw;
        height: 55vh;
        margin: 0%;
        padding: 0%;
    }

    .bas{
        margin: 0%;
        padding: 0%;
    }

    .droite{
      width: 35vw;
    }
    
    .gauche{
       width: 65vw;
    }
    
    .rotating{
         display: none;
    }
    
    .info{
       font-size:4vw;
    }


}