@font-face {font-family: "Roundo-ExtraLight";src: url("../fonts/Roundo-ExtraLight.otf");}
@font-face {font-family: "Roundo-Light";src: url("../fonts/Roundo-Light.otf");}
@font-face {font-family: "Roundo-Regular";src: url("../fonts/Roundo-Regular.otf");}
@font-face {font-family: "Roundo-Medium";src: url("../fonts/Roundo-Medium.otf");}
@font-face {font-family: "Roundo-SemiBold";src: url("../fonts/Roundo-SemiBold.otf");}
@font-face {font-family: "Roundo-Bold";src: url("../fonts/Roundo-Bold.otf");}
@font-face {font-family: "Viga-Regular";src: url("../fonts/Viga-Regular.ttf");}

* { margin: 0; }
b { font-family: Roundo-Bold; font-weight: normal; }

.icon {
    height: 2.5vw;
    width: 2.5vw;
}
.icon img {
    width: 100%;
    height: 100%;
}

.mobile { display: none!important; }

/* START HEADER */
header section#navigation {
    display: flex;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    width: 80vw;
    height: 5vw;
    margin: auto;
    background: #FFFFFF;
}
header section#navigation img.icon_head {
/*	height: 70%;*/
	width: 25%;
}

header section#navigation article#socials {
	display: flex;
    align-items: center;
    column-gap: 0.7vw;
}
header section#navigation article#phone a {
	display: flex;
	align-items: center;
    column-gap: 0.5vw;
    font-family: Roundo-Bold;
    text-decoration: none;
    color: #000000;
    font-size: 1.2vw;
}

header .img_head {
	width: 100%;
}

header section#text {
	display: flex;
    flex-direction: column;
    position: relative;
    margin-top: -14vw;
    left: 16vw;
    width: fit-content;
    row-gap: 1.6vw;
}
header section#text article#titles {
	display: flex;
    flex-direction: column;
    width: fit-content;
}
header section#text article#titles .title {
	text-transform: uppercase;
	font-family: Viga-Regular;
	font-weight: normal;
	font-size: 1.6vw;
	width: fit-content;
}
header section#text article#titles .title1 {
	order: 1;
	padding: 1vw;
	background-color: pink;
}
header section#text article#titles .title2 {
	order: 3;
	padding: 1vw;
}
header section#text article#titles:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 1.2vw solid #000000;
    border-left: 0.8vw solid transparent;
    border-right: 0.8vw solid transparent;
    order: 2;
    top: -0.1vw;
    left: 6vw;
    position: relative;
}
header section#text article#resume {
	background-color: #FFFFFF;
	color: #000000;
	padding: 1vw 2.5vw;
	font-family: Roundo-Regular;
	font-size: 1.05vw;
	filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}
/* END HEADER */

/* START MAIN */
main {
	margin-top: 2vw;
    display: flex;
    flex-direction: column;
}

main section#form {
	display: flex;
    flex-direction: column;
    position: sticky;
    margin-top: -8vw;
    top: 4vw;
    left: 70%;
    width: 20%;
    z-index: 100;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 43px rgba(0, 0, 0, 0.08);
    /*
	position: absolute;
    top: 39vw;
    right: 10%;*/
}
main section#form h3 {
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
    font-family: Viga-Regular;
    font-size: 1.25vw;
    padding: 1vw;
}
main section#form article#confirmation {
	font-family: Roundo-Regular;
    flex-direction: column;
    row-gap: 2vw;
    width: 80%;
    margin: 3vw auto;
}
main section#form article#confirmation h4 {
	font-size: 1.1vw;
}
main section#form article#confirmation p {
	font-size: 0.85vw;
}
main section#form form {
	font-family: Roundo-Regular;
    font-size: 0.85vw;
    display: flex;
    flex-direction: column;
    row-gap: 2vw;
    width: 80%;
    margin: 3vw auto;
}
main section#form form article#civilite {
	display: flex;
	column-gap: 1.5vw;
}
main section#form form input:not(input[type="checkbox"]) {
	font-family: Roundo-Regular;
    font-size: 0.85vw;
    line-height: 1.4vw;
    border: none;
    background-color: #F6F6F6;
    padding: 0.4vw;
}
main section#form form article#project {
	display: flex;
	flex-direction: column;
	row-gap: 0.5vw;
}
main section#form form article#project div.project {
	display: flex;
	flex-direction: row;
    column-gap: 2vw;
    justify-content: center;
}
main section#form form article#optin {
	display: flex;
    flex-direction: row;
    column-gap: 1vw;
    font-size: 0.73vw;
}
main section#form form article#optin input {
	width: 5vw;
}
main section#form form button[type="submit"] {
	font-family: Roundo-Regular;
	font-size: 1.26vw;
	text-transform: uppercase;
	width: fit-content;
	margin: auto;
	padding: 0.2vw 2vw;
	background-color: #000000;
	color: #FFFFFF;
	border: none;
	border-radius: 27px;
}
main section.blocs {
	width: 100%;
}
main section#bloc1 {
	position: absolute;
}
main section#bloc2 {
	margin-top: 20vw;
}
main section#bloc1 img,
main section#bloc2 img {
	width: 70%;
}
main article#text > * {
	width: fit-content;
}
main article#text {
    display: flex;
    flex-direction: column;
    row-gap: 0.6vw;
	margin-left: 13%;
	width: fit-content;
	padding: 2vw;
	margin-top: -4vw;
	position: relative;
    margin-bottom: 4vw;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.29);
}
main article#text h3 {
	font-size: 1.3vw;
	font-family: Viga-Regular;
	font-weight: normal;
	text-transform: uppercase;
}
main article#text h4 {
	font-size: 1.15vw;
	font-family: Roundo-Bold;
}
main article#text ul {
	font-size: 1.1vw;
	font-family: Roundo-Regular;
}
/* END MAIN */

/* START FOOTER */
footer {
    background-color: #F6F6F6;
    padding: 2vw 10vw;
    text-align: justify;
    font-family: Roundo-Regular;
}
footer section#links {
	display: flex;
	flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vw;
}
footer section#links article#left {
    display: flex;
    flex-direction: column;
    row-gap: 0.7vw;
    align-items: center;
    font-size: 1.35vw;
    font-family: Roundo-Bold;
}
footer section#links article#left img {
	width: 22vw;
}
footer section#links article#left a {
    text-decoration: none;
    color: #000000;
}
footer section#links article#right {
	display: flex;
	flex-direction: column;
	row-gap: 1vw;
}
footer section#links article#right a.phone {
	display: flex;
	flex-direction: row;
	align-items: center;
    column-gap: 1vw;
    text-decoration: none;
    color: #000000;
    font-family: Roundo-Bold;
    font-size: 1.2vw;
}
footer section#links article#right div.socials {
	display: flex;
	flex-direction: row;
	column-gap: 0.8vw;
	justify-content: flex-end;
}
footer section#mentions {
	display: flex;
	flex-direction: column;
	row-gap: 1vw;
}
footer section#mentions p {
	font-size: 0.85vw;
}
/* END FOOTER */

/* MOBILE */
@media (max-width: 768px) {
	.desktop { display: none!important; }
	.mobile { display: block!important; }

	.icon {
	    height: 6.5vw;
	    width: 6.5vw;
	}

	/* START HEADER */
	header section#navigation img.icon_head {
		width: 43%;
	}
	header section#navigation {
		height: 10vh;
		width: 94%;
	   	justify-content: space-between;
	}
	header section#navigation article#phone a {
		font-size: 3.7vw;
	}
	header section#text {
	    margin-top: -40vw;
		left: 3vw;
	    row-gap: 3.6vw;
	}
	header section#text article#titles .title {
		font-size: 5.6vw;
	    padding: 3vw;
	}
	header section#text article#titles:after {
	    border-top: 3.6vw solid #000000;
	    border-left: 1.8vw solid transparent;
	    border-right: 1.8vw solid transparent;
	    left: 24vw;
	}
	header section#text article#resume {
		padding: 5vw 7vw;
	    font-size: 4.2vw;
	}
	/* END HEADER */

	/* START MAIN */
	main {
		margin-top: 10vw;
	}
	main section#form {
		order: 3;
	    position: relative;
	    top: unset;
	    right: unset;
	    left: unset;
	    margin-top: unset;
	    width: 100%;
	}
	main section#form article#confirmation h4 {
		font-size: 4.73vw;
	}
	main section#form article#confirmation p {
		font-size: 3.73vw;
	}
	main article#form-button {
	    position: fixed;
	    bottom: 5vw;
	    width: 100%;
	    text-align: center;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.5s ease;
	}
	main article#form-button.visible {
	    opacity: 1;
        transition: opacity 0.5s ease;
	}
	main article#form-button h4 {
		background-color: #000000;
	    color: #FFFFFF;
	    text-transform: uppercase;
	    width: fit-content;
	    margin: auto;
        padding: 5vw;
	    font-family: Viga-Regular;
	    font-size: 4.8vw;
	    font-weight: normal;
	}
	main section#bloc1 {
		position: unset;
	}
	main section#bloc2 {
		margin-top: unset;
	}
	main section#bloc1 img,
	main section#bloc2 img {
		width: 100%;
	}
	main article#text {
		width: 100%;
	    margin: -1vw auto 4vw auto;
	    padding: 7vw 2vw;
	    row-gap: 2.6vw;
	}
	main article#text h3 {
		font-size: 4vw;
		width: fit-content;
		margin: auto;
		text-align: center;
	}
	main article#text h4 {
		font-size: 3.8vw;
		width: fit-content;
		margin: auto;
		text-align: center;
	}
	main article#text ul {
		font-size: 3.4vw;
	}
	main section#form form {
		font-size: 4vw;
		row-gap: 4vw;
		margin: 7vw auto;
	}
	main section#form h3 {
		font-size: 4.8vw;
    	padding: 5vw;
	}
	main section#form form input:not(input[type="checkbox"]) {
	    font-size: 4vw;
	    line-height: 7vw;
	    padding: 1vw;
	}
	main section#form form button[type="submit"] {
		font-size: 6.26vw;
	    padding: 3.2vw 7vw;
	}
	main section#form form article#project {
		row-gap: 2.5vw;
	}
	main section#form form article#optin {
		column-gap: 3vw;
		font-size: 3.73vw;
	}
	/* END MAIN */

	/* START FOOTER */
	footer {
		padding: 6vw 10vw;
	}
	footer section#links {
		flex-direction: column;
		row-gap: 3vw;
	}
	footer section#links article#left,
	footer section#links article#right {
		flex-direction: row;
		column-gap: 4vw;
	}
	footer section#links article#left {
	    font-size: 3.35vw;
	}
	footer section#links article#left img {
	    width: 40vw;
	}
	footer section#links article#right a.phone {
		font-size: 3.2vw;
	}
	footer section#links article#right div.socials {
		column-gap: 1.8vw;
	}
	footer section#mentions {
	    row-gap: 4vw;
	}
	footer section#mentions p {
	    font-size: 2.85vw;
	}
	/* END FOOTER */
}