@font-face {
	font-family: "Din-Bold";
	src: url("fonts/FF_DIN_Bold.otf") format("opentype")
}

@font-face {
	font-family: "Din-Light";
	src: url("fonts/FF_DIN_Light.otf") format("opentype")
}

body {
	margin: 0px;
}

h1, h2 {
	margin-top: 20px;
	margin-bottom: 20px;
}

p {
	display: flex;
	flex-direction: column;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* Header */

header {
	display: flex;
    align-items: center;
	max-width: 1290px;
	margin-left: auto;
	margin-right: auto;
	padding-top:20px;
	padding-bottom: 20px;
}

a.logo {
    display: flex;
    align-items: baseline;
    font-size: 30px;
    text-decoration: none;
    color:#07636f;
    font-family: "Din-Bold"
}

a.logo span {
	color:#ea501a;
	font-family: "Din-Light"
}

a.logo p {
	font-size: 20px;
	margin-left:20px;
}

nav {
	display: flex;
    margin-left: auto;
}

nav ul {
	display: flex;
	list-style: none;
}

nav a {
	font-size: 20px;
	margin-left: 20px;
	text-decoration: none;
	color:#07636f;
    font-family: "Din-Bold"
}


/* Home */


section {
	display: flex;
	flex-direction: column;
}

.round-logo {
	display: flex;
    position: absolute;
    top: 40%;
    left: 10%;
}

.round-logo img {
	border-radius: 100%;
    width: 350px;
}


.savoir-faire {
	display: flex;
	flex-direction:row;
}

.savoir-faire p {
	width: 50%;
}

.savoir-faire-txt p {
    font-family: "Din-Light";
    font-size: 25px;
    color: #07636f;
    width: 100%;
}

.savoir-faire div {
	display: flex;
    flex-direction: column;
    width: 50%;
    align-items: baseline;
    justify-content: center;
    margin-left: 5%;
}

.savoir-faire h2 {
	font-family: "Din-Light";
    font-size: 25px;
    color: #07636f;
}

.savoir-faire p  {
	font-family: "Din-Light";
    font-size: 20px;
    color: #07636f;
}

.container {
    width: calc(100% - 20%);
    max-width: 1280px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}

.col-3 {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.col-3 img {
	width: 100%;
}

.no-cut h2 {
	font-family: "Din-Light";
    font-size: 35px;
    color: #ea501a;	
}

ul.list-3 {
    column-count: 3;
    font-size: 20px;
    color: #ea501a;
    font-family: "Din-Light";
    padding-inline-start: 20px;
    margin-bottom: 40px;
}

ul.list-3 li {
	max-width: 95%;
}

.technique {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.technique h2 {
	font-family: "Din-Light";
    font-size: 30px;
    color: #07636f;	
}

.technique p {
	font-family: "Din-Light";
    font-size: 20px;
    color: #07636f;
    max-width: 95%;	
}

.technique ul {
	font-family: "Din-Light";
    font-size: 20px;
    color: #07636f;
    padding-inline-start: 20px;
    max-width: 95%;
    margin-top: 0px;
}

.technique ul li {
	margin-bottom: 15px;
}

.col-2 {
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
    width: calc(50% - 10px);
}

#services {
	margin-bottom: 100px;
}

#services > .col-2 {
	justify-content: center;
}

#qui-sommes-nous h2 {
    font-family: "Din-Bold";
    font-size: 70px;
    color: #ea501a;
    line-height: 65px;
    letter-spacing: 7px;
    margin-bottom: 40px;
}

#qui-sommes-nous span {
	font-family: "Din-Light";
}

.contact {
	background-image: url("Light/Footer.jpg");
	background-size: cover;
	font-family: "Din-Light";
	color: white;
}

.contact .col-2 {
	margin-left: 50px;
	padding-top: 100px;
	padding-bottom: 100px;
	grid-gap: 5px;
}

.contact h2 {
	font-size: 40px;
}

.contact h3 {
	font-size: 30px;
	font-weight: 400;
}

p.infos {
	flex-direction: row;
    align-items: center;
    font-size: 25px;
    line-height: 25px;
}

.infos img {
	width: 20px;
	height: auto;
	margin-right: 5px;
}

p.adresse {
	font-size: 25px;
	margin-top: 50px;
}

/* Footer */

footer {
	display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 18px;
    color:#07636f;
    font-family: "Din-Light";
    padding-top: 20px;
    padding-bottom: 20px;
}

footer a {
	color:#07636f;
    font-family: "Din-Light";
    text-decoration: none;

}

@media (max-width: 1024px) and (orientation:portrait) {

	

}

@media (max-width: 1440px) and (orientation:landscape) {

	

}


@media (max-width: 980px) and (orientation:landscape) {


	
}

@media (max-width: 980px) and (orientation:portrait) {
	
	
}

@media (max-width: 767px) {
	

	
}

@media (max-width: 479px) {
	

	
}