/*****************************************************************************************************************************/
/* Reset - Redefinitions des balises HTML */
/*****************************************************************************************************************************/
*{margin:0; padding:0;}
*, *:after, *::before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

html {line-height:1.4;}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, blockquote{font-family:'Montserrat', sans-serif; font-size:19px; color:#000; font-weight:300;}

fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal;}

a{color:#000; text-decoration:none; outline:none; -webkit-transition:all .3s ease-in-out 0s;-moz-transition:all .3s ease-in-out 0s;-o-transition:all .3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;}
a:hover{color:#000; text-decoration:none; -webkit-transform:translate3d(-5px, 0, 0); transform:translate3d(-5px, 0, 0);}

input:focus, a:focus, textarea:focus{outline:none;}

select option{padding:0 3px;}

ul li{list-style:none;}

table{border-collapse:collapse; border-spacing:0;}

iframe{border:none;}

hr{display:none;}

textarea{resize:vertical;}

img{vertical-align:middle;}

*::-webkit-input-placeholder {color: #000;}
*:-moz-placeholder {color: #000; opacity: 1;}
*::-moz-placeholder {color: #000; opacity: 1;}
*:-ms-input-placeholder {color: #000;}

input:focus::-webkit-input-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:-moz-placeholder {color: transparent;}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* CLASS génériques */
/*****************************************************************************************************************************/
	strong{font-weight:bold;}
	em{font-style:italic;}

	.clearfix:before,
	.clearfix:after{content:" "; display:table;}

	.clearfix:after{clear:both;}

	.clearfix{*zoom:1;}

	.clear{clear:both; height:0px; font-size:0px;}

	.img-responsive{max-width:100%; height:auto;}

	.text-center{text-align:center;}
	.text-right{text-align:right;}

	.hidetext{font-size:0px; text-indent:-9999px; display:block;}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Structure generale */
/*****************************************************************************************************************************/
	body {
	//	background: url(../img/background.jpg);
		background-size: 1920px auto;
		text-align: center;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	body.pg-pic {
		background: #fff;
	}

	header,
	#middle,
	footer {
		position: relative;
		width: 100%;
		margin: 0 auto;
		text-align: left;
	}



	/* -------------- header -------------- */
	header {
		padding: 27px 60px 0;
	}


		/* logo */
		header .logo {
			float: left;
		}

			header .logo .img-admin {
				width: 164px;
			}

			header .logo .img-tags {
				width: 117px;
			}


		/* search */
		header .search {
			float: left;
			width: 36.5%;
			margin-left: 90px;
		}

			header .search input[type=text] {
				width: 100%;
				height: 50px;
				padding: 0 15px 0 55px;
				background: #fff url(../img/loupe.png) no-repeat 18px center;
				background-size: 23px 24px;
				border: 1px solid #dadada;
				line-height: 100%;
			}


		/* bouton close */
		header .close {
			float: right;
			padding: 16px 6px 0 0;
		}

			header .close a {
				width: 30px;
				height: 30px;
				background: url(../img/picto-close.png) no-repeat;
				background-size: 30px;
				display: block;
			}



	/* -------------- middle -------------- */
	#middle {
		padding: 13vh 0;
	}

	.pg-connexion #middle {
		padding-top: 12vh;
	}


		/* sidebar */
		.sidebar {
			float: left;
			width: 25.5%;
			padding: 0 0 0 60px;
		}


			/* nav gauche */
			.sidebar nav {
				margin-bottom: 12vh;
			}

				.sidebar nav li a {
					padding-left: 56px;
					font-size: 1.3vw;
					color: #a0a0a0;
					font-weight: 600;
					line-height: 38px;
					display: inline-block;
				}

				.sidebar nav li.active a {
					color: #000;
				}

					.sidebar nav li.active a span {
						color: #d83a31;
					}

				.sidebar nav li a:before {
					content: '';
					position: relative;
					left: -56px;
					top: 22px;
					width: 22px;
					height: 2px;
					background: #a0a0a0;
					display: block;
				}

				.sidebar nav li.active a:before {
					content: '+';
					left: -60px;
					top: 10px;
					background: none;
					font-size: 52px;
					font-weight: 300;
					line-height: 25px;
				}


			/* The switch - the box around the slider */
			.switch {
				position: relative;
				width: 40px;
				height: 24px;
				display: inline-block;
				vertical-align: middle;
			}

				/* Hide default HTML checkbox */
				.switch input {
					opacity: 0;
					width: 0;
					height: 0;
				}

				/* The slider */
				.switch .slider {
					position: absolute;
					cursor: pointer;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: #dd4339;
					border-radius: 24px;
					-webkit-transition: .4s;
					transition: .4s;
				}

				.switch .slider:before {
					position: absolute;
					content: "";
					height: 14px;
					width: 14px;
					left: 6px;
					bottom: 5px;
					background-color: #fff;
					border-radius: 50%;
					-webkit-transition: .4s;
					transition: .4s;
				}

				.switch input:checked + .slider {
					background-color: #000;
				}

				.switch input:focus + .slider {
					box-shadow: 0 0 1px #dd4339;
				}

				.switch input:checked + .slider:before {
					-webkit-transform: translateX(14px);
					-ms-transform: translateX(14px);
					transform: translateX(14px);
				}

			.txt-switch {
				margin-left: 15px;
				font-size: 1.3vw;
				font-weight: 600;
				line-height: 24px;
				display: inline-block;
				vertical-align: middle;
			}

			.txt-switch.sw-off {
				display: none;
			}


		/* contenu */
		.content {
			float: right;
			width: 74.5%;
			padding: 0 60px 0 0;
		}

		.content.large {
			float: none;
			width: auto;
			padding: 0 45px;
		}


		/* bouton */
		.btn {
			padding: 0 1.2vw 2px;
			background-color: #dd4339;
			border: none;
			border-radius: 30px;
			font-size: 1.3vw;
			color: #fff;
			font-weight: 600;
			line-height: 2.5vw;
			display: inline-block;
			cursor: pointer;
			-webkit-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		.btn:hover {
			-webkit-transform: translate3d(-5px, 0, 0);
			transform: translate3d(-5px, 0, 0);
		}



	/* -------------- footer -------------- */
	footer {
		position: absolute;
		bottom: 30px;
		width: 100%;
		text-align: center;
	}

		footer p {
			font-size: 11px;
			color: #777;
		}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page connexion.html */
/*****************************************************************************************************************************/
/* formulaire */
.pg-connexion form {
	width: 440px;
	margin: 11px auto 0;
}

	.pg-connexion form legend {
		margin-bottom: 30px;
		font-size: 21px;
		font-weight: 600;
	}



	.pg-connexion form .input_box {
		position: relative;
		padding: 10px 20px;
		border: 1px solid #000;
	}

	.pg-connexion form .input_box.error {
		background-color: rgba(0, 0, 0, 0.1);
	}

	.pg-connexion form .box_2 {
		margin-top: 30px;
	}

		.pg-connexion form .box_2 .password_visibility {
			position: absolute;
			right: 20px;
			top: 50%;
			width: 34px;
			height: 20px;
			margin-top: -10px;
			background: url(../img/eye.png) no-repeat;
			background-size: contain;
			cursor: pointer;
		}

	.pg-connexion form .message {
		position: relative;
		left: 460px;
		top: -40px;
		height: 0;
		font-size: 14px;
	}

	.pg-connexion form label {
		display: block;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
	}

	.pg-connexion form input[type="text"],
	.pg-connexion form input[type="password"],
	.pg-connexion form input[type="email"] {
		width: 100%;
		height: 30px;
		margin-top: 10px;
		background-color: transparent;
		border: none;
		font-size: 16px;
	}

	.pg-connexion form input[type="text"]:focus,
	.pg-connexion form input[type="password"]:focus,
	.pg-connexion form input[type="email"]:focus {
		outline: none;
	}

	.pg-connexion form .connect_zone {
		margin-top: 50px;
	}

	.pg-connexion form input[type="submit"] {
		position: relative;
		top: -3px;
		float: right;
		width: 30px;
		height: 30px;
		background: url(../img/fleche-right.png) no-repeat center;
		background-size: contain;
		border: none;
		font-size: 0;
		color: transparent;
		-webkit-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
		cursor: pointer;
		outline: none;
	}

	.pg-connexion form input[type="submit"]:hover {
		-webkit-transform: translate3d(5px, 0, 0);
		transform: translate3d(5px, 0, 0);
	}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page users.html */
/*****************************************************************************************************************************/
/* tableau */
.tab-base {
	width: 100%;
	font-size: 1.3vw;
}

	.tab-base th {
		padding-bottom: 5vh;
		font-weight: 600;
		line-height: 42px;
	}

	.tab-base tbody tr td {
		border-style: solid;
		border-color: transparent;
		border-width: 1px 0 0;
		line-height: 36px;
	}

	.tab-base tbody tr:last-child td {
		border-bottom-width: 1px;
	}

	.tab-base tbody tr:hover td {
		background-color: rgba(0, 0, 0, 0.1);
		/*border-color: #000;*/
		font-weight: 600;
	}

	.tab-base tbody tr:hover + tr td {
		/*border-top-color: #000;*/
	}

	.tab-base th:first-child,
	.tab-base td:first-child {
		padding-left: 8px;
	}

	.tab-base .td-agency {
		width: 22.2%;
	}

	.tab-base .td-state {
		width: 10.6%;
	}

	.tab-base .td-action {
		width: 11.2%;
	}

	.tab-base .td-del,
	.tab-base td:last-child,
	.tab-base th:last-child {
		width: 40px;
		text-align: center;
	}

		.tab-base a {
			display: inline-block;
		}

		.tab-base .btn-delete {
			width: 17px;
			height: 21px;
			background: url(../img/delete.png) no-repeat;
			background-size: 17px 21px;
			font-size: 0;
			text-indent: -9999px;
		}

		.tab-base .btn-add {
			width: 30px;
			height: 30px;
			background: url(../img/picto-plus.png) no-repeat;
			background-size: 30px;
			font-size: 0;
			text-indent: -9999px;
		}

		.tab-base .tri-on:after,
		.tab-base .lk-tri:hover:after {
			content: '';
			width: 18px;
			height: 11px;
			margin-left: 15px;
			background: url(../img/arrow-down.png) no-repeat;
			background-size: 18px 11px;
			display: inline-block;
		}


/* delete bar */
.delete-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	padding: 0 60px;
	background: #d83a31;
	font-size: 1.3vw;
	color: #fff;
	text-align: left;
	line-height: 6vw;
	display: none;
}

	.delete-bar a {
		width: 66px;
		margin: 0 2px;
		padding-bottom: 2px;
		border: 1px solid #fff;
		border-radius: 5px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		display: inline-block;
	}

	.delete-bar a:first-of-type {
		margin-left: 12px;
	}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page projects.html */
/*****************************************************************************************************************************/
/* tableau */
.tab-projects td:first-child,
.tab-projects td:nth-child(2) {
	width: 26%;
}

.tab-projects td:nth-child(3) {
	width: 22.5%;
}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page projects-in.html */
/*****************************************************************************************************************************/
/* bouton voir les images */
.lk-img {
	position: absolute;
	top: 4px;
	right: 0;
	width: 34px;
	height: 20px;
	background: url(../img/eye-black.png) no-repeat;
	background-size: contain;
}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page users-in.html */
/*****************************************************************************************************************************/
/* colonnes */
.form-col {
	float: left;
	width: 28vw;
	max-width: 400px;
}

.form-col:first-of-type {
	margin-right: 12vw;
}

	.form-line {
		position: relative;
	}

	.form-col label,
	.form-col p {
		font-size: 1.3vw;
		font-weight: 600;
		display: block;
	}

	.form-col input[type=text] {
		width: 100%;
		margin: 1vh 0 5vh;
		background: none;
		border: none;
		border-bottom: 1px solid #000;
		font-size: 1.3vw;
		line-height: 4.3vh;
	}

	.form-col textarea {
		width: 100%;
		height: 17.4vh;
		margin: 2vh 0 6.4vh;
		padding: 4px;
		background: #fff;
		border: 1px solid #000;
		font-size: 1.3vw;
	}

	.form-col .btn {
		float: right;
		margin-top: 3vh;
	}


	.form-col input[type=file] {
		position: absolute;
		filter: alpha(opacity=0);
		opacity: 0;
	}

	.form-col input[type=file] + label {
		position: relative;
		width: 100%;
		margin: 2vh 0 6.4vh;
		padding-right: 45px;
		background: url(../img/picto-plus.png) no-repeat right center;
		background-size: 40px 40px;
		color: #000;
		font-weight: 300;
		line-height: 40px;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		cursor: pointer;
	}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Bloc css de la page pictures.html */
/*****************************************************************************************************************************/
/* bloc image */
.bloc-img {
	width: 150px;
	height: 150px;
	margin: 11px 12px;
	background: #e7e7e7;
	border: 1px solid #d4d4d4;
	display: inline-block;
	overflow: hidden;
}

.valign-mid {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.halign-mid {
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}