@import url('https://fonts.googleapis.com/css?family=Montserrat:300,900');

::-webkit-scrollbar {
  width: 13px;

  
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
  border: 11px solid transparent;

}

::-webkit-scrollbar-thumb {
  background: #646464;
  -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);
}

::-webkit-scrollbar-thumb:hover {
  background: #aaaaaa;
}

::-webkit-scrollbar-thumb:active {
  background: #888;
  -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
}
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background-color: #FFF8DC;
  }     
    
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;   
}
      /*параметры для смартфонов*/
@media only screen and (max-width:480px) {
ul {
  position: fixed;
  display: block;
  margin-left: 20px;
  margin-top: 35vw;
  z-index: 3;
}
  
.nav {
  position: fixed;
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  transform: rotate(-90deg);
  margin-left: 0px;
  margin-top: 15vw;
  letter-spacing: 0.2vw;
  z-index: 3;
}
  
li {
  content:'';
  height: 40px;
  width: 5px;
  transition: width 0.3s ease-in-out;
}  
  
li:hover  {
   transition: width 0.3s ease-in-out;
   width: 8.3vw;
}
#one {background-color:#DDA0DD;}
#two {background-color:#ADD8E6;}
#three {background-color:#FFB6C1;}
#four {background-color:#98FB98;}
#five {background-color:#00BFFF;}
section {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
  
section .cover {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
section .cover img #start{
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
section .content {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
}
  
section .text {
  width: 100%;
}
  
.leveler {
  position: relative;
  left: 50%;
  top: 30%;
  -webkit-transform: translateZ(0px) translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
  
#start {
  position: absolute;
  padding-top: 70vw;
  margin-left: 15vw;
  width: 70vw;
  overflow: hidden;
  -webkit-animation: rotation 40s infinite linear;
}
  
@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}
img {
  width: 100%;
}
  
#title {
  font-family: 'Montserrat', sans-serif;
  font-size: 9vw;
  margin-top: 31vw;
  margin-left: 17vw;
  line-height: 6vw;
  color: #302c2d;
  opacity: 1;
  animation: move 5s
}
  
@keyframes move {
    from {
      margin-top: 13vw;
      opacity: 0.2;
    }
     to {
      margin-top: 31vw;
      opacity: 1;
    }
  }
  
.uppertext {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.9vw;
  letter-spacing: 0.1vw;
  margin-top: 5vw;
  margin-left: 17vw;
}

 @keyframes expand {
    from {
      width: 0vw;
      opacity: 0;
    }
     to {
      width: 28vw;
      opacity: 1;
    }
  }
 .scroll {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 3vw;
  font-weight: 900;
  letter-spacing: 0.3vw;
  color: #302c2d;
  margin-left: 30vw;
  margin-top: 70vw;
}
  
.square {
  position: relative;
  content:'';
  float: right;
  height: 120vh;
  width: 100vh;
}
  
.paragraph {
  width: 70vw;
  margin-left: 18vw;
  margin-top: 30vw;
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8vw;
  line-height: 3.4vw;
  letter-spacing: 0.3vw;
  color: black;
}
#one1 {
  background: linear-gradient(to bottom right, #000000, #696969);
}
.poster {
  width: 70vw;
  margin-top: 4vw;
  margin-left: 18vw;
  z-index: 1;
}
#mobiletext {
    color: #FFFFFF;
  }  
}
/*параметры для десктопа*/
@media only screen and (min-width:990px) {
  
ul {
  position: fixed;
  display: block;
  margin-left: -200px;
  margin-top: -6vw;
  z-index: 3;
}
  
.nav {
  position: fixed;
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85vw;
  transform: rotate(-90deg);
  margin-left: -245px;
  margin-top: -12vw;
  letter-spacing: 0.2vw;
  z-index: 3;
}
  
li {
  content:'';
  height: 40px;
  width: 5px;
  transition: width 0.3s ease-in-out;
}  
  
li:hover  {
   transition: width 0.3s ease-in-out;
   width: 80px;
}
#one {background-color:#DDA0DD;}
#two {background-color:#ADD8E6;}
#three {background-color:#FFB6C1;}
#four {background-color:#98FB98;}
#five {background-color:#00BFFF;}
section {
  position: relative;
  margin-left: -10px;
  display: block;
  width: 120%;
  height: 60vw;
  overflow: hidden;
}
  
section .cover {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
  
section .cover img #start {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
  
section .content {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
}
  
section .text {
  width: 100%;
}
  
.leveler {
  position: relative;
  left: 50%;
  top: 30%;
  -webkit-transform: translateZ(0px) translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
  
#start {
  position: absolute;
  padding-top: -9vw;
  margin-left: -5px;
  width: 38vw;
  overflow: hidden;
  -webkit-animation: rotation 180s infinite linear;
}
  
@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}
  
img {
  width: 100%;
}
  
#title {
  position: fixed;
  font-family: 'Montserrat', sans-serif;
  font-size: 4.31vw;
  margin-top: 25%;
  margin-left: 2%;
  line-height: 2.63vw;
  color: #302c2d;
  opacity: 1;
  animation: move 3s
}
  
@keyframes move {
    from {
      margin-left: 8vw;
      opacity: 0.3;
    }
     to {
      margin-left: 10vw;
      opacity: 1;
    }
  }
  
.uppertext {
  font-family: 'Montserrat', sans-serif;
  font-size: 1vw;
  letter-spacing: 0.25vw;
  margin-top: 2.63vw;
  margin-left: 10.1vw;
}
  
 @keyframes expand {
    from {
      width: 0vw;
      opacity: 0;
    }
     to {
      width: 13.68vw;
      opacity: 1;
    }
  }
  
.scroll {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.80vw;
  font-weight: 900;
  letter-spacing: 0.1vw;
  color: #302c2d;
  margin-left: 45vw;
  margin-top: 20vw;
}
  
.square {
  position: relative;
  content:'';
  float: left;
  margin-left: 550px;
  height: 120vh;
  width: 300vh;
}
  
.paragraph {
  float: left;
  width: 29.28vw;
  margin-left: 25px;
  margin-top: 4vw;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.31vw;
  line-height: 2vw;
  letter-spacing: 0.2vw;
  color: black;
}
#one1 {
  background: linear-gradient(to bottom right, #000000, #696969);
}
.poster {
  overflow: hidden;
  width: 350px;
  margin-top: 6vw;
  margin-left: 525px;
  z-index: 1;
 filter: drop-shadow(4px 10px 15px #ADD8E6);
}
}