@charset "UTF-8";

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

}

body {
    display: flex;
    flex-wrap: wrap;
    margin: 3px;
    flex: 1 1 100vw;

}

header, nav, main, aside, footer {
     background-color: #a1a1a1;
     display: flex;
     margin: 3px;

}

header {
   flex: 1 1 100vw;
   height: 100px;
   
}

header #logo {
     flex: 0 1 200px;
     background: #c9c9c9;
     
}
/* INICO LOGO */

.ss{
    text-align: center;
    font-size: 80px;
    color: blue;

}
 .on{
    font-size: 70px;
    color: green;

    position: fixed;
    left: 85px;
    top: 15px

} 

/* FIM LOGO */

#openMenu, #closeMenu {
     border: none;
     background: none;
     font-size: 30px;
     font-weight: bold;
     padding: 0px 5px 0px 5px;
     cursor: pointer;
     display: none;
     
}

nav {
    flex: 1 1 100vw;
    align-items: center;
    justify-content: flex-end;

    position: relative;

}

nav a {
     margin: 3%;
     font-size: 20pt;

}

main {
    flex: 20 1 500px;
    height: calc(100vh - 118px);
    flex-wrap: wrap;
    overflow: auto;
    
    justify-content: center;
    text-align: center;
    
}

main section {
     width: 100%;
     margin: 10px;
     background: linear-gradient(#9a9a9a, #5a5a5a, #1a1a1a);
    
    
    
    
    align-items: center;
    justify-content: center;
    text-align: center;

}

/*.imagem{
    box-sizing: border-box;
    width: 55vw;
    margin-left: auto;
    margin-right: auto;
    
}*/

.infor{
    width: 20vw;
    /*height: 15vh;*/
    border: 1px solid lightgrey;
    display: inline-block;
    
}

figure{
    margin:10px;
    padding: 10px;
    width: calc(100vw - 350px);
    /*width: calc(100vw - 278px);*/
    /*width: 25vw;*/
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: whitesmoke;
    border: 1px solid lightgrey;
    
}

figure img{
    width: 15vw;
    height: 14vh;
    
}

aside {
    flex: 1 1 200px;

    flex-wrap: wrap;
    overflow: auto;
    
    justify-content: center;
    text-align: center;

}

aside section {
     width: 100%;
     margin: 10px;
     background: linear-gradient(#9a9a9a, #8a8a8a, #6a6a6a);

}


.formu {
    background: linear-gradient(#9a9a9a, #8a8a8a, #6a6a6a);
}

.formu1 {
    background: #c9c9c9;

}

.numro_senha{
    font-size: 50px;
        
}
        
        
.form_input{
    padding: 10px;
    font-size: 15px;
    text-align: center;
        
}

#submit {
   background: rgba(225, 225, 225, 0.8);
   margin: 3px;
   width: 15vw;
   height: 3vh;

}

.branco{
    
   background: rgba(135,206,235);
   margin: 3px;
   width: 15vw;
   height: 3vh;

}

footer {
    flex: 1 1 100vw;
    height: 100px;

    flex-wrap: wrap;
    overflow: auto;

    justify-content: center;
    text-align: center;

}

a {
    text-decoration: none;
    color: inherit;

}

@media screen and (max-width: 963px){
    
    figure img{
        width: 30vw;
        height: 40vh;
        
    }

}

@media screen and (max-width: 923px){
     main {
         height: calc(80vh - 24px);

     }

     #openMenu, #closeMenu {
        display: block;

     }

     #openMenu {
        margin-left: auto;
        /*margin-left: 90vw;*/

     }

     #closeMenu {
        position: fixed;
        right: 15px;
        top: 15px

     }

     header{
        position: fixed;
        width: calc(100vw - 3px right);
        height: 10vh;
        right: 3px;
        left: 3px;
        
     }
     
     nav{
         position: fixed;
         flex-direction: column;
         /*margin-top: 50vh;
         font-size: 1vh;*/
         width: 40vw;
         height: 100vh;
         background: rgba(225, 225, 225, 0.8);
         align-items: center;
         justify-content: center;
         margin: 0;
         display: none;
         opacity: 0;
         transition: 0.3s;

     }
     
     /*nav{
        position: relative;
        font-size: 4vh;

     }*/

     aside {
         flex: 1 1 100vw;
         margin-top: calc(10vh + 9px);
         height: 10vh;

     }
     
     aside section {
         margin: 5px;
         margin-left: 10px;
         margin-right: 10px;
     
     }
     
     #submit {
         background: rgba(225, 225, 225, 0.8);
         width: 20vw;
         height: 5vh;
         
     }
     
     .branco{
         background: rgba(135,206,235);
         width: 20vw;
         height: 5vh;

     }
     
     figure{
         margin: 10px;
         padding: 10px;
         width: calc(100vw - 52px);
         text-align: center;
         background-color: whitesmoke;
         border: 1px solid lightgrey;
    
     }
     
     .feedbek {
         margin: 10px;
         padding: 10px;
         color: red;
         width: calc(100vw - 52px);
         text-align: center;
         background-color: whitesmoke;
         border: 3px solid #000;
         border-radius: 10px;
         box-shadow: 0px 0px 6px white;
    
     }

     figure img{
         width: 40vw;
         height: 50vh;
    
     }
     
     .infor{
         width: 60vw;
         /*height: 15vh;*/
         border: 1px solid lightgrey;
         display: inline-block;
    
     }
     
     .titulo{
         /*width: 30vw;*/
         /*height: 15vh;*/
         /*border: 1px solid lightgrey;*/
         display: inline-block;
         margin-left: 10px;
         margin-right: 10px;
    
     }
     
     /* Logo Inicio */
    .ss{
        text-align: center;
        font-size: 8vh;
        color: blue;
    
    }
     .on{
        font-size: 7vh;
        color: green;
    
        position: fixed;
        left: 13vw;
        top: 3vh;
    
    }
    /* Logo Inicio */

}

@media only screen and (max-width: 717px){
     main {
      /* */ height: calc(85vh - 24px);

     }

     #openMenu, #closeMenu {
        display: block;

     }

     #openMenu {
        /*margin-left: auto;*/

     }

     #closeMenu {
        position: fixed;
        right: 15px;
        top: 15px

     }
     
     #submit {
         background: rgba(225, 225, 225, 0.8);
         width: 30vw;
         height: 5vh;
         
     }
         
     .branco{
         background: rgba(135,206,235);
         width: 30vw;
         height: 5vh;

     }     

     nav{
         position: fixed;
         flex-direction:column;
         width: 50vw;
         height: 100vh;
         background: rgba(225, 225, 225, 0.8);
         align-items: center;
         justify-content: center;
         margin: 0;
         display: none;
         opacity: 0;
         transition: 0.3s;

     }

     header{
        position: fixed;
        width: calc(100vw - 3px right);
        /**/height: 5vh;
        right: 3px;
        left: 3px;

     }

     aside {
        /**/margin-top: calc(5vh + 9px);

    }

    /* Logo Inicio */
    .ss{
        text-align: center;
        font-size: 4vh;
        color: blue;
    
    }
     .on{
        font-size: 3vh;
        color: green;
    
        position: fixed;
        left: 18vw;
        top: 1.5vh;
    
    }
    /* Logo Fim */
    
/*.imagem{
    box-sizing: border-box;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    
}*/

figure{
    margin: 10px;
    padding: 10px;
    width: calc(100vw - 52px);
    text-align: center;
    background-color: whitesmoke;
    border: 1px solid lightgrey;
    
}

figure img{
    width: 60vw;
    height: 60vh;
    
}

.infor{
    width: 80vw;
    /*height: 15vh;*/
    border: 1px solid lightgrey;
    display: inline-block;
    
}
    
    footer{
        overflow: auto;

    }

}

@media only screen and (max-width: 490px){
    
    nav{
        width: 100vw;
        height: 100vh;
        
    }
    
    aside section {
         margin: 10px;
        
    }
    
    figure img{
        width: 60vw;
        height: 30vh;
    }
 
    .on{
        font-size: 3vh;
        color: green;
    
        position: fixed;
        left: 27vw;
        top: 1.5vh;
    
    }

}

@media only screen and (max-width: 390px){
    
    /*nav{
        width: 100vw;
        height: 100vh;
        
    }*/
    
    aside section {
        
        margin-top: 0px;
        /*margin: 10px;*/
        
    }

    .infor{
        width: calc(100vw - 92px);

    }
    
    figure img{
        width: 60vw;
        height: 30vh;
    }
    
    .on{
        font-size: 4vh;
        color: green;
        position: fixed;
        left: 30vw;
        top: 2vh;
    
    }
    
    .ss{
        text-align: center;
        font-size: 5vh;
        color: blue;
    
    }
     
}


/*@media only screen and (max-height: 370px){
    
    nav{
        width: 40vw;
        height: 100vh;
        
    }
    
    figure img{
        width: 30vw;
        height: 25vh;
    }

}*/