@font-face 
{
    font-family: "GothamBook";
    src: url(GothamHTF-Book.otf);
}

@font-face 
{
    font-family: "GothamBook";
    src: url(GothamHTF-Black.otf);
    font-weight: bold;
}

@font-face 
{
    font-family: "GothamBlack";
    src: url(GothamHTF-Black.otf);
}

@font-face 
{
    font-family: "GothamLight";
    src: url(GothamHTF-Light.otf);
}

@font-face 
{
    font-family: "GothamMedium";
    src: url(GothamHTF-Medium.otf);
}

body {
	font-family: "GothamBook";
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f5eee9;
}

#container
{
	position: relative;
	width: 100%;
	min-width: 600px;
	height: 100%;
	padding-top: 57px;
}

#header 
{
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 57px;
}

#header-line 
{
	text-align: center;
	width: 100%;
	height: 1px;
	background: white;
}

#header-line div 
{
	width: 100%;
	height: 1px;
	background: #231F20;
	margin: auto; 
}

#header-menu 
{
	text-align: center;
	width: 100%;
	height: 100%;
	background: white; 
}

#header-menu button
{
	font-family: "GothamBook";
	font-size: 18px;
	height: 100%;
	cursor:pointer;
	outline: none;
	margin: 0px 25px 0 25px;
	background: none;
	border: none;
	padding:0;
}

#header-menu button:hover
{
	color: #929497;
}



#section-title 
{
	width: 100%;
	height: 1314px;
}

#section-title #backgroundContainer
{
	width: 100%;
	height: 890px;
	overflow: hidden;
	position: absolute;
	top: 57px;
	z-index: -1;
}

#section-title #background
{
	height: 890px;
	
	position: absolute;
}

#backgroundImg
{
	display: none;
}

#section-title #background img
{
	width: 100%;
	height: auto;
	height: 100%;
}

#section-title #logo
{
	margin: auto; 
	width: 512px;
	height: 106px;
	padding-top: 45px;
}

#section-title #app-icon
{
	padding-top: 30px;
	width: 100%;
	text-align: center;
	font-family: "GothamBlack";
	line-height: 0px;
}

#section-title #collec
{
	padding-top: 820px;
	width: 100%;
	text-align: center;
	font-size: 31px;
	font-family: "GothamBlack"
}

#section-title #collec p
{
	margin: 10px;
}

#book 
{
	position: absolute;
	text-align: center;
	top: 657px;
	width: 100%;
	height: 507px;
}

#book-img
{
	position: relative;
	width: 412px;
	margin: auto;
}

#book-tag
{
	position: absolute;
	top: 455px;
	left: -99px;
	width: 146px;
	height: 146px;
}


#section-books 
{
	width: 100%;
	height: 350px;
	background: black;
	font-family: "GothamBlack";
	font-size: 17px;
	color: #F3E500;
}

#section-books p
{
	margin-top: 12px;
}

#section-books #books-fr
{
	margin: auto;
	text-align: center;
	height: 270px;
	padding-top: 54px;
	width: 450px;
}

#section-books #books-en
{
	margin: auto;
	text-align: center;
	height: 180px;
	padding-top: 54px;
	width: 250px;
}

#section-books #books-en div, #section-books #books-fr div
{
	float: left;
	margin-left: 40px;
}

#section-books #books-en img, #section-books #books-fr img
{
	padding: 0 3px 0 3px;
}



#section-concept
{
	background: #f5eee9;
}

#section-concept #intro-texts
{
	font-family: "GothamMedium";
	text-align: center;
	padding: 0 20px;
}

#section-concept #steps
{
	width: 800px;
	text-align: center;
	margin: auto;
	overflow: auto;
}

.step-text
{
	font-size:13px;
}

#section-concept #steps div
{
	width: 25%;
	float: left;
}

#section-concept #steps div p
{
	padding: 0 35px 0 35px;
}

#section-concept #image
{
	padding-top: 50px;
	width: 656px;
	height: 410px;
	margin: auto;
}

#section-concept #keywords
{
	padding-top: 40px;
	width: 800px;
	height: 120px;
	margin: auto;
}

#section-concept #keywords div
{
	width: 520px;
	height: 120px;
	text-align: center;
	margin: auto;
}

#section-concept #keywords div img
{
	float: left;
	padding: 18px 20px 0 20px;
}

#section-concept #keywords div p
{
	float: left;
	font-family: "GothamBlack";
	font-size: 18px;
	text-align: center;
}



#section-download 
{
	background: white;
	width: 100%;
	height: 1350px;
}

#section-download #app-icon2
{
	padding-top: 30px;
	width: 100%;
	text-align: center;
	font-family: "GothamBlack";
	font-size: 31px;
}

#section-download #iPad
{
	width: 900px;
	height: 415px;
	font-size: 22px;
	margin: auto;
	text-align: center;
}

#section-download #iPad div 
{
	position: relative;
	width: 33%;
	height: 100%;
	float:left;
}

#section-download #iPad div p
{
	height: 415px;
	padding: 0 30px;
	line-height: 30px;
	vertical-align: middle;
	display: table-cell;
	font-family: "GothamLight";
	margin-top: 10px;
}

#app-tag
{
	position: absolute;
	top: 370px;
	left: 250px;
	width: 146px;
	height: 146px;
}

#section-download #iPhone
{
	width: 900px;
	height: 240px;
	margin: auto;
	text-align: center;
	padding-top: 30px;
}

#section-download #links
{
	width: 100%;
	text-align: center;
	font-family: "GothamBlack";
	font-size: 31px;
}

#section-download #links #btns 
{
	height: 65px;
}

#section-download #links #btns img
{
	padding: 10px;
}

#section-download #newsletter
{
	width: 100%;
	text-align: center;
	font-family: "GothamLight";
}

#mce-EMAIL
{
	width: 100%;
}

#mc_embed_signup 
{
	margin: auto;
	width:490px; 
	text-align: center;
}

#section-author 
{
	width: 100%;
	background: #f7f8f8;
	padding-bottom: 70px;
}

#section-author #intro-texts2
{
	font-family: "GothamMedium";
	text-align: center;
	padding-top: 50px;
}

#section-author #image2
{
	padding-top: 50px;
	width: 777px;
	height: 1036px;
	margin: auto;
}

#section-author #text
{
	width: 750px;
	text-align: center;
	margin: auto;
	font-size: 24px;
	margin-top: 70px;
	line-height: 35px
}

#section-author #text p {
	margin: 0;
}

#section-medias
{
	width: 100%;
	background: white;
	padding-bottom: 60px;
}

#section-medias #intro-texts3, #section-medias #intro-texts4
{
	font-family: "GothamMedium";
	text-align: center;
}

#section-medias div
{
	text-align: center;
	width: 800px;
	margin: auto;
	font-size: 24px;
	margin-bottom: 60px;
}



#footer
{
	width: 100%;
	height: 93px;
	background: black;
}

#footer-content
{
	width: 60%;
	margin: auto;
}

#footer-content p 
{
	padding-top: 20px;
	color:white;
	float: left;
	font-family: "GothamBook";
	font-size: 8px;
	line-height: 16px;
}

#footer-content img
{
	padding-top: 25px;
	float: right;
}

#section-title-credits
{
	text-align: center;
	padding-top: 40px;
}

#section-credits
{
	text-align: center;
	padding-top: 40px;
	max-width: 800px;
	margin: auto;
}

#section-credits a
{
	color:grey;
}

#footer a
{
	color:white;
}

a
{
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

#section-credits
{
	padding:40px 100px; 
}

#cgu{
	margin: 50px 100px;
}