@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
/**************************************************** Base *******************/
	html { box-sizing: border-box; max-width: 100%;}
	*,
	*:before,
	*:after {box-sizing: inherit;}

	.container {
		position: relative;
		z-index: 1;
	}
	body {
		font-family: 'Roboto','Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
		font-size: 14px;
		overflow-x: hidden;
		color: #2a3237;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.parallax {
		position: absolute;
		overflow: hidden;
		width: 100%;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
	}
	.parallax img {
		width: 100%;
		height: 100%;
	}
	img{max-width: 100%;}
	/* Diagonal cut header -----------------------*/
	.cut-top {
			content: ' ';
			position: absolute;
			z-index: 1;
			top: 105px;
			left: 0;
			width: 0;
			height: 0;
			border-top: 80px solid transparent;
			border-right: 30px solid white;
	}
	.cut-bottom {
			content: ' ';
			position: absolute;
			z-index: 1;
			bottom: -80px; 
			left: 0;
			width: 0;
			height: 0;
			border-bottom: 80px solid transparent;
			border-left: 30px solid white;
	}
/**************************************************** Preloader **************/
	.preloader {
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background-color: white;
	}
	.preloader img {
		position: absolute;
		top: calc(50% - 32px);
		left: calc(50% - 32px);
	}
	.preloader div {display: none;}
/**************************************************** Typography *************/
	a {	
		text-decoration: none;
		color: #00a8ff;
		-webkit-transition: all 0.3s ease;	
		transition: all 0.5s ease;
	}
	p{
		font-size: 21px;
		line-height: 1.5;
		color: rgb(0,0,0,.75);
	}
	h1,	h2,	h3,	h4,	h5,	h6 {
		font-family: 'Roboto', 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
		position: relative;
		color: rgb(0,0,0,.7);
	}
	h1 {font-size: 28px; font-weight: bold;}
	h1 a:active,
	h1 a:hover{text-decoration: underline;}
	ul{ 
		font-weight: bold; 
		letter-spacing: 2px; 
	}
/**************************************************** texte menu souligné ****/

	#a:focus,#a:hover{text-decoration: underline;}			
	#b:focus,#b:hover{text-decoration: underline;}			
	#c:focus,#c:hover{text-decoration: underline;}	
/**************************************************** Header *****************/
	/* notre savoir faire --------------*/
	header h1 {
		font-size: 25px;  
		border-radius: 5px; 
		letter-spacing: 3px; 
		padding: 0 20px 0 20px; 
		text-shadow: -1px -.1px 3px #fff, 
			-1px 1px 1px grey, -1px 1px 0 #fff,
			-.1px 1px 0px grey;
		text-transform: uppercase;

	}
	/* agence metre carre --------------*/
	header h3{
		font-size: 18px; 
		margin: 0 auto;
		border: solid #fff 1px; 
		border-radius: 5px;
		letter-spacing: 3px; 
		margin-top: 250px;
		margin-bottom: 40px;
		text-transform: uppercase;
		width: 300px;	
		padding: 10px; 
		text-shadow: -1px -.1px 3px #fff,
		 -1px 1px 1px #fff,
		 -1px 1px 0 #fff,
		 -.1px 1px 0px #fff;
		box-shadow: -1px -.1px 3px #fff,
		 -1px 1px 1px #fff, -1px 1px 0 #fff,
		 -.1px 1px 0px #fff;
	}
	header {	
		color: white; 
		text-transform: uppercase;
		
	}
	header .typed {display: inline-block;margin: 0;}
/**************************************************** Buttons ****************/
	.btn {
		font-size: 18px;
		display: inline-block;
		padding: 15px 30px;
		color: white;
		border: 2px solid transparent;
		border-radius: 2px;
		background: transparent;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.btn:hover,	.btn:focus {color: white;}
	.btn.btn-blue {background: #00a8ff;}
	.btn.btn-blue:hover {background: #31b9ff;}
	.btn.btn-blue-fill {color: #00a8ff;border-color: #00a8ff;background: transparent;}
	.btn.btn-blue-fill:hover {color: white;background: #00a8ff;}
	.btn.btn-white-fill {color: #fff;border-color: #fff;background: transparent;}
	.btn.btn-white-fill:hover {color: #00a8ff;background: #fff;}
	.btn.btn-gray-fill {color: #fff;border-color: #fff;	background: transparent;}
	.btn.btn-gray-fill:hover {border-color: #bbb;background: #bbb;}
	.btn.actu{color: #00a8ff;border-color: #fff;background: white;}
	.btn.actu:hover{background: rgba(255,255,255,.95);}
/**************************************************** Annimation *************/
	/************************************************ Bounce */
	.bounce:active,	.bounce:hover{
		animation: bounce 0.35s ease infinite alternate;
	}	
	@keyframes bounce{
		from {transform: translateY(0);}
		to {transform: translateY(-10px);} 
	}	
/**************************************************** Sections ***************/
	section {position: relative;}
	section h3{
		font-size: 22px;
		font-family: 'Fredoka One', cursive;	
	}
/**************************************************** Section 1 Intro ********/
	section#introduction{margin-top: -185px;}	

	.effect{
		background-color:rgb(255, 255, 255);			
		border-radius: 4px;		
	}

	.intro-table{
		border-radius: 4px;
		border-top:solid #fff 4px;
		opacity: .75;
		transition: .9s all ease;
		box-shadow: 0 0 25px 2px rgb(0,0,0);
	}
	.intro-table:hover{opacity: 1;}
	.intro-table h3{		
		text-shadow: -1px -.1px 3px grey,
		 -1px 1px 1px grey,-1px 1px 0 grey,
		 -.1px 1px 0px grey;
	}
	.intro-tables .intro-table{
		position: relative;	
		width: 100%;
		height: 300px;
		margin: 20px 0;
	}
	.intro-tables .intro-table .heading{margin: 0;padding: 30px;}
	.intro-tables .intro-table .small-heading {margin: 0;padding: 0 30px;}
	.intro-tables .intro-table .bottom {position: absolute;	bottom: 0;}
	.intro-tables .intro-table .owl-schedule .schedule-row {
		padding: 10px 30px;
		color: white;
		transition: all 0.9s ease;
	}
	/* 1ere case ---------------------*/
		.intro-table-first h4{
			float: right;
			text-shadow: 1px 1px 2px #000;
			font-family: 'Fredoka One', cursive;
		}
		.intro-table-first h4 i{margin-left: 20px;}
		.intro-table-first {
			background-size: cover;
			background-position: top;
			background-repeat: no-repeat;
		}	
	/* 3eme case ---------------------*/
		.intro-table-hover {
			background-image: url('../img/table-3.jpg');
			overflow: hidden;
			transition: .9s ease-in;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
		.intro-table-hover:hover {
			background-image: url('../img/table-3hover.jpg');
			transition: .9s ease-out;
		}
		.intro-table-hover h4{
			width: 100%;
			text-align: right;
			-webkit-transform: translateY(170px);
			transform: translateY(170px);
			font-family: 'Fredoka One', cursive;
			transition: all .9s ease;
		}
		.intro-table-hover p{
			font-size: 22px;
			text-align: right;
			font-weight: 700;
			text-shadow: 1px 1px 2px #000;
		}	
		.intro-table-hover h4 i{
			margin-right: 20px;
		}
		.intro-table-hover:hover h4 { 
			background-color: rgb(0, 168, 255,.85);
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
	/* 2eme case ---------------------*/
		.intro-table-third {
			background-image: url('../img/table-2.jpg');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
		.intro-table-third img{
			position: relative; 
			display: block;		
			text-align: center;
		}	
		.intro-table-third .fnaim{
			width: 300px; 	
			padding: 0;
		}
		.intro-table-third .vesta{
			width: 180px; 
			padding: 25px 0 25px 0;
		}
		.intro-table-third .galian{
			width: 100px; 
			padding: 35px 0 35px 0;
		}
		.intro-table-third a{
			border: solid 2px #fff; 
			font-size: 15px;
			letter-spacing: 3px;
			text-transform: uppercase;
			font-weight: bold;	
			text-shadow: 1px 1px 2px #000;
			font-family: 'Fredoka One', cursive;
			margin-bottom: 25px;
		}
		.intro-table-third a:active,
		.intro-table-third a:hover{	background: rgb(255,255,255,.5);}


			/* annimation text ---------------------------*/
	
				.owl-schedule .schedule-row:not(:last-child) 
					{
						border-bottom: 1px solid rgba(255, 255, 255, 0.4);
					}
	
					.owl-testimonials .author 
					{
						margin-top: 50px;
					}
	
					.ripple-effect {
						position: absolute;
						width: 50px;
						height: 50px;
						border-radius: 50%;
						background: white;
						-webkit-animation: ripple-animation 2s;
						animation: ripple-animation 2s;
					}
	
				@-webkit-keyframes ripple-animation {
						from {opacity: 0.2;-webkit-transform: scale(1);transform: scale(1);}
						to {opacity: 0;-webkit-transform: scale(100);transform: scale(100);}
						}
	
						@keyframes ripple-animation {
						from {opacity: 0.2;-webkit-transform: scale(1);transform: scale(1);}
						to {opacity: 0;-webkit-transform: scale(100);transform: scale(100);}
						}
/**************************************************** Section 2 Welcome ******/
	#welcome{ 
		width: 100%; 
		margin: 30px 0 30px 0;
		text-align: center;
	}
/**************************************************** Section 3 Services *****/
	#services { margin: 40px 0 40px 0;}
	
	/************************************************ 3 boxes services ******/
		.service {
			width: 100%;
			height: 320px; 
			margin: 40px 0;
			text-align: center;
			border: 1px solid #ddd;
			-webkit-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}
 
		.service:hover {border-color: #00a8ff;}
	/************************************************ Icon position *********/
		.service .icon-holder {
			position: relative;
			top: 50px;
			display: inline-block;
			margin-bottom: 40px;
			padding: 10px;
			background: white;
			-webkit-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}

		.service .icon-holder .fas{
			font-size: 35px;
			color: #00a8ff;
		}
		/* icon position after */
		.service:hover .icon-holder{top: -30px;}	
	/************************************************ Titre position ********/
		.service .heading {
			text-decoration: underline;
			position: relative;
			top: 35px;
			font-size: 18px;
			-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
			transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}
		/* Titre after */
		.service:hover .heading {top: -55px;}
	/************************************************ Button savoir plus ****/
		.service .savoir {
			position: relative;
			top: 80px;
			display: inline-block;
			margin-bottom: 40px;
			-webkit-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}
		/* en savoir plus after */
		.service:hover a.savoir {top: 143px;}
	/************************************************ Texte boite after *****/
		.service .description {
			width: 80%;
			font-size: 18px;
			margin: 0 auto;
			opacity: 0;
			-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
			transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
			-webkit-transform: scale(0);
			-ms-transform: scale(0);
			transform: scale(0);
		}
		
		.service:hover .description {
			opacity: 1;
			margin-top: -120px;
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
		}
/**************************************************** Section 4 Objectif *****/
	#objectif{ width: 100%;}

	@media only screen and (max-width:991px){ #objectif h1{ font-size: 28px;}}

	#objectif .cut-bottom{background-color: #F7F7F7;}
/**************************************************** Section 5 Team *********/
	#team h3, #team h4{ 
		margin: 50px 0 50px 0;
		text-align: center;
		overflow:hidden;	
	}	

	#team{ 
		margin: 10px 0 15px 0 ;
		padding-bottom: 30px;
	}
	
	#team img{width: 9em;height: 9em;}

	.team { 
		margin-bottom: 20px;
		padding-bottom: 20px;
		background: white;
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.07);
	}
	.team .cover .overlay {
		height: 250px;
		padding-top: 20px;
		opacity: 0;
		background: rgba(0, 168, 255, 0.9);
		-webkit-transition: opacity 0.45s ease;
		transition: opacity 0.45s ease;
	}

	.team .overlay h3{
		color: #fff;	
	}
	.team .overlay h3:hover{
		color: #fff;	
	}

	.team:hover .cover .overlay {
			opacity: 1;
		}

	.team .avatar {
		position: relative;
		z-index: 2;
		margin-top: -60px;
		border-radius: 50%;
	}
/**************************************************** Administration *********/
	/*****S1*/
		.administration{
			display: block;
			text-align: center;
			margin-top: -30em;
		}
		.administration input.photo{color: #fff;}
	/*****S2*/
		section.acceuil{
			top: 15em;
			position: relative;
		}

		.acceuil input, .acceuil textarea{
			font-weight: bold;
		}

		section.acceuil .form-control.form-white{
			border: none;
			margin-left: 1em;
		}
		section.acceuil .btn.btn-submit {
			margin-left: 1em;
			margin-bottom: 1em;
			width: 50%;
		}
		section.acceuil .owl-theme .owl-controls {left : 0 ;}

		section.acceuil input {width: 90%;}

		section.acceuil input.photo {color: #fff;}

		section.acceuil input.title{
			font-weight: bold; 
			margin-top: 1.3em;
			font-size: 1.5em;
			font-family: 'Fredoka One', cursive;
			text-shadow: -1px -0.1px 3px grey, -1px 1px 1px grey, -1px 1px 0 grey, -0.1px 1px 0px grey;
		}

		section.acceuil .intro-table-third input.title{border: none;}

		section.acceuil .intro-table-third .agrement{text-align: center;margin-bottom: 1em;}

		section.acceuil .intro-table-third img.logo1{width: 17em;}

		section.acceuil .intro-table-third img.logo2{
			margin-top: 1.5em;
			margin-bottom: 1.5em;
			width: 10em;
		}

		section.acceuil .intro-table-third img.logo3{
			width: 6em;
			margin-top: 1.7em;
			margin-bottom: 2em;
		}
	/*****S3*/
		section.admin_welcome{top: 15em;}

		section.admin_welcome input{display: inline-block; max-width: 17em; text-align: center; padding: 1em 0 1em 0; }

		section.admin_welcome .texte_Bleu{ color: #00a8ff;}

		section.admin_welcome .sous_Texte{ text-align: center; width: 90%; border: none; font-size: 1.2em;margin-top: .5em;}

		section.admin_welcome .btn.btn-submit {border: 2px solid #00a8ff; width: 8em;}

		section.admin_welcome .obj1{ 
			border-top: none; 
			font-size: 1em; 
			font-weight: bold;
			text-align: center;
		}		
	/*****S4*/
		section.admin_Serv{top: 15em;}

		section.admin_Serv input, section.admin_Serv textarea{text-align: center; background-color: none;}

		section.admin_Serv textarea{padding: .5em;}
			
		section.admin_Serv input{margin-top: 2em;}

		section.admin_Serv textarea{padding-bottom: .1em;}

		section.admin_Serv .btn.btn-submit {margin-top: 0; border: 1px solid #00a8ff;}
	/*****S5*/
		section.team_admin{top: 15em;}
		section.team_admin .form-control{background: none}
	/**** Footer admin */

		footer .footer_Admin{
			background-color: rgba(255,255,255,.2);
			margin-top:2em;
			margin-left:.25em;
			margin-right:.25em;
			border-radius: 5px;
			margin-bottom:2em;
			padding: 2em;
		}
		footer .footer_Admin label{
			padding-top:1.2em;
			float: left;
			
		}
		footer .footer_Admin input{text-align: right;}
		
		footer .footer_Admin h3{margin-bottom:2em;}

		footer h3.adminTitle{
			font-size: 18px; 
			margin: 0 auto;
			border: solid #fff 1px; 
			border-radius: 5px;
			letter-spacing: 3px; 
			margin-bottom: 40px;
			text-transform: uppercase;
			width: 340px;	
			padding: 10px; 
			text-shadow: -1px -.1px 3px #fff,
			 -1px 1px 1px #fff,
			 -1px 1px 0 #fff,
			 -.1px 1px 0px #fff;
			box-shadow: -1px -.1px 3px #fff,
			 -1px 1px 1px #fff, -1px 1px 0 #fff,
			 -.1px 1px 0px #fff;
		}



	footer .form-control {
	    background-color: rgba(255,255,255,.2);
	    border-radius: 5px;
	}
/**************************************************** Footer *****************/

	footer{
		padding: 110px 0 40px;
		text-align: center;
		margin: 0 auto;
		background: url('../img/footer.jpg');
		-webkit-background-size: cover;
		background-size: cover;
	}

	footer .titre-foot{
		margin-bottom: 40px;
	}

	footer .button-footer{
		margin: 20px 0 40px 0;
	}

	/*boutons footer */
	footer .trial-button {
		overflow: hidden;
		width: 200px;
		font-weight: bold;
		margin-bottom: 3px;
	}

	footer .contact{
		margin-top: 90px;
	}

	footer .copyright{
		margin-top: 20px; 
		font-size: 15px; 
		color:#00a8ff ;
		letter-spacing: 1.5px;
	}
	footer .left h3:nth-child(4):hover{text-decoration: underline}
/**************************************************** Modals Base ************/
	.modal {padding: 0 25px !important;}


	.modal .table h3{
			font-size: 18px; 
		margin: 0 auto;
		border: solid #fff 1px; 
		border-radius: 5px;
		letter-spacing: 3px; 
		margin: 40px 0 40px 0;
		width: 280px;	
		padding: 10px; 
		text-shadow: -1px -.1px 3px #fff,
		 -1px 1px 1px #fff,
		 -1px 1px 0 #fff,
		 -.1px 1px 0px #fff;
		box-shadow: -1px -.1px 3px #fff,
		 -1px 1px 1px #fff, -1px 1px 0 #fff,
		 -.1px 1px 0px #fff;
	}
	.modal-dialog {width: 100%;max-width: 760px;margin: 0 auto;}

	.modal-popup {
		background: url('../img/popup.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		padding: 45px 30px;
		text-align: center;
		color: #000
		box-shadow: none;
		border-radius: 2px;
	}

	/*modals close */
	.modal-popup a.close-link {
		font-size: 22px;
		position: absolute;
		top: 20px;
		right: 30px;
		color: #fff;
	}
/**************************************************** Modal contact **********/
	.form-control {
		font-size: 18px;
		position: relative;
		left: 0;
		height: auto;
		padding: 20px 30px;
		border: 1px;
		border-radius: 0;
		box-shadow: 0;
	}
	.form-control.form-white {
		color: #fff;
		border: 2px solid white;
		background: transparent;
		-webkit-transition: background-color 0.3s;
		transition: background-color 0.3s;
	}
	.form-control.form-white::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #fff;
	}
	.form-control.form-white:-moz-placeholder {
		opacity: 1;
		/* Mozilla Firefox 4 to 18 */
		color: #fff;
	}
	.form-control.form-white::-moz-placeholder {
		opacity: 1;
		/* Mozilla Firefox 19+ */
		color: #fff;
	}
	.form-control.form-white:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: #fff;
	}
	.form-control.form-white:focus {
		background: rgba(255,255,255,0.2);
	}
	/* modal contact -------------------------------------*/
		#modal1 .table img{
			border: solid rgb(255, 255, 255) 1px;
			border-radius:50%;
			background-color: rgb(255, 255, 255); 
			padding: 5px;
			transition: 0.9s ease-in;
			width: 45px;
		}

	/*modal contact telephone*/
	#modal1 .table #tel{text-transform: uppercase; color:#fff}
	#modal1 .table #tel:hover{text-transform: uppercase; color: #fff;}

	/*modal contact telephone et mail*/
	#modal1 .table #tel,#modal1 .table #mail{  
		letter-spacing: 3px;
		font-size: 20px;
		color: #fff;  
		text-shadow: 1px 1px 2px #000;
		font-weight: bold;
		padding: 10px;
	}

	/*modal contact mail*/
	#modal1 .table #mail:active,
	#modal1 .table #mail:hover{text-decoration: underline;}

	/*modals form contact*/
	.popup-form {
		width: 90%;
		max-width: 375px;
		margin: 60px auto;
	}

	.popup-form .form-control {
		margin: 20px 0;
	}
	/* modal contact dropdown acheter vendre */
	.popup-form .form-control.dropdown {
		text-align: left;
	}

	.popup-form .form-control.dropdown:after {
		content: '\f0d7';
		font-family: 'FontAwesome';
		display: inline-block;
		float: right;
		color: white;
	}

	.popup-form .dropdown .dropdown-menu {
		top: 65px;
		width: 100%;
		padding: 0;
		border: 2px solid white;
		border-top: 0;
		border-radius: 0;
		background: white;
		box-shadow: none;
	}

	.popup-form .dropdown .dropdown-menu li {
		font-size: 16px;
		width: 100%;
		background: transparent;
	}

	.popup-form .dropdown .dropdown-menu li a {
		width: 100%;
		padding: 15px 30px;
		color: #00a8ff;
	}

	.popup-form .dropdown .dropdown-menu li:hover a {
		color: #fff;
		background: #00a8ff;
	}
    /* Checkbox ----------------------------------*/
	.checkbox-holder {
		white-space: nowrap;
	}

	.checkbox {
		position: relative;
		display: block;
	}

	.checkbox {
		position: relative;
	}

	.checkbox label:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 20px;
		cursor: pointer;
		border: 2px solid white;
		background: transparent;
		-webkit-transition: background-color 0.3s;
		transition: background-color 0.3s;
	}

	.checkbox input[type=checkbox]:focus + label:before {
		background: rgba(255,255,255,0.2);
	}

	.checkbox label:after {
		content: '';
		position: absolute;
		top: 6px;
		left: 6px;
		width: 8px;
		height: 8px;
		opacity: 0;
		background: white;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.checkbox input[type=checkbox] {
		opacity: 0;
		position: absolute;
		width: 0;
		height: 0;
	}

	.checkbox input[type=checkbox]:checked + label:after {
		opacity: 1;
	}

	.checkbox-holder span {
		position: relative;
		display: inline-block;
		margin: 0 0 0 10px;
		white-space: normal;
		color: #fff;
	}

	.btn.btn-submit {
		width: 100%;
		margin-top: 30px;
		color: #00a8ff;
		border: 2px solid #fff;
		background: #fff;
	}

	.btn.btn-submit:focus {
		font-weight: bold;
	}

	.btn.btn-submit:hover {
		color: #00a8ff;
		background: #fff;
	}
/********* Mobile Nav*/
	.mobile-nav {
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		display: table;
		width: 100%;
		height: 100%;
		text-align: center;
		opacity: 0;
		background: rgba(255, 255, 255, 0.98);
		-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
		transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	}

	.mobile-nav.active {
		opacity: 1;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}

	.mobile-nav ul {
		display: table-cell;
		padding: 0;
		list-style: none;
		vertical-align: middle;
	}

	.mobile-nav ul li {
		margin: 25px 0;
	}

	.mobile-nav ul li a:not(.btn) {
		color: #aaa;
	}

	.mobile-nav a.close-link {
		font-size: 24px;
		position: absolute;
		bottom: 0px;
		left: calc(50% - 10px);
		left: 0;
		width: 100%;
		padding: 15px 0;
		color: #fff;
		background: #00a8ff;
	}

	.row.title {padding: 0 20px;}

	.light {font-weight: 300;}

	.regular {font-weight: 400;}

	.bold {font-weight: bold;}
/************* Colors*/
	.white {color: white;}
	.light-white {color: rgba(255, 255, 255, 0.5);}
	.white-bg {background: white;}
	.gray-bg {background: #f7f7f7;}
	.blue {color: #00a8ff;}
	.muted {color: #989da0;}
/****** Media Queries*/
	
	@media(max-width: 999px){
		
		/*footer*/	
		footer .contact{margin-bottom: 75px;}

		/*section welcome */	
		#welcome h1{ font-size: 28px;}
		
		/*section service */	
		.service {height: 250px;}
		.service .icon-holder {top: 20px;}
		.service .heading {top: -15px;}
		.service .savoir {top: 20px;}
		.service:hover a.savoir {top: 73px;}
	}
	@media(max-width: 768px){
	    
	    /*S1*/
		.administration{margin-top: 0em;}
		.administration .form-white{
		    
		   color: #000; 
		 }
		.administration .btn.btn-submit {
		    border: 2px solid #00a8ff; 
		    width: 8em;
		}

		.administration input.photo{color: #000;}


		/*header titre*/	
		header h1 { font-size: 20px}

		/*modal contact formulaire*/	
		.popup-form {
			width: 100%;
			margin: 60px auto;
		}
		.modal {
			max-width: 100%;
			padding: 0 10px !important;
		}
	}
	
	@media(max-width: 600px){
		
		
		section#introduction{margin-top: 0px;}
		
		/*modal contact*/	
		#modal1 .table #mail{  
			font-size: 18px; 
			letter-spacing: 1px;
		}

		/*section service */	
		.service {height: 290px;}
		.service .icon-holder {top: 20px;}
		.service .heading {top: 5px;}
		.service .savoir {top: 60px;}
		.service:hover a.savoir {top: 112px;}


		/*boutons footer */
		footer .btn {
			overflow: hidden;
			width: 40%;
			padding: 15px 0;
			font-size: 14px;
			font-weight: normal;
			margin-bottom: 3px;
		}

		footer .left h3:nth-child(4){
			font-size: 18px;
			color: white;			
		}



		
	}