*{
scroll-behavior: smooth;
}
body{
font-family: 'Roboto', helvetica, arial, sans-serif;
line-height:1.5;
color:#000;
font-weight:500;
text-align:left;
margin: 0;
overflow-x: hidden;}

a{
color: #FFF;
}

ul{
list-style: none;
margin:0;
padding: 0;
}

figure{
margin:0;
}

blockquote{
margin: 20px;
margin-bottom: -15px;
}

figcaption{
font-size: 10px;
margin: 20px;
}


@media (-webkit-min-device-pixel-ratio:2),
	(min-resolution:102dpi){
		/*Css pour le retina @2x ici*/
		.myimage{ background-image: url(../assets/images/mike_monteiro.jpg);}
}

.myimage{
background-repeat: no-repeat;
background-position: right top;
position: relative;
top: 40px;
margin-bottom: -90px;
z-index: -1;
width: 100%;
}

@media (-webkit-min-device-pixel-ratio:2),
	(min-resolution:102dpi){
		/*Css pour le retina @2x ici*/
		.myimage--left{ background-image: url(../assets/images/miky.jpg);}
}

.myimage--left{
width: 80%;
margin-bottom: -30px;
top: -35px;
z-index: inherit;
}

.section{
padding: 25px;
margin: 15px;}

.section--grey{
background-color:#f5f5f5;
margin-bottom: 100px;}

.section--red{
background-color:#c90000;}

 .box{
padding: 20px;
box-shadow: 0 10PX 20px 0 rgba(0,0,0,.18);
background-color: #f5f5f5;
margin: 20px;}


.title{
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}

.title--red{
font-size: 20px;
color: #c90000;
}

.title--big{
font-size: 50px;
line-height: 60px;
font-weight: 900;
}

.title--up{
position: relative;
top: -110px;
}

.title--bloc{
color: #FFF;
background-color: #000000;
padding: 4px 0;
z-index: 10;
content: none;
}

.title--blocdeux{
font-size: 18px;
display: inline-table;
width: fit-content;
padding: 4px;
}

.title--small{
letter-spacing: 1.3px;
color: #0500e5;
}

.title--deco:before{
font-family: 'Cantata One', serif;
content: attr(data-lettrine);
color: #f5f5f5;
font-weight: 700;
font-size: 150px;
position: relative;
display: block;
z-index: -10;
top: 25px;
}

.title--decoright:before{
text-align: right;
}


.link{
font-size: 40px;
line-height: 65px;
font-weight: 700;
color: #FFF;
padding: 4px;
background-color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.link:hover{
color: #C90000;
}



.link--ext{
font-size: 20px;
line-height: 40px;
background-color: #0500e5;
}



.text{
font-size: 16px;
letter-spacing: 0.2px}

.text--small{
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #C90000;
line-height: 15px;
}

.text--white{
color: #FFF;
position: relative;
top: -30px;
}

.crédits{
font-size: 10px;
font-weight: 400;
color: #FFF;
text-align: center;
}

.liste__el:hover{
color: #000;
}



/*Nav*/

.burger{
position: fixed;
display: block;
width: 30px;
height: 30px;
top: 20px;
right: 20px;
z-index: 20;
background-image: url(../assets/images/burger-01.svg);
background-repeat: no-repeat;
background-size: contain;
}

.menu{
display: flex;
flex-flow: column wrap;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 100%;
background:#f5f5f5;
z-index: 19;
opacity: 0;
transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
will-change:transform, opacity;
overflow-y: hidden;}

.menu--open{
transform: translateX(-100%);
opacity: 1;}

.menuconteneur{
margin: auto;
width: auto;
height: auto;
}


/* --Mediaqueries-- */


@media (min-width: 600px){

figure{
display: flex;
flex-flow: column wrap;
}

blockquote{
margin: auto;
text-align: center;
margin-bottom: -15px;
}

figcaption{
margin: auto;
}

.title--big{
font-size: 70px;
line-height: 90px;
}

.title--up{
top: -115px;
}

.section{
padding: 35px;
}

.myimage--left {
width: 80%;
margin-bottom: -50px;
top: -55px;
z-index: inherit;
}

.link{
font-size: 60px;
line-height: 100px;
}

.link--ext{
font-size: 40px;
line-height: 75px;
}

.text--small{
font-size: 16px;
line-height: 20px
}

}

@media (max-height: 400px){

.text--small{
display: none;
}
.menuconteneur{
display: flex;
flex-flow: row wrap;
justify-content: space-around;
width: 100vw;
}

.link{
font-size: 12px;
}
}


@media (max-height: 650px){
	
.link{
font-size: 20px;
line-height: 40px;
}


.link--ext{
font-size: 16px;
line-height: 35px;
}

.text--small{
font-size: 10px;
line-height: 10px;
}



.title--big {
font-size: 40px;
line-height: 50px;
}

.box{
margin:5px; 
}
}

@media (min-height: 700px){
	
.link{
font-size: 30px;
line-height: 50px;
}


.link--ext{
font-size: 26px;
line-height: 45px;
}

.text--small{
font-size: 14px;
line-height: 20px;
}

}


@media (min-width: 1200px){


ul{
display: flex;
flex-flow: row wrap;}

figure{
display: flex;
flex-flow: column wrap;
}

blockquote{
margin: auto;
text-align: center;
height: 65px;
}

figcaption{
margin: auto;
}

.burger{
display: none;
}

.menu{
position: inherit;
opacity: 1;
left: inherit;
flex-flow: row wrap;
background-color: inherit;
height: 100px;
margin-bottom: -90px;
}

.menuconteneur{
display: flex;
width: calc(100vw - 45px);
}

.menuconteneurdeux{
display: flex;
width: 100vw;
justify-content: center;
flex-flow: column wrap;
text-align: center;
position: relative;
height: 100px;
margin-top: -65px;
}


.link{
font-size: 13px;
background-color: inherit;
color:#0500e5;
margin-left: 25px;
line-height: inherit;
}

.link--ext{
color:#000000;
}

.title--big{
font-size: 140px;
line-height: 170px;
}

.title--bloc{
font-size: 200px;
line-height: 170px;
}

.title--blocdeux{
font-size: 18px;
line-height: inherit;
}

.title--up{
top: -115px;
}

.text--small{
display: none;
}


.liste{
justify-content: center;
margin-bottom: 30px;
}


.liste__el{
margin-left: 20px;
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.section{
padding: 35px;
}

.conteneur{
display: flex;
flex-flow: row wrap;
width: 100vw;
justify-content: space-around;
}

.section--bloc{
width: 80vw;
}
.myimage{
width: 700px;
}

.myimage--left{
width: 370px;
position: inherit;
margin:auto;
}

.test{
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}

.bloc{
width: 40vw;
display: flex;
flex-flow: column wrap;

}

.bloc--center{
margin: auto;
justify-content: flex-end;
}

.box{
padding: 50px;
}

.section--f{
display: flex;
justify-content: flex-end;
}
}