*
	{
	font-family: Calibri, arial, sans-serif;
	}

html
	{
	scroll-behavior: smooth;
	aoverflow: auto;
	overflow-x: hidden;
	min-height: 100%;
	}

body
	{
	background-image: url("../img/marble-1006628_1920.jpg");
	background-color: #ccc;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	}

header
	{
	position: relative;
	background-color: rgba(0, 0, 0, 0.33);
	padding-bottom: 15vh;
	}

h1
	{
	color: rgba(255, 255, 255, 1);
    font-size: 17.5vh;
	font-family: Calibri, arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
	margin: 0px;
    padding-top: 6.5vh;
    padding-bottom: 2.5vh;
	}

h2
	{
	color: rgba(255, 255, 255, 1);
	text-align: center;
	font-size: 4.5vh;
	padding-left: 10vw;
	padding-right: 10vw;
	}

h3
	{
	color: #FF6400;
	font-size: 4vh;
	font-weight: bold;
	}

#car
	{
	position: absolute;
	left: 0px;
	bottom: -5px;
	width: 15vw;
	z-index: 2;
	}

.cargo
	{	
	-webkit-animation-name: caranim;
	-webkit-animation-duration: 7.5s;
	-moz-animation-name: caranim;
	-moz-animation-duration: 7.5s;
	animation-name: caranim;
	animation-duration: 7.5s;
	animation-timing-function: cubic-bezier(0.4, 0.3, 0.7, 1);
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
    animation-delay: 0s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	}
	
@keyframes caranim
	{
	0%
		{
		left: -20%;
		}
		
	100%
		{
		left: calc(50% - 7.5vw);
		}
	}
	
@media (max-width: 768px)
	{
	header
		{
		padding-bottom: 12.5vh;
		}
		
	h1
		{
		font-size: 8vh;
		}
	
	h2
		{
		font-size: 3.33vh;
		}
	
	#car
		{
		width: 50vw;
		}
	
	@keyframes caranim
		{
		0%
			{
			left: -50%;
			}
			
		100%
			{
			left: calc(50% - 25vw);
			}
		}
	}


main
	{
	background-image: url("../img/bg-body.jpg");
	background-color: #ccc;
	background-position: center;
	color: #333;
	padding: 10vh 10vw;
	padding-bottom: 1vh;
	}

@media (max-width: 768px)
	{
	main
		{
		padding: 10vh 5vw;
		padding-bottom: 2.5vh;
		}
	}

#who
	{
	background-color: rgba(255, 255, 255, 0.5);
	padding: 2.5vh 2.5vw;
	border-radius: 1vh;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
	}

#who img
	{
	margin-left: 1vw;
	border-radius: 0.5vh;
	}
	
#who p
	{
	text-align: justify;
	font-size: 2.5vh;
	}

#who .fa
	{
	width: 2vw;
	}

@media (max-width: 768px)
	{
	#who
		{
		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
		padding: 0.25vh 2.5vw;
		}
	
	#who img
		{
		margin-left: 2.5vw;
		}
	
	#who .fa
		{
		width: 5vw;
		}
	}

#devis
	{
	background-color: #6181A1;
    text-align: center;
    padding: 10px;
    color: white;
    font-size: 25px;
    width: 400px;
	}

@media (max-width: 768px)
	{
	#devis-ext
		{
		margin-top: 3.33vh;
		}
	
	#devis-ext iframe
		{
		width: 100% !important;
		}
	
	#devis
		{
		width: 100%;
		}
	}

#blocks
	{
	margin: 10vh 0px;
	}

#blocks .block
	{
	display: inline-block;
	vertical-align: top;
	margin: 1vw;
	width: 27.5%;
	}

#blocks .block img
	{
	width: 100%;
	border-radius: 1vh;
	transition: all 0.5s ease-in-out;
	}


#blocks .block img:hover
	{
	transform: scale(1.1);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
	}

#blocks .block p
	{
	margin-top: 1vh;
	font-size: 2.5vh;
	color: #111;
	}

@media (max-width: 768px)
	{
	#blocks .block
		{
		width: 100%;
		margin: 0px;
		margin-bottom: 1vh;
		}
	}

#contact h4
	{
	margin-top: 5vh;
	text-align: center;
	font-size: 5vh;
	}

#contact #telephone
	{
	text-align: center;
	font-size: 10vh;
	color: #FF6400;
	letter-spacing : 0.66vw;
	}

#contact #email
	{
	text-align: center;
	font-size: 3.33vh;
	}

@media (max-width: 768px)
	{
	#contact h4
		{
		font-size: 3.33vh;
		}

	#contact #telephone
		{
		text-align: center;
		font-size: 5vh;
		}
	
	#contact #email
		{
		font-size: 2.5vh;
		}
	}