/* @override 
	http://projets.cayzac.info/cabinet88/assets/couleurs.css */


@font-face {
    font-family: 'euroMid';
    src: url('fonts/EurostileLTStd.eot');
    src: url('fonts/EurostileLTStd.eot?#iefix') format('embedded-opentype'),
        url('fonts/EurostileLTStd.woff2') format('woff2'),
        url('fonts/EurostileLTStd.woff') format('woff'),
        url('fonts/EurostileLTStd.ttf') format('truetype'),
        url('fonts/EurostileLTStd.svg#EurostileLTStd') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'euroBold';
    src: url('fonts/EurostileLTStd-Bold.eot');
    src: url('fonts/EurostileLTStd-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/EurostileLTStd-Bold.woff2') format('woff2'),
        url('fonts/EurostileLTStd-Bold.woff') format('woff'),
        url('fonts/EurostileLTStd-Bold.ttf') format('truetype'),
        url('fonts/EurostileLTStd-Bold.svg#EurostileLTStd-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'euroNormal';
    src: url('fonts/EurostileLTStd-Demi.eot');
    src: url('fonts/EurostileLTStd-Demi.eot?#iefix') format('embedded-opentype'),
        url('fonts/EurostileLTStd-Demi.woff2') format('woff2'),
        url('fonts/EurostileLTStd-Demi.woff') format('woff'),
        url('fonts/EurostileLTStd-Demi.ttf') format('truetype'),
        url('fonts/EurostileLTStd-Demi.svg#EurostileLTStd-Demi') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




body {
	text-align: center;
	font-family: euroMid, 'Jura', sans-serif;	
	padding: 0 5%;
	height: 100%;
}

/* Utility */
@media (max-width: 992px) {
	.mobile_not {
		display: none;
	}
}
@media (min-width: 992px) {
	.mobile_only {
		display: none;
	}
}
/* Le titre */
h1 {
	text-transform: uppercase;
	letter-spacing: 10px;
	position: relative;
	z-index: 2;
	margin-top: 50px;
	margin-bottom: 20px;
	
	position: fixed;
	top: 15px;
	left: 0;
	right: 0;
	line-height: 50px;
}
h1 > * {
	display: block;
	margin: auto;
}
h1 svg {
	width: 90px;
	margin-top: -1px;
	margin-bottom: 6px;
}
h1, h1 small {
	font-size: 24px;
}

strong {
	font-family: euroBold, 'Jura';
}

h1 .cercle {
	display: block;
	height: 150px;
	width: 150px;
	border-radius: 50%;
	position: absolute;
	
	right: calc(50% -  75px);
	top: calc(50% -  75px);
	z-index: -1;
}


/* La bande colorée */

.bande {
	display: block;
	position: fixed;
	width: 22px;
	right: calc(50% -  11px);
	top: -150px;
	bottom: -150px;
	z-index: -2;
	
}


/* La voiture */

.voitures {
	display: flex;
	flex-direction: column;
}
.voiture {
	height: 350px;
	display: block;
	margin: 90px auto -90px;
	z-index: 10;
	position: relative;
	
	min-height: 350px;
}
.voiture.recul {
/*	transform: rotate(180deg);*/
}

/* Les voitures en noir et blanc */
#parking {
	display: flex;
	align-items: flex-end;
	margin: auto;
	justify-content: space-around;
	
	position: fixed;
	top: 100%;
	left: 0;
	right: 0;
	
}
#parking img {
	width: calc(100% / 7);
	height: auto;
	transform-origin: 50% 0;
	transform: translate(0, 500px);
	max-width: 160px;
}
#parking img:nth-child(1) {
	transition: all 1.5s ease-in-out 0s;
}
#parking img:nth-child(2) {
	transition: all 2.2s ease-in-out 0s;
}
#parking img:nth-child(3) {
	transition: all 2.5s ease-in-out 0s;
}
#parking img:nth-child(4) {
	transition: all 1.7s ease-in-out 0s;
}
#parking img:nth-child(5) {
	transition: all 1.3s ease-in-out 0s;
}
#parking img:nth-child(6) {
	transition: all 1.4s ease-in-out 0s;
}



.parking #parking img {}

.parking #parking img:nth-child(1) {
	transform: translate(0, -540px);
}
.parking #parking img:nth-child(2) {
	transform: translate(0, -590px);
}
.parking #parking img:nth-child(3) {
	transform: translate(0, -570px);
}
.parking #parking img:nth-child(4) {
	transform: translate(0, -500px);
}
.parking #parking img:nth-child(5) {
	transform: translate(0, -510px);
}
.parking #parking img:nth-child(6) {
	transform: translate(0, -590px);
}

/* Footer */

footer {
	letter-spacing: 2px;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
a {
	padding-bottom: 10px;
	padding-top: 10px;
}

/* Pour le contact sur mobile : ils sont cachés avant click */

#showContact {
	border-radius: 50%;
	display: block;
	width: 50px;
	height: 50px;
	margin: auto auto 30px;
	line-height: 50px;
	cursor: pointer;
	font-size: 30px;
	letter-spacing: 0;
	z-index: 100;
	position: relative;
}
.mobileShowContact #showContact{
	transform: rotate(-90deg);
	margin-bottom: -10px;
}
.mobileShowContact {
	z-index: 10;
}
.contact  {
	padding-top: 15px;
	padding-bottom: 15px;
/*	display: none;*/
	margin-bottom: -180px;
}
.mobileShowContact .contact {
	margin-bottom: 0;
}
.contact p {
	width: 100%;
}

@media (min-width: 992px) {
	#showContact {
		display: none;
	}
	.contact {
		display: flex;
		justify-content: space-between;
		flex-grow: 0;
		flex-shrink: 0;
		width: 100%;
		flex-wrap: wrap;
		margin-bottom: 0;
		
		
		background: none !important;
	}
	
	.contact p {
		width: 50%;
	}
}


/* Aniùation */
body,
.bande,
.masque,
a {
	transition: all .8s ease-in-out 0s;
}
svg {
	transition: all .8s ease-in-out 0s;
}

/* Les jeux de couleurs */
.citroen,
.citroen .masque,
.citroen svg,
.citroen a {
	background-color: #d9d6dd;
	color: #6f1e18;
	fill: #6f1e18;
}
.citroen .bande {
	background-color: #6f1e18;
}

.renault,
.renault .masque,
.renault svg,
.renault a  {
	background-color: #4f70b3;
	color: #439bd0;
	fill: #439bd0;
}
.renault .bande {
	background-color: #439bd0;
}

.porsche,
.porsche .masque,
.porsche svg,
.porsche a {
	background-color: #f1d782;
	color: #5c96d1;
	fill: #5c96d1;
}
.porsche .bande {
	background-color: #5c96d1;
}

.porsche .voiture.v_porsche {
	transform: translate(0, -50px);
}
.parking .voiture.v_porsche {
	transform: translate(0, -150px);
}

.cactus,
.cactus .masque,
.cactus svg,
.cactus a {
	background-color: #cfc8c5;
	color: #97756a;
	fill: #97756a;
}
.cactus .bande {
	background-color: #97756a;
}
.cactus .voiture.v_cactus {
	transform: translate(0, -50px);
}
.parking .voiture.v_cactus {
	transform: translate(0, -150px);
}
.bmw,
.bmw .masque,
.bmw svg,
.bmw a {
	background-color: #781e1e;
	color: #e9d976;
	fill: #e9d976;
}
.bmw .bande {
	background-color: #e9d976;
}

.jaguar,
.jaguar .masque,
.jaguar svg,
.jaguar a {
	background-color: #354d29;
	color: #f3e9d7;
	fill: #f3e9d7;
}
.jaguar .bande {
	background-color: #f3e9d7;
}
.parking,
.parking .masque,
.parking svg,
.parking a {
	background-color: #868686;
	color: #4e4f57;
	fill: #4e4f57;
}
.parking .bande {
	background-color: #4e4f57;
}