/* ###   /!\ TWITTER DEBUGS save-after->index.php /!\   ### */

@font-face {
    font-family: 'helvetica_BdOu';
    src: url('../font/Helvetica_Neue_LT_Std/HelveticaNeueLTStd-BdOu.otf');
    src: url('../font/Helvetica_Neue_LT_Std/HelveticaNeueLTStd-BdOu.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CanalBoldIta';
    src: url('../font/CANABI__.TTF');
    src: url('../font/CANABI__.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueLTStd-BdEx';
    src: url('../font/Helvetica_Neue_LT_Std/HelveticaNeueLTStd-BdEx.otf');
    src: url('../font/Helvetica_Neue_LT_Std/HelveticaNeueLTStd-BdEx.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica-BdExO';
    src: url('../font/Helvetica_Neue_LT_Std/HelveticaNeueLTStd-BdExO.otf');
    src: url('../font/Helvetica_Neue_LT_Std/HelveticaNeueLTStd-BdExO.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, p, h1, h2, h3, h4, h5, hr {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: helvetica, sans-serif;
	font-size: 1em;
	background: #FFF;
}

/* ===== SnapWidget ===== */

#bloc-inst {
	position: absolute;
	left:5px;
	right:0px;
	width:auto;
	height:auto;
	z-index: 9;
}

.inst {
	width:100%;
	margin-bottom: 0px;
}

/* ===== SnapWidget ===== */

#banniere {
	position: fixed;
	bottom: -5px;
	width: 100%;
	height: 8%;
	background-image: linear-gradient(#FFF, #DDD); 	/* NEW TV */
	background-image: -webkit-linear-gradient(#FFF, #DDD); 	/* NEW TV */
	background-image: -ms-linear-gradient(#FFF, #DDD); 	/* NEW TV */
	background-image: -o-linear-gradient(#FFF, #DDD); 	/* NEW TV */
}

#content {
	position: absolute;
	top: 110px;
	margin: 0 auto;
	left: 4%;
	right: 4%;
	border-right: 1px solid black;
}

#titre {
	position: absolute;
	top: 0;
	margin: 0 auto;
	left: 4%;
	right: 4%;
	height: 125px;
	max-width: 1178px;
}

#titre img {
	position: absolute;
	bottom: 0px;
	width: 90%;
}

.titre-bis {
	position: absolute;
	bottom: 10px; right: -15px;
	width: 110px;
	height: 102px;
	z-index: 999;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	transform: rotate(10deg);
}

.online {
	position: absolute;
	width: 100%;
	height: 20px;
	bottom: 0;
	background: url(../img/online.gif) no-repeat;
	background-size: 100% auto;
}

.tv-link {
	position: absolute;
	width: 100%;
	height: 75%;
	top: 0;
	background: url(../img/TV1.png) no-repeat;
	background-size: 100% auto;
}

.tv-link:hover {
	background: url(../img/TV2.png) no-repeat;
	background-size: 100% auto;
}


/* ### COLONNE ### */

#col1, #col2, #col2bis, #col3, #col4 {
	position: absolute;
	height: 100%;
	border: 1px solid black;
	background: #FFF;
}

#col1 { width: 28%; }
#col2 { width: 24%; margin-left: 28%; }
#col2bis { width: 52%; top: 300px; }
#col3 { width: 26%; margin-left: 52%; }
#col4 { width: 22%; margin-left: 78%; }


/* ### BLOCS ### */

#bloc1 {
	height: 112px;
	border-bottom: 1px solid black;
	overflow: auto;
}

#bloc2 {
	position: absolute;
	top: 159px;
	height: 140px;
	overflow: auto;
}

#bloc3 {
	width: 100%;
	height: 276px;
}

#bloc3, #bloc4 {
	position: absolute;
	top: 23px;
	overflow: auto;
}

#bloc3bis {
	position: absolute;
	height: 183px;
	width: 100%;
	overflow-x: auto;
}

#bloc5, #bloc7 {
	height: 80px;
}

#bloc6 {
	/*height: 266px;*/ height: 380px;
	overflow-y: auto;
	overflow-x: hidden;
}

#bloc1 p {
	font-size: 12px;
}

p {
	padding: 6px 8px;
	font-size: 11px;
	margin-bottom: 0;
}

a {
	color: #000;
	text-decoration: none;
}

h2 {
	padding: 8px 0 0 8px;
	font-family: 'helvetica_BdOu', helvetica, sans-serif;
	font-weight: 200;
	font-size: 1.4em;
	line-height: 1;
}

h4 {
	font-style: italic;
	padding: 0 8px;
	font-size: 11px;
}

hr {
	margin-left: 6px;
	width: 96%;
	height: 1px;
	background: black;
	border: none;
}

.colonneleft {
	width: 50%;
	float: left;
}
.colonneright {
	width: 50%;
	float: right;
}

/* ### TITRE BLOC ### */

.bloc-titre,
.bloc-titre-twitter {
	width: 100%;
	height: 23px;
	background: #000;
}

.bloc-titre {
	width: 100%;
}

.bloc-titre h1,
.bloc-titre-twitter h1 {
	font-family: 'Helvetica-BdExO', helvetica, sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
	font-size: 18px;
	padding: 3px 0 0 6px;
	color: #FFF;
}

.bloc-titre .picto,
.bloc-titre-twitter .picto {
	margin-left: 6px;
    width: auto;
    height: 14px;
}

/*.bloc-titre #insta:after {
	display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    content: "";
    background: url(../img/logo_insta.jpg) no-repeat 0 0;
    background-size: 100%;
}

.bloc-titre-twitter #twe:after {
	display: inline-block;
    width: 20px;
    height: 14px;
    margin-left: 8px;
    content: "";
	background: url(../img/logo_twitter.jpg) no-repeat 0 0;
	background-size: 100%;
}*/


/* ### BLOC CONGRATS!WHAT? ### */

#bloc1 span {
	font-family: 'CanalBoldIta', helvetica, sans-serif;
}

#lang {
	position: absolute;
	right: 5px;
	outline: none;
}

/* ### BLOC STOCKLISTS! ### */

.pays {
	width: 100%;
	float: left;
}

.colonne-left,
.colonne-right {
	width: 50%;
	float: left;
}

.pays .FR:before,
.pays .EU:before,
.pays .USA:before,
.pays .JAP:before,
.pays .CHI:before { 
	display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: 8px;
    content: "";
}

.pays .FR:before {
    background: url(../img/French.jpg) no-repeat 0 0;
    background-size: 100%;
}
.pays .EU:before {
	background: url(../img/Europe.jpg) no-repeat 0 0;
    background-size: 100%;
}
.pays .USA:before {
	background: url(../img/USA.jpg) no-repeat 0 0;
    background-size: 100%;
}
.pays .JAP:before {
	background: url(../img/Japan.jpg) no-repeat 0 0;
    background-size: 100%;
}
.pays .CHI:before {
	background: url(../img/China.jpg) no-repeat 0 0;
    background-size: 100%;
}


/* ### BLOC CONGRATS!TV ### */

#scroll-video {
	width: 1770px; /* /!\ AJOUTER +354px à chaque nouvelle vidéo /!\ */
	height: 180px;
	overflow-x: auto;
}

.video {
	float: left;
	width: 225px;
	height: 166px;
	margin: 8px 0 0 8px;
}

.video-info {
	float: left;
	width: 115px;
	height: 166px;
	margin: 8px 6px 0 0;
}

.video iframe {
	width: 100%;
	height: 100%;
}


/* ### BLOC INSTAGRAM ### */

#bloc4 {
	background: #000;
}

#bloc4 p {
	padding: 0;
}

#instagram-img img {
	width: 100%;
	border: 1px solid #FFF;
}

#instagram-img {
	/*padding: 0px 10px 6px 10px;*/
	padding: 0px 0px 6px 5px;
}


/* ### BLOC NEWSLETTER! ### */

#suscribe {
	width: 100%;
}

.enter-mail {
	position: absolute;
	margin-top: 6px; left: 6px;
	width: 80%;
	height: 17px;
	border: 1px solid #000;
	outline: none;
}

.send-mail {
	position: absolute;
	margin-top: 6px; right: 7px;
	width: 20%;
	height: 21px;
	color: #FFF;
	background: #000;
	font-size: 14px;
	font-weight: bold;
	border: 1px solid #000;
	cursor: pointer;
	outline: none;
}

#suscribe-img {
	position: absolute;
	left: 6px; right: 7px;
	height: 40px;
	margin-top: 33px;
	border: 1px solid #000;
	padding: 0 5px;
}

#suscribe-img img {
	width: 100%;
	height: 100%;
}


/* ### BLOC E-SHOP! ### */

.shop {
	padding: 6px;
}

.shop img {
	width: 100%;
	border: 1px solid #000;
	margin-bottom: -9px;
}

.shop-info h4 {
	padding-top: 8px;
	padding-left: 0;
	font-family: 'CanalBoldIta', helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 13px;
}

.shop-line {
	float: left;
	width: 100%;
	height: 0px;
}

.shop-info select {
	outline: none;
}

.buybutton {
	width: 85px;
	height: auto;
}

/* ### BLOC PRESS! ### */

/*#bloc7 h4 {
	padding: 6px 5% 0 5%;
	font-family: 'CanalBoldIta', helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 13px;
	text-align: center;
}

#download {
	position: absolute;
	bottom: 7px;
	height: 40px;
	width: 100%;
	text-align: center;
	background: #FFF;
}

.kit-lang-1,
.kit-lang-2 {
	position: absolute;
	height: 38px;
	width: 38px;
	border: 1px solid #000;
	background: #FFF;
	z-index: 1;
}

.kit-lang-1 a,
.kit-lang-2 a {
	font-size: 24px;
	line-height: 40px;
	font-weight: bold;
}

.kit-lang-1 {
	left: 6px;
}

.kit-lang-1:hover,
.kit-lang-1:hover > a,
.kit-lang-2:hover,
.kit-lang-2:hover > a {
	background: #000;
	color: #FFF;
}

.kit-lang-2 {
	right: 7px;
}

.kit-info {
	position: absolute;
	margin: 0 auto;
	padding-top: 3px;
	left: 6px; right: 7px;
	height: 35px;
	border: 1px solid #000;
}

.kit-info a {
	font-size: 18px;
	line-height: 0.1em;
	font-weight: bold;
}*/


/* ### BLOC TWITTER #CONGRATS_MAG ### */

.bloc-titre-twitter {
	width: 23%;
}

#twitter {
	position: absolute;
	top: 617px;
	margin: 0 auto;
	left: 4%;
	right: 4%;
	height: 23px;
	background: #FFF;
	border: 1px solid #000;
	overflow: hidden;
}

#coltweet {
	position: absolute;
	width: 23%;
	border-right: 1px solid black;
}

#tweet {
	position: absolute;
	top: 2px;
	right: 0;
	width: 77%;
	overflow: hidden;
}

#tweet-msg {
	float: left;
	text-transform: uppercase;
	font-size: 15px;
	line-height: 1.2;
	list-style-type: none; 
	margin: 0; 
	margin-top: 1px;
	font-style: italic;
	width: 1500%; /* bugs */
}



/* ### PARTENAIRE ### */

#partenaire {
	position: absolute;
	top: 652px;
	width: 100%;
	height: 20px;
	text-align: center;
	color: #000; 									/* NEW TV */
} #partenaire a { color: #000; } 					/* NEW TV */

#partenaire span {
	margin: 0 3px; 
}

#partenaire a:hover {
	border-bottom: 1px solid #000;
}

#pop-up {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/POPUP-Retina_FLAT_HD.png) no-repeat right bottom;
	-webkit-background-size: contain;
    background-size: contain;
    cursor: pointer;
}

/*#pop-up {
	position: absolute;
	top: 90px;
	width: auto;
	max-width: 1178px;
	height: 552px;
	margin: 0 auto;
	left: 4%;
	right: 4%;
	z-index: 9999;
	background: url(../img/POPUP-Retina_FLAT.png) no-repeat right bottom;
	-webkit-background-size: 83% auto;
    background-size: 83% auto;
    cursor: pointer;
}*/


/* ### END ### */




@media screen and (max-width: 1080px) {
	#titre {height: 120px;}
	#bloc1 {height: 126px;}
	#bloc2 {top: 173px; height: 126px;}
	#bloc3, #bloc4, #bloc5 {top: 23px;}
	#bloc3 {height: 276px;}
	/*#bloc6 {height: 268px;}*/
	.shop-info h4 {font-size: 12px;}
	ul {font-size: .9em;}
}

@media screen and (max-width: 940px) {
	#bloc1 {height: 140px;}
	#bloc2 {top: 187px; height: 112px;}
	#bloc3, #bloc4, #bloc5 {top: 23px;}
	#bloc3 { height: 276px;}
	/*#bloc6 {height: 281px;}*/
	.shop-info h4 {font-size: 10px;}
	ul {font-size: .8em;}
	#partenaire span {margin: 0 5px;}
}

@media screen and (max-width: 810px) {
	#pop-up { 
		position: fixed;
		/*top: 0;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0; 
		background: url(../img/POPUP-Retina_SD.png) no-repeat center bottom;
		-webkit-background-size: 100% auto;
    	background-size: 100% auto;*/
    	background: url(../img/POPUP-Retina_FLAT_SD.png) no-repeat center bottom;
		-webkit-background-size: contain;
    	background-size: contain;
    }
	#content {top: 100px; height: auto; border-right: none;}
	#titre {height: 102px;}
	.titre-bis {bottom: 2px; right: -32px;}
	.bloc-titre,
	.bloc-titre-twitter {height: 30px;}
	.bloc-titre h1,
	.bloc-titre-twitter h1 {font-size: 24px; padding: 4px 0 0 6px;}
	#bloc1 p {font-size: 24px;}
	p {font-size: 1em;}
	h1 {font-size: 2em;}
	h2 {font-size: 2em;}
	h4 {font-size: 2em;}
	#col1, #col2, #col3, #col4 {position: relative; height: auto;}
	#col2bis {position: relative; width: 100%; top: 0; height: auto; overflow-x: auto; z-index: 9990;}
	#col1 { width: 100%;}
	#col2 { width: 100%; margin-left: 0;}
	#col3 { width: 100%; margin-left: 0;}
	#col4 { width: 100%; margin-left: 0;}
	#bloc1 {height: auto;}
	#bloc2 {position: relative;top: 0; height: auto;}
	#bloc3, #bloc4, #bloc5 {position: relative;top: 0; height: auto;}
	#bloc3bis {position: relative; top: 0; height: auto;}
	#scroll-video {width: 100%; height: auto;}
	.video {width: 400px; height: 300px;}
	#instagram-img img {border: none;}
	#bloc4 img {float: left;max-width: 50%;padding-bottom: 5px;}
	#space {width: 100%; height: 30px;}
	#twitter {display: none;}
	.shop-info h4 {font-size: 2.4em;}
	.shop-info input, .shop-info select {zoom: 2;}
	ul {font-size: 1em;}
	#partenaire {display: none;}
	#bloc5 {height: 200px;}
	#bloc7 {height: 220px;}
	#bloc6{height: auto;}
	.enter-mail {height: 60px;font-size: 3em;}
	.send-mail {height: 64px;font-size: 3em;}
	#suscribe-img {margin-top: 74px; height: 119px;}
	#bloc7 h4 {font-size: 2.5em;}
}

@media screen and (min-width: 810px) {
	#contenaire {
		position: absolute;
		top: 0; bottom: 0;
		margin: auto 0;
		width: 100%;
		max-height: 700px;
	}
	#content {overflow: hidden; height: 507px; max-width: 1178px;}
	#bloc2 {bottom: 0;}
	#bloc3, #bloc4, #bloc5 {bottom: 0;}
	#twitter {max-width: 1177px;}
}

@media screen and (min-width: 979px) and (max-width: 980px) {
	#pop-up {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0; 
		background: url(../img/POPUP-Retina_FLAT_SD.png) no-repeat center bottom;
		-webkit-background-size: 100% auto;
    	background-size: 100% auto;
    }
	#content {top: 100px;height: auto; zoom: 1.5;}
	#titre {height: 145px;}
	.titre-bis {bottom: 2px; right: -32px;}
	.bloc-titre,
	.bloc-titre-twitter {height: 30px;}
	.bloc-titre h1,
	.bloc-titre-twitter h1 {font-size: 24px; padding: 4px 0 0 6px;}
	#bloc1 p {font-size: 24px;}
	p {font-size: 1em;}
	h1 {font-size: 2em;}
	h2 {font-size: 2em;}
	h4 {font-size: 2em;}
	#col1, #col2, #col3, #col4 {position: relative; height: auto;}
	#col2bis {position: relative; width: 100%; top: 0; height: auto; overflow-x: auto; z-index: 9999;}
	#col1 { width: 100%;}
	#col2 { width: 100%; margin-left: 0;}
	#col3 { width: 100%; margin-left: 0;}
	#col4 { width: 100%; margin-left: 0;}
	#bloc1 {height: auto;}
	#bloc2 {position: relative;top: 0; height: auto;}
	#bloc3, #bloc4, #bloc5 {position: relative;top: 0; height: auto;}
	#bloc3bis {position: relative; top: 0; height: auto;}
	#scroll-video {width: 100%; height: auto;}
	.video {width: 400px; height: 300px;}
	#instagram-img img {border: none;}
	#bloc4 img {float: left;max-width: 50%;padding-bottom: 5px;}
	#space {width: 100%; height: 30px;}
	#twitter {display: none;}
	.shop-info h4 {font-size: 2.4em;}
	.shop-info input, .shop-info select {zoom: 2;}
	ul {font-size: 1em;}
	#partenaire {display: none;}
	#bloc5 {height: 200px;}
	#bloc7 {height: 220px;}
	#bloc6{height: auto;}
	.enter-mail {height: 60px;font-size: 3em;}
	.send-mail {height: 64px;font-size: 3em;}
	#suscribe-img {margin-top: 74px; height: 119px;}
	#bloc7 h4 {font-size: 38px;}
}