* { margin: 0px; }
* { padding: 0px; }


/* service record */
.height100 { height: 100%; }

/******************************************************************************************/

/* background */

/* #for_background { 
  background-image: linear-gradient(to right bottom, lightgreen, white);
  background-attachment: fixed; 
} */

.image-bg {
  height: 50%;  
  position: relative;
  top: -100%;
}

.image1{
  background-repeat: no-repeat;
  background-image: url('../pictures/years_1.jpg');
  background-size: cover;
}

.image2{
  background-repeat: no-repeat;
  background-image: url('../pictures/years_2.jpg');
  background-size: cover;
}

.image-bg .image-scroll {
  height: 100%;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  transition: all 5s ease-out 0s;
}
.image-bg:hover .image-scroll {
  background-position: center 100%;
}

#first_foto {
  width: 200px;
  height: 267px;
  background-image: url(../pictures/0006_fly_image.jpg);
  border-radius: 10px;
  box-shadow: 10px 10px 10px;
  position: absolute;
  left: 80%;
  top: -300px;
  animation-name: first_fly;
  animation-duration: 15s;
  animation-delay: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 1;
}

@keyframes first_fly {
  0% {transform: rotate(0deg);}
  33% {left: 50%;}
  33% {top: 33%;} 
  60% {top: 55%;}
  100% {transform: rotate(360deg);}
}

#second_foto {
  width: 300px;
  height: 400px;
  background-image: url(../pictures/0007_fly_image.jpg);
  border-radius: 10px;
  box-shadow: 10px 10px 10px;
  position: absolute;
  left: -400px;
  top: 400px;
  animation-name: second_fly;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 1;
}

@keyframes second_fly {
  0% {transform: rotate(0deg);}
  10% {transform: rotate(100deg);}
  35% {left: 60%;}
  25% {top: 0%}
  100% {transform: rotate(-360deg);}
}

#third_foto {
  width: 300px;
  height: 400px;
  background-image: url(../pictures/0008_fly_image.jpg);
  border-radius: 10px;
  box-shadow: 10px 10px 10px;
  position: absolute;
  left: 500px;
  top: 500px;
  animation-name: third_fly;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 1;
}

@keyframes third_fly {
  0% {transform: rotate(20deg);}
  20% {left: -50%; top: -50%;}
  40% {left: 100px; top: 50px;}
  60% {left: 70%; }
  80% {top: 50%; }
  100% {transform: rotate(360deg);}
}

/******************************************************************************************/

/* tables, my buttons */

a{
  display: block;
  font-size: 3.5em;
  line-height: 70px;
  width: 400px;
  height: 70px;
  border-radius: 25px;
  box-shadow: 6px 6px 3px #00AE4C;
  font-family: sans-serif;
  text-decoration: none;
  color: white;
  font-weight: 700;
  -webkit-text-stroke: 3px #00AE4C;
  border: 1px solid #00AE4C;
  letter-spacing: 2px;
  text-align: left;
  text-indent: 35px;
  position: relative;
  z-index: 1;
}  

a span{
  position: relative;
  z-index: 3;
}

a:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: white;
  border-radius: 25px;
  transition: all 3.00s;
}
  
a:hover:after{
  width: 100%;
}

/******************************************************************************************/

/* v razrabotke */

#v_razrabotke { 
  width: 1024px;
  height: 726px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../pictures/v_razrabotke.jpg);
}

/******************************************************************************************/

/* flex-box */

.wrapper{
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}

.wrapper.height100 > a:nth-child(2n){
  display: flex;    
  justify-content: flex-end;
  align-self: flex-end;
  padding-right: 35px;
}