@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap');  

/*  TERMINAL ADMINISTRADOR   */

.card:hover, .card1:hover, .card2:hover, .card3:hover{
    animation: card 1s ease-out forwards;
}

.card{
    transform: scale(1.1);
    background: #333;
    box-shadow: 0px 0px 1vw #000;
    margin-top: 6vw;
    width: 20vw;
    height: 36vw;
    border-radius: 1vw;
}

#maisinformacoes{
    padding-top: 15vw; 
    padding-bottom: 8vw;
    transform: scale(0.7);
    margin-top: -20vw;
    margin-bottom: -22vw;
}

#imagemProduto{
    width: 87%;
    margin-top: 9vw;
}

#detalhesProduto{
    margin: 3vw;display: flex;flex-direction: column;align-items: center;width: 82vw;height:71vw;border-radius: 2%;background-color: #333333;box-shadow: 0px 0px 10px #000000
}

#detalhesProduto object{
    height: 13vw;
}

#detalhesProduto h2{
    font-size: 20px;
}

#detalhesProduto h3{
    font-size: 25px;
}

#subtitleCatalogo{
    font-size: 15px
}

#informacoes{
    font-size: 5vw;
}

#veiculoMobile{
    flex-direction: column;
    align-items: center;
}


.item10{ grid-area: header;}
.item20{ grid-area: header;}
.item30{ grid-area: left;}
.item40{ grid-area: right;}
.item50{ grid-area: footerLeft;}
.item60{ grid-area: FooterRight;}



#thumbnail, #thumbnail0, #thumbnail1, #thumbnail2, #thumbnail3{
    border-radius: 1vw;
    transform: scale(0.95);
    width: 100%;
    height: 15vw;
    margin-top: 0.2vw;
    box-shadow: 0px 0px 1vw #111;
}

.cardHeader{
    font-size: 0.9vw;
    color: #FFF;
    text-align: center;
}

.cardSvg{
    margin: auto;
    color: #FFF;
    display: grid;
    grid-gap: 2vw 4vw;
    transform: scale(0.85);
}

#marcaCards{
    transform: scale(1.7);
    flex-flow: wrap; display: flex; margin-top: -34vw; margin-bottom: -27vw; justify-content: space-evenly; padding: 2vw;
}

#catalogoCards{
    transform: scale(1.7);
    flex-flow: wrap; display: flex; margin-top: 24vw; margin-bottom: 25vw; justify-content: space-evenly; padding: 2vw;
}

#catalogoGrid{
    padding: 22vw;
    margin-top: 46vw;
    margin-bottom: 62vw;
}

#cards{
    align-items: center;
    transform: scale(1.7);
    flex-flow: wrap;
    display: flex;
    margin-top: 31vw;
    margin-bottom: 31vw;
    justify-content: space-evenly;
    padding: 3vw;
}

#item10{
    font-size: 0.9vw;
}

.cardBody{
    margin: auto;
    color: #FFF;
    display: grid;
    grid:
    'header header footerLeft'
    'left right footerRight';
    text-align: center;
    grid-gap: 5vw 4.5vw;
    transform: scale(0.80);
    margin-top: -6.5vw;
}

.cardBody h3{
    font-size: 0.8vw;
}

.cardMain object{
    height: 4vw;
}

.cardFooter{
    display: flex;
    justify-content: space-evenly;
    margin-top: 1vw;
}

.btn{
    background: #ff5500;
    border: none;
    color: #FFF;
    border-radius: .3vw;
    height: 2.5vw;
    width: 7vw;
    font-size: 1vw;
}

.btnOutline{
    background: transparent;
    stroke-width: 8vw;
    border-color: #FF5500;
    color: #FFF;
    border-radius: .3vw;
    height: 2.5vw;
    width: 7vw;
    font-size: 0.8vw;
}

.btn:hover, .btnOutline:hover{
    transform: scale(1.05);
}

/*-------------------------*/

.Escolhas{
        align-self: center;
        margin-left: 47%; 
        margin-top: 15%;  
}

#Novo{
    display: none;
}



.Escolhas ul{
    text-align: center;
    padding-top: 30%;
}

.Escolhas div{
    background-color: #333;
    width: 600px;
    height: fit-content;
    margin-left: -23%;
    border-radius: 15px;

}

.Escolhas h1{
    margin-left: -330px;
    margin-top: -150px;
    padding-bottom: 120px;
    font-size: 450%;
    

}

.Escolhas h2{
    font-size: 200%;
    margin-left: 17%;
    padding-top: 50px;
}


#escolhasTerminal{
    align-self: center;
    font-weight: bold;
    font-size: 25px;
    background-color: #444;
    color: #FFF;
    border: none;
    border-radius: 10px;
    padding: 25px;
    min-height:30px; 
    min-width: 150px;
    margin-left: 15px;
    transform: translate(0%,-150%);
}

#escolhasTerminal:hover{
    background-color: #555;
}

#Novo ul{
    padding-top: 0%;
    margin: -2%;
    padding-left: 10%;
    padding-right: 10%;
    justify-content: space-between;
    display: flex;
    }

#Novo h2{
    padding-left: 10%;
    padding-bottom: 5%;
    padding-top: 20px;
}

#adicionar{
    color: #DDD;
    
}

#voltarButton{
    color: #000;
    background-color: #efefef;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    border: #333;
    border-radius: 2px;
    border-width: 10%;
    width: 10%;
    transform: translate(0%, -20%) scale(1.50, 1.50);
    margin-bottom: -10%;
}

#submitButton{
    color: #000;
    background-color: #efefef;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    border: #333;
    border-radius: 2px;
    border-width: 10%;
    width: 10%;
    transform: translate(0%, -20%) scale(1.50, 1.50);
    margin-bottom: -10%;
    
}




/*  TERMINAL ADMINISTRADOR   */

html::-webkit-scrollbar {
    width: 1vw;
} 
html::-webkit-scrollbar-thumb {
    background-color: rgba(50, 50, 50, 0.5)
}
html::-webkit-scrollbar-track {
    background-color: rgba(25, 25, 25, 0.5)
}
html::-webkit-scrollbar-thumb:hover {
    background-color: rgba(60, 60, 60, 0.5);
    
}
html::-webkit-scrollbar-track:hover {
    background-color: rgba(35, 35, 35, 0.5)
}  
*{
    
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

h1{
    font-size: 11vw;
    line-height: 3vw;
    color: #fff;
}

h2{
    font-size: 6vw;
    line-height: 10.5vw;
    color: #fff;
}

h4{
    font-size: 1.5vw;
    color: #fff;
}

hr{
    animation: hrAnimation 10s ease infinite;
}

@keyframes hrAnimation {
    0%{
        color: #777;
        background-color: #777;
        filter: drop-shadow(0px 0px 0.2vw #777);
    }
    33%{
        color: gray;
        background-color: #333;
        filter: drop-shadow(0px 0px 0.2vw #333);
    }
    66%{
        color: #555;
        background-color: #555;
        filter: drop-shadow(0px 0px 0.2vw #555);
    }
    100%{
        color: #777;
        background-color: #777;
        filter: drop-shadow(0px 0px 0.2vw #777);
    }
}


.section-p1{
    padding: 40px 80px;
}

.section-m1{
    padding: 40px 0px;
}

body{
    width: 100%;
    background-color: rgb(30,30,30);
}

/* Logo Style and animation */

#orange{
    fill: transparent;
    box-shadow: 0px 2vh 1vh #333;
    animation: fillO 0.5s ease forwards 2.5s;
}

#white{
    fill: transparent;
    box-shadow: 0vh 2vh 1vh #333;
    animation: fillW 0.5s ease forwards 2.5s;
}

#logo{
    display: none;
}

#logoMobile{
    display: block;
    top: 50%;
    left: 50%;
    width: 100vw;
    z-index: 3;
    position: fixed;
    justify-self: center;
    transform: translateX(-50%) translateY(-50%);
    animation: logoHeader 1.5s ease forwards 3.5s;
}

#logoMobile svg{

    fill: transparent;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-dasharray: 800;
    stroke-dashoffset: 500;
    animation: line-anim 3s ease forwards, shadowFlash 3s infinite alternate-reverse;
}

@keyframes shadowFlash{
    to{
        filter: drop-shadow(0px 0px 2vh #000);
    }
}

@keyframes line-anim{
    to{
        stroke-dashoffset: 0;
    }
}

@keyframes logoHeader{
    to{
        top: 10vw;
        width: 35vw ;
    }
}

@keyframes fillO{
    to{
        fill: #FF5500;
        stroke-opacity: 0;
    }
}

@keyframes fillW{
    to{
        fill: #FFFFFF;
        stroke-opacity: 0;
    }
}

/* header ~ navbar style */

.topnav {
    background-color: #333;
    position: relative;
    right: 4vw;
  }
  
  .topnav #myLinks {
    margin-top: 12%;
    border-radius: 2vw;
    box-shadow: 0vw 0vw 10px #333;
    background-color: #333;
    display: none;
  }
  
  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  
  .topnav a.icon {
    display: block;
    position: absolute;
    right: 0;
    top: 12%;
  }
  
  .active {
    background-color: #333;
    color: white;
  }

#header{
    height: 5vh;
    padding-bottom: 5vw;
    display: flex;
}

#navbar{
    
    z-index: 3;
    box-shadow: 0px 4px 10px rgba(10,10,10,10);
    height: 15vw;
    top: 0px;
    background: none;
    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    background-color: #333;

}

#navbarItemsRight{
    display: none;
}

#navbarItemsLeft{
    display: none;
}

#navbar li{
    list-style: none;
    background: none;
    position: relative;
}

#navbarItemsLeft a, #navbarItemsRight a{
    background: none;
    text-decoration: none;
    font-size: 1vw;
    font-weight: 500;
    color: #777;
    transition: 1.5s ease-in-out;
    animation: navbarStart 1.5s ease forwards 0.5s;
    
}

#navbarItemsLeft a:hover, #navbarItemsRight a:hover, #navbarItemsLeft a.active:hover, #navbarItemsRight a.active:hover{
    animation: navbarHover 1s ease-in-out forwards;
}

@keyframes navbarStart{
    to{
        color: #FFF;
    }
}

@keyframes navbarHover{
    to{
        font-weight: bolder ;
        color: #FF5500;

    }

}

/* Home Page */

    /* Hero */

    #hero{
        z-index: 1;
        opacity: 0.1;
        animation: fadeIn 4s ease forwards 3.5s;
        width: 100%;
        height: 80vh;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        background-position-y: -20vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .slideshowContainer{
        position: relative;
        margin: auto;
    }

    .myHeroSlide{
        display: none;
    }

    .hexagon{
        stroke: #FFF;
        stroke-width: 6;
        fill: rgba(25, 25, 25, 0.4);
        stroke-dasharray: 600px;
        stroke-dashoffset: 1200px;
        animation-name: line-anim;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction:normal;
    }

    .hexagonGroup{
        margin-top: 30vw;
        display: flex;
        justify-content: center;
        transform: scale(0.20);
    }

    .hexagonGroup span{
        width: fit-content;
        height: fit-content;
        filter: drop-shadow(0 0 1vw #111);
    }
    
    .hexagon.active, .hexagon:hover{
        fill: #666666FF;
    }


    @keyframes fadeIn {
        0%{
            opacity: 0.1;
            position: static;
        }

        75%{
            opacity: 0.7;
            position: static;
        }

        100%{
            opacity: 1;
            position: static;
        }
    }

    @keyframes fadeInOut {
        0%{
            opacity: 1;
        }

        50%{
            opacity: 0.4;
        }

        100%{
            opacity: 1;
        }
    }

    

    /* Contato */

    #quemsomos{
        padding: 5vw;
        font-size: 4vw;
    }

    #quemsomos p{
        margin-top: 10vw;
    }

    #imgquemsomos{
        width: 84vw; 
        height: 100%; 
        border-radius: 2vw;
        margin-top: 4vw;
    }

    #Contato{
        text-shadow: 0px 1px 1px #000;
        width: 97.8%;
        height: 21vh;
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        
    }

    #contatoDiv{
        transform: scale(1.4);
    }

    #contactGroup h3{
        color: #DDD;
        text-align: center;
        margin-top: 7%;
        font-size: 2.2vw;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #contactGroup div{
        text-align: center;
        width: 17vw;
        height: 6vw;
        border: 0.3vw solid #ddd;
        border-radius: 0.5vw;
        filter: drop-shadow(0px 1px 1px #000);
    }

    #contactGroup{
        padding-top: 5vw;
        display: flex;
        justify-content: space-between;
        width: 41vw;
    }

    #contactGroup div:hover{
            animation: contactGroup 2s ease forwards;
    }

    #contactGroup div:hover h3{
        animation: colorChange 2s ease forwards;
    }

    @keyframes colorChange{
        to{
            color: #FF5500;
        }
    }

    @keyframes contactGroup{
        to{
            border-color: #FF5500;
            width: 11vw;
            filter: drop-shadow(0px 3px 3px #000);
        }
    }

    /*  BOTOES DE CONTATO CANTO DA TELA  */

    #whatsappButton{
        align-items: center;
        position: fixed;
        background-color: #555;
        border: 0ch;
        padding: 0;
        border-radius: 100%  ;
        width: 7vh;
        height: 7vh;
        top: 85vh;
        right: 1vh;
        box-shadow: 0 0.5vh 0.5vh rgba(0,0,0,0.25);
    }
    
    #whatsapp{
        transform: translate(-3%, 2%) scale(1.60);
        fill: transparent;
        stroke-width: 10;
        stroke:  white;
        stroke-dasharray: 2000 ;
        stroke-dashoffset: 2000;
        animation-name: line-animLoading;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    
    }
    
    #whatsappButton:hover, #instagramButton:hover{
        animation: buttonsWAPPINS 1s ease-in-out forwards;
    }
    
    #whatsapp:hover{
        stroke: #FF5500;
        stroke-width: 20;
    }
    
    
    #instagram:hover{
        stroke: #FF5500;
        stroke-width: 30;
    }
    
    
    #instagramButton{
        position: fixed;
        background-color: #555;
        border: 0ch;
        padding: 0;
        border-radius: 100%  ;
        width: 7vh;
        height: 7vh;
        top: 85vh;
        right: 10vh;
        box-shadow: 0 0.5vh 0.5vh rgba(0,0,0,0.25);
    }
    
    #instagram{
        transform: translate(-1%,1% ) scale(1);
        fill: transparent;
        stroke-width: 15;
        stroke:  white;
        stroke-dasharray: 2500;
        stroke-dashoffset: 2500;
        animation-name: line-animLoading;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes buttonsWAPPINS{
        to{
            background-color: #444;
            box-shadow: 0 0.5vh 0.5vh #000;
            transform: scale(1.05);
        }
    }

    @keyframes line-animLoading{
        to{
            stroke-dashoffset: 0;
        }
        
        
    }
        

    /*      SEÇÃO DE MARCAS E VEICULOS HOME        */

    #marcas h2{
        text-align: center;
        margin-top: 1vw;
        text-shadow: 0px 1px 1px #000;
        
    }

    #botoesMarcas{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin: 3vw;
        margin-top: 14vw;
        margin-bottom: 14vw;
    }

    #motos{
        z-index: 2;
        width: 20%;
        height: 20%;
        background-color: transparent;
        border: none;
    }

    #carros{
        z-index: 2;
        width: 20%;
        height: 20%;
        background-color: transparent;
        border: none;
    }

    #carros svg{
        transform: scale(2.2);
    }


    #motos:hover #farolMoto{
        animation: farol 2s ease forwards;
        
    }

    @keyframes farol{
        0%{
            fill: none;
        }

        24%{
            fill:none;
        }

        25%{
            fill: #FFFFFF80;
            filter: drop-shadow(0px 0px 50px #FFF);
        }

        40%{
            fill: none;
            filter: drop-shadow(0px 0px 50px #111);
        }

        49%{
            fill: #FFFFFF;
            filter: drop-shadow(0px 0px 50px #fff);
        }
        
        60%{
            fill: #fff;
            filter: drop-shadow(0px 0px 50px #fff);
        }

        100%{
            fill: #fff;
            filter: drop-shadow(0px 0px 50px #fff);
        }
    }


    #motos:hover #moto{
        animation: moveUp 2s ease forwards;
    }

    @keyframes moveUp{

        0%{
            transform: translateY(0vw);
        }

        25%{
            transform: translateY(1vw);
        }
    }

    #carros:hover #farolCarro{
        animation: farol 2s ease forwards;
        
    }

    #farolCarro{
        fill: none;
        stroke: #FFF;
        stroke-width: 6;
    }


    #carros:hover #carroceria{
        animation: moveUp 2s ease forwards;
    }

    /* Marca de motos, animação */

    @keyframes motoOn {
        to{
            
        }
    }

    @keyframes motoOff {
        
    }


/*  Marcas Carro  */

#Audi path{
    transform: scale(1.50) translateY(12%);
}

#Volkswagen path{
    transform: scale(3.00) translateY(5%);
}

#Volkswagen svg{
    width: fit-content;
    height: fit-content;
}

#marcasCarros svg{  
    height: 30.5vw;
    width: 30.5vw;
    justify-self: center;
    fill: white;
    filter:drop-shadow(2px 2px 2px #000);
}

#Peugeot path{
    animation: changinColor 5s infinite forwards;
    fill: white;
}

#marcasCarros div{
    transform: scale(0.7);
    justify-content: center;
    padding: 1vw;
}

#marcasCarros{
    display: none;
    flex-wrap: wrap;
    padding: 0%;
    justify-content: center;
    margin-top: -60vw;
}

@keyframes marcasCarrosOn{
    0%{
        opacity: 0;
        transform: scale(0.1);
        margin-top: -20vw;
    }

    100%{
        opacity: 1;
        transform: scale(1);
        margin-top: 0vw;
    }
}

@keyframes marcasCarrosOff{
    0%{
        opacity: 1;
        transform: scale(1);
        margin-top: 0vw;
    }

    100%{
        opacity: 0;
        transform: scale(0.1);
        margin-top: -20vw;
    }
}

#Audi:hover{
    filter: brightness(0.5);
}

#BMW:hover{
    filter: brightness(0.5);
}

#Chevrolet:hover{
    filter: brightness(0.5);
}

#Dodge:hover{
    filter: brightness(0.5);
}

#Fiat:hover{
    filter: brightness(0.5);
}


#Ford:hover{
    filter: brightness(0.5);
}


#Honda:hover{
    filter: brightness(0.5);
}


#Jeep:hover{
    filter: brightness(0.5);
}


#LandRover:hover{
    filter: brightness(0.5);
}


#Nissan:hover{
    filter: brightness(0.5);
}


#Peugeot:hover #Peugeot1{
    filter: brightness(0.5);
}


#Toyota:hover{
    filter: brightness(0.5);
}

#Volkswagen:hover{
    filter: brightness(0.5);
}

#BMWmoto:hover{
    filter: brightness(0.5);
}

#ecoMoving:hover{
    filter: brightness(0.5);
}



/*  Marcas de motos   */

#marcasMotos div{
    transform: scale(0.7);
    justify-content: center;
    padding: 1vw;
}

#marcasMotos{
    display: none;
    flex-wrap: wrap;
    padding: 0%;
    justify-content: center;
}

#motos svg{
    transform: scale(2);
}

#marcasMotos svg{
    height: 30.5vw;
    width: 30.5vw;
    fill: white;

}

#ecoMoving svg{
    width: 100%;
}

#BMWmoto{
    align-self: center;
}

@keyframes marcasMotosOn{
    0%{
        opacity: 0;
        transform: scale(0.1);
        margin-top: -7vw;
    }   

    100%{
        opacity: 1;
        transform: scale(1);
        margin-top: 5vw;
    }
}

@keyframes marcasMotosOff{
    0%{
        opacity: 1;
        transform:scale(1);
        margin-top: 5vw;
    }

    100%{
        opacity: 0;
        transform: scale(0.1);
        margin-top: -7vw;
    }
}

/* Youtube Shorts */

#ytShorts a{
    display: flex;
    justify-content: center;
    padding-bottom: 10%;
}

#ytShorts h2{
    text-shadow: 0px 1px 1px #000;
    padding-top: 1%;
    text-align: center;
    justify-self: center;
    padding-bottom: 3%;
}

#ytShorts iframe{
    padding: 1%;
    border-radius: 5%;
    width: 42vw;
    height: 73vw;
}

#footer{
    margin-top: 19vw;
    background-color: #333;
    height: fit-content;
    box-shadow: 5px 0px 5px #111;
    align-content: center;
    justify-content: space-evenly;
}

#footerLogo1{
    width: 55vw;
    margin-left: 22.5%;
    transform: translateY(-28vw);
}

#footerLogo{
    width: 57vw;
    margin-left: 22%;
    transform: translateY(-84.8vw);
    filter: drop-shadow(0px 0px 4px #000);
}

#footerLogo1 svg{
    stroke-width: 11vw;
    stroke: #333;
}

#footerCentral{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -76%;
    filter: drop-shadow(0px 0px 1px #222);
    text-shadow: 0px 0px 1px #222;
}

#footerRight{
    filter: drop-shadow(0px 0px 1px #222);
    text-shadow: 0px 0px 1px #222;
}

#footer h3{
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: #DDD;
    text-shadow: 0px 0px 2px #000;
}

#footerSocial{
    display: flex;
   justify-content: center;
    padding-top: 3%; 
    padding-bottom: 5%;
}

#footerInstagram{
    width: 13vw;
}

#footerTiktok{
    padding-left: 2vw;
    width: 9vw;
    margin-top: 2vw;
}

#footerTiktok svg{
    fill: #DDD;
}

#footerTiktok:hover svg{
    fill: #FF5500;
}

#footerInstagram svg{
    fill: transparent;
    stroke: #ddd;
    stroke-width: 10vw;
}

#footerYoutube svg{
    fill: #DDD;
    margin-top: 8%;
}


#footerYoutube{
    width: 13vw;
}

#footerInstagram:hover svg{
    stroke: #FF5500;
}

#footerYoutube:hover svg{
    fill: #ff5500;
}

#luizpdesign{
    width: 27vw;
    z-index: -1;
}

#luizpdesign h5{
    font-size: 2.6vw;
}

#footerCenter{
    margin-bottom: 5vw;
    margin-top: 11vw;
    align-content: center;
    text-align: center;
}

#footerLeft h3{
    padding-bottom: 1vw;
}

.mapouter{
    filter: invert(85%) hue-rotate(190deg) saturate(150%);
}

.gmap_canvas{
    border-radius: 1vw;
    filter: drop-shadow(0px 0px 0.5vw #EEE);
}


#footerLeft{
    display: flexbox;
    align-content: center;
    margin-top: -14vw;
    text-align: center;
}

#footerRight{
    display: flex;
    justify-content: center;
    text-align: center;
}

#luizpdesign:hover h5, #luizpdesign:hover svg{
    color: #DDD;
    fill: #DDD;
}


#luizpdesign h5, #luizpdesign svg{
    color: #fff;
    fill: #FFF;
}

#footerFoot{
    display: flexbox;
    width: 100%;
    justify-self: center;
    padding-bottom: .8vw;
}

#footerFoot h3, #footerFoot hr{
    display: flex;
    justify-content: center;
}

#footerFoot h3{
    margin-top: 2%;
}

#footerFoot hr{
    width: 30%;
    margin-left: 35.5%;
    margin-top: 0.5%;
}

#footerMap{
    margin-top: 0.5vw;
    display: flex;
    justify-content: center;
}

#footerMap a{
    color: #999;
}

#footerMap a:hover{
    color: #fff;
}


.mapouter{position:relative;text-align:right;width:59vw;height:59vw;}.gmap_canvas {overflow:hidden;background:none!important;width:59vw;height:59vw;}.gmap_iframe {height:59vw!important;}