/* -----  Reset & Normalization  ---------------------------------------- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

::-moz-selection {
  background: #3F51B5;
  color: #fffff8;
}

::selection {
  background: #3F51B5;
  color: #fffff8;
}

html,body{
       width: 90%;
       margin: 0 auto;
 }

body {
  /* space for sticky footer */
  margin-bottom: 4.5rem;
}

/* Headings */
h1, h2, h3 {
  font-family:  Montserrat, Helvetica, Arial, sans-serif;
  font-weight: 700;
}

h1 {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.25;
  text-align: center;
  margin-bottom: 3rem;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid #71efac;
}

a:hover, a:focus, a:active {
  color: #560bed;
}

/* paragraph */

@font-face {
    font-family: 'vesper_libreregular';
    src: url('vesperlibre-regular-webfont.woff2') format('woff2'),
         url('vesperlibre-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'merriweather_sansregular';
    src: url('merriweathersans-regular-webfont.woff2') format('woff2'),
         url('merriweathersans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

p {  }
/* =====  Site Layout  ==================================================== */

html {
  background: #fffff8;
  color: #261e66;
  font: normal 400 1.2em/1.5 'merriweather_sansregular', Helvetica, sans-serif;
  /* Always show the vertical scrollbar to prevent `jumps`
     of page content after navigating from a very short page
     that does not scroll to a long pager */
  overflow-y: scroll;
  /* Setting this to `default` prevents the cursors from
     changing when hovering blocks of text or whitespace,
     which is less distracting */
  cursor: default;
  /* Neccessary for sticks footer. */
  position: relative;
  min-height: 100%;
  /* Prevent adjustments of font size after orientation
     changes in IE and iOS. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Highlight color for WebKit-bases touch devices. */
  -webkit-tap-highlight-color: rgba(251, 176, 64, .5);
}
  
@media all and (max-width: 30em) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    font-size: 1.2em;
  }
}

.content { margin-top:  50px; }

.phrases p { 
    font-size: 2.2em;
    line-height: 2em; 
    -webkit-animation-duration: 1s;
    transition: all 
}

.phrases p:first-child {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; 
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  margin-bottom: 1em;}

@-moz-keyframes drops {
  0% {
    -moz-transform: translateY(-30px); }
  100% {
    -moz-transform: translateY(0); } }

@-webkit-keyframes drops {
  0% {
    -webkit-transform: translateY(-30px); }
  100% {
    -webkit-transform: translateY(0); } }

@keyframes drops {
  0% {
    transform: translateY(-30px); }
  100% {
    transform: translateY(0); } }


  @-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  }

  @keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  }   


.header { height: 50px; margin-bottom:1.5em;}

.titre {
    float: left;
    font-family:  'vesper_libreregular', serif;
    color: #fffff8;
    background-color: #261e66;
    border-radius: 7px;
    padding: 8px 8px 2px 8px;
    transition: all 0.3s ease;
  }

.titre span {  }

.titre:hover {
 -webkit-transform: scale(1.2);
 -ms-transform: scale(1.2);
 transform: scale(1.2);
 background-color: #3F51B5;
}

.info {
    font-family:  'vesper_libreregular', serif;
    float: right;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #fffff8;
    line-height: 40px;
    text-align: center;
    background: #261e66;
    animation:  .5s ease-in-out;
    transition: all 0.3s ease;
}

.titre{cursor:pointer;}

.info:hover {
  cursor:pointer;
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
  background-color: #3F51B5;
 }


.clickbounce {
  animation: bounce .5s ease-in-out;
}

@keyframes bounce {
  0% {
    transform: translateY(-10px); }
  30% {
    transform: translateY(0px); } 
  50% {
    transform: translateY(-5px); } 
  60% {
    transform: translateY(0); } 
  70% {
    transform: translateY(-3px); } 
  100% {
    transform: translateY(-0px); }}

@media screen and (max-width: 450px) {
  .phrases p {  
    font-size: 1.2em;
    margin-bottom: 1em;
    line-height: 1.8em;
  }
}

.hide{display: none;}

.w3-modal { 
    background-color: rgba(208, 208, 208, 0.8);
    border-radius: 3px; }

.w3-modal-content { background-color:#fffff8;padding: 2em;}
.w3-modal-content { font-size: 0.8em; }
.w3-modal li {margin-bottom: 1em; margin-top: 1em;}

.w3-button { font-size: 1.5em; }

.w3-button:hover {
    color: #fffff8!important;
    background-color: #3F51B5!important;
}

.w3-modal p {   
    font-size: 1.2em;
    margin-bottom: 15px;}

.w3-modal img {
    width: 100%;
    margin: 0 auto;
    display: block;}