/* Inicio Configuração padrão */

@charset "utf-8";

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Fim Configuração padrão */


/* Imporatação de fontes */

@font-face {
    font-family: "archivo";
    src: url("../view/font/Archivo-Bold.ttf");
  }

@font-face {
    font-family: "poppins";
    src: url("../view/font/poppins.ttf");
}

/* Fim importação fontes */
html {
    scroll-behavior: smooth;
    transition: 1s;
}
/* Inicio container principal */

header{
    width: 100%;
    float: left;
    background-image: linear-gradient(to right, #3D4151, #141824);
}

#marca{
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 120px;
}
#marca p{
    margin-top: 10px;
    color: white;
    text-align: center;
}
#banner01{
    width: 100%;
    float: left;
    display: flex;
}
.cd1{
    width: 100%;
    float: left;
}
.cd2{
    width: 100%;
    float:center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cd3{
    width: 100%;
    height: 100%;
    float: right;
}
#barra01{
    width: 80%;
    height: 160px;
    background-image: linear-gradient(to right,	#753310 ,#E9661F);
    border-radius: 0px 10px 10px 0px ;
    float: left;
}
#barra02{
    width: 80%;
    height: 150px;
    background-image: linear-gradient(to right,	#753310 ,#E9661F);
    border-radius: 0px 10px 10px 0px ;
    margin-top:30%;
    float: left;
}
#barra03{
    width: 80%;
    height: 160px;
    background-image: linear-gradient(to left,	#753310 ,#E9661F);
    border-radius: 10px 0px 0px 10px ;
    margin-top: 20%;
    float: right;
}

.text{
    margin-left: 90px;
    margin-top: 12px;
}
.text h3{
    color: white;
    font-family: archivo;
    font-size: 1.7em;
}
.text p{
    color: white;
    font-family: poppins;
    font-size: 1.0em;
}
.text02{
    margin-left: 40px;
    margin-top: 15px;
}
.text02 h3{
    color: white;
    font-family: archivo;
    font-size: 1.7em;
}
.text02 p{
    color: white;
    font-family: poppins;
    font-size: 1.0em;
}
.mouse-role{
    width: 100%;
    float: left;
    margin-bottom: 110px;

}
.mouse {
    width: 25px;
    height: 45px;
    border: 2px solid white;
    position: relative;
    bottom: 40px;
    left: 50%;
    margin-left: -12.5px;
    border-radius: 12px;
    margin-top: 50px;
}
@-webkit-keyframes rotateplane {
    0%   {top:10px;}
    25%  {top:14px;}
    50%  {top:19px;}
    75%  {top:24px;}
    100% {top:28px;}
}
@-moz-keyframes rotateplane {
    0%   {top:10px;}
    25%  {top:14px;}
    50%  {top:19px;}
    75%  {top:24px;}
    100% {top:28px;}
}
@-o-keyframes rotateplane {
    0%   {top:10px;}
    25%  {top:14px;}
    50%  {top:19px;}
    75%  {top:24px;}
    100% {top:28px;}
}
.mouse::after {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    background-color:white;
    border-radius: 100%;
    left: 50%;
    top:10px;
    margin-left: -2.5px;
    transition:all 0.3s ease-in;

     -webkit-animation-name: rotateplane; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: rotateplane;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/* Fim container principal */


/* Inicio container Local e Nuvem Zimbra */
.vg{
    width: 100%;
}
#vantagens{
    width: 100%;
    float: left;
    display: flex;
}
#cloud{
    width: 100%;
}
#location{
    width: 100%;
}
#nuvemcont{
    background-image: url(../img/icon_nuvem2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}
#nuvem{
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#nuvem span{
    color: white;
    font-family: archivo;
    font-size: 3.8em;
}
#imp{
    width: 150px;
    height: 50px;
    padding: 0.4%;
    background-image: linear-gradient(to left,	#E9661F ,#2EA7B7);
    position: absolute;
    margin-left: 43.5%;
    margin-top: 4%;
    z-index: 10;
}
#imp span{
    color: white;
    font-family: archivo;
    font-size: 1.8em;
}

#localcont{
    background-image: url(../img/icon_local2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#local{
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#local span{
    color: white;
    font-family: archivo;
    font-size: 3.8em;
}
#dtnuvem{
    background-image: linear-gradient(to bottom, #54C8D3, #26A0B1);
    width: 100%;
    height: 450px;
    float: left;
}
#info_nuvem{
    color: white;
    width: 100%;
    padding: 4%;
}
#dtlocal{
    background-image: linear-gradient(to bottom, #E04A13, #EB6B21);
    width: 100%;
    height: 450px;
    float: right;
}
#info_local{
    color:white;
    width: 100%;
    padding: 4%;
}



/* Fim container Local e Nuvem Zimbra */


/*Inicio carousel cliente*/
    #corpo {
    float: left;
    width: 100%;
    height: 150px;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
    background: white;
  }
  .swiper-slide {
    width: 100%;
    height: 100%;
  
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-slide img{
      width: 35%;
  }
/*Fim carousel cliente*/


/* Inicio parallax */

.parallax {
    /* The image used */
    background-image: url("../img/parallax.jpg");
  
    /* Set a specific height */
    width: 100%;
    height: 300px;
    float: left;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
.parallax span{
    color: white;
    font-family: archivo;
    font-weight: bold;
    font-size: 3.2em;
    text-align: center;
    text-shadow: 5px 5px 5px black;
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
    margin-right: 30px;
}

/* Fim parallax */


/* Inicio Zimbra personalizado */

section{
    float: left;
    background-image: url(../img/bannerps.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#perso{
    float: left;
    margin-top: 50px;
    margin-left: 180px;
}
#iconPer{
    width: 20%;
    float: left;
    position: absolute;
    margin-top: 300px;
    margin-left: 150px;
}
#carolPers{
    width: 60%;
    float: right;
    margin-left: 35%;
    
}
.carousel-item{
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
}

/* Inicio Zimbra personalizado */


/* Inicio vantagens suporte */

#suporte{
    width: 35%;
    align-items: center;
    background-color:  rgba(248, 239, 237,0.9);
    border-radius: 20px;
    padding: 1%;
}
hr{
    width: 2;
    height: 100px;
    border: 1px solid black;
}


aside{
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3%;
}
#Servicos{
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 30px;
}

#card-vantagens{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3%;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;/* Remove this if you don't want the 3D effect */
    margin: 1%;
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color:rgba(248, 239, 237,0.9);
    color: black;
    padding: 5%;
    align-items: center;
    justify-content: center;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: orange;
    color: white;
    transform: rotateY(180deg);
    padding: 2%;
  }

/* Fim vantagens suporte */


/* Inicio formulario de contato */

#formulario{
    width: 100%;
    float: left;
    background-color: #2F3033;
}
#formulario h3{
    color: white;
    font-family: archivo;
    font-size: 1.5em;
}
#formulario p{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    
}

#formulario a{
    text-decoration: none;
    color: #E9661F;
}
#formulario i {
    color: #E9661F;
}

#form-captcha{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
}

.text-center{
    padding: 5%;
}
#btn_enviar{
    padding: 5%;
}

.help-block {
    display: block;
    margin-top: 15px !important;
    margin-bottom: 0px !important;
    color: #737373;
}

.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
    color: #a94442;
}


/* Fim formulario de contato */


/* Inicio Rodape */

footer{
    float: left;
    width:100%;

    background-color: #F8EFED;
}


/* Inicio contato New Zimbra */

#contNew{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.newlester{
    width: 50%;
    height: 120px;
    background-color: #F1A433;
    position: absolute;
    border-radius: 10px;
}
#textoCont{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#textoNew{
   align-items: center;
   justify-content: center;
   margin-left: 50px;
   margin-top: 5px;
}
#textoNew h4{
    color: white;
    font-family: archivo;
    font-size: 1.5em;
}
#textoNew p{
    color: white;
    font-size: 0.9em;
}
#contEmail{
    border: 1px solid #ccc;
    display: inline-block;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 20px;
    margin-right: 30px;
}
#barraEmail{
    border: none;
}
#btn_newemail{
    background-color:#F1A433;
    border-radius: 20px;
    padding: 2px;
    width: 20%;
}

/* fim contato New Zimbra */


/* Inicio Logo */

#logo4trust{
    margin-top: 100px;
    
}
footer ul li{
    text-decoration: none;
    list-style: none;
    color: #8A8A8A;
    font-weight: bold;
}

/* Fim logo */


/* Inicio copyright */

#copyright{
    text-align: center;
}

/* Fim copyright */

/* Fim Rodape */



@media screen and (max-width: 1400px){
    #imp{
        margin-left: 41%;
        margin-top: 5%;
      }

}

/* Inicio reposividade tela 1200px*/

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

    /* Container Inicial Zimbra */



        .text{
            margin-left: 70px;
            margin-top: 10px;
        }
        .text h3{
            color: white;
            font-family: archivo;
            font-size: 1.6em;
        }
        .text p{
            color: white;
            font-family: poppins;
            font-size: 1.1em;
        }
    
    /* Fim container Inicial Zimbra*/

    /*Incio container implementação*/
   
    

      #imp{
        margin-left: 41%;
        margin-top: 5%;
      }


    /*Fim container implementação*/  

    /* Inicio Zimbra personalizado */

    section{
        width: 100%;
        float: left;
        background-image: url(../img/bannerps.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #perso{
        float: left;
        margin-top: 80px;
        margin-left: 180px;
    }
    #iconPer{
        width: 20%;
        float: left;
        position: absolute;
        margin-top: 300px;
        margin-left: 100px;
    }
    #carolPers{
        width: 60%;
        float: right;
        margin-left: 35%;
        margin-top: 10%;
        
    }
    

    /* Inicio Zimbra personalizado */

    /* Inicio contato New Zimbra */

    #contNew{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .newlester{
        width: 60%;
        height: 120px;
        background-color: #F1A433;
        position: absolute;
        border-radius: 10px;
    }
    #textoCont{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    #textoNew{
    align-items: center;
    justify-content: center;
    margin-left: 50px;
    margin-top: 5px;
    }
    #textoNew h4{
        color: white;
        font-family: archivo;
        font-size: 1.5em;
    }
    #textoNew p{
        color: white;
        font-size: 0.9em;
    }
    #contEmail{
        border: 1px solid #ccc;
        display: inline-block;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 20px;
        margin-right: 30px;
    }
    #barraEmail{
        border: none;
    }
    #btn_newemail{
        background-color:#F1A433;
        border-radius: 20px;
        padding: 2px;
        width: 25%;
    }

    /* fim contato New Zimbra */

    /*Incio logo 4trust*/

    #logo4trust{
        margin-bottom: 10px;
    }

    /*Fim logo 4trust*/

    }

/* Fim reposividade tela 1200px*/

/* Inicio resposividade tela 1100*/

@media screen and (max-width:1100px){
    #barra01{
        width: 90%;
        height: 160px;
        background-image: linear-gradient(to right,	#753310 ,#E9661F);
        border-radius: 0px 10px 10px 0px ;
        float: left;
    }
    #barra02{
        width: 90%;
        height: 160px;
        background-image: linear-gradient(to right,	#753310 ,#E9661F);
        border-radius: 0px 10px 10px 0px ;
        margin-top:30%;
        float: left;
    }
    #barra03{
        width: 90%;
        height: 160px;
        background-image: linear-gradient(to left,	#753310 ,#E9661F);
        border-radius: 10px 0px 0px 10px ;
        margin-top: 20%;
        float: right;
    }

    .text{
        margin-left: 50px;
        margin-top: 5px;
    }
    .text h3{
        color: white;
        font-family: archivo;
        font-size: 1.4em;
    }
    .text p{
        color: white;
        font-family: poppins;
        font-size: 1.0em;
    }
    .text02{
        margin-left: 40px;
        margin-top: 15px;
    }
    .text02 h3{
        color: white;
        font-family: archivo;
        font-size: 1.4em;
    }
    .text02 p{
        color: white;
        font-family: poppins;
        font-size: 1.0em;
    }
}

/* Inicio reposividade tela 960px*/

@media screen and (max-width: 960px){

    /* Container Inicial Zimbra */
    
    .text{
        margin-left: 40px;
        margin-top: 12px;
    }
    .text h3{
        color: white;
        font-family: archivo;
        font-size: 1.6em;
    }
    .text p{
        color: white;
        font-family: poppins;
        font-size: 1.1em;
    }
    .text02{
        margin-left: 40px;
        margin-top: 20px;
    }
    .text02 h3{
        color: white;
        font-family: archivo;
        font-size: 1.6em;
    }
    .text02 p{
        color: white;
        font-family: poppins;
        font-size: 1.1em;
    }


     /*Incio container implementação*/
   
     #dtnuvem{
        background-image: linear-gradient(to bottom, #54C8D3, #26A0B1);
        padding: 4%;
        width: 55.5vh;
        height: 400px;
        float: left;
    }
    
    #dtlocal{
       
    }

    #imp{
        margin-left: 350px;
        margin-top: 50px;
      }

    /*Fim container implementação*/  


    section{
        width: 100%;
        float: left;
        background-image: url(../img/bannerps.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #perso{
        float: left;
        margin-top: 100px;
        margin-left: 180px;
    }
    #iconPer{
        width: 25%;
        float: left;
        position: absolute;
        margin-top: 300px;
        margin-left: 25px;
    }
    #carolPers{
        width: 80%;
        float: right;
        margin-left: 28%;
        margin-top: 10%;
        
    }

    aside{
        width: 100%;
        float: left;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8%;
    }
    
    #contNew{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .newlester{
        width: 80%;
        height: 120px;
        background-color: #F1A433;
        position: absolute;
        border-radius: 10px;
    }
    #textoCont{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    #textoNew{
    align-items: center;
    justify-content: center;
    margin-left: 50px;
    margin-top: 5px;
    }
    #textoNew h4{
        color: white;
        font-family: archivo;
        font-size: 1.5em;
    }
    #textoNew p{
        color: white;
        font-size: 0.9em;
    }
    #contEmail{
        border: 1px solid #ccc;
        display: inline-block;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 20px;
        margin-right: 30px;
    }
    #barraEmail{
        border: none;
    }
    #btn_newemail{
        background-color:#F1A433;
        border-radius: 20px;
        padding: 2px;
        width: 25%;
    }

    /* Fim container Inicial Zimbra*/

    }

/* Fim reposividade tela 960px*/



/* Inicio reposividade tela 768px*/

@media screen and (max-width: 768px){


    #vantagens{
        display: block;
    }

/* Container Inicial Zimbra */

    .cd2{
        display: none;
    }
    .cd2 img{
        display: none;
    }
    #banner01{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        float: left;
    }
    #barra01{
        width: 80%;
        height: 190px;
        margin-top: 100px;
        float: left;
    }
    #barra02{
        width: 80%;
        margin-top: 100px;
        float: left;
    }
    #barra03{
        width: 80%;
        height: 180px;
        margin-top: 100px;
        float: right;
    }

/* Fim Container Inicial Zimbra */



    #imp{
        display: none;
    }


/*Container zimbra personalizado*/

    section{
        width: 100%;
        height: 100%;
        float: left;
        background-image: url(../img/bannerps.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #perso{
        margin: auto;
        margin-top: 20px;
        margin-bottom: 50px;
    }

    #perso h1{
        font-size: 1.5em;
    }
    #perso h3{
        font-size: 1.0em;
    }
    #iconPer{
      display: none;
    }
    #carolPers{
        width: 100%;
        margin-bottom: 50px;
        margin-right: 20px;
    }


/*Fim zimbra personalizado*/


/*Container vantagens suporte*/
    aside{
        width: 100%;
        float: left;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #container-gp{
        float: left;
        width: 100%;
        height: 100%;
    }
    #Vantagens{
        width: 100%;
        float: left;
        text-align: center;
    }
    
    .card-group{
        width: 60%;
        margin-top: 60px;
        padding: 5%;
        
    }
    .card{
        background-color: rgba(248, 239, 237,0.9);
        border-radius: 20px;
        border: none;
        height: 120%;
        text-align: center;
    }
    .card-img-top{
        padding: 25%;
        
    }
    .cont{
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Fim Container vantagens suporte*/

    

    .swiper-slide img{
        width: 90%;
    }

}

/* Fim reposividade tela 768px*/


/* Inicio reposividade tela 480px*/

@media screen and (max-width: 500px){

    .navbar-fixed-top,
  .navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    background-color: black;
  }
    
    .mouse {
        width: 25px;
        height: 45px;
        border: 2px solid white;
        position: relative;
        bottom: 40px;
        left: 50%;
        margin-left: -12.5px;
        border-radius: 12px;
        margin-top: 80px;
    }
    
    .newlester{
        width: 65%;
        height: 28%;
        background-color: #F1A433;
        position: absolute;
        border-radius: 10px;
        margin-bottom: 100px;
        padding: 5%;
    }

        .card{
    background-color: rgba(248, 239, 237,0.9);
    border-radius: 20px;
    border: none;
    height: 110%;
    text-align: center;
    }
    
    .swiper-slide img{
        width: 90%;
    }
    
    #dtnuvem{
        background-image: linear-gradient(to bottom, #54C8D3, #26A0B1);
        padding: 4%;
        width: 100%;
        height: 420px;
        float: left;
    }
    
    #dtlocal{
        background-image: linear-gradient(to bottom, #E04A13, #EB6B21);
        width: 100%;
        float: right;
    }

    

    .parallax span{
        color: white;
        font-family: archivo;
        font-weight: bold;
        font-size: 3.2em;
        text-align: center;
        text-shadow: 5px 5px 5px black;
        display: flex;
        justify-content: flex-end;
        margin-top: 30px;
        margin-right: 0px;
    }
    section{
        width: 100%;
        height: 100%;
        float: left;
        background-image: url(../img/bannerps.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #carolPers{
        width: 100%;
        margin-bottom: 50px;
        margin-left: 6%;
    }
    aside{
        width: 100%;
        float: left;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10%;
    }
    
    
    #formulario{
        float: left;
        background-color: #2F3033;
    }
   
    #textoNew{
        align-items: center;
        justify-content: center;
        margin-left: 0px;
        margin-top: 0px;
     }
     #contEmail{
        border: 1px solid #ccc;
        display: inline-block;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 20px;
        margin-right: 0px;
        margin-bottom: 20px;
    }
    #barraEmail{
        border: none;
        width: 50%;
    }
    .card-group{
        width: 100%;
        height: 100%;
        margin-top: 60px;
        padding: 5%;
        
    }

    
}

/* Fim reposividade tela 480px*/


/* Inicio reposividade tela 3200px*/

@media screen and (max-width: 320px){

    /* Container Inicial Zimbra */
    .mouse {
        width: 25px;
        height: 45px;
        border: 2px solid white;
        position: relative;
        bottom: 40px;
        left: 50%;
        margin-left: -12.5px;
        border-radius: 12px;
        margin-top: 80px;
    }
    .card-group{
        width: 100%;
        height: 100%;
        margin-top: 60px;
        padding: 5%;
        
    }
    
    /* Fim container Inicial Zimbra*/


    }

/* Fim reposividade tela 320px*/