@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:300');

*,
*::before, *::after {box-sizing: border-box;}
.container_11,h1{position:relative}
.bird,.bird-container{animation-iteration-count:infinite}
.container_11{z-index:1;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:35rem;background-image:linear-gradient(to bottom,rgba(255,168,76,.6) 0,rgba(255,123,13,.6) 100%),url('../images/web-bg.jpg');background-blend-mode:soft-light;background-size:cover;background-position:center center;background-attachment:fixed;padding:2rem}
.bird{background-image:url(../images/bird-cells-new.svg);background-size:auto 100%;width:88px;height:125px;will-change:background-position;animation-name:fly-cycle;animation-timing-function:steps(10)}
.bird--one{animation-duration:1s;animation-delay:-.5s}
.bird--two{animation-duration:.9s;animation-delay:-.75s}
.bird--three{animation-duration:1.25s;animation-delay:-.25s}
.bird--four{animation-duration:1.1s;animation-delay:-.5s}
.bird-container{position:absolute;top:20%;left:-10%;transform:scale(0) translateX(-10vw);will-change:transform;animation-name:fly-right-one;animation-timing-function:linear}
.bird-container--one{animation-duration:15s;animation-delay:0}
.bird-container--two{animation-duration:16s;animation-delay:1s}
.bird-container--three{animation-duration:14.6s;animation-delay:9.5s}
.bird-container--four{animation-duration:16s;animation-delay:10.25s}
@keyframes fly-cycle{100%{background-position:-900px 0}
}
@keyframes fly-right-one{0%{transform:scale(.3) translateX(-10vw)}
10%{transform:translateY(2vh) translateX(10vw) scale(.4)}
20%{transform:translateY(0) translateX(30vw) scale(.5)}
30%{transform:translateY(4vh) translateX(50vw) scale(.6)}
40%{transform:translateY(2vh) translateX(70vw) scale(.6)}
50%{transform:translateY(0) translateX(90vw) scale(.6)}
100%,60%{transform:translateY(0) translateX(110vw) scale(.6)}
}
@keyframes fly-right-two{0%{transform:translateY(-2vh) translateX(-10vw) scale(.5)}
10%{transform:translateY(0) translateX(10vw) scale(.4)}
20%{transform:translateY(-4vh) translateX(30vw) scale(.6)}
30%{transform:translateY(1vh) translateX(50vw) scale(.45)}
40%{transform:translateY(-2.5vh) translateX(70vw) scale(.5)}
50%{transform:translateY(0) translateX(90vw) scale(.45)}
100%,51%{transform:translateY(0) translateX(110vw) scale(.45)}
}