body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
}
.jarallax {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 0;
}
.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images */
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

button{
	font-size: 20px;
    background-color: black;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
}

.intertitle{
    display: flex;
    align-items: center;
}

.intertitle > div{
    /* position:absolute; */
    background-color: rgba(255,255,255,0.75);
    height: 250px;
    width: 500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    text-align: center;
}

div > h1{
    margin: 0 auto;
}

.left-container {
    top:50%;
    float: left;
    width: 70%;
}
.right-container {
    float: left;
    width: 30%;
}

.text {
    width: 100%;
    padding: 10px;

    position: sticky;
    top:10px;
}

#pib-story {
    position: absolute;
    height: 100%;
    width: 1000px;
    margin-top: 10px;
    right: 0;
}

/* Gender story */

#gender-remove-data {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

#gender-reponse{
    align-self: center;
	visibility: hidden;
}

.gender-general{
	display: flex;
	width: 98.5%;

    flex-direction: row;

    height: 100%;
	align-content:center;
    position: absolute;
}

.gender-text{
	background: #696969;
   flex: 1;
   flex-direction: column;
   position: relative;
   height: 100%;
   align-content:center;
   margin-right:15px;
}

.gender-titretheme{
	display:flex;
	background: #696969;
	flex: 1;
	height: 25%;
	flex-direction: column;
	/* position: absolute; */
	text-align: center;
	align-items:center;

}

.gender-texttitretheme{
	display:flex;
	flex: 1;
	height: 1%;

	align-self:center;
	font-size: 200%;
	color: #F8F8FF;
}

#pText{
	text-align: center;
	align-self: center;
}

.gender-commentaire{
    display:flex;
	flex-direction: column;
	background: #696969;
    align-self: center;
	text-align: center;
	vertical-align: middle;
    height: 65%;
    color: #F8F8FF;
}

.gender-boutons{
	background: #696969;
    align-self: center;
	text-align: center;
	vertical-align: middle;
    height: 10%;
    color: white;
}

#gender-reponse{
	padding: 5px 10px;
	font-size: 15px;
	background: white;
	color:#696969;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#gender-chiffres{
	padding: 5px 10px;
	font-size: 15px;
	background: white;
	color:#696969;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#gender-projections{
	padding: 5px 10px;
	font-size: 15px;
	background: white;
	color:#696969;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.gender-graph {
    flex: 2;
    align-self:center;
    margin-left:5px;
}

.gender-flaticon{
	font-size: 10%;
	position: absolute;
	bottom: 1px;

}

.gender-img{
	align-self:center;
	padding-top: 50px;
}

#bleu{
	color:#F0F8FF;
}


#intro{
	padding-top:30px;
	display:flex;
	width:100%;
	height:100%;
	flex-direction: column;
	justify-content: space-evenly;
}

#big_title{
	height:20%;
	color:#FF6347;
	font-size:50px;
}


#middle_title{
	display:flex;
	flex-direction: column;
	height:200%;
	color:white;
	justify-content:flex-end;
	font-size: x-large;
	font-weight:bolder;
}

#question{
	height:20%;
	font-size:30px;
	text-align: center;
	vertical-align: middle;
}

#end_title{
	height:30%;
	text-align: center;
	align-self: center;
	font-size:35px;
}

#box{
	display:flex;
	width:100%;
	height:80%;
	justify-content: space-evenly;

}

#baby_1{
	width:28%;
	text-align: left;
	vertical-align:middle;
	display:table-cell;
}

#baby_2{
	width:28%;
	text-align: center;
}

#baby_3{
	width:28%;
	text-align: right;
}