body{
    margin: 0;
    background-image: url(/Site/Media/Images/Fundo/Backgroud-Title.jpg);
    /* background-color: white; */
    background-size: cover;
    background-repeat: repeat-y;
}


.top-page{
    display:flex;
    flex-direction: row;
    background-color: rgba(0, 0, 0, 0.2);
    grid-template-columns: [Logo]170px [Titulo]350px [QuemSomos]150px [Produtos]200px [Contato]100px [Tecnico]140px;
    font-size: 25px; color: rgb(255, 255, 255);
    font-family: Arial;
    align-items: flex-end;
    .minWhoIAm{display: none; font-size: 0;}
    .minWhatDo{display: none;font-size: 0;}
    .minWho{display: none;font-size: 0;}
    .minTeccnical{display: none;font-size: 0;}
    .mintitulo{font-size: 0;}
    
    .top-page .titulo{align-items: center;}
    .WhoIAm{text-align: start;
        padding: 55px 40px 0px 20px;
        margin-left: auto;}
        .WhoIAm:hover{color: #6293ee;
            transition: 0.5s;}
       
    .WhatDo{text-align: center;
        text-size-adjust: auto; 
        padding-top: 55px;
        padding-right: 40px; }
        .WhatDo:hover{color: #6293ee;
            transition: 0.5s;}
        
    .Who{text-align: center; 
        padding-right: 20px;
        display:flexbox;}
        .Who img{width: 25px; height: 25px; vertical-align: bottom;}
        #Numero{font-size: 20px;  margin: 0; color: white; font-family: Arial; text-decoration: none;} 
        #Numero:hover{color: #62eea8; transition: 0.5s;}
        #Contato{margin-bottom: 0px; margin-top: 25px;}
        #Contato:hover{color: #6293ee; transition: 0.5s;}
        
    .Teccnical{text-align: center;
        padding-top: 55px;
        padding-right: 10px;}
        .Teccnical:hover{color: #6293ee;
            transition: 0.5s;}
    }

.logo img{
    max-width: 120px;
}

.titulo{
    font-family: Arial; 
    font-weight: bolder; 
    font-size: 35px;
    padding-bottom: 25px; 
}

.Carrossel{
    margin-inline: auto;
    margin: 20px 0px 20px 0px;
    width: auto;
    height: auto;
    overflow: hidden;
    opacity: 0.9;
}

.Carrossel .Imgs{
    position: relative;
    width: 500%;
    animation: 20s Carrossel infinite;
}

.Carrossel .Imgs img{
    width: 19.9%;
}

.mid-page{
    display:flex;
    flex-flow: column wrap;
    justify-content: center;
    grid-template-columns: [Prod1]450px [Prod2]450px [Prod3]450px [Prod4]450px [Prod5]450px [Prod6]450px;
    height: auto;
    padding-block: 30px 50px;
    background-color: rgb(0, 22, 26, 0.9);
    color: aliceblue;
    text-align: center; font-size: 40px;

}

.Top-produtos{
    font-size: 25px; color: rgb(255, 255, 255);
}

.Top-Produtos img{
    padding-top: 20px;
    max-width: 450px;
    height: 150px;
    padding-inline: 10px;
}


@keyframes Carrossel{
    0% {left: 0%;}
    20% {left: 0%;}
    25% {left: -100%;}
    45% {left: -100%;}
    50% {left: -200%;}
    70% {left: -200%;}
    75% {left: -300%;}
    95% {left: -300%;}
    100% {left: -400%;}
}
.mid-Services{
    background-image: url(/Site/Media/Images/Fundo/Services2.png);
    background-size: cover;
    background-repeat: repeat-y;
    /* background-position: 100%; */

    display: flex;
    flex-flow: row wrap;
    margin-block: 40px;
    padding-block: 20px;
    padding-inline: 20px;
    justify-content: center;
}

.Srv{
    width: 30%; 
    display: flex; 
    flex-flow: row wrap; 
    font-size: 20px; 
    padding-inline: 15px; 
    margin-block: 15px;
    text-align: start;
}

.Srv img{width: 30px; height: 30px; margin-inline: 10px;}
.Srv h3{margin: 0; font-size: 30px;}
.Srv p{font-size: 20px;}


.main-Clientes{
    background-color:white;
    padding: 0px 10% 0px 10%;
    margin: 20px 0px 20px 0px;
    width: auto;

    opacity: 0.9;
    overflow: hidden;
}

.main-Clientes p{text-align: center; margin: 0; padding: 0; font-size: 30px; font-weight: bold;}

.Clientes-pics p{margin: 0; padding: 0;}

.main-Clientes .Clientes-pics{
    position: relative;
    animation: 20s main-Clientes infinite alternate;
    display: flex
}

.main-Clientes .Clientes-pics img{
    max-width: 250px;
    max-height: 100px;
    margin-inline: 20px;
    padding-top: 3px;
}

@keyframes main-Clientes{
    0% {left: -10%;}
    20% {left: -20%;}
    40% {left: -60%;}
    60% {left: -100%;}
    80% {left: -140%;}
    100% {left: -180%;}
}

.Mapa{opacity: 0.9;}

.end-page{padding: 50px 0px 50px 0px;height: auto;}
.endMenu{
    display:flex;
    flex-flow: row;
    background-color: rgb(0, 22, 26, 0.6);
    color: aliceblue;
    margin-inline: 50px;
    
    #endTit1{font-size: 18px; font-weight: bold; margin: 0;} 
    .endCol1{font-size: 24px; display: flex; flex-direction: column; width: 50%;}
    .endCol1 a{margin: 3px 0px 3px 0px; text-decoration: none; color: white; font-size: 15px; padding-left: 10;}
    
    #endTit2{font-size: 18px; font-weight: bold;}
    .endCol2 p{margin: 0;}
    .endCol2{width: 50%; align-items: end; display: flex; flex-direction: column; font-size: 15px;}
}





/* Tela Menor que 1024px - Landscape*/
@media screen and (max-width: 1030px){
    .top-page{max-width: 1024px;}
    .mid-page{max-width: 1024px;}
 }

 /* Tela Menor que 900px - Tablets*/
@media screen and (max-width: 910px){
    .top-page{
        max-width: 900px; 
        font-size:20px;
        #Numero{font-size:10px;}
        .titulo{font-size:30px;}}
    .Carrossel{
        width: 700px;
        height: 152px;
        margin-inline: auto;
        padding-top: 10px;
        padding-bottom: 50px;}
    .mid-page img{max-width: auto;}
}

 /* Tela Menor que 768px - iPad*/
@media screen and (max-width: 775px){
    .top-page{
        max-width: 768px; 
        font-size:15px;
        #Contato{padding-top: 5px;}
        #Numero{font-size:0px;}
        .titulo{font-size:25px;}
        .logo img{max-width: 110px;}}
    .Carrossel{    
        width: 550px;
        height: 152px;
        margin-inline: auto;
        padding: 0;}
    .mid-page{font-size: 40px;}
    .mid-page{max-width: 768px;}
 }

 /* Tela Menor que 720px - Smarts Comuns*/
@media screen and (max-width: 725px){
    .top-page{
        max-width: 720px; 
        font-size:12px;
        #Numero{font-size:0px;}
        .titulo{font-size:20px;}
        .logo img{max-width: 100px;}
        .WhoIAm{padding: 55px 5px 0px 0px;}
        .WhatDo{padding: 55px 5px 0px 0px;}
    }        

    .Carrossel{    
        width: 500px;
        height: 100px;
        margin-inline: auto;
        padding: 0;}
    .mid-page{font-size: 30px;}
    .main-Clientes p{font-size: 30px; font-weight: bold;}
    .mid-page img{
        max-width: 720px;
        max-height: 160px;}

    .Srv{padding-inline: 30px; width: auto;}
    .Srv h3{font-size: 30px;}
    .Srv p{font-size: 20px;}
    .Srv img{width: 25px; height: 25px;}
 }

 /* Tela Menor que 480px - Smart 1Gen*/
@media screen and (max-width: 485px){
    .top-page{
        max-width: 480px; 
        font-size:10px;
        #Numero{font-size:0px;}
        .titulo{font-size:18px;}
        .logo img{max-width: 80px;}
        .WhoIAm{padding: 55px 5px 0px 0px;}
        .WhatDo{padding: 55px 5px 0px 0px;}
    }        

    .Carrossel{    
        width: auto;
        height: 95px;
        margin: 3px 0px 3px 0px;
        padding: 0;}
    .mid-page{font-size: 25px;}
    .main-Clientes p{font-size: 25px; font-weight: bold;}
    .mid-page img{
        max-width: 350px;
        max-height: 100px;
    }

    .main-Clientes .Clientes-pics img{
        max-width: 160px;
        max-height: 80px;
    } 

    @keyframes main-Clientes{
        0% {left: -10%;}
        20% {left: -100%;}
        40% {left: -200%;}
        60% {left: -300%;}
        80% {left: -400%;}
        100% {left: -500%;}
    }

    .endMenu{margin-inline: 5px;}
    .endCol1{padding-inline: 20px;}
    .endCol2{padding-inline: 20px;}

    .Srv{padding-inline: 30px; width: auto;}
    .Srv h3{font-size: 27px;}
    .Srv p{font-size: 18px;}
    .Srv img{width: 25px; height: 25px;}
 }

 /* Tela Menor que 400px - OldfSchool*/
@media screen and (max-width: 400px){
    .top-page{
        max-width: 400px;
        font-size: 12px;
        padding: 0px;
        align-items: start;
        display:flex;
        flex-flow: column;
        .logo{display: flex; flex-flow: row; align-items: center;}
        .minWhoIAm{display:flex;font-size: 10px; text-align: center; padding-inline: 2px; color: white;}
        .minWhoIAm:hover{color: #6293ee; transition: 0.5s;}

        .minWhatDo{display:flex; font-size: 10px; padding-inline: 2px; color: white; text-align: center;}
        .minWhatDo{display:flex; font-size: 10px; padding-inline: 2px; color: white; text-align: center;}

        .logo img{padding-left: 5px; margin-inline: 0px; max-width: 50px;}
        .mintitulo{padding-bottom: 5px; text-align: center; margin-inline: 20px; font-size: 18px; color: white;}
        .minWho{display: flex; flex-flow: column; align-items: center; align-items: center;
            #minContato{font-size: 10px; margin: 0; color: white; text-align: center }
            #minNumero{font-size: 10px; color: white; font-family: Arial; text-decoration: none; text-align: center;}
            #minNumero img{ width: 10px; height: 10px; margin: 0; padding: 0;}
            #minNumero:hover{color: #62eea8; transition: 0.5s;}
            #minContato:hover{color: #6293ee; transition: 0.5s;}
        }

        .minTeccnical{display:flex; font-size: 10px; padding-inline: 5px; color: white; text-align: center;}
        .minTeccnical:hover{color: #6293ee; transition: 0.5s;}


        .titulo{display: none;}
        .WhoIAm{font-size: 0; display: none;}
        .WhatDo{font-size: 0; display: none;}
        .Who{
            #Contato{font-size: 0; display: none;}}
            #Numero{font-size: 0; display: none;}
            #Numero img{width: 0; height: 0; display: none;}
        .Teccnical{font-size: 0; display: none;}
    }
    .Carrossel{    
        width: auto;
        height: 89px;
        margin: 3px 0px 3px 0px;
        padding: 0;}
    .mid-page{padding-top: 10px; font-size: 20px;}
    .main-Clientes p{font-size: 20px; font-weight: bold;}
    .mid-page img{
        max-width: 320px;
        max-height: 90px;}

    .main-Clientes .Clientes-pics img{
        max-width: 130px;
        max-height: 60px;
    } 

    @keyframes main-Clientes{
        0% {left: -10%;}
        20% {left: -100%;}
        40% {left: -200%;}
        60% {left: -300%;}
        80% {left: -400%;}
        100% {left: -600%;}
    }

    .endMenu{margin-inline: 5px;}
    .endCol1{padding-inline: 20px;}
    .endCol2{padding-inline: 20px;}

    .Srv{padding-inline: 30px; width: auto;}
    .Srv h3{font-size: 23px;}
    .Srv p{font-size: 15px;}
    .Srv img{width: 20px; height: 20px;}
 }

 /* Tela Menor que 320px - OldfSchool*/
@media screen and (max-width: 325px){
    .top-page{
        max-width: 320px;
        font-size: 12px;
        padding: 0px;
        align-items: start;
        display:flex;
        flex-flow: column;
        .logo{display: flex; flex-flow: row; align-items: center;}
        .minWhoIAm{display:flex;font-size: 10px; text-align: center; padding-inline: 2px; color: white;}
        .minWhoIAm:hover{color: #6293ee; transition: 0.5s;}

        .minWhatDo{display:flex; font-size: 10px; padding-inline: 2px; color: white; text-align: center;}
        .minWhatDo{display:flex; font-size: 10px; padding-inline: 2px; color: white; text-align: center;}

        .logo img{padding-left: 5px; margin-inline: 0px; max-width: 50px;}
        .mintitulo{padding-bottom: 5px; text-align: center; margin-inline: 20px; font-size: 18px; color: white;}
        .minWho{display: flex; flex-flow: column; align-items: center; align-items: center;
            #minContato{font-size: 10px; margin: 0; color: white; text-align: center }
            #minNumero{font-size: 10px; color: white; font-family: Arial; text-decoration: none; text-align: center;}
            #minNumero img{ width: 10px; height: 10px; margin: 0; padding: 0;}
            #minNumero:hover{color: #62eea8; transition: 0.5s;}
            #minContato:hover{color: #6293ee; transition: 0.5s;}
        }

        .minTeccnical{display:flex; font-size: 10px; padding-inline: 5px; color: white; text-align: center;}
        .minTeccnical:hover{color: #6293ee; transition: 0.5s;}


        .titulo{display: none;}
        .WhoIAm{font-size: 0; display: none;}
        .WhatDo{font-size: 0; display: none;}
        .Who{
            #Contato{font-size: 0; display: none;}}
            #Numero{font-size: 0; display: none;}
            #Numero img{width: 0; height: 0; display: none;}
        .Teccnical{font-size: 0; display: none;}
    }
    .Carrossel{    
        width: auto;
        height: 89px;
        margin: 3px 0px 3px 0px;
        padding: 0;}
    .mid-page{font-size: 15px;}
    .main-Clientes p{font-size: 15px; font-weight: bold;}
    .mid-page img{
        max-width: 270px;
        max-height: 90px;}

    .main-Clientes .Clientes-pics img{
        max-width: 100px;
        max-height: 50px;
    } 

    @keyframes main-Clientes{
        0% {left: -10%;}
        20% {left: -100%;}
        40% {left: -200%;}
        60% {left: -300%;}
        80% {left: -400%;}
        90% {left: -450%;}
        100% {left: -550%;}
    }

    .endMenu{margin-inline: 5px;}
    .endCol1{padding-inline: 20px;}
    .endCol2{padding-inline: 20px;}

    .Srv{padding-inline: 30px; width: auto;}
    .Srv h3{font-size: 18px;}
    .Srv p{font-size: 13px;}
    .Srv img{width: 20px; height: 20px;}
 }