/* //////////////////     Mobile FIRST     /////////////////// */

.normalize{
	padding: 0px;
	margin: 0px;
}
body{
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 44px;
	color : black;
	height: 100%;
	width: 100%;
	text-align: left;
	background-color: none;
	position: absolute;
	display: block;
	background-color: white;/* à enlever */
}
a{
	text-decoration: none;
	color: red;
	font-weight: bold;
}

/* CTN */
.ctn{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 5%;
	padding-bottom: 5%;
}
.text{
	font-size: 35%;
	text-align: left;
	padding-right: 5%;
	padding-left: 5%;
	word-spacing: 2px;
}
.middle{
	text-align: center;
	padding: 2%;
}
h4{
	font-family: sofia-pro, sans-serif;
    font-weight: 800;
    font-style: normal;
	font-size: 55%;
	padding-left: 5%;
	margin-bottom: 5%;
}
/* MAIN */
main{
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	background-image : url(./medias/images/main/fondMobile.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center;
	text-align: center;
}
#main1a_title{
    height: 0%;
}
h1{
	
	margin: 0px;
	font-size: 100%;
	font-family: sofia-pro, sans-serif;
    font-weight: 600;
    font-style: normal;
}
#title{
    margin-top: 30%;
}
#title::first-letter {
    color: red;
}
#main1a_smallDesc{
    margin-top: 50%;
	padding-left: 10%;
	padding-right: 10%;
}
h2{
	font-family: sofia-pro, sans-serif;
    font-weight: 600;
    font-style: normal;
	font-size: 50%;

}
#detailedDesc{
    font-size: 40%;
	padding: 5%;
	height: 0%;
	margin-bottom:20%;
	color:red;
	text-align:center;
}
#arrow{
	display: block;
	width: 15%;
	margin-right: auto;
	margin-left: auto;
}
#main1a{
	display: block;
	height:91%;
}
#main1b{
	display: block;
	height:9%;
}
/* footer */
footer{
	font-size: 30%;
	text-align: center;
	padding-top: 5%;
	padding-bottom: 5%;
}
/* ///////////// Small screen smartphone mode ////////// */
@media only screen and (min-width: 300px) and (max-width: 767px) and (max-height: 600px) and (orientation: portrait) {
	main{
		background-size: 180%;
	} 
	#title{
		margin-top: 20%;
	}
	#main1a_smallDesc{
		margin-top: 20%;
	}
	#arrow{
		content: url(./medias/images/main/fleche_blanche.png);
	}
	h4{
		font-size: 60%;
	}
	.text{
		font-size: 40%;
	}
	footer{
		font-size: 33%;
	}
}
/* ///////////// PC mode ////////// */
@media all and (orientation: landscape){
	#title{
		margin-top: 10%;
		font-size: 150%;
	}
	#main1a_smallDesc{
		margin-top: 16%;
		font-size: 150%;
		padding-left: 10%;
		padding-right: 10%;
	}
	.ctn{
		width: 80%;
		padding-right: 10%;
		padding-left: 10%;
	}
	h4{
		font-size: 80%;
		margin-bottom: 2%;
	}
	.text{
		font-size: 44%;
		text-align: left;
	}
    main{
        background-image : url(./medias/images/main/fondPC.jpg);
    }
	
	#detailedDesc{
		font-size: 50%;
		margin-bottom:0%;
		padding-right: 20%;
		padding-left: 20%;
	}
	#arrow{
		width: 5%;
		
	}
	#content2{
		padding-left: 14%;
		padding-right: 6%;
	}
	#ctn2a{
		display: inline-block;
		width:32%;
		
	}
	#ctn2b{
		display: inline-block;
		width:32%;
		vertical-align: top;
	}
	#ctn2c{
		display: inline-block;
		width:32%;
		vertical-align: top;
	}
	#content3{
		padding-left: 11%;
		padding-right: 9%;
	}
	#content4{
		padding-left: 11%;
		padding-right: 9%;
	}
	#ctn3a{
		width:49%;
		margin:auto;
	}
	#ctn4a{
		width:49%;
		margin:auto;
	}
	#content3{
		padding-top: 0%;
	}
	#content4{
		padding-top: 0%;
	}
	footer{
		padding-bottom: 2%;
	}
}