.container{
        display:inline-grid;
        align-items: center;
        width: 100%;
        margin: 10px 0 0 0;
        
        /*height: 100vh;*/
        height: 800px;
        background: #000000;
    }
    
    .container ul{ 
        margin:  -130px 60px auto auto;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
       width: fit-content;
     
   
    }
    
    .container ul li{
        position:relative;
        padding: 10px;
        list-style: none;
         min-width: 440px;
             border-bottom: 1px solid rgba(255,255,255,.5);
    }
    
    
    .container ul li a{
        
        position: relative;
        box-sizing: border-box;
        text-decoration: none;
        color:rgba(255,255,255,.5);
        margin: 0;
        padding: 0;
        transition:0.5s;
        font-size: 26px;
       
        
    }

.container ul li.active a{
        
        position: relative;
        font-style: italic;
        box-sizing: border-box;
        text-decoration: none;
         color:rgba(255,255,255,1);
        margin: 0;
        padding: 0 0 0 20px;
        transition:0.5s;
        font-size: 26px;
        
        
    }

/* encotrar selector de previous div
.container ul li.active ~ #picture.three{
        
    background: url(../imgs/projects/Hero.jpg);
    background-size:cover;   
        
        
    }

  */  

    .container ul li:hover a{
        
        position: relative;
        font-style: italic;
        box-sizing: border-box;
        text-decoration: none;
         color:rgba(255,255,255,1);
        margin: 0;
        padding: 0 0 0 20px;
        transition:0.5s;
        font-size: 26px;
        
    }




 .container ul li:hover img{
        
      opacity: 100%;
        
    }
    
    
  /*  
    .container ul li a:before{
        
        content:attr(data-text); 
        position:absolute;
        top:0;
        left:0;
        width: 0;
       color:rgba(255,255,255,1);
        margin: 0;
        padding: 0;
        overflow: hidden;
        transition: color 0.5s;
         font-size: 26px;
    }*/
    
    .container ul li a:hover:before,
    .container ul li.active a:before{
        width: 100%;
        
        
    }
    
    .container #picture{
        position: absolute;
        top:800;
        left: 0;
        width: 100%;
        /*height: 100vh;*/
        height: 800px;
        transition: 0.5s;
        background: url(../imgs/projects/1979.jpg);
         background-size:cover;
        
    }

.container #picture.one{
    background: url(../imgs/projects/1979.jpg);
    background-size:cover;
     left: 0;
    
}

.container #picture.two{
    background: url(../imgs/projects/FireEscape.jpg);
    background-size:cover;
    
}
.container #picture.three{
    background: url(../imgs/projects/Hero.jpg);
    background-size:cover;
    
}


.container #picture.four{
    background: url(../imgs/projects/Blindfold.jpg);
    background-size:cover;
    
}
.container #picture.five{
    background: url(../imgs/projects/BlockParty.png);
    background-size:cover;
    
}
.container #picture.six{
    background: url(../imgs/projects/Tormenta.png);
    background-size:cover;
    
}
.container #picture.seven{
    background: url(../imgs/projects/BOSE.jpg);
    background-size:cover;
    
}
.container #picture.eight{
    background: url(../imgs/projects/Rapping.jpg);
    background-size:cover;
    
}

.container #picture.nine{
    background: url(../imgs/projects/Jorge.jpg);
    background-size:cover;  
    
}
.container #picture.ten{
    background: url(../imgs/projects/WhoIs.png);
    background-size:cover;      
}




.titleOurTitles{
    width: 260px;
    padding: 0 20px;
    margin:0 0 0 60px;
    float: left;
    z-index: 2;
    
}

@media (min-width: 1301px) {
    
        .container #picture{
        position: absolute;
        top:800;
        left: 0;
        width: 100%;
        /*height: 100vh;*/
        height: 800px;
        transition: 0.5s;
        background: url(../imgs/projects/1979.jpg);
         background-size:cover;
             background-position: bottom;
    
        
    }
    
    
    .container #picture.one, .container #picture.two, .container #picture.three, .container #picture.four, .container #picture.five, .container #picture.six, .container #picture.seven,    .container #picture.eight, .container #picture.nine, .container #picture.ten{
     left: 0;
    background-position: bottom;
    
}
    
    
    
}

/*
.activeImage{
    
    background: red !important;
    position: absolute;
        top:800;
        left: 0;
        width: 100%;
  
        height: 800px;
     
         background-size:cover;
}*/


.container ul li.two.active ~ #picture{
     background: red !important;   
    /*background: url(../imgs/projects/Hero.jpg);*/
    background-size:cover;   
        
        
    }

/*cycler titles*/



#newCyclerDesk {
height: 800px;
    overflow: hidden;

   
    
/*position : relative;
background-size : cover;*/
 
}

  #newCyclerDesk img {
        position :absolute;
        width : 100%;
        margin: 0;
        height: 800px;
        object-fit: cover;


    }

   
    #newCyclerDesk img.active {
        position : absolute;
        z-index : 3;    
        width :100%;
        height: 800px;
        margin: 0;


    }


#contNewHover{
    
    z-index : 100;
height: 800px;
overflow: hidden;

}

#contNewProjectsDesk {
display : inline-block;
height : auto;
padding : 0;
margin : 0;
   
    
}

#contNewTitles {
    height : 800px;
    width : 100%;
    display : block;
    margin : -800px 0 0 0;
    padding : 0;
    z-index : 20;
    border : none;
    position : absolute;
    background-size : cover;
}

  #contNewNavTitles {
        margin : 40px 0;
        display : grid;
    }


.container ul li.activeTitle a{
        
        position: relative;
        font-style: italic;
        box-sizing: border-box;
        text-decoration: none;
         color:rgba(255,255,255,1);
        margin: 0;
        padding: 0 0 0 20px;
        transition:0.5s;
        font-size: 26px;
        
        
    }

#FElink:hover #newpicture{
    
    background: red;
    z-index: 20;
} 




li.one.active .container#picture{
    background: url(../imgs/projects/FireEscape.jpg);
    background-size:cover;  z-index: 20;
    
}