$default-font: 'PT Sans Narrow', Arial, sans-serif;
$regular-font: 'PT Sans Regular', Arial, sans-serif;
$title-font: 'Courgette', Arial, sans-serif;
$alt-font: Arial, sans-serif;
$default-color: #333;
$alt-color: #fff;

@mixin flex($wrap: nowrap, $justify: flex-start, $align-items: stretch, $align-content: stretch, $direction: row) {
	display: -ms-flexbox;
	display: flex;
	flex-wrap: $wrap;
	-ms-flex-pack: $justify;
	justify-content: $justify;
	-ms-flex-align: $align-items;
	align-items: $align-items;
	align-content: $align-content;
	flex-direction: $direction;
	
	@if $direction == row {
		-ms-box-orient: horizontal;
	} @else if $direction == column {
		-ms-box-orient: vertical;
	}
}

@import 'fonts';
.col-main { background: #fff !important; }


html,
body {
	width: 100%;
	min-width: 0;
}

.cms-content {
	width: 100%;
}
#op-teleshoppingetvous {
	
	img{
		display: block;
		width:100%;
		height:auto;
	}
	.teleshopping-and-you {
		font-family: $default-font;

		@media screen and (max-width: 767px) {
			font-size: 2vw;
		}
		@media screen and (min-width: 768px) and (max-width: 1024px) {
			font-size: 7px;
			.articles {
				@include flex(nowrap,flex-start,stretch,stretch,column);
			}
			#emission {
				background: #b3c7df;
			}
		}
		@media screen and (min-width: 1025px) {
			font-size: 10px;
			#emission {
				background: #b3c7df url('/skin/market/rsd/tsh/cms/edito/images/emission_background.jpg') no-repeat 80% top;
				background-size:85%;
			}
		}

		* {
			box-sizing: border-box;
			margin: 0 auto;
			padding: 0;
			font: inherit;
			color: inherit;
			line-height: 1.2;
		}

		/* GLOBAL CLASS */
		.grid {
			max-width: 1000px;
			margin: 0 auto;
		}

		.title {
			font-family: $title-font;
		}

		/* SECTION BY SECTION */
		header {
			padding: 11.2em 0 4em;
			background: url(/skin/market/rsd/tsh/cms/edito/images/banner_background.jpg) no-repeat center center;
			background-size: cover;
			text-align: center;

			h1 {
				margin-bottom: 0;
				padding-top: 0;
				color: $alt-color;
				font-weight: 400;
				@media screen and (max-width: 767px) {
					font-size: 11.2vw;
				}
				@media screen and (min-width: 768px) {
					font-size: 8.4em;
				}
			}

			h2 {
				margin-bottom: 0;
				font-size: 2.5em;
				color: $alt-color;
				font-weight: 400;
			}

			.nav-wrapper {
				margin-top: 4.6em;
			}

			nav {
				transition: all .4s;

				ul {
					@include flex();
					width: 95%;
					max-width: 565px;
					margin: 0 auto;
					padding: 0;
					background-color: rgba(255, 255, 255, .9);
					border-radius: 1em;
					list-style: none;
					transition: all .4s;

					li {
						flex: 1;
						font-size: 2em;
						text-transform: uppercase;

						& + li {
							border-left: 1px solid;
						}

						a {
							display: block;
							padding: .68em 0;

							&:hover {
								color: inherit;
								text-decoration: underline;
							}
						}
					}
				}

				&.fixed {
					position: fixed;
					left: 0;
					top: 0;
					width: 100%;
					background-color: rgba(255, 255, 255, .9);
					box-shadow: 0 0 .8em rgba(0, 0, 0, .5);

					ul {
						background-color: rgba(255, 255, 255, 0);
					}
				}
			}
		}

		#conseils{
			background: #fff;
		}

		#actualite {
			background: #f6f3f1;
		}



		section {
			padding: 4.4em 0;

			.title {
				font-size: 3.8em;
				text-align: center;
			}

			.intro {
				font-family: $alt-font;
				font-size: 1.5em;
				text-align: center;
				padding-bottom: 3.5em;
			}
			.articles {
				@include flex(wrap);
			}
			.article {
				max-width:320px;
				width:100%;
				background: #fff;
				margin-bottom:2em;

				h3 {
					margin: 1em .3em;
					font-size: 2em;
					text-transform:uppercase;
				}
				p {
					margin: 0 .3em 2em .3em;
					font-size: 1.4em;
					font-family: $alt-font;
				}
				a:hover{
					color:#333;
				}
			}
		}

		> img {
			display: block;
			margin: 0 auto;
			max-width: 100%;
			height: auto;
		}
	}

	.subjects {
		font-family: $default-font;

		@media screen and (max-width: 767px) {
			font-size: 2vw;
			.nomob {
				display:none;
			}
			.w60,.w50,.w40 {
				display: block;
				float:left;
				width:100%;
			}
			.pictures {
				@include flex(nowrap,flex-start,stretch,stretch,column);

				img {
					width:100%;
					margin:0 0 1em 0;
				}
			}
			.produit-associe > div,.produits-associes > div  {
				@include flex(nowrap,flex-start,stretch,stretch,column);
				.picture{
					width:100%;
				}
				.main-product{
					width:80%;
					padding:1em 7%;
					margin:0 auto;
					position:relative;
				}
				.btn {
					margin:0 auto;
				}
				h3 {
					text-align:center;
				}
			}
			.video {
				background-color: #000;
				position: relative;
				padding: 0;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				border-radius: 5px;
				padding-bottom: 55vw;
				margin-bottom:3em;
			}
		}
		@media screen and (min-width: 768px) {
			.w60,.w50,.w40 {
				display: block;
				float:left;
			}
			.w60 {
				width:60%;
			}
			.w50 {
				width:50%;
			}
			.w40 {
				width:40%;
				padding:3.2em 1.8em;
			}
			.pictures {
				@include flex(wrap);

				img {
					width:calc(50% - 10px);
					height:auto;
					&:nth-child(even) {
						margin-left:20px;
					}
				}
			}
			.produit-associe > div {
				@include flex(wrap);

				.picture{
					width:50%;
				}
				.main-product{
					width:50%;
					padding: 1em 1% 1em 7%;
				}

				.btn {
					margin:0 auto 0 0;
				}
				.w50 {
					.btn{
						margin:0 auto;
					}
				}
			}
			.produits-associes > div {
				@include flex(wrap);

				.picture{
					width:100%;
				}
				.main-product{
					width:50%;
					padding: 0 1%;
				}

				.btn {
					margin:0 auto 0 0;
				}
				.w50 {
					.btn{
						margin:0 auto;
					}
				}
			}
			.video {
				background-color: #000;
				position: relative;
				padding: 0;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				border-radius: 5px;
				padding-bottom: 360px;
				margin-bottom:3em;
			}
		}
		@media screen and (min-width: 768px) and (max-width: 1024px) {
			font-size: 9px;
		}
		@media screen and (min-width: 1025px) {
			font-size: 10px;
		}

		* {
			box-sizing: border-box;
			margin: 0 auto;
			padding: 0;
			font: inherit;
			color: inherit;
			line-height: 1.2;
		}

		/* GLOBAL CLASS */
		.grid {
			max-width: 1000px;
			margin: 0 auto;
		}

		.back {
			font-size: 1.8em;
			margin-top:2em;

			&:before {
				content:'< ';
				display:inline;
			}
			a:hover {
				color:#333;
			}
		}
		.title {
			font-family: $title-font;
		}

		.subtitle {
			font-family: $alt-font;
			font-size:2em;
			padding-bottom:1.25em;
			display: inline-block;
			width: 100%;


		}
		ul {
			list-style:none;
			padding:0;
			margin:0 0 1.9em 0;
		}

		li {
			font-family: $alt-font;
			font-size:1.5em;

			strong{
				font-weight: bold;
			}
		}
		.articles {
			max-width:830px;
			width:100%;
			margin:3.6em auto 1.6em auto;
			float:none;

			.article {

				&.produit-associe {
					border-top:1px solid #f6f3f1;
					border-bottom:1px solid #f6f3f1;
					margin:6em auto 0 auto;

					h2 {
						font-family: $title-font;
						font-size:3.8em;
						width:100%;
						display:inline-block;
						line-height:1.2;
						margin:1em 0 0 0;
						text-align: center;
						&:after {
							content:'';
							width:116px;
							height:3px;
							background:#fcd135;
							display:block;
							margin:.3em auto 1em auto;
						}
					}

					> div {
						width:100%;
						max-width:600px;
						margin:0 auto;

						.picture{
							border:1px solid #dadada;
						}
						.main-product{
							position:relative;

							h3 {
								font-size:2.4em;
								font-family: $default-font;
								text-transform:uppercase;
								padding:.2em 0 .8em .1em;
							}

							h3.absolute {
								position:absolute;
								top:.3em;
								left:2.6em;
								font-size:2em;
							}
							.btn {
								font-family: $regular-font;
								font-size:1.8em;
								display:block;
								color:#fff;
								text-align:center;
								width: 100%;

								padding:.9em;
								background:#0671b1;
							}
						li {
							font-size:1.7em;
							font-family: $regular-font;
							margin:0 0 1em 0;
							&:before {
								content: '• ';
								font-weight: bold;
								color:#f34343;
							}
						}
						ul {
							margin-bottom:2em;
							width:100%;
						}
					}
				}
			}
				&.produits-associes {
				border-top:1px solid #f6f3f1;
				border-bottom:1px solid #f6f3f1;
				margin:6em auto 0 auto;

				h2 {
					font-family: $title-font;
					font-size:3.8em;
					width:100%;
					display:inline-block;
					line-height:1.2;
					margin:1em 0 0 0;
					text-align: center;
					&:after {
						content:'';
						width:116px;
						height:3px;
						background:#fcd135;
						display:block;
						margin:.3em auto 1em auto;
					}
				}

				> div {
					width:100%;
					max-width:660px;
					margin:0 auto;

					.picture{
						border:1px solid #dadada;
					}
					.main-product{
						position:relative;

						h3 {
							font-size:2.4em;
							font-family: $default-font;
							text-transform:uppercase;
							padding:.2em 0 .8em .1em;
						}
						@media screen and (min-width: 767px) {
							h3.absolute {
								position:absolute;
								top:.3em;
								left:.8em;
								font-size:2em;
							}
						}
						@media screen and (max-width: 767px) {
							h3.absolute {
								position:absolute;
								top:.8em;
								left:1.8em;
								font-size:2em;
							}
						}
						.btn {
							font-family: $regular-font;
							font-size:1.8em;
							display:block;
							color:#fff;
							text-align:center;
							width:90%;
							max-width: 196px;
							padding:.9em;
							background:#0671b1;
							margin-bottom: 1em;
						}
						@media screen and (max-width: 767px) {
							.btn {
								max-width: 220px;
							}
						}
					}
					li {
						font-size:1.7em;
						font-family: $regular-font;
						margin:0 0 1em 0;
						&:before {
							content: '• ';
							font-weight: bold;
							color:#f34343;
						}
					}
					ul {
						margin-bottom:2em;
						width:100%;
					}
				}

			}
			h1 {
				font-size:3.8em;
				width:100%;
				display:inline-block;
				line-height:1.2;
				margin:0;
				padding-top:0;
				&:after {
					content:'';
					width:116px;
					height:3px;
					background:#fcd135;
					display:block;
					margin:.3em 0 1em 0;
				}
			}
			h2 {
				font-size:3em;
				width:100%;
				display:inline-block;
				line-height:1.2;
				margin:1em 0 0 0;
				&:after {
					content:'';
					width:116px;
					height:3px;
					background:#fcd135;
					display:block;
					margin:.3em 0 1em 0;
				}
			}
			p{
				font-family:$alt-font;
				font-size:1.5em;
				margin-bottom:1.7em;
			}
			.picture, .pictures {
				margin:.8em 0 2em 0;
			}
			.picture.w50{
				margin:0 0 5em 0;
			}
			.w50:not(.picture){
				padding-right:2em;	
			}
			}
			.recette-details {
				.number{
					display: inline-block;
					height: 2.1em;
					vertical-align:middle;
					margin-right:3.8em;
					span{
						display: inline-block;
						vertical-align: middle;
						height: 2.1em;
					}
					&:before{
						content: '';
						display: inline-block;
						background: url(/skin/market/rsd/tsh/cms/edito/images/sprite.png) no-repeat top left;
						background-size: 200% auto;
						width: 2em;
						height: 2.1em;
						margin:0 .7em 0 0;
					}
				}
				.time{
					display: inline-block;
					height: 2.1em;
					vertical-align:middle;
					span{
						display: inline-block;
						vertical-align: middle;
						height: 2.1em;
					}
					&:before{
						content: '';
						display: inline-block;
						background: url(/skin/market/rsd/tsh/cms/edito/images/sprite.png) no-repeat top right;
						background-size: 200% auto;
						width: 2em;
						height: 2.1em;
						margin:0 .7em 0 0;
					}
				}
			}
			ul:not(.recette-details) {
				width:50%;
				max-width:350px;
				display: inline-block;
				margin:0 0 3em 0;

				li:first-of-type {
					margin-bottom:1.1em;
				}
			}
		}
	}
}