@font-face {
  font-family: "open sans",Arial,sans-serif;
  font-display: optional;}

/* ==========================================================================
  CKEditor
 ========================================================================== */
body.cke_editable {background-color: white;}
body.cke_editable {margin: 10px;}

/* =============================================================================
    Global
 ============================================================================ */
/* Colors accessible from everywhere for convenience */
/* Example background-color: var(--cp1); */
:root {
  --cp1: #00A494;
  --cp2: #EA5B6D;
  --cp3: #473A8E;
  --cp4: #F6A319;
  --cp5: #016459;
  --cs1: #85CBC8;
  --cs2: #FFA8BA;
  --cs3: #9D97BE;
  --cs4: #FFD64C;
  --cs5: #577CBE;}

input, input:active, input:focus {outline: none !important; box-shadow: none !important;}
button, button:active, button:focus, .btn:focus {outline: none !important; box-shadow: none !important;}
a, a:hover, a:active, a:focus {text-decoration: none; outline: none; color:inherit;}

.btn {border-radius: 0}
.btn-primary, .btn-primary:active { background-color: var(--cp1); border-color: var(--cp1);} /* #1ab394 */
.btn-primary:hover, .btn-primary:focus { background-color: #18a689; border-color: #18a689;}

.card {border-radius: 0; color: #676a6c; font-size: 0.85rem;}
.card-header {background-color: #fff; border-bottom: 1px solid #e5e9f2;}
.card-body {padding: 1rem;}
.card-footer {background-color: unset;border-top: none;padding: 1rem;}

.img-bordered {padding: 6px; border: 1px solid #ddd;}
.img-padded {padding: 6px; border: 1px solid #ddd;}
.img-minwidth-150 {min-width:150px; height: auto;}
.img-maxwidth-300 {max-width:300px; height: auto;}
.img-maxwidth-500 {max-width:500px; height: auto;}

.flex-table tr {display: flex;flex-flow: row wrap;justify-content:space-evenly;}
.no-border, .no-border tr, .no-border td { border:none; }

.media {display: flex; align-items: flex-start;}

/* =============================================================================
    Layout
 ============================================================================ */
@media screen and (min-width: 992px) { .container { max-width: 992px; } }
@media screen and (min-width: 1200px) { .container { max-width: 1170px; } }
article img {max-width: 100%;}
article iframe {max-width: 100%;}

/* =============================================================================
    Body
 ============================================================================ */
html {font-size:14px;}
body {
  font-family: "open sans",Arial,sans-serif;
  font-weight:normal;
  font-size:.875rem;
  overflow-x:hidden;
  color:black;
  background-color: #10151C;
  height: 100%;}

/* =============================================================================
    Banner
 ============================================================================ */
#banner {
  height:96px;
  border-bottom: 1px solid black;}
#banner .brand {position:relative;}
#banner .brand > a {
  background: url("/images/logo_opton.png") 0 10px no-repeat;
  width: 176px;
  height: 90px;
  float: left;}
#banner .motto {position:absolute; font-size: 1.4em; color: #D9DEE4; top: 45px; left: 280px;}
#banner .suisse {position: absolute; top: -14px; left: -14px; width: 240px; z-index: -1;}
#banner #countryDropdown {position: absolute; top: 40px; left: 270px;width: 220px;}
#banner #countryDropdown button {background-color: transparent; border:none; font-size: 1.2rem;}
#banner .dropdown-menu a {background-color: white !important;} 

@media screen and (max-width: 425px) {
  #banner {height:60px;}
  #banner .brand > a { background: url("/images/logo_opton_small.png") 0px -10px no-repeat; height: 60px;} }
@media screen and (max-width: 576px) {
  #banner .brand > a {margin-left: 10px;} }
@media screen and (max-width: 991px) {
  #banner > .container { width: 100%; max-width: none;} }
@media screen and (max-width: 1050px) {
  #banner {padding:0;} }

/* =============================================================================
    Navigation
 ============================================================================ */
#navigation {background-color: #10151C !important; padding: 0; border-top: 1px solid #1b212a;}
#navigation a {color:#D9DEE4; font-size:1.18em; white-space: nowrap;}
#navigation a:hover {color:white;}
#navigation .container {padding:0; position:relative;}
#navigation .navbar-nav > .nav-item {border-left:1px solid #2B2C2E;}
#navigation .navbar-nav > .nav-item:last-child ul { right:0; left:unset;}
#navigation .navbar-nav > .nav-item > a {font-weight: bold; border-top:3px solid transparent; padding: 8px 15px; text-transform: uppercase;}
#navigation .dropdown-menu {background-color:#1B212A; border-radius:0; border:none; font-size:0.9em; padding:10px; margin: 0;}
#navigation .dropdown-menu a {padding: 10px;}
#navigation .navbar-toggler {margin:15px 15px 15px 14px; padding:0; border:0;color:white;}
#navigation form {position:absolute; top:10px; right:15px;}
#navigation form input::-moz-placeholder {color:#D9DEE4;}
#navigation form input {
  border-radius: 0;
  border: none;
  background-color: #ffffff20;
  color:#D9DEE4;
  height: 36px;
  font-size: 13px;
  width: 14.5em;
  margin:0;}
#navigation form button {
  border: none;
  width: 3.25em;
  background-color: #D42B1E;
  color: white;
  height: 2.56rem;
  float:right;}

@media screen and (min-width: 992px) {
  #navigation form {top: -65px; right: 0;}
  #navigation .navbar-nav > .nav-item > a:focus {border-top:3px solid red; background-color: #1B212A;} }
@media screen and (max-width: 991px) {
  #navigation #navbarSupportedContent {margin-bottom: 1rem;}
  #navigation > .container {width: 100%; max-width: none;} }
@media screen and (max-width: 1199px) {
  #navigation .navbar-nav > .nav-item > a { padding: 8px 10px; }
  #navigation a { font-size: 1.15em; } }

/* =============================================================================
    Main
 ============================================================================ */
main {padding:0 !important; background-color: white; min-width: 320px;}
main li.list-group-item {color: #676a6c;}

@media screen and (max-width: 991px) {
  main > .container {width: 100%; max-width: 100%;} }

/* =============================================================================
    Carrousel
 ============================================================================ */
#carousel-wrapper {background-color:#D7E3E3; border-bottom:1px solid #C3D5D5; padding:0;}
#carousel {padding:0;}
#carousel h1 {
  font-size: 2em;
  font-weight:600;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
  text-transform: uppercase;
  margin: 0 0 0.5em 0;}
#carousel img {
  width: 100%;
  height: auto;
  min-height: 200px;
  object-fit: cover;}
#carousel .carousel-caption {
  font-size: 0.9rem;
  bottom:25%;
  background-color: #D42B1E;
  opacity: 0.95;
  max-width: 25em;
  text-align: left;
  padding: 1.5em;}
#carousel .carousel-control-next-icon, .carousel-control-prev-icon {width: 70px; height: 70px;}
#carousel .carousel-control-next {background: linear-gradient(to right, #D7E3E300, #D7E3E3AA 90%, #D7E3E3); opacity: 1;}
#carousel .carousel-control-prev {background: linear-gradient(to left, #D7E3E300, #D7E3E3AA 90%, #D7E3E3); opacity: 1;}

@media screen and (max-width: 991px) {
  #carousel .carousel-caption {
    text-shadow: none;
    max-width: none;
    background-color: #00000080;
    position: absolute;
    top:0;bottom:0;left:0;right:0;
    text-align: center;
    padding:2% 15%;}
  #carousel .carousel-control-prev, #carousel .carousel-control-next { background:none; z-index: 11;}
  #carousel {width: 100%; max-width: none;} }
@media screen and (max-width: 575px)
  {
    #carousel .carousel-caption {display: flex; font-size: 0.8rem; text-align:center; align-items: center; justify-content: center;} }

/* =============================================================================
    Home
 ============================================================================ */
#homepage main section {
  display: grid;
  grid-template-columns: 24% 24% 24% 24%;
  grid-template-rows: auto auto;
  grid-gap: 1%;}
#homepage .articles-card {
  grid-column: 1 / 3;
  grid-row: 1 / 3;}
#homepage .nouveautes-card {
  grid-column: 3 / 4;
  grid-row: 1 / 3;}
#homepage .actualites-card {
  grid-column: 4 / 5;
  grid-row: 1 / 3;}
#homepage .card {border:none;}
#homepage main .card h1 {font-weight: 700; color: rgb(51, 51, 51); font-size: 1.0rem;}
#homepage main .card h2 {font-weight: 600; margin: 0 0 0.2em 0; color: #4f4f4f;}
#homepage main .card-header {padding: .75rem;}
#homepage main .card:hover h1 {color: #333333cc}
#homepage main .actualite-body {text-align: justify; padding: .75rem 0.75rem;}
#homepage main .articles-card li {
  padding: .75rem 0.75rem;
  position: relative;
  display: block;
  text-decoration: none;
  background-color: #fff;
  border-top: 1px solid rgba(0,0,0,.125);}
#homepage main .articles-card li:first-child {border: none;}
#homepage main .articles-card li:last-child {padding-bottom: 0;}
#homepage main .article-teaser {height: 125px;width: 150px;}
#homepage main .article-teaser img {padding: 0 1em 1em 0;}
#homepage main .nouveaute-teaser {height: 155px;}
#homepage main .card img {width: 100%; height:100%; object-fit: cover;}

@media screen and (max-width: 991px) {
  #homepage .articles-card {
    grid-column: 1 / 5;
    grid-row: 1 / 2;}
  #homepage .nouveautes-card {
    grid-column: 1 / 3;
    grid-row: 2 / 3;}
  #homepage .actualites-card {
    grid-column: 3 / 5;
    grid-row: 2 / 3;} }
@media screen and (max-width: 599px) {
  #homepage .nouveautes-card {
    grid-column: 1 / 5;
    grid-row: 2 / 3;}
  #homepage .actualites-card {
    display: none;} }
@media screen and (max-width: 425px) {
  #homepage main .card-header, #homepage main .list-group-item  {padding: .75rem 0;}
  #homepage .nouveautes-card .card-body {padding: 1rem 0;}}

/* =============================================================================
    Contacts
 ============================================================================ */
#contacts h1 {font-weight: 600;}
#contacts section {
    display: grid;
    grid-template-columns: repeat(1, minmax(250px, 1fr));
    grid-gap: 2rem;}
#contacts main div.card {color: rgb(51, 51, 51); min-height: 13rem;}
#contacts main div.card-body {display: flex; justify-content: space-evenly; margin-right: -15px; margin-left: -15px;}
#contacts main div.card-body > div div {height: 5rem}
#contacts main div.card-body > div:first-child {flex: 0 1 125px}
#contacts main div.card-body > div:last-child {flex: 0 1 190px}
#contacts .card .col-7 div:nth-child(3){color:red !important;}

@media screen and (max-width: 375px) {
  #contacts main .card { font-size: 0.70rem; min-height: 12rem;}
  #contacts main .card .btn{ font-size: 0.80rem;} }
@media screen and (min-width: 768px) {
  #contacts section { grid-template-columns: repeat(2, minmax(375px, 1fr)); } }
@media screen and (min-width: 1200px) {
  #contacts section { grid-template-columns: repeat(3, minmax(375px, 1fr)); } }

/* =============================================================================
  Partenaires
============================================================================= */
#partenaires h1, #partenaires h2 {font-weight: 600;}
#partenaires section {
  display: grid;
  grid-template-columns: repeat(1, minmax(280px, 1fr));
  grid-gap: 1.5rem;}
#partenaires main .media {border: 1px solid rgba(0,0,0,.125); border-radius: 0; color: #676a6c; font-size: 0.85rem; padding: 1.25rem; height: 180px;display: flex; align-items: flex-start;}
#partenaires main .media:hover {border: 1px solid transparent; box-shadow: 0 1px 3px 0 #a8a8a8;}
#partenaires main .media img {object-fit:cover; width: 130px; height:auto; margin-right:1.3rem}
#partenaires main .media .feather-camera { width: 130px; height: 100px; margin: 20px 30px 0 10px; opacity: 0.45;}
#partenaires main .media-body{flex:1;}

@media screen and (min-width: 768px) {
  #partenaires section { grid-template-columns: repeat(2, minmax(340px, 1fr)); } }
@media screen and (min-width: 1200px) {
  #partenaires section { grid-template-columns: repeat(3, minmax(350px, 1fr)); } }

/* =============================================================================
    Lasers
 ============================================================================ */
#lasers h1 {font-weight: 600;}
#lasers section {
  display: grid;
  grid-template-columns: repeat(1, minmax(255px, 1fr));
  grid-gap: 1.5rem;}
#lasers input {border-radius: 0; margin-right: .5rem;}
#lasers .btn-help {border: 1px solid #d2d2d2; background-color: #f2f2f2;}
#lasers svg.tag {width: 21px;}
#lasers main .card:hover {border: 1px solid transparent; box-shadow: 0 1px 3px 0 #a8a8a8;}
#lasers main .card img {object-fit:cover; height:140px;}
#lasers main .card .feather-camera { height: 140px; width: auto; padding: 2rem 0 1rem; opacity: .45;}
#lasers main .card-body {height: 7rem;}
#lasers .laserSearch_form_col {margin-bottom: .3rem;}
#lasers .laserSearch_form_col div {margin-bottom: .3rem;}
#lasers .laserSearch_form_col div:first-child {font-weight: bold; margin-bottom: .5rem;}
#lasers .laserSearch_form button {width:100%; margin-bottom: .5rem;}
#lasers .laserSearch_form button.btn-help {opacity: .65;}
#lasers .modal-content {border-radius: 0;}
#lasers .modal-content button.btn-close {width: 1rem; margin: 0.5rem;}

@media screen and (min-width: 768px) {
  #lasers section { grid-template-columns: repeat(2, minmax(255px, 1fr)); }  }
@media screen and (min-width: 992px) {
  #lasers section { grid-template-columns: repeat(3, minmax(255px, 1fr)); }  }
@media screen and (min-width: 1200px) {
  #lasers section { grid-template-columns: repeat(4, minmax(255px, 1fr)); }  }

/* =============================================================================
  Taxon
============================================================================= */
#taxon h1 {font-weight: 600;}
#taxon section {
  display: grid;
  grid-template-columns: repeat(1, minmax(255px, 1fr));
  grid-gap: 1.5rem;}
#taxon svg.tag {width: 21px;}
#taxon main .card:hover {border: 1px solid transparent; box-shadow: 0 1px 3px 0 #a8a8a8;}
#taxon main .card img {object-fit:cover; height:140px;}
#taxon main .card .feather-camera { height: 140px; width: auto; padding: 2rem 0 1rem; opacity: 0.45;}
#taxon main .card-body {height: 7rem;}

.callout {display: block;}
.callout.rule {
  border-bottom: 1px solid #dee0df;
  color: #f4645f;
  text-align: center;
  font-size: 13px;
  margin: 0 0 30px 0;
  position: relative;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;}
.callout.rule .text {
  top: 9px;
  background: #fff;
  padding: 0 20px;
  position: relative;}

@media screen and (min-width: 768px) {
  #taxon section { grid-template-columns: repeat(2, minmax(255px, 1fr)); } }
@media screen and (min-width: 992px) {
  #taxon section { grid-template-columns: repeat(3, minmax(255px, 1fr)); } }
@media screen and (min-width: 1200px) {
  #taxon section { grid-template-columns: repeat(4, minmax(255px, 1fr)); } }

/* =============================================================================
  Articles
============================================================================= */
#articles h1 {font-weight: 600;}
#articles p {text-align: justify;}
#articles section {
  display: grid;
  grid-template-columns: repeat(1, minmax(255px, 1fr));
  grid-gap: 1.5rem;}
#articles main .card {border: 1px solid rgba(0,0,0,.125); border-radius: 0; color: #676a6c; font-size: 0.85rem; min-height: 200px;flex-direction: row; flex-wrap: wrap; }
#articles main .card:hover {border: 1px solid transparent; box-shadow: 0 1px 3px 0 #a8a8a8;}
#articles main .card img {object-fit:cover; width: 200px; height:200px;}
#articles main .card .feather-camera { width: 128px; height: 100px; margin: 20px 30px 0 10px; opacity: 0.45;}
#articles main .card h2 {margin-bottom: .75rem; font-weight: 600;}
#articles main .card-body {padding: 1.25rem;}
#articles main .card-body .btn-primary {position:absolute; bottom: 1.25rem;}
#articles main .card-image-wrapper {flex: 0 0 150px;}
#articles main .card-text-wrapper {flex: 1 1 320px;}
#articles main .card-footer {padding-top: 0;}

@media screen and (max-width: 576px) {
  #articles main .card-body .btn-primary {position:relative; bottom:auto;}
  #articles main .card {!flex-direction: column; justify-content:space-around;}
  #articles main .card-text-wrapper {!flex: 1 1 180px;}
  #articles main .card .feather-camera { margin: 20px auto;}
  #articles main .card img {width: 250px; height:188px; margin: 20px auto;} }
@media screen and (min-width: 1200px) {
  #articles section { grid-template-columns: repeat(2, minmax(255px, 1fr));} }

/* =============================================================================
  Article
============================================================================= */
#article h1 {font-weight: 600;}
#article blockquote {
  background: #f7f7f7;
  border-left: 1px solid #bbb;
  font-style: italic;
  margin: 1.5rem 30px 1.5rem 10px;
  padding: 1rem;
  font-size: 0.875rem;}
#article .article-body {text-align: justify;}
#article .article-body h2 {font-size: 1.5rem;}
#article .article-body h3 {font-size: 1.2rem;}
#article .article-body a {color: dodgerblue !important; font-weight: bold !important;}
#article svg.envelope {width: 14px;}
#article .btn.contact { float: right;}
#article .accordion .card .collapse {padding: 1.25rem;}

@media screen and (max-width: 767px) {
  #article .btn.contact { float: left; margin-top: 1em; } }

/* =============================================================================
  Nouveautés
============================================================================= */
#nouveautes h1 {font-weight: 600;}
#nouveautes p {text-align: justify;}
#nouveautes section {
  display: grid;
  grid-template-columns: repeat(1, minmax(255px, 1fr));
  grid-gap: 1.5rem;}
#nouveautes main .card:hover {border: 1px solid transparent; box-shadow: 0 1px 3px 0 #a8a8a8;}
#nouveautes main .card img {object-fit:cover; height:140px;}
#nouveautes main .card .feather-camera { height: 140px; width: auto; padding: 2rem 0 1rem; opacity: 0.45;}
#nouveautes main .card-body {height: 7rem;}

@media screen and (min-width: 768px) {
  #nouveautes section { grid-template-columns: repeat(2, minmax(255px, 1fr)); }
}
@media screen and (min-width: 992px) {
  #nouveautes section { grid-template-columns: repeat(3, minmax(255px, 1fr)); }
}
@media screen and (min-width: 1200px) {
  #nouveautes section { grid-template-columns: repeat(4, minmax(255px, 1fr)); }
}

/* =============================================================================
  Actualités
============================================================================= */
#actualites h1 {font-weight: 600;}
#actualites p {text-align: justify;}
#actualites section {
  display: grid;
  grid-template-columns: repeat(1, minmax(255px, 1fr));
  grid-gap: 1.5rem;}
#actualites .media {border-bottom: 1px solid rgba(0,0,0,.125); border-radius: 0; color: #676a6c; font-size: 0.85rem; padding-bottom: 1.25rem;}
#actualites .media svg.envelope { width: 14px;}
#actualites .media h2 {margin-bottom: .75rem; font-weight: 600; font-size: 1.5rem;}
#actualites .media-body img { max-width: 100%; height: auto !important;}
#actualites .media-body .contact {float:right;}

@media screen and (max-width: 767px) {
  #actualites .media-body img { margin:0; padding: 0.5rem;}
  #actualites .media h2 {font-size: 1rem;}}

/* =============================================================================
    Produit
 ============================================================================ */
#product {color: #666666;}
#product h1, #product h2 {font-weight: 600;}
#product .product-left {color:#333333}
#product .product-image img {object-fit:cover; width: 100%; height:auto; min-height: 200px; display: block;}
#product .product-right img {
  padding: 0.5rem;
  margin: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0;
  max-width: 100%;
  height: auto;}
#product article .product-header {color: #333333;}
#product article .product-header p {font-size: 0.82rem; text-align: justify; color: #333333;}
#product article .product-description {font-size: 0.82rem; text-align: justify; color: #666666;}
#product article .product-description a {color: dodgerblue; font-weight: bold;}
#product article .product-website {font-size: 0.82rem;color: #666666;}
#product article > .row {flex-wrap: wrap-reverse;}
#product .tag-list li a {
    font-size: 10px;
    background-color: #f3f3f4;
    padding: 5px 12px;
    border-radius: 0;
    border: 1px solid #e7eaec;
    margin-right: 5px;
    margin-top: 5px;
    display: block;}
#product .tag-list li { list-style: none; float: left;}
#product .tag-list { padding: unset; float: left;}
#product .btn {float: right;}
#product svg.tag {width: 11px;}
#product svg.envelope {width: 14px;}
#product svg.adobe {width: 14px;color:red;}
#product svg.feather-camera { width: 100px; height: auto; padding: 50px 0; opacity: 0.45;}

@media screen and (max-width: 767px) { #product .btn { float: left; margin-top: 1em; } }
@media screen and (max-width: 320px) {
  #product .product-right img {
  width: 100% !important;
  height: auto !important;
  float: none !important;
  margin: 2% 0 !important;
  padding: 2% !important;}
}

/* =============================================================================
    Search Result
============================================================================= */
#search h1 {font-weight: 600;}
#search p {text-align: justify;}
#search section {
  display: grid;
  grid-template-columns: repeat(1, minmax(255px, 1fr));
  grid-gap: 1.5rem;}
#search input {border-radius: 0;}
#search .btn-help {border: 1px solid #d2d2d2; background-color: #f2f2f2; opacity: .65;}
#search .media {border: 1px solid rgba(0,0,0,.125); border-radius: 0; color: #676a6c; font-size: 0.85rem; min-height: 200px;}
#search .media:hover {border: 1px solid transparent; box-shadow: 0 1px 3px 0 #a8a8a8;}
#search .media img {object-fit:cover; width: 200px; height:200px;}
#search .media .feather-camera { width: 128px; height: 100px; margin: 25px 30px 25px 10px; opacity: 0.45;}
#search .media h2 {margin-bottom: .75rem; font-weight: 600;}
#search .media-body .btn-primary {position:absolute; bottom: 1.25rem;}
#search .media-body {padding: 1.25rem;}
#search .modal-content {border-radius: 0;}
#search .laserSearch_form button {width: 100%;}

@media screen and (max-width: 426px) {
  #search .media { flex-direction: column;}
  #search .media .feather-camera { margin: 20px auto;}
  #search .media img {width: 250px; height:188px; margin: 20px auto;} }
@media screen and (max-width: 767px) {
  #search button[type=submit], #search input {margin-bottom: 15px;}
}

/* =============================================================================
    Footer
 ============================================================================ */
footer {background-color: #10151C; color: #D9DEE4; font-size:1rem; padding-top: 1rem;}
footer div.container {
  padding-left: 0px; 
  padding-right: 0px;
  display: grid;
  grid-template-columns: 24% 24% 24% 24%;
  grid-column-gap: 1%;}
footer .company-card {
  grid-column-start: 1;
  grid-column-end: 2;}
footer .contact-card {
  grid-column-start: 2;
  grid-column-end: 3;}
footer .follow-card {
  grid-column-start: 3;
  grid-column-end: 4;}
footer .legal-card {
  grid-column-start: 4;
  grid-column-end: 5;}
footer .card,  footer .card-header { border:none; background-color: #10151C; color: #D9DEE4;}
footer .card {padding: 0 5px;}
footer .card-header {padding: .75rem 1rem;}
footer .card-header h3 {font-size: 1.0rem; font-weight: 700;}
footer .card-body {color: #666; padding-top: 0; font-size: 0.92rem;}
footer .footer-contact {list-style-type: none; padding-left: 0;}
footer .footer-contact li:last-child a {color:white;font-weight: bolder;}
footer .footer-social {list-style: none; padding:0;}
footer .footer-social li {float:left;}
footer .footer-social li a {
  display: block;
  background-color: #20262F;
  margin-right: 10px;
  border-radius: 16px;
  height: 32px;
  width: 32px;
  font-size: 20px;
  color:white;
  text-align: center;}
footer a:hover {color:white;}
footer ul {margin-left:0px !important;}
footer li.twitter a:hover { background-color: #4AB3F4; }
footer li.linkedin a:hover { background-color: #0073b0; }
footer svg {width:12px;}
footer svg.linkedin, footer svg.twitter {width:16px;}
#footer-message {
  background-color: var(--cp1);
  min-width: 8rem;
  line-height: 2rem;
  color: white;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  bottom: 30px;
  left: 020px;}

@media screen and (max-width: 1023px) {
  footer .container {grid-column-gap: 0;}
  footer .card {padding:0;}
  footer .card-header {padding: 0.75rem 0;}
  footer .card-body {padding: 0 0 0.75rem 0;}
  footer .company-card {
    grid-column: 1 / 5;
    grid-row: 1 / 1;}
  footer .contact-card {
    grid-column: 1 / 5;
    grid-row: 2 / 2;}
  footer .follow-card {
    grid-column: 1 / 5;
    grid-row: 3 / 3;}
  footer .legal-card {
    grid-column: 1 / 5;
    grid-row: 4 / 4;}
}

/* =============================================================================
    Page d'erreur
 ============================================================================ */
body#error {background-color: #2f4050; font-size: 12px; color: white; overflow-x: hidden;}
body#error h1 {font-weight:100; font-size:10rem;}
body#error svg {margin-bottom: 2rem; height: 7rem;}
body#error .container {max-width: 600px; padding-top: 40px;}

/* =============================================================================
    SVG
 ============================================================================ */
svg.search {width:16px;}
svg.info {width:6px;}

/* =============================================================================
    Responsive
 ============================================================================ */
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)       @media only screen and (min-width: 576px) {...}
// Medium devices (tablets, 768px and up)               @media only screen and (min-width: 768px) {...}
// Large devices (desktops, 992px and up)               @media only screen and (min-width: 992px) {...}
// Extra large devices (large desktops, 1200px and up)  @media only screen and (min-width: 1200px) {...}
*/

}