* {
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
		}

        body {
            color: #091f35;
            background: rgb(255,214,214);
			background: linear-gradient(135deg, rgba(255,214,214,1) 0%, rgba(255,143,177,1) 100%);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-family: 'Playfair Display', serif;
            transition: all 0.2s;
        }

        header {
	        width: 80%;
	        margin: 0 auto;
	        padding-top: 100px;
	        text-align: center;
        }

        main {
	        width: 80%;
	        max-width: 600px;
	        margin: 0 auto;
	        text-align: center;
        }

        .gille {
	        background-image: url("image/gille.jpg");
        }

        .colette {
	        background-image: url("image/colette.jpg");
        }

		.portraitUser img {
			z-index: 100;
	        width: 7em;
	        height: 7em;
	        background-size: cover;
	        border-radius: 50%;
	        position: absolute;
	        top:-30px;
	        left: -30px;
	        border: 4px solid white;
			box-shadow: 0 4px 16px 0 rgba(0,0,0,.07);
			-webkit-box-shadow: 0 4px 16px 0 rgba(0,0,0,.07);
		}

        section img {
	        width: 100%;
	        border-radius: 4px 4px 0 0;
	        margin-bottom: -4px;
        }

        .grayscale
        {
	        filter: grayscale(1);
        }

        section {
	        position: relative;
	        margin-bottom: 100px;
        }

        .shadow {
			box-shadow: 0 4px 16px 0 rgba(0,0,0,.07);
			-webkit-box-shadow: 0 4px 16px 0 rgba(0,0,0,.07);
			margin-bottom: 30px;
        }

        h1 {
	        margin: 0;
	        font-weight: normal;
	        font-size: 10vw;
	        margin-bottom: 100px;
	        letter-spacing: -0.3vw;
        }

        h2 {
	        margin: 0 0 -10px 0;
	        font-weight: normal;
			font-size: 2.3em;
        }

        h3 {
	        margin: 0 0 10px 0;
	        font-weight: normal;
	        font-size: 2.3em;
        }

        h4 {
	        font-weight: normal;
	        font-size: 1em;
        }

        .video {
	    max-width: 600px;
/* 		position: relative; */
		padding-bottom: 100%;
		height: 0;
		overflow: hidden;
        }

        .video iframe,
		.video object,
		.video embed {
		  position: absolute;
		  top: -7%;
		  left: 0;
		  width: 100%;
		  height: 100%;
		}

		/* Audio player */
        .green-audio-player {
	    	width: 100%;
	    	border-radius: 0 0 4px 4px;
	    	box-shadow: none;
	    	-webkit-box-shadow: none;
        }

        .green-audio-player .slider .gap-progress .pin {
	        background-color: rgba(255,214,214,1);
        }

        .green-audio-player .slider .gap-progress {
	        background-color: rgba(255,214,214,1);
        }

        .green-audio-player .volume .volume__button.open path {
	        fill: rgba(255,214,214,1);
        }



		/* Mobile */
		@media only screen and (max-width: 500px) {
			body {
				font-size: 10px;
			}

			h1 {
				font-size: 12vw;
			}

			h4 {
				font-size: 4vw;
			}

			.video iframe,
			.video object,
			.video embed {
			  top: -10%;
			}
		}