@font-face {
	font-family: 'Messapia bold';
	src: url('../fonts/Messapia-Bold.woff') format('woff'),
	  url('../fonts/Messapia-Bold.woff2') format('woff2');
}
 @font-face {
	font-family: 'Messapia regular';
	src: url('../fonts/Messapia-Regular.woff') format('woff'),
	  url('../fonts/Messapia-Regular.woff2') format('woff2');
 }	  

 @font-face {
	font-family: 'SpaceGrotesk Bold';
	src: url('../fonts/SpaceGrotesk/SpaceGrotesk-Bold.woff') format('woff'),
	  url('../fonts/SpaceGrotesk/SpaceGrotesk-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'SpaceGrotesk Light';
	src: url('../fonts/SpaceGrotesk/SpaceGrotesk-Light.woff') format('woff'),
	  url('../fonts/SpaceGrotesk/SpaceGrotesk-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'SpaceGrotesk Medium';
	src: url('../fonts/SpaceGrotesk/SpaceGrotesk-Medium.woff') format('woff'),
	  url('../fonts/SpaceGrotesk/SpaceGrotesk-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'SpaceGrotesk Regular';
	src: url('../fonts/SpaceGrotesk/SpaceGrotesk-Regular.woff') format('woff'),
	  url('../fonts/SpaceGrotesk/SpaceGrotesk-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'SpaceGrotesk SemiBold';
	src: url('../fonts/SpaceGrotesk/SpaceGrotesk-SemiBold.woff') format('woff'),
	  url('../fonts/SpaceGrotesk/SpaceGrotesk-SemiBold.woff2') format('woff2');
}

body{
	margin: 0px;
	padding: 0;
}

.container {
	display: grid;
	grid-template-columns: repeat(8,1fr);
	grid-auto-rows: 24.8vw;
	grid-gap: 0;
}


.gallery-item .image {
	width: 100%;
	height: 100%;
	overflow: hidden;

}

.gallery-item .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	image-rendering: pixelated;
}

.gallery-item .text {
	width: 95%;
    height: 100%;
    overflow: hidden;
    font-family: SpaceGrotesk Medium;
    font-size: 1.7vw;
    line-height: 2.2vw;
    margin-top: 0;
	margin-left: 2vh;
	white-space: normal;
}

.gallery-item .text-fin {
	width: 95%;
    height: 100%;
    overflow: hidden;
    font-family: SpaceGrotesk bold;
    font-size: 6vw;
    line-height: 7vw;
    margin-top: 1vh;
	margin-left: 2vh;
	white-space: pre-line;
	text-align: center;
	-webkit-animation: glow 1s ease-in-out infinite alternate;
	-moz-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
	from {
	  text-shadow: 0 0 5vh white, 0 0 16px white, 0 0 17px #e60073, 0 0 18px #e60073, 0 0 19px #e60073, 0 0 20px #e60073, 0 0 21px #e60073;
	}
}	

.gallery-item .Stickers {
	width: 21vw;
	height: 11vw;
	border: 0.2vw solid black;
	border-radius: 11vw / 6vw;
	margin: auto;
	margin-top: 6.5vw;
	overflow: hidden;
	
	
}


.gallery-item .Stickers h1 {
	font-family: SpaceGrotesk Bold;
	font-size: 3.5vw;
	line-height: 3.5vw;
	text-align: center;
	padding: 0vw;
}

h1 {
	white-space: pre-wrap;
}
.gallery-item .Stickers-2 {
	width: 21vw;
	height: 11vw;
	border: 0.2vw solid black;
	border-radius: 11vw / 6vw;
	margin: auto;
	margin-top: 6.5vw;
	overflow: hidden;
	
	
}

.gallery-item .Stickers-2 h2 {
	font-family: SpaceGrotesk Bold;
	font-size: 2vw;
	line-height: 2.5vw;
	text-align: center;
	margin-top: 1.5vw;
	white-space: pre-line;
}

#anim {
	margin-top: -17.9vw;
}

.Stickers {
	-webkit-animation: pulsate-fwd 0.6s linear infinite both;
	        animation: pulsate-fwd 0.6s linear infinite both;
}

 @-webkit-keyframes pulsate-fwd {
	0% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
	50% {
	  -webkit-transform: scale(1.1);
			  transform: scale(1.1);
	}
	100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
  }
  @keyframes pulsate-fwd {
	0% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
	50% {
	  -webkit-transform: scale(1.1);
			  transform: scale(1.1);
	}
	100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
  }
  

.gallery-container {
	height: 100%;
	border: 0.1vw solid black;
}


.w1 {
	grid-column: 2 span;
}

.w2 {
	grid-column: 2 span;

}

.w3 {
	grid-column: 2 span;

}

.w4 {
	grid-column: 2 span;
}

.w5 {
	grid-column: 4 span;
}

.w6 {
	grid-column: 2 span;
}

.w7 {
	grid-column: 2 span;
}

.w8 {
	grid-column: 2 span;
}

.w9 {
	grid-column: 4 span;
}

.w10 {
	grid-column: 2 span;
}

.w11 {
	grid-column: 2 span;
}

.w12 {
	grid-column: 2 span;
}

.w13 {
	grid-column: 2 span;
}

.w14 {
	grid-column: 2 span;
}

.w15 {
	grid-column: 4 span;
}

.w16 {
	grid-column: 2 span;
}

.w17 {
	grid-column: 2 span;
}
.w18 {
	grid-column: 2 span;
}
.w19 {
	grid-column: 2 span;
}
.w20 {
	grid-column: 4 span;
}
.w21 {
	grid-column: 2 span;
}
.w22 {
	grid-column: 2 span;
}
.w23 {
	grid-column: 2 span;
}
.w24 {
	grid-column: 2 span;
}
.w25 {
	grid-column: 2 span;
}
.w26 {
	grid-column: 4 span;
}
.w27 {
	grid-column: 2 span;
}
.w28 {
	grid-column: 2 span;
}
.w29 {
	grid-column: 2 span;
}
.w30 {
	grid-column: 4 span;
}
.w31 {
	grid-column: 8 span;
}
.w32 {
	grid-column: 2 span;
}
.w33 {
	grid-column: 2 span;
}
.w34 {
	grid-column: 2 span;
}
.w35 {
	grid-column: 2 span;
}
span.Free {
	font-size: 7vw;
	padding: 4.4vw;
	line-height: 3.2vw;
}
span.Nipple {
	font-size: 3.1vw;
	padding: 4.1vw;
	line-height: 3.2vw;	
}
span.Mots {
	font-family: SpaceGrotesk Bold;
	text-shadow: 0 0 6px white, 0 0 7px #ff4da6, 0 0 8px #ff4da6, 0 0 9px #ff4da6, 0 0 10px #ff4da6, 0 0 11px #ff4da6, 0 0 12px #ff4da6;
}

@media screen and (max-width:500px){
	.container {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows:50vw;
	}
	
	.w2, .w3, .w6, .w7, .w9,.w10, .W11, .W12, .W13, .w16, .w17, .w21, .w22, .w23, .w24, .w28, .w29, .w31, .w32, .w33, .w34 {
		grid-column: 1 span;
		grid-row: 1 span;
	}
	.w5, .w9, .w15, .w20, .w26, .w30{
		grid-column: 2 span;
		grid-row: 1 span;
	}
	
	.w1, .w4, .w8, .w14, .w18, .w19, .w25, .w27, .w35{
		display: none;
	}
	.gallery-item .text {
		font-size: 3.4vw;
		text-align: center;
		line-height: 3.9vw;
		margin-top: 2vw;
		margin-left: 2vw;
		margin-right: 2vw;
		white-space: normal;
	}
	
	.gallery-item .Stickers {
		width: 40vw;
		height: 24vw;
		border: 0.32vw solid black;
		border-radius: 39vw / 24vw;
		margin: auto;
		margin-top: 11.5vw;
		overflow: hidden;
		
		
	}
	
	.gallery-item .Stickers h1 {
		font-family: SpaceGrotesk Bold;
		font-size: 7vw;
		line-height:7.5vw;
		text-align: center;
		padding: 0vw;
	}
	

	.gallery-item .Stickers-2 {
		width: 40vw;
		height: 24vw;
		border: 0.32vw solid black;
		border-radius: 39vw / 24vw;
		margin: auto;
		margin-top: 11.5vw;
		overflow: hidden;
		
		
	}
	
	.gallery-item .Stickers-2 h2 {
		font-family: SpaceGrotesk Bold;
		font-size: 4vw;
		line-height: 4.5vw;
		text-align: center;
		margin-top: 4.5vw;
		white-space: pre-line;
	}
	
	#anim {
		margin-top: -36.5vw;
	}
	.gallery-item .text-fin {
		font-size: 7.5vw;
		line-height: 8.5vw;
		margin-top: 3vh;
		margin-left: 1.9vw;
	}
	
	

}

@media screen and (min-width:500px) and (max-width:1000px){
	.container {
		grid-template-columns: repeat(6,1fr);
		grid-auto-rows: 32.5vw;
	}

	.w5, .w9, .w15, .w20, .w26, .w40 {
		grid-column: 4 span;
		grid-row: 0 span;
	}
	.w31 {
		grid-column: 6 span;
	}
	.w23, .w25, .w28, .w35 {
		display: none;
	}
	.gallery-item .text {
		width: 95%;
		height: 100%;
		overflow: hidden;
		font-family: SpaceGrotesk Medium;
		font-size: 2.3vw;
		line-height: 2.8vw;
		margin: auto;
		white-space: normal;
		word-break: break-word;
	}
	.gallery-item .Stickers {
		width: 29vw;
		height: 16vw;
		border: 0.2vw solid black;
		border-radius: 27vw / 15vw;
		margin: auto;
		margin-top: 7.6vw;
		overflow: hidden;
		
		
	}
	
	.gallery-item .Stickers h1 {
		font-family: SpaceGrotesk Bold;
		font-size: 5vw;
		line-height:5vw;
		text-align: center;
	}
	

	.gallery-item .Stickers-2 {
		width: 29vw;
		height: 16vw;
		border: 0.2vw solid black;
		border-radius: 27vw / 15vw;
		margin: auto;
		margin-top: 7.6vw;
		overflow: hidden;
		
		
	}
	
	.gallery-item .Stickers-2 h2 {
		font-size: 3vw;
		line-height: 3.5vw;
		text-align: center;
		margin-top: 2.5vw;
		white-space: pre-line;
	}
	
	#anim {
		margin-top: -23vw;
	}
	.gallery-item .text-fin {
		font-size: 7.5vw;
		line-height: 8.5vw;
		margin-top: 4vh;
	}
}


img {
	cursor: url('../images/cursor.png'), pointer;
}