@charset "UTF-8";
/* CSS Document */




body{
   
    box-sizing: border-box;
      
}
    
    
.logoContainer{
    
    border: 0px solid red;
    width: 150px;
    box-sizing: border-box;
    margin-top: 5%;
    margin-left: 5%;

}
    
    
.logo{
    
    border: 0px solid red;
    width: 100%;
    padding: 0px;
        
}
    
    
.assinatura{
    
    font: 80%'gotham-bold';
    color: #1b1b1b;
    position: absolute;
    bottom: 5%;
    left: 5%;
}
    
    
.menu{
    
    border: 0px solid red;
    float: right;
    position: absolute;
    width: 400px;
    text-align: right;
    box-sizing: border-box;
    
}
    
.LinkMenu{
    
    font: 150%'gotham-bold';
    color: #1b1b1b;
    position: relative;
    padding:0px;
    float: left;
    width:auto;
    height: 10px;
        
}
    
    
.LinkMenu:hover{
    
    font: 150%'gotham-bold';
    color: #1b1b1b;
    position: relative;
    margin-left:0%;
    text-decoration: none;
    cursor: pointer;
        
}
    
.box_item_menu{
    
    border:0px solid red;
    width: auto;
    float: right;
    position: relative;
    margin-left:40px;
    margin-right:0px;
    box-sizing: border-box;
    padding: 0px;
}
    
    
.barra_item_menu{
    
    background-color: #1b1b1b;
    width: 100%;
    height: 4px;
    float: left;
    transform-origin: left;
    transform: scale(0,1);
    
    transition: transform  0.3s;
    transition-timing-function: ease;
}
    
.div_pai{
        
    border:0px solid red;	
    box-sizing: border-box;
    /*background-color: #B8C2C5;*/
    background-color: #999999;
    overflow: hidden;
        
}
    
 .iDiv{
     
    box-sizing: border-box;
    padding: 0px;
    float:left;
    border: 0px solid blue;
    
}
    
.div_filhos{
        
    border:0px solid red;	
    padding: 0px;
    position: relative;
    float:left;
        
}
    
    
    
.div_XX{
        
    border:0px solid red;	
    box-sizing: border-box;
    padding: 0px;
    float:left;

    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    transition:all 0.3s ease;
    transform-origin: center;

    /* -webkit-transition:filter 0.3s ease;
    -moz-transition:filter 0.3s ease;
    transition:filter 0.3s ease;
    transform-origin: center; */
}
    
.div_XY{
        
    border:0px solid red;	
    box-sizing: border-box;
    padding: 0px;
    float:left;
    
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    transition:all 0.3s ease;
    transform-origin: center;

    /* -webkit-transition:filter 0.3s ease;
    -moz-transition:filter 0.3s ease;
    transition:filter 0.3s ease;
    transform-origin: center; */

 }
    
    
    
.div_filhos3{
        
    padding: 0px;
    z-index: 2;
    float:left;
}
    
.div_filhos_canvas{
    position: relative;
    top:0px;
    left:0px;
    border:0px solid red;	
    /* height: 600px; */
    box-sizing: border-box;
    padding: 0px;
}
        
    
    
.canva_filho{
    
        z-index: -1;
      
}
    
.divIntro1{
    
    position:fixed;
    left:0px;
    top:0px;
    opacity: 0;
    width: 0px;
    height:0px;
    background-color: #000000;
    border:0px solid red;
    z-index: 10;

}
    
.divIntro_anima{
    
        
    transform-origin: bottom;
    transform: translate(1px,-100px);
    transition: transform  4.8s;
    transition-timing-function: ease;
    background-color: #ff0000;
}
    
.inter_Div{

    box-sizing: border-box;
    /*background-color: greenyellow; */
    
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0px solid orange;
    position: absolute;
    float: left;
    top:0px;
    left:0px;
    transition: width 0.7s;
    transition-timing-function: ease;
 
}
    
    
    
/*.canvas_p5JS{*/
canvas{
    
    position:relative;
    box-sizing: border-box;
    float:left;
    top:0;
    left:0;
    width:10%;
    height:100%;
    z-index:-1;
    border:0px solid blue;
    
}
    

 /*/////////////////////////////////////////////////////////////////////////
 /////////////////////////////////////////////////////////////////////////
 PROJETOS */
    
    
.img_project{
    width:70%;
        
    transform: scale(1,1);
    position: absolute;
    filter: blur(0px);
    border: 0px solid red;
    opacity: 1;
    
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
        
    transition: all  0.4s;
    transition-timing-function: ease;
        
}
    
.titulo_project{
    font: 200%'gotham-bold';
    color: #1b1b1b;
    height: 5%;
     position: absolute;
    top: 0;
    bottom: 0;   
    margin: auto;
    width:100%;
     transform: scale(0.9,0.9);
    text-align: center;
    border: 0px solid red;
    opacity: 0;
        
    transition: all  0.4s;
    transition-timing-function: ease;
}
    
    
.subTitulo_project{
    font: 120% 'gotham-bold';
    color: #1b1b1b;
    width:100%;
    padding: 0%;
    position: absolute;
    text-align: center;
     bottom: 10%;
    border: 0px solid red;
    opacity: 0;
    
    transition: opacity 0.4s;
    transition-timing-function: ease;
 }
    
    
.div_over{
        
    background-color: #ffffff;
    opacity: 0;
    border:0px solid red;
    width: 100%;
    height: 100%;
    position: absolute;
        
    cursor: pointer;
}
        
    
.div_light{
    
    background-color: #ffffff;
    opacity: 0;
    border:0px solid red;
    width: 100%;
    height: 100%;
    position: absolute;
    
    transition: opacity 0.4s;
     transition-timing-function: ease;
    
}

/*     
.divSaida{
    position: fixed;
    left:0px;
    top:0px;
    opacity: 1;
    background-color:ffffff; 
        
    z-index:200;
    border:0px solid red;
    transform-origin: bottom;
    transform: scale(1,0);
    transition: transform  0.8s;
    transition-timing-function: ease;
}
     */