body {
	background-color: white;
	max-width: 100%;
	font-family: "Roboto";
	font-weight: lighter;
}

.censured-text {
	background-color: black;
	line-height: inherit;
}

h3 {
font-size: 11em;
margin: 0.05em;
line-height: 0.8em;
color: blue;
}

.emoji {
position: absolute;
width: 180px;
top: 700px;
z-index: 1;
}

h2 {
	font-size: 1.5em;
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 0;
	text-transform: uppercase;
}

h1 {
	font-size: 5em;
	line-height: 0.25em;
	margin-left: 3%;
	margin-right: 3%;
}


p {
	font-size: 2.5em;
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 0;
}


.credits {
	font-size: 2.5rem;
	display: inline-block;
	color: blue;
	text-decoration: none;
}
.stripes {
    width: 100%;
    height: 100%;
    position: absolute;
}

#stripes-1 {
    background-image: linear-gradient(180deg, red 25%, #ffffff 25%, green 50%, #000000 50%, rgba(255, 255, 128, 0) 75%, #ffffff 75%, rgba(255, 255, 128, 0));
    background-size: 33.67px 87.77px;
	animation: Gradient_1 0.1s ease infinite;

}

@keyframes Gradient_1 {
	0% {
		background-position: 40px 0px;
	}
	50% {
		background-position: 40px 60px;
	}
	75% {
		background-position: 40px 5px;
	}
	100% {
		background-position: 40px 12px;
	}
}


#stripes-2 {
 background: repeating-linear-gradient(-0deg, green, orange 5px, blue 5px, red 10px);
 animation: Gradient_2 2s ease infinite;
}

@keyframes Gradient_2 {
	0% {
		background-position: 40px 0px;
	}
	100% {
		background-position: 40px 300px;
	}
}

#stripes-3 {
    background-image: repeating-linear-gradient(60deg, transparent 5px, hsla(100, 50%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px,
    	hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px,
    	hsla(197, 62%, 11%, 0) 50px, black 60px, hsla(5, 53%, 63%, 0.5) 60px, red 70px, hsla(35, 91%, 65%, 0.5) 70px,
    	green 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
    	hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, red 120px, blue 140px ),
    	repeating-linear-gradient(135deg, transparent 5px,
    	black 5px, hsla(197, 62%, 11%, 0.5) 10px, black 10px, blue 35px, green 35px, hsla(5, 53%, 63%, 0.5) 40px,
    	hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px,
    	hsla(35, 91%, 65%, 0.5) 70px, red 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px );
    	animation: Gradient_3 2s ease infinite;
    	width: 600%;
    	height: 400%;
}

@keyframes Gradient_3 {
	0% {
		transform: skewY(0deg);
		background-position: 0px 50px;
		background-size: 40px;
	}
	10% {
		transform: skewY(1deg);
	}
	15% {
		transform: skewY(0deg);
	}
	50% {
		transform: skewY(5deg);
				background-position: 0px 200px;
	}
	72% {
		transform: skewY(3deg);
		background-size: 40px;
	}
	100% {
		transform: skewY(40deg);
		background-position: 0px -300px;
		background-size: 600px;
	}
}

#stripes-4 {
    background-image: linear-gradient(70deg, blue 25%, transparent 25%, transparent 75%, red 75%, green),
    linear-gradient(45deg, green 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    animation: Gradient_4 0.2s ease infinite;
}

@keyframes Gradient_4 {
	0% {
		    background-image: linear-gradient(70deg, blue 25%, transparent 25%, transparent 75%, red 75%, green),
    linear-gradient(45deg, green 25%, transparent 25%, transparent 75%, black 75%, black);
        background-size: 60px 60px;
	}
	40% {
		    background-image: linear-gradient(70deg, blue 25%, transparent 25%, transparent 75%, blue 75%, green),
    linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, black);
    background-size: 100px 800px;
	}
	50% {
		    background-image: linear-gradient(70deg, green 25%, transparent 25%, transparent 75%, black 75%, green),
    linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, black);
    background-size: 1300px 60px;
	}

	100% {
		    background-image: linear-gradient(70deg, red 25%, transparent 25%, transparent 75%, blue 75%, red),
    linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, black 75%, black);
            background-size: 60px 60px;

	}
}

#stripes-5 {
    background-image: radial-gradient(blue 10%, transparent 80%), radial-gradient(green 60%, transparent 80%),radial-gradient(red 80%, transparent 80%);
    background-size: 10px 60px;
    animation: Gradient_5 0.2s ease infinite;
}

@keyframes Gradient_5 {
	0% {
		background-position: 40px 0px;
		background-size: 10px 60px;
	}
	10% {
		background-size: 100px 0px;
	}
	15% {
		background-size: 0px 0px;
	}
	50% {
		background-position: 0px -300px;
	}
	75% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px 400px;
	}
}

#stripes-6 {
background-image: repeating-radial-gradient(
  circle, rgba(255, 255, 128, 0),red 10px, blue 30px, red 20px);
    background-size: 20px;
    background-position: 50px 150px;
     animation: Gradient_6 2s ease infinite;
}
@keyframes Gradient_6 {
	90% {
		background-position: 40px 0px;
	}
	100% {
		background-position: 40px 600px;
	}
}

#stripes-7 {
    background-image: linear-gradient(121deg, red 25%, #ffffff 25%, green 50%, #000000 50%, blue 75%, #ffffff 75%, #ffffff 100%);
    background-size: 24.67px 17.77px;
    animation: Gradient_7 1s ease infinite;
}
@keyframes Gradient_7 {
	95% {
    background-size: 24.67px 17.77px;
	}
	100% {
    background-size: 300px 10px;
	}
}

.fiche {
margin-top: 200px;
border-bottom:  1px solid black;
}

.square-content-1 {

	background-image:url('img/2013-her_spike_jonze.jpg');
}
.square-content-2 {
	background-image:url('img/2013-edward_snowden.jpg');
}
.square-content-3 {
	background-image:url('img/2014-silicon_valley.jpg');
}
.square-content-4 {
	background-image:url('img/2014-FreeTheNipple.jpg');
}
.square-content-5 {
	background-image:url('img/2014-tropes_vs_women_Anita Sarkeesian.jpg');
}
.square-content-6 {
	background-image:url('img/2014-Barbie.jpg');
}
.square-content-7 {
	background-image:url('img/2014-deeplab.jpg');
}

.square {
    position: relative;
    width: 100%;
    padding-bottom : 100%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size: cover;
    overflow: hidden;
}

#heart {
	width: 70px;
	margin:  30px;
	padding: 5px;
	fill: white;
	stroke:black;
	stroke-width:10px;
}

#heart:active {
	fill: blue;
	stroke: blue;
	stroke-width: 10px;
}

.title_landscape {
	display: none;
}
.title_portrait {
	display: block;
}

br {
	display: none;
}

section{
	position: relative;
}

@media (orientation: landscape) {
	body {
		background-color: blue;
		color: white;
	}

br {
	display: block;
}

h3 {
	color: white;
}
h2 {
	font-size: 1em;
	margin-top: 3em;
}
h1 {
	font-size: 3em;
	line-height: 0.25em;
}


.emoji {
position: absolute;
width: 90px;
z-index: 1;
}

.title_landscape {
	display: block;
}

.title_portrait {
	display: none;
}

p {
	margin-top: 0.5em;
	font-size: 1.4em;
}

.credits {
	font-size: 1.5rem;
	color: black;

}

.stripes {
	opacity: 0;
}

.fiche {
border-bottom:  1px solid white;
margin-top: 70px;
}

#heart {
	display: block;
	width: 50px;
	margin:  0px 3% 10%;
	padding: 5px;
	fill: blue;
	stroke:white;
	stroke-width:10px;
}

.fiche {
	column-count: 2;
	width: 100%;
	height: auto;
	margin-bottom: 2em;

}

.square {
	display: inline-block;
	margin-bottom: 2em;
}
.stripes { 
display: none; }
#heart:active {
	fill: red;
	stroke: red;
	stroke-width: 10px;
}

.censured-text {
	background-color: inherit;
	line-height: inherit;
}

}