/*обнуление*/
* {padding: 0;margin: 0;border: 0;}
  *, *:before, :after {-webkit-box-sizing: border-box;box-sizing: border-box;}  
  :focus, :active {outline: none;}  
  a:focus, a:active {outline: none;} 
  nav, footer, header, aside {display: block;} 
  html, body {
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 100%;} 
  input, button, textarea {font-family: inherit;}  
  input::-ms-clear {display: none;}  
  button {cursor: pointer;}
  button::-moz-focus-inner {padding: 0;border: 0;}
  a, a:visited {text-decoration: none;}
  a:hover {text-decoration: none;}
  ul li {list-style: none;}
  img {vertical-align: top;}
  h1, h2, h3, h4, h5, h6 {font-size: inherit;font-weight: inherit;}
/*конец обнуления*/
@font-face{
    font-family: 'Cookie-Regular'; 
    src: url("../fonts/Cookie-Regular.ttf") format("truetype");  
    font-style: normal; 
    font-weight: normal; 
}
@font-face{
    font-family: 'DM Mono'; 
    src: url("../fonts/DMMono-Medium.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: medium;
}
@font-face{
    font-family: 'Nympha Trial'; 
    src: url("../fonts/NymphaTrial-Regular.ttf") format("truetype");  
    font-style: normal; 
    font-weight: normal;
}
body{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.51)), linear-gradient(0deg, #232222, #232222);
    overflow-x:hidden;
    font-display: auto;
}
.container{
    margin: 0 auto;
    width: 1268px;
}
/*snow*/
.smow-anim{
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.snow1{
    width: 7px;
    height: 7px;
    background-color: #aaa9a9;
    border-radius: 50%;
    animation: snow1 18s linear infinite;
    position: absolute;
}
.snow2{
    width: 7px;
    height: 7px;
    background-color: #747272;
    border-radius: 50%;
    animation: snow2 10s linear infinite;
    position:absolute;
}
.snow3{
    width: 7px;
    height: 7px;
    background-color: #f1eded;
    border-radius: 50%;
    animation: snow3 7s linear infinite;
    position: absolute;
}
@keyframes snow1{
    0%{transform: translate(0, 0);}
    20%{transform: translate(50px, 0);}
    40%{transform: translate(0, 50px);}
    60%{transform: translate(-50px, 0);}
    80%{transform: translate(0, -50px);}
    100%{position: 10% 600px, 10% 600px;}
}
@keyframes snow2{
    0%{transform: translate(0, 0);}
    33%{transform: translate(30px, -20px);}
    66%{transform: translate(-30px, -20px);}
    100%{transform: translate(0, 0);}
}
@keyframes snow3{
    0%{transform: translate(0, 0);}
    50%{transform: translate(40px, 30px);}
    100%{transform: translate(0, 0);}
}
/*вставной попап*/
.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 100;
  }
  .popup__area {
    background-color: black;
    opacity: .9;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .popup__body {
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 30px 10px 30px 10px;
    -webkit-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
  }
  .popup__content {
    color: #FFFFFF;
    background-color: #2c2b2b;
    max-width: 800px;
    padding: 30px;
    position: relative;
    -webkit-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
    opacity: 0;
    -webkit-transform: translate(0px, -100%);
            transform: translate(0px, -100%);
  }

  .popup__close {
    position: absolute;
    color: #FFFFFF;
    top: 10px;
    right: 10px;
    text-align: center;
    width: 20px;
    height: 18px;
    -webkit-transition: 0.8s;
    transition: 0.8s;
  }
  .popup__title {
    color: white;
    font-size: 36px;
    padding-top: 35px;
    text-align: center;
    font-family: 'Cookie-Regular';
  }
  .popup__image{
    text-align: center;
    padding: 25px 0;
  }
  .popup__image img{
      object-fit: cover;
      max-width: 90%;
  }
  .popup__image.salo{
    width: 80%;    
    z-index: 200;
  }
  .popup__description {
    width: 90%;
    padding-top: 25px;
    margin-bottom: 20px;
    display: flex;
    margin: 0 auto;
  }

  .popup__item{
    max-width: 45%;
    font-family: 'Nympha Trial';
    font-size: 16px;
    line-height: 20px;
    color: #D6D0CE;
  }
  .popup__item{
      opacity: .8;
  }
  .popup__item.two{
      margin-left: auto;
  }

  .popup:target {
    opacity: 1;
    visibility: visible;
  }
  .popup:target .popup__content {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
    opacity: 1;
  }
  
  .popup__close:hover {
    background-color: #1a1919;
    color: white;
    border: 1px solid #d1d1d1;
  }
/**/
.header{
    width: 98%;
    margin: 0 auto;
    padding: 45px 0 220px 0;
    display: flex;

}
.header a{
    text-decoration: none;
    color: white;
}
.header__ab{
    margin-right: auto;
    font-size: 18px;
    font-family: 'DM Mono';
}
.header__logo{
    margin: 0 auto;
    font-family: 'Cookie-Regular';
    font-size: 44px;
}
.header__cn{
    margin-left: auto;
    font-size: 18px;
    font-family: 'DM Mono';
}
.main-title{
    position: relative;
    width: 60%;
    font-family: 'Nympha Trial';
    color: white;
    font-size: 220px;
    margin: 0 auto;
    z-index: 2;
}
.main__img{
transform: translate(0, 300px);
opacity: 0;
}
.main__img img{
    object-fit: cover;
    max-width: 100%;
    height: auto;
    
}
.main__img._active{
    opacity: 1;
    transform: translate(0, 0);
    transition: 2s;
}
.list{
    margin: 0 auto;
    padding-top: 85px;
    display: flex;
    width: 46%;
}
.list__item{
    line-height: 25px;
}
.list__item.one{margin-right: auto;}
.list__item.two{margin: 0 auto;}
.list__item.three{margin-left: auto;}

.list__suptitle{
    font-size: 16px;
    font-family: 'DM Mono';
    text-align: center;
    color: #D6D0CE;
    opacity: .7;
    text-transform: uppercase;
}
.list__title{
    font-size: 24px;
    text-align: center;
    font-family: 'Nympha Trial';
    color: #D6D0CE;
}
.image-1{
    transform: translate(300px, 0);
    opacity: 0;
}
.image-1 img{
    padding: 150px 0 242px 0;
    object-fit: cover;
    width: 81%;
}
.image-1._active{
    opacity: 1;
    transform: translate(0, 0);
    transition: 2s;
}
.main-title.two{
    color: #8D8D8D;
}
.image-2{
    padding-bottom: 200px;
    position: relative;
    z-index: 2;
    text-align: right;
    transform: translate(-300px, 0);
    opacity: 0;
}
.image-2 img{
    max-width: 81%;
    object-fit: cover;
}
.image-2._active{
    opacity: 1;
    transform: translate(0, 0);
    transition: 2s;
}
.image-3{
    transform: translate(300px, 0);
    opacity: 0;
}
.image-3 img{
    max-width: 81%;
    object-fit: cover;
}
.image-3._active{
    opacity: 1;
    transform: translate(0, 0);
    transition: 2s;
}
.stack{
    display: flex;
    padding-top: 300px;
}
.wrapper{
    margin-left: auto;
}
.image-4{
    text-align: right;
    transform: translate(-300px, 0);
    opacity: 0;
}
.image-4 img{
    object-fit: cover;
    max-width: 90%;
}
.image-4._active{
    opacity: 1;
    transform: translate(0, 0);
    transition: 2s;
}
.image-5{
    transform: translate(300px, 0);
    opacity: 0;
}
.image-5 img{
    object-fit: cover;
    max-width: 90%;
    padding-top: 500px;
}
.image-5._active{
    opacity: 1;
    transform: translate(0, 0);
    transition: 2s;
}
.image-6{
    padding:310px 0 600px 0;
    text-align: right;
    transform: translate(-300px, 0);
    opacity: 0;
}
.image-6 img{
    object-fit: cover;
    max-width: 90%;
}
.image-6._active{
    opacity: 1;
    transform: translate(0, 0);
    transition: 2s;
}
.collage{
    margin: 0 auto;
    width: 80%;
}
.image-7{
    margin: 0 auto;
    text-align: center;
    z-index: 5;  
    position: relative;
    transform: rotate(5deg);
    transform: translate(0, 300px);
    opacity: 0;
}
.image-7 img{
    object-fit: cover;
    max-width: 55%;
}
.image-7._active{
    opacity: 1;
    transform: translate(0, 0);
    transition: 2s;
}
.main-title.s1{
    left: -100px;
    font-size: 280px;
    position: relative;
    bottom: 750px;
    opacity: .2;
}
.main-title.s2{
    left: -100px;
    font-size: 280px;
    position: relative;
    bottom: 450px;
    opacity: .2;
    
}
.main-title.s3{
    left: -100px;
    font-size: 280px;
    position: relative;
    bottom: 150px;
}
.project{
    padding: 500px 0 140px 0;
    margin: 0 auto;
    width: 80%;
}
.image-8{
    transform: rotate(5deg);
    position: relative;
    text-align: center;
    z-index: 1;
    -webkit-filter: brightness(30%);
    transform: translate(0, 300px);
    opacity: 0;
}
.image-8 img{
    object-fit: cover;
    max-width: 100%;
}
.image-8._active{
    opacity: 1;
    transform: translate(0, 0);
    transition: 2s;
}
.main-title.pr{
    position: relative;
    width: 66%;
    bottom: 250px;
    z-index: 15;
    text-align: center;
}

@media (max-width:1200px){
    .container{max-width: 1100px;}
    .main-title{font-size: 200px;}
    .main-title.s1{font-size: 200px;left: -50px;bottom: 650px;}
    .main-title.s2{font-size: 200px;left: -50px;bottom: 350px;}
    .main-title.s3{font-size: 200px;left: -50px;bottom: 50px;}
    .list{width: 70%;}
}

@media (max-width:992px){
    .container{max-width: 820px;}
    .header{padding: 45px 0 180px;}
    .list{width: 90%;}
    .main-title{font-size: 160px;}
    .main-title.s1{font-size: 150px;left: -20px;bottom: 500px;}
    .main-title.s2{font-size: 150px;left: -20px;bottom: 250px;}
    .main-title.s3{font-size: 150px;left: -20px;bottom: 50px;}
    .project{padding: 400px 0 120px;}
}
@media (max-width:776px){
    .container{max-width: 740px;}
    .header{padding: 45px 0 150px;}
    .main-title{font-size: 120px;}
    .list{width: 100%;}
    .image-1 img{padding: 80px 0 142px;}
    .image-2{padding-bottom: 140px;}
    .main-title.s1{font-size: 120px;left: -30px;bottom: 300px;}
    .main-title.s2{font-size: 120px;left: -30px;bottom: 150px;}
    .main-title.s3{font-size: 120px;left: -30px;bottom: 75px;} 
    .stack{padding-top: 150px;}
    .image-5 img{padding-top: 250px;}
    .image-6{padding: 100px 0 300px 0;}
    .project{padding: 250px 0 90px 0;}
    .main-title.pr{font-size:100px;}
}

@media (max-width:540px){
    .container{max-width: 420px;}
    .header{padding: 45px 0 100px;}
    .image-1 img{padding: 50px 0 82px;}
    .image-2{padding-bottom: 80px;}
    .main-title{font-size: 80px;}
    .main-title.s1{font-size: 80px;left: -20px;bottom: 200px;}
    .main-title.s2{font-size: 80px;left: -20px;bottom: 125px;}
    .main-title.s3{font-size: 80px;left: -20px;bottom: 75px;}
    .stack{padding-top: 80px;}
    .image-5 img{padding-top: 150px;}
    .image-6{padding: 70px 0 150px 0;}
    .project{padding: 100px 0 50px;}
    .main-title.pr{font-size:50px;}
}