/*******************
  BIG INTRO
*******************/

.big-intro {
  z-index: 4;
  position: relative;
  min-height: 100vh;
  padding: 12em 0 10em 0;
  color: #fff;
  text-align: left;
}

  .page-template-page-accueil .big-intro {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f37049+0,ed0089+100 */
    background: rgb(243,112,73); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(243,112,73,1) 0%, rgba(237,0,137,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(243,112,73,1) 0%,rgba(237,0,137,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(243,112,73,1) 0%,rgba(237,0,137,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f37049', endColorstr='#ed0089',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }


.big-intro .title.huge > * {
  font-size: 11em;
}
.big-intro .content {
  max-width: 38em;
  margin: var(--gutter) auto 0 0;
}
.big-intro .quote {
  font-size: 3em;
  line-height: 1.33em;
  letter-spacing: -1px;
  font-family: var(--serif);
}
.big-intro .author {
  margin-top: 1em;
}
.big-intro .separator {
  margin-top: var(--gutter);
  margin-bottom: var(--gutter);
}
.big-intro .text { font-size: 1.33em; }


.big-intro::before {
  content: '';
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: 2s 0.5s ease-out;
}
  body.ready .big-intro::before {
    left: 100%;
  }

.big-intro .ill {
  z-index: 4;
  position: absolute;
  bottom: -7.5em;
  right: -100vw;
  width: 42.5vw;
  height: 42.5vw;
  transform: rotate(180deg);
  transition: 2s 0.5s ease-out;
}
  body.ready .big-intro .ill { right: 1em; transform: rotate(0); }
.big-intro .ill::before {
  content: '';
  width: 65%;
  height: 65%;
  position: absolute;
  top: 0;
  right: -25%;
  background-image: url(../../img/icon-amagar-line.svg);
  background-size: contain;
  opacity: 0.6;
}
.big-intro img {
  display: block;
  -webkit-clip-path: url(#svgClipPath);
  clip-path: url(#svgClipPath);
}







@media screen and (max-width: 1200px) {
  .big-intro { padding-bottom: calc(var(--gutter) * 2); }
  .big-intro .title.huge > * { font-size: 6.5em; }
  .big-intro .content { max-width: 90%; }
  .big-intro .quote { font-size: 2.5em; max-width: 55vw; }
  .big-intro .ill {
    bottom: auto;
    top: 10em;
    height: 35vw;
    width: 35vw;
  }
}
@media screen and (max-width: 1000px) {
  .big-intro { min-height: 50vh; }
}
@media screen and (max-width: 800px) {
  .big-intro .quote { max-width: 50vw; }
  .big-intro .ill {
    bottom: auto;
    top: 19em;
    height: 35vw;
    width: 35vw;
  }
  body.ready .big-intro .ill {
    right: var(--gutter);
  }
}
@media screen and (max-width: 700px) {
  .big-intro .ill { top: 21em; }
}
@media screen and (max-width: 600px) {
  .big-intro { padding-top: 12em; }
  .big-intro .ill {
    z-index: 1;
    width: 40vw;
    height: 40vw;
    top: 4em;
  }
  .big-intro .wrapper { z-index: 2; }
  .big-intro .title.huge > * { font-size: 4.5em; }
  .big-intro .content,
  .big-intro .quote { max-width: 100%; }
}




.small-intro {
  z-index: 4;
  position: relative;
  min-height: 250px;
  margin-bottom: calc(var(--gutter) * 2);
  background: rgb(243,112,73); /* Old browsers */
  background: -moz-linear-gradient(-45deg,  rgba(243,112,73,1) 0%, rgba(237,0,137,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  rgba(243,112,73,1) 0%,rgba(237,0,137,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  rgba(243,112,73,1) 0%,rgba(237,0,137,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f37049', endColorstr='#ed0089',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}