@font-face {
    font-family: 'FontAwesome';
    src: url('../assets/subset-FontAwesome.woff2') format('woff2'),
        url('../assets/subset-FontAwesome.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .fa-arrow-circle-down:before {
    content: "\f0ab";
  }
  
  .fa-bars:before {
    content: "\f0c9";
  }
  
  .fa-close:before {
    content: "\f00d";
  }

* {
    box-sizing: border-box;

    scroll-behavior: smooth;
    scroll-margin: 6em;

    transition: all 0.5s ease-in-out;
}

* .debug {
    border: 1px solid red !important;
}

html {
    font: 1em "Barlow", sans-serif;
    color: rgba(127,127,127,1);
}

body {
    margin: 0em;
    padding: 0em;
}

h1, h2, h3 {
    margin-block-start: 0em;
    margin-block-end: 0em;
    text-align: center;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1em;
}

ul {
    list-style: square;
}

a {
    text-decoration: none;
}

figure {
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0em;
    margin-inline-end: 0em;
}

input, textarea {
    font: 1em "Barlow", sans-serif;
    color: rgba(127,127,127,1);

    background-color: rgba(127,127,127,0.1);

    resize: none;

    border: 0em;
}

input::placeholder, textarea::placeholder {
    color: rgba(127,127,127,1);
}

input[type=text]:focus, input[type=email]:focus, textarea:focus {
    background-color: rgba(245, 245, 245, 1);
    outline: 0.1em dashed rgba(127,127,127,1);
}

button[type=submit] {
    height: 4em;
    width: 12em;

    font-size: 1em;
    cursor: pointer;
    border-width: 0em;
}

.blue {
    /*Bleu Firebrake*/
    color: rgba(0,115,178,1);
}

a.blue:hover {
    color: rgba(32,56,100,1);
}

a.blue:before {
    border-color: rgba(0,115,178,1);
    color: rgba(0,115,178,1);
}

a.blue:hover:before {
    border-color: rgba(32,56,100,1);
    color: rgba(32,56,100,1);
}

a.blue:after {
    border-color: rgba(0,115,178,1);
    color: rgba(0,115,178,1);
}

a.blue:hover:after {
    border-color: rgba(32,56,100,1);
    color: rgba(32,56,100,1);
}

.green {
    /*Vert Firebrake*/
    color: rgba(58,154,54,1);
}

a.green:hover {
    color: rgba(56,87,35,1);
}

a.green:before {
    border-color: rgba(58,154,54,1);
    color: rgba(58,154,54,1);
}

a.green:hover:before {
    border-color: rgba(56,87,35,1);
    color: rgba(56,87,35,1);
}

a.green:after {
    border-color: rgba(58,154,54,1);
    color: rgba(58,154,54,1);    
}

a.green:hover:after {
    border-color: rgba(56,87,35,1);
    color: rgba(56,87,35,1);
}

.grey {
    /*Gris Firebrake*/
    color: rgba(127,127,127,1);
}

a.grey:hover {
    color: rgba(100,100,100,1);
}

a.grey:before {
    border-color: rgba(127,127,127,1);
    color: rgba(127,127,127,1);
}

a.grey:hover:before {
    border-color: rgba(100,100,100,1);
    color: rgba(100,100,100,1);
}

a.grey:after {
    border-color: rgba(127,127,127,1);
    color: rgba(127,127,127,1);
}

a.grey:hover:after {
    border-color: rgba(100,100,100,1);
    color: rgba(100,100,100,1);
}

.white {
    color: rgba(245, 245, 245, 1);
}

.bg-blue {
    background-color: rgba(0,115,178,1);
}

button.bg-blue:hover,
a.bg-blue:hover {
    background-color: rgba(32,56,100,1);
}

.bg-blue.transparent {
    background-color: rgba(0,115,178,0.8);
}

.bg-green {
    background-color: rgba(58,154,54,1);
}

.bg-green:hover {
    background-color: rgba(56,87,35,1);
}

.bg-green.transparent {
    background-color: rgba(58,154,54,0.8);
}

.bg-grey {
    background-color: rgba(127,127,127,1);
}

.bg-grey.transparent {
    background-color: rgba(127,127,127,0.8);
}

.bg-black {
    background-color: black;
}

.bg-black.transparent {
    background-color: rgba(0,0,0,0.8);
}

.bg-white {
    background-color: rgba(245, 245, 245, 1);
}

.highlight:hover {
    background-color: rgba(235,235,235,1);
}

.bg-white.transparent {
    background-color: rgba(245, 245, 245, 0.8);
}

.box {
    border: 0.1em solid rgba(127,127,127,0.1);
}

.box-blue {
    border-right: 4em solid rgba(0,115,178,1);
}

.box-green {
    border-left: 4em solid rgba(58,154,54,1);
}


.shadow {
    box-shadow: 0px 0.4em 0.4em rgba(127,127,127,1);
}

.uppercase {
    text-transform: uppercase;
}

.spaced {
    letter-spacing: 0.1em;
}

.blur {
    backdrop-filter: blur(0.2em);
}

#back-to-top {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    font-size: 2em;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0.5em;
    border-radius: 0.4em;

    animation: showBackToTop 1s forwards ease-in-out;
}
.animate.translate-left {
    animation: move2left 1s forwards ease-in-out;
}

.animate.translate-right {
    animation: move2right 1s forwards ease-in-out;
}

.animate.translate-bottom {
    animation: move2bottom 1s forwards ease-in-out;
}

.animate.zoom-in {
    animation: zoomin 1s forwards ease-in-out;
}

.animate.delay500ms {
    animation-delay: 0.5s;
}

.animate.delay1s {
    animation-delay: 1s;
}

.animate.delay2s {
    animation-delay: 2s;
}

@keyframes move2left {
    0% {
        transform: translateX(100%);
        opacity: 0;        
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes move2right {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes move2bottom {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zoomin {
    0% {
        opacity: 0;
        transform: scale(0, 0);
    }
      
    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }    
}

@keyframes showBackToTop {
    0% {
        scale: 0%;
    }

    100% {
       rotate: 180deg;
       scale: 100%;
    }
}

@media screen and (max-width: 1366px) {
   
}

@media screen and (max-width: 768px) {
    .box-blue {
        border-width: 1em;
    }
    
    .box-green {
        border-width: 1em;
    }    
}

@media screen and (max-width: 480px) {
    
}