Ethica-vitrine/user/themes/ethica/css-compiled/template.css

@font-face {
  font-family: "amiri-regular";
  src: url("../fonts/amiri/amiri-regular-webfont.eot");
  src: url("../fonts/amiri/amiri-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/amiri/amiri-regular-webfont.woff") format("woff"), url("../fonts/amiri/amiri-regular-webfont.ttf") format("truetype"), url("../fonts/amiri/amiri-regular-webfont.svg#amiri-regular") format("svg"); }
@font-face {
  font-family: "amiri-slanted";
  src: url("../fonts/amiri/amiri-slanted-webfont.eot");
  src: url("../fonts/amiri/amiri-slanted-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/amiri/amiri-slanted-webfont.woff") format("woff"), url("../fonts/amiri/amiri-slanted-webfont.ttf") format("truetype"), url("../fonts/amiri/amiri-slanted-webfont.svg#amiri-slanted") format("svg"); }
@font-face {
  font-family: "amiri-bold";
  src: url("../fonts/amiri/amiri-bold-webfont.eot");
  src: url("../fonts/amiri/amiri-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/amiri/amiri-bold-webfont.woff") format("woff"), url("../fonts/amiri/amiri-bold-webfont.ttf") format("truetype"), url("../fonts/amiri/amiri-bold-webfont.svg#amiri-bold") format("svg"); }
@font-face {
  font-family: "amiri-boldslanted";
  src: url("../fonts/amiri/amiri-boldslanted-webfont.eot");
  src: url("../fonts/amiri/amiri-boldslanted-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/amiri/amiri-boldslanted-webfont.woff") format("woff"), url("../fonts/amiri/amiri-boldslanted-webfont.ttf") format("truetype"), url("../fonts/amiri/amiri-boldslanted-webfont.svg#amiri-boldslanted") format("svg"); }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%; }

ul, li, ol {
  margin: 0;
  padding: 0;
  list-style: none; }

a {
  text-decoration: none;
  color: black; }

p, ul, li, ol, h1, h2, h3, em, blockquote {
  margin: 0; }

h1, h2, h3 {
  font-family: "amiri-bold";
  font-weight: normal; }

p, ul, li {
  font-family: "amiri-regular";
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.5rem; }

em, blockquote > p {
  font-family: "amiri-slanted";
  font-weight: normal; }

section blockquote {
  font-size: 0.8rem; }

strong > em {
  font-family: "amiri-boldslanted";
  font-weight: normal; }

h1 {
  font-size: 2rem;
  line-height: 1.8rem; }

h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  padding-top: 1.5rem; }

h3 {
  font-size: 1rem;
  line-height: 1.5rem;
  padding-top: 1.5rem; }

li > a:hover, ol > a:hover {
  font-family: "amiri-bold";
  font-weight: normal; }

.underline > a {
  font-family: "amiri-bold";
  font-weight: normal;
  text-decoration: underline; }

.block > a {
  text-decoration: underline;
  font-family: "amiri-bold";
  font-weight: normal; }

body {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
    display: -webkit-box;
    display: -ms-flexbox; }

#header {
  z-index: 1;
  width: 300px;
  height: 100%;
  padding-top: 1.5rem;
  padding-left: 30px;
  position: fixed;
  background: white; }
  #header #logo {
    padding-bottom: 10px; }
  #header #navbar {
    padding-left: 15px; }
    #header #navbar .sous-menu {
      height: 1.5rem;
      transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
      transition-delay: 0.5s;
        -o-transition-delay: 0.5s;
        -webkit-transition-delay: 0.5s;}
      #header #navbar .sous-menu > ol {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.5s, opacity 0.5s linear;
          -o-transition: visibility 0.5s, opacity 0.5s linear;
          -webkit-transition: visibility 0.5s, opacity 0.5s linear;
        margin-left: 30px;
        padding-left: 5px; }
      #header #navbar .sous-menu:hover {
        height: 100px;
        transition: all 0.3s ease-in-out;
          -o-transition:  all 0.3s ease-in-out;
          -webkit-transition:  all 0.3s ease-in-out }
        #header #navbar .sous-menu:hover > a {
          text-decoration: underline; }
          #header #navbar .sous-menu:hover > a::after {
            background-image: url("../images/trait.svg");
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: 1px 10px;
            display: block;
            width: 1px;
            height: 10px;
            margin-left: 37px;
            margin-top: -5px;
            content: " "; }
        #header #navbar .sous-menu:hover > ol {
          visibility: visible;
          transition: all 0.5s linear;
            -o-transition:  all 0.5s linear;
            -webkit-transition: all 0.5s linear;
          transition-delay: 0.2s;
              -o-transition-delay: 0.2s;
              -webkit-transition-delay: 0.2s;
          opacity: 1; }
    #header #navbar .underline::before {
      background-image: url("../images/point_b.svg");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 5px 5px; }
    #header #navbar .block {
      height: 100px;
      transition: all 0.3s ease-in-out;
        -o-transition:  all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;}
      #header #navbar .block::before {
        background-image: url("../images/point_b.svg");
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 5px 5px; }
      #header #navbar .block > a::after {
        background-image: url("../images/trait.svg");
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 1px 10px;
        display: block;
        width: 1px;
        height: 10px;
        margin-left: 37px;
        margin-top: -5px;
        content: " "; }
      #header #navbar .block ol {
        visibility: visible;
        transition: visibility 0.5s, opacity 0.5s linear;
          -o-transition:  visibility 0.5s, opacity 0.5s linear;
          -webkit-transition: visibility 0.5s, opacity 0.5s linear;
        opacity: 1; }
    #header #navbar ul > li::before, #header #navbar ol::before {
      display: inline-block;
      content: " ";
      width: 5px;
      height: 5px;
      margin: 0 5px 1px 0px;
      background-image: url("../images/point.svg");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 3.5px 4.5px; }
    #header #navbar ul > li .underline::before, #header #navbar ol .underline::before {
      background-image: url("../images/point_b.svg");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 5px 5px; }
    #header #navbar ul > li:hover::before, #header #navbar ol:hover::before {
      background-image: url("../images/point_b.svg");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 5px 5px; }
    #header #navbar ul > li:hover > a, #header #navbar ol:hover > a {
      text-decoration: underline; }
  #header .separation {
    position: absolute;
    left: 100%;
    width: 1px;
    height: 100%;
    top: 1.5rem;
    background: black; }
    #header .separation::before {
      display: block;
      content: " ";
      width: 5px;
      height: 5px;
      margin: -2.5px 0px 0px -2.5px;
      background-image: url("../images/point_b.svg");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 5px 5px; }

body {
  overflow: hidden; }

section {
  position: absolute;
  left: 300px;
  width: auto; }
  section .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
      -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
    width: 100%;
    height: 100vh; }
    section .content p:not(.slider) {
      margin: 1rem 0; }
    section .content h2 + p {
      margin-bottom: 0 !important; }
    section .content h2 + p, section .content h3 + p {
      margin: 0 !important; }
    section .content a {
      text-decoration: underline; }
      section .content a::after {
        display: inline-block;
        content: " ";
        width: 3.5px;
        height: 3.5px;
        margin: 0 5px 1px 0px;
        background-image: url("../images/fleche.svg");
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 12px 5px;
        display: inline-block;
        width: 12px;
        height: 5px;
        margin: 0 0px 1px 5px;
        transition: all 1s;
          -o-transition: all 1s;
          -webkit-transition:  all 1s;}
      section .content a:hover::after, .app a:hover::after {
        transition: all 1s;
          -o-transition: all 1s;
          -webkit-transition:  all 1s;
        margin: auto 0px 1px 10px; }
    section .content > div:not(#recherche-artistique) {
      min-width: 500px;
      width: calc(50vw - 150px);
      filter: blur(1.5px);
      -webkit-filter:blur(1.5px);
      transition: all 2s;
        -o-transition: all 2s;
        -webkit-transition: all 2s;
      color: grey; }
    section .content > .net {
      filter: blur(0px) !important;
        -webkit-filter:blur(0px);
      -webkit-transition: -webkit-filter 0.5s !important;
      transition: -webkit-filter 0.5s !important;
      transition: filter 0.5s !important;
      transition: filter 0.5s, -webkit-filter 0.5s !important;
        -o-transition: filter 0.5s !important;
        -webkit-transition: filter 0.5s !important;
      color: black !important; }
    section .content > div {
      overflow-y: auto;
    }
      section .content > div h3:first-of-type {
        padding-top: 0px !important; }
    section .content > div:not(#recherche-artistique) {
      padding: 0 1%; }
    section .content img {
      width: 75%;
      height: auto; }
  section #recherche-artistique.net > div:first-child {
    filter: blur(0px) !important;
      -webkit-filter:blur(0px)!important;
    -webkit-transition: -webkit-filter 0.5s !important;
    transition: -webkit-filter 0.5s !important;
    transition: filter 0.5s !important;
    transition: filter 0.5s, -webkit-filter 0.5s !important;
      -o-transition: filter 0.5s!important;
      -webkit-transition: filter 0.5s!important;
    color: black !important; }
  section #recherche-artistique {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 200rem;
    }
    section #recherche-artistique > .net {
      filter: blur(0px) !important;
        -webkit-filter:blur(0px)!important;
      -webkit-transition: -webkit-filter 0.5s !important;
      transition: -webkit-filter 0.5s !important;
      transition: filter 0.5s !important;
      transition: filter 0.5s, -webkit-filter 0.5s !important;
        -o-transition: filter 0.5s!important;
        -webkit-transition: filter 0.5s!important;
      color: black !important; }
    section #recherche-artistique > div {
      filter: blur(1.5px);
        -webkit-filter:blur(1.5px);
      -webkit-transition: -webkit-filter 0.5s;
      transition: -webkit-filter 0.5s;
      transition: filter 0.5s;
      transition: filter 0.5s, -webkit-filter 0.5s;
        -o-transition: filter 0.5s;
        -webkit-transition: filter 0.5s;
      color: grey;
      overflow-y: auto;
      padding: 0 2%;
      width: calc(50vw - 150px);
      min-width: 500px;}
      section #commentaire-philosophe ul > li{
        cursor: pointer;
      }
      section #commentaire-philosophe ul > li > ol > li > ul{
        margin-left: 30px;
      }
      section #recherche-artistique #commentaire-philosophe ul > li > ol > li::before {
        background-image: url("../images/point.svg");
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 3.5px 3.5px;
        display: inline-block;
        content: " ";
        width: 3.5px;
        height: 3.5px;
        margin: 0 5px 1px 0px; }
        section #recherche-artistique #commentaire-philosophe ul > li > ol > li > ul > li::before {
          background-image: url("../images/point.svg");
          background-position: 0 0;
          background-repeat: no-repeat;
          background-size: 3.5px 3.5px;
          display: inline-block;
          content: " ";
          width: 3.5px;
          height: 3.5px;
          margin: 0 5px 1px 0px; }

.mCSB_container {
  padding-bottom: 65px; }

body .fullpage {
  overflow-y: auto;
  overflow-x: hidden;
  background: white;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 999; }
  body .fullpage::before {
    display: inline-block;
    content: " ";
    width: 3.5px;
    height: 3.5px;
    margin: 0 5px 1px 0px;
    background-image: url("../images/fleche.svg");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 12px 5px;
    display: inline-block;
    width: 12px;
    height: 5px;
    margin: 0 0px 1px 5px;
    width: 100px;
    height: 100px;
    position: absolute;
    background: red;
    z-index: 999; }
  body .fullpage .full {
    position: relative;
    width: 100%;
    padding: 0 1vw;
    height: auto;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);

    margin-left: 50%; }