/* CSS Document */

@media only screen and (max-width: 320px) {
	
	
	.home-link {
		display:inline-block; position:relative; padding-bottom: 20px; margin-top:20px; margin-bottom:20px;
		font-family: 'Pathway Gothic One',sans-serif; font-size:18pt; color:#F85241; text-transform: uppercase;
		cursor:pointer; z-index: 2; 
		left:50%;
		transform: translateX(-50%); 
	}

	.home-link:before{
		content: "";
		position: absolute;
		width: 50%;
		height: 1px;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #F85241;
	}

	
	/* ============================ les artisans du gout ================================= */
	#les_artisans_du_gout h1 {
		position:absolute;
		top:120px;
		left:20px;
		color:#fff;
		z-index: 3;
		line-height: 90pt;
		font-size:70pt;
	}
	
	#les_artisans_du_gout .sub-titre2 {
		display:none;
	}

	/* ============================ à la une ================================= */


	
	/* ============================ teaser ================================= */
	#teaser {
		position:relative; width:300px; background-image: url('/images/halles_plaza_montpellier.jpg'); 
		height:600px; padding:10px;
		margin-top:20px; 
	}
	#teaser h1 {
		color:#fff; font-size:42pt; text-align: center; padding-top:30px;
	}
	#teaser div.sub-text {
		color:#fff; 
	}
	
	#teaser div.sub-1 {
		position:absolute;
		top: 200px;
		left: 0;
		width:160px;
		
	}
	#teaser div.sub-2 {
		position: absolute;
		top: 200px;
		left: 160px;
		width:160px;
	}
	#teaser div.sub-3 {
		position:absolute;
		top: 260px;
		left: 0;
	}
	#teaser div.sub-1,#teaser div.sub-2,#teaser div.sub-3, #teaser div.sub-1 span,#teaser div.sub-2 span,#teaser div.sub-3 span {
		font-size:14pt; text-align: center;
	}
	
	
	#teaser div.sub-baseline {
		text-align: center;
		color: #fff;
		position: absolute;
		top: 350px;
		left: 10px;
		width: 270px;
	}
	#teaser .sub-link {
		left: 550px;
		color:#FAC400 !important;
		height: 40px;
		top: 300px;
		margin-bottom: 70px;
		opacity: 0;
	}
	#teaser .sub-link.visible {
		opacity: 1; transition: all 1s ease-out;
		left:150px;
	}
	#teaser .sub-link:before {
		 border-bottom: 1px solid #FAC400;
	}
	
	
	
	/* ============================ les artisans ================================= */
	
	#artisans h1 { display:none; }
	#artisans h1.mobile { display:block; margin-top:20px; }
	
	#artisans .sub-imgs{ position:relative; width:320px; z-index: 3; margin-top:20px; margin-bottom:100px; height:380px; }
	#artisans .sub-img { position:relative; width:300px; height:387px; margin-right: 20px; float: left;	}
	
	#artisans .sub-prev { position:absolute; left:0; top:400px; cursor: pointer; }
	#artisans .sub-next{ position:absolute; right:20px; top:400px; cursor: pointer; }
	#artisans .sub-prev.slick-disabled, #artisans .sub-next.slick-disabled { opacity: .5; cursor:default; }

	
	
	#artisans .sub-img .sub-infos { position:absolute; top:0; left:0; width:100%; height:100%; text-align: center; display: block; cursor:pointer; }
	
	
	
	#artisans .sub-img .sub-picto { position:absolute; width:70px; height:70px; left:115px; top:220px; text-align: center; }
	#artisans .sub-img .sub-picto img { 
		max-width:100%; max-height:100%;
		-webkit-filter: drop-shadow(0px 0px 10px black);
  		filter: drop-shadow(0px 0px 10px black);
	}
	#artisans .sub-img .sub-titre { 
		position:relative; width:100%; top:300px; 
		text-align: center; font-size:13pt; font-weight: bold; color:#fff; text-shadow: 0 0 10px #000; margin-bottom:15px;
		-webkit-filter: drop-shadow(0px 0px 10px black);
  		filter: drop-shadow(0px 0px 10px black);
	}
	#artisans .sub-img .sub-nom { 
		position:relative; width:100%; top:300px; text-align: center; 
		font-family: 'Pathway Gothic One',sans-serif; font-size:24pt; text-transform: uppercase; color:#fff; text-shadow: 0 0 10px #000; 
		-webkit-filter: drop-shadow(0px 0px 10px black);
  		filter: drop-shadow(0px 0px 10px black);
	}
	
	/* ============================ nous trouver ================================= */
	#nous_trouver { 
	    position: relative;
		width: 340px;
		height: 650px;
		left: -20px;
		background-image: url(/images/halles_plaza_montpellier_carte.jpg);
		background-position: -250px -60px;
		background-size: 1400px;
	}
	#nous_trouver * { color:#fff; }
	#nous_trouver .sub-cadre { 
	    position: relative;
		background-color: #0AA6D8;
		width: 300px;
		height: 500px;
		left: 20px;
		top: 10px;
		padding: 20px;
		padding-right: 20px;
	}
	#nous_trouver .sub-titre { 
		font-family: 'Pathway Gothic One',sans-serif;
		font-size: 30pt;
		text-transform: uppercase;
		margin-top: 30px; margin-bottom: 30px;
	}
	#nous_trouver .sub-text { 
		width:100% !important;
		line-height: 20pt;
	}
	#nous_trouver .sub-sous-titre {
		font-family: 'Pathway Gothic One',sans-serif;
		font-size: 22pt;
		margin-top: 50px;
		margin-bottom: 20px;
	}
}


@media only screen and (min-width: 321px) and (max-width: 321px) {
	
	
	.home-link {
		display:inline-block; position:relative; padding-bottom: 20px; margin-top:20px; margin-bottom:20px;
		font-family: 'Pathway Gothic One',sans-serif; font-size:18pt; color:#F85241; text-transform: uppercase;
		cursor:pointer; z-index: 2; 
		left:50%;
		transform: translateX(-50%); 
	}

	.home-link:before{
		content: "";
		position: absolute;
		width: 50%;
		height: 1px;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #F85241;
	}

	
	/* ============================ les artisans du gout ================================= */
	#les_artisans_du_gout h1 {
		position:absolute;
		top:120px;
		left:20px;
		color:#fff;
		z-index: 3;
		line-height: 70pt;
		font-size:70pt;
	}
	
	#les_artisans_du_gout .sub-titre2 {
		display:none;
	}

	/* ============================ à la une ================================= */


	
	/* ============================ teaser ================================= */
	#teaser {
		position:relative; width:300px; background-image: url('/images/halles_plaza_montpellier.jpg'); 
		height:600px; padding:10px;
		margin-top:20px; 
	}
	#teaser h1 {
		color:#fff; font-size:42pt; text-align: center; padding-top:30px;
	}
	#teaser div.sub-text {
		color:#fff; line-height: 100%;
	}
	
	#teaser div.sub-1 {
		position:absolute;
		top: 200px;
		left: 0;
		width:160px;
		
	}
	#teaser div.sub-2 {
		position: absolute;
		top: 200px;
		left: 160px;
		width:160px;
	}
	#teaser div.sub-3 {
		position:absolute;
		top: 260px;
		left: 0;
	}
	#teaser div.sub-1,#teaser div.sub-2,#teaser div.sub-3, #teaser div.sub-1 span,#teaser div.sub-2 span,#teaser div.sub-3 span {
		font-size:14pt; text-align: center;
	}
	
	
	#teaser div.sub-baseline {
		text-align: center;
		color: #fff;
		position: absolute;
		top: 350px;
		left: 10px;
		width: 270px;
	}
	#teaser .sub-link {
		left: 550px;
		color:#FAC400 !important;
		height: 40px;
		top: 300px;
		margin-bottom: 70px;
		opacity: 0;
	}
	#teaser .sub-link.visible {
		opacity: 1; transition: all 1s ease-out;
		left:150px;
	}
	#teaser .sub-link:before {
		 border-bottom: 1px solid #FAC400;
	}
	
	
	
	/* ============================ les artisans ================================= */
	
	#artisans h1 { display:none; }
	#artisans h1.mobile { display:block; margin-top:20px; }
	
	#artisans .sub-imgs{ position:relative; width:320px; z-index: 3; margin-top:20px; margin-bottom:100px; height:380px; }
	#artisans .sub-img { position:relative; width:300px; height:387px; margin-right: 20px; float: left;	}
	
	#artisans .sub-prev { position:absolute; left:0; top:400px; cursor: pointer; }
	#artisans .sub-next{ position:absolute; right:20px; top:400px; cursor: pointer; }
	#artisans .sub-prev.slick-disabled, #artisans .sub-next.slick-disabled { opacity: .5; cursor:default; }

	
	
	#artisans .sub-img .sub-infos { position:absolute; top:0; left:0; width:100%; height:100%; text-align: center; display: block; cursor:pointer; }
	

	#artisans .sub-img .sub-picto { position:absolute; width:70px; height:70px; left:115px; top:220px; text-align: center; }
	#artisans .sub-img .sub-picto img { 
		max-width:100%; max-height:100%;
		-webkit-filter: drop-shadow(0px 0px 10px black);
  		filter: drop-shadow(0px 0px 10px black);
	}
	#artisans .sub-img .sub-titre { 
		position:relative; width:100%; top:300px; 
		text-align: center; font-size:13pt; font-weight: bold; color:#fff; text-shadow: 0 0 10px #000; margin-bottom:15px;
		-webkit-filter: drop-shadow(0px 0px 10px black);
  		filter: drop-shadow(0px 0px 10px black);
	}
	#artisans .sub-img .sub-nom { 
		position:relative; width:100%; top:300px; text-align: center; 
		font-family: 'Pathway Gothic One',sans-serif; font-size:24pt; text-transform: uppercase; color:#fff; text-shadow: 0 0 10px #000; 
		-webkit-filter: drop-shadow(0px 0px 10px black);
  		filter: drop-shadow(0px 0px 10px black);
	}
	
	/* ============================ nous trouver ================================= */
	#nous_trouver { 
	    position: relative;
		width: 340px;
		height: 650px;
		left: -20px;
		background-image: url(/images/halles_plaza_montpellier_carte.jpg);
		background-position: -250px -60px;
		background-size: 1400px;
	}
	#nous_trouver * { color:#fff; }
	#nous_trouver .sub-cadre { 
	    position: relative;
		background-color: #0AA6D8;
		width: 300px;
		height: 500px;
		left: 20px;
		top: 10px;
		padding: 20px;
		padding-right: 20px;
	}
	#nous_trouver .sub-titre { 
		font-family: 'Pathway Gothic One',sans-serif;
		font-size: 30pt;
		text-transform: uppercase;
		margin-top: 30px; margin-bottom: 30px;
	}
	#nous_trouver .sub-text { 
		width:100% !important;
		line-height: 20pt;
	}
	#nous_trouver .sub-sous-titre {
		font-family: 'Pathway Gothic One',sans-serif;
		font-size: 22pt;
		margin-top: 50px;
		margin-bottom: 20px;
	}
	
}

@media only screen and (min-width: 322px) {
	
	/* === */
	.home-link {
		position:relative; padding-bottom: 20px;
		font-family: 'Pathway Gothic One',sans-serif; font-size:18pt; color:#F85241; text-transform: uppercase;
		cursor:pointer; z-index: 2; 
	}

	.home-link:before{
		content: "";
		position: absolute;
		width: 50%;
		height: 1px;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #F85241;
	}
	.home-link:hover:before{
		width: 100%;
	}

	
	
	/* ============================ les artisans du gout ================================= */
	#les_artisans_du_gout {
		position:relative; height:684px; margin:0;
	}

	#les_artisans_du_gout h1 { 
		position: absolute;
		z-index: 2;
		width: 1120px;
		overflow: hidden;
		top: 120px;
		white-space: nowrap;
		font-size:151pt;
		
	} 

	#les_artisans_du_gout .sub-img {
		position:absolute; right:-160px; width:790px; height:684px; overflow: hidden;
	}
	#les_artisans_du_gout .sub-img img {
		width:790px; height:684px;
	}
	#les_artisans_du_gout .sub-img h1 {
		color: #fff;
		z-index: 3;
		left: -330px;
	}
	#les_artisans_du_gout .sub-text {
		position:absolute; bottom:30px; width:300px; line-height: 21pt;
	}
	#les_artisans_du_gout .sub-link {
		position:absolute; bottom:-50px; width:145px; height:40px;
	}
	/* ============================ Coronavirus ================================= */
	#coronavirus{
		margin-top: 30px;
		margin-bottom: 30px;
		padding:30px;
		text-align: center;
		background-color: #ff8d8d;
		line-height: 1rem;
	}


	/* ============================ à la une ================================= */
	#a_la_une {
		position:relative;
	}
	#a_la_une .sub-img {
		position:absolute; left:0; width:300px; height:382px; top: 50%;	transform: translateY(-50%);
	}
	#a_la_une .sub-text {
		position:relative; left:410px; width:710px; min-height:382px; background-color:#F3EDE1;  text-align: right; padding-right:80px;padding-left: 77px;display: table-cell; vertical-align: middle;
	}
	#a_la_une .sub-text h1 {
		position:relative;
		font-family: 'Pathway Gothic One',sans-serif; 
		font-weight: 400;
		text-align: right;
		text-transform: uppercase; 
		margin-top:70px;	margin-bottom:8px;	
	}
	#a_la_une .sub-text h2 {
		position:relative;
		font-family: 'Pathway Gothic One',sans-serif; 
		width: 100%;
		text-align: right;
		font-size: 36pt;
	}

	#a_la_une .sub-text .sub-abstract {
		position:relative; width:540px; line-height: 21pt; margin-top:30px; margin-bottom: 70px; padding-left:10px;float:right;
	}
	#a_la_une .sub-link {
		left:405px; width:105px; height:40px; margin-top:50px; margin-bottom:70px;
	}
	#a_la_une .sub-link {
		display:block; left:405px; width:100px; height:40px; margin-top:50px; margin-bottom:70px;
	}
	#a_la_une .sub-link:before{
		left: 50%;
	}
	#a_la_une .sub-link:hover:before{
		left: 0; width: 100%;
	}

	
	/* ============================ teaser ================================= */
	#teaser {
		position:relative; width:1280px; height:800px; left:-160px; background-image: url('/images/halles_plaza_montpellier.jpg');
	}
	#teaser h1 {
		position:relative; color:#fff; text-align: center; line-height: 110pt;
		top:90px;
	}
	#teaser div.sub-text {
		position:absolute; top:436px;
		font-family: 'Pathway Gothic One',sans-serif; color:#fff; text-align: center; font-size:40pt; line-height: 24pt;
	}
	
	#teaser div.sub-1 { left:60px; opacity: 0; }
	#teaser div.sub-1.visible { left:260px; opacity: 1; transition: all 1s ease-out; }
	 
	
	#teaser div.sub-2 { left:415px; opacity: 0; }
	#teaser div.sub-2.visible { left:615px; opacity: 1; transition: all 1s ease-out;}
	
	#teaser div.sub-3 { left:710px; opacity: 0; }
	#teaser div.sub-3.visible { left:910px; opacity: 1; transition: all 1s ease-out; }
	
	#teaser div.sub-text span {
		font-size:17pt;
	}
	#teaser div.sub-baseline {
		text-align: center;
		font-size: 11pt;
		color: #fff;
		line-height: 24pt;
		position: relative;
		top: 260px;
	}
	#teaser .sub-link {
		left: 550px;
		color:#FAC400 !important;
		height: 40px;
		top: 300px;
		margin-bottom: 70px;
		opacity: 0;
	}
	#teaser .sub-link.visible {
		opacity: 1; transition: all 1s ease-out;
	}
	#teaser .sub-link:before {
		 border-bottom: 1px solid #FAC400;
	}
	
	
	
	/* ============================ les artisans ================================= */
	#artisans {
		position:relative; height: 790px;
	}
	
	#artisans h1 {
		position:relative;
		z-index: 2;
	}
	#artisans h1.mobile { display:none; }
	
	
	#artisans .sub-text {
		position:relative; left:0; width:300px; line-height: 21pt;
		margin-top: 10px;
    	margin-bottom: -5px;
		z-index: 2;
	}
	#artisans .sub-background {
		position: absolute;
		left: 78px;
		width: 1040px;
		height: 720px;
		background-color: #F3EDE1;
		top: 52px;
		z-index: 1;
	}
	
	#artisans .sub-link { top:60px; }
	
	#artisans .sub-imgs{ position:absolute; left:350px; top:190px; width:798px; z-index: 3;}
	#artisans .sub-img { position:relative; width:300px; height:387px; margin-right: 20px;	}
	#artisans .sub-prev { position:absolute; left:0; top:400px; cursor: pointer; }
	#artisans .sub-next{ position:absolute; left:80px; top:400px; cursor: pointer; }
	#artisans .sub-prev.slick-disabled, #artisans .sub-next.slick-disabled { opacity: .5; cursor:default; }

	#artisans .sub-img .sub-infos { position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(254,173,172,0.75); text-align: center; display: none; cursor:pointer; }
	#artisans .sub-img:hover .sub-infos { display: block; }

	#artisans .sub-img .sub-picto { position:absolute; width:150px; height:150px; left:75px; top:75px; text-align: center; }
	#artisans .sub-img .sub-picto img { max-width:100%; max-height:100%;  }
	#artisans .sub-img .sub-titre { 
		position:relative; width:100%; top:300px; 
		text-align: center; font-size:13pt; font-weight: bold;
	}
	#artisans .sub-img .sub-nom { 
		position:relative; width:100%; top:300px; text-align: center; 
		font-family: 'Pathway Gothic One',sans-serif; font-size:24pt; text-transform: uppercase; 
	}
	
	/* ============================ nous trouver ================================= */
	#nous_trouver { position:relative; width:1280px; height:700px; left:-160px; background-image:url(/images/halles_plaza_montpellier_carte.jpg); }
	#nous_trouver * { color:#fff; }
	#nous_trouver .sub-cadre { position:relative; background-color:#0AA6D8; width:620px; height:536px; left:490px; top:90px; padding:60px; }
	#nous_trouver .sub-titre { 
		font-family: 'Pathway Gothic One',sans-serif;
		font-size: 40pt;
		text-transform: uppercase;
		margin-bottom: 50px;
	}
	#nous_trouver .sub-sous-titre {
		font-family: 'Pathway Gothic One',sans-serif;
		font-size: 22pt;
		margin-top: 50px;
		margin-bottom: 20px;
	}
	#nous_trouver .sub-text { line-height: 28pt; }
}