/*
 _______  ______   _______  _______  ______   _______    _______  ______   _______  _______  _______  _  _  _  _______  ______   _     _ 
(_______)(_____ \ (_______)(_______)(_____ \ (_______)  (_______)(_____ \ (_______)(_______)(_______)(_)(_)(_)(_______)(_____ \ (_)   | |
 _        _____) ) _____    _______   ____) ) _____      _____    _____) ) _______  _  _  _  _____    _  _  _  _     _  _____) ) _____| |
| |      |  __  / |  ___)  |  ___  | / ____/ |  ___)    |  ___)  |  __  / |  ___  || ||_|| ||  ___)  | || || || |   | ||  __  / |  _   _)
| |_____ | |  \ \ | |_____ | |   | || (_____ | |        | |      | |  \ \ | |   | || |   | || |_____ | || || || |___| || |  \ \ | |  \ \ 
 \______)|_|   |_||_______)|_|   |_||_______)|_|        |_|      |_|   |_||_|   |_||_|   |_||_______) \_____/  \_____/ |_|   |_||_|   \_)

Version 0.9.6.0
Date 02/01/2015                                                                                 
*/

/* ################################################################################################################																		     *                                                                      							
														IMPORTS
 *###############################################################################################################*/


@font-face {
  font-family: Gilroy;
  src: url('font/gilroy-light.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/gilroy-light.woff') format('woff'), /* Pretty Modern Browsers */
       url('font/gilroy-light.ttf')  format('truetype') /* Safari, Android, iOS */
}

@font-face {
  font-family: GilroyBold;
  src: url('font/gilroy-extrabold.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/gilroy-extrabold.woff') format('woff'), /* Pretty Modern Browsers */
       url('font/gilroy-extrabold.ttf')  format('truetype') /* Safari, Android, iOS */
}

:root {
  --jaune: #fec42d;
  --bleu: #001E60;
  
  --gblack: #161616;
  --grclair: #ededed;	
  --gris: #afafaf;

}

/* ################################################################################################################																		     *                                                                      							
														BASICS
 *###############################################################################################################*/
 
 
	html, body { margin: 0; padding: 0; border: 0; height: 100%;}
	body { 
		font-size:14px;  
		background: #fff;
		
		color: #111;
		font-family: 'Gilroy', sans-serif;
		font-weight: 300;
		letter-spacing: 0.025em;
		line-height: 1.5em;
		overflow-x: hidden;
		overflow-y: scroll;
		position: relative;
	}


	body.is-loading * {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-o-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

	input, select, textarea {
		color: #aaa;
		font-size: 15px;
		font-weight: 300;
		letter-spacing: 0.025em;
		line-height: 1.75em;
		font-family: 'Gilroy', sans-serif;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		color: #333;
		text-decoration: none;
	}

		a:hover {
			text-decoration: underline; 
			
		}
		
		a:active, a:focus { outline:0; }
		a img { border:0; }
		

	strong, b {font-weight: 500;	}
	.chrome strong, b {font-weight: 600;	}

	p, ul, ol, dl, table, blockquote {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: inherit;
		font-weight: 300;
		line-height: 1em;
		margin-bottom: 1em;
		font-family: 'Gilroy', sans-serif;
		

	}
	.hlt-800 h2, .lt-1250 h2{ margin-bottom: 0.5em; }

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
			border: 0;
		}

	h1{
		font-size: 3.5em;


	}
	
	h2 {
		font-size: 1.5em;

	}

	h3 {
		font-size: 1.2em;


	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border-top: solid 1px rgba(124, 128, 129, 0.2);
		border: 0;
		margin-bottom: 1.5em;
	}

	blockquote {
		border-left: solid 0.5em rgba(124, 128, 129, 0.2);
		font-style: italic;
		padding: 1em 0 1em 2em;
	}
	
	pre {
		margin:10px; padding:5px;
		background:#fafafa; border:1px dashed #ebebeb;
		font-family:Arial, Trebuchet MS, Helvetica, sans-serif;
		font-size:12px;
	}
	
	/**
	 * Lists
	 */
	ul { margin:0; padding:0; }
	li { list-style-type:none;}
	
	dl { margin:0; padding:0; }
	dt {}
	dd {}
	
	
	
/* ################################################################################################################																		     *                                                                      							
														ELEMENTS
 *###############################################################################################################*/
	
/* Table */

	table {
		width: 100%;
	}

		table.default {
			width: 100%;
		}

			table.default tbody tr {
				border-bottom: solid 1px rgba(124, 128, 129, 0.2);
			}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				font-weight: 400;
				padding: 0.5em 1em 0.5em 1em;
				text-align: left;
			}

			table.default thead {
				background: #7c8081;
				color: #fff;
			}




/* Form */

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	input[type="datetime"],
	textarea {
		-moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: #ededed;
		border: none;
		color: #000;
		display: block;
		padding: 15px 20px;
		text-decoration: none;
		width: calc(100% - 40px);
		outline: 0;
		line-height: 1.5em;
		 -webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
	}
	
	select {
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		
		/* styling */
		  background: #ededed;
		color: #666;
		 -webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
		  display: block;
		  font-size: 1.2em;;
		  line-height: 1.5em;
		padding: 13px 60px 13px 15px;

		  /* reset */

		  margin: 0;      
		  -webkit-box-sizing: border-box;
		  -moz-box-sizing: border-box;
		  box-sizing: border-box;
		 -moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		border-color:  none;
		border:  none;



	  background-image:
		linear-gradient(45deg, transparent 50%,  #b6b6b6 50%),
		linear-gradient(135deg, #b6b6b6 50%, transparent 50%),
		linear-gradient(to right, #ededed, #ededed);
	  background-position:
		calc(100% - 25px) calc(1em + 2px),
		calc(100% - 15px) calc(1em + 2px),
		100% 0;
	  background-size:
		10px 10px, 10px 10px, 50px 60px;
	  background-repeat: no-repeat;
	}

	select:focus {
	  background-image:
		linear-gradient(45deg, white 50%, transparent 50%),
		linear-gradient(135deg, transparent 50%, white 50%),
		linear-gradient(to right,  #b6b6b6,  #b6b6b6);
	  background-position:
		calc(100% - 15px) 1em,
		calc(100% - 25px) 1em,
		100% 0;
	  background-size:
		10px 10px, 10px 10px, 50px 60px;
	  background-repeat: no-repeat;
	  outline: 0;
	}

	
	
	
	
	

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	input[type="datetime"] {
		line-height: 1.2em;
	}
	
	
	label, .fieldsListTitle { color: #000; font-size: 1.3em; line-height: 1em; text-align: left; display: block; margin-bottom: 8px;}
	
	.missingField label, .invalidField label { color:#ec0001; font-weight: 600; }
	.missingField input, .missingField textarea, .missingField select, .invalidField input, .invalidField textarea, .invalidField select { border: 1px solid #ec0001; }
	
	.formErrors { margin:0; padding:10px 0 10px 0; }
	.formErrors li { list-style:none; margin:0px 0 5px 0; line-height:16px; color:#ec0001; font-weight: 600;}
	
	
	fieldset{ border: none !important; margin: 25px 0 0 0; padding: 0;}
	
	legend{ border-bottom: 3px solid var(--jaune); margin: 0; padding-bottom: 7px; margin-bottom: 20px; font-size: 1.8em; color: var(--bleu); }
	
	
	#field-security { display: none !important; }
	.formButtons { text-align: left;}
	.textField, .emailField, .telField, .numberField, .dateField, .datetimeField, .textareaField  { margin: 0 0 10px 0; text-align: left;}
	

/* Button */

	.buttonW{}
	.buttonW.centered{ text-align:center;}
	
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button[type="submit"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		background: var(--bleu);
		border: none;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 1em;
		font-weight: 300;
		letter-spacing: 2px;
		padding: 20px 30px;
		line-height: 1.3em;
		text-align: center;
		font-family: 'GilroyBold', sans-serif;
		text-decoration: none;
		text-transform: uppercase;
		width: auto;
		margin-bottom: 5px;
		 -webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
		
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button[type="submit"]:hover,
		.button:hover {
			background: var(--jaune);
			color: #000;
			
		}

		
	::-moz-selection { /* Code for Firefox */
		background: #111; color: #fff;
	}

	::selection {
	  background: #111; color: #fff;
	}
	
	
	::placeholder{
	  color: #666;
	}


	
	
	





/* Specials */


	 /**
	 * Floating elems
	 */
	.float	{display:inline; float:left;}
	.floatR	{float:right;}
	/**
	 * Away elems
	 */

	.awayText
	{text-indent: -9999px; overflow: hidden; }
	.hidden
	{display: none;}
	
	 /**
	 * WRAPPERS 980
	 */
	.focus
	{ margin:0 auto; width: 980px; }
	
	/**
	 * Overlays
	 */
	/* WHITE*/
	.overlay-w { background:rgba(255,255,255,0.7); }
	.lt-ie9 .overlay-w{
		background:none;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff)";
		zoom: 1;
	}
	/* BLACK*/
	.overlay-b{ background:rgba(0,0,0,0.7); }
	.lt-ie9 .overlay-b{
		background:none;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000)";
		zoom: 1;
	}
	
	.overText{
		text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);	
	}
	
	.centered{ text-align: center !important;}
	.lefted{ text-align: left !important;}
	.righted{ text-align: right  !important;}
	
	
	
		
/* ################################################################################################################																		     *                                                                      							
														PAGES
 *###############################################################################################################*/



	.sfont {  font-family: 'GilroyBold', sans-serif; }
	
	.titlefont {  font-family: 'GilroyBold', sans-serif; }
	
	
	.vcard p { margin:0; padding:0; }
	.vcard .tel .type, .vcard .geo, .vcard .uri { display:none; }	
	
	.colzim{ display: block; width: 100%;}
	
	a.specialAnnounce { display:none !important;  } 
	
	
	.away{ position: relative; opacity: 0;}
	.awayleft{ left: -120px;}
	.awayright{ right: -120px;}
	.awaytop{ top: -100px;}


	.big{ font-size: 1.6em !important }
	.super { font-size: 2.5em !important }
	.mega { font-size: 3.2em !important }
	.ultra { font-size: 4.2em !important }
	

	
	/*
	.sfont.big { font-size: 2.2em !important;  line-height: 1em; }
	.sfont.super { font-size: 4em !important; line-height: 0.9em; }
	.sfont.mega { font-size: 6em !important; line-height: 1em; }
	.sfont.ultra { font-size: 8em !important;  line-height: 1em; }
	*/
	
	.centeredlist{  
		display: table; width: 100%; text-align: center; clear: both; 
		margin-left: 7.5%!important; margin-right: 7.5%!important; 
		width: 85%; padding-top: 100px;}
	.centeredlist:first-child{ padding-top: 0;}	
	
		
	.centeredlist100{  margin-left: 0%!important; margin-right: 0%!important; width: 100%}
	.centeredlist90{  margin-left: 5%!important; margin-right: 5%!important; width: 90%}
	.centeredlist80{  margin-left: 10%!important; margin-right: 10%!important; width: 80%}
	.centeredlist75{  margin-left: 12.5%!important; margin-right: 12.5%!important; width: 75%}
	.centeredlist70{  margin-left: 15%!important; margin-right: 15%!important; width: 70%}
	.centeredlist60{  margin-left: 20%!important; margin-right: 20%!important; width: 60%}
	.centeredlist50{  margin-left: 25%!important; margin-right: 25%!important; width: 50%}
	.centeredlist30{  margin-left: 35%!important; margin-right: 35%!important; width: 30%}

	.centeredlist > li{ display: inline-block; vertical-align: top; position: relative;}
	.centeredlist > li{ width: 45%; margin: 0 2.4% }
	
	.centeredlist > li.col25{ width: 22.5%; margin: 0 1%; }
	.centeredlist > li.col25.colbigspace{ width: 23%; margin: 0 5%; }
	.centeredlist > li.col30{ width: 30%; margin: 0 1.5%; }
	.centeredlist > li.col33{ width: 32%; margin: 0 0.5%; }
	.centeredlist > li.col40{ width: 37%; margin: 0 1.5%; }
	.centeredlist > li.col45{ width: 43%; margin: 0 1.5%;}
	.centeredlist > li.col50{ width: 45%; margin: 0 2.4%; }
	.centeredlist > li.col60{ width: 57%; margin: 0 1.5%;}
	.centeredlist > li.col70{ width: 60%; margin: 0 3.5%;}
	.centeredlist > li.col100{ width: 100%; }
	


	
	.nomargintop{ margin-top: 0; padding-top: 0;}
	.titlepadding{ padding-top: 95px;}
	.titlepaddingmini{ padding-top: 45px;}
	.titlepaddingmadium{ padding-top: 150px;}
	.titlepaddingbig{ padding-top: 200px;}
	
	
	.smallpadding{ padding: 30px 0; }
	.mediumpadding{ padding: 60px 0; }
	.mediumpaddingtop{ padding: 60px 0 0 0; }
	.bigpadding{ padding: 100px 0; }
	.bigpadding2{ padding: 200px 0; }
	.nospacetop{ padding-top : 0; margin-top : 0;}
	
	
	
	.spacer{ clear: both; padding: 40px 0;}
	
	
	
		
	.screensW, .screensAnimW{ width: 100%; height: 100%; }
	.screen{ width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 0;}

	
	.screenZimW, .screenCarouselW, .screenCarouselZoomW{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; background: #fff ;}
	.screenZim, .carouselZim, .carouselZoomZim, .carouselZoomZimW{ display: block; position: absolute; }
	.screenZim{ display: none;}
	.screenCarouselW{ display: none;}
	.carouselZim, .carouselZoomZimW{ opacity: 0;}
	
	/*.screenCarouselZoomW.half{ height: 50%;}*/
	.screenCarouselZoom{ height: 100%; width: 100%;}

	
	
	
	.carouselZoomZim {
		
		 /* image à l'échelle 1 au départ */
	   -webkit-transform: scale(1);
	   -moz-transform: scale(1);
	   -o-transform: scale(1);
	   -ms-transform: scale(1);
	   
	   transform: scale(1);
	}
   
	.carouselZoomZim.scale{
		 /* propriétés de transition */
	   -moz-transition:all 7s ease-out;
	   -webkit-transition:all 7s ease-out;
	   -o-transition:all 7s ease-out;
		transition:all 7s ease-out;
		
		transform: translate3d(0px, 0px, 0px) scale(1.10);
	}
	
	
	.colZim{ display: block; width: 100%; margin: 0 auto;}

	
	.styledBlockW{ position: relative; z-index: 10; top: 40px;}
	.styledBlockW.big{ top: 20px;}
	.styledBlock{ padding: 20px 100px 20px 30px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
	.styledBlock *{ text-align: left; }

	
	.styledBlock h3.alone{ margin: 0; }
	
	.styledBlock .buttonLayer{ }
	
	.decalLeft{ margin-left: -20%;  }
	.decalRight{ margin-right: -20%;  }
	
	
	

	#OverlayLoad{ height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background: #f5f5f5 url(zims/loader/loader2.gif) no-repeat center 49%; }
	
	#SoonPopupW{ display: none;}
	#SoonPopup{ margin: 100px 150px;}

	
	
	
	
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * GENERAL * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 

	
/* HEADER */

	
	#UpHeader{ background: var(--bleu); height: 10px; padding: 8px 3% 6px; position: relative; z-index: 500; width: 94%; }
	#UpHeader p{  letter-spacing: 1px; text-transform: uppercase; font-size: 12px; margin: 0; display: inline-block; color: #fff;}
	#UpHeader p a, #UpHeader p *{  color: #fff; text-decoration: none;}
	#UpHeader p#Socials{ float: right;}
	#UpHeader p#Socials{ font-size: 18px;}
	#UpHeader p#Socials a{ margin-left: 15px;}
	
	
	
	#Header { top: 0; width: 100%; z-index: 400; position: relative; }
	
	#HomeLinkW{ margin: 0 5% 0; padding: 10px 0 3px; }
	#HomeLinkW img{   }
	
	#SodeportsLogo{ margin: 10px 0 0 0;}
		
	/*.headerBG { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom: none;
		-moz-transition: background-color 0.2s ease-in-out, border 0.7s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, border 0.7s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, border 0.7s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, border 0.7s ease-in-out;
		transition: background-color 0.2s ease-in-out, border 0.7s ease-in-out;
	}
	
	

	

/* MAIN MENU */


	#Nav{ position: absolute; top: 0; width: 100%; height: auto; z-index: 1000;}
	#Nav.open{ height: 100%; }
	
	
	
 /* ANIMATED MENU ICO */
	 
	 #NavIcoW {
		position: fixed; z-index: 5001;
		right: 3%; top: 70px;
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
	
	
	.scrolled #NavIcoW { top: 30px  }
	
	#NavIco {
		display: block; z-index: 5001; height: 25px; width: 32px;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
	}
	
	#NavIcoW strong{
		position: absolute; font-size: 14px; 
		text-transform: uppercase; font-weight: 400;
		left: -60px; top: -1px; 
		
	}
	.open #NavIcoW strong {
	  color: #fff;
	}
	#NavIco span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background: #000;
		border-radius: 9px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	#NavIco span:nth-child(1) { top: 0px; width: 130%; 	}
	#NavIco span:nth-child(2),#NavIco span:nth-child(3) {  top: 9px; width: 80%	}
	#NavIco span:nth-child(4) { top: 18px; }

	#NavIco.active span {
	  background: #fff;
	}
	#NavIco.active span:nth-child(1) {
	  top: 18px;
	  width: 0%;
	  left: 50%;
	}

	#NavIco.active span:nth-child(2) {
	  -webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	  -o-transform: rotate(45deg);
	  transform: rotate(45deg);
	   width: 100%;
	}

	#NavIco.active span:nth-child(3) {
	  -webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	  -o-transform: rotate(-45deg);
	  transform: rotate(-45deg);
	  width: 100%;
	}

	#NavIco.active span:nth-child(4) {
	  top: 18px;
	  width: 0%;
	  left: 50%;
	}

	/*-#NavIco strong {
		position: absolute;
		left: 55px; font-size: 1.1em;
		line-height: 1em;
		top: 10px; color: #fff;
		text-transform: uppercase;
		font-weight: normal;
	}*/
	

	
	
	#MenuW{ overflow: visible; width: 100%;  position: absolute; z-index: 1001; height: 0;	}
	.open #MenuW{height: 100vh; position: fixed; 	}
	
	#MenuOverlay{ 
		background: none;
		height: 100%; width: 100%; top: 0; left: 0;
		position: absolute; z-index: 900; 
	}
	#Menu{ 
		background: rgba(10,10,10, 0.85);/* url(zims/frontend/menu-texture.png) center;*/
		position: absolute; z-index: 1000; opacity: 0; overflow: visible;
		height: 100%;width: 25%;
	}
	

	#MainMenuW{ padding-top: 150px; }

	#MainMenu > li{ position: relative;  }
	#MainMenu > li span.menuItemLine{ position: absolute; top: 48%; left: 0; width: 25px; height: 3px;  }

	#MainMenu > li > a, #MainMenu > li > strong{ 
		display: block; position:relative; 
		padding: 17px 40px 8px 0; min-height: 30px; text-transform: uppercase; letter-spacing: 2px;
		font-weight: 400; color: #fff; font-size: 1.3em; cursor: pointer; text-align: right; 
		border-top: 1px solid rgba(0,0,0,0); border-bottom: 1px solid rgba(0,0,0,0);
		-moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-o-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out; }
		
	#MainMenu > li > a span, #MainMenu > li > strong span{ width: 100%; display: inline-block; }
	#MainMenu > li > a  i, #MainMenu > li > strong  i { font-size: 1.3em;}
	#MainMenu > li > a  i.fa-caret-down, #MainMenu > li > a  i.fa-caret-up, #MainMenu > li > strong  i.fa-caret-down, #MainMenu > li > strong  i.fa-caret-up { display: none;}

		
	#MainMenu > li > a:hover, #MainMenu > li > strong:hover, #MainMenu > li.actived > a, #MainMenu > li.actived > strong{  text-decoration : none; letter-spacing: 4px; border-color: #a41313; }
	
	
	

	
	/*#Content {  background: url(zims/frontend/bg-black.jpg) no-repeat center top; padding: 120px 10% 0; }*/
	
	#FooterW{ background: var(--bleu); padding: 20px 0 5px 0;   }
	
	#Footer{ margin: 0 3%; display: flex; width: 94%; }
	#Footer >div, #Footer >ul, #Footer >p{ flex: 1; font-size: 0.8em; }
	#Footer *{ color: #fff; text-transform: uppercase; letter-spacing: 3px;  }
	
	#Footer{ margin: 0 3%; display: flex;  }
	
	
	#FooterLogo img{ width: 150px; }
	
	#FooterAddr{ text-align: right; padding-top: 8px; }
	#FooterAddr svg{ font-size: 2.2em;}
	
	
	#FooterBottom, #FooterBottom *{  color: #fff; font-size: 0.8em; }
	#FooterBottom{  margin: 5px 0 0 0; }

	
	
	
	
	
	#ContentW { width: 100vw; overflow: hidden; }
	#Content { }
	
	
	#SodeportsLogo{ position: absolute; right: 5%; top: 10px;}
	
	#TitrePhotoPort{ height: 300px; background: #ddd; background-size: cover; background-position: center; 
		background-image: url(../media/images/header-deco.jpg); 
		display: flex; 
		justify-content: center; align-items: center;
		position: relative;
	}
	#TitrePhotoPort::after {
	  content: "";
	  position: absolute; z-index: 1;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.3); /* 50% d'opacité noire */
	}
	#TitrePhotoPort h1{ text-align: center; color: #fff; font-weight: 800; position: relative; z-index: 100; }
	



	/* FORMS */


	


	#ContactForm { padding-bottom: 50px;}
	#ContactForm fieldset p.textField, #ContactForm fieldset p.textareaField, #ContactForm fieldset .selectField, #ContactForm fieldset .fieldsList   { margin-bottom: 25px; }

	
	
	#loc::placeholder, #profession_autre::placeholder{
	  color: #ededed;
	}



	#field-nom, #field-prenom, #field-email, #field-tel{ display: inline-block; float: left; width: calc(52% - 40px);}
	
	#field-bateau, #field-long, #field-larg{ display: inline-block; float: left; width: calc(34.7% - 40px);}
	
	#field-nom label, #field-prenom label, #field-email label, #field-tel label{ display: none;}


	#field-nom, #field-email, #field-bateau, #field-long{ margin-right: 40px;}

	.fieldsLegend{ border-top: 1px solid #ddd; padding-top: 20px; font-size: 1.6em;}



	

	p#Confirmation{
		font-size: 1.7em; color: #161616; line-height:1.2em; padding: 0; margin: 150px 5%;  text-align:center;
		font-family: 'GilroyBold', sans-serif;
	}









	/* */
	
	.mobonly, .mobonlyinline, .stretchonly{ display: none;}
	
	
	/* - -------------------------- - */
	
	@media(max-width:1620px) {
		
	
		
	}
	
	@media(max-width:1350px) {
		
	
		
	}
	
	
	@media(max-width:1024px) {
		
		.nomob{ display: none;}
		.mobonly{ display: block;}
		.mobonlyinline, .stretchonly{ display: inline;}
		
		#ContentW, #Content { height: auto; overflow-x: hidden; width: 100vw; }
		
		
		#NavIcoW {
			right: 5%; 
		}
		.scrolled #NavIcoW {
			top: 20px;
		}
		.scrolled #NavIcoW strong{
			display: none;
		}
	


		#Menu {
			width: 100%;
			
			
		}
		#MainMenu > li {
			margin-bottom: 0;
		}
		#MainMenu > li > a, #MainMenu > li > strong {
			line-height: 0.8em;
		}
		#MainMenu > li > a:hover, #MainMenu > li > strong:hover, #MainMenu > li.actived > a, #MainMenu > li.actived > strong {
			color: #fff;
			background-color: none;
		}
		
		#MainMenu > li > a, #MainMenu > li > strong {    padding: 17px 3% 8px 0;	}
		
	
		.centeredlist, .centeredlist90, .centeredlist85, .centeredlist80, .centeredlist75,.centeredlist70, .centeredlist60, .centeredlist50, .centeredlist30{ 	margin-left: 2.5%!important; margin-right: 2.5%!important; width: 95%; }
		

		.screenW{ height: auto;}
		.centeredlist > li{ width: 100%;margin: 0; }
		.alert {  padding: 15px 5% !important; width: 85% }		
		
		.littleup{ font-size: 1.2em !important }
		.big{ font-size: 1.4em !important }
		.super { font-size: 1.8em !important }
		.mega { font-size: 2.7em !important }
		.ultra { font-size: 3.5em !important }
		
		

		
		.spacer { padding: 0; }

	
		
		
		/* */
		
		#SoonPopup {
			margin: 70px 40px;
		}
		
		
		
	

	}
	

	
	@media(max-width:768px) {
		
		#HomeLinkW {
		margin: 60px 2.5% 0;
		text-align: center;
		}
		
		#SodeportsLogo {
			right: 0;
			top: -50px;
			width: 100%; text-align: center;
		}
	
			

		.centeredlist > li, .centeredlist > li.col25, .centeredlist > li.col25.colbigspace, .centeredlist > li.col30, .centeredlist > li.col33, .centeredlist > li.col40, .centeredlist > li.col45, .centeredlist > li.col50, .centeredlist > li.col60, .centeredlist > li.col70, .centeredlist > li.col100
		{ width: 100%; margin: 0% }

		

		/*#Footer {
			flex-direction: column;
		}	*/
		
		
		
		#FooterBottom, #FooterBottom * {
			font-size: 1em; margin: 0;
		}
		#FooterMenu, #FooterAddr, #FooterBottom {
			margin-top: 30px;
		}
		
		
		
		
		#ContactForm fieldset p, #ReservForm fieldset  p {
			width: 100%;
			display: inline;
			float: none;
			margin-bottom: 18px;
			display: block;
		}
		#ContactForm fieldset p#field-nom, #ContactForm fieldset p#field-email, #ContactForm fieldset p#field-date, #ReservForm fieldset p#field-nom, #ReservForm fieldset p#field-email, #ContactForm fieldset p#field-nbpers {
			margin-right: 0; 
		}
		
		
		
	
		
		
	}
	
	@media(max-width:420px) {
		
	
	
	}
	
	
	
	@media(max-width:370px) {
	
		
	}