/* Common style - - - - - - - - - - - - - - -
 Blue
 Lighter color: 83A2B0
 Light color: 015F86
 Dark color: 1D3946

 Red
 Lighter color: ???
 Light color: D00047
 Dark color: 8F0042
*/

:root {
    font-family: 'Source Sans Pro', sans-serif;
}
.lancelot {
    color: #015f86;
    font-family: 'Cinzel', 'Times new roman';
    font-size: larger;
    font-weight: bold;
}
body {
	font-size: 16px;
}

#body {
    width: 100%;
    height: auto;
    padding-top: 70px;
    text-align: center;
}
#body div#content {
    width: 70%;
    margin-left: 14%;
    text-align:left;
}
.threeD {
    display: flex;
    padding: 0 120px 90px 50px;
}
.threeD div {
    transform: translate3d(0, 1em, 0) scale3d(1, 1, 1) rotateX(19deg) rotateY(-19deg) rotateZ(19deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    will-change: transform;
}
.threeD div.main {
}
.threeD div.second {
    margin: 30px;
    position: absolute;
    opacity: 70%;
}
.threeD div.third {
    margin: 60px;
    position: absolute;
    opacity: 70%;
}
#background {
    top: 25px;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    z-index: -1;
}
.xleft {
	color: #015f86;
	float: left;
}
#background img {
    opacity: 0.2;
    width: 80%;
    height: auto;
    margin: auto;
    display: flex;
}
#footer {
	font-size: x-small;
}
#footer .xleft {
	float: left;
	width: 50%;
}
#footer .xright {
	float: right;
	width: 50%;
	text-align: right;
}

/* Menu: */
#header {
    background-color: white;
    position: absolute;
    padding-top: 10px;
    display: block;
    width: 100%;
    height: auto;
    width: 100%;
    height: 67px;
    z-index: 1;
}
#top {
    background-color: white;
    border-bottom: 1px solid #015f86;
    position: absolute;
    padding-top: 10px;
    display: flex;
    width: 70%;
    height: auto;
    margin-left: 14%;
}
#top div#logoText {
	font-size: 13px;
    padding-top: 16px;
}
#top div#menu {
    padding-top: 14px;
}
#top a {
    color: #015f86;
    margin: 0;
    padding: 5px 5px;
    text-decoration-line: none;
}
#top div#logoText a,
.domainName {
    color: #8F0042;
    font-family: 'Cinzel', 'Times new roman';
    font-weight:bold;
    font-size:19px;
    text-decoration: none;
}
.domainName LctHld {
    color: #015F86;
}
h1 .domainName,
.h1 .domainName {
    font-size:1em;
}
h2 .domainName,
.h2 .domainName {
    font-size:1em;
}
#top img,
img.logo {
    width: 50px;
    position: relative;
    z-index: 1;
}
header {
    z-index: 10;
    position: fixed;
    top: 0;
    width: 100%;
}
#menu ul {
    list-style-type: none;
    padding: 4px 0 0 10px;
    display: flex;
    justify-content: space-around;
}
#menu li {
    margin: 0 15px;
}
#menu a {
    font-weight: normal;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
#menu a.selected {
    text-decoration: underline;
}
#logoText a.selected,
#menu a.selected {
    text-decoration: underline;
}
.hide, #nav-menutrigger {
    display: none;
}
#nav-menutrigger-button {
    display: none;
}
a:link {
	color: #015f86;
}
a.text {
	color: inherit;
}

h1, h2, h3,
.h1, .h2, .h3 {
    color: #015f86;
    font-family: 'Cinzel', 'Times new roman';
}
.h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;
    unicode-bidi: isolate;
}
img {
	border: none;
}
ul {
	margin-top: 0;
}
#print {
	float: right;
	position: inherit;
}
#print img {
	border-style: none;
}
.pdfDetail {
	margin-left: 5px;
}

/* Lancelot Style - - - - - - - - - - - - -*/
table.lancelot {
	border-width: 1px;
	border-color: #015f86;
	border-style: solid;
}
div.clear {
	clear: both;
	visibility: hidden;
}
div.clear hr {
	display: none;
}

/* Manage space between important blocs */
h2, h3,
.h2, .h3,
div.p {
    margin-top: 2em;
}
div.b {
    font-weight: bold;
}
div.br {
    margin-top: 1em;
}
div.equipe,
div.timeline {
    margin-top: 3em;
}

/* Content templates and styles */
#content .displaySplit {
    display: flex;
}
#content #contentHeader {
    background-position: center -100px;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 2px;
    text-align: center;
    width: 100%;
    height: 435px;
}
#content #contentHeader.index {
    background-image: url('/images/photos/shutterstock_2496568003_women-click-onscreen.jpg');
}

#contentContact {
    align-content: center;
}
#contentPhone {
}
#contentPhone img {
    width: 200px;
}
.countries img {
    height: 13px;
}
.countries {
    margin-top: 20px;
}


/* Formation and others Elements - - - - - - - */
div.equipe,
div.formations,
div.languages,
div.services,
div.goto {
    box-sizing: border-box;
    flex-wrap: wrap;
}
div.equipe,
div.goto {
    display: flex;
    justify-content: left;
    align-items: center;
}
div.goto {
    justify-content: center;
    margin-top: 4em;
}
div.formations,
div.languages,
div.services {
    max-width: 100%;
}
div.formations > div,
div.languages,
div.services > div {
    margin-bottom: 1em;
    width: 100%;
}

div.element {
    border: 1px solid #015f86;
    border-radius: 6px;
    cursor: pointer;
    display: inline-block;
    padding: 0;
    margin: 3px;
    vertical-align: top;
    box-sizing: border-box;
}
div.element > div {
    padding: 4px 0 4px 10px;
}
div.element > div.main {
    color: white;
	cursor: pointer;
    font-weight: bold;
    height: 37px;
}
div.element > div.content {
    border-radius: 3px;
    background-color: white;
	cursor: default;
    margin: 4px 4px 0 4px;
}
div.contentHidden > div.content {
    display: none;
}
div.element > div.status {
    display: flex;
    height: 50px;
}
div.status > div {
    margin-right: 5px;
}
div.duration {
    background-image: url(../images/circle-blue.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    color: #015F86;
    width: 50px;
    height:50px;
    position: relative;
    cursor:default;
}
div.ready {
    /*background-image: url(../images/ready-green-100.png);*/
    background-repeat: no-repeat;
    background-size: 100%;
    color: white;
    width: 50px;
    height:50px;
    position: relative;
}
div.duration span {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    font-size: xx-large;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div.equipe div.main,
div.formations div.main,
div.services div.main {
    align-content: center;
    background-repeat: no-repeat;
    background-size: 40px;
    background-position-x: 4px;
    background-position-y: center;
    padding-left: 60px;
}
div.equipe div.main h2,
div.formations div.main h2,
div.services div.main h2 {
    font-size: inherit;
    font-family: inherit;
    margin-block-start: inherit;
    margin-block-end: inherit;
    margin-top:inherit;
}
div.element.equipe {
    border: 1px solid #015f86;
    background-color: #015f86;
    border-radius: 6px;
    cursor: pointer;
    display: inline-block;
    padding: 0;
    margin: 3px;
    vertical-align: top;
    flex: 1;
    box-sizing: border-box;
    min-width: 270px;
    max-width: 290px;
    width: 270px;
    text-align: center;
}
div.equipe.element div.main {
    cursor: default;
    padding-left: 0;
    text-align:center;
    width: 100%;
    height: 35px;
}
div.equipe.element > div {
    width: inherit;
    height: inherit;
}
div.equipe.element * img {
    min-width: 180px;
    max-width: 270px;
}
div.equipe div.links {
    padding: 0 0 1px 2px;
    text-align: left;
}
div.equipe * img.card,
div.equipe * img.cv,
div.equipe * img.linkedin {
    background-repeat: no-repeat;
    background-size: 100%;
}
div.equipe * img.card,
div.equipe * img.linkedin {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
}
div.equipe * img.cv {
    min-width: 30px;
    min-height: 30px;
    width: 30px;
    height: 30px;
    vertical-align: super;
}
div.formations #formationGoogleCloud div.main {
    background-image: url(../images/google-100.png);
}
div.formations #formationGoogleAdmin div.main {
    background-image: url(../images/google-workspace-round-100.png);
}
div.formations #introductionIAGenerative div.main {
    background-image: url(../images/ia-bot.svg);
}
div.formations #formationLinux div.main {
    background-image: url(../images/linux-100.png);
    background-position-y: 4px;
    height: 45px;
}
div.formations #formationLinuxBash div.main {
    background-image: url(../images/bash-box-white-100.png);
    background-position-y: 4px;
    height: 45px;
}
div.services #serviceAMOA div.main {
    background-image: url(../images/service-amoa.svg);
}
div.services #serviceArchitecture div.main {
    background-image: url(../images/service-architecture.svg);
}
div.services #serviceData div.main {
    background-image: url(../images/service-data-analysis.svg);
}
div.services #serviceDataCollector div.main {
    background-image: url(../images/service-data-collector.svg);
}
div.services #serviceDNS div.main {
    background-image: url(../images/service-dns.svg);
}
div.services #serviceDevMobil div.main {
    background-image: url(../images/service-mobil.svg);
    background-position-y: 4px;
    height: 63px;
}
div.services #serviceAPI div.main {
    background-image: url(../images/service-api.svg);
}
div.services #serviceDevScripting div.main {
    background-image: url(../images/service-scripting.svg);
    background-position-y: 4px;
    height: 45px;
}
div.services #serviceDevWebDigital div.main {
    background-image: url(../images/service-application.svg);
}
div.services #serviceGestionProjetMetier div.main {
    background-image: url(../images/service-project.svg);
}
div.services #serviceGraphic div.main {
    background-image: url(../images/service-graphic.svg);
}
div.services #serviceIntegrator div.main {
    background-image: url(../images/service-integrator.svg);
}
div.services #serviceMOE div.main {
    background-image: url(../images/project-moe-100.png);
}
div.services #serviceSEO div.main {
    background-image: url(../images/service-seo.svg);
}
div.services #serviceWeb div.main {
    background-image: url(../images/service-website.svg);
}
div.services.ideas,
div.services.problems,
div.languages div.language {
    background-repeat: no-repeat;
    background-size: 80px;
    background-position-x: 10px;
    background-position-y: center;
    cursor: pointer;
    padding-left: 100px;
    min-height: 80px;
    align-content: center;
}
div.services.ideas {
    background-image: url(/images/ideas.svg);
}
div.services.problems {
    background-image: url(/images/problem.svg);
}
div.languages div.language {
    background-repeat: no-repeat;
    background-size: 60px;
}
div.languages div.language.pair {
    border-radius: 10px;
    background-color: #F5F5F5;
}
div.languages div.language:hover {
    font-size: 17px;
    font-weight: bold;
    background-size: 65px;
}
div.languages div.language.current,
div.languages div.language.current:hover {
    background-size: 60px;
    cursor: default;
    font-size: inherit;
    font-weight: inherit;
    opacity: .5;
}

img.profil {
    width:50px;
}
img.environnement {
    height:20px;
}
div.profil {
    background-repeat: no-repeat;
    background-size: 66px;
    color: #D00047;
    min-height: 67px;
    padding-left: 77px;
    align-content: center;
}
div.profil.administrator {
    background-image: url(../images/profil-administrator.svg);
}
div.profil.projectManagement {
    background-image: url(../images/project-Management.svg);
}
div.profil.general {
    background-image: url(../images/profil-general.svg);
}
div.profil.developper {
    background-image: url(../images/profil-developper.svg);
}
div.profil.exploitAndDevelopper {
    background-image: url(../images/profil-exploit-and-developper.svg);
}
div.profil.bureautique {
    background-image: url(../images/profil-teacher-100.png);
}
div.profil.ideas {
    background-image: url(../images/ideas-profil.svg);
}
div.profil.web {
    background-image: url(../images/profil-web.svg);
}

div.profil h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1em;
    color: #D00047;
}

div.goto > div.main {
    border: 1px solid #015f86;
    background-color: white;
    color: #D00047;
    font-weight: bold;
    border-radius: 27px;
    display: inline-block;
    padding: 17px 0 0;
    margin-right: 9px;
    margin-bottom: 19px;
    width: 300px;
    height: 57px;
    vertical-align: top;
    flex: 1;
    box-sizing: border-box;
    min-width: 300px;
    max-width: 300px;
    background-repeat: no-repeat;
    background-size: 50px;
    padding-left: 70px;
    cursor: pointer;
    font-size: 20px;
    background-position-x: 3px;
    background-position-y: center;
}
div.goto > div.main.services {
    background-image: url(../images/services.svg);
}
div.goto > div.main.formations {
    background-image: url(../images/formations.svg);
}
/* Contact */
#contact-location {
    font-family: "Google Sans", Roboto, Arial, sans-serif;
    font-size: 1.375rem;
    letter-spacing: 0;
    line-height: 1.75rem;
    height:fit-content;
}
#contact-location .domainName {
    font-size: 1.375rem;
}
#contact-location div.left {
    background-color: #FFFFFF;
    position:absolute;
    margin: 5px 0 0 5px;
    padding-bottom: 20px;
    width: 400px;
    animation: slide-left 2s forwards;
}
#contact-location div.content {
    margin: 3px;
}
#contact-location div.left img {
    width: 100%;
    height: fit-content;
}
#contact-location div.right img {
    width: 100%;
    height: fit-content;
}

/* Popup */
#popupOverlay,
#wait {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}
#popupOverlay.hide,
#wait.hide {
    display: none;
}
img#popupHeaderImg {
    height: 50px;
    position: absolute;
    left: 3px;
    top: 3px;
}
div#popup {
    border-radius: 12px;
    position: relative;
    width: 300px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}
button#popupClose {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #1d3946;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white;
    font-size: 14px;
    line-height: 20px;
    padding-top: 0;
}
div#popupContent {
    margin: 56px 5px 5px 5px;
}
div#popupContent .title {
    font-weight: bold;
    text-decoration: underline;
}
div.buttons {
    bottom: 0px;
    background-color: #cfe4ee;
    margin:0;
    padding: 0px;
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
div.buttons span.accept,
div.buttons span.reject {
    align-content: center;
    display: inline-block;
    text-align: center;
    height: 50px;
    width: 50%;
}
div.buttons span.accept:hover,
div.buttons span.reject:hover {
    background-color: #83A2B0;
    font-weight:bold;
}
div.buttons span.accept {
    border-bottom-left-radius: 10px;
}
div.buttons span.reject {
    border-bottom-right-radius: 10px;
}
.customers {
    opacity: 70%;
}
.customers img {
    max-height: 50px;
    margin: 5px;
}
#wait {
    background-color: rgba(0, 0, 0, 0.2);
}
#wait svg#spinner1,
#wait svg#spinner2{
    background-repeat: no-repeat;
    background-size: 100%;
    transform-origin: 50% 50%;
    width: 44px;
    height: 44px;
}
#wait svg#spinner1 {
    background-image: url(/images/spinner.svg);
    animation: rotate-left-to-right 4s linear infinite;
}
#wait svg#spinner2 {
    background-image: url(/images/spinner2.svg);
    animation: rotate-right-to-left 4s linear infinite;
}
.nocookie {
    height: 20px;
    cursor: pointer;
}
.w3cValidations {
    height: 17px;
    cursor: pointer;
}
img#popupHeaderImg.w3cvalidations {
    height: 10px;
}
img#popupHeaderImg.languages {
    height: 40px;
    border-radius: 20px;
    width: 40px;
}

/* Timeline */
.timeline .at {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align:center;
}
.timeline span {
    margin-left: 20px;
    margin-right: 20px;
}
.timeline div.content,
.timeline div.date {
    width: 300px;
}
.timeline div.date:first-child {
    width: 225px;
    text-align:right;
}
.timeline div.content {
    border: 1px solid #015f86;
    border-radius: 17px;
    display: inline-block;
    padding-top: 20px;
    padding-bottom: 20px;
}
.timeline div.content .title {
    border-bottom: 1px solid #8F0042;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 5px;
}
.timeline div.content .detail {
    padding: 5px;
    text-align: left;
}
.timeline div.content .detail.habilitation,
.timeline div.content .detail.performance,
.timeline div.content .detail.privacy {
    background-repeat: no-repeat;
    background-size: 20px;
    background-position-x: 10px;
    background-position-y: center;
    padding-left: 35px;
}
.timeline div.content .detail.habilitation {
    background-image: url(/images/habilitation.png);
}
.timeline div.content .detail.performance {
    background-image: url(/images/performance.png);
}
.timeline div.content .detail.privacy {
    background-image: url(/images/privacy.png);
}
.timeline div.content .title img {
    height: 40px;
}
.timeline div.date {
    border: none;
    display: inline-block;
    font-size: 31px;
    padding: 20px;
    text-align: left;
}
.timeline span {
    border: 1px solid #015f86;
    background-color: #015f86;
    border-radius: 11px;
    display: inline-block;
    width: 20px;
    height:20px;
}
.timeline .line {
    border: 1px solid #015f86;
    background-color: #015f86;
    width: 2px;
    position: absolute;
}
.timeline div.at div.content .title a {
    text-decoration: none;
}
.timeline div.at.generix div.content .title a {
    color: #002333;
    font-family: 'general-sans', sans-serif;
}
.timeline div.at.acteos div.content .title a {
    color: #07435d;
}
.timeline div.at.auchan div.content .title a,
.timeline div.at.auchanretail div.content .title a {
    color: #e4000a;
    font-family: 'Oswald', sans-serif;
}
.timeline div.at.auchanretail div.content .title a.retail {
    color: #e4000a;
    font-family: 'Raleway', sans-serif;
    font-weight:normal;
}
.timeline div.at.swisslife div.content .title a,
.timeline div.at.troissuisses div.content .title a {
    color: #e50228;
}

.timeline div.at.adeo div.content .title a {
    color: #039ed2;
    font-style: italic;
    font-family: 'Pacifico', cursive;
}
.timeline div.at.axonactive div.content .title a {
    color: #009ff0;
    font-family: 'Arial', 'Helvetica', sans-serif;
}
.timeline div.at.boulanger div.content .title a {
    color: #ff3d00;
    font-family: 'Baloo 2', sans-serif;
}
.timeline div.at.decathlon div.content .title a {
    color: #3743ba;
    font-family: 'Roboto', 'Roboto fallback', 'system-ui', '-apple-system', 'Arial', 'sans-serif';
}
.timeline div.at.eurotunnel div.content .title a {
    color: #000000;
    font-family: 'Arial';
}
.timeline div.at.leroymerlin div.content .title a {
    color: #7bb51c;
    font-family: LeroyMerlin, sans-serif;
}
.timeline div.at.lancelotdigital div.content .title a {
    color: #8F0042;
    font-family: 'Cinzel', 'Times new roman';
}

/* See More */
.see-more.shown {
}
.see-more.hidden {
    display: none;
}
.see-more-button {
    border: none;
}

/* Form */
form img.help {
    width: 20px;
    height: fit-content;
}
form div#hCaptcha.toCheck iframe {
    border: 1px solid red;
}
form label {
    font-weight: bold;
}
form input,
form option,
form select,
form textarea {
    font-size: 0.84rem;
    font-family: 'Source Sans Pro', sans-serif;
}
form input[type=text] {
    width: 300px;
}
form textarea {
    width: 600px;
}
form input[type="checkbox"],
form select {
    cursor: pointer;
}
form.tofill input,
form.tofill input[type="checkbox"],
form.tofill select,
form.tofill textarea {
    border: 1px solid black !important;
    background-color: inherit !important;
}
form input[type=text],
form select,
form textarea {
    border-radius: 3px;
}
form input:invalid,
form input[type="checkbox"],
form select:invalid,
form textarea:invalid {
    border: 1px solid red;
    background-color: #ffe6e6;
}

form button,
form button:active {
    appearance: none;
    -webkit-appearance: none;
    background-color: lightgrey;
    color: grey;
}
form.complete button,
form.complete button:active {
    color: #34824e;
    font-weight: bold;
}
form.success button {
    display: none;
}
form #formInfo {
    margin-bottom: 1em;
}

form #formInfo {
    font-size: 16px;
}
form.complete #formInfo {
    display: none;
}
form.error #formInfo,
form.sendError #formInfo {
    color: red;
}
form.submitted #formInfo {
    color: green;
}
form.success #formInfo {
    color: #34824e;
}
form #formMessageTitle {
    text-decoration-line: underline;
}
form input#company::before {
    content: url('/images/form/company.svg');
    margin-right: 8px; /* Espace entre l'image et le texte du label */
    vertical-align: middle; /* Aligne l'image avec le texte */
}
form label.required {
    color: red;
}
form label.other,
form label.option {
    font-weight: normal;
    cursor: pointer;
}

/* Add artistical images in rectangles */
.side-by-side {
    display: flex;
}

.paragraph {
    max-width: 600px;
    padding: 10px;
}
.img-colors-explosion {
    width: 600px;
    max-width: 600px;
    height: 400px;
    min-height: 400px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-colors-explosion div {
    display: flex;
    width: 1024px;
    height: 1024px;
}
.img-colors-explosion div div {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 1024px;
    height: 1024px;
    background-position: 175px 175px;
    background-size: cover;
}
.img-colors-explosion.rotate div div,
.img-colors-explosion.rotate-left-to-right div div {
    animation: move-exposion-img 1500s infinite linear, rotate-left-to-right 1500s infinite linear;
}
.img-colors-explosion.rotate-right-to-left div div {
    animation: move-exposion-img 1500s infinite linear, rotate-right-to-left 1500s infinite linear;
}
.img-colors-explosion.img1 div div {
    background-image: url("/images/DALL·E 2024-10-01 16.32.11-A-vibrant-explosion-of-paint-powder-1.webp");
}
.img-colors-explosion.img2 div div {
    background-image: url("/images/DALL·E 2024-10-01 16.32.11-A-vibrant-explosion-of-paint-powder-2.webp");
}
.img-colors-explosion.img3 div div {
    background-image: url("/images/DALL·E 2024-10-01 16.32.11-A-vibrant-explosion-of-paint-powder-3.webp");
}
.img-colors-explosion.img4 div div {
    background-image: url("/images/DALL·E 2024-10-01 16.32.11-A-vibrant-explosion-of-paint-powder-4.webp");
}

/* Customers */
img.trouversajusteplace {
    max-width: 273px;
}

/* Animation */
.appear-from-left {
    animation: slide-left 2s forwards;
}
.appear-from-right {
    animation: slide-right 2s forwards;
}
.appear-from-middle {
    transform: scale(0);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.appear-from-middle.show {
  transform: scale(1);
  opacity: 1;
}
@keyframes slide-left {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-right {
  from {
    transform: translateX(-100vw);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes move-exposion-img {
  0% {
    background-position: 175px 175px;
  }
  100% {
    background-position: 875px 875px;
  }
}
@keyframes rotate-left-to-right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-right-to-left {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* Responsive - Specific display */
@media (max-width: 1300px) {
    #body {
        padding-top: 85px;
    }
    .threeD {
        padding: 0 0 90px 80px;
    }

    .appear-from-left {
        animation: inherit;
    }
    .appear-from-right {
        animation: inherit;
    }
}
@media (max-width: 1035px) {
    .threeD {
        padding: 0 0 90px 80px;
    }
    #content .displaySplit {
        display: block;
    }
    .timeline div.at {
        display: flex;
        flex-direction: column;
    }
    .timeline {
        margin-top: 20px;
    }
    .timeline span {
        margin: 6px 0 0 10px;
        order: 1;
        position: absolute;
    }
    .timeline div.date,
    .timeline div.date:first-child {
        margin: 0;
        order: 2;
        padding: 0 0 0 40px;
        text-align: left;
        width: auto;
    }
    .timeline div.content {
        margin: 1px 20px 30px 40px;
        order: 3;
        width: auto;
    }

    .appear-from-left {
        animation: inherit;
    }
    .appear-from-right {
        animation: inherit;
    }
}
@media (max-width: 1000px) {
    #body {
        padding-top: 105px;
    }
    .threeD {
        padding: 0 0 90px 80px;
    }
}

/* Responsive - Specific display */
@media (max-width: 600px) {
    #body {
        padding-top: 62px;
    }
    #body div#content {
        width: 95%;
        margin:10px;
    }
    #content #contentHeader {
        background-position: center -55px;
        margin-left: 0;
    }
    #header {
        height: 65px;
    }
    #top {
        width: 100%;
        margin-left: 1%;
    }
    #logo,
    #logoText {
        z-index: 1;
    }
    #menu {
        position: absolute;
        background-color: white;
        width: 100%;
    }
    #menu ul {
        display: block;
        padding: 4px 0 0 10px;
    }
    #menu li {
        display: none;
        padding: 10px 0 10px;
        margin: 0 7px 0 0;
        text-align: right;
    }
    #menu ul li {
    }
    #menu ul.show li, #menu ul li#nav-menutrigger {
        display: block;
    }
    #menu ul li#nav-menutrigger {
        padding: 0 0 10px;
        margin-bottom: 10px;
    }
    #menu li svg {
        padding-right: 10px;
    }
    #nav-menutrigger-button {
        background-color: white;
        border-style: none;
        display: block;
        padding: 0;
        position: absolute;
        right: 20px;
    }
    #nav-menutrigger-bread-open {
        display: block;
    }
    #nav-menutrigger-bread-close {
        display: none;
    }
    #menu-ul.show #nav-menutrigger-bread-open {
        display: none;
    }
    #menu-ul.show #nav-menutrigger-bread-close {
        display: block;
    }
    .threeD {
        padding: 0 0 90px 40px;
    }
    div.formations,
    div.languages {
        display: block;
        width: 100%;
        flex-wrap: unset;
    }
    div.formations div.element,
    div.languages div.element {
        flex: none;
        margin: 5px 0 0 0;
        width: 100%;
    }
    div.services.ideas,
    div.services.problems {
        background-size: 80px;
        background-position-x: center;
        background-position-y: 0;
        padding-left: 0;
        padding-top: 90px;
        min-height: 76px;
    }
    div.languages div.language {
        background-size: 80px;
        background-position-x: right;
        background-position-y: center;
        padding-left: 10px;
        padding-top: 2px;
        min-height: 60px;
    }
    div.languages div.language.pair {
        border-radius: 0;
    }
    /* Contact */
    #contact-location {
        height:fit-content;
    }
    #contact-location div.left {
        animation: inherit;
        margin: 0px;
        position:inherit;
        width: 100%;
    }
    #contact-location img {
        height: inherit;
        width: 100%;
    }
    form textarea {
        width: 100%;
    }
    .appear-from-left {
        animation: inherit;
    }
    .appear-from-right {
        animation: inherit;
    }
}

/* Pour Safari uniquement (via media query WebKit spécifique) */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    form button,
    form button:active {
        background-color: lightgrey !important;
        color: grey;
    }
}