/*! HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */

/*
 * 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
 *
 * These selection rule sets have to be separate.
 * 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: -10;
    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;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

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

body{
    font-family: 'Tajawal', sans-serif;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', serif;
    margin:-10px;
    }

 /*@media (min-width:320px)and (max-width: 780px){
   [contenu des instructions comme
    #logo{float:none;}
    #menu{float:none;}]

    #thecreature{
      max-width:200%;
      max-height: auto;
    }
}*/


/*@media (min-width:781px)and (max-width: 979px){
    [contenu des instructions comme
    #logo{float:none;}
    #menu{float:none;}
    #blocmachin{display:none;} quand on ne veut pas qu'un bloc apparaisse sur petit ecran]
*/

/*.container{
    background: #e0007b;
}*/

.barrehaut{
  position: relative;
  }


/* LA NAV QUI S'OUVRE */

.nav {
  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -ms-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
  background: #360735;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  height: 100vh;
  left: 100%;
  padding: 6rem 2rem 2rem 2rem;
  position: fixed; 
  top: 0;
  width: 50%;
  z-index: 1;
  }
 
 /* Le fond qui prend 50% */

.nav.expanded { left: 49.5%;
                max-height: 770px; }

 
 
 /* La liste des liens */

.nav ul {
    /*border:2px solid red;*/
  width:50%;
  position: absolute;
  top: 30%;
  line-height: 1.8em;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding-top: 50%;
  }

 .mportfolio a{
    color: #a40074;
    font-size: 1.2em;
     font-weight: 400;
    padding-left: 14%;
    /*line-height: 0.2em;*/
    }

 .medition a{
    font-size: 1.7em;
     /*font-weight: 400;*/
     line-height: 1.2em;
    color: #f9ebf5;
    letter-spacing: 0.1em;
    padding-left: 36%;
        /*line-height: 0.5em;*/

    }

 .midentite a{
    font-size: 1.4em;
     /*font-weight: 400;*/
    color: #f9ebf5;
    padding-left: 5%;
    letter-spacing: 0.1em;
    }

 .mwebdesign a{
    font-size: 1.6em;
     /*font-weight: 400;*/
    color: #f9ebf5;
    padding-left: 20%;
    }

  .mpackaging a{
    font-size: 1.4em;
     /*font-weight: 400;*/
    color: #f9ebf5;
        padding-left: 9%;
    letter-spacing: 0.1em;
    }

  .met a{
    font-family: 'cinzel decorative', serif;
    font-size: 5em;
     /*font-weight: 400;*/
    color: #f9ebf5;
        padding-left: 60%;
        line-height: 1.2em;
    }

  .mimages a{
    font-size: 1em;
    /*font-weight: 400;*/
    color: #f9ebf5;
    padding-left: 13%;
        letter-spacing: 0.1em;
    }

  .mprofil a{
    color: #a40074;
    font-size: 1.4em;
     font-weight: 400;
    padding-left: 20%;
   line-height: 3em;
    /*line-height: 0.2em;*/
    }

  .mcontact a{
    color: #a40074;
    font-size: 1.4em;
     font-weight: 400;
    padding-left: 40%;
    /*line-height: 0.2em;*/
    }

/*when the menu is opened and closed*/
.nav-toggle {
    display: block;
    position:absolute;
    float:right;
    top:20px;
    width: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    height: 2rem;
    /* c'est la !!!!*/
    left: 2rem;
    top: 2rem;
    width: 2.6rem;
    z-index: 2;
    }

.nav-toggle{
  float: right;
  margin-left: 91%;
  margin-top: -0.6%;
  }

.nav-toggle:hover { opacity: 0.8; }
 
.nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {
  position: absolute;
  float: right;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: black;
  content: '';
  height: 0.3rem;
  width: 100%;
  }
 
.nav-toggle .nav-toggle-bar { margin-top: 30px; }
 
.nav-toggle .nav-toggle-bar::after { margin-top: 0.8rem; }
 
.nav-toggle .nav-toggle-bar::before { margin-top: -0.8rem; }
 
.nav-toggle.expanded .nav-toggle-bar { background: transparent; }
 
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
  background: white;
  margin-top: 0;
  }
 
.nav-toggle.expanded .nav-toggle-bar::after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  }
 
.nav-toggle.expanded .nav-toggle-bar::before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  }


.bordure{
    border: 2px solid #370C41;
    max-width: 1200px;
    min-width: 320px;
    margin:10px auto;
    }

header{
    background-color: white;
    vertical-align: baseline;
    /*border: 2px dotted;*/
    overflow: hidden;
    }

#navheader{
  float: left;
  }

ul {
    color:#000000;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    padding: 0;
    display: inline-block;
    float: left;
    }

#MonLogoHeader{
    background-color: white;
    padding:1.2em;
    display: inline-block;
    float : left;
    }

.monnom{
    /*background-color: white;*/
    font-family: 'Cinzel';
    font-size: 20px;
    display: inline-block;
    float: left;
    margin-top: 2em;
    margin-left:1em;
    padding-right:2.4em;
    padding-left:2.4em;
    text-align: center;
    }

.monnum{
    background-color: white;
    font-family: 'Cinzel';
    font-size: 20px;
    display: inline-block;
    float: left;
    margin-top: 2em;
    padding-left:2.4em;
    padding-right:2.4em;
    }

.contactme{
    /*background-color: white;*/
    font-family: 'Cinzel';
    font-size: 20px;
    text-decoration: none;
    color:black;
    display: block;
    float: left;
    margin-top: 2em;
    padding-left:2.4em;
    padding-right:2.4em;
    }

/*.mailto{
    text-decoration: none;
    color:black;
    font-size: 1.3em;
    font-weight: 400;
    }*/


.MonLogoHeader{
    text-decoration: none;
    }


/* PARTIE INTRO*/

#intro {
    max-width: 1200px;
    min-width: 320px;
    margin:10px auto;
    overflow: hidden;
    }

.div1{
      float: left;
      width: 50%;
      height:auto;
      overflow: hidden;       
      }

#thecreature{
    width: 100%;
    max-height: 2904px;
    }

p{
    color: white;
    }

.sousmenu{
    list-style-type: none;
    }

#navheader li a{
  color:black;
}

#navheader li a:hover{
            color:#a40074;
            }

li a{
    color:white;
    text-decoration: none;
    text-shadow: none;
    font-family: 'Cinzel', serif;
    font-weight: 400;
    }

.identite{
  font-size: 3.2em;
  letter-spacing: 0.1em;
  margin-left: 28%;
  }

.graphiste{
  color:white;
  font-size: 1.5em;
  letter-spacing: 0.4em;
  margin-top: 2em;
  margin-left: 31%;
  }

.blanc{
  color: #a40074;
  font-size: 1.6em;
  }

#flechetiret{
  margin-top: -2%;
  margin-bottom: -2%;
  width: 18%;
  margin-left: 42%;
  }

li a:hover{
            color:#7e3391;
            }

.edition{
    font-size: 3.2em;
    letter-spacing: 0.4em;
    margin-left: 35%;
    }

.soustitre{
    font-size: 3.8em;
    letter-spacing: 0.1em;
    }

.packaging{
    font-size: 2.8em;
    margin-left: 28%;
    letter-spacing: 0.2em;

    }

.webdesign{
    font-size: 2.6em;
    margin-left: 20%;
    }

.ampersand{
    font-size: 6em;
    color: #a40074;
    margin-left: 45%;
    margin-top: 5%;
    }

.quelquesimages{
    font-size: 2em;
    letter-spacing: 0.2em;
    margin-left: 24%;
    }

.main{
      overflow: hidden;
      clear: both;
      }

.blocintro{
  float:left;
  height: 737px;
  background-color:#2a152f;
  width: 50%;
  max-height: 2904px;
  }

.intro{
  max-height: 2904px;
  overflow: hidden;
  /*clear: both;*/
  }

.fleche{
    /*width: 5%;*/
    display: block;
    margin-top: 1%;
    margin-bottom: 2%;
    margin-right: auto;
    margin-left: auto;
    }

.portfolio{
  overflow: hidden;
  text-align: center;
  font-size: 25px;
  float: left;
  position: relative;
  }

.titleportfolio{
  padding-top: 0%;
  }

main{
  overflow: hidden;
  }

/*IDENTITE*/

.blocidentite{
  overflow: hidden;
  margin-top: 2%;
  }

.soustitreid, .soustitrewd{
    background-color: black;
    width: 50%;
    height: 45px;
    line-height: 45px;
    margin-left: 50%;
    margin-top: 0px;
    }

.soustitreed, .soustitrepack{
    background-color: black;
    width: 50%;
    height: 45px;
    line-height: 45px;
    margin-top: 0px;
    }

.soustitre{
  font-family: 'tajawal', sans-serif;
  font-weight: 100;
  letter-spacing: 0.1em;
  margin-top: 0%;
  color: black;
  font-size: 0.8em;
  }

.delidentite{
  width: 50%;
  float:left;
  }

.fstylid{
  margin-top: 11%;
  }

#cercle, #cercle2, #cercle3, #cercle4 {
      width: 11px;
      height: 11px;
      background: black;
      border-radius: 50%;
      margin-left:auto;
      margin-right: auto;
      }
  
h1{
  font-family: 'cinzel',serif;
  display: block;
  font-size: 1.5em;
  font-weight: lighter;
  font-family: 'cinzel', regular;
  letter-spacing: 0.2em;
  margin-top:8%;
  margin-bottom: 8%;
  }

#texte, #texte2, #texte3, #texte4{
  font-family: 'tajawal', sans-serif;
  font-weight: lighter;
  font-size: 0.8em;
  color: black;
  margin-left: 10%;
  margin-right: 10%;
  line-height: 2.5em;
  margin-top: 8%;
  }

h2{
  font-family: 'cinzel',serif;
  display: block;
  font-size: 1.1em;
  font-weight: 300;
  letter-spacing: 0.38em;
  color:white;
  }

.identiteref{
  width:50%;
  float: left;
  }

.carreidentite{
  width: 100%;
  float:left;
  }

.carreidentite img{
  cursor: pointer;
  }

.carre1{
   float: left;
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    }

.carre2{
    width: 46%;
    float: left;
    margin-left: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    }

.carre3{
  float: left;
  width: 45%;
  margin-left: 4%;
  margin-right: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
  }

.carre4{
  float: left;
  width: 45%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
  }

.minicarouselidentite{
  display:none;
}

/* LE CARROUSEL IDENTITE*/

    .carouselidentite, .carouselidentite2, .carouselidentite3, .carouselidentite4{
            max-width: 1200px;
            height:auto;
            float: left;
            margin-left: -100%;
            margin-top: 2%;
            display: none;
            position: relative;
            }

    .owl-carousel{
        position: relative;
        width: 100%;
        }

        .owl-carousel img{
          width: 1200px;
          margin-top: 0px;
          }

        .owl-pagination {
            margin-top: -11px;
            text-align: center;
            }


    .owl-theme .owl-controls .owl-page span {background:#672680;}


        figure {
          margin:0; /*NOdisplay: none;*/
          }

        figure img{
          border-bottom: 8px solid black;
          }

        figcaption{
          font-family: 'tajawal', sans-serif;
          font-weight: 200;
          padding-top: 1%;
          }

        .owl-carousel span{
          font-size: 0.7em;
          }

        .fermer{
          float:right;
          position: absolute;
          right:4px;
          top:3px;
          z-index: 10;
          opacity: 0.3;
          }

          .fermer:hover{opacity:1;}

        .fermer2{
          float:right;
          position: absolute;
          right:4px;
          top:3px;
          z-index: 11;
          opacity: 0.3;
          }

            .fermer2:hover{opacity:1;}

        .fermer3{
          float:right;
          position: absolute;
          right:4px;
          top:3px;
          z-index: 11;
          opacity: 0.3;
          }

            .fermer3:hover{opacity:1;}

        .fermer4{
          float:right;
          position: absolute;
          right:4px;
          top:3px;
          z-index: 11;
          opacity: 0.3;
          }

            .fermer4:hover{opacity:1;}


.afficher {display:block;}


/*EDiTION*/

.blocedition{
  overflow: hidden;
  margin-top: 2%;
  }

.deledition{
  width: 100%;
  margin-left: 100%;
  }

.editionref{
  width:50%;
  float: left;
  }

.carreedition{
  width: 100%;
  float:left;
  }

.carreedition img{
  cursor: pointer;
  }


.carred1, .carred2, .carred3, .carred4{
  float: left;
  width: 50%;
  }


/* LE CARROUSEL EDITION*/

.carouseledition, .carouseledition2, .carouseledition3, .carouseledition4{
  max-width: 1200px;
  height:auto;
  float: left;
  margin-top: 2%;
  display: none;
  position: relative;
  }


    .fermer5{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 10;
      opacity: 0.3;
      }

        .fermer5:hover{opacity:1;}

    .fermer6{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 11;
      opacity: 0.3;
      }

        .fermer6:hover{opacity:1;}

    .fermer7{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 11;
      opacity: 0.3;
      }

        .fermer7:hover{opacity:1;}

    .fermer8{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 11;
      opacity: 0.3;
      }

        .fermer8:hover{opacity:1;}


/*WEBDESIGN*/

.blocwebdesign{
  overflow: hidden;
  margin-top: 2%;
  }

.duwebdesign{
  width: 50%;
  float:left;
  }

.fstylwd{
  margin-top: 11%;
  }

.soustitrewd{
    background-color: black;
    width: 50%;
    margin-left: 50%;
    margin-top: 0px;
    }

.webdesignref{
  width:50%;
  float: left;
  }

.carreweb{
  width: 100%;
  float:left;
  }

.carreweb img{
  cursor: pointer;
  }

.carrewd1, .carrewd2, .carrewd3, .carrewd4{
  float: left;
  width: 50%;
  }


/* LE CARROUSEL WEBDESIGN*/

    .carouselwebdesign, .carouselwebdesign2, .carouselwebdesign3, .carouselwebdesign4{
            max-width: 1200px;
            height:auto;
            float: left;
            margin-left: -100%;
            margin-top: 2%;
            display: none;
            position: relative;
            }

    .fermer9{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 12;
      opacity: 0.3;
      }

        .fermer9:hover{opacity:1;}

    .fermer10{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 14;
      opacity: 0.3;
      }

        .fermer10:hover{opacity:1;}

    .fermer11{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 14;
      opacity: 0.3;
      }

        .fermer11:hover{opacity:1;}

    .fermer12{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 12;
      opacity: 0.3;
      }

        .fermer12:hover{opacity:1;}


/*PACKAGING*/

.blocpackaging{
  overflow: hidden;
  margin-top: 2%;
  }

.dupackaging{
  width: 100%;
  margin-left: 100%;
  }

.packagingref{
  width:50%;
  float: left;
  }

.carrepack{
  width: 100%;
  float:left;
  }

.carrepack img{
  cursor: pointer;
  }

.carrep1, .carrep2, .carrep3, .carrep4{
  float: left;
  width: 50%;
  }

/* LE CARROUSEL PACKAGING*/

.carouselpackaging, .carouselpackaging2, .carouselpackaging3, .carouselpackaging4{
  max-width: 1200px;
  height:auto;
  float: left;
  margin-top: 2%;
  display: none;
  position: relative;
  }

  .fermer13{
    float:right;
    position: absolute;
    right:4px;
    top:3px;
    z-index: 10;
    opacity: 0.3;
    }

      .fermer13:hover{opacity:1;}

  .fermer14{
    float:right;
    position: absolute;
    right:4px;
    top:3px;
    z-index: 11;
    opacity: 0.3;
    }

      .fermer14:hover{opacity:1;}

  .fermer15{
    float:right;
    position: absolute;
    right:4px;
    top:3px;
    z-index: 11;
    opacity: 0.3;
    }

      .fermer15:hover{opacity:1;}

  .fermer16{
    float:right;
    position: absolute;
    right:4px;
    top:3px;
    z-index: 11;
    opacity: 0.3;
    }

    .fermer16:hover{opacity:1;}

/* LES IMAGES */

#blocimages{
  padding-top: 4%;
}

.desimages{
  background-color: #2a152f;
  float:left;
  height: auto;
  width: 100%;
}
.titreimages{
  background-color: black;
  width:50%;
  height: 45px;
  margin-top: 2%;
  margin-right: auto;
  margin-left: auto;
}

.desimages h1{
  display: block;
  color: white;
  vertical-align: center;
  line-height: 45px;
}

.desimages p{
  display: block;
  font-family: tajawal;
  font-weight: lighter;
  font-size: 0.75em;
  color: white;
  letter-spacing: 0.05em;
  margin-left: 70%;
  text-align: left;
  margin-bottom: 0;
}

.mail1 img{
  width:35%;
  height: auto;
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
}

.mail2 img{
  width:75%;
  padding-top: 10%;  
}

h3{
  font-family: 'cinzel',serif;
  display: block;
  font-size: 0.7em;
  font-weight: lighter;
  letter-spacing: 0.2em;
  color:white;
}

.insta{
  background-color: black;
  line-height: 45px;
  width:50%;
  margin-top: 2%;
  margin-right: auto;
  margin-left: auto;
}

.insta h3{
float: left;  
  margin-top: 0.5%;
  margin-right: auto;
  margin-left: 10%;
}

.logoinsta img{
  width:6%;
  cursor: pointer;

}

.flechehaut{
  margin-top: 2%;
}

.blocprofil{
  margin-top: 2%;
  border:10px solid black;
  overflow: hidden;
}

.introprofil{
  color: #8e3089;
  font-family: tajawal;
  font-weight: lighter;
  font-size: 0.75em;
  letter-spacing: 0.05em;
}

.introprofil span {
  color: #561441;
  font-family: tajawal;
  font-weight: lighter;
  font-size: 1.6em;
  letter-spacing: 0.05em;
}

.bloct1, .bloct2, .bloct3, .bloct4{
  float: left;
  width: 50%;
}

.bloct2{
  margin-top: 5%;
  padding-bottom: 2%;
}

.bloct3{
  margin-top: -1%;
  padding-bottom: 1%;
}

.bloct4{
  margin-top: 2%;
  padding-bottom: 3%;
}

.bloct5{
  margin-top: 5%;
  width: 100%;
  float: left;
}

.bloct6{
  width: 100%;
  float: left;
}

.texte1 p{
  font-family: tajawal;
  font-weight: lighter;
    color: #9c2796;
  font-size: 0.95em;
  letter-spacing: 0.05em;
  line-height: 0.3em;
}

.texte2 p{
  font-family: tajawal;
  font-weight: lighter;
  font-size: 0.95em;
  letter-spacing: 0.05em;
    color: #561441;
      line-height: 0.9em;
      margin-top: -1%;
      margin-left: -2%;
}

.texte3{
  margin-top: -1%;
}

.texte3 p{
  font-family: tajawal;
  font-weight: lighter;
      color: #9c2796;
  font-size: 0.95em;
  letter-spacing: 0.05em;
    color: #561441;
          line-height: 0.6em;
}

.texte4 p{
  font-family: tajawal;
  font-weight: lighter;
  font-size: 0.95em;
  letter-spacing: 0.05em;
    color: #561441;
      line-height: 0.9em;
      margin-top: -1%;
}

.texte4{
  margin-top: 4%;
}

.texte5 p{
  font-family: tajawal;
  font-weight: lighter;
  font-size: 0.95em;
  letter-spacing: 0.05em;
        line-height: 2.2em;
    color: #77083a;
      margin-top: -3%;
}

.bold{
  font-family: tajawal;
  font-weight: bolder;
  font-size: 1.1em;
      color: #77083a;
}

.grand{
  font-family: tajawal;
  font-size: 1.6em;
      color: #77083a;
}
.moyenb{
  font-family: tajawal;
  font-size: 1.1em;
      color: #77083a;
      margin-left: 1%;
}
.petitbold{
  font-family: tajawal;
  font-weight: bolder;
  font-size: 1.2em;
      color: #77083a;
}
.droite{
  margin-left: 22%;
}

.gauche{
  margin-left: -12%;
}
.rouge{
  color: #bd1542;
}

.arrow-right1, .arrow-right, .arrow-right3, .arrow-right4, .arrow-right5 {
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #bd1542;
  float: left;
}
.arrow-right1 {
  margin-left: 4.2em;
  margin-top: 0.2em;
  margin-right: -18%;
}

.arrow-right {
  margin-left: 2.5em;
  margin-top: -0.7em;
  margin-right: -8%;
}

.arrow-right3 {
  margin-left: 4.6em;
  margin-top: 0.2em;
  margin-right: -20%;
}

.arrow-right4 {
  margin-left: 5.8em;
  margin-top: 0.2em;
  margin-right: -15%;
}

.bloct6 .violet{
  color: #8e3089;
}

.arrow-right5 {
  margin-left: 16%;
  margin-top: -1.5em;
  margin-right: -14%;
}

.bloct6 p{
  font-family: tajawal;
  font-weight: lighter;
  font-size: 1.6em;
    color: #77083a;
    /*float: left;*/
}

.dload{
margin-left: 41%;
}

.dload .cv a{
  background-color: black;
  font-family: tajawal;
  font-weight: lighter;
  color: #8e3089;
  text-decoration: none; 
  font-size: 1.2em;
  padding-top: 2%;
  padding-left: 2%;
  padding-right: 2%;
  float: left;
    margin-bottom: 5%;
}

.question{
  font-family: tajawal;
     color: #77083a;
}

.monmail a{
  font-family: tajawal;
     font-size: 1.3em;
     color: #8e3089;
     text-decoration: none;
}

.mynumber{
  font-family: tajawal;
     font-weight: lighter;
     font-size: 1.7em;
     color: #d21172;
}

.logobas{
  margin-top: 4%;
  margin-bottom: 4%;
}


footer{
    background-color: #000000;
    height: 70px;
    color: #79728a;
    margin-top: 2%;
    padding-bottom: 2%;
    padding-top: 1%;
    text-align: center;
    font-family: tajawal;
    font-size: 0.55em;
    }





/*ECRAN MOBILE*/ /*ECRAN MOBILE*/ /*ECRAN MOBILE*/ /*ECRAN MOBILE*/ /*ECRAN MOBILE*/
/*ECRAN MOBILE*/ /*ECRAN MOBILE*/ /*ECRAN MOBILE*/ /*ECRAN MOBILE*/ /*ECRAN MOBILE*/

    @media all and (max-width: 480px){
    .container{
        float: none;
        max-width: 100%;
        height: auto;
    }

    .barrehaut img{
      width:18%;
    }

/*when the menu is opened and closed*/
.nav-toggle {
    display: block;
    position:absolute;
    float:right;
    top:20px;
    width: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    height: 2rem;
    /* c'est la !!!!*/
    left: 1rem;
    top: 1rem;
    width: 2.6rem;
    z-index: 3;
    }

.nav-toggle{
  float: right;
  margin-left: 80%;
  margin-top: -0.6%;
  }
    

    /* LA NAV QUI S'OUVRE */

  .nav {
  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -ms-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
  background: #360735;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  height: 100vh;
  left: 100%;
  padding: 6rem 2rem 2rem 2rem;
  position: fixed; 
  top: 0;
  width: 100%;
  z-index: 2;
  }
 
 /* Le fond qui prend 100% */

.nav.expanded { left: 0%;
                max-height: 500px;
}

  /* La liste des liens */

.nav ul {
  width:100%;
  position: absolute;
  top: 30%;
    line-height: 1em;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding-top: 50%;
  }

 .mportfolio a{
    color: #a40074;
    font-size: 1em;
     font-weight: 400;
    padding-left: 1%;
         line-height: 1em;
    }

 .medition a{
    font-size: 1.3em;
     line-height: 1.2em;
    color: #f9ebf5;
    letter-spacing: 0.1em;
    padding-left: 25%;
    }

 .midentite a{
    font-size: 1.2em;
         line-height: 1.2em;
    color: #f9ebf5;
    padding-left: 5%;
    letter-spacing: 0.1em;
    }

 .mwebdesign a{
    font-size: 1.1em;
         line-height: 1.2em;
    color: #f9ebf5;
    padding-left: 16%;
    }

  .mpackaging a{
    font-size: 1em;
    color: #f9ebf5;
         line-height: 1.2em;
        padding-left: 8%;
    letter-spacing: 0.1em;
    }

  .met a{
    font-family: 'cinzel decorative', serif;
    font-size: 4em;
    color: #f9ebf5;
        padding-left: 20%;
        line-height: 1.2em;
    }

  .mimages a{
    font-size: 0.8em;
    color: #f9ebf5;
    padding-left: 1%;
        letter-spacing: 0.1em;
    }

  .mprofil a{
    color: #a40074;
    font-size: 1em;
     font-weight: 400;
    padding-left: 20%;
   line-height: 3em;
    }

  .mcontact a{
    color: #a40074;
    font-size: 1em;
     font-weight: 400;
    padding-left: 29%;
  }

#navheader  {
    float:none;
width:60%;
margin-left: -7%;
  }
.nav-toggle .nav-toggle-bar{
  margin-top: 52%;
}

#MonLogoHeader{
    background-color: white;
    /*padding:1.2em;*/
    display: inline-block;
    float : left;
    }

.monnom{
    /*background-color: white;*/
    font-family: 'Cinzel';
    font-size: 19px;
    line-height: 1.2em;
    display: inline-block;
    float: none;
    margin-top: 8%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    padding-right: 6%;
    padding-left: 6%;
    */padding: 1px;*/
    }

    .monnum{
    display: none;
    }

.contactme{
    font-family: 'Cinzel';
    font-size: 20px;
    text-decoration: none;
    color:#ae1a63;
    /*margin-left: 20%;*/
    margin-top: 1%;
    }




/* PARTIE INTRO*/



.div1{
      float: none;
      width: 100%;
      height:auto;
      overflow: hidden;       
      }

#thecreature{
    width: 100%;
    }

p{
    color: white;
    }

.sousmenu{
    list-style-type: none;
    }

#navheader li a{
  color:#941353;
}

#navheader li a:hover{
            color:#a40074;
            }

li a{
    color:white;
    text-decoration: none;
    text-shadow: none;
    font-family: 'Cinzel', serif;
    font-weight: 400;
    }

.identite{
  font-size: 2.6em;
  margin-left: 31%;
  }

.graphiste{
  margin-top: 2em;
  /*margin-left: 25%;
  margin-right: 2%;*/
  margin-left: 5%;
  text-align: center;
  }

.blanc{
  color: #a40074;
  font-size: 1.6em;
  }

#flechetiret{
  margin-top: -2%;
  margin-bottom: -2%;
  width: 18%;
  margin-left: 42%;
  }

li a:hover{
            color:#7e3391;
            }

.edition{
    margin-left: 10%;
    font-size: 3em;
    }

.soustitre{
    font-size: 1em;
    letter-spacing: 0.1em;
    float: none;
    }

.packaging{
    font-size: 2.6em;
    margin-left: 10%;
    }

.webdesign{
  font-size: 2.6em;
  letter-spacing: 0.1em;
    margin-left: 20%;
    }

.ampersand{
    margin-top: 2%;
    }

.quelquesimages{
    font-size: 1.6em;
    margin-left: 10%;
    }

.main{
      overflow: hidden;
      clear: both;
      }

.blocintro{
  float:none;
  height: 615px;
  background-color:#2a152f;
  width: 100%;
  }

.intro{
  max-height: 2904px;
  overflow: hidden;
  }


.portfolio{
  float: none;
  }

.titleportfolio img{
  width: 70%;
  }  

.main{
  overflow: hidden;
  }

/*IDENTITE MOBILE*/ /*IDENTITE MOBILE*/ /*IDENTITE MOBILE*/

.fleche{
margin-top: 1%;
margin-bottom: 2%;}

.soustitreid, .soustitrewd, .soustitreed, .soustitrepack{
    background-color: black;
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    height: 45px;
    line-height: 45px;
    margin-top: 0px;
    }

.soustitre{
  font-family: 'tajawal', sans-serif;
  font-weight: 100;
  margin-top: 0%;
  color: black;
  font-size: 0.8em;
  }

.delidentite{
  width: 100%;
  float: none;
  }

.fstylid{
  float: none;
  margin-top: 5%;
  width: 10%;
  }

#cercle, #cercle3, #cercle4 {
      width: 11px;
      height: 11px;
      background: black;
      border-radius: 50%;
      margin-left:auto;
      margin-right: auto;
      }
  
h1{
  font-family: 'cinzel',serif;
  font-size: 1.1em;
  font-weight: lighter;
  font-family: 'cinzel', regular;
  letter-spacing: 0.2em;
  margin-top:8%;
  margin-bottom: 8%;
  }

#texte, #texte3{
  font-family: 'tajawal', sans-serif;
  font-weight: lighter;
  font-size: 0.8em;
  color: black;
  margin-left: 5%;
  margin-right: 5%;
  line-height: 2.3em;
  margin-top: 8%;
  padding-bottom: 4%;
  }

h2{
  font-family: 'cinzel',serif;
  display: block;
  font-size: 0.85em;
  font-weight: 300;
  letter-spacing: 0.2em;
  color:white;
  }

.identiteref, .editionref{
  width:100%;
  float: none;
  }

.carreidentite, .carreedition{
  width: 100%;
  float:left;
  }

.carreidentite img{
  cursor: pointer;
  }

.carre1{
   float: left;
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    }

.carre2{
    width: 46%;
    float: left;
    margin-left: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    }

.carre3{
  float: left;
  width: 45%;
  margin-left: 4%;
  margin-right: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
  }

.carre4{
  float: left;
  width: 45%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
}

/* MOBILE LE MINI CARROUSEL IDENTITE MOBILE */

    .carouselidentite, .carouselidentite2, .carouselidentite3, .carouselidentite4{
            max-width: 100%;
            height:325px;
            background-color: white;
            float: left;
            margin-top: 4%;
            padding-top: 3.5%;
            display: none;
            position: relative;
            }

   .owl-carousel{
        position: relative;
        width: 100%;
        }

    .owl-carousel img{
          width: 100%;
          margin-right: auto;
          margin-left: auto;
          margin-top: 5px;
          }

        .owl-pagination {
            display: none;
            }

    .owl-theme .owl-controls .owl-page span {background:#672680;}


        figure {
          margin:0; 
          }

        figure img{
          border-bottom: 8px solid black;
          }

        figcaption{
          font-family: 'tajawal', sans-serif;
          font-weight: 200;
          font-size: 0.8em;
          padding-top: 2%;
          }

        .owl-carousel span{
          font-size: 0.7em;
          }

        .fermer{
          float:right;
          position: absolute;
          right:4px;
          top:3px;
          z-index: 10;
          opacity: 0.3;
          }

          .fermer:hover{opacity:1;}

        .fermer2{
          float:right;
          position: absolute;
          right:4px;
          top:3px;
          z-index: 11;
          opacity: 0.3;
          }

            .fermer2:hover{opacity:1;}

        .fermer3{
          float:right;
          position: absolute;
          right:4px;
          top:3px;
          z-index: 11;
          opacity: 0.3;
          }

            .fermer3:hover{opacity:1;}

        .fermer4{
          float:right;
          position: absolute;
          right:4px;
          top:3px;
          z-index: 11;
          opacity: 0.3;
          }

            .fermer4:hover{opacity:1;}


.afficher {display:block;}

/* MOBILE EDiTION MOBILE*/

#containeredition{
  display: flex;
  flex-direction :row;
    justify-content: space-between;
}
#containeredition > div {
  flex: 1;
  }

  @media(max-width: 480px) {
  #containeredition {
    flex-direction: column-reverse;
  }
.deledition{
  width: 100%;
  margin-left: 0%;
  float: none;
  margin-top: 2%;
  padding-bottom: 2%;
  }

.deledition #cercle2{
  background-color: black;
}

.deledition #texte2{
  font-family: 'tajawal', sans-serif;
  font-weight: lighter;
  font-size: 0.8em;
  margin-left: 5%;
  margin-right: 5%;
  line-height: 2.3em;
  margin-top: 8%;
}
  .deledition .fstyled{
    margin-top: 5%;
    width: 10%;
  }

.editionref{
  width:100%;
  float: none;
  }*/

.carreedition{
  width: 100%;
  float:left;
  }

.carreedition img{
  cursor: pointer;
  }

.carred1, .carred2, .carred3, .carred4{
  float: left;
  width: 50%;
  }

/* MOBIL LE CARROUSEL EDITION MOBIL*/


.carouseledition, .carouseledition2, .carouseledition3, .carouseledition4{
  max-width: 100%;
  height:325px;
  background-color: white;
  float: left;
  margin-top: 2%;
              padding-top: 3.5%;
  display: none;
  position: relative;
  }


    .fermer5{
      float:right;
      position: absolute;
      top:3px;
      z-index: 10;
      opacity: 0.3;
      }

        .fermer5:hover{opacity:1;}

    .fermer6{
      float:right;
      position: absolute;
      top:3px;
      z-index: 11;
      opacity: 0.3;
      }

        .fermer6:hover{opacity:1;}

    .fermer7{
      float:right;
      position: absolute;
      top:3px;
      z-index: 11;
      opacity: 0.3;
      }

        .fermer7:hover{opacity:1;}

    .fermer8{
      float:right;
      position: absolute;
      top:3px;
      z-index: 11;
      opacity: 0.3;
      }

        .fermer8:hover{opacity:1;}

/* MOBILE WEBDESIGN MOBILE */


.duwebdesign{
  width: 100%;
  float:none;
  }

.fstylwd{
  margin-top: 11%;
  }

.webdesignref{
  width:100%;
  float: none;
  }

.carreweb{
  width: 100%;
  float:left;
  }

.carreweb img{
  cursor: pointer;
  }

.carrewd1, .carrewd2, .carrewd3, .carrewd4{
  float: left;
  width: 50%;
  }


/* MOBILE LE CARROUSEL WEBDESIGN MOBILE */

    .carouselwebdesign, .carouselwebdesign2, .carouselwebdesign3, .carouselwebdesign4{
            max-width: 100%;
            height:325px;
            background-color: white;
            float: left;
            margin-left: -100%;
            padding-top: 3.5%;
            margin-top: 0%;
            display: none;
            position: relative;
            }

    .fermer9{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 12;
      opacity: 0.3;
      }

        .fermer9:hover{opacity:1;}

    .fermer10{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 14;
      opacity: 0.3;
      }

        .fermer10:hover{opacity:1;}

    .fermer11{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 14;
      opacity: 0.3;
      }

        .fermer11:hover{opacity:1;}

    .fermer12{
      float:right;
      position: absolute;
      right:4px;
      top:3px;
      z-index: 12;
      opacity: 0.3;
      }

        .fermer12:hover{opacity:1;}


/* MOBILE PACKAGING MOBILE */


#containerpack{
  display: flex;
  flex-direction :row;
    justify-content: space-between;
}
#containerpack > div {
  flex: 1;
  }

  @media(max-width: 480px) {
  #containerpack {
    flex-direction: column-reverse;
  }

.dupackaging{
  width: 100%;
  margin-left: 0%;
  float:none;
  margin-top: 2%;
  padding-bottom: 2%;
  }

  .dupackaging .fstylp{
    margin-top: 5%;
    width: 10%;}

  .dupackaging #cercle4{
    background-color: black;
  }

 .dupackaging #texte4{
  font-family: 'tajawal', sans-serif;
  font-weight: lighter;
  font-size: 0.8em;
  margin-left: 5%;
  margin-right: 5%;
  line-height: 2.3em;
  margin-top: 8%;
}

.packagingref{
  width:100%;
  float: none;
  }

.carrepack{
  width: 100%;
  float:left;
  }

.carrepack img{
  cursor: pointer;
  }

.carrep1, .carrep2, .carrep3, .carrep4{
  float: left;
  width: 50%;
  }

/* MOBILE LE CARROUSEL PACKAGING MOBILE*/

.carouselpackaging, .carouselpackaging2, .carouselpackaging3, .carouselpackaging4{
  max-width: 100%;
  height:325px;
  background-color: white;
  float: left;
  margin-top: 4%;
  padding-top: 3.5%;
  display: none;
  position: relative;
  }

  .fermer13{
    float:right;
    position: absolute;
    right:4px;
    top:3px;
    z-index: 10;
    opacity: 0.3;
    }

      .fermer13:hover{opacity:1;}

  .fermer14{
    float:right;
    position: absolute;
    right:4px;
    top:3px;
    z-index: 11;
    opacity: 0.3;
    }

      .fermer14:hover{opacity:1;}

  .fermer15{
    float:right;
    position: absolute;
    right:4px;
    top:3px;
    z-index: 11;
    opacity: 0.3;
    }

      .fermer15:hover{opacity:1;}

  .fermer16{
    float:right;
    position: absolute;
    right:4px;
    top:3px;
    z-index: 11;
    opacity: 0.3;
    }

    .fermer16:hover{opacity:1;}


/* MOBILE LES IMAGES MOBILE */

#blocimages{
  padding-top: 4%;
}

.desimages{
  background-color: #2a152f;
  height: auto;
  width: 100%;
}

.titreimages{
  background-color: black;
  width:90%;
  height: 45px;
  margin-top: 2%;
  margin-right: auto;
  margin-left: auto;
}
.titreimages h1{
  font-size: 0.8em;
  }

.desimages h1{
  display: block;
  color: white;
  vertical-align: center;
  line-height: 45px;
}

.desimages p{
  display: block;
  font-family: tajawal;
  font-weight: lighter;
  font-size: 0.75em;
  color: white;
  letter-spacing: 0.05em;
  margin-left: 50%;
  text-align: left;
  margin-bottom: 0;
}

.mail1 img{
  width:35%;
  height: auto;
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
}

.mail2 img{
  width:75%;
  padding-top: 10%;  
}

h3{
  font-family: 'cinzel',serif;
  display: block;
  font-size: 0.7em;
  font-weight: lighter;
  letter-spacing: 0.2em;
  color:white;
}

.insta{
  background-color: black;
  line-height: 26px;
  width:100%;
  margin-top: 2%;
  /*margin-right: auto;
  margin-left: 0px;*/
}

.insta h3{
  margin-top: 0.5%;
  /*margin-right: 0%;*/
  margin-left: 0%;
  margin-bottom: -1%;
}

.logoinsta img{
  width:10%;
  margin :2%;
  cursor: pointer;
}

/* MOBILE PROFIL MOBILE */


.blocprofil{
  width: 94%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 2%;
  border:10px solid black;
  overflow: hidden;
}

.titleprofil img{
  width: 70%;
}

.introprofil{
  color: #8e3089;
  font-family: tajawal;
  font-weight: lighter;
  font-size: 0.75em;
  letter-spacing: 0.05em;
}

.introprofil span {
  color: #561441;
  font-family: tajawal;
  font-weight: lighter;
  font-size: 1.3em;
  letter-spacing: 0.05em;
}

.bloct1, .bloct2, .bloct3, .bloct4{
  float: none;
  width: 100%;
}

.bloct2{
  margin-top: 12%;
  padding-bottom: 2%;
}

.bloct3{
  margin-top: -1%;
  padding-bottom: 2%;
}

.bloct4{
  margin-top: 2%;
  padding-bottom: 3%;
}

.bloct5{
  margin-top: 5%;
  width: 100%;
  float: left;
}

.bloct6{
  width: 100%;
  float: none;
  line-height: 1.5em;
}

.texte1 p{
  font-family: tajawal;
  font-weight: lighter;
  color: #9c2796;
  font-size: 0.9em;
  letter-spacing: 0.05em;
}

.texte2 p{
  font-family: tajawal;
  font-weight: lighter;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  color: #561441;
  line-height: 0.6em;
}

.texte3{
  margin-top: -1%;
}

.texte3 p{
  font-family: tajawal;
  font-weight: lighter;
  color: #9c2796;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  color: #561441;
  line-height: 1em;
}

.texte3 .gauche {
  margin-left: 2%;
  /*line-height: 0.2em;*/
}

.texte4 p{
  font-family: tajawal;
  font-weight: lighter;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  color: #561441;
  line-height: 1em;
  margin-top: -1%;
}

.texte4{
  margin-top: 4%;
}

.texte5 p{
  font-family: tajawal;
  font-weight: lighter;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  color: #77083a;
  margin-top: -3%;
  line-height: 1em;
  margin-right: 1%;
  margin-left: 1%;
}

.bold{
  font-family: tajawal;
  font-weight: bolder;
  font-size: 1em;
  color: #77083a;
}

.grand{
  font-family: tajawal;
  font-size: 1.3em;
  line-height: 1em;
  color: #77083a;
}

.moyenb{
  font-family: tajawal;
  font-size: 1.05em;
  letter-spacing: 0.1em;
  color: #77083a;
  margin-left: 1%;
  line-height: 1em;
}

.petitbold{
  font-family: tajawal;
  font-weight: bolder;
  font-size: 1.1em;
  color: #77083a;
}

.droite{
  margin-left: -1%;
}

.gauche{
  margin-left: -12%;
}

.rouge{
  color: #bd1542;
  line-height: 0em;
}

.texte3 .rouge{
  line-height: 0.9em;
}

.arrow-right1, .arrow-right, .arrow-right3, .arrow-right4, .arrow-right5 {
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #bd1542;
  float: left;
}

.arrow-right1 {
  margin-left: 2%;
  margin-right: -13%;
  margin-top: -4%;
}

.arrow-right {
  margin-left: 4%;
  margin-top: 1%;
  margin-right: -2%;
}

.arrow-right3 {
  margin-left: 2%;
  margin-top: -2.5%;
  margin-right: -20%;
}

.arrow-right4 {
  margin-left: 5%;
  margin-top: -1.5%;
  margin-right: 0%;
}

.bloct6 .violet{
  color: #8e3089;
}

.arrow-right5 {
  margin-left: 2%;
  margin-top: -4%;
  margin-right: 2%;
}

.texte2{
  margin-right: 3%;
  margin-left: 3%;
}

.texte2 p{
  line-height: 1.2em;
}

.bloct6 p{
  font-family: tajawal;
  font-weight: lighter;
  font-size: 1.5em;
  color: #77083a;
}

.dload{
  /*width: 50%;*/
  margin-right: auto;
  margin-left: auto;
}

.dload .cv a{
  background-color: black;
  font-family: tajawal;
  font-weight: lighter;
  color: #8e3089;
  text-decoration: none; 
  font-size: 1.2em;
  padding-top: 4%;
  padding-left: 3%;
  padding-right: 3%;
  float: none;
    margin-bottom: 5%;
}

.titlecontact img{
  width: 70%;
  margin-right: auto;
  margin-left: auto;
}

.question{
  font-family: tajawal;
     color: #77083a;
}

.monmail a{
  font-family: tajawal;
     font-size: 1em;
     color: #8e3089;
     text-decoration: none;
}

.mynumber{
  font-family: tajawal;
     font-weight: lighter;
     font-size: 1.3em;
     color: #d21172;
}

.logobas{
  margin-top: 4%;
  margin-bottom: 4%;
}


footer{
    background-color: #000000;
    height: 70px;
    color: #79728a;
    margin-top: 2%;
    padding-bottom: 2%;
    padding-top: 1%;
    text-align: center;
    font-family: tajawal;
    font-size: 0.4em;
    }

}




/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    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: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

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

/*@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        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,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

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

    img {
        max-width: 100% !important;
    }

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

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