body {

    background-color: black;

    color: white;

}

.menu{
	width: 100%;

}

.menu li{
	
	display: inline-block;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 2em;
	font-weight: bolder;
	padding-top: 20px;
	padding-left: 10px;
	margin-left: 20px;

}


a:link {

    text-decoration:none;

    color:slategrey;

}

    

a:visited {

    color:slategrey;

}



a:hover {

    color:antiquewhite;

    background-color:slategray;

}



.pp {

    width : auto;

    height : 100px;

    border-radius: 42% 58% 54% 46% / 19% 32% 68% 81%;

/*    position: absolute;*/

/*    top: 2%;

    left: 1%; */

}



.gurvanpellen {

    font-weight:lighter;

    font-size:2em;

    color:slategrey;

    font-family:sans-serif;

    position: absolute;

    top: 2%;

    left: 6%;

}



.draw {

    font-weight:lighter;

    font-size: 2em;

    color:slategrey;

    font-family:sans-serif;

    position: absolute;

    top: 2%;

    right: 6%;

}



.photo {

    font-weight:lighter;

    font-size: 2em;

    color:slategrey;

    font-family:sans-serif;

    position: absolute;

    top: 2%;

    left: 45%;

}



.vid1{

    position: relative;

    margin-top:8%;

    width: 100%;

    height: 700px;

}



.titrevideo{

    font-weight:lighter;

    font-size: 2em;

    color:aliceblue;

    font-family:sans-serif;

    position: relative;

    top: 10%;

    text-align : center;

}



.vid2{

    position: relative;

    margin-top:8%;

    width: 100%;

    height: 700px;

}



.titrevideo2{

    font-weight:lighter;

    font-size: 2em;

    color:aliceblue;

    font-family:sans-serif;

    position: relative;

    top: 10%;

    text-align : center;

}



.breizh{

    width : 100%;

    position: relative;

    margin-top:5%;

}



.breizhshelter{

    font-weight:lighter;

    font-size: 2em;

    color:aliceblue;

    font-family:sans-serif;

    position: relative;

    top:10%;

    text-align : center;

}



.profil{

    width:100%;

    position:relative;

}



p{

    font-size: 1.5em;

    font-weight: lighter;

    font-family: sans-serif;

    position: relative;

    margin-top:8%;

    color:aliceblue;

    padding: 2%;

    line-height: 150%;

    margin-left: 5%;

    margin-right: 5%;

    text-align: center;

    border: 3px slategray solid;

}



#mesimages img{

    width : 100%;

    margin: 0.2%;

    height : auto;

    position: relative;

/*    top:150px;

    left: 1%;*/

}



/*#mesimages :hover{

    border-radius:5%;

}*/



.mesdessins img{

    width : 100%;

    margin: 10px;

    height : auto;

    position: relative;

/*    top:200px;*/

}



/*.mesdessins :hover{

    border-radius: 5%;

}*/



.aee{

    width : auto;

    margin: 1%;

    height : 300px;

    position: absolute;

    top:120px;

    left: 2%;

}



.insta360{

    width : auto;

    margin: 1%;

    height : 295px;

    position: relative;

    left:35%;

    top:118px;

}



.panasonic{

    width : auto;

    margin: 1%;

    height : 300px;

    position: absolute;

    top:120px;

    right: 2%;

}



.mesoutils img{

    width : auto;

    height : 185px;

    position: relative;

/*    top:130px;

    margin:2.5%*/

}



@media(max-width: 767px){
	


    .pp {

        width : auto;

        height : 12%;

        border-radius: 42% 58% 54% 46% / 19% 32% 68% 81%;

        position: absolute;

        top: 2%;

        left: 3%; 

    }

    

    .gurvanpellen {

        font-weight:lighter;

        font-size:1em;

        color:slategrey;

        font-family:sans-serif;

        position: relative;

        margin-top: 2%;

        left: 18%;

    }

    

    .draw {

        font-weight:lighter;

        font-size: 1em;

        color:slategrey;

        font-family:sans-serif;

        position: relative;

        top: 2%;

        left: 18%;

    }

    

    .photo {

        font-weight:lighter;

        font-size: 1em;

        color:slategrey;

        font-family:sans-serif;

        position: relative;

        top: 2%;

        left: 18%;

    }



    .header{

        background: linear-gradient(90deg, black, slategray);

        margin:0%;

        padding: 1%;

    }

    

    .vid1{

        position: relative;

        margin-top:5%;

        width: 100%;

        height: 230px;

    }

    

    .titrevideo{

        font-weight:lighter;

        font-size: 0.8em;

        color:aliceblue;

        font-family:sans-serif;

        position: relative;

        text-align : center;

    }



    .vid2{

        position: relative;

        margin-top:5%;

        width: 100%;

        height: 230px;

    }

    

    .titrevideo2{

        font-weight:lighter;

        font-size: 0.8em;

        color:aliceblue;

        font-family:sans-serif;

        position: relative;

        text-align : center;

    }

    

    .breizh{

        width : 100%;

        position: relative;

        margin-top:5%;

    }

    

    .breizhshelter{

        font-weight:lighter;

        font-size: 0.8em;

        color:aliceblue;

        font-family:sans-serif;

        position: relative;

        top:10%;

        text-align : center;

    }

    

    .profil{

        width:100%;

        position:relative;

        margin-top: 0%;

    }

    

    p{

        font-size: 1em;

        font-weight: lighter;

        font-family: sans-serif;

        position: relative;

        margin-top:5%;

        color:aliceblue;

        padding: 2%;

        line-height: 150%;

        margin-left: 5%;

        margin-right: 5%;

        text-align: center;

        border: 3px slategray solid;

    }

    

    #mesimages img{

        margin: 2px;

        width : 100%;

        height:auto;

/*        position: relative;

        top:120px;

        left:4%;*/

    }

    

/*    #mesimages :hover{

        border-radius:5%;

    }*/

    

    .mesdessins img{

        margin: 2px;

        width:100%;

        height : auto;

/*        position: relative;

        top:60px;

        left:4%;*/

    }

    

/*    .mesdessins :hover{

        border-radius: 5%;

    }*/

    

    .aee{

        width : auto;

        margin: 1%;

        height : 100px;

        position: absolute;

        top:110px;

        left: 5%;

    }

    

    .insta360{

        width : auto;

        margin: 1%;

        height : 98px;

        position: absolute;

        left:30%;

        top:112px;

    }

    

    .panasonic{

        width : auto;

        margin: 1%;

        height : 100px;

        position: absolute;

        top:110px;

        right: 5%;

    }

    

    .mesoutils img{

        width : auto;

        height : 120px;

        position: relative;

        top:20px;

    }



}