@charset "utf-8";
/* CSS Document */

*{
	padding: 0;
	margin: 0;
}

*::-webkit-scrollbar{
	display: none;
}
*::-webkit-scrollbar-button{
	display: none;
}
*::-webkit-scrollbar-thumb{
	display: none;
}

.container{
	margin: auto;
	width: 85%;
	max-width: 1500px;
}
.clear{
	clear: both;
}
.clear2{
	clear: both;
}

#principal{
	height: 100vh;
	min-height: 500px;
}
#principal {
}


header{
	margin: 0 0 2% 0;
}

nav{
	font-family: 'Dosis', sans-serif;
	font-weight: 800;
	padding: 6% 0;
}

nav>a>img{
	width: 8%;
	float: left;
	margin-top: -2%;
}

li{
	float: right;
	display: inline-block;
	padding-left: 5%;
}

a{
	text-decoration: none;
	color: #b729cc;
}

a:hover{
	color: #f7bed2;
}

a:hover > .green{
	visibility: visible;
	width: 125%;
}

.green{
	background-color: #99ff66;
	height: 0.2em;
    width: 0%;
    position: relative;
    top: -9px;
    right: 12%;
	transition: 0.2s;
	transition-timing-function: ease-in;
	border-radius: 5px;
}

header>.container>.clear+div{
	background-color: rgba(255,255,255,0.65);
	width: 100%;
	margin: 6% 0 0 0;
	padding: 2em;
	border-radius: 2%;
}

header>.container>.half>a{
	width: 100%;
	height: 70vh;
	background-size: cover;
	border-radius: 3%;
	display: block;
	background-color: #6D257A;
}
header>.container>.half>#illu{
	background-image: url("images/half-illu.png");
}
header>.container>.half>#illu:hover{
	background-image: url("images/half-illu.png");
}
header>.container>.half>#graph{
	background-image: url("images/koeda/ArtDecoComp_02.png");
}

header>.container>.half{
	margin: 3% 0 0 4%;
	border-radius: 3%;
	width: 48%;
}
header>.container>.half:nth-child(2){
	margin: 3% 0 0 0;
}

header>.container>.half>a>h1{
	text-align: center;
	padding: 35% 0 0 0;
	text-decoration: none;
	background: -webkit-linear-gradient(bottom, #b729cc, #d42a9c);
	-webkit-background-clip:
		text;
	-webkit-text-fill-color:
		transparent;
	transition: 0.3s;
}
header>.container>.half>a:hover>h1{
	text-shadow: 0 0 10px #C229BA;
	-webkit-text-fill-color:
		#FFFFFF;
	font-size: 5.5em;
}

h1{
	font-family: 'Dosis', sans-serif;
	font-size: 5em;
	font-weight: 800;
	margin: 0 0 3% 0;
	background: -webkit-linear-gradient(bottom, #b729cc, #d42a9c);
	-webkit-background-clip:
		text;
	-webkit-text-fill-color:
		transparent;
}

h1+p{
	font-family: 'Dosis', sans-serif;
	font-size: 1.5em;
	color: #a036b3;
}

p>a{
	color: #d42a9c;
}

.down{
	position: absolute;
	width: 15px;
	height: 50px;
	border-radius: 25px;
	background: transparent;
	border: 4px solid #f6bed1;
	top: 72%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: appear 1s ease-out;
	animation-fill-mode: both;
	animation-delay: 14s;
}

.down:before{
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #f6bed1;
	left: 50%;
	top: 3px;
	transform: translate(-50%, 0%);
	animation: goDown 1s ease-in infinite; 
}

@keyframes goDown{
	0%{
		transform: translate(-50%, 0px);
		opacity: 0;
	}
	70%{
		transform: translate(-50%, 18px);
		opacity: 1;
	}
	100%{
		transform: translate(-50%, 30px);
		opacity: 0;
	}
}


/*_____________________________________________________Main___________________________________*/

main{
	margin: 0 0 10% 0;
}

.deuxtiers{
	float: left;
	display: inline-block;
	width: 65.5%;
	margin: 0 0 0 0.5%;
}

.container>.ligne>.tier:first-child{
	margin: 0;
}
.container>.ligne>.deuxtiers:first-child{
	margin: 0;
}

.container>.ligne>.quarter:first-child{
	margin: 0;
}
.container>a>.ligne>.quarter:first-child{
	margin: 0;
}

.container>.full+.tier{
	margin: 0;
}

.presentation{
	margin: 0 0 5% 0;
}

.topdescribe>p{
	font-family: 'Dosis', sans-serif;
	font-size: 1.3em;
	font-weight: 600;
	color: #b729cc;
	margin: 0 0 5% 0;
}

.deuxtiers>a>img{
	width: 100%;
}
.deuxtiers>img{
	width: 100%;
}

.tier{
	float: left;
	display: inline-block;
	width: 32.5%;
	margin: 0 0 0 0.5%
}

.tier>a>img{
	width: 100%;
}

.tier>img{
	width: 100%;
}

.presentation+.tier{
	margin: 0;
}

.postcards>.container>.tier{
	width: 33%
}

.grid+.tier{
	margin: 0;
}

.half+.tier{
	margin: 0;
}

.full{
	width: 100%;
}

.full>img{
	width: 100%;
}

.half{
	float: left;
	display: inline-block;
	width: 49.75%;
	margin: 0 0 0 0.5%;
}

.half>img{
	width: 100%;
}

.presentation>.half:first-child{
	margin: 0;
}
.ligne>.half:first-child{
	margin: 0;
}

.topdescribe+.presentation>.ligne>.half{
	margin: 0;
}

.half>p{
	font-family: 'Dosis', sans-serif;
	font-size: 1.3em;
	font-weight: 600;
	color: #b729cc;
	padding: 10em 0 0 3em;
}

.presentation+.half{
	margin: 0;
}

.quarter{
	float: left;
	display: inline-block;
	width: 24.625%;
	margin: 0 0 0 0.5%;
}

.quarter>img{
	width: 100%;
}

.tier+.quarter{
	margin: 0;
}

.quarter>p{
	font-family: 'Dosis', sans-serif;
	font-size: 1em;
	font-weight: 600;
	color: #b729cc;
	padding: 5% 0 0 1%;
}
.presentation>.quarter:first-child{
	margin: 0;
}


.fifth{
	float: left;
	display: inline-block;
	width: 19.6%;
	margin: 0 0 0 0.5%;
}
.ligne>.fifth:first-child{
	margin: 0;
}
.fifth>img{
	width: 100%;
}

.ligne>.clear2{
	margin-bottom: 5vh;
}


.grid{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-gap: 0.25rem;
    margin: 0 0 0.25% 0;
}

.tile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tile:nth-child(1){
    grid-column: span 4;
    grid-row: span 2;
}

.tile:nth-child(2){
  grid-column: span 2;
}

.tile:nth-child(3){
  grid-column: span 4;
  grid-row: span 2;
}
.tile:nth-child(4){
    grid-column: span 2;
  grid-row: span 1;
}

@media screen and (max-width : 650px ){
    .grid{
        display: block;
    }
    .tile{
        margin-bottom: 1rem;
    }
}


h3{
	font-family: 'Dosis', sans-serif;
	font-size: 3em;
	font-weight: 800;
	margin: 0 0 3% 0;
	background: -webkit-linear-gradient(bottom, #F680A9, #f7bed2);
	-webkit-background-clip:
		text;
	-webkit-text-fill-color:
		transparent;
}

h4{
	font-size: 2.5em;
	font-family: 'Dosis', sans-serif;
	color: #f7bed2;
	margin: 0 0 1% 0;
}

#koeda{
	padding: 10% 0 0 1%;
}

#bzh{
	margin-top: 20%;
}

/*___________________________________________FOOTER_____________________________________________*/

footer{
	background: 
		radial-gradient(circle at 50% 0,
       rgba(212,42,156,0.50),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
       rgba(183,41,204,0.50),
        rgba(0,0,255,0) 80.71%),
      radial-gradient(circle at 130% 75%,
        rgba(160,54,179,0.50),
        rgba(0,255,0,0) 50.71%) rgba(53,22,56,1) ;
	min-height: 100vh;
}

footer>.container>span>img{
	width: 40%;
	margin: 5% 0 2%;
}

h2{
	font-family: 'Dosis', sans-serif;
	color: #99ff66;
	font-weight: 800;
	font-size: 5em;
	padding: 15% 0 5% 0;
	max-width: 40%;
}

footer>.container>span>p{
	color: #f7bed2;
	font-family: 'Dosis', sans-serif;
	font-weight: 600;
	font-size: 1.3em;
	margin-top: 10%;
	padding-bottom: 10%;
}

footer>.container>span>a{
	color: #f7bed2;
	font-family: 'Dosis', sans-serif;
	float: right;
	font-size: 4em;
	font-weight: 800;
	margin-top: 5%;
}

footer>.container>span>a:hover{
	color: #99ff66;
}

footer>.container>span>p>a{
	color: #f7bed2;
}
footer>.container>span>p>a:hover{
	color: #99ff66;
}

/*________________________________________Footer_2_______________________________*/


#footer2>.container>span>p>a{
	color: #f7bed2;
	font-family: 'Dosis', sans-serif;
	font-size: 2.5em;
	font-weight: 800;
	margin-top: 5%;
}

.gauche{
	float: left;
}

.droite{
	float: right;
}

#footer2>.container>span>a:hover{
	color: #99ff66;
}
#footer2>.container>span>p>a:hover{
	color: #99ff66;
}

address{
	text-align: center;
	font-style: normal;
	color: #f7bed2;
	font-family: 'Dosis', sans-serif;
	font-weight: 400;
	
}

address>a{
	color: #f7bed2;
	margin: 0 0 0 10%;
}

address>a:first-child{
	margin: 0;
}

address>a:hover{
	color: #99ff66;
}

address>p{
	display: inline-block;
	margin: 0 5%;
}

address>ul{
	display: block;
	margin-bottom: 2%;
}

address>ul>li{
	float: none;
	display: inline-block;
	padding-left: 5%;
	font-size: 2em;
	font-weight: 600;
}



/*________________________________________________RESPONSIVE______________________________________*/

@media screen and (max-width: 600px){
	
	.container{
		width: 95%;
	}
	
	header>.container>.half{
		width: 100%;
		margin: 0;
	}
	header>.container>.half:nth-child(2){
	margin: 3% 0 3% 0;
	}
	header>.container>.half>a{
		height: 42vh;
	}
	
	.fifth{
	float: left;
	display: inline-block;
	width: 32.5%;
	margin: 0 0 0 0.5%;
	}
}