@font-face {
  font-family: 'Andale Mono';
  src: url('../fonts/AndaleMono.woff2') format('woff2'),
      url('../fonts/AndaleMono.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Mercury Text G2';
  src: url('../fonts/MercuryTextG2-Roman.woff2') format('woff2'),
      url('../fonts/MercuryTextG2-Roman.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Yessica Bold';
  src: url('../fonts/Yessica-Bold.woff2') format('woff2'),
      url('../fonts/Yessica-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Yessica';
  src: url('../fonts/Yessica-Regular.woff2') format('woff2'),
      url('../fonts/Yessica-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
font-family: 'Yessica Thin';
src: url('../fonts/Yessica-Thin.woff2') format('woff2'),
    url('../fonts/Yessica-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
}

@font-face {
font-family: 'Yessica Light';
src: url('../fonts/Yessica-Light.woff2') format('woff2'),
    url('../fonts/Yessica-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Bold';
src: url('../fonts/Helvetica-Bold.woff2') format('woff2'),
    url('../fonts/Helvetica-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Helvetica Light';
src: url('../fonts/Helvetica-Light.woff2') format('woff2'),
    url('../fonts/Helvetica-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Helvetica';
src: url('../fonts/Helvetica.woff2') format('woff2'),
    url('../fonts/Helvetica.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
  font-family: 'Amostely Signature';
  src: url('../fonts/AmostelySignatureRegular.woff2') format('woff2'),
      url('../fonts/AmostelySignatureRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}




/* Main Master */
html, body {
  height: 100%;
}
body{
  overflow-x: hidden;
}
a.link {
  text-align: center;
  display: table;
  margin: 0 auto;
}
.logo-buro.positioning {
  position: absolute;
  z-index: 55;
  top: 1em;
  left: 1em;
}
a{
  transition:0.3s;
  display:table;
  color:black;
}
a.link:hover{
  transition:0.3s;
  display:table;
  color:black;
}
.mom-controller {
  /* overflow: scroll; */
  height: 100%;
  /* scroll-snap-type: mandatory; */
  /* scroll-snap-points-y: repeat(100vh); */
  /* scroll-snap-type: y mandatory; */
}
.mtrphn-wrapper {
  overflow-x: hidden;
  overflow-y:hidden;
}
section {
  height: 100%;
  position: relative;
  /* overflow-x:hidden !important; */
}
.absolute-container{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: table;
  top: 0;
  left: 0;
}
img.responsive{
  width:100%;
  height:auto;
}
.absolute-container.with-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fixed-container{
  position:fixed;
  z-index: 444;
  display: table;
  top: 0;
  left: 0;
}
.fixed-container.no-width{
  width:auto;
}
.vertical-align {
  display: table-cell;
  vertical-align: middle;
}
.vertical-align.top{
  vertical-align:top;
}
.vertical-align.bottom{
  vertical-align:bottom;
}
/*  */

/* Footer */
ul.social-share.buro {
display: inline-block;
padding: 0px;
}
ul.social-share.buro li {
display: inline-block;
}
img.logo-footer {
max-width: 90px;
position: relative;
left: 10px;
}
.fb_iframe_widget {
display: inline-block;
position: relative;
top: -6px;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
a.twitter_button {
text-decoration: none !important;
background-color: #1a94e0;
border-radius: 3px;
padding: 3px 6px;
font-size: 10px;
color: #fff;
position: relative;
top: 0px;
}
/*  */

/* Custom AOS animation */
  [data-aos="mtrphn"] {
    filter:blur(10px);
    opacity:0;
    transition-property: transform, opacity,filter;

  }
  [data-aos="mtrphn"].aos-animate {
    opacity: 1;
    filter:blur(0px);
    transition-property: transform, opacity,filter;
  }
  
  [data-aos="mtrphn_tilt-right"] {
    filter:blur(10px);
    opacity:0;
    transform:rotate(0deg);
    transition-property: transform, opacity,filter;

  }
  [data-aos="mtrphn_tilt-right"].aos-animate {
    filter:blur(0px);
    opacity:1;
    transform:rotate(10deg);
    transition-property: transform, opacity,filter;
  }
  [data-aos="mtrphn_tilt-right-slight"] {
    filter:blur(10px);
    opacity:0;
    transform:rotate(0deg);
    transition-property: transform, opacity,filter;

  }
  [data-aos="mtrphn_tilt-right-slight"].aos-animate {
    filter:blur(0px);
    opacity:1;
    transform:rotate(3deg);
    transition-property: transform, opacity,filter;
  }
  [data-aos="mtrphn_tilt-left"] {
    filter:blur(10px);
    opacity:0;
    transform:rotate(0deg);
    transition-property: transform, opacity,filter;

  }
  [data-aos="mtrphn_tilt-left"].aos-animate {
    filter:blur(0px);
    opacity:1;
    transform:rotate(-10deg);
    transition-property: transform, opacity,filter;
  }
  [data-aos="mtrphn_tilt-left-sight"] {
    filter:blur(10px);
    opacity:0;
    transform:rotate(0deg);
    transition-property: transform, opacity,filter;

  }
  [data-aos="mtrphn_tilt-left-sight"].aos-animate {
    filter:blur(0px);
    opacity:1;
    transform:rotate(-3deg);
    transition-property: transform, opacity,filter;
  }
/*  */

/* Grace */
  .content p {
    font-family: 'Mercury Text G2';
    font-size: 12px;
    font-weight: 100;
    color:#3e3e3e;
  }
  .content p strong {
    color: black;
    font-weight: 800;
  }
/*  */

/* Key Visual */
  section.ultimate-key-visual.shine {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  span.grace.punchline {
    font-family: 'Amostely Signature';
    color: #fff;
    font-size: 10em;
  }
  span.grace.second-punchline {
    font-family: 'Mercury Text G2';
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}
/*  */

/* First Section */
  section.section-first .kv.first-section:after {
    content: '';
    position: absolute;
    top: 0px;
    background-image: url('../img/band-aid.png');
    width: 100px;
    height: 100px;
  }
  section.section-first .kv.first-section:after {
    content: '';
    position: absolute;
    top: -7%;
    left: -5%;
    background-image: url(../img/band-aid.png);
    width: 25%;
    height: 25%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .kv-second.first-section {
    margin-left: auto;
    position: relative;
    left: 17%;
    bottom: 4em;
  }
  .kv-second.first-section .tilted {
    position: relative;
  }
  .kv-second.first-section .tilted:after {
    content: '123';
    position: absolute;
    width: 10%;
    height: 10%;
    background-image: url(../img/band-aid-2.png);
  }
  .kv-second.first-section .tilted:after {
    content: '';
    position: absolute;
    top: -28%;
    left: 52%;
    width: 25%;
    height: 40%;
    background-image: url(../img/band-aid-2.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  h1.punchline_section-first {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 3.5em;
    display: inline-block;
    width: auto;
    position: relative;
  }
  h1.punchline_section-second {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 2em;
    display: inline-block;
    width: auto;
    position: relative;
  }
/*  */

/* Second Section */

  .tilted.kv.second-section:after {
    content: '';
    position: absolute;
    top: -6%;
    right: 9%;
    width: 25%;
    height: 15%;
    background-image: url(../img/band-aid-3.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
/*  */


/* Third Section */

  h1.punchline_section-third {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 3em;
    display: inline-block;
    width: auto;
    position: relative;
    left: -50%;
    top: 1em;
  }
  .third-section .image-top:after {
    content: '';
    position: absolute;
    top: -6%;
    right: -13%;
    width: 25%;
    height: 15%;
    background-image: url(../img/band-aid-4.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .third-section .image-top:before {
    content: '';
    position: absolute;
    top: -10%;
    left: -25%;
    transition: 1s;
    width: 50%;
    height: 50%;
    background-image: url(../img/Smudges-02.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .kv.third-section.image-bottom:after {
    content: '';
    position: absolute;
    top: -5%;
    left: -10%;
    transition: 1s;
    width: 27%;
    height: 25%;
    background-image: url(../img/band-aid-5.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
/*  */

/* Fourth Section */
  .kv.fourth-section:after {
    content: '';
    position: absolute;
    top: -3%;
    left: -7%;
    transition: 1s;
    width: 18%;
    height: 25%;
    background-image: url(../img/band-aid-6.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .kv.fourth-section:before {
    content: '';
    position: absolute;
    right: -18%;
    bottom: -8%;
    transition: 1s;
    width: 27%;
    height: 25%;
    background-image: url(../img/band-aid-7.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  h1.punchline_section-fourth {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 4em;
    display: inline-block;
    width: auto;
    position: relative;
    top: 0.6em;
  }
  .brut-put {
    min-height: 500px;
    position: relative;
  }
  img.img-ballet-02 {
    height: 100%;
    position: absolute;
    left: -6em;
  }
  .kv .kv-last:after {
    content: '';
    position: absolute;
    top: -5%;
    left: 25%;
    transition: 1s;
    width: 27%;
    height: 25%;
    background-image: url(../img/band-aid-8.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .kv .kv-last:before {
    content: '';
    position: absolute;
    bottom: -22%;
    right: -28%;
    transition: 1s;
    width: 75%;
    height: 50%;
    background-image: url(../img/Smudges.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
/*  */
/* Last Section */
  h1.punchline_section-last {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 2em;
    display: inline-block;
    width: auto;
    position: relative;
  }
/*  */

.footer-credit.text-center {
  font-size: 12px;
}

@media all and (max-width:960px){
  img.img-ballet-02 {
    height: 100%;
    position: absolute;
    top: 2em;
    left: -5em;
    }
  .brut-put{
    min-height:400px;
  }
  span.grace.punchline {
    font-family: 'Amostely Signature';
    color: #fff;
    font-size: 8em;
    line-height: 2;
  }
  h1.punchline_section-first{
    line-height:2;
  }
  h1.punchline_section-second{
    line-height:1.7;
  }
  h1.punchline_section-third{
    line-height:2;
  }
  h1.punchline_section-fourth{
    line-height:2;
  }
  h1.punchline_section-last{
    line-height:2;
  }
}
@media all and (min-width:960px){
  .ballet_one {
    position: relative;
    top: -2em;
    left: 6em;
  }
}
@media all and (min-width:767px) and (max-width: 1240px){
  img.img-ballet-02 {
    height: 100%;
    position: absolute;
    left: -4em;
  }
  .content p {
    font-family: 'Mercury Text G2';
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -0.3px;
  }
  .align-self-end .content {
    position: relative;
    top: 0.7em;
  }
  h1.punchline_section-third {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 2em;
    display: inline-block;
    width: auto;
    position: relative;
    left: -50%;
    top: 1em;
  }
  h1.punchline_section-first {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 3em;
    display: inline-block;
    width: auto;
    position: relative;
  }
}
@media all and (min-width:512px) and (max-width:767px){
  span.grace.second-punchline {
    font-family: 'Mercury Text G2';
    color: #fff;
    font-size: 10px;
    line-height: 1;
    display: inline-block;
    position: relative;
    top: 7em;
  }
  img.img-ballet-02 {
    height: 100%;
    position: absolute;
    left: 0em;
    top: 0em;
  }
  span.grace.punchline{
    font-size:4em;
  }
  h1.punchline_section-first {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 2em;
    display: inline-block;
    width: auto;
    position: relative;
    top: 0.3em;
  }
  .content p {
    font-family: 'Mercury Text G2';
    font-size: 9px;
  }
  .kv-second.first-section {
    margin-left: auto;
    position: relative;
    left: 11%;
    bottom: 1em;
  }
  h1.punchline_section-second {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 1.5em;
    display: inline-block;
    width: auto;
    position: relative;
  }
  h1.punchline_section-third {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 1.5em;
    display: inline-block;
    width: auto;
    position: relative;
    left: -50%;
    top: 1em;
  }
  .align-self-end .content {
    position: relative;
    top: 1em;
  }
  .ballet_one {
    margin-top:1em;
    margin-bottom: 1em;
  }
  h1.punchline_section-fourth {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 2em;
    display: inline-block;
    width: auto;
    position: relative;
    top: 0.6em;
  }
  h1.punchline_section-last {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 1.3em;
    display: inline-block;
    width: auto;
    position: relative;
  }
  .footer-credit.text-center {
    font-size: 9px;
  }
}
@media all and (max-width:512px){
  .logo-buro.positioning {
    position: absolute;
    z-index: 55;
    top: 1em;
    left: 40%;
  }
  .logo-buro.positioning svg {
    width: 80px;
    display: table;
    margin: 0 auto;
  }
  .mtrphn-wrapper{
    overflow-x:hidden;
  }
  section.ultimate-key-visual.shine {
    overflow-x: hidden;
  }
  span.grace.second-punchline {
    font-family: 'Mercury Text G2';
    color: #fff;
    font-size: 10px;
    line-height: 1;
    display: inline-block;
    position: relative;
    top: -10em;
  }
  span.grace.punchline {
    font-size: 4em;
    line-height: 2;
    position: relative;
    top: -0.35em;
  }
  h1.punchline_section-first {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 30px;
    display: inline-block;
    width: auto;
    position: relative;
    line-height: 2;
    top: 0.3em;
  }
  .content p {
    font-family: 'Mercury Text G2';
    font-size: 7px;
    letter-spacing: -0.5px;
  }
  img.img-ballet-02 {
    height: 200px;
    position: absolute;
    left: 0em;
    top: 2em;
    width: 150px;
  }
  .kv-second.first-section {
    position: relative;
    bottom: 1em;
    margin-right: -5%;
  }
  h1.punchline_section-second {
    font-family: 'Amostely Signature';
    color: #000;
    line-height: 1.8;
    font-size: 22px;
    display: inline-block;
    width: auto;
    position: relative;
  }
  h1.punchline_section-third {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 14px;
    line-height: 2;
    display: inline-block;
    width: auto;
    position: relative;
    left: -50%;
    top: 1em;
  }
  .align-self-end .content {
    position: relative;
    top: 1em;
  }
  .ballet_one {
    margin-top:1em;
    margin-bottom: 1em;
  }
  h1.punchline_section-fourth {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 2em;
    display: inline-block;
    width: auto;
    position: relative;
    top: 1em;
    line-height: 2;
  }
  h1.punchline_section-last {
    font-family: 'Amostely Signature';
    color: #000;
    font-size: 1.3em;
    line-height: 2;
    display: inline-block;
    width: auto;
    position: relative;
  }
  .footer-credit.text-center {
    font-size: 9px;
  }
}

@media all and (max-width:376px){
  .content p {
    font-family: 'Mercury Text G2';
    font-size: 7px;
  }
  img.img-ballet-02 {
    height: 200px;
    position: absolute;
    left: 0em;
    top: 4em;
    width: 150px;
  }
}