/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

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

/* ==========================================================================
   FONTS
   ========================================================================== */

@import url('../fonts/diglu-hairline.css');
@import url('../fonts/diglu-hairline-italic.css');
@import url('../fonts/diglu-thin.css');
@import url('../fonts/diglu-thin-italic.css');
@import url('../fonts/diglu-extralight.css');
@import url('../fonts/diglu-extralight-italic.css');
@import url('../fonts/diglu-light.css');
@import url('../fonts/diglu-light-italic.css');
@import url('../fonts/diglu-regular.css');
@import url('../fonts/diglu-regular-italic.css');
@import url('../fonts/diglu-medium.css');
@import url('../fonts/diglu-medium-italic.css');
@import url('../fonts/diglu-bold.css');
@import url('../fonts/diglu-bold-italic.css');
@import url('../fonts/diglu-extrabold.css');
@import url('../fonts/diglu-extrabold-italic.css');
@import url('../fonts/diglu-black.css');
@import url('../fonts/diglu-black-italic.css');
@import url('../fonts/diglu-heavy.css');
@import url('../fonts/diglu-heavy-italic.css');

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

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

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

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



/*--FONTS--*/

.Hairline{
    font-family: 'diglu-Hairline', sans-serif !important;
}
.HairlineT{
    font-family: 'diglu-Hairline', sans-serif !important;
}
.Hairline-italic{
    font-family: 'diglu-Hairline-italic', sans-serif !important;
}

.switchHairline{
    font-family: 'diglu-Hairline', sans-serif;
}
.switchHairlineitalic{
    font-family: 'diglu-Hairline-italic', sans-serif;
}

.Thin{
    font-family: 'diglu-Thin', sans-serif !important;
}
.ThinT{
    font-family: 'diglu-Thin', sans-serif !important;
}
.Thin-italic{
    font-family: 'diglu-Thin-italic', sans-serif !important;
}

.switchThin{
    font-family: 'diglu-Thin', sans-serif;
}
.switchThinitalic{
    font-family: 'diglu-Thin-italic', sans-serif;
}

.Extralight{
    font-family: 'diglu-Extralight', sans-serif !important;
}
.ExtralightT{
    font-family: 'diglu-Extralight', sans-serif !important;
}
.Extralight-italic{
    font-family: 'diglu-Extralight-italic', sans-serif !important;
}

.switchExtralight{
    font-family: 'diglu-Extralight', sans-serif;
}
.switchExtralightitalic{
    font-family: 'diglu-Extralight-italic', sans-serif;
}

.Light{
    font-family: 'diglu-Light', sans-serif !important;
}
.LightT{
    font-family: 'diglu-Light', sans-serif !important;
}
.Light-italic{
    font-family: 'diglu-Light-italic', sans-serif !important;
}

.switchLight{
    font-family: 'diglu-Light', sans-serif;
}
.switchLightitalic{
    font-family: 'diglu-Light-italic', sans-serif;
}

.Regular{
    font-family: 'diglu-Regular', sans-serif !important;
}
.RegularT{
    font-family: 'diglu-Regular', sans-serif !important;
}
.Regular-italic{
    font-family: 'diglu-Regular-italic', sans-serif !important;
}

.switchRegular{
    font-family: 'diglu-Regular', sans-serif;
}
.switchRegularitalic{
    font-family: 'diglu-Regular-italic', sans-serif;
}

.Medium{
    font-family: 'diglu-Medium', sans-serif !important;
}
.MediumT{
    font-family: 'diglu-Medium', sans-serif !important;
}
.Medium-italic{
    font-family: 'diglu-Medium-italic', sans-serif !important;
}

.switchMedium{
    font-family: 'diglu-Medium', sans-serif;
}
.switchMediumitalic{
    font-family: 'diglu-Medium-italic', sans-serif;
}

.Bold{
    font-family: 'diglu-Bold', sans-serif !important;
}
.BoldT{
    font-family: 'diglu-Bold', sans-serif !important;
}
.Bold-italic{
    font-family: 'diglu-Bold-italic', sans-serif !important;
}

.switchBold{
    font-family: 'diglu-Bold', sans-serif;
}
.switchBolditalic{
    font-family: 'diglu-Bold-italic', sans-serif;
}

.Extrabold{
    font-family: 'diglu-Extrabold', sans-serif !important;
}
.ExtraboldT{
    font-family: 'diglu-Extrabold', sans-serif !important;
}
.Extrabold-italic{
    font-family: 'diglu-Extrabold-italic', sans-serif !important;
}

.switchExtrabold{
    font-family: 'diglu-Extrabold', sans-serif;
}
.switchExtrabolditalic{
    font-family: 'diglu-Extrabold-italic', sans-serif;
}

.Black{
    font-family: 'diglu-Black', sans-serif !important;
}
.BlackT{
    font-family: 'diglu-Black', sans-serif !important;
}
.Black-italic{
    font-family: 'diglu-Black-italic', sans-serif !important;
}

.switchBlack{
    font-family: 'diglu-Black', sans-serif;
}
.switchBlackitalic{
    font-family: 'diglu-Black-italic', sans-serif;
}

.Heavy{
    font-family: 'diglu-Heavy', sans-serif !important;
}
.HeavyT{
    font-family: 'diglu-Heavy', sans-serif !important;
}
.Heavy-italic{
    font-family: 'diglu-Heavy-italic', sans-serif !important;
}

.switchHeavy{
    font-family: 'diglu-Heavy', sans-serif;
}
.switchHeavyitalic{
    font-family: 'diglu-Heavy-italic', sans-serif;
}

/*--GLOBAL CSS--*/


.filtre {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
    background:rgb(0,0,0);
}

*{
    font-family: 'diglu-regular', sans-serif;
    color:#000;
}

body {
    background:rgb(255,255,255); 
}

h1,h2,h3,h4,p,ul{
    margin-top:0;
    margin-left:0;
    margin-right:0;
    padding-top:12px;
    padding-left:12px;
}

ul{
    padding-top:8px;
}

p{
    padding-right:12px;
}

#titel{
    font-size:43px;
    padding-top:12px;
    padding-left:12px;
}

#titou{
    padding-top:11px;
}

a{
    color:#000 !important;
}
a:hover{
    color:#000;
}

.textespetits{
    font-size:22px;
    line-height:25px;
}

.textes{
    font-size:43px;
    line-height:58px;
}

.textesgrands{
    font-size:100px;
    line-height:120px;
}

.textesbigs{
    font-size:300px;
    line-height:340px;
}

.legendes{
    position: absolute;
    left:50%;
    bottom:24px;
}

.unicodes{
    margin-left: -40px;
}

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

.contourtop{
    border-top:4.2px solid #000; 
}

.contourbottom{
    border-bottom:4.2px solid #000; 
}

.contourleft{
    border-left:4.2px solid #000; 
}

.contourright{
    border-right:4.2px solid #000; 
}

.contourtopHairline{
    border-top:1px solid #000 !important; 
}

.contourbottomHairline{
    border-bottom:1px solid #000 !important; 
}

.contourleftHairline{
    border-left:1px solid #000 !important; 
}

.contourrightHairline{
    border-right:1px solid #000 !important; 
}

.contourtopThin{
    border-top:1.5px solid #000 !important; 
}

.contourbottomThin{
    border-bottom:1.5px solid #000 !important; 
}

.contourleftThin{
    border-left:1.5px solid #000 !important; 
}

.contourrightThin{
    border-right:1.5px solid #000 !important; 
}

.contourtopExtralight{
    border-top:2px solid #000 !important; 
}

.contourbottomExtralight{
    border-bottom:2px solid #000 !important; 
}

.contourleftExtralight{
    border-left:2px solid #000 !important; 
}

.contourrightExtralight{
    border-right:2px solid #000 !important; 
}

.contourtopLight{
    border-top:2.8px solid #000 !important; 
}

.contourbottomLight{
    border-bottom:2.8px solid #000 !important; 
}

.contourleftLight{
    border-left:2.8px solid #000 !important; 
}

.contourrightLight{
    border-right:2.8px solid #000 !important; 
}

.contourtopMedium{
    border-top:5.3px solid #000 !important; 
}

.contourbottomMedium{
    border-bottom:5.3px solid #000 !important; 
}

.contourleftMedium{
    border-left:5.3px solid #000 !important; 
}

.contourrightMedium{
    border-right:5.3px solid #000 !important; 
}
.contourtopBold{
    border-top:6.3px solid #000 !important; 
}

.contourbottomBold{
    border-bottom:6.3px solid #000 !important; 
}

.contourleftBold{
    border-left:6.3px solid #000 !important; 
}

.contourrightBold{
    border-right:6.3px solid #000 !important; 
}
.contourtopExtrabold{
    border-top:7.5px solid #000 !important; 
}

.contourbottomExtrabold{
    border-bottom:7.5px solid #000 !important; 
}

.contourleftExtrabold{
    border-left:7.5px solid #000 !important; 
}

.contourrightExtrabold{
    border-right:7.5px solid #000 !important; 
}
.contourtopBlack{
    border-top:8.8px solid #000 !important; 
}

.contourbottomBlack{
    border-bottom:8.8px solid #000 !important; 
}

.contourleftBlack{
    border-left:8.8px solid #000 !important; 
}

.contourrightBlack{
    border-right:8.8px solid #000 !important; 
}
.contourtopHeavy{
    border-top:9.9px solid #000 !important; 
}

.contourbottomHeavy{
    border-bottom:9.9px solid #000 !important; 
}

.contourleftHeavy{
    border-left:9.9px solid #000 !important; 
}

.contourrightHeavy{
    border-right:9.9px solid #000 !important; 
}

.topHairline{border-top:1px solid #000;}
.topThin{border-top:4.2px solid #000;}

.cent{
    height:10%;
}

.quatrecent{
    height:39.85%;
}


/*--HEADER--*/

/*--NAVIGATION LATERALE--*/


.navLaterale{
    height:100vh;
    font-size:38px;
    line-height: 58px;
    z-index:400;
}

.navLaterale .NB p{
    padding-top:5px !important;
}

.navLaterale .italico li{
    padding-bottom:12px;
}

.navLaterale .italo a{
    font-family: 'diglu-Regular-italic', sans-serif;
}

.navGraisses{
    margin-top:5px;
}

.navGraisses ul li{
    line-height: .8;
    cursor: pointer;
    content:'A';
}

.navGraisses ul li a:hover:after{
    content: ' ←';
}

.navMenu ul li a:not(.active):hover:after{
    content: ' ←';
}

.italico ul li a:not(.active):hover:after{
    content: ' ←';
}

.active:after{
    content: ' ←';
}

.navMenu ul li{
    padding-bottom:10px;
}

/*--MOTS QUI CHANGENT AU REFRESH--*/

.mots{
    height:100vh;
    position: relative;
    overflow: hidden;
}

.mots .motsPicto{
    position: relative;
}

.mots .motsUnicode{
    position: absolute;
    left:50%;
    margin-left:-40px;
    bottom:0;
    letter-spacing: 0;
}

.scroll{
    position: absolute;
    bottom:40px;
    right:-40px;
    transform: rotate(-90deg);
    animation: scrolling 1s infinite;
    -webkit-animation: scrolling 1s ease-in-out infinite;
    -moz-animation: scrolling 1s infinite;
    -o-animation: scrolling 1s infinite;
    -ms-animation: scrolling 1s infinite;
}

.insta{
    position:absolute;
    bottom:12px;
    left:12px;
}

.insta:hover:after {
    content: ' ←';
    }

.item{
    display: none;
}

@-webkit-@keyframes scrolling {
  0% { bottom:50px; }
  50% { bottom:40px; }
  100% { bottom:50px; }
}
@-moz-@keyframes scrolling {
  0% { bottom:50px; }
  50% { bottom:40px; }
  100% { bottom:50px; }
}
@-o-@keyframes scrolling {
  0% { bottom:50px; }
  50% { bottom:40px; }
  100% { bottom:50px; }
}
@-ms-@keyframes scrolling {
  0% { bottom:50px; }
  50% { bottom:40px; }
  100% { bottom:50px; }
}
@keyframes scrolling {
  0% { bottom:50px; }
  50% { bottom:40px; }
  100% { bottom:50px; }
}

/*--ZONE DE DROITE DU HEADER--*/
#zoneDroiteHeader{
    height:100vh;
    overflow: hidden;
}

/*--TEXTE EXPLICATIF--*/
#zoneDroiteHeader .texteExplicatif{
    width:16.66667vw;
    height:50vh;
    margin-top:0 !important;
    float:left;
    clear:both;
    hyphens: manual;
}

/*--TYPE DE FONT--*/
#zoneDroiteHeader .typeFont p{
    margin-left:16.66667vw;
    margin-bottom:-5px;
    padding-left:12px;
}

#zoneDroiteHeader .typeFont{
    height:50vh;
}

/*--GRILLE--*/
#zoneDroiteHeader .grille{
    padding-top: 80px;
    position: relative;
}

#zoneDroiteHeader .grille .grilleTrait{
    border-bottom: dashed 1px #000;
    width:92%;
    left:4%;
    height:1px;
    position: absolute;
}

#zoneDroiteHeader .grille .grilleTrait1{
    top:56px;
}
#zoneDroiteHeader .grille .grilleTrait2{
    top:139px;
}
#zoneDroiteHeader .grille .grilleTrait3{
    top:355px;
}
#zoneDroiteHeader .grille .grilleTrait4{
    top:431.5px;
}


/*--LONG TEXTE EXPLICATIF--*/
#longTexteExplicatif{
    height:70vh;
    overflow: hidden;
} 

/*--GIFS DE TOUTE LA FONT--*/
#GifsDeTouteLaFont{
    height:70vh;
    text-align: center;
    overflow: hidden;
}

#GifsDeTouteLaFont div{
    padding-top:110px;
    position: relative;
}

#GifsDeTouteLaFont p{
    padding-left:0;
}

/*--AGRANDIR/RAPETISSIR LE TEXTE--*/
#texteGrandissant{
    height:80vh;
    position: relative;
    overflow: hidden;
}

.controller {
    width: 100%;
    transform: rotate(90deg);
    margin-top:80px;
    margin-left:5px;
}

.moletteText{
    line-height: normal !important;
}

#range{
    background:#000;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 150%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 25px;
  cursor: pointer;
  box-shadow: none;
  background: #000;
  border-radius: none;
  border: 4.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  border: 0 solid #000000;
  height: 60px;
  width: 20px;
  border-radius: none;
  background: #000;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top:-22px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #000;
}

.size{
    text-align: center;
}

/*--DETAILS 1--*/
#details1{
    height:65vh;
    position: relative;
    overflow: hidden;
}

#details1 svg{
    position: absolute;
    width:100%;
}

#details1 div{
    position: relative;
}

#details1 .bigwhitespace{
    margin-left:-82.5px;
}
#details1 .samethickness{
    margin-left:-110px;
}
#details1 .contrast{
    margin-left:-73px;
}

#details1 #grilleAX g{
    animation: grilleAX 2s linear infinite;
}

@keyframes grilleAX {
  0% { opacity:0; }
    1%{opacity:1;}
  50%{opacity: 1;}
  51% { opacity:0; }
  100% { opacity:0; }
}

#details1 #H{
    animation: H 6s linear infinite;
}

@keyframes H {
  0% { opacity:.1; }
  50%{opacity: 1;}
  100% { opacity:.1; }
}

#details1 #requin{
    animation: requin 6s linear infinite;
}

@keyframes requin {
  0% { opacity:1; }
  50%{opacity: .1;}
  100% { opacity:1; }
}

#details1 #boulio{
    width: 100%;
}

#Ax{
    letter-spacing:0.05em !important;
}

/*--DETAILS 2--*/
#details2{
    height:70vh;
    position: relative;
    overflow: hidden;
}

#details2 svg{
    position: absolute;
    width:100%;
}
#details2 svg text{
    text-align: center;
}
#details2 #outline{
    text-align: center;
}

#details2 #outline #crayon, #details2 #outline #texto{
    position: relative;
}

#details2 #outline #crayon #rond{
    position: absolute;
    width:98px;
    height:98px;
    top:28px;
    left:10px;
    border-radius:100px;
    background: #000;
}
#details2 #outline #texto #carre{
    position: absolute;
    width:98px;
    height:98px;
    top:28px;
    left:10px;
    background: #000;
}

#details2 div{
    position: relative;
}

#details2 p{
    text-align: center;
}

#details2 .grayscale{
    padding-top:75px;
}

#details2 .diacritics{
    padding-top:75px;
}

#details2 .emotions ul li{
    margin-bottom:12px;
    line-height: 25px;
    cursor: pointer;
} 

#details2 .outlines{
    margin-left:-129px;
}
#details2 .samegrayscale{
    margin-left:-84.5px;
}
#details2 .diacriticsleg{
    margin-left:-84px;
}

#details2 #carre, #details2 #rond{
    animation: grilleAX 2s linear infinite;
}


/*--DETAILS 3--*/
.details3{
    height:70vh;
    position: relative;
    overflow: hidden;
}

.details3 div{
    position: relative;
}

.details3 p{
    text-align: center;
}

.details3 .grayscale{
    padding-top:75px;
}

.details3 .abstraction{
    margin-left:-100px;
}
.details3 .emphasizeddetail{
    margin-left:-97px;
}
.details3 .simplification{
    margin-left:-82px;
}


/*--TYPE SOMETHING--*/
#typeSomething{
    height:60vh;
}

#typeSomething textarea{
    height:60vh;
    border: none;
    box-shadow: none;
}

/*--DETAILS 4--*/
#details4{
    height:60vh;
    position: relative;
    display: none;
}

#details4 p{
    text-align: center;
}

#details4 .grayscale{
    padding-top:75px;
}


/*--MESURES--*/

.details3 .barchart{
    margin-left:-48.5px;
}

.details3 .piechart{
    margin-left:-46.5px;
}

.details3 .bubblechart{
    margin-left:-65.5px;
}


/*--PATTERNS--*/
#patterns{
    height:60vh;
    position: relative;
    overflow: hidden;
}

#pati1 p{
    margin-bottom:-40px;
}

.Typewriter__cursor{display: none;}


/*--FOOTER--*/
footer{
    height:60vh;
    z-index:-10;
}

footer div{
    position: relative;
}

footer div p:first-child{
    text-align: center;
    padding-top:75px;
}

footer .legendes{
    margin-left:-103px;
}

/* ======== Licenses =========== */

#licenses #zoneDroiteHeader{
    height:inherit;
}

.eula p{
    margin-bottom:0;
    margin-right:12px;
}

.eula-a{
    height:19.9vh;
}
.eula-b{
    height:20vh;
}
.eula-c{
    height:9.9vh;
}
.eula-d{
    height:20vh;
}

.eula-e{
    height:20vh;
}

.eula-f{
    height:20vh;
}

#licenses .tableau{
    height:80vh;
    margin-bottom:10vh;
}

#licenses thead th{
  height: 20vh;
}

#licenses thead th:nth-child(1) {
  width: 16.6666666666vw;
}
#licenses thead th:nth-child(2) {
  width: 8.3333333333vw;
}
#licenses thead th:nth-child(3) {
  width: 8.3333333333vw;
}
#licenses thead th:nth-child(4) {
  width: 8.3333333333vw;
}
#licenses thead tr th, #licenses tbody tr th, #licenses tbody tr td{
    font-weight: normal;
    background: #fff;
    text-align: left;
}

/* ======== Buy =========== */
#buy thead tr th, #buy tbody tr th, #buy tbody tr td{
    font-weight: normal;
    background: #fff;
    text-align: left;
}

#buy .tableau1{
    border-bottom:none;
    height:50vh;
}

#buy tbody th, #buy tbody td {
    padding: 0px 4px 2px 12px !important;
}

thead th{
    padding:8px 8px 8px 12px;
}

#buy .full{
    width:24.9999999999vw;
    height:30.1vh;
    float: right;
    clear: both;
    display: block;
}

#buy .style{
    height:30.1vh;
    width:24.9999999999vw;
    display: block;
}

#buy .customtab, #buy .famstyle{
    position: relative;
}

#buy .custom{
    width:24.9999999999vw;
    height:50vh;
    display: block;
    float: left;
    clear: both;
    z-index: 500;
}

#buy .tableau2{
    width:16.6666666666vw;
    height:50vh;
    display: block;
    float:right;
    margin-top:-50vh;
    z-index: 1;
    padding-top:12px;
}

#buy .iso p{
    float:left;
    padding-right:20px;
}

.please{
        display: none;
    }

tbody, thead{
    border:none;
}

#buy #downloadtrial:hover:after {
    content: ' ←';
    }

/* ======== About =========== */
#about .eula{
    height:50vh;
}

#about .eula-a{
    height:50vh;
}
#about footer{
    margin-top:-50vh;
    width:91.6666666663vw;
    margin-left:8.3333333333vw;
    z-index:-10;
}

/* ======== Specimen =========== */
#specimen #zoneDroiteHeader{
    height:100vh;
    overflow: hidden;
}

#specimen #zoneDroiteHeader .typeFont p {
    margin-left: 0;
    margin-bottom: -5px;
    padding-left: 12px;
}

#specimen #zoneDroiteHeader .typeFont {
    height: 40vh;
}

#specimen .copyonclick, #specimen #downloadspecimen{
    height:30vh;
}

#specimen .pictocopycont{
    text-align: center;
    height:20vh;
}

#specimen .pictocopycont .pictocopy{
    cursor: pointer;
    height: 40%;
    margin-top: 30%;
}

#specimen .typeFont, #specimen .copyonclick, #specimen .downloadspecimen{
      height: 19.9vh;
}

#specimen .lespictos{
    margin-top:-80.1vh;
}


#specimen .downloadspec:hover:after {
    content: ' ←';
    }

/* ======== History =========== */
#history #zoneDroiteHeader .grille {
    padding-top: 0;
}

#history .coming{
    height:100vh;
    position: relative;
}

#history .coming svg{
    width:90%;
    margin-top:115px;
}

#history .coming #Nicole{
    font-size:10px;
}

#history #historytext {
    height:80vh;
}

#history #historyroom {
    padding:12px 0 0 0;
    overflow: hidden;
}

#history #historyroom svg{
    width:100%;
    padding:0 12px;
}

#history #historyroom .roomtext{
    text-align:center;
}

#history .texteExplicatif img{
    width:100%;
    padding:12px 12px 0 12px;
}

#history .drawingsite{
    height:100vh;
}

#history .drawingsite .hdrawing img{
    padding-left:12px;
    padding-top:0;
    text-align: center;
    width: 80%;
    margin-left:10%;
}

#history .drawingsite .hdrawing p:nth-child(1){
    font-size: 10px;
    margin-bottom:0;
    text-align: center;
}

#history .drawingsite img{
    padding:12px;
}

#history .drawingsite .hfleche{
    text-align: center;
    margin-top:-25px;
}

#history .drawingsite .hsymbols{
    text-align: center;
    margin-top:-75px;
    position:relative;
}

#history .drawingsite .hdrawing{
    position: relative;
    overflow: hidden;
}

#history .drawingsite .sitearcheo img{
    width:100%;
}

#history .drawingsite .sitearcheo a p:hover:after{
    content: ' ←';
}

#history .legendeshistory{
    position:absolute;
    bottom:-45px;
    left:30%;
}

#history .legendeshistory2{
    position:absolute;
    bottom:12px;
}

#history .lhi2{
    right:12px;
}

#history .kleinfundfoto{
    height: 90vh;
}

#history .beak{
    height:60vh;
    text-align: center;
}

#history #beaky {
    text-align: center !important;
}

#history .beak p:nth-child(1){
    margin-top:36px;
}

#history .beak p:nth-child(2){
    margin-bottom:0;
}
#history .beak p:nth-child(3), #history .beak p:nth-child(4){
    margin:0;
    padding:0;
}

#history .mauer{
    text-align: center;
    overflow: hidden;
    padding-bottom:30px;
}

#history .mauerpatterns{
    margin-bottom:-15px;
    padding-top:0;
}

#history .gifhistoryleg{
    text-align: center;
}

#history #GifsDeTouteLaFont div {
    padding-top: 24px;
}

#history .hisgif{
    margin-top:80px;
    padding-right:0;
}

#history .patternhistory{
    height: 80vh;
    overflow: hidden;
    position: relative;
}

#history .patternhistory div{
    padding-top:12px;
}

#history .patternhistory p{
    line-height: 45px;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
}

#history .patternhistory .patternleghis{
    position: absolute;
    bottom:0;
}

#history .si div{
    text-align: center;
    height: 50vh;
    position: relative;
}

#history .si .lhi1{
    left:12px;
}

#history .legendesschema{
    position:absolute; 
    text-align:center;
    bottom:12px;
    left:50%;
    margin-left:-96px;
}

#history .schema1 .harris{
    height:80vh;
    position: relative;
}

#history .schema1 .harris svg{
    width:100%;
    margin-top:50px;
}

#history .stonefloor{
    padding:12px;
    position: relative;
    height:80vh;
}

#history .stonefloor svg{
    width:100%;
    margin-top:50px;
}

#history .schema3{
    height:80vh;
}
#history .schema3 .schema3svg{
    padding-top:24px;
    overflow: hidden;
}
#history .schema3 .schema3svg svg{
    width:90%;
    margin-top:20px;
    margin-left:10%;
}

#history .texteExplicatif p {
    margin-bottom: 3px;
}

#history .texteExplicatif p a:hover:after{
    content: ' ←';
}

#history .diglutext1{
    height: 50vh;
    margin-bottom: 0;
}


.cls-5 {
    stroke: #000;
}


/* ======== In use =========== */

#inuse #zoneDroiteHeader .grille {
    padding-top: 0;
}

#inuse .coming{
    height:auto;
    position: relative;
}

#inuse #zoneDroiteHeader{
    height:auto;
}

#inuse img{
    width:100%;
}

#inuse .inusepro{
    padding:0;
    position:relative;
}

#inuse .inuselegende{
    position:absolute;
    z-index:100;
    top:0px;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,.9);
    opacity:0;
    transition:all 0.3s ease-in;
}

#inuse .inuselegende:hover{
    opacity: 1;
}

#inuse .inuseplus{
    position:absolute;
    bottom:-12px;
    right:12px;
    z-index:500;
    color:#000;
    cursor: pointer;
    display: block;
    transform-origin: center center;
    display:none;
}

.turnopaque{
    opacity:1 !important;
}

.turnaround{
    -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg); 
   transform: rotate(45deg);
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* DESKTOP 3 */
@media screen and (min-width: 1024px) and (max-width: 1300px) {
    .textespetits {
        font-size: 14px;
        line-height: 22px;
    }

    .textes {
        font-size: 24px;
        line-height: 36px;
    }

    .textesgrands {
        font-size: 55px;
        line-height: 75px;
    }

    .textesbigs {
        font-size: 150px;
        line-height: 190px;
    }
    .navLaterale{
        font-size:24px;
        line-height: 48px;
    } 
    .navMenu ul li {
    padding-bottom: 2px;
    }
    .navLaterale .italico li{
    padding-bottom:2px;
    }
    #titel{
        font-size:24px;
        padding-top:6px;
    }
    .navGraisses ul li {
    line-height: .9;
    }
    #details1 svg {
    padding-top: 0;
    top: -85px;
    }
    #details2 .emotions ul li {
    margin-bottom: 0px;
    line-height: 24px;
    }

    
    #details2 #outline #crayon #rond{
    width:54px;
    height:54px;
    top:15px;
    left:6px;
    }
    #details2 #outline #texto #carre{
    width:52px;
    height:52px;
    top:16px;
    left:6px;
    }
    
    #pati1 p{
    margin-bottom:-26px;
    }
    
    .controller {
    margin-top:30px;
    }
    
        /*--GRILLE--*/
#zoneDroiteHeader .grille{
    padding-top: 30px;
}

#zoneDroiteHeader .grille .grilleTrait1{
    top:34px;
}
#zoneDroiteHeader .grille .grilleTrait2{
    top:75px;
}
#zoneDroiteHeader .grille .grilleTrait3{
    top:184px;
}
#zoneDroiteHeader .grille .grilleTrait4{
    top:221.5px;
}
    
    .scroll {
    right: -30px;
    }
    
    .mots .motsUnicode {
    margin-left: -27.5px;
    bottom: -15px;
    }
    
    .unicodes{
        margin-left:-28px;
    }
    
    #details1 .bigwhitespace {
    margin-left: -61px;
    }
    
    #details1 .samethickness {
    margin-left: -80px;
    }
    
    #details1 .contrast {
    margin-left: -53.5px;
    }
    
    #details2 .outlines {
    margin-left: -95.5px;
    }
    
    #details2 .samegrayscale {
    margin-left: -63px;
    }
    
    #details2 .diacriticsleg {
    margin-left: -62px;
    }
    
    .details3 .abstraction {
    margin-left: -65.5px;
    }
    
    .details3 .emphasizeddetail {
    margin-left: -75px;
    }
    
    .details3 .simplification {
    margin-left: -60.5px;
    }
    
    .details3 .barchart {
    margin-left: -37px;
    }
    
    .details3 .piechart {
    margin-left: -35.5px;
    }
    
    .details3 .bubblechart {
    margin-left: -49.5px;
    }
    
    footer .legendes {
    margin-left: -88.5px;
    }
    .please{
        display: none;
    }
    
    .eula-e {
    height: 20vh;
    }
    .eula-f {
    height: 20vh;
    }
    
    #history .coming svg {
    margin-top: -100px;
    }
    
    #history .patternhistory p {
    line-height: 24px;
}
    #history .schema3 {
    height: 120vh;
}
    #history .schema3 .schema3svg svg {
    margin-top: -75px;
    }
       #history #historytext {
    height: 110vh;
}
    #history .beak p:nth-child(1) {
    margin-top: 12px;
}
    #history .stonefloor {
    height: 110vh;
}
    #history .schema1 .harris {
    height: 110vh;
}
    #history .schema1 .harris svg {
    width: 90%;
    margin-left:5%;
    margin-top: -30px;
}
#history .stonefloor svg {
    width: 90%;
    margin-left:5%;
    margin-top: -15px;
}
    #history .legendesschema {
    margin-left: -65px;
}
    #history .mauerpatterns{
        margin-bottom:-12px;
    }

}

/* DESKTOP 2 */
@media screen and (min-width: 1301px) and (max-width: 1500px) {
    .textespetits {
        font-size: 17px;    
        line-height: 20px;
    }

    .textes {
        font-size: 28px;
        line-height: 43px;
    }
    .navLaterale{
        font-size:28px;
        line-height: 43px;
    }  
    #titel{
        font-size:30px;
    }

    .textesgrands {
        font-size: 70px;
        line-height: 80px;
    }

    .textesbigs {
        font-size: 210px;
        line-height: 250px;
    }

    .navMenu ul li {
    padding-bottom: 4px;
    }
    .navLaterale .italico li {
    padding-bottom: 4px;
    }
    .navLaterale .italico p{
    font-size:18px;
}
            GifsDeTouteLaFont div {
    padding-top: 60px;
    }

    #longTexteExplicatif{
    height:80vh;
} 

    #details1 svg {
    top: -40px;
    }
    #details2 .emotions ul li {
    margin-bottom: 0px;
    line-height: 25px;
    }
     
    #details2 #outline #crayon #rond{
    width:68px;
    height:68px;
    top:20px;
    left:6px;
    }
    #details2 #outline #texto #carre{
    width:68px;
    height:68px;
    top:20px;
    left:7px;
    }
    
    #pati1 span p{
        margin-bottom:-34px;
    }
    
    .controller {
    margin-top:40px;
    }
    
    /*--GRILLE--*/
#zoneDroiteHeader .grille{
    padding-top: 40px;
}

#zoneDroiteHeader .grille .grilleTrait1{
    top:32px;
}
#zoneDroiteHeader .grille .grilleTrait2{
    top:91px;
}
#zoneDroiteHeader .grille .grilleTrait3{
    top:243px;
}
#zoneDroiteHeader .grille .grilleTrait4{
    top:296.5px;
}
    .scroll {
    right: -35px;
    }
    
    .mots .motsUnicode {
    margin-left: -32.5px;
    bottom: -10px;
    }
    
    .unicodes{
        margin-left:-32px;
    }
    
    #details1 .bigwhitespace {
    margin-left: -68px;
    }
    
    #details1 .samethickness {
    margin-left: -89.5px;
    }
    
    #details1 .contrast {
    margin-left: -59.5px;
    }
    
    #details2 .outlines {
    margin-left: -107px;
    }
    
    #details2 .samegrayscale {
    margin-left: -70px;
    }
    
    #details2 .diacriticsleg {
    margin-left: -69px;
    }
    
    .details3 .abstraction {
    margin-left: -72px;
    }
    
    .details3 .emphasizeddetail {
    margin-left: -83.5px;
    }
    
    .details3 .simplification {
    margin-left: -67.5px;
    }
    
    .details3 .barchart {
    margin-left: -40.1px;
    }
    
    .details3 .piechart {
    margin-left: -39px;
    }
    
    .details3 .bubblechart {
    margin-left: -55px;
    }
    
    footer .legendes {
    margin-left: -99px;
    }
    .please{
        display: none;
    }
    
    #history .patternhistory p {
    line-height: 30px;
    }
    
    #history .coming svg {
    margin-top: -70px;
    }
    
    #history .schema3 .schema3svg svg {
    margin-top: -50px;
    }
    #history #historytext {
    height: 100vh;
}
    
    #history .schema1 .harris {
    height: 110vh;
}
    #history .stonefloor {
    height: 110vh;
}
    #history .schema3 {
    height: 100vh;
}
    #history .kleinfundfoto {
    height: 100vh;
}
    #history .beak p:nth-child(1) {
    margin-top: 22px;
}
    #history .beak {
    height: 65vh;
}

}

/* DESKTOP 1 */
@media screen and (min-width: 1500px) and (max-width: 1750px) {
    .textespetits {
        font-size: 20px;
        line-height: 23px;
    }

    .textes {
        font-size: 32px;
        line-height: 47px;
    }
    .navLaterale{
        font-size:32px;
        line-height: 47px;
    }  
    .navGraisses ul li {
    line-height: 0.8;
    }
    
    #titel{
        font-size:32px;
    }

    .textesgrands {
        font-size: 70px;
        line-height: 90px;
    }

    .textesbigs {
        font-size: 235px;
        line-height: 275px;
    }
    #longTexteExplicatif {
    height: 70vh;
    }
    
    
    #details2 #outline #crayon #rond{
    width:68px;
    height:68px;
    top:20px;
    left:8px;
    }
    #details2 #outline #texto #carre{
    width:68px;
    height:68px;
    top:20px;
    left:7px;
    }
    
    #pati1 span p{
        margin-bottom:-34px;
    }
    
    .controller {
    margin-top:50px;
    }
    
    /*--GRILLE--*/
#zoneDroiteHeader .grille{
    padding-top: 40px;
}

#zoneDroiteHeader .grille .grilleTrait1{
    top:28px;
}
#zoneDroiteHeader .grille .grilleTrait2{
    top:93px;
}
#zoneDroiteHeader .grille .grilleTrait3{
    top:263px;
}
#zoneDroiteHeader .grille .grilleTrait4{
    top:322.5px;
}
    .mots .motsUnicode {
    margin-left: -34px;
}
    
    .unicodes{
        margin-left:-36px;
    }
    
    #details1 .bigwhitespace {
    margin-left: -75px;
    }
    
    #details1 .samethickness {
    margin-left: -99px;
    }
    
    #details1 .contrast {
    margin-left: -65px;
    }
    
    #details2 .outlines {
    margin-left: -118px;
    }
    
    #details2 .samegrayscale {
    margin-left: -77.5px;
    }
    
    #details2 .diacriticsleg {
    margin-left: -76px;
    }
    
    .details3 .abstraction {
    margin-left: -79px;
    }
    
    .details3 .emphasizeddetail {
    margin-left: -92.5px;
    }
    
    .details3 .simplification {
    margin-left: -74px;
    }
    
    .details3 .barchart {
    margin-left: -45.5px;
    }
    
    .details3 .piechart {
    margin-left: -43px;
    }
    
    .details3 .bubblechart {
    margin-left: -60px;
    }
    
    footer .legendes {
    margin-left: -99px;
    }
    .please{
        display: none;
    }
    
    #history .patternhistory p {
    line-height: 38px;
    }
    #history .schema1 .harris {
    height: 90vh;
    }
    #history .stonefloor {
    height: 90vh;
    }
    #history .schema3 {
    height: 100vh;
    }
    #history .coming svg {
    margin-top: 40px;
}
    #history #historytext {
    height:110vh;
}
    
}

/* IPAD */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1023.9px)  {
    .textespetits {
        font-size: 18px;
        line-height: 21px;
    }

    .textes {
        font-size: 30px;
        line-height: 40px;
    }
    .navLaterale{
        font-size:30px;
        line-height: 40px;
    }  
    .navGraisses ul li {
    line-height: .9;
    }
    #titel{
        font-size:30px;
    }

    .textesgrands {
        font-size: 70px;
        line-height: 90px;
    }

    .textesbigs {
        font-size: 175px;
        line-height: 225px;
    }
    .navLaterale .italico p{
    font-size:18px;
    }
    .mots {
    height: 70vh;
    border-bottom:none !important;
    }
    
    .insta:after {
    content: ' ←';
    }
    
    #longTexteExplicatif {
    height: 80vh;
    }
    
    #zoneDroiteHeader {
    margin-top:-30vh;
    height:80vh;
    }
    #zoneDroiteHeader .texteExplicatif {
    width: 33.3333333333vw;
    height: 39.9vh;
    }
    #zoneDroiteHeader .typeFont {
    height: 40vh;
    }
    #zoneDroiteHeader .typeFont p {
    padding-left: 140px;
    height:40vh;
    }
    #zoneDroiteHeader .contourtop{
        border-top:0 !important;
    }
    
    #zoneDroiteHeader .grille {
    padding-top: 40px;
    position: relative;
    }
    #zoneDroiteHeader .grille .grilleTrait1{
    top:43px;
    }
    #zoneDroiteHeader .grille .grilleTrait2{
    top:93px;
    }
    #zoneDroiteHeader .grille .grilleTrait3{
    top:219px;
}
    #zoneDroiteHeader .grille .grilleTrait4{
    top:263.5px;
    }
    
    #GifsDeTouteLaFont {
    height: 90vh;
    }
    #GifsDeTouteLaFont div {
    padding-top: 80px;
    }
    
    .unicodes{
        margin-left:-33px;
    }
    
    #details1 {
    height: 160vh;
    }
    
        .contourtopweg{
        border-top:none !important;
    }
    
    #details2 {
    height: 160vh;
    }
    .details3 {
    height: 160vh;
    }
    #details2 .emotions ul li {
    margin-bottom: 0px;
    line-height: 20px;
    }
    
    #details2 #outline #crayon #rond{
    width:68px;
    height:68px;
    top:20px;
    left:8px;
    }
    #details2 #outline #texto #carre{
    width:68px;
    height:68px;
    top:20px;
    left:7px;
    }
    
    #pati1 span p{
        margin-bottom:-31px;
    }
    footer .textesbigs{
        font-size:70px;
    }
    footer div p:first-child {
    padding-top: 0;
    }
    footer {
    height: 30vh;
    }
    .scroll {
    right: -35px;
    }
    
    .mots .motsUnicode {
    margin-left: -32.5px;
    bottom: -10px;
    }
    
    #details1 .bigwhitespace {
    margin-left: -68px;
    }
    
    #details1 .samethickness {
    margin-left: -89.5px;
    }
    
    #details1 .contrast {
    margin-left: -59.5px;
    }
    
    #details2 .outlines {
    margin-left: -107px;
    }
    
    #details2 .samegrayscale {
    margin-left: -70px;
    }
    
    #details2 .diacriticsleg {
    margin-left: -69px;
    }
    
    .details3 .abstraction {
    margin-left: -72px;
    }
    
    .details3 .emphasizeddetail {
    margin-left: -83.5px;
    }
    
    .details3 .simplification {
    margin-left: -67.5px;
    }
    
    .details3 .barchart {
    margin-left: -40.5px;
    }
    
    .details3 .piechart {
    margin-left: -39px;
    }
    
    .details3 .bubblechart {
    margin-left: -55px;
    }
    
    footer .legendes {
    margin-left: -99px;
    }
    /* EULA IPAD */
    #licenses .texteExplicatif{
        display: none;
    }
    #licenses .typeFont{
        display: none;
    }
    #licenses #zoneDroiteHeader {
        margin-top:0;
    }
    #licenses .space{
        height: 0;
    }
    #licenses .tableau{
    display:none;
    }
    #licenses .ipadcontour{
    border-bottom:none !important;
    }
    .eula-e {
    height: 20vh;
      }  
        .scope{
            border-top:none !important;
        }
    /* ======== Buy =========== */
    #buy .style {
    width: 41.6666666665vw;
    height: 20vh;
    }
    #buy .full {
    width: 41.6666666665vw;
    height: 20vh;
    }
    #buy .texteExplicatif{
        display: none;
    }
    #buy .typeFont{
        display: none;
    }
    #buy #zoneDroiteHeader {
        margin-top:-20vh;
        height:40vh;
    }
    #buy .tableau1{
    height:30vh;
    }

    #buy .tableau2 {
    width: 41.6666666665vw;
    height: 40vh;
    margin-top: 0;
    }
    #buy .custom {
    width: 40vw;
    height: 40vh;
    display: block;
    float: left;
    clear: both;
    z-index: 500;
    }
    #buy #downloadtrial:after {
    content: ' ←';
    }
    .please{
        display: block;
    }
    #about .eula-a{
    height:40vh;
    }
    #about footer{
    margin-top:-20vh;
    margin-left:16.6666666666vw;
    }
    #about #zoneDroiteHeader{
        margin-top:-60vh;
    }
    #about .eula {
    height: 40vh;
}
    #history .coming svg {
    margin-top: -95px;
}
    #history #zoneDroiteHeader {
    margin-top: -40vh;
    }
    #history .coming, #history .texteExplicatif {
    border-bottom:none;
    }
    #history #historytext {
    height: 150vh;
}
    #history .drawingsite {
    height: 130vh;
}
 
    #history .kleinfundfoto {
    height: 50vh;
}
    #history .beak {
    height: 50vh;
    }
    #history .beakercontain {
    height: 80vh;
    }
    #history .hisgif {
    margin-top: 65px;
    }
    #history .patternhistory p {
    line-height: 30px;
}
    #history .patternhistory p {
        font-size:18px;
    line-height: 18px;
    text-align: left;
    padding-left:12px;
}
    #history .patternhistory {
    height: 40vh;
}
    #history .si div {
    height: 30vh;
}
    #history .schema3 {
    height: 60vh;
    }
    #history .schema3 li{
    font-size: 18px;
    }
    #history .schema3 .schema3svg svg {
    width: 100%;
    margin-top: -140px;
    }
#history .mauerpatterns {
    margin-bottom: -10px;
}
    #history .drawingsite .hsymbols {
    margin-top: -86px;
    }
    #history .schema3 .schema3svg svg {
    margin-left: 12px;
}
    #history .legendesschema1 {
    margin-left: -63.5px;
}
        #history .legendesschema2 {
    margin-left: -81px;
}
    
        #history #beaky {
    position: absolute;
    left:50%;
        margin-left:-36px;
    }
    #history .beakyplease{
        padding-top:240px !important;
    }
    
    #history .texteExplicatif p a:after{
    content: ' ←';
}
#history .drawingsite .sitearcheo a p:after{
    content: ' ←';
}
    #history #historyroom {
    height: 70vh;
}
    #history .hisconcept {
    height: 80vh;
}
    #specimen .downloadspec:after {
    content: ' ←';
    }
    #specimen .typeFont, #specimen .copyonclick, #specimen .downloadspecimen {
    height: 20vh;
    }
    #specimen .pictocopycont {
    height: 10vh;
    }
    #specimen .lespictos {
    margin-top: -80vh;
}
    #specimen .pictocopycont .pictocopy {
    height: 34%;
    margin-top: 0%;
}
    
    #specimen .placeholder{
        display: none;
    }

#inuse .typeFont, #inuse .texteExplicatif {
    display: none;
}
    #inuse #zoneDroiteHeader{
        margin-top:0;
    }
    
    #inuse .inuselegende:hover {
        opacity: 0;
    }

    #inuse .inuseplus {
        display: block;
    }
    
}


/* IPHONE */
@media only screen and (max-device-width : 767.9px)  {
    ul, p{
        padding:4px 0 0 4px;
    }
    
    .textespetits {
        font-size: 15px;
        line-height: 20px;
    }

    .textes {
        font-size: 25px;
        line-height: 35px;
    }
    .navLaterale{
        font-size:25px;
        line-height: 35px;
    }  
    .navMenu ul li {
    padding-bottom: 4px;
    }
    .navGraisses {
    margin-top: 0;
    }
    .navGraisses ul li {
    line-height: .8;
    }
    #titel{
        font-size:25px;
        padding-top:8px;
        padding-left:8px;
    }

    .textesgrands {
        font-size: 45px;
        line-height: 55px;
    }

    .textesbigs {
        font-size: 80px;
        line-height: 100px;
    }
    .navLaterale .italico li {
    padding-bottom: 4px;
    }
    .navLaterale .italico p{
    font-size:18px;
    }
    .mots {
    height: 40vh;
    border-bottom:none !important;
    }
    
    .insta {
    bottom: -12px;
    left:0px;
    }
    
    .insta:after {
    content: ' ←';
    }
    
    #zoneDroiteHeader {
    margin-top:-60vh;
    height:110vh;
    }
    #zoneDroiteHeader .texteExplicatif {
    width: 74.9999999997vw;
    height: 30vh;
    float:none;
    }
    #zoneDroiteHeader .typeFont p {
    padding-left: 0;
    margin-left:12px;
    height:40vh;
    }
    
    #zoneDroiteHeader .grille {
    padding-top: 10px;
    position: relative;
    }
    #zoneDroiteHeader .grille .grilleTrait1{
    top:9px;
    }
    #zoneDroiteHeader .grille .grilleTrait2{
    top:31px;
    }
    #zoneDroiteHeader .grille .grilleTrait3{
    top:88px;
}
    #zoneDroiteHeader .grille .grilleTrait4{
    top:109px;
    }
    
    #zoneDroiteHeader .grille p, .grille span {
    letter-spacing: 0px;
    }
    
    #longTexteExplicatif p{
        font-size:16px;
        line-height: 22px;
    }
    #longTexteExplicatif{
        height:100vh;
    }
    
    #GifsDeTouteLaFont {
    height: 70vh;
    }
    #GifsDeTouteLaFont div {
    padding-top: 30px;
    }
    
    .unicodes {
    margin-left: -27px;
    }
    
    #details1 {
    height: 140vh;
    }
    #details1 .bigwhitespace {
    margin-left: -59px;
    }
    #details1 .samethickness {
    margin-left: -78px;
    }
    #details1 .contrast {
    margin-left: -51px;
    }
    #details1 svg {
    height: 230px;
    }
    
    .contourtopweg{
        border-top:none !important;
    }
    
    #details2 {
    height: 170vh;
    }
    #details2 .outlines {
    margin-left: -93.5px;
    }
    #details2 .samegrayscale {
    margin-left: -61px;
    }
    #details2 .diacritics {
    padding-top: 90px;
    }
    #details2 .grayscale {
    padding-top: 65px;
    }
    
    #details2 .emotions ul li {
    margin-bottom: 0px;
    line-height: 18px;
    }
    
    #details2 #outline #crayon #rond{
    width: 43px;
    height: 43px;
    top: 13px;
    left: 6px;
    }
    #details2 #outline #texto #carre{
    width: 43px;
    height: 43px;
    top: 13px;
    left: 5px;
    }
    
    #details2 .emotions ul{
        position: absolute;
    }
    
    #details2 .diacriticsleg {
    margin-left: -60px;
    }
    
    .details3 {
    height: 160vh;
    }
    .details3 .abstraction {
    margin-left: -62.5px;
    }
    .details3 .emphasizeddetail {
    margin-left: -73px;
    }
    .details3 .simplification {
    margin-left: -58.5px;
    }
    
    .details3 .barchart{
        margin-left:-35px;
    }
    
    .details3 .bubblechart {
    margin-left: -47.5px;
}
    
    .details3 .piechart {
    margin-left: -33.5px;
}
    
    #details4 .grayscale {
    padding-top: 30px;
    }
    #details4 {
    height: 40vh;
    }
    
    .bigphone{
        font-size: 125px;
    }
    
    #pati1 span p{
        margin-bottom:-19px;
    }
    
    .controller {
    width: 100%;
    margin-top: 0px;
    }
    
    input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 250%;
    }
    
    input[type=range]::-webkit-slider-thumb {
  width: 35px;
    }
    
    footer .textesbigs{
        font-size:27px;
    }
    footer div p:first-child {
    padding-top: 0;
    }
    footer {
    height: 30vh;
    }
    footer .legendes {
    margin-left: -86.5px;
    }
    .scroll {
    right: -35px;
    }
    
    .mots .motsUnicode {
    margin-left: -30px;
    bottom: -15px;
    }
    
    /* EULA Iphone1 */
    #licenses .texteExplicatif{
        display: none;
    }
    #licenses .typeFont{
        display: none;
    }
    #licenses #zoneDroiteHeader {
        margin-top:0;
    }
    #licenses .space{
        height: 0;
    }
    #licenses .tableau{
    display:none;
    }
    #licenses .ipadcontour{
    border-bottom:none !important;
    }
    
    .eula-a{
    height:20vh;
}
.eula-b{
    height:40vh;
}
.eula-c{
    height:10vh;
}
    .scope{ height:10vh;}
.eula-d{
    height:40vh;
}

.eula-e{
    height:50vh;
}

.eula-f{
    height:40vh;
}
    
    .scope{
            border-top:none !important;
        }
    #buy .eula-a {
    height: 30vh;
}
    #buy .style {
    height: 40vh;
    width: 41.6666666665vw;
    display: block;
}
    #buy .full {
    height: 40vh;
    width: 33.3333333332vw;
    display: block;
}
    #buy #zoneDroiteHeader {
    margin-top: 0;
    height: 90vh;
    }
    #buy .texteExplicatif{
        display: none;
    }
    #buy .typeFont{
        display: none;
    }
    #buy .custom {
    width: 75vw;
    height: 30vh;
    display: block;
    float: none;
    clear: none;
    z-index: 500;
    }
    #buy thead th {
    padding: 6px 4px 6px 6px;
    }
    #buy tbody th, #buy tbody td {
    padding: 4px 4px 4px 6px;
    }
    #buy .tableau1 {
    height: 100vh;
    }
    #buy .tableau2 {
    width: 75vw;
    height: 90vh;
    margin-top:10px;
    border-left:none !important;
    float: none;
    }
    #buy #downloadtrial:after {
    content: ' ←';
    }
    #about .eula {
    height: 110vh;
    }
    #about .eula-a{
    height:110vh;
    }
    #about footer{
    margin-top:-20vh;
        width:100vw;
    margin-left: 0;
    }
    #about #zoneDroiteHeader{
        margin-top:0vh;
    }
    #about .texteExplicatif p{
        padding-top:12px;
    }
     #specimen .coming{
        height:60vh;
        border-bottom:none !important;
    }
    #specimen #zoneDroiteHeader{
        margin-top:-40vh;
    }
    #specimen .downloadspec:after {
    content: ' ←';
    }
    #specimen .copyonclick{
        display: none;
    }
    #specimen .typeFont, #specimen .copyonclick, #specimen .downloadspecimen {
    height: 30vh;
}
    #specimen .lespictos {
    margin-top: -70vh;
}
    
    #specimen .placeholder2{
        display: none;
    }
    
    .quatrecent {
    height: 40.7%;
}
    
    #history .coming{
        height:50vh;
        border-bottom:none !important;
        overflow: hidden;
    }
    #history #zoneDroiteHeader{
        margin-top:-50vh;
        height:170vh;
    }
    #history .coming svg {
    width: 95%;
    margin-top: -265px;
}
    #history .coming #Nicole {
    font-size: 25px;
}
    #history #uniE534{
        font-size:40px;
        transform:translate(740.189px, 2710.812px);
    }
    #history #zoneDroiteHeader .typeFont {
    height: 40vh;
    }
    #history #historytext {
    height: 320vh;
}
    #history .diglutext1 {
    height: 120vh;
}
    #history #historyroom svg {
    width: 95%;
    margin-top: -20px;
}
    #history .drawingsite {
    height: 120vh;
}
    #history .drawingsite .hfleche {
    margin-top: -10px;
}
    #history .drawingsite .hsymbols {
    margin-top: -40px;
}
    #history .kleinfundfoto {
    height: 130vh;
}
    #history .beak {
    height: 45vh;
}
    #history .beakercontain {
    height: 80vh;
    overflow: hidden;
}
    #history .mauerpatterns{
        margin-bottom:-10px;
    }
    #history .hisgif {
    margin-top: 15px;
}
    #history #GifsDeTouteLaFont {
    height: 120vh;
}
    #history .patternhistory p {
    line-height: 25px;
        position: inherit;
}
    #history .si div {
    height: 30vh;
}
    #history .schema1 .harris svg {
    margin-top: -160px;
}
    #history .schema1 .harris {
    height: 70vh;
    overflow: hidden;
}
    #history .stonefloor svg {
    margin-top: -150px;
}
    #history .stonefloor {
    height: 70vh;
    overflow: hidden;
}
    #history .schema3 li{
    font-size: 15px;
    line-height: 20px;
    }
    #history .schema3 .schema3svg svg {
    width: 100%;
    margin-left: 12px;
    margin-top: -270px;
    }
    #history .legendeshistory {
    left: 25%;
}
    #history .legendesschema1 {
    margin-left: -45px;
    }
    #history .legendesschema2 {
    margin-left: -59.5px;
    }
    #history .patternleghis{
        margin-left:-27px;
    }
    #history .patternleghis1{
        bottom:70px !important;
    }
    #history .patternleghis2{
        bottom:50px !important;
    }
    #history .patternleghis3{
        bottom:30px !important;
    }
    #history .patternleghis4{
        bottom:10px !important;
    }
    #history #zoneDroiteHeader .texteExplicatif {
    height: 45vh;
    }
    #history .patternhistory {
    height: 90vh;
    }
    #history .schema3 {
    height: 90vh;
}
    #history #historyroom {
    padding: 24px 0 0 0;
    }

    #history .texteExplicatif img {
    width: 100%;
    }
    
    #history #beaky {
    position: absolute;
    left:50%;
    }
    #history .beakyplease{
        padding-top:100px !important;
    }
    #history .texteExplicatif p a:after{
    content: ' ←';
}
#history .drawingsite .sitearcheo a p:after{
    content: ' ←';
}
        #history #historyroom {
    height: 100vh;
}
    #history .hisconcept {
    height: 220vh;
}
    #inuse .typeFont, #inuse .texteExplicatif{
        display:none;
    }
    
    #inuse #zoneDroiteHeader{
        margin-top:0;
        height:auto;
    }
    #inuse .coming{
        height:auto !important;
    }
    #inuse .inuselegende:hover {
        opacity: 0;
    }

    #inuse .inuseplus {
        display: block;
    }
    
    #inuse .ledernier{
        border-bottom: none;
    }
    
}

@media (max-device-width: 320px) {
    ul, p{
        padding:4px 0 0 4px;
    }
    
    .textespetits {
        font-size: 13px;
        line-height: 17px;
    }

    .textes {
        font-size: 20px;
        line-height: 30px;
    }
    .navLaterale{
        font-size:22px;
        line-height: 30px;
    }  
    .navMenu ul li {
    padding-bottom: 2px;
    }
    .navGraisses ul li {
    line-height: .8;
    }
    #titel{
        font-size:22px;
        padding-top:8px;
        padding-left:8px;
    }

    #titou {
    padding-top: 4px;
    }
    
    .quatrecent {
    height: 41.2%;
}
    
    .textesgrands {
        font-size: 40px;
        line-height: 50px;
    }

    .textesbigs {
        font-size: 63px;
        line-height: 82px;
    }
    .navLaterale .italico li {
    padding-bottom: 2px;
    }
    .navLaterale .italico p{
    font-size:18px;
    }
    .mots {
    height: 40vh;
    border-bottom:none !important;
    }
    #zoneDroiteHeader {
    margin-top:-60vh;
    height:110vh;
    }
    #zoneDroiteHeader .texteExplicatif {
    width: 74.9999999997vw;
    height: 30vh;
    float:none;
    }
    #zoneDroiteHeader .typeFont p {
    padding-left: 0;
    margin-left:12px;
    height:40vh;
    }
    
    #zoneDroiteHeader .grille {
    padding-top: 0;
    position: relative;
    }
    #zoneDroiteHeader .grille .grilleTrait1{
    top:2px;
    }
    #zoneDroiteHeader .grille .grilleTrait2{
    top:19px;
    }
    #zoneDroiteHeader .grille .grilleTrait3{
    top:64px;
}
    #zoneDroiteHeader .grille .grilleTrait4{
    top:80px;
    }
    
    #zoneDroiteHeader .grille p, .grille span {
    letter-spacing: 0px;
    }
    
    #longTexteExplicatif p{
        font-size:14px;
        line-height: 18px;
    }
    #longTexteExplicatif{
        height:90vh;
    }
    
    #GifsDeTouteLaFont {
    height: 70vh;
    }
    #GifsDeTouteLaFont div {
    padding-top: 30px;
    }
    
    .unicodes {
    margin-left: -25px;
    }
    
    #details1 {
    height: 150vh;
    }
    #details1 .bigwhitespace {
    margin-left: -52px;
    }
    #details1 .samethickness {
    margin-left: -69px;
    }
    #details1 .contrast {
    margin-left: -45.5px;
    }
    #details1 svg {
    height: 230px;
    }
    
    .contourtopweg{
        border-top:none !important;
    }
    
    #details2 {
    height: 190vh;
    }
    #details2 .outlines {
    margin-left: -82.5px;
    }
    #details2 .samegrayscale {
    margin-left: -54px;
    }
    #details2 .diacritics {
    padding-top: 30px;
    }
    #details2 .grayscale {
    padding-top: 30px;
    }
    
    #details2 .emotions ul li {
    margin-bottom: 0px;
    line-height: 15.5px;
    }
    
    #details2 #outline #crayon #rond{
    width: 39px;
    height: 39px;
    top: 11px;
    left: 5px;
    }
    #details2 #outline #texto #carre{
    width: 39px;
    height: 39px;
    top: 12px;
    left: 4px;
    }
    
    #details2 .emotions ul{
        position: absolute;
    }
    
    #details2 .diacriticsleg {
    margin-left: -53px;
    }
    
    .details3 .grayscale {
    padding-top: 45px;
    }
    
    .details3 {
    height: 160vh;
    }
    .details3 .abstraction {
    margin-left: -55px;
    }
    .details3 .emphasizeddetail {
    margin-left: -64.5px;
    }
    .details3 .simplification {
    margin-left: -52px;
    }
    
    #details4 .grayscale {
    padding-top: 30px;
    }
    #details4 {
    height: 40vh;
    }
    
    .details3 .barchart {
    margin-left: -31px;
    }
    
    .details3 .piechart {
    margin-left: -30px;
    }
    
    .details3 .bubblechart {
    margin-left: -42px;
    }
    
    .bigphone{
        font-size: 105px;
    }
    
    .controller {
    width: 100%;
    margin-top: 0px;
    }
    
    input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 250%;
    }
    
    input[type=range]::-webkit-slider-thumb {
  width: 30px;
        height:50px;
        margin-top:-17px;
    }
    
    #pati1 span p{
        margin-bottom:-16px;
    }
    
    
    footer .textesbigs{
        font-size:27px;
    }
    footer div p:first-child {
    padding-top: 0;
    }
    footer {
    height: 30vh;
    }
    footer .legendes {
    margin-left: -76px;
    }
    .scroll {
    right: -30px;
    }
    
    .mots .motsUnicode {
    margin-left: -26px;
    bottom: -13px;
    }
    /* EULA Iphone2 */
    #licenses .texteExplicatif{
        display: none;
    }
    #licenses .typeFont{
        display: none;
    }
    #licenses #zoneDroiteHeader {
        margin-top:0;
    }
    #licenses .space{
        height: 0;
    }
    #licenses .tableau{
    display:none;
    }
    #licenses .ipadcontour{
    border-bottom:none !important;
    }
    
    .eula-a{
    height:30vh;
}
.eula-b{
    height:40vh;
}
.eula-c{
    height:10vh;
}
    .scope{ height:10vh;}
.eula-d{
    height:40vh;
}

.eula-e{
    height:40vh;
}

.eula-f{
    height:40vh;
}
    .scope{
            border-top:none !important;
        }
    #buy .eula-a {
    height: 30vh;
    }
    #buy .style {
    height: 40vh;
    width: 41.6666666665vw;
    display: block;
}
    #buy .full {
    height: 40vh;
    width: 33.3333333332vw;
    display: block;
}
    #buy #zoneDroiteHeader {
    margin-top: 0;
    height: 90vh;
    }
    #buy .texteExplicatif{
        display: none;
    }
    #buy .typeFont{
        display: none;
    }
    #buy .custom {
    width: 75vw;
    height: 30vh;
    display: block;
    float: none;
    clear: none;
    z-index: 500;
    }
    #buy thead th {
    padding: 6px 4px 6px 6px;
    }
    #buy tbody th, #buy tbody td {
    padding: 4px 4px 4px 6px;
    }
    #buy .tableau1 {
    height: 100vh;
    }
    #buy .tableau2 {
    width: 75vw;
    height: 90vh;
    margin-top:0;
    border-left:none !important;
    float: none;
    }
    #about .eula {
    height: 100vh;
    }
    #about .eula-a{
    height:100vh;
    }
    #about footer{
    padding-top:-20vh;
    width:100vw;
    margin-left: 0;
    }
    #about #zoneDroiteHeader{
        margin-top:0vh;
    }
    #about .texteExplicatif p{
        padding-top:12px;
    }
         #history .coming{
        height:50vh;
        border-bottom:none !important;
    }
    #history #zoneDroiteHeader{
        margin-top:-50vh;
        height:170vh;
    }
    #history .coming svg {
    width: 95%;
    margin-top: -292px;
}
    #history .coming #Nicole {
    font-size: 25px;
}
    #history #uniE534{
        font-size:40px;
        transform:translate(740.189px, 2710.812px);
    }
    #history #zoneDroiteHeader .typeFont {
    height: 40vh;
    }
    #history #historytext {
    height: 340vh;
}
    #history #historyroom svg {
    width: 95%;
    margin-top: -50px;
}
    #history .drawingsite {
    height: 130vh;
}
    #history .drawingsite .hfleche {
    margin-top: -10px;
}
    #history .drawingsite .hsymbols {
    margin-top: -40px;
}
    #history .kleinfundfoto {
    height: 120vh;
}
    #history .beak {
    height: 45vh;
}
    
    #history .beakercontain {
    height: 80vh;
}
    #history .mauerpatterns{
        margin-bottom:-10px;
    }
    #history .hisgif {
    margin-top: 5px;
}
    #history #GifsDeTouteLaFont {
    height: 120vh;
}
    #history .patternhistory p {
    line-height: 20px;
        position: inherit;
}
    #history .si div {
    height: 30vh;
}
    #history .schema1 .harris svg {
    margin-top: -160px;
}
    #history .schema1 .harris {
    height: 70vh;
}
    #history .stonefloor svg {
    margin-top: -150px;
}
    #history .stonefloor {
    height: 70vh;
}
    #history .schema3 li{
    font-size: 15px;
    line-height: 20px;
    }
    #history .schema3 .schema3svg svg {
    width: 100%;
    margin-left: 12px;
    margin-top: -300px;
    }
    #history .legendeshistory {
    left: 25%;
}
    #history .legendesschema1 {
    margin-left: -45px;
    }
    #history .legendesschema2 {
    margin-left: -59.5px;
    }
    #history .patternleghis{
        margin-left:-27px;
    }
    #history .patternleghis1{
        bottom:70px !important;
    }
    #history .patternleghis2{
        bottom:50px !important;
    }
    #history .patternleghis3{
        bottom:30px !important;
    }
    #history .patternleghis4{
        bottom:10px !important;
    }
    #history #zoneDroiteHeader .texteExplicatif {
    height: 40vh;
    }
    #history .patternhistory {
    height: 90vh;
    }
    #history .schema3 {
    height: 100vh;
    overflow: hidden;
    }
    #history #historyroom {
    padding: 24px 0 0 0;
    }
    
    #history .texteExplicatif img {
    width: 70%;
    }
    #history #beaky {
    position: absolute;
    left:50%;
    }
    #history .beakyplease{
        padding-top:100px !important;
    }
    #history .texteExplicatif p a:after{
    content: ' ←';
}
#history .drawingsite .sitearcheo a p:after{
    content: ' ←';
}
            #history #historyroom {
    height: 120vh;
}
    #history .hisconcept {
    height: 220vh;
}
    
    #specimen .pictocopycont .pictocopy {
    height: 35%;
}
    #inuse .typeFont, #inuse .texteExplicatif{
        display:none;
    }
    
    #inuse #zoneDroiteHeader{
        margin-top:0;
        height:auto;
    }
    #inuse .inuselegende:hover {
        opacity: 0;
    }

    #inuse .inuseplus {
        display: block;
    }
    
     #inuse .ledernier{
        border-bottom: none;
    }

}


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

/*
 * Hide visually and from screen readers
 */

.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: " ";
  /* 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,
  (-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: transparent !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;
  }
}