@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'windsorregular';
    src: url('../fonts/windsor_regular-webfont.woff2') format('woff2'),
         url('../fonts/windsor_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;


}

body { font-size: 32px; font-family:'windsorregular', Georgia, 'Times New Roman', Times, serif;  transition: background-color 0.4s, color 0.4s; background: #49021F; color: #FFF;     letter-spacing: 0.04em;}

html, body { -webkit-text-size-adjust: 100%;text-size-adjust: 100%;   -webkit-user-select: none;     -ms-user-select: none;    user-select: none; }

#content { position: absolute; top: 0; left: 0;}
.section { height: 100vh; box-sizing: border-box; outline: none; width: 100%;     display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; text-align: center; }
    a { text-decoration: underline; pointer-events: fill; cursor: pointer; transition: color 0.4s; color: #FC8325;}

    .section a {  transition: color 0.4s; white-space: nowrap; }

     h2 { font-size: 200%;  margin:0;  line-height: 105%; font-weight: normal; z-index: 10; pointer-events: none; position: absolute; bottom: 50%; width: 100%; text-align: center;  margin-bottom: 2rem; transform-origin: center center;}
     h2 a { pointer-events: fill; color:#FFF;  }
    .section h3 { font-size: 114%;  margin:0;  line-height: 100%; font-weight: normal; pointer-events: none; position: absolute; top: 50%; margin-top: 0; left: 0; width: 100%; box-sizing: border-box; padding: 0 3.5rem;}

    h1 { position: fixed; top: 0; left: 0; width: 100%; font-weight: normal; font-size: 100%; pointer-events: none; z-index: 5; color: #FC8325;  transition: color 0.4s; }
    h1 span { position: fixed; width: 100%; text-align: center; left: 0; top: 0;   backdrop-filter: blur(0.2rem); display: block; padding: 3.5rem 0;}
    h1 span + span { top: auto; bottom: 0; }
    .scroller-overflow{
        outline:none;
    }

meta { transition: content 0.2s;}


h2.animateToDown {
  animation: 0.25s linear 0.06s   animateTo;
}


h2.animateToUp {
    animation: 0.28s linear 0.26s   animateTo;
  }


  h2.big { font-size: 1100%; line-height: 1em; top: 50%; margin-top: -0.5em;}
  h2.big span {  color: transparent;  background: url(../images/tiret.svg) no-repeat center 61%; background-size: contain; padding: 0 0.05em; margin-right: 0.05em; margin-left: -0.04em; }

 @keyframes animateTo {
    15%,20% {
        transform: scale(1.12) translateY(-0.6rem); text-shadow: 0 0 2rem #0008;
      }
      100% {
        transform: scale(1);
      }
} 


/* @keyframes animateToDown {
    12%,18% {
        transform:  scale(1.1,0.7) translateY(-3.6rem);  text-shadow: 0 0 2rem #0008; filter: blur(1px);
      }
      100% {
        
      }
}

@keyframes animateToUp {
    12%,18% {
        transform: scale(1.1,0.7) translateY(4.6rem);  text-shadow: 0 0 2rem #000C; filter: blur(1px);
      }
      80% {
        
      }
} */


    @media (max-width: 1400px) , (max-height: 750px)  {  body {font-size: 30px;}  }
    @media (max-width: 1200px) , (max-height: 650px)  {  body {font-size: 28px;}  }
    @media (max-width: 1000px) , (max-height: 550px)  {  body {font-size: 26px;}  }
    @media (max-width: 800px) , (max-height: 500px)  {  body {font-size: 22px;}  }
    @media (max-width: 600px) , (max-height: 450px)  {  body {font-size: 20px;}  }
    @media (max-width: 540px) , (max-height: 400px)  {  body {font-size: 18px;}  }
    @media (max-width: 450px) , (max-height: 350px)  {  body {font-size: 16px;}  }
    @media (max-width: 400px) , (max-height: 350px)  {  body {font-size: 15px;}  }
    
    @media  (max-width: 600px)  {  h1 span { padding: 2.5rem 0;}  }
    
    @media  (max-height: 500px)  {  h1 span { padding: 2.5rem 0;}  }
    @media  (max-height: 450px)  {  h1 span { padding: 1.5rem 0;}  }