html{
    font-size: 14px;
    font-family: Arial, sans-serif;
}
.container{
    display: grid;
    grid-gap: 10px;
    grid-template-areas:
        "A A A A"
        "B B B B"
        "C C C C"
        "D E F G"
        "H H H H"
        "I J L M"
        "N N N N";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    
}

#A{
    background-image: linear-gradient(to bottom right, #6d6d6d,#000409);
    grid-area: A;
    height: 120px;
    border-radius: 5px;
}

#B{
    background-color: #000;
    grid-area: B;
    height: 500px;
    border-radius: 10px;
    background:  url("../_imagens/menu_rodoviario.jpg") no-repeat center;
    background-size: cover;
    
}

#B p{
    position: relative;
    margin-top: 380px;
    text-align: center;
    background-color: #dc9000;
    height: 10%;
    width: 100%;
    opacity: 80%;
    font-size: 2em;
    color: #fff;
   
}

#C{
    /*background-color: #6fc27c;*/
    grid-area: C;
    height: 50px;
    border-radius: 10px;
}

#C h2{
    font-size: 2em;
    color: #000;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
}

#D{
    background-color: #000;
    grid-area: D;
    height: 350px;
    border-radius: 10px;
    background:  url("../_imagens/Fundo_01.jpg") no-repeat center;
    background-size: cover;
}

#E{
    background-color: #000;
    grid-area: E;
    height: 350px;
    border-radius: 10px;
    background:  url("../_imagens/Fundo_01.jpg") no-repeat center;
    background-size: cover;
}

#F{
    background-color: #000;
    grid-area: F;
    height: 350px;
    border-radius: 10px;
    background:  url("../_imagens/Fundo_01.jpg") no-repeat center;
    background-size: cover;
}

#G{
    background-color: #000;
    grid-area: G;
    height: 350px;
    border-radius: 10px;
    background:  url("../_imagens/Fundo_01.jpg") no-repeat center;
    background-size: cover;
}

#H{
    background-color: #fff;
    grid-area: H;
    height: 50px;
    border-radius: 10px;
}

#H h2{
    font-size: 2em;
    color: #000;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
}

#I{
    background-color: #000;
    grid-area: I;
    height: 350px;
    border-radius: 10px;
}

#J{
    background-color: #000;
    grid-area: J;
    height: 350px;
    border-radius: 10px;
}

#L{
    background-color: #000;
    grid-area: L;
    height: 350px;
    border-radius: 10px;
}

#M{
    background-color: #000;
    grid-area: M;
    height: 350px;
    border-radius: 10px;
}

#N{
    background-color: #000;
    grid-area: N;
    height: 500px;
    border-radius: 10px;
    
    background:  url("../_imagens/Telemarketing.jpg") no-repeat center;
    background-size: cover;
}

.imgN{
    position: relative;
    margin-top: 350px;
    text-align: center;
    background-color: #000;
    height: 20%;
    width: 100%;
    opacity: 80%;
    color: #fff;
}

.imgN p{
    font-size: 2em;
    margin: 10px;
}

.imgN h1{
    font-size: 1em;
    margin: 5px;
}

/* Copiado do Nibdex */
#menu{
    /*position: fixed;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
}

#menuImg{
    display: hidden; /*flex*/
    flex-direction: column;
    margin-top: 10px;
    height: 60px;
    width: 300px;
}

#menuImg{
    background:  url("../_imagens/escalante.png") no-repeat center;
    background-size: cover;
}

#nmenu{
    overflow: hidden;
    background-color: #202224;
    position: relative;
    top:0px;
    left: 500;
    width: 100%;
    height: 45px;
    
}

#nmenu ul{
    align-items: center;
    margin: 10px;
}

#menu a{
    float: right;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
    font-style: normal;
    font-family: sans-serif;
    background-color: #202224;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: 12px;
}

#menu a:hover{
    background-image: linear-gradient(to bottom right, #744a00,#dc9000);
    color: #000409;
}

ul{
    list-style: none;
    display: flex;
    align-items: center;
    height: 50%;
    margin: 0;
}

li{
    margin-right: 1px;
}

a{
    color: #fff;
}

.CaixaLista{
    display: inline-block;
    background-image: linear-gradient(#744a00,#dc9000);    
    margin: 8px;
    vertical-align: middle;
}

.CaixaLista h1{
    color: #fff;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 25px;
    text-height: 15px;
}

.CaixaLista h2{
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    /*text-shadow: #6d6d6d 1px 2px 1px;*/
    font-size: 250%;
    text-align: center;
    margin-bottom: 5px;
}

.CaixaLista li{
    color: #fff;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 2px;
    list-style-type: none;
}

/* Alterando Tamanho da Tela*/
@media only screen and (max-width: 480px){
    .container{
        display: grid;
        grid-gap: 10px;
        grid-template-areas:
            "A A A A"
            "B B B B"
            "C C C C"
            "D D D D"
            "E E E E"
            "F F F F"
            "G G G G"
            "H H H H"
            "I I I I"
            "J J J J"
            "L L L L"
            "M M M M"
            "N N N N";
        grid-template-columns: 1fr 1fr 1fr 1fr;
        }

    #B p{
        position: relative;
        margin-top: 380px;
        text-align: center;
        background-color: #dc9000;
        height: 10%;
        width: 100%;
        opacity: 80%;
        font-size: 1em;
        color: #fff;
    }

    #C h2{
        font-size: 1em;
        color: #000;
        text-align: center;
        vertical-align: middle;
    }

    #H h2{
        font-size: 1em;
        color: #000;
        text-align: center;
        vertical-align: middle;
    }

}