@keyframes ani {
  0% {transform: translateX(-150%);}
  100% {transform: translateY(0);}
}

@keyframes ani2 {
  0% {transform: translateY(-150%);}
  100% {transform: translateY(0);}
}

@keyframes ani3 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.waste {
  width:120px;
}

.animateright {
  opacity: 0;
}

.animateleft {
  opacity: 0;
}

.animateup { 
  opacity: 0;  
}

.animatein {
  opacity: 0;
}

.services{
  width:120px; 
  margin-top:10px;
}

/* background-color:#008fb3;  */
.titlemorning{ 
  background-color: #22293f;
}

.titleheader{
  padding-top: 100px;
  padding-bottom: 5px
  padding-right: 5px;
  padding-left: 5px;
  min-height:400px; 
}

.ani1{
  transform: translateX(-150%);
  animation: ani 1s forwards;
}

.ani2{
  transform: translateY(-150%);
  animation: ani2 1s forwards;
}

.ani3{
  opacity: 0;
  animation: ani3 2.5s forwards;
}

.title2{
  max-width:1200px; 
  margin-right:auto; 
  margin-left:auto;
}

.titletext{
  color:white;
}

.titletitle{
  color: #ffff99;
}

.title2card{
  border:none;
}

.hr{
  width:80%; 
  color: #ffff99;
  height:5px;
}

.title2text{
  color: #869ab8;
}

#footer{
  min-height: 400px;
  padding-top: 120px;
}

.footertext{
  color: white;
}

/* Граница списка отходов */
.wastebordercolor{
  border-color: #ccf5ff;
}

.bottominfomsg{
  color: white;
}

#footertitle{
  margin-bottom:50px;
  padding-top: 35px;  

}

#info {
  padding-top: 80px;
  padding-right: 5px;
  padding-left: 5px;
  min-height:200px;
}

#wastelist{
  max-width:900px; 
  margin-right:auto; 
  margin-left:auto;
  margin-bottom: 30px;
}

#wastelisttypes{
  margin-bottom:50px; 
  padding-top: 30px;
}

#wastelistcards{
  margin-bottom: 50px;
}

#serviceslist{ 
  padding-top:30px;
  padding-bottom:30px;
}

#titletruck{
  margin-top: 70px;
}

#payments{
  margin-top: 30px;
}

/* Цвет нижней части сайта */
.footerbg{
  background-color: #22293f;
}

#sinfo{
  min-height: 250px; 
  padding-top: 50px; 
  padding-bottom: 50px;
}

#info4{
  color:#ffffcc;
}

#navphonenum{
  color: white;
}

.ringing-bell {
    transition: translate(-50%, -50%)
}

.faa-ring {
    color: green;
}

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

    2% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    4% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg)
    }

    6% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }

    8% {
        -webkit-transform: rotate(-22deg);
        transform: rotate(-22deg)
    }

    10% {
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg)
    }

    12% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg)
    }

    14% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }

    16% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg)
    }

    18% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }

    20% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes ring {
    0% {
        -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }

    2% {
        -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    4% {
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg)
    }

    6% {
        -webkit-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
        transform: rotate(18deg)
    }

    8% {
        -webkit-transform: rotate(-22deg);
        -ms-transform: rotate(-22deg);
        transform: rotate(-22deg)
    }

    10% {
        -webkit-transform: rotate(22deg);
        -ms-transform: rotate(22deg);
        transform: rotate(22deg)
    }

    12% {
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg)
    }

    14% {
        -webkit-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
        transform: rotate(18deg)
    }

    16% {
        -webkit-transform: rotate(-12deg);
        -ms-transform: rotate(-12deg);
        transform: rotate(-12deg)
    }

    18% {
        -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
        transform: rotate(12deg)
    }

    20% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.faa-ring.animated,
.faa-ring.animated-hover:hover,
.faa-parent.animated-hover:hover>.faa-ring {
    -webkit-animation: ring 2s ease infinite;
    animation: ring 2s ease infinite;
    transform-origin-x: 50%;
    transform-origin-y: 0px;
    transform-origin-z: initial
}