@media (min-width: 1201px) {

    html {
      scroll-behavior: smooth;
    }

    body {
      background-color: #D6D6D6;
      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: 300;
      font-size: 32px;
      color: #000;
      line-height: 60px;
      margin-top: 50px;
    }

    h2 {
      margin-top: 10%;
      font-family: Bitter;
      font-weight: 500;
      font-size: 54px;
      color: #000;
    }

    h3 {
      text-align: center;
      font-family: Bitter;
      font-weight: 500;
      font-size: 36px;
      color: #000;
      line-height: 60px;
      margin-top: 50px;
    }

    h4 {
      font-family: Bitter;
      font-weight: 400;
      font-size: 18px;
      color: #000;
      margin-top: 20px;
    }

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


    @import url('https://fonts.googleapis.com/css2?family='Lalezar'&display=swap');
    @import url('https://fonts.googleapis.com/css2?family='Lalezar'&display=swap');
    @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;
      grid-template-columns: 1fr 1fr 4fr;
      align-items: center;
      justify-content: space-between;
      margin: 50px 250px 0px 250px;
    }

    #back {
      justify-self: end;
    }

    .header-thumb {
      width: 250px;
    }

    .breadcrumb {
      font-family: Bitter;
      font-weight: 400;
      font-size: 28px;
      color: #000;
      line-height: 30px;
    }

    .bt-gobackhome {
      height: 40px;
      justify-self: end;
    }

    .bt-gobackhome: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 {right: 0px;}
      to {right: 30px;}
    }

    /* Profile */

    #profile {
      display: grid;
      grid-template-columns: 40% 60%;
      margin-left:200px;
      margin-right: 100px;
      margin-top: 100px;
    }

    .profile-photo {
      width: 90%;
    }

    /* Other skills */

    #beyond {
      display: grid;
      margin-top: 100px;
      margin-left: 250px;
      margin-right: 250px;
      margin-bottom: 100px;
    }

    .skills {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 30px;
      margin-top: 100px;
      text-align: center;
      justify-content: space-between;
    }

    .skill-item {
      height: 300px;
      width: 600px;
      background-image: url('../images/bg-beyond.svg');
      background-repeat: no-repeat;
      background-position: center;
    }

    .skill-item h4 {
      text-align: center;
    }

    .coming {
      font-weight: bolder;
    }


    /* Logos */

    #places {
      display: grid;
      margin-top: 100px;
      margin-left: 250px;
      margin-right: 250px;
      margin-bottom: 100px;
    }

    #places div {
      display: grid;
      justify-items: center;
      align-items: center;
    }

    #places img {
      width:80%;
    }

    .logos {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      justify-items: center;
      align-items: baseline;
      grid-gap: 60px;
      margin-top: 100px;
    }


    /* Contacts */

    #contact {
      display: grid;
      grid-auto-flow: row;
      justify-items: center;
      grid-gap: 20px;
      margin-bottom: 200px;
    }

}


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

    html {
      scroll-behavior: smooth;
    }

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

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

    a {
      text-decoration: none;
    }

    h1 {
      width: 100%;
      font-family: Bitter;
      font-weight: 300;
      font-size: 26px;
      color: #000;
      line-height: 40px;
      margin-top: 20px;
    }

    h2 {
      margin-top: 10%;
      font-family: Bitter;
      font-weight: 500;
      font-size: 48px;
      color: #000;
    }

    h3 {
      text-align: center;
      font-family: Bitter;
      font-weight: 500;
      font-size: 32px;
      color: #000;
      line-height: 36px;
      margin-top: 50px;
    }

    h4 {
      font-family: Bitter;
      font-weight: 400;
      font-size: 16px;
      color: #000;
      margin-top: 20px;
    }

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


    @import url('https://fonts.googleapis.com/css2?family='Lalezar'&display=swap');
    @import url('https://fonts.googleapis.com/css2?family='Lalezar'&display=swap');
    @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;
      grid-template-columns: 1fr 1fr 4fr;
      align-items: center;
      justify-content: space-between;
      margin: 50px 100px 0px 100px;
    }

    #back {
      justify-self: end;
    }

    .header-thumb {
      width: 170px;
    }

    .breadcrumb {
      font-family: Bitter;
      font-weight: 400;
      font-size: 20px;
      color: #000;
      line-height: 30px;
    }

    .bt-gobackhome {
      height: 25px;
    }

    .bt-gobackhome: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 {right: 0px;}
      to {right: 30px;}
    }

    /* Profile */

    #profile {
      display: grid;
      grid-template-columns: 50% 50%;
      margin-left:100px;
      margin-right:100px;
      margin-top: 100px;
    }

    .profile-photo {
      width: 100%;
    }

    /* Other skills */

    #beyond {
      display: grid;
      margin-top: 50px;
      margin-left: 100px;
      margin-right: 100px;
      margin-bottom: 100px;
    }

    .skills {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
      margin-top: 50px;
      text-align: center;
      justify-content: space-between;
    }

    .skill-item {
      height: 300px;
      width: 450px;
      background-image: url('../images/bg-beyond.svg');
      background-repeat: no-repeat;
      background-position: center;
    }

    .skill-item h4 {
      text-align: center;
    }

    .coming {
      font-weight: bolder;
    }


    /* Logos */

    #places {
      display: grid;
      margin-top: 50px;
      margin-left: 100px;
      margin-right: 100px;
      margin-bottom: 100px;
    }

    #places div {
      display: grid;
      justify-items: center;
      align-items: center;
    }

    #places img {
      width:70%;
    }

    .logos {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      justify-items: center;
      grid-gap: 30px;
      margin-top: 100px;
    }


    /* Contacts */

    #contact {
      display: grid;
      grid-auto-flow: row;
      justify-items: center;
      grid-gap: 20px;
      margin-bottom: 200px;
    }

}


@media (max-width: 600px) {

    html {
      scroll-behavior: smooth;
    }

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

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

    a {
      text-decoration: none;
    }

    h1 {
      margin-top: 50px;
      font-family: Bitter;
      font-weight: 300;
      font-size: 24px;
      color: #000;
      line-height: 28px;
    }

    h2 {
      margin-top: 20%;
      font-family: Bitter;
      font-weight: 500;
      font-size: 36px;
      color: #000;
    }

    h3 {
      text-align: center;
      font-family: Bitter;
      font-weight: 500;
      font-size: 24px;
      color: #000;
      line-height: 28px;
      margin-top: 50px;
    }

    h4 {
      font-family: Bitter;
      font-weight: 350;
      font-size: 16px;
      color: #000;
      margin-top: 20px;
    }

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


    @import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');
    @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: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin: 50px 50px 0px 50px;
    }

    #back {
      display: flex;
      order: -1;
      align-self: flex-end;
    }

    .header-thumb {
      width:100%;
    }

    .breadcrumb {
      font-family: Bitter;
      font-weight: 400;
      font-size: 28px;
      color: #000;
      line-height: 30px;
      text-align: center;
    }

    .bt-gobackhome {
      margin-top: 20px;
      margin-bottom: 20px;
      height: 20px;
    }

    .bt-gobackhome: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 {right: 0px;}
      to {right: 30px;}
    }

    /* Profile */

    #profile {
      display: flex;
      flex-direction: column;
      margin-left:50px;
      margin-right:50px;
      margin-top: 50px;
    }

    .profile-photo {
      width: 100%;
    }

    /* Other skills */

    #beyond {
      display: grid;
      margin-top: 50px;
      margin-left: 20px;
      margin-right: 20px;
    }

    .skills {
      display: grid;
      grid-template-rows: 1fr;
      margin-top: 20px;
      text-align: center;
      justify-content: space-between;
    }

    /* .skill-item {
      height: 300px;
      width: 320px;
      background-image: url('../images/bg-beyond.svg');
      background-repeat: no-repeat;
      background-position: center;
    } */

    .skill-item h4 {
      text-align: center;
    }

    .coming {
      font-weight: bolder;
    }


    /* Logos */

    #places {
      display: grid;
      margin-top: 50px;
      margin-left: 50px;
      margin-right: 50px;
      margin-bottom: 50px;
    }

    #places div {
      display: grid;
      justify-items: center;
      align-items: center;
    }

    #places img {
      width: 80%;
    }

    .logos {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      grid-gap: 50px;
      margin-top: 80px;
    }


    /* Contacts */

    #contact {
      display: grid;
      grid-auto-flow: row;
      justify-items: center;
      grid-gap: 20px;
      margin-bottom: 200px;
    }

}