/* desktop (default grid) */
@media screen and (min-width: 1024px) and (max-width: 1280px){

}



/* TABLET LANDSCAPE */
@media screen and (orientation:landscape) and (min-width: 768px) and (max-width: 1024px){

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ PARTIE PRINCIPALE                                                                         ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#isMobile {
		display: block !important;
	}

	#bgMobile {
		display: block !important;
		position: fixed; 
		top: 0; 
		right: 0; 
		min-width: 70%;
		min-height: 100%;
	}

	html {
		/*background-position: right;*/
	}

	footer a {
		font-size: 10px;
	}

	.gui .mainLogo {
		max-width: 100%;
		height: auto;
	}
	
	.gui .mainLogo img {
		width: 65%;
	}

	.gui .sticker img {
		width: 65%;
	}

	.gui nav {
		display: none;
	}

	.gui .getDown {
		display: none !important;
	}


	section .container .etape {
		padding-left: 40px;
	}

	section .container .etape h2 .num {
		font-size: 8vw;
		text-shadow: 0 0 1px #000000;
		line-height: 20%;
	}

	section .container .etape h2 .vrb {
		font-size: 6.5vw;
		text-shadow: 0 0 1px #000000;
	}

	section .container .etape .txt {
		font-size: 4vw;
		text-shadow: 0 0 1px #000000;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ PREMIERE SECTION - 1| JE DENONCE                                                          ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#denoncer {
		position: relative;
	}

	#denoncer .container {
		position: absolute;
		bottom: 5%;
		left: 5%;
		width: 85%;
		height: 65%;
		margin: 0 auto;
	}

	#denoncer .container .content {
		display: block;
		margin: 15px 0 0 0;
	}

	#denoncer .container .content .left {
		width: 65%;
	}

	#denoncer .container .content .left .player {
		height: 278px;
	}

	#denoncer .container .content .left .player iframe {
		width: 95%;
		height: 95%;
	}

	#denoncer .container .content .left .bouton {
		height: 20px;
		font-size: 1.5vw;
		line-height: 26px;
		margin: 5px 0 0 0;
	}

	#denoncer .container .content .rght {
		width: 35%;
	}

	#denoncer .container .content .rght .partage {
		position: relative;
		width: auto;
		height: 200px;
		margin: 78px 0 0 0;
	}

	#denoncer .container .content .rght .partage::before {
		top: -75px;
		width: 90px;
		height: 70px;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	}

	#denoncer .container .content .rght .partage h3 {
		font-size: 2.5vw;
		padding: 15px;
	}

	#denoncer .container .content .rght .partage ul {
		display: table;
		width: 100%;
		height: 70px;
		margin: 0;
	}

	#denoncer .container .content .rght .partage ul li {
		display: table-cell;
		width: 33.33333%;
		height: 100%;
	}

	#denoncer .container .content .rght .partage ul li a {
		height: 100%;
	}

	#denoncer .container .content .rght .partage ul li a img {
		padding: 15px 0 5px 0;
		width: 30%;
	}

	#denoncer .container .content .rght .partage ul li a span {
		font-size: 1.5vw;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ DEUXIEME SECTION - 2| J'AGIS                                                              ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#agir {
		position: relative;
	}

	#agir .container {
		bottom: 0px;
	}

	#agir .container .content {
		margin: 10px 0 0 0;
	}

	#agir .container .content::before {
		content: '';
		position: absolute;
		top: -56px;
		left: -66px;
		width: 51px;
		height: 129px;
		background: url(../images/agir/arrow.png) no-repeat center;
	}

	#agir .container .content ul {
		display: table;
		margin: 0 auto;
		border-spacing: 12px;
		border-collapse: separate;
	}

	#agir .container .content ul li {
		position: relative;
		display: table-cell;
		width: 242px;
		height: 100px;
		vertical-align: middle;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		background: #D10024;
	}

	#agir .container .content ul li .shape {
		position: relative;
	}

	#agir .container .content ul li .shape img {
		display: block;
		margin: 0 auto;
	}

	#agir .container .content ul li .shape span {
		display: block;
		font-family: 'MyriadPro-Bold';
		font-size: 24px;
		color: #FFFFFF;
		text-transform: uppercase;
		text-align: center;
		padding: 12px 0 0 0;
	}

	#agir .container .content ul li .shape .trig {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	#agir .container .content p {
		font-family: 'Arial';
		font-size: 19px;
		line-height: 23px;
		color: #1C181C;
		padding: 0px 40px 17px 40px;
	}

	#agir .container .content p span {
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		color: inherit;
	}

	#agir .container .content p strong {
		display: block;
		font-weight: bold;
		line-height: 37px;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ TROISIEME SECTION - 3| J'EXPRIME                                                          ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#exprimer {
		padding-bottom: 30px;
	}

	#exprimer .container {
		bottom: 20px;
		left: 5%;
		width: 90%;
		height: 75%;
	}

	#exprimer .container .content {
		margin: 5px 0 0 0;
	}

	#exprimer .container .content p {
		font-family: 'Arial';
		font-size: 19px;
		font-weight: bold;
		line-height: 23px;
		color: #1C181C;
		text-align: left;
		padding: 19px 150px 16px 23px;

		width: 75%;
		font-size: 1.25vw;
		line-height: initial;
		padding: 15px 0 0 15px;

	}

	#exprimer .container .content .stickers {
		padding: 0;
	}

	#exprimer .container .content .stickers ul {
		display: table;
		border-spacing: 8px;
		border-collapse: separate;
		margin: 0 0 -4px 0;
	}

	#exprimer .container .content .stickers ul li {
		display: inline-block;
		padding: 10px;
	}

	#exprimer .container .content .stickers ul li a {
		max-width: 100%;
		height: auto;
	}

	#exprimer .container .content .stickers ul li a img {
		display: block;
		width: 85%;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ ELEMENTS DE CAMPAGNE DANS UNE POPIN                                                       ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .elem .banAudio {
		width: 65%;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .jukeBox {
		bottom: 30%;
	}

}

/* TABLET PORTRAIT */
@media screen and (orientation:portrait) and (min-width: 480px) and (max-width: 768px){

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ PARTIE PRINCIPALE                                                                         ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#isMobile {
		display: block !important;
	}

	#bgMobile {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: block;
		max-width: 100%;
		height: auto;
	}
	
	#bgMobile img {
		width: 100%;
	}
	
	html {
		background-position: right;
	}

	footer a {
		padding: 15px 0 0 15px;
	}

	.gui .mainLogo {
		max-width: auto;
		height: auto;
	}

	.gui .mainLogo img {
		width: 75%;
	}

	.gui nav {
		display: none;
	}

	.gui .getDown {
		display: none;
	}

	section {
		height: auto;
		min-height: initial;
		margin: 0;
		padding: 0;
	}

	section .container .etape {
		padding-left: 90px;
	}

	section .container .etape h2 .num {
		font-size: 13vw;
		text-shadow: 0 0 1px #000000;
		line-height: 20%;
	}

	section .container .etape h2 .vrb {
		font-size: 12vw;
		text-shadow: 0 0 1px #000000;
	}

	section .container .etape .txt {
		font-size: 5vw;
		text-shadow: 0 0 1px #000000;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ PREMIERE SECTION - 1| JE DENONCE                                                          ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#denoncer {
		position: relative;
	}

	#denoncer .container {
		position: initial;
		bottom: auto;
		left: auto;
		width: 100%;
		height: auto;
		margin: 200px 0 0 0;
	}

	#denoncer .container .content .left {
		position: relative;
		float: none;
		width: 90%;
		margin: 0 auto;
		z-index: 10;
	}

	#denoncer .container .content .left .player {
		width: 100%;
		height: 420px;
		padding: 15px;
	}

	#denoncer .container .content .left .player iframe {
		width: 100%;
		height: 100%;
	}

	#denoncer .container .content .left .bouton {
		display: none !important;
	}


	#denoncer .container .content .rght {
		float: none;
		width: 92.5%;
		margin: 0 auto;
	}

	#denoncer .container .content .rght .partage {
		position: relative;
		top: -15px;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0 0 15px 0;
		z-index: 5;
	}

	#denoncer .container .content .rght .partage::before {
		display: none;
	}

	#denoncer .container .content .rght .partage h3 {
		font-size: 4vw;
		padding: 25px 15px 15px 15px;
		text-align: center;
	}

	#denoncer .container .content .rght .partage ul {
		margin: 0 auto;
	}

	#denoncer .container .content .bouton {
		display: block !important;
		width: 92.5%;
		height: 38px;
		font-family: 'MyriadPro-Bold';
		font-size: 15px;
		color: #FFFFFF;
		line-height: 44px;
		text-transform: uppercase;
		text-align: center;
		padding: 0 47px;
		margin: 0 auto;
		cursor: pointer;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		background: #565656;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ DEUXIEME SECTION - 2| J'AGIS                                                              ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#agir {
		position: relative;
		margin-top: 50px;
	}

	#agir .container {
		position: relative;
		bottom: auto;
		left: auto;
		width: 100%;
		height: auto;
	}

	#agir .container .content {
		width: 92.5%;
		margin: 30px auto;
		padding: 15px;
	}

	#agir .container .content::before {
		display: none;
		content: '';
		position: absolute;
		top: -56px;
		left: -66px;
		width: 51px;
		height: 129px;
		background: url(../images/agir/arrow.png) no-repeat center;
	}

	#agir .container .content ul {
		width: 100%;
	}
	
	#agir .container .content ul li {
		width: 33.3333%;
	}

	#agir .container .content ul li .shape span {
		font-size: 3vw;
	}

	#agir .container .content p {
		font-size: 3vw;
		line-height: initial;
		padding: 15px;
	}

	#agir .container .content p strong {
		line-height: initial;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ TROISIEME SECTION - 3| J'EXPRIME                                                          ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#exprimer {
		position: relative;
		padding-bottom: 30px;
	}

	#exprimer .container {
		position: relative;
		bottom: auto;
		left: auto;
		width: 100%;
		height: auto;
	}

	#exprimer .container .content {
		position: relative;
		display: block;
		text-align: center;
		background: #FFFFFF;

		width: 92.5%;
		margin: 25px auto;
	}

	#exprimer .container .content p {
		width: 65%;
		font-size: 2vw;
		line-height: initial;
		padding: 15px 0 0 15px;
	}

	#exprimer .container .content .stickers {
		padding: 15px 0 0 0;
	}

	#exprimer .container .content .stickers ul {
		display: block;
	}

	#exprimer .container .content .stickers ul li {
		display: inline-block;
		width: 47.5%;
		padding: 10px;
	}


	

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ ELEMENTS DE CAMPAGNE DANS UNE POPIN                                                       ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#elements .elemsContent .elemsTable .elemsCell .elemsPanel {
		max-width: 750px;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .elem .banAudio {
		width: 70%;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .jukeBox {
		bottom: 30%;
	}

}



/* PHONE LANDSCAPE & SMALLER */
@media screen and (orientation:landscape) and (max-width: 720px){

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ PARTIE PRINCIPALE                                                                         ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#isMobile {
		display: block !important;
	}

	footer a {
		font-size: 10px;
	}

	.gui .mainLogo {
		max-width: 100%;
		height: auto;
	}
	
	.gui .mainLogo img {
		width: 35%;
	}

	.gui .sticker img {
		width: 65%;
	}

	.gui nav, 
	.gui .social, 
	.gui .getDown {
		display: none !important;
	}

	section {
		height: auto;
		min-height: initial;
		margin: 0;
		padding: 0;
	}

	section .container .etape {
		padding-left: 40px;
	}

	section .container .etape h2 .num {
		font-size: 8vw;
		text-shadow: 0 0 1px #000000;
		line-height: 20%;
	}

	section .container .etape h2 .vrb {
		font-size: 6.5vw;
		text-shadow: 0 0 1px #000000;
	}

	section .container .etape .txt {
		font-size: 4.5vw;
		text-shadow: 0 0 1px #000000;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ PREMIERE SECTION - 1| JE DENONCE                                                          ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#denoncer {
		position: relative;
		top: 70px;
	}

	#denoncer .container {
		position: initial;
		bottom: auto;
		left: 5%;
		width: 85%;
		height: 65%;
		margin: 0 auto;
	}

	#denoncer .container .content {
		display: block;
		margin: -5px 0 0 0;
	}

	#denoncer .container .content .left {
		width: 65%;
	}

	#denoncer .container .content .left .player {
		height: 188px;
		padding: 10px 0 0 0;
	}

	#denoncer .container .content .left .player iframe {
		width: 95%;
		height: 95%;
	}

	#denoncer .container .content .left .bouton {
		height: 20px;
		font-size: 1.5vw;
		line-height: 26px;
		margin: 5px 0 0 0;
	}

	#denoncer .container .content .rght {
		width: 35%;
	}

	#denoncer .container .content .rght .partage {
		position: relative;
		width: auto;
		height: 110px;
		margin: 78px 0 0 0;
	}

	#denoncer .container .content .rght .partage::before {
		top: -75px;
		width: 90px;
		height: 70px;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	}

	#denoncer .container .content .rght .partage h3 {
		font-size: 2.5vw;
		padding: 15px 15px 0 15px;
	}

	#denoncer .container .content .rght .partage ul {
		display: table;
		width: 100%;
		height: 40px;
		margin: 0;
	}

	#denoncer .container .content .rght .partage ul li {
		display: table-cell;
		width: 33.33333%;
		height: 100%;
	}

	#denoncer .container .content .rght .partage ul li a {
		height: 100%;
	}

	#denoncer .container .content .rght .partage ul li a img {
		padding: 5px 0 0 0;
		width: 30%;
	}

	#denoncer .container .content .rght .partage ul li a span {
		font-size: 1vw;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ DEUXIEME SECTION - 2| J'AGIS                                                              ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#agir {
		position: relative;
		margin-top: 100px;
	}

	#agir .container {
		position: initial;
		left: auto;
		bottom: auto;
		width: 90%;
		height: auto;
		margin: 0 auto;
	}

	#agir .container .content {
		margin: 10px 0 0 0;
	}

	#agir .container .content::before {
		content: '';
		position: absolute;
		top: -56px;
		left: -66px;
		width: 51px;
		height: 129px;
		background: url(../images/agir/arrow.png) no-repeat center;
	}

	#agir .container .content ul {
		display: table;
		width: 95%;
		margin: 0 auto;
		border-spacing: 12px;
		border-collapse: separate;
	}

	#agir .container .content ul li {
		position: relative;
		height: 100px;
		vertical-align: middle;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		background: #D10024;
		

		display: block;
		width: 70%;
		margin: 0 auto 8px auto;
	}

	#agir .container .content ul li .shape {
		position: relative;
		top: 6vw;
	}

	#agir .container .content ul li .shape img {
		display: block;
		margin: 0 auto;
	}

	#agir .container .content ul li .shape span {
		display: block;
		font-family: 'MyriadPro-Bold';
		font-size: 24px;
		color: #FFFFFF;
		text-transform: uppercase;
		text-align: center;
		padding: 12px 0 0 0;
	}

	#agir .container .content ul li .shape .trig {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	#agir .container .content p {
		font-family: 'Arial';
		font-size: 4vw;
		line-height: initial;
		color: #1C181C;
		padding: 0px 40px 17px 40px;
	}

	#agir .container .content p span {
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		color: inherit;
	}

	#agir .container .content p strong {
		display: block;
		font-weight: bold;
		line-height: initial;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ TROISIEME SECTION - 3| J'EXPRIME                                                          ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#exprimer {
		top: 100px;
	}

	#exprimer .container {
		bottom: auto;
		left: 5%;
		width: 90%;
		height: 65%;
	}

	#exprimer .container .content {
		margin: 5px 0 0 0;
	}

	#exprimer .container .content p {
		font-family: 'Arial';
		font-size: 19px;
		font-weight: bold;
		line-height: 23px;
		color: #1C181C;
		text-align: left;
		padding: 19px 150px 16px 23px;

		width: 95%;
		font-size: 3.25vw;
		line-height: initial;
		padding: 10px 10px 0 10px;

	}
	
	#exprimer .container .content .social {
		display: none;
	}

	#exprimer .container .content .stickers {
		padding: 0;
	}

	#exprimer .container .content .stickers ul {
		display: table;
		border-spacing: 8px;
		border-collapse: separate;
		margin: 0 0 -4px 0;
	}

	#exprimer .container .content .stickers ul li {
		display: inline-block;
		padding: 10px;
		width: 50%;
	}

	#exprimer .container .content .stickers ul li a {

	}

	#exprimer .container .content .stickers ul li a img {
		display: block;
		max-width: 100%;
		height: auto;
	}


	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ PARTAGE SANS POPUP DES VISUELS DETOURNÉS                                                  ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#sharing {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
	}

	#sharing .shareOverlay {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.6);
	}

	#sharing .shareContent {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	#sharing .shareContent .shareTable {
		display: table;
		width: 100%;
		height: 100%;
	}

	#sharing .shareContent .shareTable .shareCell {
		display: table-cell;
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel {
		position: relative;
		width: 95%;
		max-width: 900px;
		height: 45%;
		min-height: 560px;
		max-height: 630px;
		margin: 0 auto;
		background: #FFFFFF;
	}

	#sharing .shareContent .shareTable .shareCell .shareClose {
		position: absolute;
		top: 10px;
		right: 10px;
		display: block;
		width: 16px;
		height: 16px;
		background: url(../images/template/close.svg) no-repeat center;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer {
		width: 100%;
		max-width: 500px;
		text-align: center;
		margin: 0 auto;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer figure {
		max-width: 100%;
		height: auto;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer figure img {
		max-width: 150px;
		padding: 10px 0;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer figure figcaption {
		font-family: 'Arial';
		font-size: 1.75vw;
		line-height: initial;
		color: #0A1421;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer figure figcaption a {
		font-family: inherit;
		font-size: inherit;
		color: #1A6BD4;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing {
		margin: 10px auto 0 auto;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing p {
		font-family: 'MyriadPro-Bold';
		font-size: 3vw;
		color: #000000;
		text-transform: uppercase;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul {
		display: table;
		width: 80%;
		margin: 0 auto;
		border-spacing: 8px;
		border-collapse: separate;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li {
		position: relative;
		display: table-cell;
		width: 33%;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton {
		text-align: center;
		padding: 10px 0;
		-webkit-border-radius: 4px;
		border-radius: 4px;
	}
	
	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton.facebook {
		background: #5573B0;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton.twitter {
		background: #51C1E9;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton.google {
		background: #B71414;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton img {
		display: block;
		margin: 0 auto;
		width: 30%;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton span {
		display: none;
		font-family: 'MyriadPro-Bold';
		font-size: 15px;
		color: #FFFFFF;
		text-transform: uppercase;
		margin: 16px 0 0 0;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .trig {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}


	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ ELEMENTS DE CAMPAGNE DANS UNE POPIN                                                       ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#elements .elemsContent .elemsTable .elemsCell .elemsPanel {
		position: relative;
		width: 95%;
		height: 45%;
		margin: 0 auto;
		overflow: hidden;
		background: #FFFFFF;



		max-width: 450px;
		min-height: 200px;
		max-height: 200px;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide {
		padding: 0 0 80px 0;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .elem iframe {
		height: 32%;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .image {
		width: 50%;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .elem .banAudio {
		position: relative;
		top: -65px;
		width: 55%;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .txtAudio {
		position: relative;
		z-index: 1200;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .jukeBox {
		bottom: auto;
		top: 105px;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .jukeBox .play {
		display: block;
		width: 32px;
		height: 32px;
		margin: 0 auto;
		margin-bottom: 50px;
		background: url(../images/template/command-play.png) no-repeat center;
		
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .jukeBox .stop {
		display: block;
		width: 32px;
		height: 32px;
		margin: 0 auto;
		background: url(../images/template/command-stop.png) no-repeat center;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .download {
		display: none;
	}

	.owl-prev {
		top: 48px;
	}

	.owl-next {
		top: 48px;
	}


}



/* PHONE PORTRAIT & SMALLER */
@media screen and (orientation:portrait) and (max-width: 480px){

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ PARTIE PRINCIPALE                                                                         ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#isMobile {
		display: block !important;
	}

	html {
		background-position: right;
	}

	footer a {
		padding: 15px 0 0 15px;
	}

	.gui .mainLogo {
		max-width: auto;
		height: auto;
	}

	.gui .mainLogo img {
		width: 35%;
	}

	.gui .sticker {
		left: 80px;
		width: 85%;
	}

	.gui nav, 
	.gui .social, 
	.gui .getDown {
		display: none;
	}

	section {
		height: auto;
		min-height: initial;
		margin: 0;
		padding: 0;
	}

	section .container .etape {
		padding-left: 40px;
	}

	section .container .etape h2 .num {
		font-size: 13vw;
		text-shadow: 0 0 1px #000000;
		line-height: 20%;
	}

	section .container .etape h2 .vrb {
		font-size: 12vw;
		text-shadow: 0 0 1px #000000;
	}

	section .container .etape .txt {
		font-size: 5vw;
		text-shadow: 0 0 1px #000000;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ PREMIERE SECTION - 1| JE DENONCE                                                          ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#denoncer {
		position: relative;
	}

	#denoncer .container {
		position: initial;
		bottom: auto;
		left: auto;
		width: 100%;
		height: auto;
		margin: 100px 0 0 0;
	}

	#denoncer .container .content {
		margin: 0;
	}

	#denoncer .container .content .left {
		position: relative;
		float: none;
		width: 90%;
		margin: 0 auto;
		z-index: 10;
	}

	#denoncer .container .content .left .player {
		width: 100%;
		height: 220px;
		padding: 15px;
	}

	#denoncer .container .content .left .player iframe {
		width: 100%;
		height: 100%;
	}

	#denoncer .container .content .left .bouton {
		display: none !important;
	}


	#denoncer .container .content .rght {
		float: none;
		width: 92.5%;
		margin: 0 auto;
	}

	#denoncer .container .content .rght .partage {
		position: relative;
		top: -15px;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0 0 15px 0;
		z-index: 5;
	}

	#denoncer .container .content .rght .partage::before {
		display: none;
	}

	#denoncer .container .content .rght .partage h3 {
		font-size: 4vw;
		padding: 25px 15px 15px 15px;
		text-align: center;
	}

	#denoncer .container .content .rght .partage ul {
		margin: 0 auto;
	}

	#denoncer .container .content .bouton {
		display: block !important;
		width: 92.5%;
		height: 38px;
		font-family: 'MyriadPro-Bold';
		font-size: 4vw;
		color: #FFFFFF;
		line-height: 44px;
		text-transform: uppercase;
		text-align: center;
		padding: 0 7px;
		margin: 0 auto;
		cursor: pointer;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		background: #565656;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ DEUXIEME SECTION - 2| J'AGIS                                                              ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#agir {
		position: relative;
		margin-top: 50px;
	}

	#agir .container {
		position: relative;
		bottom: auto;
		left: auto;
		width: 100%;
		height: auto;
	}

	#agir .container .content {
		width: 92.5%;
		margin: 0 auto 50px auto;
		padding: 15px;
	}

	#agir .container .content::before {
		display: none;
		content: '';
		position: absolute;
		top: -56px;
		left: -66px;
		width: 51px;
		height: 129px;
		background: url(../images/agir/arrow.png) no-repeat center;
	}

	#agir .container .content ul {
		width: 100%;
	}
	
	#agir .container .content ul li {
		display: inline-block;
		width: 100%;
		margin-bottom: 8px;
	}

	#agir .container .content ul li .shape {
		top: 8vw;
	}

	#agir .container .content ul li .shape span {
		font-size: 7vw;
	}

	#agir .container .content p {
		font-size: 4vw;
		line-height: initial;
		padding: 15px;
	}

	#agir .container .content p strong {
		line-height: initial;
	}

	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ TROISIEME SECTION - 3| J'EXPRIME                                                          ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#exprimer {
		position: relative;
	}

	#exprimer .container {
		position: relative;
		bottom: auto;
		left: auto;
		width: 100%;
		height: auto;
	}

	#exprimer .container .content {
		position: relative;
		display: block;
		text-align: center;
		background: #FFFFFF;

		width: 92.5%;
		margin: 0px auto 25px auto;
	}

	#exprimer .container .content .social {
		display: none;
	}


	#exprimer .container .content p {
		width: 100%;
		font-size: 3.5vw;
		line-height: initial;
		padding: 15px 15px 0 15px;
	}

	#exprimer .container .content .stickers {
		padding: 0;
	}

	#exprimer .container .content .stickers ul {
		display: block;
	}

	#exprimer .container .content .stickers ul li {
		display: inline-block;
		width: 100%;
		padding: 4px 10px 4px 10px;
	}


	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ PARTAGE SANS POPUP DES VISUELS DETOURNÉS                                                  ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#sharing {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
	}

	#sharing .shareOverlay {
		width: 90%;
		height: 75%;
		background: rgba(0,0,0,.6);
	}

	#sharing .shareContent {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	#sharing .shareContent .shareTable {
		display: table;
		width: 100%;
		height: 100%;
	}

	#sharing .shareContent .shareTable .shareCell {
		display: table-cell;
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel {
		position: relative;
		width: 95%;
		max-width: 900px;
		height: 45%;
		min-height: 360px;
		max-height: 600px;
		margin: 0 auto;
		background: #FFFFFF;
	}

	#sharing .shareContent .shareTable .shareCell .shareClose {
		position: absolute;
		top: 10px;
		right: 10px;
		display: block;
		width: 16px;
		height: 16px;
		text-decoration: none;
		background: url(../images/template/close.svg) no-repeat center;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer {
		width: 100%;
		max-width: 500px;
		text-align: center;
		margin: 0 auto;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer figure img {
		max-width: 95%;
		padding: 30px 0 5px 0;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer figure figcaption {
		font-size: 4vw;
		line-height: initial;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer figure figcaption a {
		font-family: inherit;
		font-size: inherit;
		color: #1A6BD4;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing {
		margin: 5px auto 0 auto;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing p {
		font-size: 4.8vw;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul {
		display: table;
		margin: 0 auto;
		border-spacing: 8px;
		border-collapse: separate;
		

		width: 100%;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li {
		position: relative;
		display: table-cell;
		
		width: 33.33333%;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton {
		text-align: center;
		padding: 10px 0;
		-webkit-border-radius: 4px;
		border-radius: 4px;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton.facebook {
		background: #5573B0;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton.twitter {
		background: #51C1E9;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton.google {
		background: #B71414;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton img {
		display: block;
		margin: 0 auto;
		width: 35%;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .bouton span {
		display: block;
		font-family: 'MyriadPro-Bold';
		font-size: 15px;
		color: #FFFFFF;
		text-transform: uppercase;
		margin: 6px 0 0 0;
	}

	#sharing .shareContent .shareTable .shareCell .sharePanel .shareContainer .sharing ul li .trig {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}


	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ MENTIONS LEGALES DANS UNE POPIN                                                           ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#legales .legalContent .legalTable .legalCell .legalPanel {
		max-width: 300px;
		min-height: 350px;
		max-height: 350px;
	}


	/*********************************************************************************************
	 ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
	 ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
	 ║ ELEMENTS DE CAMPAGNE DANS UNE POPIN                                                       ║
	 ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
	**********************************************************************************************/
	#elements .elemsContent .elemsTable .elemsCell .elemsPanel {
		max-width: 300px;
		min-height: 350px;
		max-height: 350px;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .image {
		padding-top: 50px;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .jukeBox {
		bottom: 60%;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .download {
		display: none;
	}

	#elements .elemsContent .elemsTable .elemsCell .elemsPanel .slider .slide .download a .dload {
		display: none;
	}

	.owl-prev {
		top: 128px;
	}

	.owl-next {
		top: 128px;
	}



}