/* ====> Fontes dos h3 no dropdown<==== */

/* 1960 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/* 1970 */
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Nanum+Gothic&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/* 1980 */
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Nanum+Gothic&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap');
/* 1990 */
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Nanum+Gothic&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Patrick+Hand&family=Space+Grotesk:wght@300..700&display=swap');
/* 2000 */
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nanum+Gothic&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Patrick+Hand&family=Space+Grotesk:wght@300..700&display=swap');
/* 2010 */
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nanum+Gothic&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Patrick+Hand&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Grotesk:wght@300..700&display=swap');
/* 2020 */
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nanum+Gothic&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Patrick+Hand&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Grotesk:wght@300..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: NeueHaas;
    src: url(/src/fonts/NeueHaasDisplayMediu.ttf);
}

body {
    font-family: NeueHaas, sans-serif;
}
/* @media screen and (min-width: 1101px) and (max-width: 1305) */


@media screen and (min-width: 1101px) and (max-width: 1377px) {

    .buttons {
        display: flex;
        gap: 10px;
    }

    body,
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    h3 {
        color: #000000;

    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropbtn {
        background-color: transparent;
        color: #000000;
        font-size: 1rem;
        font-family: NeueHaas, sans-serif;
        padding: 5px;
        border: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        transition: transform 0.3s;
    }

    .dropdown-content {
        display: none;
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        height: 35vw;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        overflow: auto;
        padding-top: 60px;
        z-index: -1;
        animation-name: animacao;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in;
    }


    .dropdown-content .car-item {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 310px;
        padding: 5px;
        color: white;
    }

    .dropdown-content .car-item img {
        max-width: 200px
    }

    .comemora60-anos {
       padding-top: 1.5rem;

    } 


    .dropdown-content .buttons {
        margin-top: 10px;
    }

    .dropdown-content .buttons button {
        background-color: transparent;
        text-decoration: underline;
        font-family: "DM sans", sans-serif;
        text-underline-offset: 0.2em;
        color: #666666;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        transition: transform 0.3s;

    }

    .buttons .mustang-comemoracao{
        background-color: transparent;
        text-decoration: underline;
        font-family: "DM sans", sans-serif;
        text-underline-offset: 0.2em;
        color: #666666;
        border: none;
        cursor: pointer;
        transition: transform 0.3s;
        display: flex;
        justify-content: center;
        text-align: center;
        margin-left: 1rem;
        margin-right: 1.5rem;
        font-size: 13px ;

    }

    .alinha-simbolo{
        display: flex;
        justify-content: center;
        text-align: center;
        padding-left: 8px;
    }

    .buttons .mustang-comemoracao:hover{
        color: #000000;
        transform: scale(1.0)
    }

    .dropdown-content .buttons button:hover {
        color: #000000;
        transform: scale(1.0)
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        transition: .50s;
        background-color: #eeeeee;
        border-radius: 5px;
        transform: scale(1.0)
    }

    .font-1960 {
        font-family: "Noto Sans", sans-serif;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-1970 {
        font-family: "Lobster Two", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1rem;
    }

    .font-1980 {
        font-family: "Space Grotesk", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-1990 {
        font-family: "Patrick Hand", cursive;
        font-weight: 500;
        font-style: normal;
        font-size: 1rem;
    }

    .font-2000 {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-2010 {
        font-family: "Roboto", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-2020 {
        font-family: "Work Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }
}

@media screen and (min-width: 1378px) and (max-width: 1417px) {

    .buttons {
        display: flex;
        gap: 10px;
    }

    body,
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    h3 {
        color: #000000;

    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropbtn {
        background-color: transparent;
        color: #000000;
        font-size: 1rem;
        font-family: NeueHaas, sans-serif;
        padding: 5px;
        border: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        transition: transform 0.3s;
    }

    .dropdown-content {
        display: none;
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        height: 35vw;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        overflow: auto;
        padding-top: 60px;
        z-index: -1;
        animation-name: animacao;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in;
    }

    .dropdown-content .car-item {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 340px;
        padding: 5px;
        color: white;
    }

    .dropdown-content .car-item img {
        max-width: 200px
    }

    .comemora60-anos {
        padding-top: 1.5rem;

    }

    .dropdown-content .buttons {
        margin-top: 10px;
    }

    .dropdown-content .buttons button {
        background-color: transparent;
        text-decoration: underline;
        font-family: "DM sans", sans-serif;
        text-underline-offset: 0.2em;
        color: #666666;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        transition: transform 0.3s;

    }

    .buttons .mustang-comemoracao{
        background-color: transparent;
        text-decoration: underline;
        font-family: "DM sans", sans-serif;
        text-underline-offset: 0.2em;
        color: #666666;
        border: none;
        cursor: pointer;
        transition: transform 0.3s;
        display: flex;
        justify-content: center;
        text-align: center;
        margin-left: 1.2rem;
        font-size: 13px ;

    }

    .alinha-simbolo{
        display: flex;
        justify-content: center;
        text-align: center;
        padding-left: 8px;
    }

    .buttons .mustang-comemoracao:hover{
        color: #000000;
        transform: scale(1.0)
    }

    .dropdown-content .buttons button:hover {
        color: #000000;
        transform: scale(1.0)
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        transition: .50s;
        background-color: #eeeeee;
        border-radius: 5px;
        transform: scale(1.0)
    }

    .font-1960 {
        font-family: "Noto Sans", sans-serif;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-1970 {
        font-family: "Lobster Two", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1rem;
    }

    .font-1980 {
        font-family: "Space Grotesk", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-1990 {
        font-family: "Patrick Hand", cursive;
        font-weight: 500;
        font-style: normal;
        font-size: 1rem;
    }

    .font-2000 {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-2010 {
        font-family: "Roboto", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-2020 {
        font-family: "Work Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }
}

@media screen and (min-width: 1418px) and (max-width: 1440px) {

    .buttons {
        display: flex;
        gap: 10px;
    }

    body,
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    h3 {
        color: #000000;

    }

    .dropdown {
        position: relative;
        display: inline-block;
        transition: 3s;
    }

    .dropbtn {
        background-color: transparent;
        color: #000000;
        font-size: 1rem;
        font-family: NeueHaas, sans-serif;
        padding: 5px;
        border: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        transition: transform 0.3s;
    }

    .dropdown-content {
        display: none;
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        height: 45vw;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        overflow: auto;
        padding-top: 100px;
        z-index: -1;
        animation-name: animacao;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
        transition: 3s;
    }

    .dropdown-content .car-item {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 350px;
        padding: 5px;
        color: white;

    }

    .dropdown-content .car-item img {
        width: 15vw;
    }

    .comemora60-anos {
        padding-top: 1.5rem;

    }


    .dropdown-content .buttons {
        margin-top: 10px;
    }

    .dropdown-content .buttons button {
        background-color: transparent;
        text-decoration: underline;
        font-family: "DM sans", sans-serif;
        text-underline-offset: 0.2em;
        color: #666666;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        transition: transform 0.3s;

    }


    .dropdown-content .buttons button:hover {
        color: #000000;
        transform: scale(1.0)
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }


    .dropdown:hover .dropbtn {
        transition: .50s;
        background-color: #eeeeee;
        border-radius: 5px;
        transform: scale(1.0)
    }

    .comemora60-anos img{
      padding-top: 1.5rem;
    }


    .font-1960 {
        font-family: "Noto Sans", sans-serif;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-1970 {
        font-family: "Lobster Two", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1rem;
    }

    .font-1980 {
        font-family: "Space Grotesk", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-1990 {
        font-family: "Patrick Hand", cursive;
        font-weight: 500;
        font-style: normal;
        font-size: 1rem;
    }

    .font-2000 {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-2010 {
        font-family: "Roboto", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-2020 {
        font-family: "Work Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {

    .buttons {
        display: flex;
        gap: 10px;
    }

    body,
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    h3 {
        color: #000000;

    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropbtn {
        background-color: transparent;
        color: #000000;
        font-size: 1rem;
        font-family: NeueHaas, sans-serif;
        padding: 5px;
        border: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        transition: transform 0.3s;
    }

    .dropdown-content {
        display: none;
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        height: 35vw;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        overflow: auto;
        padding-top: 60px;
        z-index: -1;
        animation-name: animacao;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in;
    }

    .dropdown-content .car-item {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 450px;
        padding: 5px;
        color: white;

    }

    .dropdown-content .car-item img {
        width: 15vw;
    }

    .comemora60-anos {
        padding-top: 1.5rem;

    }


    .dropdown-content .buttons {
        margin-top: 10px;
    }

    .dropdown-content .buttons button {
        background-color: transparent;
        text-decoration: underline;
        font-family: "DM sans", sans-serif;
        text-underline-offset: 0.2em;
        color: #666666;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        transition: transform 0.3s;

    }


    .dropdown-content .buttons button:hover {
        color: #000000;
        transform: scale(1.0)
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }


    .dropdown:hover .dropbtn {
        transition: .50s;
        background-color: #eeeeee;
        border-radius: 5px;
        transform: scale(1.0)
    }

    .comemora60-anos img{
      padding-top: 1.5rem;
    }


    .font-1960 {
        font-family: "Noto Sans", sans-serif;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-1970 {
        font-family: "Lobster Two", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1rem;
    }

    .font-1980 {
        font-family: "Space Grotesk", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-1990 {
        font-family: "Patrick Hand", cursive;
        font-weight: 500;
        font-style: normal;
        font-size: 1rem;
    }

    .font-2000 {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-2010 {
        font-family: "Roboto", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-2020 {
        font-family: "Work Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }
}

@media screen and (min-width: 1920px) {

    .buttons {
        display: flex;
        gap: 10px;
    }

    body,
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    h3 {
        color: #000000;

    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropbtn {
        background-color: transparent;
        color: #000000;
        font-size: 1rem;
        font-family: NeueHaas, sans-serif;
        padding: 5px;
        border: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        transition: transform 0.3s;
    }

    .dropdown-content {
        display: none;
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        height: 35vw;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        overflow: auto;
        padding-top: 60px;
        z-index: -1;
        animation-name: animacao;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in;
    }

    .dropdown-content .car-item {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 450px;
        padding: 5px;
        color: white;

    }

    .dropdown-content .car-item img {
        width: 15vw;
    }

    .comemora60-anos {
        padding-top: 1.5rem;

    }


    .dropdown-content .buttons {
        margin-top: 10px;
    }

    .dropdown-content .buttons button {
        background-color: transparent;
        text-decoration: underline;
        font-family: "DM sans", sans-serif;
        text-underline-offset: 0.2em;
        color: #666666;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        transition: transform 0.3s;

    }


    .dropdown-content .buttons button:hover {
        color: #000000;
        transform: scale(1.0)
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }


    .dropdown:hover .dropbtn {
        transition: .50s;
        background-color: #eeeeee;
        border-radius: 5px;
        transform: scale(1.0)
    }

    .comemora60-anos img{
      padding-top: 1.5rem;
    }


    .font-1960 {
        font-family: "Noto Sans", sans-serif;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-1970 {
        font-family: "Lobster Two", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1rem;
    }

    .font-1980 {
        font-family: "Space Grotesk", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-1990 {
        font-family: "Patrick Hand", cursive;
        font-weight: 500;
        font-style: normal;
        font-size: 1rem;
    }

    .font-2000 {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-2010 {
        font-family: "Roboto", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
    }

    .font-2020 {
        font-family: "Work Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }
}

@media screen and (min-width: 0px) and (max-width: 1100px) {

    .dropdown,
    .dropdown-content,
    .dropbtn,
    .menu-navegacao {
        display: none;
    }
}


@keyframes animacao {
    0% {
        margin-top: -50px;
        opacity: 0;
    }
    10% {
        opacity: 0.1;
    }
    20% {
        opacity: 0.2;
    }
    30% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.5;
    }
    60% {
        opacity: 0.6;
    }
    70% {
        opacity: 0.7;
    }
    80% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.9;
    }
    100% {
        margin-bottom: 0;
        opacity: 1;
    }
}

/* TO-DO: Responsividade de conteúdo de DROPDOWN */