@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/amatic-sc-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'),
       url('../fonts/amatic-sc-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/amatic-sc-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/amatic-sc-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/amatic-sc-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/amatic-sc-v11-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
	@charset "UTF-8";
	
	html, body, div, p, span, img, a, ul, li, em, font, small, strong, sub, sup, b, u, i, h1, h2, h3, h4, h5, h6, noscript, object, fieldset, form, label, caption, legend {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	float: none;
	-webkit-font-smoothing: auto;
	}
	
	nav {
		font-family: Arial;
		font-size: 14px;
		width: 200px;
		height: auto;
		border-radius:3px;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 10px 1px rgba(0, 0, 0, 0.12), 0 1px 5px 1px rgba(0, 0, 0, 0.2);
	}
	
	li {
		list-style: none;
	}
	
	/* ID */
	
	#content {
		width: 15%;
		margin-top:20px;
		margin-left:10px;
		display:inline-block;
	}
	
	#main_menu_nav h3 {
		color: #FFF;
		font-family: "open sans";
		background: #045779;
		padding: 8px;
		padding-left: 10px;
		cursor: pointer;
		position: relative;
	}
	
	#main_menu_nav ul {
		height: auto;
		display: none;
	}
	
	#main_menu_nav li {
		font-family: "open sans";
		color: #D2D7D8;
		background: #00789a;
		padding: 10px;
		padding-left: 20px;
		border-bottom: 1px solid #035c7e;
	}
	#main_menu_nav li a
	{
		text-decoration:none;
		color:#D2D7D8;
		width:100%;
		display:inline-block;
	}
	#main_menu_nav li a:hover
	{
		text-decoration:none;
		color:#FFF;
	}
	
		#main_menu_nav li:hover {
			color: #FFF;
			background: #108BAD;
		}
	
			#main_menu_nav li:last-child {
				border-bottom: none;
			}
	
	/* Cachons la case à cocher */
	#main_menu_nav [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
		position: absolute;  
		left: -9999px;  
	}
	/* on prépare le label */
	#main_menu_nav [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
		padding-left: 200px;
		padding-bottom: 36px;
		left: 0;
		top: 0;
		border-bottom:1px solid #043759;
		cursor: pointer;
		position: absolute;
	}
	
	/* Aspect général de la coche */
	#main_menu_nav [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
		content: '\25bc';
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 14px;
		color: #002E41;
		transition: all .2s;
	}
	
	/* Aspect si "pas cochée" */
	#main_menu_nav [type="checkbox"]:not(:checked) + label:after {
		opacity: 0; /* coche invisible */
		transform: scale(0); /* mise à l'échelle à 0 */
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-o-transform: scale(0);
		-ms-transform: scale(0);
	}
	
	/* Aspect si "cochée" */  
	#main_menu_nav [type="checkbox"]:checked + label:after {
		opacity: 1; /* coche opaque */
		transform: scale(1); /* mise à l'échelle 1:1 */
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
	
	#main_menu_nav label:before {
		opacity: 0;
	}
	
	#main_menu_nav label:hover:before {
		content: '\25bc';
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 14px;
		color: #002E41;
		transition: all .2s;
		opacity: 1; /* coche opaque */
	}
	
	#jpg_category, #png_category, #bmp_category, #gif_category, #tiff_category, #word_category {
		position: relative;
	}
	
	#jpg_category [type="checkbox"]:checked + label + ul, #png_category [type="checkbox"]:checked + label + ul, #bmp_category [type="checkbox"]:checked + label + ul, #gif_category [type="checkbox"]:checked + label + ul, #tiff_category [type="checkbox"]:checked + label + ul, #word_category [type="checkbox"]:checked + label + ul {
		display: block;
	}
	
	/* CLASS */
	
	.transition_css {
		transition: all .2s ease-out;
		-webkit-transition : all .2s ease-out;
		-moz-transition: all .2s ease-out;
		-o-transition: all .2s ease-out;
		-ms-transition: all .2s ease-out;
	}
	body
	{
		background:#eee;
	}
#corps
{
	margin-top:20px;
	width: 80%;
	margin-right:2%;
    display: inline-block;
    padding: 10px;
	background:#fff;
    float: right;
	border-radius:3px;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 10px 1px rgba(0, 0, 0, 0.12), 0 1px 5px 1px rgba(0, 0, 0, 0.2);
	min-height:500px;
	overflow:hidden;
}
#corps p
{
	padding-left: 40px;
    padding-right: 40px;
	color:#333;
	font-family: "open sans";
}
.texte
{
	color:#333;
	font-family: "open sans";
	padding-left:20px;
	padding-right:20px;
}
.titre_principal
{
	color:#108BAD;
	font-family: 'Amatic SC';
	padding-left:20px;
	font-size:66px;
}
#header
{
	display:inline-block;
	float:left;
	margin-left:30px;
	width:95%;
}
.label-file {
	display:block;
	border-radius:4px;
	background:#00b1ca;
	width:170px;
	height:30px;
    cursor: pointer;
	font-family:"open sans";
	font-size:16px;
    color: #eee;
	padding-left:5px;
	padding-right:5px;
	padding-top:7px;
	padding-bottom:0px;
	text-align:center;
	margin:0 auto;
}
.label-file:hover {
	transition:all .5s ease;
    color: #fff;
}
#upload
{
	cursor: pointer;
	width:60%;
	min-height:199px;
	overflow:hidden;
	border:2px dashed #00b1ca;
	margin:0 auto;
	text-align:center;
}
#imageUpload
{
	height:128px;
	width:128px;
	display:block;
	margin:10px auto;
}
#textUpload1
{
	font-family:"open sans";
	font-size:16px;
	font-weight:bold;
}
#textUpload2
{
	font-family:"open sans";
	font-size:16px;
}

.image_div
{
	width:110px;
	height:184px;
	border:1px solid #00b1ca;
	display:inline-block;
	float:left;
	margin-left:15px;
	margin-top:15px;
	margin-bottom:15px;
}
.image_div img
{
	width:110px;
	height:150px;
}
.chargement
{
}
.image
{
}
.titre_texte
{
	color:#00b1ca;
	font-family: "open sans";
	padding-left:40px;
	padding-bottom:20px;
	padding-top:10px;
}
#accueil
{
	border-bottom:1px solid #043759;
}
.download_link
{
	background:#00b1ca;
	color:#eee;
	width:100%;
	height:30px;
	display:inline-block;
	text-decoration:none;
	font-family: "open sans";
	font-size:16px;
	text-align:center;
	padding-top:4px;
}
.menu-icon {
    font-size: 24px;
    cursor: pointer;
}

.mobile-menu {
    display: none;
}

@media only screen and (max-width: 768px) {
	#content {
		margin:0;
		position: absolute;
		top: 0;
	}
	#header
	{
		margin:0;
	}
	#main_menu_nav
	{
		width:100%;
	}
	.menu.active {
        left:0;
		top:0;
        width:50%;
      }
	 .titre_principal
	 {
		 padding-left:0;
		 margin-top:50px;
	 }
	.burger-icon.transform{
		transform:rotate(90deg);
	  }
    #openBtn{
        position:relative;
    }
    .burger-icon{
        display:inline-block;
        margin-top:10px;
        margin-left:16px;
		transition:transform 1s;
    }
    .spanBurger{
        display:block;
        width: 35px;
        height: 5px;
        background-color: black;
        margin: 6px 0;
		transition:background-color .5s ease;
    }
	.spanBurger.color
	{
		background-color:#eee;
	}
	.menu{
        position:fixed;
        top:0;
        left:-800px;
		transition:all 1s;
    }
}