/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,400&display=swap');

   html {
     color: #222;
     font-size: 1em;
     line-height: 1.4;
     scroll-behavior: smooth;
   }
   
   /*
    * Remove text-shadow in selection highlight:
    * https://twitter.com/miketaylr/status/12228805301
    *
    * Customize the background color to match your design.
    */
   
   ::-moz-selection {
     background: var(--selection-color);
     text-shadow: none;
   }
   
   ::selection {
     background: var(--selection-color);
     text-shadow: none;
   }
   
   /*
    * A better looking default horizontal rule
    */
   
   hr {
     display: block;
     height: 1px;
     border: 0;
     border-top: 1px solid #ccc;
     margin: 1em 0;
     padding: 0;
   }
   
   /*
    * Remove the gap between audio, canvas, iframes,
    * images, videos and the bottom of their containers:
    * https://github.com/h5bp/html5-boilerplate/issues/440
    */
   
   audio,
   canvas,
   iframe,
   img,
   svg,
   video {
     vertical-align: middle;
   }
   
   /*
    * Remove default fieldset styles.
    */
   
   fieldset {
     border: 0;
     margin: 0;
     padding: 0;
   }
   
   /*
    * Allow only vertical resizing of textareas.
    */
   
   textarea {
     resize: vertical;
   }
   
   /* ==========================================================================
      Author's custom styles
      ========================================================================== */
   
   /* ==========================================================================
      Helper classes
      ========================================================================== */
   
   /*
    * Hide visually and from screen readers
    */
   
   .hidden,
   [hidden] {
     display: none !important;
   }
   
   /*
    * Hide only visually, but have it available for screen readers:
    * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
    *
    * 1. For long content, line feeds are not interpreted as spaces and small width
    *    causes content to wrap 1 word per line:
    *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
    */
   
   .visually-hidden {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     white-space: nowrap;
     width: 1px;
     /* 1 */
   }
   
   /*
    * Extends the .visually-hidden class to allow the element
    * to be focusable when navigated to via the keyboard:
    * https://www.drupal.org/node/897638
    */
   
   .visually-hidden.focusable:active,
   .visually-hidden.focusable:focus {
     clip: auto;
     height: auto;
     margin: 0;
     overflow: visible;
     position: static;
     white-space: inherit;
     width: auto;
   }
   
   /*
    * Hide visually and from screen readers, but maintain layout
    */
   
   .invisible {
     visibility: hidden;
   }
   
   /*
    * Clearfix: contain floats
    *
    * The use of `table` rather than `block` is only necessary if using
    * `::before` to contain the top-margins of child elements.
    */
   
   .clearfix::before,
   .clearfix::after {
     content: "";
     display: table;
   }
   
   .clearfix::after {
     clear: both;
   }
   
   /* ==========================================================================
      Site specific CSS
      ========================================================================== */
   :root {
     --main-color: #fff;
     --dark-color: #262626;
     --contrast-color: #ff4c4c;
     --selection-color: #ff4c4c77;
     --link-color: #07d;
     --ok: #0c0;
     --err: #c00;
   }
   
   body {
     margin: 0;
     padding: 0;
   }
   
   * { font-family: "Lato", sans-serif; }
   
   header {
     display: flex;
     width: 100%;
     height: 100vh;
     background: #2a2a2c url('../img/bg.webp') left center no-repeat;
     padding: 0;
   }

   header > div {
    display: flex;
    width: 100%;
    align-items: flex-end;
    padding: 0 50px 50px;
    justify-content: space-around;
   }
   
   header > div > * {
     transform: translateY(-100px);
   }

   h1 {
     font-size: 72px;
     font-weight: 900;
     color: #fff;
     text-transform: uppercase;
     line-height: 1em;
   }
   
   h1 span {
     color: var(--contrast-color);
   }

   h2 {
    font-size: 50px;
    text-align: center;
    text-transform: uppercase;
    color: var(--contrast-color);
    font-weight: 900;
   }

   section {
    position: relative;
   }

   a:link,
   a:visited {
    color: var(--link-color);
   }

   em {
    font-weight: 900;
    color: var(--contrast-color) !important;
   }

   em.flash {
    color: var(--contrast-color) !important;
    font-size: 275%;
    margin-top: 20px;
    text-shadow: #fff3 2px 2px 2px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
   }
   em.flash.bottom {
    margin-top: -120px;
   }
   
   header a.button,
   input[type="submit"] {
     background: var(--contrast-color);
     border-radius: 30px;
     border: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 350px;
     height: 60px;
     color: var(--main-color);
     font-weight: bold;
     text-transform: uppercase;
     text-decoration: none;
     font-size: 24px;
     cursor: pointer;
   }

   form > div {
     /* outer wrapper */
     width: 100%;
     display: flex;
     justify-content: center;
   }

   form > div > div {
     /* inner wraper */
     width: 1000px;
     display: flex;
     flex-wrap: wrap;
   }

   form > div > div > div {
     width: 90%;
     border: 2px solid #222;
     padding: 2em;
     margin: 1em;
     background: #333;
   }

   .center-flex {
     display: flex;
     justify-content: center;
     margin: 1em auto;
   }

   section.dark {
     background: var(--dark-color);
     color: var(--main-color);
     padding: 2em 0;
   }

   section.dark b {
    color: var(--contrast-color);
   }

   .columns {
    display: flex;
    justify-content: space-around;
   }
   p.center {
    text-align: center;
   }
   p.info {
    font-size: 125%;
   }

   #mail-fail {
    display: none;
    font-weight: bold;
    color: var(--err);
   }
   #mail-success {
    display: none;
    font-weight: bold;
    color: var(--ok);
   }

   #vin-error {
    display: none;
    color: var(--err);
   }

   #fb-icon,
   #fb-icon-mobile {
    position: fixed;
    left: 0;
    bottom: 100px;
    text-decoration: none;
    display: block;
    padding: 20px 30px 20px 20px;
    font-size: 30px;
    background: #3B5998;
    color: #fff;
    border-radius: 0 10px 10px 0;
   }

   #fb-icon-mobile {
    display: none;
    position: absolute;
    bottom: 200px;
   }

   /* ==========================================================================
        FORM
      ========================================================================== */
    
    form label {
      display: block;
      transform: translate(0, -2.75rem);
    }

    form input, form select {
      width: 100%;
      margin-top: 1.5rem;
      padding: 0.5rem 0;
      border: none;
      border-bottom: 2px solid #111;
      transition: border-color 0.2s ease;
      background: #333;
      color: #999;
    }

    form input:focus, form select:focus {
      outline: none;
      border-color: var(--ok);
    }

    form div div.radio-select {
      text-align: center;
    }

    form div div.radio-select label {
      transform: none;
      font-size: 100%;
      width: 100%;
      text-align: left;
    }

    form div div.radio-select input {
      text-align: right;
      width: 10px;
      margin: 0 10px 0 0;
    }

    .select-box {
      display: flex;
      align-items: center;
      margin-top: 1.5rem;
    }
    .select-box label {
      flex: 1 0 120px;
      transform: none;
    }

    form input[type="submit"] {
      background-color: var(--contrast-color);
      padding: 1rem;
      font-size: 150%;
      margin: 3rem auto .5rem;
      flex: 1 0 100%;
    }

    form .validation {
      background-color: #FBDEDE;
      border-color: #C32A2A;
    }

    @supports (not (-ms-ime-align:auto)) {
      form label {
        color: #999;
        transform: translate(0.25rem, -1.5rem);
        transition: all 0.2s ease-out;
      }

      form select {
        color: #999;
        margin: 0;
      }
    
      form input:focus + label,
      form input:not(:placeholder-shown) + label {
        color: #aaa;
        transform: translate(0, -2.75rem);
        font-size: 75%;
      }
    }
    
    /* fix for chrome autofill bg color */
    form input:-webkit-autofill,
    form input:-webkit-autofill:hover, 
    form input:-webkit-autofill:focus, 
    form input:-webkit-autofill:active{
        -webkit-box-shadow: 0 0 0 30px #333 inset !important;
    }
    input:-webkit-autofill{
      -webkit-text-fill-color: #999 !important;
  }


  /* ==========================================================================
      ACCORDION
    ========================================================================== */

    .accordion-wrapper {
      position: relative;
      margin: auto auto 2.5rem;
      max-width: 800px;
    }
    .accordion-wrapper input {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: all 0.35s;
    }
    .accordion-content p {
      text-align: center;
    }
    .accordion-wrapper input:checked ~ .accordion-content {
      max-height: fit-content;
    }
    .cb-label {
      display: flex;
      justify-content: space-between;
      padding: 1rem;
      font-size: 1.5rem;
      cursor: pointer;
    }
    .cb-label::after {
      content: "\276F";
      width: 1em;
      height: 1em;
      text-align: center;
      transform: rotate(90deg);
      transition: all 0.35s;
    }
    .accordion-wrapper input:checked + .cb-label::after {
      transform: rotate(270deg);
    }
    .accordion-wrapper input:not(:checked) + .cb-label:hover::after {
      animation: bounce .5s infinite;
    }
    @keyframes bounce {
      25% {
        transform: rotate(90deg) translate(.25rem);
      }
      75% {
        transform: rotate(90deg) translate(-.25rem);
      }
    }
    
   
   /* ==========================================================================
      EXAMPLE Media Queries for Responsive Design.
      These examples override the primary ('mobile first') styles.
      Modify as content requires.
      ========================================================================== */
   
   @media only screen and (max-width: 35em) {
     /* Style adjustments for viewports that meet the condition */
     em.flash { font-size: 100%; }
     h1 { font-size: 32px; text-align: center; }
     header > div { display: block; padding: 5em 0 .5em; }
     header > div > * { transform: none; }
     header a.button { margin: 2em auto auto; }
     #fb-icon { position: relative; width: 100%; text-align: center; bottom: 0; border-radius: 0; }
     #fb-icon-mobile { display: block; }
     .columns { display: block; }
     .columns > div { padding-left: 1em; }
   }
   
   @media print,
     (-webkit-min-device-pixel-ratio: 1.25),
     (min-resolution: 1.25dppx),
     (min-resolution: 120dpi) {
     /* Style adjustments for high resolution devices */
   }
   
   /* ==========================================================================
      Print styles.
      Inlined to avoid the additional HTTP request:
      https://www.phpied.com/delay-loading-your-print-css/
      ========================================================================== */
   
   @media print {
     *,
     *::before,
     *::after {
       background: #fff !important;
       color: #000 !important;
       /* Black prints faster */
       box-shadow: none !important;
       text-shadow: none !important;
     }
   
     a,
     a:visited {
       text-decoration: underline;
     }
   
     a[href]::after {
       content: " (" attr(href) ")";
     }
   
     abbr[title]::after {
       content: " (" attr(title) ")";
     }
   
     /*
      * Don't show links that are fragment identifiers,
      * or use the `javascript:` pseudo protocol
      */
     a[href^="#"]::after,
     a[href^="javascript:"]::after {
       content: "";
     }
   
     pre {
       white-space: pre-wrap !important;
     }
   
     pre,
     blockquote {
       border: 1px solid #999;
       page-break-inside: avoid;
     }
   
     tr,
     img {
       page-break-inside: avoid;
     }
   
     p,
     h2,
     h3 {
       orphans: 3;
       widows: 3;
     }
   
     h2,
     h3 {
       page-break-after: avoid;
     }
   }