#porc{
    width:100%;
    height: 100% !important;
    position: absolute;
    overflow: hidden;
    margin: -8px;
}
#sas{
    background-image: url(../img/background.png);
    background-size: contain;
    color: white;
    width: 700%;
    height: 110%;
    left: 0%;
    position: relative;
    top: -10%;
}
#birds{
    width: 70px;
    height: 60px;
    position: absolute;
    top: 0;
  z-index: 9999999;
}

@media only screen and (min-width: 767px) and (max-width: 1067px){
#birds{
    width: 50px;
    height: 40px;
    position: absolute;
    top: 0;
  
}
    #tev{
        width: 35% !important;
        height: 25px !important;
        margin-top: -30px !important;
        margin-left: 15px !important;
    }
    #truba_up{
    width: 100%;
    height: 42% !important;
}
    #truba_down{
    width: 100%;
    height: 42% !important;
}
    #modal p {
    font-size: 1.3em !important; 
}
}



#body{
  width: 100%;
    height: 100%;
    
}
#body img{
  width: 100%;
    height: 100%;
    
}
#tev img{
    width: 100%;
    height: 100%;
}
#tev{
    margin-top: -40px;
    margin-left: 28%;
    width: 40%;
    height: 40px;
    animation-name: exa;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    -webkit-transform-origin:50% 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 32px;
}
@keyframes exa{
    from{-webkit-transform:perspective(100) rotate3d(1,0,0,0deg);}
    to{-webkit-transform:perspective(100) rotate3d(1,0,0,80deg);}
}
.fral{
    transform: rotate(-500deg) !important;
    transition: all 1s;
    animation-name: fral;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-iteration-count:2;
}
@keyframes fral{
    from{margin-top: 0px}
    to{margin-top: -100px}
}
.fral_nerqev{
    transform: rotate(-180deg) !important;
    transition: all 4s !important;
    
}





.kayni{
    
    animation-duration: 0s !important;
    animation-direction: alternate !important;
    animation-iteration-count: infinite !important;
}

/*trubeq*/
#truba_1{
    position: absolute;
    height: 80%;
    width: 140px;
    left:40%; 
    z-index: 1111;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: -8px;
}
#truba_2{
    position: absolute;
    height: 80%;
    width: 140px;
    left:60%; 
    z-index: 1111;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: -8px;
}
#truba_3{
    position: absolute;
    height: 80%;
    width: 140px;
    left:80%; 
    z-index: 1111;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: -8px;
}
#hid_trub_4{
    position: absolute;
    width: 100%;
    overflow: hidden;
    margin: -8px;
    height: 80%;
}
#truba_4{
    position: absolute;
    height: 100%;
    width: 140px;
    left:100%; 
    z-index: 1111;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   
}
#truba_5{
    position: absolute;
    height: 100%;
    width: 140px;
    left:115%; 
    z-index: 1111;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   
}
#truba_6{
    position: absolute;
    height: 100%;
    width: 140px;
    left:134%; 
    z-index: 1111;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   
}
#truba_7{
    position: absolute;
    height: 100%;
    width: 140px;
    left:149%; 
    z-index: 1111;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   
}
#truba_down{
    width: 100%;
    height: 43%;
}
#truba_down img{
    height: 100%;
    width: 100%;
}
#truba_up{
    width: 100%;
    height: 43%;
}
#truba_up img{
    height: 100%;
    width: 100%;
}
#truba_down_2{
    width: 100%;
    height: 33%;
}
#truba_down_2 img{
    height: 100%;
    width: 100%;
}
#truba_up_2{
    width: 100%;
    height: 53%;
}
#truba_up_2 img{
    height: 100%;
    width: 100%;
}
#truba_down_3{
    width: 100%;
    height: 38%;
}
#truba_down_3 img{
    height: 100%;
    width: 100%;
}
#truba_up_3{
    width: 100%;
    height: 48%;
}
#truba_up_3 img{
    height: 100%;
    width: 100%;
}
#truba_down_4{
    width: 100%;
    height: 50%;
}
#truba_down_4 img{
    height: 100%;
    width: 100%;
}
#truba_up_4{
    width: 100%;
    height: 36%;
}
#truba_up_4 img{
    height: 100%;
    width: 100%;
}
#truba_down_5{
    width: 100%;
    height: 60%;
}
#truba_down_5 img{
    height: 100%;
    width: 100%;
}
#truba_up_5{
    width: 100%;
    height: 26%;
}
#truba_up_5 img{
    height: 100%;
    width: 100%;
}
#truba_down_6{
    width: 100%;
    height: 40%;
}
#truba_down_6 img{
    height: 100%;
    width: 100%;
}
#truba_up_6{
    width: 100%;
    height: 46%;
}
#truba_up_6 img{
    height: 100%;
    width: 100%;
}
#truba_down_7{
    width: 100%;
    height: 30%;
}
#truba_down_7 img{
    height: 100%;
    width: 100%;
}
#truba_up_7{
    width: 100%;
    height: 56%;
}
#truba_up_7 img{
    height: 100%;
    width: 100%;
}

#atam{
     width:99%;
    height: 80% !important;
    position: absolute;
    overflow: hidden;
    margin: -8px;
    display: flex;
}
#hiden{
    width: 200px;
    height: 100%;
    left: 180%;
    
    position: relative;
    z-index: 11111;
}
#hiden_2{
    width: 200px;
    height: 100%;
    left: 190%;
    position: relative;
    z-index: 11111;
}
#hiden_3{
    width: 200px;
    height: 100%;
    left: 200%;
    position: relative;
    z-index: 11111;
}
#atam_up{
    height: 50%;
    width: 200px;
    position: relative;
    
}
#atam_down{
    height: 50%;
    width: 200px;
    position: absolute;
    overflow: hidden;
    
}
#atam_down img{
    position: relative;
    top:100%;
}
#atam_up_2{
    height: 50%;
    width: 200px;
    position: relative;
    
}
#atam_down_2{
    height: 50%;
    width: 200px;
    position: absolute;
    overflow: hidden;
    
}
#atam_down_2 img{
    position: relative;
    top:100%;
}
#atam_up_3{
    height: 50%;
    width: 200px;
    position: relative;
    
}
#atam_down_3{
    height: 50%;
    width: 200px;
    position: absolute;
    overflow: hidden;
    
}
#atam_down_3 img{
    position: relative;
    top:100%;
}
#atam img{
    width: 100%;
    height: 100%;
    
}

#modal{
    position: absolute;
    z-index: 999999;
    width: 60%;
    height: auto;
    top: 10%;
    bottom: 50%;
    left: 20%;
    right: 0%;
    margin: auto;
    display: none;
}
.speed_new{
    display: block !important;
}
#modal p {
    font-size: 5em;
}
#proggres{
    height: 40px;
    border-radius: 12px;
    width: 20%;
    z-index: 9999999;
    position: absolute;
    margin-left: 40%;
    display: flex;
    justify-content: space-between;
    visibility: hidden;
background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.5, white), color-stop(0.5, #fcfaf0), to(#e0d8b7));
    background-size: 10%;
}
.proggres_new{
    visibility: visible!important;
}
#red{
    height: 100%;
    width:33%;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    
}
#green{
    height: 100%;
    width:33%;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    
}
#yellow{
    height: 100%;
    width: 33%;
    
}
#circel{
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 999999;
    border: 1px solid;
    border-radius: 50%;
    left: 35%;
display: none;
}
@keyframes loader{
    from{transform: rotate(90deg);}
    to{transform: rotate(450deg);}
}
.loader{
    animation-name: loader;
    animation-duration: 10s;
    animation-direction:normal;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
#horiz{
    transform: rotate(90deg);
    
    width: 120%;
    top: 35%;
    height: 10px;
    position: absolute;
    margin-left:-5px;
}
#jam {
    height: 30px;
    width:30px;
    position: absolute;
    margin: 10%;
    text-align: center;
    font-size: 1.6em;
    font-weight: 900;
}
#sub_circle{
    z-index: 1111;
    border: 3px solid;
    border-radius: 50%;
    position: relative;
    width: 10%;
    height: 10%;
    background: yellow;
    margin: 0px;
}
#beasts{
    position: absolute;
    overflow: hidden;
    z-index: 9999;
    width:99%;
    height: 80%;
    margin: -10px;
}
#place_birds{
    height: 100%;
    width: 250%;
    position: absolute;
}
#beast_1{
    height: 60px;
    width: 2%;
    animation-name: beast;
    animation-direction: alternate;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    position: absolute;
    left: 120%;
}
#beast_1 img{
    height: 100%;
    width: 100%;
}
@keyframes beast {
    from{top: 0px;}
    to{top:10px}
}
#heart{
    height: 100%;
}
#heart img{
    left: 115%;
    width: 1.5%;
    height: 40px;
    position: absolute;
    animation-name: heart;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
@keyframes heart{
    from{transform: scale(0.4)}
    to{transform: scale(1.4)}
}

#count{
    position: absolute;
    height: 50px;
    width: 200px;
    text-align: center;
   z-index: 999999;
    display: flex;
    justify-content: space-around;
    
}
#count_b{
    background: rgba(0,0,0,0.5);
    border-radius: 7px;
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 2.5em;
    
}
#min_count_em{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-weight: 900;
    font-size: 1.5em;
    
}
.red_class{
    transform: scale(1.1);
    transition: 0.8s linear;
    color: red;
}