@font-face {
    font-family: 'signatureregular';
    src: url('../fonts/signatur-webfont.woff2') format('woff2'),
         url('../fonts/signatur-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html{
  width: auto;
}

*{
    margin: 0;
    padding: 0;
}

.majuscule {
  font-family: signatureregular;
  font-size: 40px;
}

.majuscule2{
  font-family: signatureregular;
  font-size: 60px;
}

body {
	font-family: "Arial", sans-serif;
	font-size: 14px;
	color: #333333;
	background-color: #fff;
}

/* HEADER */

ul, li{
	list-style-type: none;
}

#menu {
	display: flex;
	justify-content: space-around;
}

#logo {
	float: left;
	margin: 1% 0 0 5%;
}

a {
	color: #4a4e52;
	text-decoration: none;
}

a:hover {
	color: #121926;
	text-decoration: none;
}

.boutton:hover{
	padding: 0 0 2.8vw 0;
	border-bottom: 4px solid #121926;
}

#navbar {
	margin-top: 33px;
	display:inline-flex;
	float: right;
}

.boutton {
	margin-right: 50px;
	font-size: 20px;
}

.bouttonactif{
  margin-right: 50px;
  font-size: 20px;
  border-bottom: 4px solid #121926;
  padding: 0 0 2.8vw 0;
  color: #121926;
}

/* MAIN IMAGE */

#main-image {
    height: 580px;
		background : url(../images/main1test1.jpg) center;
}

.wrapper {
      width: 1000px;
      margin: 0 auto;
      padding: 0 10px;
      text-align: center;
}

#main-image h2 {
  -webkit-text-stroke: 0.5px #FEFEFE;
  -webkit-text-fill-color: #121926;
  font-size: 55px;
  font-weight: normal;
  text-align: center;
  padding: 150px 0 40px 0;
  margin-bottom: 20px;
}

.dore {
  font-size: 85px;
  font-family: signatureregular;
  color: #121926;
}

.button1 {
    width: 150px;
    height: 50px;
    display: block;
    background: #121926;
    color: #FEFEFE;
    font-size: 20px;
    margin: 0 auto;
    line-height: 50px;
    text-align: center;
    border-radius: 3px;
}

.button1:hover{
    background: #333333;
    color : #FEFEFE;
}
/* STEPS */

#stepsliste{
  display: flex;
  justify-content: center;
  flex-direction: row;
    margin: 125px 0 0 0;
}

#steps h4{
    text-align: center;
    font-size: 25px;
    margin-top: 100px;
    margin-bottom: 20px;
}

#steps p{
  text-align: center;
  display: flex;
  font-size: 20px;
  font-family: "Arial", sans-serif;
  line-height: 20px;
  padding: 0 10% 0 10%;
  margin-bottom: 80px;
}

#step1{
    background: url("../images/steps-icon-1opti.png") no-repeat top center;
}

#step2{
    background: url("../images/steps-icon-2opti.png") no-repeat top center;
}

#step3{
    background: url("../images/steps-icon-3opti.png") no-repeat top center;
}

/* A propos */


#aboutimage img{
  border-radius: 60px;
}

/*Footer*/

#footer{
  width: 100%;
  height: 100%;
  margin-top: 125px;
  background-color: #121926;
  padding-top: 30px;
}

.titres{
  margin-bottom: 20px;
  text-align: center;
}

#footer .titres .listefooter{
  display: inline-block;
  width: 25%;
  text-align: center;
}

h5{
  font-size: 20px;
}

.listefooter{
  display: flex;
  justify-content: center;
  color: white;
  padding: 0px 20px;
}

#footer a{
  display: flex;
  justify-content:center;
  color: white;
}

#footer a:hover{
  color: #4a4e52;
}

.sousliste{
  box-shadow: 0px 1px 1px #4a4e52;
  width: 100%;
}

.sousliste li{
  font-size: 16px;
  line-height: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}

#copyright{
  color: #121926;
  background-color: #FEFEFE;
  margin-top: 50px;
  opacity: 15%;
  padding: 20px 20px 20px 20px;
  display: flex;
  justify-content: space-between;
}

/* GALERIE */

#main-image-galerie{
    height: 580px;
		background : url(../images/galerie_main2.jpg) center;
}

h3{
  margin-top: 125px;
  text-align: center;
  font-size: 40px;
}

#albums{
  display: flex;
  text-align: center;
}

#albumsliste{
    width: 90%;
    display: inline-flex;
    margin-top: 75px;
    text-align: center;
    justify-content: space-between;
}

#albumsliste img{
  width: 100%;
}

.album123{
  margin-right: 20px;
}

#albums h4{
    text-align: center;
    font-size: 25px;
    margin-bottom: 125px;
}

.panoramas{
  margin-bottom: 75px;
}

.panoramas img{
  width: 100%;
  height: 550px;
}

.panoramas:last-child{
  margin-bottom: 0;
}

/* Contact */

#main-image-contact{
    height: 580px;
		background : url(../images/contact_main1test.jpg) center;
}

#contact{
  display: flex;
  text-align: center;
}

label{
  font-size: 20px;
}

form{
  margin : 5% 10% 10% 10%;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=email], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=tel], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  border: none;
  cursor: pointer;
  width: 150px;
  height: 50px;
  background: #121926;
  color: #FEFEFE;
  font-size: 16px;
  border-radius: 3px;
}

input[type=submit]:hover {
  background-color: #4a4e52;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

#confmail{
  padding:20px;
  margin-bottom: 100px;
  background-color: #121926;
  color: white;
}

/* Camions */

.main-image-camions{
  height: 580px;
  background: url(../images/galerie_main2.jpg) center;
}

#cataloguecamion{
  width: 100%;
  display: flex;
  text-align: center;
}

#fondlogo{
    background: url(../images/logooptifond.JPG) center no-repeat;
}

.camionliste{
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
}

.camionliste li:first-child img{
  border-radius: 30px 0 0 30px;
}

.camionliste li:last-child img{
  border-radius:0 30px 30px 0;
}

.camionliste li{
  padding-top: 75px;
}

#numerospages{
  text-align: center;
  padding-top: 90px;
  font-size: 15px;
}

#numactif{
  font-size: 20px;
  color: #121926;
}

.back{
    width: 150px;
    height: 50px;
    display: block;
    background: #121926;
    color: #FEFEFE;
    font-size: 16px;
    margin: 50px auto;
    line-height: 50px;
    text-align: center;
    border-radius: 3px;
}

.back:hover{
    background: #333333;
    color : #FEFEFE;
}


/* Remorques */

.main-image-remorque{
  height: 580px;
  background: url(../images/galerie_main2.jpg) center;
}

#catalogueremorque{
  display: flex;
}

#remorqueliste{
  display: flex;
  flex-direction: column;
}

.remorque img{
  width: 70%;
  height: 400px;
  border-radius: 30px 0 0 30px;
 }

.remorque{
  display: inline-flex;
  justify-content: center;
  padding-top: 5%;
}

.descriptionremorques{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  width: 20%;
  background-color: #121926;
  border-radius: 0 30px 30px 0;
}

.descriptionremorques li{
  font-size: 18px;
  color: white;
}

/* Chantiers */

.main-image-chantier{
  height: 580px;
  background: url(../images/galerie_main2.jpg) center;
}

#listechantiers{
  text-align: center;
  margin-top: 75px;
}

.photoschantiers img{
  border-radius: 30px 30px 30px 30px;
}

.photoschantiers p{
  color: #121926;
  font-size: 16px;
  margin-bottom: 100px;
}
.photoschantiers:last-child{
  margin-bottom: -50px;
}