@font-face {
  font-family: "ralewaySemiBold";
  src: url("../fonts/raleway/Raleway-SemiBold.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayThin";
  src: url("../fonts/raleway/Raleway-Thin.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayExtraBold";
  src: url("../fonts/raleway/Raleway-ExtraBold.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayBlack";
  src: url("../fonts/raleway/Raleway-Black.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayBlackItalic";
  src: url("../fonts/raleway/Raleway-BlackItalic.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayBold";
  src: url("../fonts/raleway/Raleway-Bold.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayBoldItalic";
  src: url("../fonts/raleway/Raleway-BoldItalic.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayExtraLightItalic";
  src: url("../fonts/raleway/Raleway-ExtraLightItalic.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayItalic";
  src: url("../fonts/raleway/Raleway-Italic.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayExtraLight";
  src: url("../fonts/raleway/Raleway-ExtraLight.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayLight";
  src: url("../fonts/raleway/Raleway-Light.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayLightItalic";
  src: url("../fonts/raleway/Raleway-LightItalic.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayMedium";
  src: url("../fonts/raleway/Raleway-Medium.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayMediumItalic";
  src: url("../fonts/raleway/Raleway-MediumItalic.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayRegular";
  src: url("../fonts/raleway/Raleway-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewaySemiBoldItalic";
  src: url("../fonts/raleway/Raleway-SemiBoldItalic.ttf");
  font-display: swap;
}

@font-face {
  font-family: "ralewayThinItalic";
  src: url("../fonts/raleway/Raleway-ThinItalic.ttf");
  font-display: swap;
}

#parallax__container {

  padding-top: 300px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;

  /*
  height: 800px;
  overflow: hidden;
  position: relative;
*/
}

.backgr {
  background: linear-gradient(to top, #ffffff, #c2cde4);
  width: 100%;
  height: 800px;
  position: fixed;
  background-position: bottom center;
  background-size: auto 1000px;
  background-repeat: no-repeat;
  width: 100%;
  z-index: -1;
}

.layer {
  background-position: bottom center;
  background-size: auto;
  background-repeat: no-repeat center;
  width: 100%;
  height: 800px;
  position: fixed;
  z-index: -1;
}

#parallax__container,
.layer1 {
  background-image: url(../img/layer0.png);
}

/*Voda + koleso*/
.layer2 {
  background-image: url(../img/layer1_main.png);
  margin-top: -1.8%;
  z-index: -1;
}

/* Bliki na vode */
.layer3 {
  background-image: url(../img/layer2.png);
}

/*Propelleri + zeleniy holm*/
.layer4 {
  position: fixed;
  background-image: url(../img/layer3.png);
  margin-top: 3%;
}

/*  Dopolnitelnie holmu*/
.layer5 {
  background-image: url(../img/layer4.png);
  margin-top: 4%;
}

/*Tuchki*/
.layer6 {
  background-image: url(../img/layer5.png);
  margin-top: 47%;
}

/*Solnechnie batarei + holm*/
.layer7 {
  background-image: url(../img/layer6.png);
  margin-top: 9%;
}

.layer8 {
  background-image: url(../img/layer7.png);
  margin-top: 5%;
}

.layer9 {
  background-image: url(../img/clouds_d.png);
  margin-top: -49%;
  z-index: -1;
}

.arka {
  width: 300px;
  margin-top: 47%;
  margin-left: 42%;
}

.propeller {
  transform-origin: rotate(180deg);
  position: fixed;
}

.prop1 {
  margin-top: 268px;
  margin-right: 414px;
  margin-bottom: 0px;
  margin-left: 414px;
}

.prop2 {
  margin-top: 61px;
  margin-right: 201px;
  margin-bottom: 1px;
  margin-left: 201px;
}

.prop3 {
  margin-top: 200px;
  margin-right: 97px;
  margin-bottom: 0px;
  margin-left: 97px;
}

img.propeller {
  animation: 15s linear 0s normal none infinite running propeller;
  -webkit-animation: 15s linear 0s normal none infinite running propeller;
  width: 111px;
}

.wheel {
  margin: 12% 0% 0% 0%;
  float: right;
}

@media (min-width: 0px) {
  .layer {
    display: none;
  }

  #parallax__container {
    height: 0px;
  }

  .wheel {
    display: none;
  }
}

@media (min-width: 1200px) {
  .layer {
    display: block;
  }

  #parallax__container {
    height: 800px;
  }

  .wheel {
    display: block;
  }
}

@media (min-width: 1980px) {
  .layer {
    display: none;
  }

  #parallax__container {
    height: 0px;
  }

  .wheel {
    display: none;
  }
}


@media (min-width: 1990px) {
  .layer {
    display: none;
  }

  .wheel {
    display: none;
  }

  #parallax__container {
    height: 0px;
  }

}


@media screen and (min-width: 1850px) and (max-width: 1920px) {
  .wheel {
    margin: 13% 4% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1800px) and (max-width: 1850px) {
  .wheel {
    margin: 13.5% 3% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1750px) and (max-width: 1800px) {
  .wheel {
    margin: 13.5% 2% 0% 0%;
    ;
    float: right;
  }
}

@media screen and (min-width: 1700px) and (max-width: 1750px) {
  .wheel {
    margin: 14% 0% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1650px) and (max-width: 1700px) {
  .wheel {
    margin: 14.5% -2% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1650px) {
  .wheel {
    margin: 15% -4% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1550px) and (max-width: 1600px) {
  .wheel {
    margin: 15.8% -6% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1500px) and (max-width: 1550px) {
  .wheel {
    margin: 16.3% -8% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1450px) and (max-width: 1500px) {
  .wheel {
    margin: 16.6% -9% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1450px) {
  .wheel {
    margin: 17.3% -12% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1350px) and (max-width: 1400px) {
  .wheel {
    margin: 17.9% -14% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1300px) and (max-width: 1350px) {
  .wheel {
    margin: 18.4% -15% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1250px) and (max-width: 1300px) {
  .wheel {
    margin: 19.5% -19% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1250px) {
  .wheel {
    margin: 19.9% -20% 0% 0%;
    float: right;
  }
}

@media screen and (min-width: 1790px) and (max-width: 1850px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 52%;
    /*28%;*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 10%;
  }

  .arka {
    width: 300px;
    margin-top: 52%;
    margin-left: 42%;
  }

}

@media screen and (min-width: 1675px) and (max-width: 1790px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 52%;
    /*28%;*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 10%;
  }

  .arka {
    width: 300px;
    margin-top: 52%;
    margin-left: 42%;
  }

}

@media screen and (min-width: 1600px) and (max-width: 1675px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 56%;
    /*29*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 10%;
  }

  .arka {
    width: 300px;
    margin-top: 56%;
    margin-left: 42%;
  }

}

@media screen and (min-width: 1550px) and (max-width: 1600px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 57%;
    /*29*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 10%;
  }

  .arka {
    width: 300px;
    margin-top: 58%;
    margin-left: 42%;
  }

}

@media screen and (min-width: 1500px) and (max-width: 1550px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 59%;
    /*31*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 11%;
  }

  .arka {
    width: 300px;
    margin-top: 58%;
    margin-left: 42%;
  }

}

@media screen and (min-width: 1450px) and (max-width: 1500px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 61%;
    /*31*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 11%;
  }

  .arka {
    width: 300px;
    margin-top: 60%;
    margin-left: 42%;
  }

}

@media screen and (min-width: 1400px) and (max-width: 1450px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 64%;
    /*32*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 11%;
  }

  .arka {
    width: 300px;
    margin-top: 62%;
    margin-left: 42%;
  }
}

@media screen and (min-width: 1350px) and (max-width: 1400px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 66%;
    /*34*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 12%;
  }

  .arka {
    width: 300px;
    margin-top: 65%;
    margin-left: 42%;
  }
}

@media screen and (min-width: 1300px) and (max-width: 1350px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 68%;
    /*35*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 12%;
  }

  .arka {
    width: 300px;
    margin-top: 68%;
    margin-left: 42%;
  }
}

@media screen and (min-width: 1250px) and (max-width: 1300px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 72%;
    /*36*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 12%;
  }

  .arka {
    width: 300px;
    margin-top: 71%;
    margin-left: 42%;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1250px) {
  .layer6 {
    background-image: url(../img/layer5.png);
    margin-top: 73%;
    /*39*/
  }

  .layer7 {
    background-image: url(../img/layer6.png);
    margin-top: 13%;
  }

  .arka {
    width: 300px;
    margin-top: 71%;
    margin-left: 42%;
  }
}

@keyframes propeller {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes propeller {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.turbine-wheel {
  animation: 40s linear 0s normal none infinite running turbine-wheel;
  -webkit-animation: 40s linear 0s normal none infinite running turbine-wheel;
  width: 150px;
  position: relative;
}

.turbine-circle {
  /*animation: 8s linear 0s normal none infinite running turbine-circle;*/
  /*-webkit-animation: 8s linear 0s normal none infinite running turbine-circle;*/
  margin-left: -34.5%;
  width: 150px;
  position: relative;
}

.turbine-centre {
  margin-left: -32.9%;
  width: 139px;
  position: relative;
}

@keyframes turbine-centre {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes turbine-centre {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes turbine-wheel {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes turbine-wheel {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes turbine-circle {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes turbine-circle {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}