@media (min-width: 1201px) {

    html {
      scroll-behavior: smooth;
    }

    body {
      background-color: #1D1D1B;
      width: 100%;
      animation-name: entrada;
      animation-duration: 1.5s;
    }

    @keyframes entrada {
      from {
        opacity: 0;
        top: 200;
      }
      to {
        opacity: 1;
        top: 0;
      }
    }

    a {
      text-decoration: none;
    }

    h1 {
      width: 50%;
      font-family: 'Bitter';
      font-weight: 200;
      font-size: 48px;
      color: #FFF;
      line-height: 60px;
      text-align: center;
    }

    h2 {
      font-family: 'Bitter';
      font-weight: lighter;
      font-size: 32px;
      color: #FFF;
      line-height: 40px;
    }

    h3 {
      font-family: 'Bitter';
      font-weight: bolder;
      font-size: 22px;
      width: 350px;
      color: #FFF;
      line-height: 30px;
    }

    p {
      font-family: 'Bitter';
      font-weight: lighter;
      font-size: 20px;
      width: 350px;
      color: #FFF;
      line-height: 30px;
    }

    .txt-year {
      font-family: 'Bitter';
      font-weight: bolder;
      font-size: 30px;
      color: #EAB522;
      padding-bottom: 5px;
    }

    @import url('https://fonts.googleapis.com/css2?family='Lalezar'&display=swap');

    @import url("https://use.typekit.net/ssb1ypi.css");

    @import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    @font-face {
        font-family: 'ThunderIta';
        src: url('fonts/Thunder-BoldLCItalic.eot'); /* IE9 Compat Modes */
        src: url('fonts/Thunder-BoldLCItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('fonts/Thunder-BoldLCItalic.woff') format('woff'), /* Modern Browsers */
             url('fonts/Thunder-BoldLCItalic.woff2') format('woff2'), /* Modern Browsers */
             url('fonts/Thunder-BoldLCItalic.ttf') format('truetype'); /* Safari, Android, iOS */
                 font-style: italic;
        font-weight: bold;
        text-rendering: optimizeLegibility;
    }

    /* Estilo dos botões */

    nav {
      display: grid;
      justify-items: end;
      color: white;
      margin-top: 50px;
      margin-right: 150px;
    }

    .about-me {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 220px;
      height: 75px;
      border-radius: 50%;
      background: #EAB522;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .about-me:hover {
      width: 216px;
      height: 71px;
      background: #1D1D1B;
      border-color: #EAB522;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    /* Header */

    #header {
      display: grid;
      justify-items: center;
    }

    .name {
      width: 60%;
    }

    .header-cta {
      margin-top: 2%;
      width: 25%;
    }

    .rio {
      width: 60px;
    }

    .txt-creative {
      width: 60%;
    }

    /* Works */

    #works {
      margin-top:7%;
      display: grid;
      grid-gap: 150px;
      overflow: hidden;
    }

    #missaolua {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #departida {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #relashow {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #google {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #loreal {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #cabecudos {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #localiza {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #superdigital {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #carnavalnota10 {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #virada {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    .img-work {
      width: 90%;
    }

    .txt-work {
      width: 38%;
      text-align: center;
    }

    .bt-missaolua {
      margin-top: 20px;
      width: 380px;
      height: 80px;
      text-align: center;
      line-height: 220%;
      background: #e9f800;
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #1D1D1B;
    }

    .bt-missaolua:hover {
      height: 76px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #e9f800;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-departida {
      margin-top: 20px;
      width: 380px;
      height: 80px;
      text-align: center;
      line-height: 220%;
      background: #0053ff;
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #1D1D1B;
    }

    .bt-departida:hover {
      height: 76px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: 0053ff;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-relashow {
      margin-top: 20px;
      width: 380px;
      height: 80px;
      text-align: center;
      line-height: 230%;
      background: #00E88F;
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #1D1D1B;
    }

    .bt-relashow:hover {
      height: 76px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #00E88F;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-google {
      margin-top: 20px;
      width: 380px;
      height: 80px;
      text-align: center;
      line-height: 230%;
      background: #4486F4;
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #1D1D1B;
    }

    .bt-google:hover {
      height: 76px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #4486F4;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-loreal {
      margin-top: 20px;
      width: 380px;
      height: 80px;
      text-align: center;
      line-height: 230%;
      background: #A0A0A0;
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #1D1D1B;
    }

    .bt-loreal:hover {
      height: 76px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #A0A0A0;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-cabecudos {
      margin-top: 20px;
      width: 380px;
      height: 80px;
      text-align: center;
      line-height: 230%;
      background: #00E88F;
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #1D1D1B;
    }

    .bt-cabecudos:hover {
      height: 76px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #00E88F;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-localiza {
      margin-top: 20px;
      width: 380px;
      height: 80px;
      text-align: center;
      line-height: 230%;
      background: #00E88F;
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #1D1D1B;
    }

    .bt-localiza:hover {
      height: 76px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #00E88F;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-superdigital {
      margin-top: 20px;
      width: 380px;
      height: 80px;
      text-align: center;
      line-height: 230%;
      background: #8636C3;
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #1D1D1B;
    }

    .bt-superdigital:hover {
      height: 76px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #8636C3;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-carnavalnota10 {
      margin-top: 20px;
      width: 380px;
      height: 80px;
      text-align: center;
      line-height: 230%;
      background: #edc873;
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #1D1D1B;
    }

    .bt-carnavalnota10:hover {
      height: 76px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #edc873;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-virada {
      margin-top: 20px;
      width: 380px;
      height: 80px;
      text-align: center;
      line-height: 230%;
      background: #249DDB;
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #1D1D1B;
    }

    .bt-virada:hover {
      height: 76px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #249DDB;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }


    /* Old but Gold */

    #oldbutgold {
      margin-top: 15%;
      display: grid;
      overflow: hidden;
      background-image: url('../images/bg-line.svg');
      background-repeat: no-repeat;
    }

    .txt-oldbutgold {
      margin-left: -10%;
      width: 120%;
      margin-bottom: 7%;
    }

    .zagallo {
      display: grid;
      grid-template-columns: 40% 60%;
      padding-left: 25%;
      padding-right: 10%;
      margin-bottom: 15%;
    }

    .olx {
      display: grid;
      grid-template-columns: 40% 60%;
      padding-left: 25%;
      padding-right: 10%;
      margin-bottom: 15%;
    }

    .img-old {
      width: 350px;
    }

    #one {
      display: none;
    }

    #two {
      display: block;
    }

    .bt-watch:hover {
      position: relative;
      animation-name: arrowbutton;
      animation-duration: 0.5s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-timing-function: ease-out;
    }

    @keyframes arrowbutton {
      from {left: 0px;}
      to {left: 30px;}
    }


    /* Footer */

    #footer {
      margin-bottom: 5%;
      display: flex;
      flex-direction: row;
      gap: 20px;
      align-items: center;
      justify-content: center;
    }

    .last-call {
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #FFF;
    }

}


@media (min-width: 601px) and (max-width: 1200px) {

    html {
      scroll-behavior: smooth;
    }

    body {
      background-color: #1D1D1B;
      width: 100%;
      animation-name: entrada;
      animation-duration: 1.5s;
    }

    @keyframes entrada {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    a {
      text-decoration: none;
    }

    h1 {
      width: 80%;
      font-family: 'Bitter';
      font-weight: 400;
      font-size: 32px;
      color: #FFF;
      line-height: 40px;
      text-align: center;
    }

    h2 {
      font-family: 'Bitter';
      font-weight: lighter;
      font-size: 28px;
      color: #FFF;
    }

    h3 {
      font-family: 'Bitter';
      font-weight: bolder;
      font-size: 22px;
      width: 200px;
      color: #FFF;
      line-height: 30px;
    }

    p {
      font-family: 'Bitter';
      font-weight: lighter;
      font-size: 18px;
      width: 350px;
      color: #FFF;
      line-height: 30px;
    }

    .txt-year {
      font-family: 'Bitter';
      font-weight: bolder;
      font-size: 30px;
      color: #EAB522;
      padding-bottom: 5px;
    }

    @import url('https://fonts.googleapis.com/css2?family='Lalezar'&display=swap');

    @import url("https://use.typekit.net/ssb1ypi.css");

    @import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    @font-face {
        font-family: 'ThunderIta';
        src: url('fonts/Thunder-BoldLCItalic.eot'); /* IE9 Compat Modes */
        src: url('fonts/Thunder-BoldLCItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('fonts/Thunder-BoldLCItalic.woff') format('woff'), /* Modern Browsers */
             url('fonts/Thunder-BoldLCItalic.woff2') format('woff2'), /* Modern Browsers */
             url('fonts/Thunder-BoldLCItalic.ttf') format('truetype'); /* Safari, Android, iOS */
                 font-style: italic;
        font-weight: bold;
        text-rendering: optimizeLegibility;
    }

    /* Estilo dos botões */

    nav {
      display: grid;
      justify-items: end;
      color: white;
      margin-top: 50px;
      margin-right: 50px;
    }

    .about-me {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 180px;
      height: 61px;
      border-radius: 50%;
      background: #EAB522;
      font-family: 'Lalezar', cursive;
      font-size: 28px;
      color: #1D1D1B;
    }

    .about-me:hover {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 176px;
      height: 57px;
      border-radius: 50%;
      background: #1D1D1B;
      border-color: #EAB522;
      border-width: 2px;
      border-style: solid;
      font-family: 'Lalezar', cursive;
      font-size: 28px;
      color: #FFF;
    }

    /* Header */

    #header {
      display: grid;
      justify-items: center;
    }

    .name {
      width: 75%;
    }

    .header-cta {
      margin-top: 10%;
      width: 40%;
    }

    .rio {
      width: 40px;
    }

    .txt-creative {
      width: 55%;
    }

    /* Works */

    #works {
      margin-top:10%;
      display: grid;
      grid-gap: 120px;
      overflow: hidden;
    }

    #missaolua {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #departida {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #relashow {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #google {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #loreal {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #cabecudos {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #localiza {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #superdigital {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #carnavalnota10 {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #virada {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    .img-work {
      width: 110%;
    }

    .txt-work {
      width: 75%;
      text-align: center;
    }

    .bt-missaolua {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 220%;
      background: #e9f800;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-missaolua:hover {
      height: 56px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #e9f800;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-departida {
      margin-top:2;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 220%;
      background: #0053ff;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-departida:hover {
      height: 54px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: 0053ff;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-relashow {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #00E88F;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-relashow:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #00E88F;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-google {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #4486F4;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-google:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #4486F4;;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-loreal {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #A0A0A0;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-loreal:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #A0A0A0;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-cabecudos {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #00E88F;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-cabecudos:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #00E88F;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-localiza {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #00E88F;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-localiza:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #00E88F;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-superdigital {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #8636C3;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-superdigital:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #8636C3;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-carnavalnota10 {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #edc873;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-carnavalnota10:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #edc873;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-virada {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #249DDB;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-virada:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #249DDB;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }


    /* Old but Gold */

    #oldbutgold {
      margin-top: 15%;
      display: grid;
      overflow: hidden;
      background-image: url('../images/bg-line.svg');
      background-repeat: no-repeat;
    }

    .txt-oldbutgold {
      margin-left: -10%;
      width: 120%;
      margin-bottom: 7%;
    }

    .zagallo {
      display: grid;
      grid-template-columns: 60% 40%;
      padding-left: 15%;
      padding-right: 15%;
      margin-bottom: 20%;
    }

    .olx {
      display: grid;
      grid-template-columns: 60% 40%;
      padding-left: 15%;
      padding-right: 15%;
      margin-bottom: 25%;
    }

    .img-old {
      width: 200px;
    }

    #one {
      display: none;
    }

    #two {
      display: block;
    }

    .bt-watch:hover {
      position: relative;
      animation-name: arrowbutton;
      animation-duration: 0.5s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-timing-function: ease-out;
    }

    @keyframes arrowbutton {
      from {left: 0px;}
      to {left: 30px;}
    }


    /* Footer */

    #footer {
      margin-bottom: 10%;
      display: flex;
      flex-direction: row;
      gap: 20px;
      align-items: center;
      justify-content: center;
    }

    .last-call {
      font-family: 'Lalezar', cursive;
      font-size: 40px;
      color: #FFF;
    }

}


@media (max-width: 600px) {

    html {
      scroll-behavior: smooth;
    }

    body {
      background-color: #1D1D1B;
      width: 100%;
      animation-name: entrada;
      animation-duration: 1.5s;
    }

    @keyframes entrada {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    a {
      text-decoration: none;
    }

    h1 {
      width: 90%;
      font-family: 'Bitter';
      font-weight: 400;
      font-size: 20px;
      color: #FFF;
      line-height: 26px;
      text-align: center;
    }

    h2 {
      font-family: 'Bitter';
      font-weight: lighter;
      font-size: 20px;
      line-height: 120%;
      color: #FFF;
    }

    h3 {
      font-family: 'Bitter';
      font-weight: bolder;
      font-size: 22px;
      width: 200px;
      color: #FFF;
      line-height: 30px;
    }

    p {
      font-family: 'Bitter';
      font-weight: lighter;
      font-size: 18px;
      width: 350px;
      color: #FFF;
      line-height: 30px;
    }

    .txt-year {
      font-family: 'Bitter';
      font-weight: bolder;
      font-size: 30px;
      color: #EAB522;
      padding-bottom: 5px;
    }

    @import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');

    @import url("https://use.typekit.net/ssb1ypi.css");

    @import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    @font-face {
        font-family: 'ThunderIta';
        src: url('fonts/Thunder-BoldLCItalic.eot'); /* IE9 Compat Modes */
        src: url('fonts/Thunder-BoldLCItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('fonts/Thunder-BoldLCItalic.woff') format('woff'), /* Modern Browsers */
             url('fonts/Thunder-BoldLCItalic.woff2') format('woff2'), /* Modern Browsers */
             url('fonts/Thunder-BoldLCItalic.ttf') format('truetype'); /* Safari, Android, iOS */
                 font-style: italic;
        font-weight: bold;
        text-rendering: optimizeLegibility;
    }

    /* Estilo dos botões */

    nav {
      display: grid;
      justify-items: end;
      color: white;
      margin-top: 35px;
      margin-right: 35px;
    }

    .about-me {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      width: 130px;
      height: 40px;
      border-radius: 50%;
      background: #EAB522;
      font-family: 'Lalezar', cursive;
      font-size: 18px;
      color: #1D1D1B;
    }

    .about-me:hover {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 126px;
      height: 36px;
      border-radius: 50%;
      background: #1D1D1B;
      border-color: #EAB522;
      border-width: 2px;
      border-style: solid;
      font-family: 'Lalezar', cursive;
      font-size: 18px;
      color: #FFF;
    }

    /* Header */

    #header {
      display: grid;
      justify-items: center;
    }

    .name {
      width: 75%;
    }

    .header-cta {
      margin-top: 5%;
      width: 50%;
    }

    .rio {
      width: 25px;
    }

    .txt-creative {
      width: 80%;
    }

    /* Works */

    #works {
      margin-top:10%;
      display: grid;
      grid-gap: 70px;
      overflow: hidden;
    }

    #missaolua {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #departida {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #relashow {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #google {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #loreal{
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #cabecudos{
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #localiza {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #superdigital {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #carnavalnota10 {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    #virada {
      display: grid;
      grid-gap: 30px;
      justify-items: center;
    }

    .img-work {
      width: 130%;
    }

    .txt-work {
      width: 75%;
      text-align: center;
    }

    .bt-missaolua {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 220%;
      background: #e9f800;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-missaolua:hover {
      height: 56px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: #e9f800;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-departida {
      margin-top:2;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 220%;
      background: #0053ff;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-departida:hover {
      height: 54px;
      line-height: 210%;
      background: #1D1D1B;
      border-color: 0053ff;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-relashow {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #00E88F;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-relashow:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #00E88F;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-google {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #4486F4;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-google:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #4486F4;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-loreal {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #A0A0A0;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-loreal:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #A0A0A0;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-cabecudos {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #00E88F;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-cabecudos:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #00E88F;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-localiza {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #00E88F;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-localiza:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #00E88F;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-superdigital {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #8636C3;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-superdigital:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #8636C3;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-carnavalnota10 {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #edc873;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-carnavalnota10:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #edc873;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }

    .bt-virada {
      margin-top: 20px;
      width: 270px;
      height: 60px;
      text-align: center;
      line-height: 200%;
      background: #249DDB;
      font-family: 'Lalezar', cursive;
      font-size: 32px;
      color: #1D1D1B;
    }

    .bt-virada:hover {
      height: 56px;
      line-height: 190%;
      background: #1D1D1B;
      border-color: #249DDB;
      border-style: solid;
      border-width: 2px;
      color: #FFF;
    }


    /* Old but Gold */

    #oldbutgold {
      margin-top: 15%;
      display: grid;
      overflow: hidden;
    }

    .txt-oldbutgold {
      margin-left: -10%;
      width: 180%;
      margin-bottom: 7%;
    }

    .zagallo {
      display: flexbox;
      padding-left: 15%;
      padding-right: 15%;
      margin-bottom: 20%;
    }

    .olx {
      display: flexbox;
      padding-left: 15%;
      padding-right: 15%;
      margin-bottom: 25%;
    }

    .img-old {
      width: 200px;
    }

    #one {
      display: block;
    }

    #two {
      display: none;
    }

    .bt-watch:hover {
      position: relative;
      animation-name: arrowbutton;
      animation-duration: 0.5s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-timing-function: ease-out;
    }

    @keyframes arrowbutton {
      from {left: 0px;}
      to {left: 30px;}
    }


    /* Footer */

    #footer {
      margin-bottom: 10%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      justify-content: center;
    }

    .last-call {
      font-family: 'Lalezar', cursive;
      font-size: 25px;
      color: #FFF;
    }

}