/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.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
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  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;
}
/* ==========================================================================
   FONTS
   ========================================================================== */

   @import url('../fonts/diglu-light.css');
   @import url('../fonts/diglu-medium.css');

   @font-face {
     font-family: 'diglu-Light';
     src: url('../fonts/dobi-Light.otf');
   }

   @font-face {
    font-family: 'diglu-Medium';
    src: url('../fonts/dobi-Medium.otf');
  }

   /*
   font-family: 'diglu-Light', sans-serif;
   font-family: 'diglu-Medium', sans-serif;
   */

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

   *{
    font-family: 'diglu-Light', sans-serif;
    font-display: auto;
    margin:0;
    padding:0;
    box-sizing:border-box;
   }

   body{
    overflow-x: hidden !important;
    width: 100vw !important;
    position: relative;
     font-family: 'diglu-Light', sans-serif;
     background-color:#fff;
   }

   .grid-x{
     padding: 0 5vw;
     margin:auto;
   }

   ul{
     margin:0;
   }

   ul li{
     list-style-type: none;
   }

   a{
     color:#000 !important;
   }

   a:hover{
    color:#000;
  }

  p{
    font-size: 18px;
    line-height: 25px;
  }


  img{
    max-width:auto;
  }

  #cursor {
    opacity: 0;
    position: fixed;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #000;
    pointer-events: none;
    z-index: 11 !important;
    transition: transform 0.2s;
  }



   /*-------Header-------*/

   header{
     height:100vh;
     width:100vw;
     padding-top:50px;
     position: relative;
   }

   .LignesNoires{
    position: absolute;
    top:0;
    width: 100vw;
    height:100vh;
    z-index: 0;
    display:none;
   }
   .LignesNoires svg{
     width:225vw;
     margin-top:-21vh;
     margin-left:-23vh;
   }

   header h1 img{
     width:100px;
     position: absolute;
     z-index:5;
     mix-blend-mode: difference;
   }

   header nav ul li{
     display: inline-block;
   }

   header #mainnav{
    text-align: right;
    position: fixed;
    right:5vw;
    z-index:5;
    mix-blend-mode: difference;
  }

   header #mainnav ul li{
     padding-left:25px;
     font-size:18px;
       }

       header #mainnav ul li a{
        color:#fff !important;
  
          }

  header #socialmedianav{
      mix-blend-mode: difference;
    }

   header #socialmedianav ul li{
    padding-right:25px;
    font-size:18px;
   }
   header #socialmedianav ul li a{
    color:#fff !important;
   }

   header #socialmedianav, header #title img{
     position:absolute;
     bottom:40px;    
   }

   header #title img{
    right:5vw;
    height: 68px;
    mix-blend-mode: difference;
  }

   header .topplease{
     position: relative;
   }

   header .top{
     position: absolute;
     right:0;
     top:-13px;
     display: none;
   }

   header svg{
     position: absolute;
     top:0;
     width:100vw;
     z-index:-1;
   }

   #title{
    opacity: 0;
   }

   .titleopacity{
    opacity: 1 !important;
    transition: all .1s ease-out;
   }

   .topmobile{
     display:none;
   }

   p#cookit-message{
    font-size: 12px;
     margin:0 !important;
     color:#fff !important;
   }
   #cookit{
    font-size:12px;
   }
   #cookit-link{
     color:#fff !important;
   }

   #cookit #cookit-container {
    width: 90vw !important;
    }

    #pastillejob{
      width: 100px;
      height: 100px;
      font-size: 20px;
      line-height: 22px;
      background: #FFD580;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100px;
      z-index: 2;
      position: absolute;
      bottom: 100px;
      right: 30px;
      transform: rotate(15deg);
		display:none;
    }
    #pastillejob p{
      font-size: 20px;
      text-align: center;
      font-family: 'diglu-Medium';
      line-height: 22px;
      margin-top: 18px;
    }

    /*-------Prestations-------*/

    #prestations{
      height:80vh;
      box-shadow: 0 0 40px rgba(0,0,0,.1);
      position: relative;
      display: flex;
    }

    #prestations div p{
      font-family: 'diglu-Medium', sans-serif;
      font-size:42px;
      line-height: 60px;
      align-content: center;
    }

    /*-------Project Teaser-------*/

    #ProjectsTeaser .grid-x{
      padding-right: 0 !important;
    }

    #ProjectsTeaser .ProjectsTeaserImgSvg{
      position: relative;
      height: 100vh;
      background-image: url(../img/proj-transfo-int-1.jpeg);
      background-repeat: no-repeat;
      background-size: cover;
    }

    #ProjectsTeaser img{
      height: 100vh;
      height: auto;
    }

    #ProjectsTeaser #animationprojectteaser{
      width: 9.3px;
      top: 0;
      left: 0;
      position: absolute;
    }

    #ProjectsTeaser svg{
      height: 100vh;
      position: absolute;
      top: 0;
      left: -68px;
      cursor:pointer;
    }

    #ProjectsTeaser svg #Tracé_214{
      transform: translate(-80px, -75px);
      opacity: 0;
      transition: all .5s ease-out;
    }
    #ProjectsTeaser svg:hover #Tracé_214{
      opacity: 1;
    }
    #ProjectsTeaser svg #Ellipse_1067-2{
      filter: drop-shadow(4px 14px 10px rgb(0 0 0 / 0.1));
    }

    /*-------Ideel-------*/

    #ideel{
      height: 80vh;
      display: flex;
      box-shadow: 0 0 40px rgba(0,0,0,.1);
    }

    #ideel #aproplink{
      height: 150px;
      position: relative;
      margin-top: 20px;
    }

    #ideel #aproplink div{
      width: 30px;
      height: 30px;
      background: #000;
      border-radius: 100px;
      position: absolute;
      margin-top: -15px;
      margin-left: -15px;
      top: 40%;
      left: 50%;
      transition: all .3s ease-out;
    }

    #ideel #aproplink .aproptext{
      position: absolute;
      top: 50%;
      left: 50%;
      opacity: 0;
      margin-left: -31px;
      transition: all .3s ease-out;
    }
    #ideel #aproplink:hover .aproptext{
      opacity: 1;
      top: 80%;
      transition: all .3s ease-out;
    }

    #ideel #aproplink:hover .aproplink2{
      top: 5%;
      left: 65%;
    }
    #ideel #aproplink:hover .aproplink3{
      top: 15%;
      left: 35%;
    }
    #ideel #aproplink:hover .aproplink4{
      top: 60%;
      left: 30%;
    }
    #ideel #aproplink:hover .aproplink5{
      top: 55%;
      left: 68%;
    }

    #ideel img{
      margin-top: -32px;
    }
    #ideel .ideeltext{
      margin-top: 30px;
    }

    /*-------Footer-------*/

    #contact{
      padding:150px 0;
      font-size: 18px;
      box-shadow: 0 10px 40px rgba(0,0,0,.1);
    }

    footer div img{
      margin-bottom:50px;
      width: 100px;
      mix-blend-mode: difference;
    }

    #break{
      background-image: url(../img/breakhome.svg);
      background-size: cover;
      height: 50vh;
    }

    /*-------Page Projets-------*/

    .pageprojets header {
      height: 45vh;
      background: url(../img/headerproj1.svg);
      background-size: cover;
      background-position:center;
      background-repeat: no-repeat;
    }

    .pageprojets header #title img {
      right: 5vw;
      height: 85px;
      mix-blend-mode: difference;
    }

    .pageprojets .gallerieIphoneipad {
      display: none;
    }

    .pageprojets #gallerieprojets, #gallerieDesktop {
      box-shadow: 0 0 40px rgba(0,0,0,.1);
      padding: 120px 0;
    }

    .pageprojets #gallerieprojets .proj {
      margin-bottom: 20px;
    }

    .pageprojets #gallerieprojets .proj .projcolor {
      position: relative;
      margin-bottom: 50px;
      height: fit-content;
    }

    .pageprojets #gallerieprojets .color {
      height: calc(100% - 25px);
      width: 100%;
      position: absolute;
      z-index: 4;
      top: 0;
    }
    

    .pageprojets #gallerieprojets .color1 {
      background: #bbd8ca;
    }
    .pageprojets #gallerieprojets .color2 {
      background: #a5bcc7;
    }
    .pageprojets #gallerieprojets .color3 {
      background: #c4b7cc;
    }
    .pageprojets #gallerieprojets .color4 {
      background: #fed47f;
    }
    .pageprojets #gallerieprojets .color5 {
      background: #dbbeb2;
    }

    .pageprojets #gallerieDesktop .projflexbottom {
      display: flex;
      align-items: flex-end;
    }

    .pageprojets #gallerieDesktop .projbottom {
      position: relative;
    }
  
    .pageprojets #gallerieDesktop .projbottom .projcolor {
      margin-top: 9%;
    }

    .pageprojets #gallerieDesktop .colordesk {
      height:100%;
      width: 100%;
      position: absolute;
      z-index: 4;
      top: 0;
      opacity: 0;
      transition: all .5s ease-out;
    }

    .pageprojets #gallerieDesktop .projlegende {
      position: absolute;
      bottom: 5px;
      left: 10px;
      z-index: 100;
      opacity: 0;
    }

    .pageprojets .projlast{
      margin-top: 9%;
    }
    .pageprojets .projlast1{
      margin-top: -9%;
    }

    .pageprojets #gallerieDesktop .projcolor:hover .colordesk ,.pageprojets #gallerieDesktop .projcolor:hover .projlegende{
      opacity: 1;
      transition: all .5s ease-out;
    }

    .pageprojets #gallerieDesktop .proj .projcolor {
      position: relative;
      height: fit-content;
    }

    .pageprojets #gallerieDesktop .colordesk1 {
      background: #FFD580;
    }

    .pageprojets #gallerieDesktop .colordesk2 {
      background: #C4B8CC;
    }

    .pageprojets #gallerieDesktop .colordesk3 {
      background: #BAD8CA;
    }

    .pageprojets #gallerieDesktop .colordesk4 {
      background: #DBBEB2;
    }

    .pageprojets .projcolor .animation{
        position: absolute;
        left: calc(100% - 15px);
        top: calc(50% - 30px);
        z-index: 100;
    }

    .pageprojets .projcolor .animation div{
      width: 30px;
      height: 30px;
      background: #000;
      position: absolute;
      left: 0;
      border-radius: 100px;
      transition: all .3s ease-out;
    }

    .pageprojets .projlegende{
      margin-bottom: 0;
    }

    .pageprojets .animation p{
      opacity: 0;
      left: 0;
      position: absolute;
    }

    .pageprojets .projcolor:hover .animation div:nth-child(2){
      left: 40px;
      transition: all .3s ease-out;
    }
    .pageprojets .projcolor:hover .animation div:nth-child(3){
      left: 80px;
      transition: all .3s ease-out;
    }
    .pageprojets .projcolor:hover .animation p{
      left: 120px;
      opacity: 1;
      transition: all .3s ease-out;
    }

    #breakproj{
      background-image: url(../img/fond.svg);
      background-size: cover;
      height: 50vh;
    }

    /*-------Page A propos-------*/

    .apropos header {
      height: 45vh;
      background: url(../img/headeraprop.svg);
      background-size: cover;
      background-position:center;
      background-repeat: no-repeat;
    }

    #team{
      box-shadow: 0 0 40px rgba(0,0,0,.1);
      padding: 200px 0;
    }

    #apropbreak{
      background-image: url(../img/breakaprop.svg);
      background-size: cover;
      height: 50vh;
    }

    .flip-card {
      width: 100%;
      aspect-ratio: 2/3.08;
      perspective: 1000px; /* Remove this if you don't want the 3D effect */
      position: relative;
    }

    .flip-card h2{
      font-size: 32px;
      line-height: 36px; 
      margin-top: 20px; 
      font-family: 'diglu-Medium', sans-serif;
    }
    
    /* This container is needed to position the front and back side */
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }
    
    /* Do an horizontal flip when you move the mouse over the flip box container */
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }
    
    /* Position the front and back side */
    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden; /* Safari */
      backface-visibility: hidden;
    }
    
    /* Style the front side (fallback if image is missing) */
    .flip-card-front {
      background-color: #bbb;
      color: black;
    }
    
    /* Style the back side */
    .flip-card-back {
      background-color:#F4EDE9;
      padding: 30px;
      transform: rotateY(180deg);
    }

    .card2{
      margin-top: -300px !important;
    }

    .flip-card .turn {
      display: none;
    }


     /*-------Page projet individuel-------*/


     .soloproj #title{
      position: absolute;
      bottom: 38px;
      right:5vw;
     }

     .soloproj #title h2{
      font-family: 'diglu-Medium', sans-serif;
      font-size: 32px;
      line-height: 36px;
      mix-blend-mode: difference;
      color: #fff;
     }

     .soloproj .textedescription{
      margin-top: 50px;
     }

    .soloproj .first, .third, .fifth{
      position: relative;
      margin-top: 160px;
    }

    .soloproj .fifth2{
      margin-top: 240px;
    }

    .soloproj .fourth{
      margin-top: 320px;
    }

    .soloproj .fourth2{
      margin-top: 120px;
    }

    .soloproj .six{
      margin-top: -240px;
    }

    .soloproj .six2{
      margin-top: 120px;
    }

    .soloproj .seven{
      margin-top: -120px;
    }

    .soloproj .seven2{
      margin-top: 120px;
    }
  

/* ==========================================================================
   Media queries
   ========================================================================== */

   @-moz-document url-prefix() {
    #cookit{
      background-color:#000 !important;
    }
  }
   /* Big screen */
    @media screen and (min-width: 1600px) {
      .LignesNoires svg{
        top:-15vh;
      }
    }

    /* IPAD */
    @media only screen 
    and (min-device-width : 640px) and (max-device-width : 1023.9px), (min-width: 640px)  and (max-width: 1023.9px)   {
      #cursor{
        display:none;
      }
      header{
        height:90vh;
      }
      .LignesNoires{
        height:90vh;
       }
      #LignesNoires1 svg{
        position: relative;
        width:271vw;
        margin-top:0;
        margin-left:-25vh;
      }
      #LignesNoires2 svg{
        position: relative;
        width:300vw;
        margin-top:-5vh;
        margin-left:-25vh;
      }
      #LignesNoires3 svg{
        position: relative;
        width:300vw;
        margin-top:-15vh;
        margin-left:-25vh;
      }
      #LignesNoires4 svg{
        position: relative;
        width:300vw;
        margin-top:-5vh;
        margin-left:-25vh;
      }
      #LignesNoires5 svg{
        position: relative;
        width:300vw;
        margin-top:-10vh;
        margin-left:-20vh;
      }
      #LignesNoires6 svg{
        position: relative;
        width:360vw;
        margin-top:0;
        margin-left:-18vh;
      }
      header #mainnav{
        text-align: right;
        position: fixed;
        z-index:10;
       }

       ul li{
        display:block !important;
        padding-bottom:5px;
      }
      #mainnav{
        margin-top:-15px;
      }

      #prestations{
        height:80vh;
      }

      #ideel {
        height: 60vh;
      }
      .pageprojets header {
        background-position: 93% 0px;
      }
      .soloproj .first, .third, .fifth {
        margin-top: 120px;
      }
      .soloproj .seven {
        margin-top: -80px;
      }
      #breakproj {
        height: 30vh;
      }

      #ProjectsTeaser svg {
        height: 50vh;
        left: -45px;
      }
      #ProjectsTeaser .ProjectsTeaserImgSvg {
        height: 50vh;
      }
      #ProjectsTeaser svg #Tracé_214{
        opacity: 1;
      }
      #ideel #aproplink .aproptext{
        opacity: 1;
        top: 55%;
        transition: all .3s ease-out;
      }
      .soloproj #title {
        left: 5vw;
      }
      .topplease {
        margin-bottom: 18px;
      }
      .flip-card .turn {
        display: block;
        position: absolute;
        bottom: -60px;
        right: 20px;
        font-size: 55px;
        cursor: pointer;
        z-index: 100;
        transition: all .3s ease-out;
      }
      .turnclose{
        transform: rotate(45deg) !important;
        transition: all .3s ease-out;
      }
      .fliptouch {
        transform: rotateY(180deg) !important;
      }
      .flip-card:hover .flip-card-inner {
        transform: none;
      }
      .animation{
        display: none;
      }

      .pageprojets .gallerieIphoneipad {
        display: block;
      }
      .pageprojets #gallerieDesktop {
        display: none;
      }
    }

    /* IPHONE */
@media only screen and (max-device-width : 640px), (max-width: 640px)  {
  #cursor{
    display:none;
  }

  p{
    font-size: 16px;
  }

  #cookit-container{
    padding-top:5px;
  }

  #cookit-link{
    margin-left: 0;
  }

  #LignesNoires1 svg{
    position: relative;
    width:425vw;
    margin-top:0;
    margin-left:-45vh;
  }

  #LignesNoires2 svg{
    position: relative;
    width:425vw;
    margin-top:0;
    margin-left:-80vh;
  }

  #LignesNoires3 svg{
    position: relative;
    width:425vw;
    margin-top:-10vh;
    margin-left:-25vh;
  }
  #LignesNoires4 svg{
    position: relative;
    width:450vw;
    margin-top:-17vh;
    margin-left:-19vh;
  }
  #LignesNoires5 svg{
    position: relative;
    width:450vw;
    margin-top:-25vh;
    margin-left:-25vh;
  }
  #LignesNoires6 svg{
    position: relative;
    width:425vw;
    margin-top:0;
    margin-left:0;
  }

  #mainnav{
    margin-top:-33px;
  }

  ul li{
    display:block !important;
    padding-bottom:5px;
  }

  header{
    height:85vh;
  }
  .LignesNoires{
    height:85vh;
   }

  header #title img{
    right:5vw;
    width:140px;
  }

  header #socialmedianav{
    bottom:30px;
  }
  header #title img{
    bottom:11px;
  }
  #pastillejob{
    bottom: 70px;
    right: 20px;
  }

  #prestations{
    height:80vh;
  }
  #prestations div p {
    font-size: 28px;
    line-height: 40px;
    margin-top:15%;
  }
  .ipadplease{
    margin-bottom:50px;
  }
  .mobileplease{
    margin-bottom:50px;
  }
  #contact{
    padding:auto;
    height: 100vh;
    font-size: 16px;
  }
  #contact ul li{
    padding-bottom:0;
  }
  .legendemobile{
    display:block;
  }
  .legendedesktop{
    display:none;
  }
  .soloproj #title h2 {
    font-size: 22px;
    line-height: 28px;
  }
  .soloproj #title {
    left: 5vw;
  }
  .apropos header {
    background-position: 63% 0px !important;
  }
  .pageprojets header {
    background-position: 33% -100px;
  }
  .pageprojets #gallerieprojets {
    padding: 120px 0 80px 0;
  }
  .pageprojets .animation{
    display: none;
  }
  .pageprojets #gallerieprojets .color {
    height: 100%;
  }
  .soloproj #gallerieprojets {
    padding: 0 0 120px 0;
  }
  #gallerie .cell{
    margin: 120px 0 0 0;
  }
  #breakproj {
    height: 30vh;
  }
  #ProjectsTeaser svg {
    height: 50vh;
    left: -15px;
  }
  #ProjectsTeaser .ProjectsTeaserImgSvg {
    height: 50vh;
  }
  #ProjectsTeaser svg #Tracé_214{
    opacity: 1;
  }
  #ideel #aproplink .aproptext{
    opacity: 1;
    top: 55%;
    transition: all .3s ease-out;
  }
  .soloproj #title {
    left: 5vw;
  }
  .topplease {
    margin-bottom: 18px;
  }
  .flip-card .turn {
    display: block;
    position: absolute;
    bottom: -60px;
    right: 20px;
    font-size: 55px;
    cursor: pointer;
    z-index: 100;
    transition: all .3s ease-out;
  }
  .turnclose{
    transform: rotate(45deg) !important;
    transition: all .3s ease-out;
  }
  #ideel {
    height: 100vh;
  }
  #ideel img {
    margin-top: 30px;
  }
  #team {
    padding: 120px 0;
  }
  .card2 {
    margin-top: 120px !important;
  }
  .pageprojets #socialmedianav{
    display: none;
  }
  #animationprojectteaser{
    display: none;
  }
  #ProjectsTeaser .grid-x {
    padding: 0 !important;
  }
  .fliptouch {
    transform: rotateY(180deg) !important;
  }
  .flip-card:hover .flip-card-inner {
    transform: none;
  }
  .pageprojets header #title img {
    left: 5vw;
  }
  #apropbreak {
    height: 30vh;
  }
  .pageprojets .gallerieIphoneipad {
    display: block;
  }
  .pageprojets #gallerieDesktop {
    display: none;
  }
}
/* IPAD PRO PORTRAIT */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {
  #cursor{
    display:none;
  }
  #LignesNoires1 svg{
    position: relative;
    width:271vw;
    margin-top:0;
    margin-left:-25vh;
  }
  #LignesNoires2 svg{
    position: relative;
    width:300vw;
    margin-top:-5vh;
    margin-left:-25vh;
  }
  #LignesNoires3 svg{
    position: relative;
    width:300vw;
    margin-top:-15vh;
    margin-left:-25vh;
  }
  #LignesNoires4 svg{
    position: relative;
    width:300vw;
    margin-top:-5vh;
    margin-left:-25vh;
  }
  #LignesNoires5 svg{
    position: relative;
    width:300vw;
    margin-top:-10vh;
    margin-left:-20vh;
  }
  #LignesNoires6 svg{
    position: relative;
    width:360vw;
    margin-top:0;
    margin-left:-18vh;
  }
  #prestations{
    height:50vh;
  }
header{
  height:90vh;
}
.LignesNoires{
  height:90vh;
 }
}
/* IPAD PRO LANSCAPE */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {
  header{
    height:95vh;
  }
  .LignesNoires{
    height:95vh;
   }
   #prestations{
    height:50vh;
  }
}

  



/* ==========================================================================
   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
 */

.sr-only {
  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 .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.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
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. 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;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */


/* ==========================================================================
   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;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}