@charset "utf-8";
/* CSS Document */

* {
	position: relative;
	padding: 0;
	margin: 0 auto;
	border: 0;
}

html, body {
	height: 100%;
}

body {
	background-color: black;
}

body.skrollr-desktop {
	height: 100% !important;
}

#skrollr-body {
	display: block;
	width: 2048px;
	max-width: 100%;
	height: 100% !important;
}

#main_wrapper {
	position: absolute;
	top: 0;
	width: 100%;
	height: 6625px;
	background: url(../img/background.png) no-repeat top center;
}

#social_network_links,
#footer {
	display: block;
}

.skrollable-between {
	display: block;
}

#skrollr-body {
	height: 100%;
	overflow: visible;
	position: relative;
}

.content-full {
	height: 100%;
}

#done {
	height: 100%;
}

.clear {
	clear: both;
}

#header {
	/*position: absolute;
	left: 27%;*/
	margin: 0 auto;
	width: 47.4%;
	min-width: 960px;
	z-index: 10;
}

#logo_dragonslash,
#logo_rotn,
#btn_pressbook {
	display: block;
}

#logo_dragonslash,
#logo_rotn {
	float: left;
}

#logo_dragonslash {
	width: 12%;
	margin-left: 6%;
}

#logo_dragonslash img {
	width: 100%;
}

#logo_rotn {
    margin-left: 8.5%;
    width: 47%;
    top: -10px;
}

#btn_pressbook {
	float: right;
	right: 10%;
	width: 14%;
}

#language_selector {
	display: inline-block;
    position: absolute;
    right: 0;
	width: 8.16%;
    z-index: 10;
}

#logo_rotn img,
#btn_pressbook img,
#language_selector img {
	width: 100%;
}

#flag_container {
    position: absolute;
    top: 7px;
    left: 3%;
    padding-left: 7%;
    padding-right: 7%;
    width: 81%;
    height: auto;
}

#flag_container .flag_link,
#flag_container .flag_link:hover,
#flag_container .flag_link:visited {
	border: 0;
	text-decoration: none;
	cursor: pointer;
}

#flag_container .flag_link img {
	margin: 7%;
	padding-bottom: 7%;
	width: 35%;
	border-bottom: 4px solid transparent !important;
}

#flag_container .flag_active img {
	border-bottom: 4px solid #ff7e00 !important;
}

#flag_container #lang_en_US img {
	margin-right: 4%;
}

#flag_container #lang_fr_FR img {
	margin-left: 4%;
}

#home {
	
}

#teaser_wrapper {
	position: absolute;
    top: 25%;
	width: 100%;
	text-align: center;
}

#teaser_container {
    width: 100%;
    max-width: 853px;
    text-align: center;
    border: 12px solid rgba(25, 25, 25, .5);
}

#teaser_container iframe {
	border: 12px solid rgba(25, 25, 25, .5);
}

#presentation_content,
.section_container {
	margin: 0 auto;
	width: 100%;
	max-width: 1024px;
}

#img_ipad_presentation {
	float: left;
	width: 50%;
	padding: 1%;
	padding-top: 2%;
}

#img_presentation_container {
	position: absolute;
    top: 66px;
    left: 60px;
}

#presentation_text {
	float: left;
	padding: 1%;
	padding-left: 2%;
    width: 36%;
}

#img_empereur_histoire {
	float: left;
	width: 41%;
	left: 55px;
}

#img_empereur_histoire img {
	width: 100%;
}

#histoire_text {
	float: left;
    width: 40%;
	padding: 1%;
	padding-top: 14%;
	padding-left: 10%;
}

.text_content .title {
	line-height: 48px;
	font-family: 'tw_cen_mt_bold';
	font-size: 32px;
	text-transform: uppercase;
	color: #f28d01;
}

.text_content p.subtitle/*span.subtitle*/,
.text_content h3 {
	padding-top: 10px;
	line-height: 28px;
	font-family: 'tw_cen_mt_bold';
	font-size: 22px;
	text-transform: uppercase;
	color: #f28d01;
}

.text_content p,
.text_content ul li {
	font-family: 'tw_cen_mt_normal';
	font-size: 15px;
	text-align: justify;
	letter-spacing: 1px;
	color: white;
}

.text_content ul {
	padding-left: 5%;
	list-style: url(../img/shuriken_list_icon.png);
}

.text_content ul li {
	line-height: 20px;
}

/*
 * PERSONNAGES
 * */
#portrait_kei_ota,
#fiche_kei_ota {
	display: block;
}

#portrait_olivia,
#portrait_blackstorm,
#portrait_ryoko,
#portrait_blow,
#portrait_udo,
#portrait_green,
#fiche_olivia,
#fiche_blackstorm,
#fiche_ryoko,
#fiche_blow,
#fiche_udo,
#fiche_green {
	display: none;
}
 
#personnages_container {
	width: 100%;
	left: 0;
}

#personnage_portrait,
#personnage_parchemin_description {
	float: left;
}

#personnage_portrait {
	top: 576px;
	left: 40px;
}

#personnage_parchemin_description {
	left: 80px;
}

.personnage_text_content {
	position: absolute;
    top: 635px;
    left: 95px;
    width: 332px;
    height: 220px;
	/*background-color: rgba(255, 0, 0, 0.5);*/
}

.personnage_text_content h3.nom_personnage {
	font-family: 'tw_cen_mt_normal';
	font-weight: normal;
	font-style: normal;
	font-size: 30px;
	text-align: center;
	text-transform: uppercase;
	color: #714e38;
}

.personnage_text_content .age_personnage {
	position: absolute;
	top: 7px;
	right: 0;
	font-family: 'tw_cen_mt_normal';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	text-align: right;
	color: #714e38;
}

.personnage_text_content p {
	padding-top: 10px;
	font-family: "MyriadProRegular";
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	text-align: justify;
	line-height: 18px;
	color: #714e38;
}

.personnage_text_content .block_force_faiblesse {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 54px;
}

.personnage_text_content .block_force_faiblesse .block_force {
	margin-right: 9px;
}

.personnage_text_content .block_force_faiblesse .block_force,
.personnage_text_content .block_force_faiblesse .block_faiblesse {
	float: left;
	top: -15px;
	font-family: 'tw_cen_mt_normal';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	color: #714e38;
}

.personnage_text_content .block_force_faiblesse .block_force span,
.personnage_text_content .block_force_faiblesse .block_faiblesse span {
	margin-right: 2px;
}

.personnage_text_content .block_force_faiblesse .block_force img,
.personnage_text_content .block_force_faiblesse .block_faiblesse img {
	top: 20px;
}

#personnages_introduction {
	position: absolute;
    top: 388px;
    left: 230px;
    width: 360px;
}

#personnages_selector {
	top: 40px;
	text-align: center;
}

#personnages_selector .personnage_thumbnail:first-child {
	border-top: 8px solid black;
	border-bottom: 8px solid black;
	border-left: 8px solid black;
	border-right: 4px solid black;
}

#personnages_selector .personnage_thumbnail:last-child {
	border-top: 8px solid black;
	border-bottom: 8px solid black;
	border-left: 4px solid black;
	border-right: 8px solid black;
}

#personnages_selector .personnage_thumbnail {
	float: left;
	width: 125px;
	height: 154px;
	border-top: 8px solid black;
	border-bottom: 8px solid black;
	border-left: 4px solid black;
	border-right: 4px solid black;
	cursor: pointer;
}

.personnage_thumbnail img {
	width: 100%;
	height: auto;
}

.personnage_thumbnail_selected {
	position: absolute;
	top: 0;
	left: 0;
	width: 113px;
	height: 142px;
	border: 6px solid #f28d01;
}

/*
 * REGLES
 * */
#regles_animation_container {
	top: 19%;
    left: -5px;
    width: 795px;
	/*background-color: rgba(255, 0, 0, 0.5);*/
}

#regles_left_arrow,
#regles_armes_container,
#regles_right_arrow {
	display: table-cell;
	vertical-align: middle;
}

#regles_left_arrow {
	width: 35px;
    text-align: left;
}

#regles_armes_container {
    width: 725px;
    height: 378px;
}

.regles_armes_fr {
	background: url(../img/regles_armes_epreuves.png) no-repeat 0% 0% / cover;
}

.regles_armes_en {
	background: url(../img/regles_armes_epreuves_en.png) no-repeat 0% 0% / cover;
}

#regles_hand_slider {
	display: none;
	position: absolute;
	top: 105px;
	left: 460px;
}

#regles_right_arrow {
	width: 35px;
    text-align: right;
}

#bouton_classement {
	width: 100%;
    text-align: center;
    top: 142px;
}
 
.regles_panneau_ {
	background: url(../img/background_regles_tournoi.png) 50% 0% no-repeat !important;
}

.regles_panneau_1 {
	background: url(../img/background_regles_tournoi_1.png) 50% 0% no-repeat !important;
}

.regles_panneau_2 {
	background: url(../img/background_regles_tournoi_2.png) 50% 0% no-repeat !important;
}

.regles_panneau_3 {
	background: url(../img/background_regles_tournoi_3.png) 50% 0% no-repeat !important;
}

.regles_panneau_tablette {
	background: url(../img/background_regles_tournoi_tablette.png) 50% 0% no-repeat !important;
}

.regles_panneau_1_tablette {
	background: url(../img/background_regles_tournoi_1_tablette.png) 50% 0% no-repeat !important;
}

.regles_panneau_2_tablette {
	background: url(../img/background_regles_tournoi_2_tablette.png) 50% 0% no-repeat !important;
}

.regles_panneau_3_tablette {
	background: url(../img/background_regles_tournoi_3_tablette.png) 50% 0% no-repeat !important;
}
 
#regles_content {
	height: 767px;
	text-align: center;
}

#jimmy_block_container {
	position: absolute;
	right: 0;
	bottom: 0;
}

#jimmy_said {
	position: absolute;
	top: 270px;
	left: 14px;
	width: 485px;
	height: 120px;
}

#jimmy_said_sentences {
	height: 93px;
}

#jimmy_said_sentences .jimmy_sentence {
	font-family: Arial;
	font-size: 14px;
	font-weight: 300;
	font-stretch: normal;
	font-style: normal;
	text-transform: none;
	text-decoration: none;
	line-height: 22px;
	color: black;
}

#jimmy_said_nav {
	display: table;
}

#jimmy_said_arrow_left,
#jimmy_said_arrow_right {
	display: table-cell;
	width: 27px;
	height: 27px;
	padding: 6px;
}

#jimmy_said_arrow_left {
	background: url(../img/left_arrow_active.png) no-repeat top center / cover;
}

#jimmy_said_arrow_right {
	background: url(../img/right_arrow_active.png) no-repeat top center / cover;
}

.active_arrow {
	cursor: pointer;
	opacity: 1;
	filter: alpha(opacity=100);
}

.unactive_arrow {
	opacity: 0.25;
	filter: alpha(opacity=25);
}

/*
 * IMAGES
 * */
#images_content {
	text-align: center;
}

#images_gallery_container {
	top: 35px;
}

#images_viewer {
	float: left;
	margin-left: 11%;
	margin-right: 24px;
	width: 585px;
	height: 456px;
	background: url(../img/ipad_images_gallery.png) no-repeat top center;
}

#images_container {
	position: absolute;
	top: 51px;
	left: 60px;
	width: 470px;
	height: 355px;
}

#images_container img {
	width: 100%;
}

#viewer_controls {
	display: table;
	position: absolute;
	left: 43%;
	bottom: -55px;
}

#images_arrow_left,
#images_arrow_right {
	display: table-cell;
	vertical-align: middle;
	width: 27px;
	height: 27px;
}

#images_arrow_left {
	background: url(../img/left_arrow_active.png) no-repeat top center / cover;
}

#images_arrow_right {
	background: url(../img/right_arrow_active.png) no-repeat top center / cover;
}

#images_nav_index {
	display: table-cell;
	padding-top: 10px;
	width: 45px;
	height: 27px;
	font-family: Arial;
	font-size: 14px;
	color: #fefefe;
}

#images_gallery_list {
	float: left;
	display: table;
	border-spacing: 12px;
	width: 225px;
}

#images_gallery_list .images_table_row {
	display: block;
}

#images_gallery_list .images_table_row .images_table_cell {
	display: inline-block;
	float: left;
	margin: 8px;
	width: 60px;
	height: 45px;
	background: rgba(0, 0, 0, 0.5);
	border: 5px solid transparent;
	cursor: pointer;
}

#images_gallery_list .images_table_row .images_table_cell img {
	width: 100%;
}

#images_gallery_list .images_table_row .images_table_active_cell {
	border: 5px solid #f28d01;
	cursor: default;
}

/*
 * SOCIAL NETWORK LINKS
 * */
#social_network_links {
	position: fixed;
	top: 35%;
	left: 0;
	width: 63px;
	height: 222px;
	background: url(../img/background_social_networking.png) no-repeat top center / contain;
	z-index: 100;
}

#social_network_links .network_link {
	width: 32px;
    height: 32px;
    left: -7px;
    top: 32px;
}

#social_network_links .network_link img {
	width: 100%;
}

/*
 * FOOTER
 * */
#footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	z-index: 100;
}

#menu_container {
	position: absolute;
	bottom: 30px;
	width: 98%;
	height: 20px;
	padding: 19px;
	background-color: white;
}

#menu {
	max-width: 900px;
	margin: 0 auto;
	font-family: 'tw_cen_mt_bold';
	font-size: 19px;
	text-transform: uppercase;
	text-align: left;
}
#menu a,
#menu a:visited {
	color: black;
}

#menu a,
#menu a:visited,
#menu a:hover {
	text-decoration: none;
}

#menu a:hover {
	color: #f28d01;
}

#menu .link_active {
	color: #f28d01 !important;
}

span.shuriken_separator {
	display: inline-block;
	top: 2px;
	width: 15px;
	height: 15px;
	margin-left: 7px;/*2px*/
	margin-right: 7px;/*2px*/
	background-image: url(../img/shuriken_separator.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
}

#available_soon_desktop {
	position: absolute;
	top: -22px;
	right: 17%;
	width: 159px;
}

#available_soon_desktop img {
	width: 100%;
}

#social_follows {
	float: right;
    top: -13px;
    right: 4%;
}

.twitter_link .twitter-share-button img {
	width: 72px;
}

#copyright {
	padding-top: 7px;
	padding-bottom: 7px;
	font-family: 'MyriadProRegular';
	font-size: 12px;
	font-style: normal;
	text-align: center;
	color: white;
	background-color: rgba(0, 0, 0, 0.75);
}

#mobile_tablette_layout {
	display: none;
}

#panneau_parchemin_personnages {
	display: block;
}

#panneau_parchemin_personnages_tablette {
	display: none;
}

#jimmy_said_pc {
	display: block;
}

#jimmy_said_tablette {
	display: none;
}

#social_follows .facebook_link {
	overflow: hidden;
}

@media only screen and (max-width: 1440px) {
	#img_ipad_presentation {
		float: left;
		width: 50%;
		padding: 1%;
		padding-left: 7%;
		padding-top: 2%;
	}
	
	#img_presentation_container {
		left: 20.75%;
	}
	
	#presentation_text {
		padding-left: 1%;
	}
	
	#personnages_container {
		width: 94%;
    	left: 0.5%;
	}
}

@media all and (max-width: 1024px) and (orientation: landscape) {
	#menu_container {
		max-width: 1024px;
		padding-left: 1%;
		padding-right: 1%;
	}
	
	#menu {
		font-size: 19px;
	}
	
	#available_soon_desktop {
		top: -22px;
	}
	
	#header {
		width: 100%;
		min-width: 768px;
		max-width: 1024px;
	}
	
	#logo_dragonslash {
		width: 12%;
		margin-left: 2%;
	}
	
	#logo_rotn {
		margin-left: 14.5%;
		width: 45%;
		top: -15px;
	}
	
	#btn_pressbook {
		width: 14%;
	}
	
	#language_selector {
		right: 0;
		width: 9%;
	}
	
	#language_selector img,
	#btn_pressbook img,
	#logo_rotn img,
	#logo_dragonslash img {
		width: 100%;
	}
	
	#teaser_container {
		top: 28%;
		width: 57%;
	}
	
	#main_wrapper {
		height: 6380px !important;
	}
	
	#feuillage_presentation {
		top: 15%;
	}
	
	#presentation_content {
		top: 17.6%;
	}
	
	#img_ipad_presentation {
		float: none;
		padding: 1%;
		width: 49.5%;
	}
	
	#img_presentation_container {
		top: 56px;
		left: 62px;
	}
	
	#presentation_text {
		float: none;
		padding: 1%;
		padding-top: 4%;
		width: 66%;
	}
	
	#presentation_text .title {
		text-align: center;
	}

	.text_content ul {
		padding-left: 2.75%;
	}
	
	#histoire_content {
		top: 25%;
	}
	
	#img_empereur_histoire {
		float: none;
		width: 40%;
		left: 0;
		top: 150px;
	}
	
	#img_empereur_histoire img {
		width: 100%;
	}
	
	#histoire_text {
		float: none;
		position: absolute;
		top: -90px;
		left: 20%;
		width: 62%;
		padding: 1%;
	}
	
	#histoire_text .title {
		text-align: center;
	}
	
	#histoire_dust_1 {
		top: 47.25%;
	}
	
	#histoire_dust_2 {
		top: 46.5%;
	}
	
	#personnages_content {
		top: 29%;
	}
	
	#personnages_container {
		width: 98%;
    	left: 1%;
	}
	
	.personnage_text_content p {
		letter-spacing: -0.5px;
	}
	
	#personnage_parchemin_description {
		float: none;
		position: absolute;
		top: 3%;
		left: 46.5%;
		width: 42%;
	}
	
	#personnage_parchemin_description img {
		width: 100%;
	}
	
	#panneau_parchemin_personnages {
		display: none;
	}
	
	#panneau_parchemin_personnages_tablette {
		display: block;
	}
	
	#personnages_introduction {
		top: 465px;
		left: 25px;
		width: 455px;
	}
	
	#personnage_portrait {
		top: 661px;
		left: 12%;
		width: 30%;
	}
	
	#personnage_portrait img {
		width: 100%;
	}
	
	.personnage_text_content {
		top: 700px;
		left: 78px;
		width: 265px;
		height: 250px;
	}
	
	.personnage_text_content h3.nom_personnage {
		font-size: 30px;
		text-align: left;
	}
	
	.personnage_text_content .age_personnage {
		top: 3px;
		font-size: 24px;
	}
	
	.personnage_text_content .block_force_faiblesse {
		position: absolute;
		top: 185px;
		height: auto;
	}
	
	.personnage_text_content .block_force_faiblesse .block_force {
		margin-right: 0 !important;
	}
	
	.personnage_text_content .block_force_faiblesse .block_force,
	.personnage_text_content .block_force_faiblesse .block_faiblesse {
		top: 0;
		width: 48%;
		font-size: 17px;
	}
	
	.personnage_text_content .block_force_faiblesse .block_force span,
	.personnage_text_content .block_force_faiblesse .block_faiblesse span {
		margin-right: 2px;
	}
	
	.personnage_text_content .block_force_faiblesse .block_force img,
	.personnage_text_content .block_force_faiblesse .block_faiblesse img {
		top: 12px;
		width: 38% !important;
	}
	
	.personnage_text_content .block_force_faiblesse .block_force {
		margin-right: 10px;
	}
	
	#personnages_selector {
		top: 660px;
		left: 45px;
		width: 90%;
	}
	
	#personnages_selector .personnage_thumbnail {
		width: 110px;
		height: 136px;
	}
	
	#personnages_selector .personnage_thumbnail:first-child {
		border-top: 4px solid black;
		border-bottom: 4px solid black;
		border-left: 4px solid black;
		border-right: 2px solid black;
	}
	
	#personnages_selector .personnage_thumbnail {
		border-top: 4px solid black;
		border-bottom: 4px solid black;
		border-left: 2px solid black;
		border-right: 2px solid black;
	}
	
	#personnages_selector .personnage_thumbnail:last-child {
		border-top: 4px solid black;
		border-bottom: 4px solid black;
		border-left: 2px solid black;
		border-right: 4px solid black;
	}
	
	.personnage_thumbnail_selected {
		width: 104px;
		height: 130px;
		border: 3px solid #f28d01;
	}
	
	#regles_content {
		top: 43%;
	}
	
	#regles_panneau {
		top: 74%;
	}
	
	#jimmy_block_container {
		right: 2.5%;
		top: 66%;
		/*bottom: 12%;*/
	}
	
	#jimmy_said_pc {
		display: none;
	}
	
	#jimmy_said_tablette {
		display: block;
	}
	
	#jimmy_said {
		top: 100px;
		left: 45px;
		width: 290px;
		height: 185px;
	}
	
	#jimmy_said_sentences {
		height: 157px;
	}
	
	#regles_feuillage {
		display: none;
	}
	
	#images_content {
		top: 46%;
	}
	
	#images_viewer {
		float: left;
		margin: 0;
		margin-left: 16%;
		width: 525px;
		height: 409px;
		background-size: contain;
	}
	
	#images_container {
		top: 46px;
		left: 52px;
		width: 422px;
		height: 315px;
	}
	
	#images_gallery_list {
		float: left;
		width: 230px;
		top: 0;
	}
	
	#images_gallery_list .images_table_row .images_table_cell {
		margin: 4px;
	}
	
	.text_content .title {
		font-size: 37px;
	}
	
	.text_content p.subtitle/*span.subtitle*/,
	.text_content h3 {
		font-size: 18px;
	}
	
	#social_follows .twitter_link {
		top: 4px;
	}
}

@media all and (max-width: 800px) and (orientation: portrait) {
	#main_wrapper {
		position: absolute;
		top: 0;
		width: 100%;
		height: 6625px;
		background: url(../img/background.png) no-repeat top center;
	}
	
	#menu_container {
		max-width: 800px;
		padding-left: 1%;
		padding-right: 1%;
	}
	
	#menu {
		max-width: 800px;
		font-size: 15px;
	}
	
	#available_soon_desktop {
		top: -24px;
		right: 14%;
	}
	
	#social_follows {
		right: -1%;
	}
	
	#header {
		width: 100%;
		min-width: 768px;
		max-width: 1024px;
	}
	
	#logo_dragonslash {
		width: 12%;
		margin-left: 2%;
	}
	
	#logo_rotn {
		margin-left: 7.5%;
		width: 58%;
		top: -10px;
	}
	
	#btn_pressbook {
		width: 14%;
	}
	
	#language_selector {
		right: 0;
		width: 9%;
	}
	
	#language_selector img,
	#btn_pressbook img,
	#logo_rotn img,
	#logo_dragonslash img {
		width: 100%;
	}
	
	#teaser_container {
		top: 30%;
		width: 73%;
	}
	
	#feuillage_presentation {
		top: 15%;
	}
	
	#presentation_content {
		top: 17.6%;
	}
	
	#img_ipad_presentation {
		float: none;
		padding: 1%;
		width: 66%;
	}
	
	#img_presentation_container {
		top: 54px;
		left: 11%;
	}
	
	#presentation_text {
		float: none;
		padding: 1%;
		padding-top: 4%;
		width: 59%;/*66%*/
	}
	
	#presentation_text .title {
		text-align: center;
	}
	
	#histoire_content {
		top: 25%;
	}
	
	#img_empereur_histoire {
		float: none;
		width: 55%;
		left: 0;
		top: 35px;
	}
	
	#img_empereur_histoire img {
		width: 100%;
	}
	
	#histoire_text {
		float: none;
		position: absolute;
		top: -197px;
		left: 8%;
		width: 82%;
		padding: 1%;
	}
	
	#histoire_text .title {
		text-align: center;
	}
	
	#histoire_dust_1 {
		display: none;
		/*top: 47.25%;*/
	}
	
	#histoire_dust_2 {
		display: none;
		/*top: 46.5%;*/
	}
	
	#personnages_content {
		top: 28.2%;
	}
	
	.personnage_text_content p {
		letter-spacing: -0.5px;
	}
	
	#personnage_parchemin_description {
		float: none;
		position: absolute;
		top: 12%;
		left: 41.5%;
		width: 55%;
	}
	
	#personnage_parchemin_description img {
		width: 100%;
	}
	
	#panneau_parchemin_personnages {
		display: none;
	}
	
	#panneau_parchemin_personnages_tablette {
		display: block;
	}
	
	#personnages_introduction {
		left: 25px;
		width: 455px;
	}
	
	#personnage_portrait {
		top: 667px;
		left: 2%;
		width: 38%;
	}
	
	#personnage_portrait img {
		width: 100%;
	}
	
	.personnage_text_content {
		top: 660px;
		left: 70px;
		width: 256px;
		height: 250px;
	}
	
	.personnage_text_content h3.nom_personnage {
		font-size: 30px;
		text-align: left;
	}
	
	.personnage_text_content .age_personnage {
		top: 3px;
		font-size: 24px;
	}
	
	.personnage_text_content .block_force_faiblesse {
		position: absolute;
		top: 185px;
		height: auto;
	}
	
	.personnage_text_content .block_force_faiblesse .block_force {
		margin-right: 0 !important;
	}
	
	.personnage_text_content .block_force_faiblesse .block_force,
	.personnage_text_content .block_force_faiblesse .block_faiblesse {
		top: 0;
		width: 48%;
		font-size: 17px;
	}
	
	.personnage_text_content .block_force_faiblesse .block_force span,
	.personnage_text_content .block_force_faiblesse .block_faiblesse span {
		margin-right: 2px;
	}
	
	.personnage_text_content .block_force_faiblesse .block_force img,
	.personnage_text_content .block_force_faiblesse .block_faiblesse img {
		top: 12px;
		width: 38% !important;
	}
	
	.personnage_text_content .block_force_faiblesse .block_force {
		margin-right: 10px;
	}
	
	#personnages_selector {
		top: 664px;
		left: 0;
		width: 96%;
	}
	
	#personnages_selector .personnage_thumbnail {
		width: 94px;
		height: 116px;
	}
	
	#personnages_selector .personnage_thumbnail:first-child {
		border-top: 4px solid black;
		border-bottom: 4px solid black;
		border-left: 4px solid black;
		border-right: 2px solid black;
	}
	
	#personnages_selector .personnage_thumbnail {
		border-top: 4px solid black;
		border-bottom: 4px solid black;
		border-left: 2px solid black;
		border-right: 2px solid black;
	}
	
	#personnages_selector .personnage_thumbnail:last-child {
		border-top: 4px solid black;
		border-bottom: 4px solid black;
		border-left: 2px solid black;
		border-right: 4px solid black;
	}
	
	.personnage_thumbnail_selected {
		width: 88px;
		height: 110px;
		border: 3px solid #f28d01;
	}
	
	#regles_content {
		top: 42.75%;
	}
	
	#regles_panneau {
		top: 72.4%;
		height: 485px !important;
	}
	
	#regles_animation_container {
		top: 15%;
		left: 0;
		width: 650px;
	}
	
	#regles_left_arrow img,
	#regles_right_arrow img {
		width: 60%;
    	top: 10px;
	}
	
	#bouton_classement {
		top: 80px;
	}
	
	#bouton_classement img {
		width: 20%;
	}
	
	#regles_armes_container {
		width: 620px;
		height: 304px;
	}
	
	.regles_armes_container_fr {
		background: url(../img/regles_armes_epreuves.png) no-repeat 0% 0% / cover;
	}
	
	.regles_armes_container_en {
		background: url(../img/regles_armes_epreuves_en.png) no-repeat 0% 0% / cover;
	}
	
	#jimmy_block_container {
		right: 2.5%;
		bottom: -4%;
	}
	
	#jimmy_said_pc {
		display: none;
	}
	
	#jimmy_said_tablette {
		display: block;
	}
	
	#jimmy_said {
		top: 100px;
		left: 45px;
		width: 290px;
		height: 185px;
	}
	
	#jimmy_said_sentences {
		height: 157px;
	}
	
	#regles_feuillage {
		display: none;
	}
	
	#images_content {
		top: 45.6%;
	}
	
	#images_viewer {
		float: none;
		margin: 0;
		margin-left: 16%;
		width: 525px;
		height: 409px;
		background-size: contain;
	}
	
	#images_container {
		top: 46px;
		left: 52px;
		width: 422px;
		height: 315px;
	}
	
	#images_gallery_list {
		float: none;
		width: 560px;
		top: 90px;
	}
	
	.text_content .title {
		font-size: 37px;
	}
	
	#social_follows .twitter_link {
		top: 5px;
	}
}

/*
 * MOBILE LAYOUT - LANDSCAPE MODE
 * */
@media all and (max-width: 740px) and (orientation: landscape) {
	* {
		z-index: 1;
	}
	
	body {
		background: #181818;
	}
	
	html,
	body.skrollr-desktop {
		overflow: auto !important;
		height: auto;
	}
	
	#skrollr-body,
	#social_network_links,
	#footer {
		display: none;
	}
	
	#mobile_tablette_layout {
		display: block;
	}
	
	#header_mobile {
		padding: 2%;
		width: 96%;
		height: auto;
	}
	
	#mobile_logo_container {
		width: 100%;
		max-width: 45%;
	}
	
	#mobile_logo_container img {
		width: 100%;
	}
	
	#teaser_container_mobile {
		width: 95%;
		height: 392px;
		border: 12px solid rgba(25, 25, 25, .5);
	}
	
	#teaser_container_mobile iframe {
		border: 12px solid rgba(0, 0, 0, .25);
	}
	
	#coming_soon_mobile {
		margin-top: 15px;
		margin-bottom: 30px;
		padding: 1%;
		width: 98%;
		font-family: 'tw_cen_mt_bold';
		font-size: 20px;
		text-align: center;
		text-transform: uppercase;
		color: white;
		background: #149889;
	}
	
	#coming_soon_mobile span {
	    top: -16px;
	    left: 5px;
	}
	
	#coming_soon_mobile img {
		width: 10%;
		height: auto;
	}
	
	/* 
	 * PRESENTATION
	 * */
	#ipad_presentation_mobile {
		margin: 0 auto;
		width: 50%;
		height: auto;
	}
	
	#img_presentation_container_mobile {
		position: absolute;
		top: 11.6%;
		left: 10.25%;
		width: 80%;
	}
	
	#ipad_presentation_mobile img {
		width: 100%;
	}
	
	/* 
	 * HISTOIRE
	 * */
	#img_palais_mobile {
		width: 100%;
		top: -65px;
		z-index: 0;
	}
	
	#img_empereur_histoire_mobile {
		position: absolute;
		top: 30%;
		left: 35%;
		width: 32%;
	}
	
	#img_palais_mobile img,
	#img_empereur_histoire_mobile img {
		width: 100%;
	}
	
	#palais_landscape {
		display: inline-block;
	}
	
	#palais_portrait {
		display: none;
	}
	
	#histoire_text_mobile {
		top: -150px;
	}
	
	/* 
	 * PERSONNAGES
	 * */
	#personnages_container_mobile {
		top: -150px;
		width: 100%;
		height: 625px;
		background: url(../img/personnages_background.png) no-repeat center top;
		background-size: cover;
	}
	
	#personnages_presentation_mobile_container {
		float: left;
		width: 88%;
	}
	
	#personnage_mobile_1,
	#personnage_mobile_2,
	#personnage_mobile_3,
	#personnage_mobile_4,
	#personnage_mobile_5,
	#personnage_mobile_6,
	#personnage_mobile_7 {
		float: left;
		width: 88%;
	}
	
	#personnage_mobile_1 {
		display: block;
	}
	
	#personnage_mobile_2,
	#personnage_mobile_3,
	#personnage_mobile_4,
	#personnage_mobile_5,
	#personnage_mobile_6,
	#personnage_mobile_7 {
		display: none;
	}
	
	#personnage_parchemin_description_mobile {
		padding: 1%;
		width: 98%;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse {
		float: left;
		font-family: 'tw_cen_mt_normal';
		font-size: 1.25em;
		color: white;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force {
		margin-right: 17px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force span,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse span {
		margin-right: 8px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force img,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse img {
		top: 16px;
		width: 64px;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile,
	#personnage_parchemin_description_mobile .description_mobile,
	#personnages_arrow_left_mobile {
		float: left;
	}
	
	#personnages_arrow_right_mobile {
		float: right;
	}
	
	#personnages_arrow_left_mobile,
	#personnages_arrow_right_mobile {
		top: 92px;
	}
	
	#personnages_arrow_left_mobile img,
	#personnages_arrow_right_mobile img {
		width: 43px;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile {
		width: 39%;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile img {
		width: 100%;
	}
	
	#personnage_parchemin_description_mobile .description_mobile {
		padding: 3%;
		width: 55%;
	}
	
	#personnage_parchemin_description_mobile .description_mobile p {
		font-family: 'tw_cen_mt_normal';
		font-size: 1.2em;
		text-align: justify;
		color: white;
	}
	
	.nom_personnage_mobile {
		padding: 2%;
		padding-top: 5%;
		width: 96%;
		font-family: 'tw_cen_mt_normal';
		font-weight: normal;
		font-style: normal;
		font-size: 1.75em;
		text-align: center;
		text-transform: uppercase;
		color: #f28d01;
	}
	
		
	/*
	 * LANDSCAPE CHARACTERS BLOCK
	 * */
	#personnage_mobile_portrait {
		display: none !important;
	}
	#personnages_mobile_landscape
	{
		top: -140px;
		display: block;
		width: 100%;
	}
	#personnages_mobile_landscape .personnages_mobile_header_landscape
	{
		max-height:61px;
		overflow:hidden;
	}
	#personnages_mobile_landscape .personnages_mobile_footer_landscape
	{
		max-height:48px;
		overflow:hidden;
	}
	#personnages_mobile_landscape .personnages_mobile_header_landscape img,
	#personnages_mobile_landscape .personnages_mobile_footer_landscape img
	{
		display: block;
		width: 100%;
		height: auto;
	}
	#personnages_mobile_landscape .text_content {
		padding: 2%;
		padding-bottom: 0 !important;
		width: 96%;
	}
	.personnages_mobile_presentation_landscape
	{
		background-image: url(../img/charactersblock/personnages_background_02.png);
		background-position: top left;
		background-repeat: no-repeat;
		background-color: #4c4c4c;
		background-size: cover;
	}
	.personnages_mobile_name_landscape
	{
		background-image: url(../img/charactersblock/personnages_background_03.png);
		background-position: bottom left;
		background-repeat: no-repeat;
		background-color: #2c2c2c;
		background-size: cover;
		margin-bottom: -1px;
	}
	.personnages_mobile_name_landscape p {
		padding: 2%;
		padding-top: 1%;
		width: 96%;
		font-family: 'tw_cen_mt_normal';
		font-weight: normal;
		font-style: normal;
		font-size: 1.75em;
		text-align: center;
		text-transform: uppercase;
		color: #f28d01;
	}
	.character_landscape
	{
		width: 88%;
	}
	.character_landscape,
	#personnages_arrow_left_mobile_landscape,
	#personnages_arrow_right_mobile_landscape
	{
		float: left;
		margin-top: 20px;
	}
	#personnages_arrow_left_mobile_landscape,
	#personnages_arrow_right_mobile_landscape
	{
		margin-top: 20%;
		width: 6%;
	}
	#personnages_arrow_left_mobile_landscape img,
	#personnages_arrow_right_mobile_landscape img
	{
		width: 100%;
	}
	.character_picture_landscape
	{
		width:40%;
		float:left;
	}
	.character_presentation_landscape
	{
		padding: 2%;
		width: 56%;
		float: left;
	}
	.character_presentation_landscape p {
		font-size: 1em !important;
	}
	.character_picture_landscape img
	{
		display:block;
		width:100%;
	}
	.character_landscape .character_presentation_landscape .block_force_faiblesse .block_force,
	.character_landscape .character_presentation_landscape .block_force_faiblesse .block_faiblesse
	{
		float: left;
		width: 50%;
		font-family: 'tw_cen_mt_normal';
		font-size: 1.2em;
		text-align: justify;
		letter-spacing: -0.5px;
		color: white;
	}
	.character_landscape .character_presentation_landscape .block_force_faiblesse .block_force img,
	.character_landscape .character_presentation_landscape .block_force_faiblesse .block_faiblesse img
	{
		width:65px;
		top: 15px;
		left: 6px;
	}
	
	#personnage_mobile_landscape_2,
	#character_name_2,
	#personnage_mobile_landscape_3,
	#character_name_3,
	#personnage_mobile_landscape_4,
	#character_name_4,
	#personnage_mobile_landscape_5,
	#character_name_5,
	#personnage_mobile_landscape_6,
	#character_name_6,
	#personnage_mobile_landscape_7,
	#character_name_7 {
		/*display: none !important;*/
	}
	
	
	/* 
	 * REGLES
	 * */
	#regles_container_mobile {
		top: -175px;
		width: 100%;
		height: 590px;
		background: url(../img/background_regles.jpg) no-repeat top center;
		background-size: cover;
		z-index: 0;
	}
	
	#jimmy_bubble_landscape {
		display: block;
	}
	
	#jimmy_bubble_portrait {
		display: none;
	}
	
	#regles_container_mobile .text_content .title {
		top: 20px;
	}
	
	#jimmy_block_mobile_container {
		padding-top: 2%;
		padding-left: 4%;
		padding-right: 4%;
		padding-bottom: 2%;
		width: 92%;
	}
	
	#jimmy_block_mobile_container img {
		width: 100%;
	}

	#jimmy_said_mobile {
		position: absolute;
		top: 30px;
		left: 8%;
		width: 48%;
		height: 280px;
	}
	
	#jimmy_said_sentences_mobile {
		height: 253px;
	}
	
	#jimmy_said_sentences_mobile .jimmy_sentence_mobile {
		display: table-cell;
	    vertical-align: middle;
		font-family: Arial;
		font-size: 1.25em;
		font-weight: 300;
		font-stretch: normal;
		font-style: normal;
		text-align: center;
		text-transform: none;
		text-decoration: none;
		line-height: 1.3em;
		color: black;
	}
	
	#jimmy_said_nav_mobile {
		display: table;
	}
	
	#jimmy_said_arrow_left_mobile,
	#jimmy_said_arrow_right_mobile {
		display: table-cell;
		width: 27px;
		height: 27px;
		padding: 6px;
	}
	
	#jimmy_said_arrow_left_mobile {
		background: url(../img/left_arrow_active.png) no-repeat top center;
		background-size: cover;
	}
	
	#jimmy_said_arrow_right_mobile {
		background: url(../img/right_arrow_active.png) no-repeat top center;
		background-size: cover;
	}
	
	/* 
	 * IMAGES
	 * */
	#images_container_mobile {
		top: -270px;
	}
	
	#images_container_mobile .text_content {
		padding-bottom: 0;
		top: 15px;
	}

	#images_content_mobile {
		text-align: center;
	}
	
	#images_gallery_list_mobile {
		display: table;
		border-spacing: 10px;
		width: 75%;
		padding-bottom: 30px;
	}
	
	#images_viewer_mobile {
		display: none;
		position: absolute;
		z-index: 10;
	}
	
	#images_viewer_mobile img {
		width: 100%;
	}
	
	#images_gallery_list_mobile .images_table_row_mobile {
		display: block;
	}
	
	#images_gallery_list_mobile .images_table_row_mobile .images_table_cell_mobile {
		display: inline-block;
		margin: 1%;
		width: 22%;/*70px*/
		height: auto;/*53px*/
		background: rgba(0, 0, 0, 0.5);
		/*border: 1px solid transparent;*/
		cursor: pointer;
	}
	
	#images_gallery_list_mobile .images_table_row_mobile .images_table_cell_mobile img {
		width: 100%;
	}
	
	#images_gallery_list_mobile .images_table_row_mobile .images_table_active_cell_mobile {
		/*border: 1px solid #f28d01;*/
		cursor: default;
	}
	
	/* 
	 * SOCIAL NETWORK LINKS
	 * */
	#social_network_links_mobile {
		position: absolute;
		bottom: 10px;
		width: 100%;
		text-align: center;
		background-color: #0d0d0d;
	}
	
	#social_network_links_separator,
	#social_network_links_separator img {
		width: 100%;
	}
	
	#social_network_links_mobile .network_link_mobile {
		margin: 4px;
		width: 40px;
		height: 40px;
		border: 0;
		text-decoration: none;
	}
	
	#social_network_links_mobile .network_link_mobile img {
		width: 40px;
		height: 40px;
	}
	
	#share_links_container {
		margin-top: 20px;
		margin-bottom: 15px;
	}
	
	#share_links_container .social_network_link {
		display: inline;
	}
	
	#share_links_container .twitter_link {
		top: 5px;
	}
	
	#logo_dragonslash_mobile {
		width: 100%;
		background-color: #181818;
	}
	
	#logo_dragonslash_mobile a {
		border: 0;
		text-decoration: none;
	}
	
	#logo_dragonslash_mobile img {
		width: 20%;
	}
	
	#logo_dragonslash_mobile p {
		font-family: Arial;
		font-size: 0.8em;
		line-height: 1.75em;
		color: #fffefe;
	}
	
	/* 
	 * GENERAL
	 * */
	.text_content {
		padding: 5%;
		padding-top: 7.2%;
		width: 90%;
		text-align: center;
	}
	
	#histoire_text_mobile {
		padding-top: 0;
	}
	
	.text_content .title {
		font-size: 1.5em;
	}
	
	.text_content p.subtitle/*span.subtitle*/,
	.text_content h3 {
		font-size: 1.3em;
		text-align: justify;
	}
	
	.text_content p,
	.text_content ul li {
		font-size: 1.15em;
		text-align: justify;
	}
}

@media all and (max-width: 690px) and (orientation: landscape) {
	#personnage_parchemin_description_mobile {
		top: 4.5%;
	}
	
	#personnages_arrow_left_mobile,
	#personnages_arrow_right_mobile {
		top: 105px;
	}
	
	#personnages_arrow_left_mobile img,
	#personnages_arrow_right_mobile img {
		width: 38px;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile {
		width: 37%;
		top: 13px;
	}
	
	#personnage_parchemin_description_mobile .description_mobile {
		padding: 3%;
		padding-top: 8%;
		width: 57%;
	}
	
	#personnage_parchemin_description_mobile .description_mobile p {
		font-size: 1.1em;
	}
	
	#jimmy_said_sentences_mobile {
		height: 200px;
	}
	
	#jimmy_said_sentences_mobile .jimmy_sentence_mobile {
		font-size: 1em;
		line-height: 1.2em;
	}
}

@media all and (max-width: 667px) and (orientation: landscape) {
	#teaser_container_mobile {
		height: 358px;
	}
	
	#personnages_container_mobile {
		height: 566px;
	}
	
	.text_content {
		padding-bottom: 1.25%;
		padding-top: 5%;
	}
	
	#personnages_arrow_left_mobile, #personnages_arrow_right_mobile {
		top: 140px;
	}
	
	#personnages_arrow_left_mobile img,
	#personnages_arrow_right_mobile img {
		width: 40px;
	}
	
	#personnage_parchemin_description_mobile {
		top: 0;
	}
	
	#personnage_mobile_1,
	#personnage_mobile_2,
	#personnage_mobile_3,
	#personnage_mobile_4,
	#personnage_mobile_5,
	#personnage_mobile_6,
	#personnage_mobile_7 {
		float: left;
		width: 87%;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile {
		width: 39%;
		top: 13px;
	}
	
	#personnage_parchemin_description_mobile .description_mobile {
	    padding: 3%;
		padding-top: 8%;
		width: 55%;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force {
		margin-right: 13px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force span,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse span {
		margin-right: 4px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force img,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse img {
		top: 16px;
		width: 65px;
	}
	
	#regles_container_mobile {
		height: 545px;
	}

	#jimmy_said_mobile {
		top: 30px;
		height: 250px;
	}
	
	#jimmy_said_sentences_mobile {
		height: 223px;
	}
	
	#jimmy_said_sentences_mobile .jimmy_sentence_mobile {
		font-size: 1.15em;
		line-height: 1.2em;
	}
}

@media all and (max-width: 640px) and (orientation: landscape) {
	#personnage_parchemin_description_mobile {
		top: 2.2%;
	}
}

@media all and (max-width: 598px) and (orientation: landscape) {
	#personnage_parchemin_description_mobile {
		top: 8.5%;
	}
	
	#personnages_arrow_left_mobile,
	#personnages_arrow_right_mobile {
		top: 105px;
	}
	
	#personnages_arrow_left_mobile img,
	#personnages_arrow_right_mobile img {
		width: 38px;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile {
		width: 37%;
		top: 13px;
	}
	
	#personnage_parchemin_description_mobile .description_mobile {
		padding: 3%;
		padding-top: 8%;
		width: 57%;
	}
	
	#personnage_parchemin_description_mobile .description_mobile p {
		font-size: 1.1em;
	}
	
	#jimmy_said_sentences_mobile {
		height: 200px;
	}
	
	#jimmy_said_sentences_mobile .jimmy_sentence_mobile {
		font-size: 1em;
		line-height: 1.2em;
	}
}

@media all and (max-width: 568px) and (orientation: landscape) {
	#teaser_container_mobile {
		height: 305px;
	}
	
	#personnages_container_mobile {
		height: 482px;
	}
	
	.text_content {
		padding-bottom: 5%;
	}
	
	#personnages_arrow_left_mobile, #personnages_arrow_right_mobile {
		top: 92px;
	}
	
	#personnage_parchemin_description_mobile {
		top: 0;
	}
	
	#personnage_parchemin_description_mobile .description_mobile p {
		font-size: 1em;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse {
		font-size: 1.15em;
	}
	
	#personnages_arrow_left_mobile img,
	#personnages_arrow_right_mobile img {
		width: 40px;
	}
	
	#personnage_mobile_1,
	#personnage_mobile_2,
	#personnage_mobile_3,
	#personnage_mobile_4,
	#personnage_mobile_5,
	#personnage_mobile_6,
	#personnage_mobile_7 {
		float: left;
		width: 85%;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile {
		width: 39%;
		top: 11px;
	}
	
	#personnage_parchemin_description_mobile .description_mobile {
	    padding: 3%;
		padding-top: 8%;
		width: 55%;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force {
		margin-right: 15px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force span,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse span {
		margin-right: 4px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force img,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse img {
		top: 13px;
		width: 56px;
	}
	
	.text_content .title {
		font-size: 1.25em;
	}
	
	.text_content p.subtitle/*span.subtitle*/,
	.text_content h3 {
		font-size: 1.15em;
		text-align: justify;
	}
	
	.text_content p,
	.text_content ul li {
		font-size: 0.9em;
		text-align: justify;
	}
	
	#regles_container_mobile {
		height: 475px;
	}

	#jimmy_said_mobile {
		top: 30px;
		height: 210px;
	}
	
	#jimmy_said_sentences_mobile {
		height: 183px;
	}
	
	#jimmy_said_sentences_mobile .jimmy_sentence_mobile {
		font-size: 1em;
		line-height: 1.2em;
	}
}

@media all and (max-width: 480px) and (orientation: landscape) {
	#teaser_container_mobile {
		height: 255px;
	}
	
	#personnages_container_mobile {
		height: 410px;
	}
	
	.text_content {
		padding-bottom: 2%;
	}
	
	#personnages_arrow_left_mobile,
	#personnages_arrow_right_mobile {
		top: 92px;
	}
	
	#personnages_arrow_left_mobile img,
	#personnages_arrow_right_mobile img {
		width: 40px;
	}
	
	#personnage_mobile_1,
	#personnage_mobile_2,
	#personnage_mobile_3,
	#personnage_mobile_4,
	#personnage_mobile_5,
	#personnage_mobile_6,
	#personnage_mobile_7 {
		float: left;
		width: 80%;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile {
		width: 39%;
		top: 9px;
	}
	
	#personnage_parchemin_description_mobile .description_mobile {
	    padding: 3%;
		width: 55%;
	}
	
	#personnage_parchemin_description_mobile .description_mobile p {
		font-size: 0.85em;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force {
		margin-right: 5px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force span,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse span {
		margin-right: 4px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force img,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse img {
		top: 11px;
		width: 48px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse {
		font-size: 0.9em;
	}
	
	#regles_container_mobile {
		top: -175px;
		height: 425px;
	}

	#jimmy_said_mobile {
		top: 30px;
		height: 140px;
	}
	
	#jimmy_said_sentences_mobile {
		height: 140px;
	}
	
	#jimmy_said_sentences_mobile .jimmy_sentence_mobile {
		font-size: 0.8em;
		line-height: 1.3em;
	}
}

/*
 * MOBILE LAYOUT - PORTRAIT MODE
 * */
@media all and (max-width: 414px) and (orientation: portrait) {
	* {
		z-index: 1;
	}
	
	body {
		background: #181818;
	}
	
	html,
	body.skrollr-desktop {
		overflow: auto !important;
		height: auto;
	}
	
	#skrollr-body,
	#social_network_links,
	#footer {
		display: none;
	}
	
	#mobile_tablette_layout {
		display: block;
	}
	
	#header_mobile {
		padding: 2%;
		width: 96%;
		height: auto;
	}
	
	#mobile_logo_container {
		width: 100%;
		max-width: 45%;
	}
	
	#mobile_logo_container img {
		width: 100%;
	}
	
	#teaser_container_mobile {
		width: 93%;
		height: 220px;
		border: 12px solid rgba(25, 25, 25, .5);
	}
	
	#teaser_container_mobile iframe {
		border: 12px solid rgba(0, 0, 0, .25);
	}
	
	#coming_soon_mobile {
		margin-top: 15px;
		margin-bottom: 30px;
		padding: 1%;
		width: 98%;
		font-family: 'tw_cen_mt_bold';
		font-size: 15px;
		text-align: center;
		text-transform: uppercase;
		color: white;
		background: #149889;
	}
	
	#coming_soon_mobile span {
	    top: -10px;
	    left: 5px;
	}
	
	#coming_soon_mobile img {
		width: 10%;
		height: auto;
	}
	
	/* 
	 * PRESENTATION
	 * */
	#ipad_presentation_mobile {
		margin: 0 auto;
		width: 90%;
		height: auto;
	}
	
	#img_presentation_container_mobile {
		position: absolute;
		top: 11.5%;
		left: 10.25%;
		width: 80.5%;
	}
	
	#ipad_presentation_mobile img {
		width: 100%;
	}
	
	/* 
	 * HISTOIRE
	 * */
	#img_palais_mobile {
		width: 100%;
		top: -65px;
		z-index: 0;
	}
	
	#img_empereur_histoire_mobile {
		position: absolute;
		top: 28%;
		left: 24%;
		width: 57%;
	}
	
	#img_palais_mobile img,
	#img_empereur_histoire_mobile img {
		width: 100%;
	}
	
	#palais_landscape {
		display: none;
	}
	
	#palais_portrait {
		display: inline-block;
	}
	
	#histoire_text_mobile {
		top: -155px;
	}
	
	#histoire_text_mobile .title {
		line-height: 1.25em;
	}
	
	#histoire_text_mobile p sup {
		top: -2px;
		font-size: 0.5em;
	}
	
	/* 
	 * PERSONNAGES
	 * */
	#personnages_container_mobile {
		top: -150px;
		width: 100%;
		height: 942px;
		background: url(../img/personnages_background_portrait.png) no-repeat center top;
		background-size: cover;
	}
	
	#personnages_presentation_mobile_container {
		float: left;
		width: 88%;
	}
	
	#personnage_mobile_1,
	#personnage_mobile_2,
	#personnage_mobile_3,
	#personnage_mobile_4,
	#personnage_mobile_5,
	#personnage_mobile_6,
	#personnage_mobile_7 {
		width: 100%;
	}
	
	#personnage_mobile_1 {
		display: block;
	}
	
	#personnage_mobile_2,
	#personnage_mobile_3,
	#personnage_mobile_4,
	#personnage_mobile_5,
	#personnage_mobile_6,
	#personnage_mobile_7 {
		display: none;
	}
	
	#personnage_parchemin_description_mobile {
		padding: 1%;
		top: 18px;
		width: 98%;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse {
		font-family: 'tw_cen_mt_normal';
		font-size: 1em;
		color: white;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force {
		margin-right: 17px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force span,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse span {
		margin-right: 8px;
	}
	
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_force img,
	#personnage_parchemin_description_mobile .block_force_faiblesse .block_faiblesse img {
		top: 25px;
		width: 90px;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile,
	#personnage_parchemin_description_mobile .description_mobile {
		float: none;
	}
	
	#personnages_arrow_left_mobile,
	#personnages_arrow_right_mobile {
		position: absolute;
		top: 145px;
		z-index: 2;
	}
	
	#personnages_arrow_left_mobile img,
	#personnages_arrow_right_mobile img {
		width: 40px;
	}
	
	#personnages_arrow_left_mobile {
		float: left;
		left: 0px;
	}
	
	#personnages_arrow_right_mobile {
		float: right;
		right: 0px;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile {
		width: 78.16%;
	}
	
	#personnage_parchemin_description_mobile .portrait_mobile img {
		width: 100%;
	}
	
	#personnage_parchemin_description_mobile .description_mobile {
		position: absolute;
		top: 345px;
		padding: 3%;
		padding-top: 5%;
		width: 94%;
		font-family: "MyriadProRegular";
		font-size: 1.35em;
		line-height: 1em;
	}
	
	#personnage_parchemin_description_mobile .description_mobile p {
		font-family: 'tw_cen_mt_normal';
		font-size: 0.85em;
		text-align: justify;
		letter-spacing: -0.5px;
		color: white;
	}
	
	.nom_personnage_mobile {
		padding: 2%;
		width: 96%;
		font-family: 'tw_cen_mt_normal';
		font-weight: normal;
		font-style: normal;
		font-size: 1.4em;
		text-align: center;
		text-transform: uppercase;
		color: #f28d01;
	}
	
	
	/*
	 * PORTRAIT CHARACTERS BLOCK
	 * */
	#personnages_mobile_landscape {
		display: none !important;
	}
	
	#personnage_mobile_portrait {
		top: -140px;
		display: block;
		width: 100%;
	}
	
	#personnage_mobile_portrait #personnage_mobile_portrait_header {
		max-height: 198px;
	}
	
	#personnage_mobile_portrait #personnage_mobile_portrait_header img,
	#personnage_mobile_portrait #personnage_mobile_portrait_footer img {
		display: block;
		width: 100%;
		height: auto;
	}
	
	#personnages_mobile_portrait_presentation {
		background-image: url(../img/charactersblock/personnages_background_portrait_02.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: cover;
	}
	
	#personnages_mobile_portrait_details {
		background-image: url(../img/charactersblock/personnages_background_portrait_03.png);
		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: cover;
		margin-bottom: -1px;
	}
	
	#personnages_mobile_portrait_picture,
	#personnages_arrow_right_mobile_portrait,
	#personnages_arrow_left_mobile_portrait {
		float: left;
	}
	#personnages_mobile_portrait_picture {
		width: 72%;
	}
	#personnages_mobile_portrait_picture img {
		width: 100%;
		display: block;
	}
	#personnages_arrow_right_mobile_portrait,
	#personnages_arrow_left_mobile_portrait {
		width: 14%;
		margin-top: 35%;
	}
	#personnages_arrow_right_mobile_portrait img,
	#personnages_arrow_left_mobile_portrait img {
		width: 100%;
	}
	.character_portrait .block_force_faiblesse {
		padding-left: 5%;
		padding-bottom: 20px;
	}
	.character_portrait .block_force_faiblesse .block_force,
	.character_portrait .block_force_faiblesse .block_faiblesse {
		font-family: 'tw_cen_mt_normal';
		font-size: 1.2em;
		text-align: justify;
		letter-spacing: -0.5px;
		color: white;
	}
	.character_portrait .block_force_faiblesse .block_force img,
	.character_portrait .block_force_faiblesse .block_faiblesse img {
		top: 20px;
		left: 6px;
	}
	.character_portrait p {
		padding: 3%;
		padding-top: 1%;
		padding-bottom: 1%;
		font-family: 'tw_cen_mt_normal';
		font-size: 1.2em;
		text-align: justify;
		letter-spacing: -0.5px;
		color: white;
	}
	.character_portrait p.personnages_mobile_name_portrait {
		padding: 2%;
		width: 96%;
		font-family: 'tw_cen_mt_normal';
		font-weight: normal;
		font-style: normal;
		font-size: 1.4em;
		text-align: center;
		text-transform: uppercase;
		color: #f28d01;
	}
	
	#personnage_mobile_portrait_2,
	#character_picture_2,
	#personnage_mobile_portrait_3,
	#character_picture_3,
	#personnage_mobile_portrait_4,
	#character_picture_4,
	#personnage_mobile_portrait_5,
	#character_picture_5,
	#personnage_mobile_portrait_6,
	#character_picture_6,
	#personnage_mobile_portrait_7,
	#character_picture_7 {
		/*display: none !important;*/
	}
	
	/* 
	 * REGLES
	 * */
	#regles_container_mobile {
		top: -175px;
		width: 100%;
		height: 810px;/*637px*/
		background: url(../img/background_regles_portrait.jpg) no-repeat top center;
		background-size: cover;
		z-index: 0;
	}
	
	#jimmy_bubble_landscape {
		display: none;
	}
	
	#jimmy_bubble_portrait {
		display: block;
	}
	
	#regles_container_mobile .text_content .title {
		top: 20px;
	}
	
	#jimmy_block_mobile_container {
		padding: 1%;
		padding-left: 3%;
		width: 96%;
	}
	
	#jimmy_block_mobile_container img {
		width: 100%;
	}

	#jimmy_said_mobile {
		position: absolute;
		top: 3%;
		left: 5.75%;
		width: 85.5%;
		height: 200px;
	}
	
	#jimmy_said_sentences_mobile {
		height: 275px;
	}
	
	#jimmy_said_sentences_mobile .jimmy_sentence_mobile {
		display: table-cell;
	    vertical-align: middle;
		font-family: Arial;
		font-size: 1.2em;
		font-weight: 300;
		font-stretch: normal;
		font-style: normal;
		text-align: center;
		text-transform: none;
		text-decoration: none;
		line-height: 1.3em;
		color: black;
	}
	
	#jimmy_said_nav_mobile {
		display: table;
	}
	
	#jimmy_said_arrow_left_mobile,
	#jimmy_said_arrow_right_mobile {
		display: table-cell;
		width: 27px;
		height: 27px;
		padding: 6px;
	}
	
	#jimmy_said_arrow_left_mobile {
		background: url(../img/left_arrow_active.png) no-repeat top center;
		background-size: cover;
	}
	
	#jimmy_said_arrow_right_mobile {
		background: url(../img/right_arrow_active.png) no-repeat top center;
		background-size: cover;
	}
	
	/* 
	 * IMAGES
	 * */
	#images_container_mobile {
		top: -100px;
		min-height: 360px;
	}
	
	#images_container_mobile .text_content .title {
		line-height: 1em;
		width: 70%;
	}
	
	#images_container_mobile .text_content {
		padding-bottom: 0;
	}

	#images_content_mobile {
		text-align: center;
	}
	
	#images_viewer_mobile {
		display: none;
		position: absolute;
		z-index: 10;
	}
	
	#images_viewer_mobile img {
		width: 100%;
	}
	
	#images_gallery_list_mobile {
		display: table;
		/*border-spacing: 10px;*/
		width: 99%;/*91%*/
	}
	
	#images_gallery_list_mobile .images_table_row_mobile {
		display: block;
	}
	
	#images_gallery_list_mobile .images_table_row_mobile .images_table_cell_mobile {
		display: inline-block;
		margin: 1%;
		width: 22%;
		height: auto;
		background: rgba(0, 0, 0, 0.5);
		cursor: pointer;
	}
	
	#images_gallery_list_mobile .images_table_row_mobile .images_table_cell_mobile img {
		width: 100%;
	}
	
	#images_gallery_list_mobile .images_table_row_mobile .images_table_active_cell_mobile {
		/*border: 1px solid #f28d01;*/
		cursor: default;
	}
	
	/* 
	 * SOCIAL NETWORK LINKS
	 * */
	#social_network_links_mobile {
		position: absolute;
		bottom: -180px;
		width: 100%;
		text-align: center;
		background-color: #0d0d0d;
	}
	
	#social_network_links_separator,
	#social_network_links_separator img {
		width: 100%;
	}
	
	#social_network_links_mobile .network_link_mobile {
		margin: 4px;
		width: 40px;
		height: 40px;
		border: 0;
		text-decoration: none;
	}
	
	#social_network_links_mobile .network_link_mobile img {
		width: 40px;
		height: 40px;
	}
	
	#share_links_container {
		margin-top: 20px;
		margin-bottom: 15px;
	}
	
	#share_links_container .social_network_link {
		display: inline;
	}
	
	#share_links_container .twitter_link {
		top: 5px;
	}
	
	#logo_dragonslash_mobile {
		width: 100%;
		background-color: #181818;
	}
	
	#logo_dragonslash_mobile a {
		border: 0;
		text-decoration: none;
	}
	
	#logo_dragonslash_mobile img {
		width: 30%;
	}
	
	#logo_dragonslash_mobile p {
		font-family: Arial;
		font-size: 0.8em;
		line-height: 2.25em;
		color: #fffefe;
		background-color: #0d0d0d;
	}
	
	/* 
	 * GENERAL
	 * */
	.text_content {
		padding: 5%;
		width: 90%;
		text-align: center;
	}
	
	.text_content .title {
		font-size: 1.5em;
	}
	
	.text_content p.subtitle/*span.subtitle*/,
	.text_content h3 {
		font-size: 1.25em;
		text-align: justify;
		line-height: 1.5em;
		padding-top: 15px;
		font-family: 'tw_cen_mt_bold';
		text-transform: uppercase;
		color: #f28d01;
	}
	
	.text_content p,
	.text_content ul li {
		font-size: 1em;
		text-align: justify;
		line-height: 1.2em;
		letter-spacing: 0px;
	}
	
	.text_content ul li {
		line-height: 1.6em;
	}
	
	#personnages_container_mobile {
		height: 1224px;
	}
	
	#personnages_container_mobile .text_content {
		top: 70px;
	}
	
	#personnage_parchemin_description_mobile {
		top: 109px;
	}
	
	#personnage_parchemin_description_mobile .description_mobile {
		top: 445px;
	}
}

@media all and (max-width: 375px) and (orientation: portrait) {
	#teaser_container_mobile {
		width: 93%;
		height: 198px;
		top: 0;
		border: 12px solid rgba(25, 25, 25, .5);
	}
	
	#personnages_container_mobile {
		height: 1110px;
	}
	
	#personnages_container_mobile .text_content {
		top: 45px;
	}
	
	#personnage_parchemin_description_mobile {
		top: 6.1%;
	}
	
	#personnage_parchemin_description_mobile .description_mobile {
		top: 395px;
	}
	
	#regles_container_mobile {
		background-size: cover;
	}
	
	#jimmy_said_mobile {
		position: absolute;
		top: 8%;
		left: 5.75%;
		width: 85.5%;
		height: 200px;
	}
	
	#jimmy_said_sentences_mobile {
		height: 200px;
	}
	
	#jimmy_said_sentences_mobile .jimmy_sentence_mobile {
		font-size: 1.1em;
	}
	
	#images_container_mobile {
		top: -180px;
		min-height: 335px;
	}
	
	#social_network_links_mobile {
		position: absolute;
		bottom: -100px;
		width: 100%;
		text-align: center;
		background-color: #0d0d0d;
	}
	
	#images_container_mobile .text_content .title {
		width: 75%;
	}
}

@media all and (max-width: 360px) and (orientation: portrait) {
	#personnage_parchemin_description_mobile {
		top: 7.65%;
	}
	
	#images_gallery_list_mobile {
		display: table;
		border-spacing: 10px;
		width: 91%;
	}
	
	#images_gallery_list_mobile .images_table_row_mobile .images_table_cell_mobile {
		width: 30%;
		height: auto;
	}
}

@media all and (max-width: 320px) and (orientation: portrait) {
	#teaser_container_mobile {
		width: 93%;
		height: 168px;
		border: 12px solid rgba(25, 25, 25, .5);
	}
	
	#personnages_container_mobile {
		height: 942px;
	}
	
	#personnages_container_mobile .text_content {
		top: 30px;
	}
	
	#personnage_parchemin_description_mobile {
		top: 18px;
	}
	
	#personnage_parchemin_description_mobile .description_mobile {
		top: 345px;
	}
	
	#jimmy_said_mobile {
		position: absolute;
		top: 22px;
		left: 19px;
		width: 274px;
		height: 200px;
	}
	
	#jimmy_said_sentences_mobile {
		height: 200px;
	}
	
	#jimmy_said_sentences_mobile .jimmy_sentence_mobile {
		font-size: 1em;
	}
	
	#images_container_mobile {
		top: -290px;
		min-height: 290px;
	}
	
	#social_network_links_mobile {
		position: absolute;
		bottom: 0px;
		width: 100%;
		text-align: center;
		background-color: #0d0d0d;
	}
	
	#images_container_mobile .text_content .title {
		width: 90%;
	}
	
	#images_viewer_mobile {
		height: 100%;
		background-color: #181818;
	}
}

#mobile_language_selector {
	position: absolute;
	top: 0;
	right: 0;
    width: 8%;
    padding: 5%;
}

#mobile_lang_fr_FR {
}

#mobile_lang_en_US {
}

#mobile_language_opener {
	width: 60%;
}

#current_lang_fr_FR img,
#current_lang_en_US img,
#mobile_lang_fr_FR img,
#mobile_lang_en_US img,
#mobile_language_opener img {
	width: 100%;
}

#mobile_langagues_choice {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
    width: 8%;
    padding: 5%;
	padding-top: 2%;
	padding-bottom: 2%;
	background: black;
}