.portfoliohtml{
	margin-top: 110px;
}
.portfolio-title{
	margin-bottom: 10px;
}
.portfolioblock{
	padding: 0px 10px;
	margin-bottom: 20px;
}
.portfoliobox-serch{
  display: grid;
  grid-template-columns: repeat(auto-fill, 440px);
  grid-gap: 2vw;
  text-decoration: none;
  place-content: center;
  /* padding-top: 20px;
  border: 1px solid #3a4953;
  box-shadow: 2px 2px 3px #6f6f6f9c; */

}
.portfoliobox{
	padding: 0px;
	list-style-type: none;
	box-sizing: border-box;
    text-decoration: none;
}
.portfoliobox:hover{
margin-top: -10px;
opacity: 0.9;
}
.video-img{
	position: absolute;
	width: 110px!important;
    height: auto!important;
    margin: auto;
    text-align: center;
    place-content: center;
}
.portfolio-img{ 
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #3a4953;
  padding: 5px;
}
.portfoliobox img{
width: 100%;
    height: 100%;
}


.textslide{
  position: relative;
  background: #eee;
  padding: 14px 0px;
  margin-top: 10px;
  text-align: center;
  width: 100%;
  left: 0;
  bottom: 0;
  box-shadow: 1px 1px 3px #757575c4;
}

.textslide p{ 
  font: 18px/1 Ubuntu, sans-serif;
  color: #3a4953;
  margin: 5px;
  padding: 0;
  font-weight: 600;
}
.sitename{
  color: #9e9e9e!important;
}

.textslide span{ 
  color: #25cb2d;
  text-decoration: underline;
}



























  #okno5 h4{
    text-align: center;
    color: #000000;
    margin-top: 20px;
  }
      #okno5 {
max-width: 1060px;
max-height: 800px;
    overflow: auto;
    text-align: left;
    border-radius: 10px;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    padding: 15px;
    margin-top: 110px;
    margin-bottom: 10px;
    transform: translate3d(0, 0, 0);
    color: #2b2e38;
      }



#proj-1 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
  #okno-proj h4{
    text-align: center;
    color: #000000;
  }
      #okno-proj {
        display: block;
        max-width: 900px;
        border-radius: 10px;
        position: fixed;
        top: 110px;
        right: 0;
        left: 0;
        margin: auto;
        border: 2px solid #043093c9;
        padding: 5px;
        transform: translate3d(0, 0, 0);
        color: #2b2e38;
        background: rgb(58 73 83 / 45%);
        overflow: auto;

      }
.addblock2 {
        max-width: 900px;
        margin: auto;
}
#cross3 {
  width: 40px;
  height: 40px;
  position: relative;
  float: right;
  border-radius: 50px;
  z-index: 10000;
  top: 95px;
  left: 15px;
}

/* #cross3:before, #cross3:after {
  content: "";
  position: absolute;
  z-index: -1;
	background: #565656;
  border-radius: 50px;
  outline: none;
}

#cross3:before {
  left: 55%;
  width: 15%;
  margin-left: -15%;
  height: 100%;
}

#cross3:after {
  top: 55%;
  height: 15%;
  margin-top: -15%;
  width: 100%;
} */
#cross3:hover{
  background-color: #1d419063;
  box-shadow: 0px 0px 10px #1d4190b8;
}
@media screen and (max-width: 450px){
  .portfoliobox-serch {
      display: grid;
      grid-template-columns: repeat(auto-fill, 230px);
      grid-gap: 15px;
      text-decoration: none;
      place-content: center;
  }
	.wrapper {
	    padding: 4px;
	}
	.header__logo_link p {
display: none;
}
}

.styleproj {  backdrop-filter: blur(3px);
				background: rgba(102, 102, 102, 0.5);
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: 10000;
				top: 0;
				left: 0;
				display: none;
			}
.styleproj:target {display: block;}


#proj-1:target {display: block;}


#proj-2 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-2:target {display: block;}

#proj-3 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-3:target {display: block;}

#proj-4 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-4:target {display: block;}

#proj-5 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-5:target {display: block;}

#proj-6 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-6:target {display: block;}

#velzaa {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #velzaa:target {display: block;}

#proj-7 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-7:target {display: block;}

#proj-8 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-8:target {display: block;}

#proj-9 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-9:target {display: block;}

#proj-10 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-10:target {display: block;}

#proj-11 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-11:target {display: block;}

#proj-12 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-12:target {display: block;}

#proj-13 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-13:target {display: block;}
#proj-14 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-14:target {display: block;}

#proj-15 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-15:target {display: block;}

#proj-16 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-16:target {display: block;}

#proj-17 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-17:target {display: block;}

#proj-18 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-18:target {display: block;}

#proj-19 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-19:target {display: block;}

#proj-20 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-20:target {display: block;}

#proj-21 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-21:target {display: block;}

#proj-22 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-22:target {display: block;}

#proj-23 {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: none;
      }
      #proj-23:target {display: block;}