@font-face {
    font-family: 'exoextrabold';
    src: url('font/exoextrabold/exo-extrabold-webfont.eot');
    src: url('font/exoextrabold/exo-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/exoextrabold/exo-extrabold-webfont.woff2') format('woff2'),
         url('font/exoextrabold/exo-extrabold-webfont.woff') format('woff'),
         url('font/exoextrabold/exo-extrabold-webfont.ttf') format('truetype'),
         url('font/exoextrabold/exo-extrabold-webfont.svg#exoextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exobold';
    src: url('font/exobold/exo-bold-webfont.eot');
    src: url('font/exobold/exo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/exobold/exo-bold-webfont.woff2') format('woff2'),
         url('font/exobold/exo-bold-webfont.woff') format('woff'),
         url('font/exobold/exo-bold-webfont.ttf') format('truetype'),
         url('font/exobold/exo-bold-webfont.svg#exobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gidole';
    src: url('font/gidole/gidole-regular-webfont.eot');
    src: url('font/gidole/gidole-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/gidole/gidole-regular-webfont.woff2') format('woff2'),
         url('font/gidole/gidole-regular-webfont.woff') format('woff'),
         url('font/gidole/gidole-regular-webfont.ttf') format('truetype'),
         url('font/gidole/gidole-regular-webfont.svg#gidoleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	background: url(img/bkg_right.jpg), #e7e7e7;
	background-repeat: no-repeat;
	background-position: right top;
	background-attachment: fixed;
	background-size: auto 75%, auto;
	font-family: Arial, sans-serif;
	font-size: 62.5%;
}

html, body #left {
	height: 100%;
}

header, footer {
	display: none;
}

.separator {
	width: 80%;
	border-top: 1px dotted #444;
	margin: 35px auto 20px auto;
}

/* LEFT */
#left {
	width: 30%;
	position: fixed;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-justify-content: space-around;
	    -ms-flex-pack: distribute;
	        justify-content: space-around;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}

.reglage {
	width: 90%;
	padding-top: 40px;
}

#left.bkg {
	background: url(img/bkg_left.jpg) repeat;
}

ul#nav {
	font-family: "exobold", Arial, Helvetica, serif;
	text-align: right;
	list-style-type: none;
}

ul#nav li {
	display: block;
	font-size: 32px;
	font-size: 2rem;
	line-height: 1.2em;
}

ul#nav li a {
	text-transform: uppercase;
	text-decoration: none;
	color: transparent;
	text-shadow: 0 0 1px #EEE;
	-webkit-transition: 0.15s ease-in;
}

ul#nav li a:hover {
	color: #aef95e;
	text-shadow: 0 0 3px #aef95e;
	margin-right: 10px;
}

ul#nav:hover li a {
	text-shadow: 0 0 2px #888;
}

#logos {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
}

#logos #logo-garage-lang {
	padding-top: 60px;
}

#logos img {
	padding: 15px;
	margin-left: 50px;
	width: 55%;
}

#footer {
	font-family: "gidole", Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-size: 19px;
	font-size: 1.2rem;
	color: #AAA;
	text-align: right;
	padding-top: 0px;
}

/* RIGHT */
#right {
	width: 70%;
	float: right;
}

/* SECTION */
.bloc {
	font-family: "gidole", Arial, Helvetica, sans-serif;
	background: #FFF;
	width: 80%;
	margin: 30px;
	font-size: 19px;
	font-size: 19px;
	font-size: 1.2rem;
	line-height: 1.4em;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */  /* Firefox 3.5 - 3.6 */
 	box-shadow: 2px 2px 10px 1px #AAA;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.bloc:hover {
	background: #EEE;
}

.bloc h2 {
	font-family: "exoextrabold", Arial, Helvetica, serif;
	text-align: right;
	font-size: 28px;
	font-size: 28px;
	font-size: 1.8rem;
	padding-top: 40px;
	padding-right: 50px;
	color: #0156a7;

	text-shadow: 1px 1px 3px #888;
}

.bloc h3 {
	color: #222;
}

.bloc li {
	list-style-image: url(img/cle1.png);
}

.bloc .hors-titre {
	padding: 1px 50px 40px 50px;
	text-align: justify;
	color: #444;
}

/* IMAGE GARAGE */
#image-garage {
	padding: 0px;
	font-size: 0px;
	font-size: 0px;
	font-size: 0rem;
}

#img-garage {
	width: 100%;
}

/* PRESTATIONS */

#prestations li p {
	text-align: left;
}

#taxe {
	text-align: right;
	font-style: italic;
}

/* LE GARAGE */

#experience blockquote {
	text-align: justify;
	border-left: 5px #CCC solid;
	margin-left: 20px;
	padding-left: 30px;
	font-style: italic;
}

#experience .hors-titre {
	text-align: left;
}

#nom {
	text-align: right;
	padding-right: 40px;
}

/* CONTACT */

#contact .bloc-contact {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-justify-content: space-around;
	    -ms-flex-pack: distribute;
	        justify-content: space-around;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}

#contact .blocs-contact {
	margin-top: 30px;
	text-align: center;
}

#contact img {
	width: 100px;
}

#contact h3 {
	display: none;
}

#contact .formulaire {
	padding-top: 40px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
}

#contact .formulaire .flex {
	width: 650px;
}

#contact .formulaire label {
	color: #444;
	font-size: 19px;
	font-size: 19px;
	font-size: 1.2rem;
	float: left;
	width: 20%;
	padding-top: 5px;
}

#contact .formulaire .text {
	color: #444;
	width: 70%;
	margin-bottom: 20px;
	padding: 3px;
}

#contact .formulaire .submit {
	background: #AAA;
	color: #222;
	font-family: "exobold", Arial, Helvetica, serif;
	text-decoration: none;
	position: relative;
	font-size: 16px;
	font-size: 16px;
	font-size: 1rem;
	padding: 8px 30px;
	margin-left: 130px;
	border-radius: 7px 15px 7px;
	box-shadow: 0px 4px 1px #0156a7, 0px 0px 5px #BBB;
}

.alert {
	padding: 30px;
	margin-bottom: 30px;
}

.alert-danger {
	background: #f48282;
	border: 1px #de4040 solid;
}

.alert-succes {
	background: #7ddb85;
	border: 1px #49bb54 solid;
}




/* MEDIA QUERIES */

@media (max-width: 1400px) {
	#contact .formulaire label { padding-left: 50px;}
    #contact .formulaire .text { width: 60%;}
    #contact .formulaire .submit { margin-left: 180px;}
	#logos img { width: 65%;}
}

@media (max-width: 1200px) {
	#contact .formulaire label { padding-left: 80px;}
    #contact .formulaire .text { width: 50%;}
    #contact .formulaire .submit { margin-left: 210px;}
	.bloc { width: 92.5%;}
	#logos img { width: 75%;}
}

@media (max-width: 1024px) {
	#logos img { width: 85%; }
	#left { display: none;}
	#right { width: 100%;}
	.bloc { width: 93%;}
    header, footer {
    	display: block;
    	background: url(img/bkg_left.jpg) repeat;
    }

    #contact .formulaire label { padding-left: 20px;}
    #contact .formulaire .text { width: 70%;}
    #contact .formulaire .submit { margin-left: 150px;}

    ul#nav-little {
		font-family: "exobold", Arial, Helvetica, serif;
		text-align: center;
		padding: 40px 0;
		list-style-type: none;
	}

	ul#nav-little li {
		display: inline;
		padding-left: 50px;
		font-size: 2rem;
	}

	ul#nav-little li:first-child {
		padding-left: 0;
	}

	ul#nav-little li a {
		text-transform: uppercase;
		text-decoration: none;
		color: transparent;
		text-shadow: 0 0 1px #EEE;
		-webkit-transition: 0.15s ease-in;
	}

	ul#nav-little li a:hover {
		color: #aef95e;
		text-shadow: 0 0 3px #aef95e;
		margin-right: 10px;
	}

	ul#nav-little:hover li a {
		text-shadow: 0 0 2px #888;
	}

	footer img { width: 30%;}
    footer {
    	display:-webkit-box;
    	display:-webkit-flex;
    	display:-ms-flexbox;
    	display:flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-webkit-flex-direction: column;
    	    -ms-flex-direction: column;
    	        flex-direction: column;
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	    -ms-flex-pack: center;
    	        justify-content: center;
    	-webkit-box-align: center;
    	-webkit-align-items: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    	clear:both;
    	padding: 50px 0 30px 0;
    }

    footer img:first-child {
    	padding-right: 100px;
    }

    footer .images {
    	display:-webkit-box;
    	display:-webkit-flex;
    	display:-ms-flexbox;
    	display:flex;
    	-webkit-box-orient: horizontal;
    	-webkit-box-direction: normal;
    	-webkit-flex-direction: row;
    	    -ms-flex-direction: row;
    	        flex-direction: row;
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	    -ms-flex-pack: center;
    	        justify-content: center;
    	-webkit-box-align: center;
    	-webkit-align-items: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    	padding-bottom: 20px;
    }

    footer .infos {
    	display:-webkit-box;
    	display:-webkit-flex;
    	display:-ms-flexbox;
    	display:flex;
    	-webkit-box-orient: horizontal;
    	-webkit-box-direction: normal;
    	-webkit-flex-direction: row;
    	    -ms-flex-direction: row;
    	        flex-direction: row;
    	-webkit-justify-content: space-around;
    	    -ms-flex-pack: distribute;
    	        justify-content: space-around;
    	-webkit-box-align: end;
    	-webkit-align-items: flex-end;
    	    -ms-flex-align: end;
    	        align-items: flex-end;
    }

    footer p {
    	text-align: center;
    	font-family: "gidole", Arial, Helvetica, sans-serif;
    	font-size: 1.3rem;
		color: #AAA;
    	padding: 0 25px;
    }
}
/*and (max-height: 699px)*/
@media (max-width: 850px)  {

	ul#nav-little li {
		padding-left: 40px;
		font-size: 1.7rem;
	}

	#contact .formulaire label { padding-left: 80px;}
    #contact .formulaire .text { width: 50%;}
    #contact .formulaire .submit { margin-left: 210px;}

	footer .infos {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
}
/*and (max-height: 699px)*/
@media (max-width: 700px)  {
	ul#nav-little li {
		display: block;
		padding-left: 0;
		line-height: 1.6em;
	}

	#contact .bloc-contact {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	#contact img {
		width: 90px;
	}
}
/*and (max-height: 699px) */
@media (max-width: 630px) {
	#contact .formulaire label { padding-left: 150px;}
    #contact .formulaire .text { width: 30%;}
    #contact .formulaire .submit { margin-left: 280px;}
}


/* RESPONSIVE HAUTEUR */
@media (max-height: 950px) {
	ul#nav li { font-size: 32px;}
	#logos #logo-garage-lang { padding-top: 55px;}
    #footer { font-size: 19px; margin-top: 60px;}
    #logos img { width:52.5%;}
}

@media (max-height: 900px) {
	ul#nav li { font-size: 31px;}
	#logos #logo-garage-lang { padding-top: 50px;}
    #footer { font-size: 19px; margin-top: 60px;}
    #logos img { width:50%;}
}

@media (max-height: 850px) {
	ul#nav li { font-size: 30px;}
	#logos #logo-garage-lang { padding-top: 45px;}
    #footer { font-size: 18px; margin-top: 50px;}
    #logos img { width:47.5%;}
}

@media (max-height: 800px) {
	ul#nav li { font-size: 29px;}
	#logos #logo-garage-lang { padding-top: 40px;}
    #footer { font-size: 17px; margin-top: 50px;}
    #logos img { width:45%;}
}

@media (max-height: 750px) {
	ul#nav li { font-size: 28px;}
	#logos #logo-garage-lang { padding-top: 30px;}
    #footer { font-size: 16px; margin-top: 35px;}
    #logos img { width:40%;}
}

@media (max-height: 700px) and (min-width: 1024px) {
	#logos img { width: 85%; }
	#left { display: none;}
	#right { width: 100%;}
	.bloc { width: 93%;}
    header, footer {
    	display: block;
    	background: url(img/bkg_left.jpg) repeat;
    }

    #contact .formulaire label { padding-left: 20px;}
    #contact .formulaire .text { width: 70%;}
    #contact .formulaire .submit { margin-left: 150px;}

    ul#nav-little {
		font-family: "exobold", Arial, Helvetica, serif;
		text-align: center;
		padding: 40px 0;
		list-style-type: none;
	}

	ul#nav-little li {
		display: inline;
		padding-left: 50px;
		font-size: 2rem;
	}

	ul#nav-little li:first-child {
		padding-left: 0;
	}

	ul#nav-little li a {
		text-transform: uppercase;
		text-decoration: none;
		color: transparent;
		text-shadow: 0 0 1px #EEE;
		-webkit-transition: 0.15s ease-in;
	}

	ul#nav-little li a:hover {
		color: #aef95e;
		text-shadow: 0 0 3px #aef95e;
		margin-right: 10px;
	}

	ul#nav-little:hover li a {
		text-shadow: 0 0 2px #888;
	}

	footer img { width: 30%;}
    footer {
    	display:-webkit-box;
    	display:-webkit-flex;
    	display:-ms-flexbox;
    	display:flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-webkit-flex-direction: column;
    	    -ms-flex-direction: column;
    	        flex-direction: column;
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	    -ms-flex-pack: center;
    	        justify-content: center;
    	-webkit-box-align: center;
    	-webkit-align-items: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    	clear:both;
    	padding: 50px 0 30px 0;
    }

    footer img:first-child {
    	padding-right: 100px;
    }

    footer .images {
    	display:-webkit-box;
    	display:-webkit-flex;
    	display:-ms-flexbox;
    	display:flex;
    	-webkit-box-orient: horizontal;
    	-webkit-box-direction: normal;
    	-webkit-flex-direction: row;
    	    -ms-flex-direction: row;
    	        flex-direction: row;
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	    -ms-flex-pack: center;
    	        justify-content: center;
    	-webkit-box-align: center;
    	-webkit-align-items: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    	padding-bottom: 20px;
    }

    footer .infos {
    	display:-webkit-box;
    	display:-webkit-flex;
    	display:-ms-flexbox;
    	display:flex;
    	-webkit-box-orient: horizontal;
    	-webkit-box-direction: normal;
    	-webkit-flex-direction: row;
    	    -ms-flex-direction: row;
    	        flex-direction: row;
    	-webkit-justify-content: space-around;
    	    -ms-flex-pack: distribute;
    	        justify-content: space-around;
    	-webkit-box-align: end;
    	-webkit-align-items: flex-end;
    	    -ms-flex-align: end;
    	        align-items: flex-end;
    }

    footer p {
    	text-align: center;
    	font-family: "gidole", Arial, Helvetica, sans-serif;
    	font-size: 1.3rem;
		color: #AAA;
    	padding: 0 25px;
    }
}*/