html{font-family: 'Poppins';}

    /* Cabeçalho*/
    .top-header{
        text-align: center;
        box-sizing: border-box;
        background: #E0DCE1 ;
        height:8em;}

    .top-header-title{
        font-size:2.9em; 
        padding:.4em 0 .1em; 
        margin:0;} 

    .digi{color:#2a3d9b;}
    .sollution{color:#13101C;}

    .top-header-subtitle{
        font-size:.9em; 
        padding:0; 
        margin:.6em; 
        color:#13101C}

    /*Botoões do cabealho*/
    .top-nav{
        text-align: center;
        width: 100%;
        margin:0 auto;
        overflow: hidden;
        background:#E0DCE1}

    .top-nav ul{
        margin: 0;
        padding: .2em 0;
        list-style: none;}

    .top-nav a{
        margin: .05em; 
        color: white;
        text-decoration: none;
        display: block; 
        padding: .3em 0;
        background-color: #13101C;
        border-radius: 5px;}

    .top-nav a:hover{
        background-color: #2a3d9b;
        text-decoration: none;color:#E0DCE1;
        border-radius: 5px;}

    /*Empresa*/
    .top-content{
        padding: 0; 
        text-align: center;}

    .top-content h2{
        font-size:.9em;
        padding:1em;
        margin: 0;
        color:#13101C; 
        background: #E0DCE1}

    .top-content-title{
        background: #E0DCE1 url(../imagens/digisollutions.jpg);
        background-size:contain;
        background-repeat:no-repeat;
        background-position: center; 
        height: 20em;
        padding:8em 0 1em;}

    .top-content-button{ 
        margin:2em 0; 
        display: inline-block; 
        padding: .5em; 
        background-color:#13101C;
        color:#E0DCE1;
        border-radius:5px;
        text-decoration: none; 
        width: 100%;
        text-align: center}

    .top-content-button:hover{
        background-color: #2a3d9b;
        color:#E0DCE1;
        text-decoration: none;
        border-radius: 5px;}
    
    /*Serviços prestados*/
    .middle-content{
        padding: 3em; 
        text-align: center;
        background: #E0DCE1; 
        box-sizing: border-box;}

    #itens{
        margin-top: 2.5em;
        width: 80%;
        margin: auto;}

    .itens-title{
        font-size:1.2em;
        padding:0;
        color:#13101C;
        text-align: center;
        margin:3em}

    .icons{
        display:block;
        box-sizing: border-box;
        box-shadow: 5px 5px 5px #13101C30;
        position: relative;
        border-radius: 5px;
        border:#13101C50 solid .2px;
        width: 100%;
        height:5em;
        padding:.7em;
        margin: 0 0 .5em;
        transform-style: preserve-3d;
        transition: all 200ms ease;
        cursor:pointer;
        
        text-align:center;}
        

    .icons1:after{
        content:"Digitação, escaneamento de documentos,criação de backups, organização de pastas e arquivos";
        display: block;
        box-sizing: border-box;
        box-shadow: 5px 5px 5px #13101C30;
        position: absolute;top:-100%;left:0px;
        border-radius: 5px;
        border:#13101C50 solid .2px;
        width: 100%;
        height:100%;
        padding:.7em;
        margin: 0 0 .5em;
        transform-origin: left bottom;
        transform: rotateX(90deg);
        overflow: hidden;
        font-family: 'Poppins';
        color:#13101C;
        font-size:.9em;
        text-align:center;}

    .icons1:hover{
        transform-origin: center bottom;
        transform: rotateX(-90deg) translateY(100%);}

    .icons2:after{
        content: 'Digitalização, edição e restauração de imagens, criação de backups, organização de pastas e arquivos';display: block;
        display: block;
        box-sizing: border-box;
        box-shadow: 5px 5px 5px #13101C30;
        position: absolute;top:-100%;left:0px;
        border-radius: 5px;
        border:#13101C50 solid .2px;
        width: 100%;
        height:100%;
        padding:.7em;
        margin: 0 0 .5em;
        transform-origin: left bottom;
        transform: rotateX(90deg);
        overflow: hidden;
        font-family: 'Poppins';
        color:#13101C;
        font-size:.9em;
        text-align:center;}

    .icons2:hover{
        transform-origin: center bottom;
        transform: rotateX(-90deg) translateY(100%);}

    .icons3:after{
        content: 'Digitalização, gravação, edição e restauração de videos, criação de backups, organização de pastas e arquivos';display: block;
        box-sizing: border-box;
        box-shadow: 5px 5px 5px #13101C30;
        position: absolute;top:-100%;left:0px;
        border-radius: 5px;
        border:#13101C50 solid .2px;
        width: 100%;
        height:100%;
        padding:.7em;
        margin: 0 0 .5em;
        transform-origin: left bottom;
        transform: rotateX(90deg);
        overflow: hidden;
        font-family: 'Poppins';
        color:#13101C;
        font-size:.9em;
        text-align:center;}

    .icons3:hover{
        transform-origin: center bottom;
        transform: rotateX(-90deg) translateY(100%);}

    .icons4:after{
        content: 'Criação e elaboração de planilhas eletrônicas';display: block;
        box-sizing: border-box;
        box-shadow: 5px 5px 5px #13101C30;
        position: absolute;top:-100%;left:0px;
        border-radius: 5px;
        border:#13101C50 solid .2px;
        width: 100%;
        height:100%;
        padding:.7em;
        margin: 0 0 .5em;
        transform-origin: left bottom;
        transform: rotateX(90deg);
        overflow: hidden;
        font-family: 'Poppins';
        color:#13101C;
        font-size:.9em;
        text-align:center;}

    .icons4:hover{
        transform-origin: center bottom;
        transform: rotateX(-90deg) translateY(100%);}

    .icons5:after{
        content: 'Criação e gerenciamento de Cursos On Line';display: block;
        box-sizing: border-box;
        box-shadow: 5px 5px 5px #13101C30;
        position: absolute;top:-100%;left:0px;
        border-radius: 5px;
        border:#13101C50 solid .2px;
        width: 100%;
        height:100%;
        padding:.7em;
        margin: 0 0 .5em;
        transform-origin: left bottom;
        transform: rotateX(90deg);
        overflow: hidden;
        font-family: 'Poppins';
        color:#13101C;
        font-size:.9em;
        text-align:center;}

    .icons5:hover{
        transform-origin: center bottom;
        transform: rotateX(-90deg) translateY(100%);}

    .icons6:after{
        content: 'Criação de sites e páginas na Internet';
        display: block;
        box-sizing: border-box;
        box-shadow: 5px 5px 5px #13101C30;
        position: absolute;
        top:-100%;
        left:0px;
        border-radius: 5px;
        border:#13101C50 solid .2px;
        width: 100%;
        height:100%;
        padding:.7em;
        margin: 0 0 .5em;
        transform-origin: left bottom;
        transform: rotateX(90deg);
        overflow: hidden;
        font-family: 'Poppins';
        color:#13101C;
        font-size:.9em;
        text-align:center;}

    .icons6:hover{
        transform-origin: center bottom;
        transform: rotateX(-90deg) translateY(100%);}

    .icons span{
        color:#2a3d9b; 
        font-size:1.5em; 
        display:inline-block; 
        text-align:center; 
        padding:0;}

    .icons p{
        color:#2a3d9b; 
        font-size:1.em; 
        display:inline-block; 
        text-align:center;
        font-family: 'Poppins';
        padding: 0}

/*Esta em construção - não aparece*/

    .main-content{}

    .main-content-article{
        margin-bottom: 3.5em;}

    .main-content-title{
        color:#2a3d9b; 
        font-size:1.25em;
        text-transform: uppercase;
        letter-spacing: 0.2em;}

    .main-content p{
        color:#13101C;
        font-size: 1em;
        line-height: 1.5;}

    .button{
        display: none; 
        padding: .9em 2.5em; 
        background-color:#13101C; 
        text-decoration: none;
        width: 7em;
        text-align: center; 
        color:#E0DCE1;
        border-radius: 5px;}

    .button:hover{
        background-color: #2a3d9b;
        color:#E0DCE1;}

    /* Rodapé*/

    .footer{ 
        background-color: #E0DCE1;
        text-align: center;
        padding-bottom: 2em;}

    .footer-menushare{
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline-block; 
        background-color:#2a3d9b;
        width: 100%;}

    .footer-menushare a{
        font-size: 1.4em;
        text-decoration: none;
        color: #E0DCE1;
        display: inline-block; 
        margin:.6em;}


    .display{
        display: none;
        overflow: hidden;}


    /* screen 683px*/

    @media screen and (min-width: 43em){
    
    
    .display{
        display: block;
        overflow: hidden;}
         
    .top-nav{
        background-color:#13101C;
        text-align: right;}
        
    .top-nav ul{
        margin: 0;}
        
    .top-nav li{
        display: inline-block;
        margin:0;}
        
    .top-nav a{
        margin: 0; 
        padding:.5em;
        background-color:#13101C;}
        
    .top-nav a:hover{ 
        background-color:#2a3d9b70;}
    
    .top-content{background-color:#E0DCE1; color:#E0DCE1;height:auto; padding: .7em; }
    .top-content-title{color:#E0DCE1;top:3em; width: 100%; left: 10em}
    .top-content-img{display:block; width: 9em; height: 9em;overflow: hidden;}
    .top-content img{width: 100%;}
    
    .middle-content{background-color: #E0DCE1;overflow: auto;padding: 2em}
   
    .itens-title{font-size:1.2em;padding:0;color:#13101C;text-align: center;margin:2em 0 0}

    
    .clearfix:after, row:after{content:' '; display: block;clear: both;}
    
    .row{width: 80%; margin:auto;padding-top:2em;}
    
    .col1-4{width: 48.5%;margin:.3em auto;float: left;padding-bottom: 2em;}
    .col1-4:nth-child(2n){margin-left: 1%;margin-bottom: 1%;}
    .col1-4:nth-child(2n -1){margin-left: 1%;margin-bottom: 1%;}
    
    .icons1:after{
        font-size: .8em;}
    
    .icons2:after{
        font-size: .75em;}
        
    .icons3:after{
        font-size: .75em;}
    
    .icons4:after{
        font-size: .8em;}
    
    .icons5:after{
        font-size: .8em;}
        
    .icons6:after{
        font-size: .8em;}
    
    /* não aparece*/
    .button1{background-color:#6A9FBF;}
    .button{float: right;}

    /* figuras dos planos*/
        
    .box-planos{ 
    margin-left: auto;
    margin-right: auto; 
    padding: 0 0 5px 0;
    max-width: 80%;
    min-width: 30%; 
    overflow:auto;
    height: auto;
    display: table;
    border-radius: 2%;
    border:#13101C30 solid .2px;}

    .box-planos i{
    margin:0;
    padding: 0;
    color: #E0DCE1;}

    .container {
    position: relative;
    width: 50%;
    border-radius: 5%;}

    .overlay{
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height:0;
    transition: .5s ease-in-out;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border-radius: 5%;}

    .box-planos-imagem{ 
    margin:0;
    width: 48.5%;
    float:left;
    border-radius: 5%;}

    .box-planos-imagem:nth-child(2n){
    margin-left: 1%;
    margin-bottom: .5%;
    margin-top: 1%}

    .box-planos-imagem:nth-child(2n -1){
    margin-left: 1%;
    margin-bottom: .5%;
    margin-top: 1%;}

    .image{
    display: block;
    width:100%;
    height:auto;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border-radius: 5%;}

    .text {
    white-space: nowrap; 
    color: white;
    font-size: .5em;
    background-color:#13101C95;
    position: absolute;
    overflow: hidden;
    padding:10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    border-radius: 5%;
    text-decoration: none;}

    .container:hover .overlay{
    bottom: 0;
    height: 100%;}

    .overlay1 {
    background-image: url(../imagens/documentos.jpg);
    position: absolute;
    left: 0;
    right: 0;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    transition: .5s ease-in-out;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 5%;
    bottom: 100%;
    height: 0;}

    .container:hover .overlay1{
    bottom: 0;
    height: 100%;}

    .overlay2 {
    background-image: url(../imagens/fotografia1.jpg);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease-in-out;
    cursor: pointer;
    border-radius: 5%;}

    .container:hover .overlay2 {
    bottom: 0;
    height: 100%;}

    .overlay3 {
    background-image: url(../imagens/video2.jpg);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease-in-out;
    cursor: pointer;
    border-radius: 5%;}

    .container:hover .overlay3 {
    bottom: 0;
    height: 100%;}

    .overlay4 {
    background-image: url(../imagens/back16.jpg);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease-in-out;
    cursor: pointer;
    border-radius: 5%;}

    .container:hover .overlay4 {
    bottom: 0;
    height: 100%;}

    .overlay5 {
    background-image: url(../imagens/cursos.jpg);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease-in-out;
    cursor: pointer;
    border-radius: 5%;}

    .container:hover .overlay5 {
    bottom: 0;
    height: 100%;}

    .overlay6 {
    background-image: url(../imagens/internet1.jpg);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease-in-out;
    cursor: pointer;
    border-radius: 5%;}

    .container:hover .overlay6 {
    bottom: 0;
    height: 100%;}


@media screen and (min-width: 51.75em){ 
    
    .top-header{
        background-image: url(../imagens/bg-1.jpg);
        background-position: center;
        height: 25em;}
    
    .top-header-title{
        font-size:2.9em; 
        margin: 0;}
    
    .top-content{
        height:100%;}
    
    .top-content-title{
        font-size:1.2em;
        margin:0; 
        padding: 0;
        top: .2em}
    
@media screen and (min-width: 71.875em){ 

    .col1-4{
        width: 31.5%;}}
    
@media screen and (min-width: 85em){ 
    
    .box-planos-imagem{ 
       width: 31.5%;}}