/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3e8e5c");
  
@font-face {
  font-family: "AquawaxPro-Regular";
  src: url('/font/AquawaxProRegular/font.woff2') format('woff2'), url('/font/AquawaxProRegular/font.woff') format('woff');
}
@font-face {
  font-family: "AquawaxPro-DemiBold";
  src: url('/font/AquawaxProDemiBold/font.woff2') format('woff2'), url('/font/AquawaxProDemiBold/font.woff') format('woff');
}
@font-face {
  font-family: "BrandonTextWeb-Light";
  src: url('/font/BrandonTextWebLight/font.woff2') format('woff2'), url('/font/BrandonTextWebLight/font.woff') format('woff');
}
@font-face {
  font-family: "BrandonTextWeb-Regular";
  src: url('/font/BrandonTextWebRegular/font.woff2') format('woff2'), url('/font/BrandonTextWebRegular/font.woff') format('woff');
}
@font-face {
  font-family: "BrandonTextWeb-Bold";
  src: url('/font/BrandonTextWebBold/font.woff2') format('woff2'), url('/font/BrandonTextWebBold/font.woff') format('woff');
}
@font-face {
  font-family: 'ataraxy';
  src: url('/font/ataraxy.eot?96599509');
  src: url('/font/ataraxy.eot?96599509#iefix') format('embedded-opentype'),
       url('/font/ataraxy.woff2?96599509') format('woff2'),
       url('/font/ataraxy.woff?96599509') format('woff'),
       url('/font/ataraxy.ttf?96599509') format('truetype'),
       url('/font/ataraxy.svg?96599509#ataraxy') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "ataraxy";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-arrow-down-circle:before { content: '\e800'; } /* '' */
.icon-facebook:before { content: '\e801'; } /* '' */
.icon-instagram:before { content: '\e802'; } /* '' */
.icon-blockquote:before { content: '\e805'; } /* '' */
.icon-play:before { content: '\f144'; } /* '' */
.icon-linkedin:before { content: '\f319'; } /* '' */


* {
    box-sizing: border-box;
}
html,body {
    margin: 0;
    padding: 0;
    height:100%;
}
body {
    font-family: "BrandonTextWeb-Light", sans-serif;
    line-height: 1.4;
    text-align: center;
    font-size: 1.1rem;
    color: #213466;
}
a {
    text-decoration: none;
}
.contenu a:not(.btn) {
    color: #6f9ed4;
    transition: all 0.3s ease-in;
}
.contenu a:not(.btn):hover {
    color: #6f9ed4;
    background-color: rgba(33,52,102,0.1);
    padding: 1px 2px;
}
h1, h2, h3, #titre {
    font-family: "AquawaxPro-Regular", sans-serif;
}
h1 {
    font-weight: 100;
    font-size: 3rem;
    line-height: 1.3;
    margin: 16px 0 0;
}
h1 span {
    font-size: 2rem;
}
h2 {
    margin: 40px 0 25px;
    position: relative;
    line-height: 1;
    display: inline-block;
    z-index: 1;
}
h3 {
    color: #6f9ed4;
}
#index h2::after {
    content: "";
    display: block;
    left: 50%;
    transform: translate(-50%,0);
    bottom: -2px;
    position: absolute;
    transition: all .15s ease;
    z-index: -1;
    background-color: #8bd7ca;
    width: calc(100% + 5%);
    height: 35%;
    opacity: 1;
}
#index h2:hover::after {
    bottom: -8px;
    height: 1px;
    background-color: #6f9ed4;
}

.btn {
    display: inline-block;
    padding: 10px 16px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
    color: #213466;
    text-decoration: none;
}
.btn:hover {
    color: #fff;
    background-color: #6f9ed4;
}
.btn-black {
    background-color: #213466;
    color: #fff;
}
.btn-black:hover {
    background-color: #6f9ed4;
}
.btn-green {
    background-color: #6f9ed4;
    color: #fff;
}
.btn-green:hover {
    background-color: #213466;
}
.btn-action {
    font-size: 2rem;
}

.alert-success {
    background-color: rgba(21,174,147,0.2);
    border-color: #6f9ed4;
}

.navbar-brand img {
    height: 70px;
}
.bg-dark {
    background-image: url("/img/bg-graph.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #213466 !important;
}
.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    margin: 0 8px;
    padding: .4rem .5rem .3rem;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
    border: 1px solid #ffffff;
}
.navbar-dark .navbar-nav .nav-link.link-green {
    background-color: #6f9ed4;
    border: 1px solid #6f9ed4;
}
.navbar-dark .navbar-nav .nav-link.link-green:focus, .navbar-dark .navbar-nav .nav-link.link-green:hover {
    color: #6f9ed4;
    background-color: transparent;
}

.contenu {
    padding: 100px 20px;
}

#index #main_bg {
    min-height: 100vh;
}
.bg-parallax {
    position: relative;
    display: flex;
    justify-items: center;
    align-items: center;
}
.bg-parallax > .icon-parallax {
    width: 250px;
    height: 250px;
}
.icon-parallax {
    position: absolute; /* postulat de départ */
    top: 50%; left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
    z-index: 2;
}
#icon-audit {
    background: url("/img/icons/icon-audit.svg");
}
#icon-conseil {
    background: url("/img/icons/icon-conseil.svg");
}
#icon-recherche {
    background: url("/img/icons/icon-recherche.svg");
}
#icon-analyse {
    background: url("/img/icons/icon-analyse.svg");
}
#icon-suivi {
    background: url("/img/icons/icon-suivi.svg");
}
#icon-livraison {
    background: url("/img/icons/icon-livraison.svg");
}
.simpleParallax {
    width: 100%;
}

#index .heading-container {
    position: relative;
    min-height: 100vh;
    width: 100%;    
}
.heading {
    position: absolute;
    z-index: 10;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-image: url(/img/overlay.png);
    height: 100vh;
}
.heading > div {
    width: 100%;
    color: #fff;
    margin-top: 100px;
}
.heading > div > #block {
    display: inline-block;
    padding: 30px;
    border-radius: 20px;
}
.heading #arrow {
    position: absolute;
    bottom: 20px;
    font-size: 3rem;
    color: #6f9ed4;
    transition: all 0.3s ease-in;
}
.heading #arrow:hover {
    color: #fff;
}
#titre {
    font-size: 3rem;
}
.heading > div > #block > h1 {
    margin: 0;
    font-size: 2rem;
}
.heading > div > #block > h1 span {
    position: relative;
    line-height: 1;
    display: inline-block;
    z-index: 1;
}
.heading > div > #block > h1 span::after {
    content: "";
    display: block;
    left: 50%;
    transform: translate(-50%,0);
    bottom: -8px;
    height: 1px;
    background-color: #6f9ed4;
    position: absolute;
    transition: all .15s ease;
    z-index: -1;
    width: calc(100% + 5%);
    opacity: 1;
}
.heading > div > #block > h1, .heading > div > #block > p {
    text-shadow: black 0 0 5px;
}
.heading > div > #block > p {
    margin-top: 30px;
}
.heading ul {
    margin: 0;
    padding: 0;
}
.heading li {
    margin: 0;
    padding: 0;
    display: inline-block;
}
.heading li a {
    margin: 20px 15px;
    padding: 0;
    display: block;
    border-radius: 20px;
    background-color: rgba(255,255,255,0);
    transition: all .3s ease-in;
}
.heading li a:hover {
    background-color: rgba(255,255,255,1);
}
.heading .btn {
    margin: 30px 16px 16px;
}
#video {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url(/img/header/ataraxy-imprimeur-loireatlantique.jpg);
    background-position: center;
    background-size: cover;
}
#video > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video {
    position: relative;
    cursor: pointer;
    margin: 50px 0;
}
.video .video-capture {
    transition: all 0.3s;
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
    -o-filter: brightness(100%);
    -ms-filter: brightness(100%);
    z-index: 1;
}
.video:hover .video-capture {
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);
    -o-filter: brightness(50%);
    -ms-filter: brightness(50%);
}
.video .video-bt {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}

.video-container {
    position: relative;
}
.video-container img {
    width: 100%;
}
.video-container > a {
    position: absolute;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0);
    transition: all .3s ease-in;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contenu .video-container > a:not(.btn):hover{
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}
.video-container > a > i {
    font-size: 5rem;
}


.heading-container#main-page {
    height: 560px;
}
.heading-container#main-page .heading {
    height: inherit;
    padding-bottom: 50px;
}
.heading-container#main-page > img {
    position: absolute;
    display: block;
    width: 100%;
    height: 560px;
    object-fit: cover;
    z-index: 0;
    top: 0;
}

.parallaxie {
    background-size: cover;
    background-position: center;
}

.encarts {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    margin: 30px 0;
}
.encarts > div {
    background-color: #213466;
    background-image: url("/img/bg-graph.svg");
    background-position: center;
    background-size: 25%;
    color: #fff;
    width: 300px;
    padding: 50px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.encarts > div.encart-no {
    background: inherit;
    padding: 15px;
}
.encarts > div > p {
    padding: 0;
    margin: 0;
}

.label-group {
    display: inline-block;
    color: #6f9ed4;
    background-color: rgba(111,158,212,0.05);
    padding: 20px;
    border-radius: 4px;
    border:  1px solid #6f9ed4;
    margin-bottom: 50px;
}
span.label {
    /*background-color: #6f9ed4;
    color: #fff;*/
    padding: 5px 10px;
    margin: 2px 5px;
    display: inline-block;
    font-size: 1.5rem;
}

.art-video {
    margin-bottom: 150px;
}
.art-video > div {
    position: relative;
    padding-top: 80px;
}
.art-video .video-right {
    position: absolute;
    right: 0;
    bottom: -60px;
    z-index: 15;
    width: 50%;
}
.art-video .video-right img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.art-video .video-right .video-popup {
    width: 121px;
    height: 121px;
    background-color: #6f9ed4;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    position: absolute;
    left: -60.5px;
    bottom: 60px;
    font-size: 3rem;
    color: #fff;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.art-video .video-right .video-popup .icon-play:before {
    margin-top: 0.6rem;
}
.art-video .video-right .video-popup:hover {
    background-color: #213466;
}
.art-video > div > .row > div:first-child {
    text-align: left;
    padding: 50px 120px 50px 15px;
}

.swiper-gallery {
    margin: 50px 0;
}
.swiper-gallery img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.swiper-button-next, .swiper-button-prev {
    color: #fff;
}

.encarts-quadri {
    margin-bottom: 50px;
}
.encarts-quadri div div {
    margin: 25px;
    padding: 25px;
    background-color: rgba(111,158,212,0.05);
    border-radius: 4px;
    text-align: center;
}
.encarts-quadri div div a {
    display: inline-block;
}
.encarts-quadri div div h2 {
    display: block;
    margin: 25px 0;
}
.encarts-quadri div div img {
    margin: 0 auto 25px;
    display: block;
}

ul.social {
    text-decoration: none;
    padding: 0;
}
ul.social li {
    display: inline-block;
}
ul.social li a {
    font-size: 2rem;
}
.contenu ul.social li a:hover {
    background-color: inherit;
    padding: inherit;
    color: #213466;
}

.media-box-container {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.broken-image-here {
    background-color: #6f9ed4;
}
.media-box-content {
    background-color: rgba(33,37,41,0.01);
}
.media-box-date {
    color: #6f9ed4;
}
.media-box-footer {
    background-color: #213466;
    padding: 15px;
}
.media-box-footer .media-box-categories {
    color: #fff;
    margin-top: 0;
}
.media-box-quote.quote-red {
    background-color: #e72062;
}
.media-box-quote.quote-yellow {
    background-color: #cdd500;
}
.media-box-quote.quote-green {
    background-color: #6f9ed4;
}
.media-box-quote > i:first-of-type::before {
    transform: scale(-1, 1);
}

#article-news .heading > div {
    height: 100%;
    display: flex;
    align-items: center;
}
#article-news .heading > div > #block {
    width: 100%;
}
#article-news .heading > div  h1 {
    text-transform: uppercase;
    font-size: 2.5rem;
}
#article-news .contenu {
    text-align: left;
}
#article-news .media-box-date {
    font-size: 11px;
    line-height: 15px;
    display: inline-block;
}
#article-news .media-box-date:after {
    content: "";
    display: block;
    height: 1px;
    width: 30px;
    margin: 5px 0 30px;
    background-color: #6f9ed4;
}
#article-news .row.justify-content-md-center > div:first-child > img {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

.bg-cover {
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: multiply;
    color: var(--color-blanc);
    min-height: 400px;
    padding: 50px 0;
    margin: 80px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#map-iframe {
    position: relative;
    height: 600px;
    margin: 50px auto;
    padding: 0;
}
#map-iframe > #map-canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 600px;   
    z-index: 0;
    background: #213466 url(/img/loader.svg) center no-repeat;
}
#map-iframe > a {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
}

/*#references > img {
    filter: saturate(0);
    margin: 15px;
    height: 100px;
    transition: all .3s ease-in;
}
#references > img:hover {
    filter: saturate(1);
}*/

#references .broken-image-here {
    background-color: #6f9ed4;
}
#references .media-box-container {
    border-radius: 0;
    box-shadow: none;
}
#references .media-box-container a {
    padding: 0;
    margin: 0;
}
#references .media-box-container .media-box-image > div {
    padding: 20px;
}
#references .thumbnail-overlay {
    background-color: #6f9ed4;
}
#references .thumbnail-overlay .media-box-title {
    color: #fff;
}
#references .media-boxes-load-more-button {
    margin: 30px auto 0;
}
#references .media-boxes-no-more-entries {
    display: none;
}

#references.portfolio .media-box-image img {
    transition: all .3s ease-in;
}
#references.portfolio .media-box-image:hover img {
    transform: scale(1.2);
}

/* ////// 404 ////// */

.page_404 {
    text-align: center;
    color: #213466;
}
.page_404 .page_404_gif {
    display: inline-block;
    margin: 30px 0;
    font-family: "AquawaxPro-DemiBold";
}
.page_404 .page_404_gif span {
    display: block;
    float: left;
    font-size: 8rem;
    font-weight: 700;
    height: 240px;
    line-height: 240px;
}
.page_404 .page_404_gif div {
    background: #CCC;
    border: 10px solid #213466;
    border-radius: 50%;
    box-shadow: 0 0 10px #213466;
    display: block;
    float: left;
    height: 240px;
    width: 240px;
    margin: 0 20px;
    overflow: hidden;
}
.page_404 .page_404_gif img {
    width: 220px;
}
.page_404 .page_404_gif a {
    display: inline-block;
}
.page_404 .page_404_gif a:link {
    display: block;
}
.page_404 small {
    font-size: 0.7rem;
}


/* /////////////////   FORMULAIRE   ///////////////// */

form.formulaire input:not([type=checkbox],[type=radio]), form.formulaire textarea, form.formulaire select {
    box-sizing: border-box;
    padding: 5px;
    border: none;
    border-radius: 3px;
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,.1);
    width: 100%;
    margin-bottom: 15px;
    font-size: inherit;
}
form.formulaire #validation {
    text-align: center;
}
form.formulaire #validation span {
    margin: 20px 0;
}
form.formulaire #validation span.opt-in {
    opacity: 1;
}
form.formulaire #validation span.opt-out {
    opacity: 0.5;
    cursor: inherit;
    pointer-events: none;
}
form.formulaire #validation span#opt-in:hover {
    background-color: #6f9ed4;
}
form.formulaire small {
    font-size: 0.7rem;
}
p.errors, p.success {
    margin: 50px 0;
    padding: 20px 60px;
    text-align: center; 
    clear: both;
    border-radius: 3px;
}
p.success {
    color: #5c6a06;
    background-color: #c5e21a;
}
p.errors, form.formulaire div.error input, form.formulaire div.error textarea, form.formulaire .g-recaptcha.error {
    color: #bc3d2d;
    background-color: #fddcdf;
}


/* /////////////////   FOOTER   ///////////////// */

footer {
    background-image: url("/img/bg-graph.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #213466;
    padding: 50px 0 0;    
    color: #fff;
}
footer a {
    color: #fff;
    text-decoration: none;
}
footer ul {
    padding: 0;
    margin: 0 0 30px;
    font-family: "BrandonTextWeb-Light";
    font-size: 1rem;
}
footer li {
    display: inline-block;
    margin: 0 8px;
}
footer #buttons li a {
    color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    margin: 0 8px;
    padding: .4rem .5rem .3rem;
    background-color: #6f9ed4;
    border: 1px solid #6f9ed4;
    transition: all .3s ease-in;
    display: inline-block;
}
footer #buttons li a:focus, footer #buttons li a:hover {
    color: #ffffff;
    border: 1px solid #ffffff;
    background-color: transparent;
}
footer li a:focus, footer li a:hover {
    color: #6f9ed4;
    background-color: transparent;
}
footer .social {
    margin: 30px 0;
}
footer .social a {
    transition: all .3s ease-in;
}
footer span {
    margin: 0 20px;
}
#mentions {
    border-top: 1px solid #919ca1;
    color: #919ca1;
    font-size: 0.7rem;
    padding: 30px 0;
    margin-top: 30px;
}
#mentions a {
    color: #919ca1;
}
#mentions a:hover {
    color: #6f9ed4;
}


.modal-dialog, .modal-footer {
    text-align: center;
    justify-content: center;
}
.modal-dialog span {
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: 15px;
}
.modal-title, input[type=text] {
    width: 100%;
    text-align: center;
}
.modal-dialog form {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.modal-dialog form > * {
    display: block;
}
.modal-dialog form .btn {
    margin-top: 20px;
}