@keyframes circle1{
  25%{
    transform: translate(20px,0px);
  }
  50%{
    transform: translate(20px,20px);
  }
  75%{
    transform: translate(0px,20px);
  }
  100%{
    transform: translate(0px,0px);
  }
}
@keyframes circle2{
  0%{
    transform: translate(20px,20px);
  }
  25%{
    transform: translate(0px,20px);
  }
  50%{
    transform: translate(0px,0px);
  }
  75%{
    transform: translate(20px,0px);
  }
  100%{
    transform: translate(20px,20px);
  }
}
*{
    margin: 0;
    padding: 0;
}



.bar{
    width:90vw;
    display:flex;
    
  
}






header{
  display:block;

}


#main{
    display:flex;
    padding: 0px 15px;
    justify-content: center;
    
}


.container{
    max-width:100%;
    max-height:100%;
}


#right-panel-buttons{ 
    display:block
}


#block0{
    display:flex;
    
}


#layer-indicator{
    color:white;
    width:bold;
    display:flex;
    justify-content:flex-end;
    
}
#block1{
    display:block;

    
    align-content: center;
    
    
}
#preloader{
    min-width:100%;
    min-height:100%;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:5;
    opacity:0.5;
    background:#8C8C8C;
  position: absolute;
  
}
#id-input-block{
    
    width:100vw;
    height:100vh;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:5;
    opacity:0.8;
    background:#8C8C8C;
  position: absolute;
}
#id-input-block>div{
    font-size:15px;
    display:inline-block;
    opacity:1;
    background-color:white;
    
    padding:20px;
}
#id-input-block>h1{
    font-size:15px;
}
#id-input-block>div>div{
    display:flex;
}
#id-input{
    margin:10px 0px;
    height:20px;
    width:100%;
}

.circle{

  position:absolute;
  border:none;
  border-radius:100%;
  background:#40076B;
  padding:10px;
  animation: circle 3s infinite;
}
#first-circle{
  animation:circle1 2s infinite;
}
#second-circle{
  animation:circle2 2s infinite;
}





#img-block{

  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 700px;
  max-width: 700px;

}
#noneimage{
    max-width:100%;
    max-height:100%;
}




input[type="file"]{
    display:none
}

#escape{
    z-index:3;
    position:absolute;
    width:50px;
    height:50px;
    padding:5px;
}
#escape-btn{
    display:block;
    background:none;
    border:none;
    border-radius:100%;
    max-width:50px;
    transition:1s;
}
#escape-btn img{
    width:100%;
}
#escape:hover #escape-btn{
    cursor:pointer;

}


.work-image{
   min-height:auto;
    max-height: 700px;
    max-width:100%;

    
}
.work{
    max-width:100%;
     display:inline-flex;
    position: relative;
}
.video{
    min-height:auto;
    max-height: 700px;
    max-width:100%;
  }

#block2{
    max-width:100%;
}
#block2 li{
    position:relative;
    list-style:none;
}
#main-btns-menu{
    display:block;
}
.btns-line{
    display:flex;
    align-items:flex-start;
    justify-content:space-around;
    
}
.first-li{
    border-radius:10px 10px 0 0 ;
}
.first-li .btn{
    border-radius:10px 10px 0 0 ;
}

.sub-btns-menu{
    z-index:3;
    position:absolute;
    display:none;
    left:0px;
    bottom:100%;
    color:white;
    transition:1s;
    width:100%;
}
.sub-btns-menu li{
     background:#301945;
}
.btns-menu img{
    max-width:100%;
    max-height:60px;
}

.btns-menu{
    
    background: #1F1D36;
    border:none;
    color:white;
    width:100%;
    max-height:60px;
    font-size: 20px;
    margin:4px;
    transition: 0.5s;
}

.btn{
    width:100%;
    padding: 10px;
     background:#4C3575;
    border:none;
    color:white;
    transition: 0.5s;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    z-index:1;
    font-size: 20px;
}




#block3{
    display:flex;
    justify-content:center;

}
#description-project-input{
    display:block;
    outline:none;
    width:100%;
    font-size:20px;
}