@font-face {
    font-family: Akkurat;
    src: url(../fonts/hinted-Akkurat-Light.woff2) format('woff2'), url(../fonts/hinted-Akkurat-Light.woff) format('woff');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: Akkurat;
    src: url(../fonts/hinted-Akkurat-Bold.woff2) format('woff2'), url(../fonts/hinted-Akkurat-Bold.woff) format('woff');
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Baskerville;
    src: url(../fonts/hinted-Baskerville-Italic.woff2) format('woff2'), url(../fonts/hinted-Baskerville-Italic.woff) format('woff');
    font-weight: 400;
    font-style: italic
}

body,
html {
    position: relative;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0
}

body {
    font-family: Akkurat, sans-serif !important;
    font-weight: 300;
    background: linear-gradient(180deg, #803d9c 0, #d4145a 10%, #ec1b26 20%, #f36424 30%, #f7931e 40%, #ffdf18 50%, #8cc63f 60%, #06a352 70%, #00a99d 80%, #233e99 90%, #1b1464 100%);
    color: #000 !important
}

:focus {
    outline: 0 !important
}

a {
    color: inherit !important
}

.bg-black {
    background-color: #000 !important
}

.bg-black-overlay:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000
}

.i-quote {
    font-family: Baskerville, serif !important;
    font-style: italic !important
}

.col-24 {
    width: 100%
}

.invert {
    filter: invert(1)
}

.blur {
    filter: blur(.5rem);
    -webkit-filter: blur(.5rem)
}

.text-black,
.text-dark {
    color: #000 !important
}

.text-underline {
    text-decoration: underline !important
}

.c-h1 {
    font-size: calc(3vw + 9rem)
}

.c-h2 {
    font-size: calc(1vw + 2.5rem)
}

.c-h3 {
    font-size: calc(2.413vw + .24rem)
}

.c-h4 {
    font-size: calc(1vw + 1.5rem)
}

.c-h5 {
    font-size: calc(.33vw + .66rem)
}

.c-h6 {
    font-size: calc(.5vw + .5rem)
}

.h-15 {
    height: 15% !important
}

.h-17 {
    height: 17% !important
}

.h-20 {
    height: 20% !important
}

.h-30 {
    height: 30% !important
}

.h-33 {
    height: 33% !important
}

.h-35 {
    height: 35% !important
}

.h-40 {
    height: 40% !important
}

.h-45 {
    height: 45% !important
}

.h-47 {
    height: 47% !important
}

.h-54 {
    height: 54% !important
}

.h-60 {
    height: 60% !important
}

@media (max-width:992px) {
    .h-10-lg {
        height: 10% !important
    }

    .h-33-lg {
        height: 33% !important
    }
}

.black-sudo-bar:before {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    background: #000;
    width: 3px;
    height: 100%;
    z-index: -1
}

.z-1 {
    z-index: 1 !important
}

.page-number {
    margin-top: -2rem;
    position: absolute;
    right: 2rem;
    top: 0
}

.border-7per8 {
    background: linear-gradient(90deg, #803d9c 0, #d4145a 10%, #ec1b26 20%, #f36424 30%, #f7931e 40%, #ffdf18 50%, #8cc63f 60%, #06a352 70%, #00a99d 80%, #233e99 90%, #1b1464 100%)
}

.border-right.border-dark {
    border-right: 1px solid #000 !important
}

.client-logo {
    width: calc(5vw + 5rem)
}

.vertical-logo>.swiper-wrapper {
    transition-timing-function: linear !important
}

.swiper-container {
    width: 100%;
    height: 100%
}

.swiper-slide {
    background: #fff
}

.main-pagination>.swiper-pagination-bullet {
    display: none
}

.main-pagination>.swiper-pagination-bullet:first-child {
    display: block !important
}

.main-navigation-next {
    width: 0
}

.main-navigation-next:after {
    opacity: 0;
    display: none
}

.arrow-next {
    position: absolute;
    top: 30%;
    right: .6rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.arrow-next:before {
    content: '';
    position: absolute;
    right: .5rem;
    top: 0;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: .5rem;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.arrow-next:after {
    content: '';
    position: absolute;
    right: .4rem;
    top: .5rem;
    height: 2px;
    width: 45px;
    background-color: #fff
}

.arrow-prev {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center
}

.arrow-prev:before {
    content: '';
    position: absolute;
    right: -5px;
    top: -.6rem;
    border: solid #000;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: .5rem;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg)
}

.arrow-prev:after {
    content: '';
    position: absolute;
    right: -0.7rem;
    top: -0.1rem;
    height: 2px;
    width: 25px;
    background-color: #000
}

.main-slider {
    width: 100% !important;
    height: 100% !important
}

.main-slider>.swiper-wrapper>.swiper-slide {
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important
}

.main-slider>.swiper-wrapper>.swiper-slide:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, .33)*/
}

.main-slider-pagination {
    text-align: right !important;
    width: 5rem !important;
    top: auto !important;
    right: .5rem !important;
    left: auto !important;
    bottom: 5px !important;
    display: flex;
    align-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap
}

.main-slider-pagination>.swiper-pagination-bullet {
    border: 1px solid #fff;
    opacity: 1 !important;
    background: 0 0 !important;
    height: 10px !important;
    width: 10px !important;
    margin: 2px 1px !important
}

.main-slider-pagination>.swiper-pagination-bullet-active {
    background: #fff !important
}

.rainbow-border-left {
    border-right: 0 solid;
    border-left: 5px solid;
    border-top: 0 solid;
    border-bottom: 0 solid;
    border-image-source: linear-gradient(180deg, #803d9c 0, #d4145a 10%, #ec1b26 20%, #f36424 30%, #f7931e 40%, #ffdf18 50%, #8cc63f 60%, #06a352 70%, #00a99d 80%, #233e99 90%, #1b1464 100%);
    border-image-slice: 1
}

.rainbow-border-right {
    border-right: 5px solid;
    border-left: 0 solid;
    border-top: 0 solid;
    border-bottom: 0 solid;
    border-image-source: linear-gradient(180deg, #803d9c 0, #d4145a 10%, #ec1b26 20%, #f36424 30%, #f7931e 40%, #ffdf18 50%, #8cc63f 60%, #06a352 70%, #00a99d 80%, #233e99 90%, #1b1464 100%);
    border-image-slice: 1
}

.rainbow-border-top {
    border-right: 0 solid;
    border-left: 0 solid;
    border-top: 5px solid;
    border-bottom: 0 solid;
    border-image-source: linear-gradient(-90deg, #803d9c 0, #d4145a 10%, #ec1b26 20%, #f36424 30%, #f7931e 40%, #ffdf18 50%, #8cc63f 60%, #06a352 70%, #00a99d 80%, #233e99 90%, #1b1464 100%);
    border-image-slice: 1
}

.nav-menu {
    width: 100%;
    height: 100%;
    overflow-y: scroll !important
}

.nav-menu.night-time {
    background-color: #000 !important;
    color: #fff !important
}

.nav-menu.night-time+.close-button>#close-cross {
    stroke: #fff !important
}

.nav-menu.night-time .main-logo {
    /*filter: invert(1)*/
}

.nav-menu.day-time {
    background-color: #fff !important;
    color: #000 !important
}

.nav-menu.day-time+.close-button>#close-cross {
    stroke: #000 !important
}

.vertical-title {
    width: 9vh;
    z-index: 1
}

@media (max-width:576px) {
    .vertical-title {
        width: 8vh !important
    }
}

.trigger-bar {
    cursor: pointer !important
}

.open-button {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0 !important;
    z-index: 1002;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.openButtonTrigger>.open-button>.trigger-bar {
    animation: closeButtonAnim 1001ms ease 0s forwards
}

.show-menu.openButtonTrigger>.open-button>.trigger-bar {
    animation: openButtonAnim 1000ms ease 0s forwards
}

@keyframes openButtonAnim {
    0% {
        transform: translateX(0);
        background-color: #fff
    }

    25% {
        transform: translateX(-44px)
    }

    50% {
        background-color: grey
    }

    75% {
        transform: translateX(-44px)
    }

    100% {
        transform: translateX(0);
        background-color: #000
    }
}

@keyframes closeButtonAnim {
    0% {
        transform: translateX(0);
        background-color: #000
    }

    25% {
        transform: translateX(-44px)
    }

    50% {
        background-color: grey
    }

    75% {
        transform: translateX(-44px)
    }

    100% {
        transform: translateX(0);
        background-color: #fff
    }
}

.back-to-start,
.trigger-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 44px;
    background-color: #fff;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.back-to-start {
    width: 60px !important
}

.burger-bars>.swiper-pagination>.swiper-pagination-bullet {
    width: 100px !important;
    height: 100px !important;
    border-radius: 0 !important;
    background: 0 0 !important;
    opacity: 0 !important
}

.back-to-start {
    right: -4px !important;
    left: auto !important
}

.burger-bars {
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.bars,
.bars:after,
.bars:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 24px;
    background-color: #000
}

.bars:before {
    margin-left: 4px
}

.bars:after {
    margin-left: -4px
}

.openButtonTrigger>.open-button>.trigger-bar>.burger-bars>.bars,
.openButtonTrigger>.open-button>.trigger-bar>.burger-bars>.bars:after,
.openButtonTrigger>.open-button>.trigger-bar>.burger-bars>.bars:before {
    animation: whiteBurgerBar 1000ms ease 0s forwards
}

@keyframes whiteBurgerBar {
    0% {
        background-color: #fff
    }

    50% {
        background-color: grey
    }

    100% {
        background-color: #000
    }
}

.show-menu.openButtonTrigger>.open-button>.trigger-bar>.burger-bars>.bars,
.show-menu.openButtonTrigger>.open-button>.trigger-bar>.burger-bars>.bars:after,
.show-menu.openButtonTrigger>.open-button>.trigger-bar>.burger-bars>.bars:before {
    animation: blackBurgerBar 1001ms ease 0s forwards
}

@keyframes blackBurgerBar {
    0% {
        background-color: #000
    }

    50% {
        background-color: grey
    }

    100% {
        background-color: #fff
    }
}

.navbar-logo {
    width: 4rem;
    position: absolute;
    top: 2rem;
    left: -.75rem
}

.navbar-logo-footer {
    width: 4rem;
    position: absolute;
    bottom: 2.4rem;
    left: -6px;
}

.navbar-logo-footer>img,
.navbar-logo>img {
    transform: rotate(-90deg)
}

.main-logo {
    width: calc(3.5vw + 4.5rem)
}

.main-slider-logo {
    width: calc(11vw + 2rem)
}

.openButtonTrigger>.open-button>.trigger-bar>.navbar-logo>img {
    animation: whiteNavLogo 1000ms ease 0s forwards
}

.show-menu.openButtonTrigger>.open-button>.trigger-bar>.navbar-logo>img {
    animation: blackNavLogo 1001ms ease 0s forwards
}

@keyframes blackNavLogo {
    0% {
        filter: none
    }

    50% {
        filter: invert(.5)
    }

    100% {
        filter: invert(1)
    }
}

@keyframes whiteNavLogo {
    0% {
        filter: invert(1)
    }

    50% {
        filter: invert(.5)
    }

    100% {
        filter: none
    }
}

.copyright-7per8,
.footer-tag {
    position: absolute;
    bottom: 11.87rem;
    left: -10.24rem;
    transform: rotate(-90deg);
    width: 23rem;
    display: flex;
    align-items: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.footer-tag {
    top: 3.5rem !important;
    bottom: auto !important;
    left: -1.85rem;
    width: 7rem !important;
    cursor: pointer !important
}

.copyright-7per8>.content {
    font-size: calc(.11vw + .66rem)
}

.footer-tag>small {
    font-size: 1.13rem
}

.openButtonTrigger>.open-button>.trigger-bar>.copyright-7per8>.content {
    animation: whiteCopyText 1000ms ease 0s forwards
}

.show-menu.openButtonTrigger>.open-button>.trigger-bar>.copyright-7per8>.content {
    animation: blackCopyText 1001ms ease 0s forwards
}

.copyright-7per8>.content>.credits {
    line-height: .53
}

.copyright-7per8>.content>.credits>.developed-by {
    color: #999 !important;
    font-size: calc(.1vw + .53rem);
    padding: 0 .1rem
}

.copyright-7per8>.content>.credits>.waheedos-com {
    color: #666 !important;
    font-size: calc(.1vw + .53rem)
}

.show-menu.openButtonTrigger>.open-button>.trigger-bar>.copyright-7per8>.content>.credits>.developed-by {
    color: #aaa !important
}

.show-menu.openButtonTrigger>.open-button>.trigger-bar>.copyright-7per8>.content>.credits>.waheedos-com {
    color: #ccc !important
}

@keyframes whiteCopyText {
    0% {
        color: #fff
    }

    50% {
        color: grey
    }

    100% {
        color: #000
    }
}

@keyframes blackCopyText {
    0% {
        color: #000
    }

    50% {
        color: grey
    }

    100% {
        color: #fff
    }
}

#close-button {
    width: calc(3.5vw + 2.5rem);
    height: calc(3.5vw + 2.5rem);
    top: calc(1.3vw + .24rem);
    right: calc(1.3vw + .24rem);
    cursor: pointer
}

#close-button,
#close-button div {
    position: absolute
}

#close-arrow svg,
#close-cross svg {
    fill: #fff
}

#close-circle-w {
    will-change: transform
}

.openButtonTrigger>.open-button>.menu-wrap>#close-button>#close-circle-w {
    animation: rotateCircleClose 1000ms ease 0s forwards
}

.show-menu.openButtonTrigger>.open-button>.menu-wrap>#close-button>#close-circle-w {
    animation: rotateCircle 1.7s ease 0s forwards
}

@keyframes rotateCircle {
    0% {
        transform: rotate(0) scale(-1)
    }

    50% {
        transform: rotate(0) scale(-1)
    }

    100% {
        transform: rotate(-180deg) scale(-1)
    }
}

@keyframes rotateCircleClose {
    0% {
        transform: rotate(-180deg) scale(-1)
    }

    50% {
        transform: rotate(0) scale(-1)
    }

    100% {
        transform: rotate(0) scale(-1)
    }
}

svg {
    width: 100% !important;
    height: 100% !important
}

#close-circle {
    fill: none;
    stroke-width: calc(.33vw + .33rem);
    opacity: 1;
    stroke-dasharray: 1281.77
}

.openButtonTrigger>.open-button>.menu-wrap>.close-button>#close-circle-w>svg>#close-circle {
    animation: circleDrawClose 1000ms ease 0s forwards
}

.show-menu.openButtonTrigger>.open-button>.menu-wrap>.close-button>#close-circle-w>svg>#close-circle {
    animation: circleDraw 1.7s ease 0s forwards
}

@keyframes circleDraw {
    0% {
        stroke-dashoffset: 1281.77
    }

    50% {
        stroke-dashoffset: 1281.77
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes circleDrawClose {
    0% {
        stroke-dashoffset: 0
    }

    50% {
        stroke-dashoffset: 1281.77
    }

    100% {
        stroke-dashoffset: 1281.77
    }
}

#close-cross-bottom,
#close-cross-top {
    fill: none;
    stroke-width: calc(.33vw + .33rem);
    opacity: 1;
    stroke-dasharray: 1281.77
}

.openButtonTrigger>.open-button>.menu-wrap>.close-button>#close-cross>svg>#close-cross-top {
    animation: lineDrawClose 1000ms ease 0s forwards
}

.show-menu.openButtonTrigger>.open-button>.menu-wrap>.close-button>#close-cross>svg>#close-cross-top {
    animation: lineDraw 2400ms ease 0s forwards
}

.openButtonTrigger>.open-button>.menu-wrap>.close-button>#close-cross>svg>#close-cross-bottom {
    animation: lineDrawClose 1000ms ease 0s forwards
}

.show-menu.openButtonTrigger>.open-button>.menu-wrap>.close-button>#close-cross>svg>#close-cross-bottom {
    animation: lineDraw 2400ms ease 0s forwards
}

@keyframes lineDraw {
    0% {
        stroke-dashoffset: 1281.77
    }

    50% {
        stroke-dashoffset: 1281.77
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes lineDrawClose {
    0% {
        stroke-dashoffset: 0
    }

    50% {
        stroke-dashoffset: 1281.77
    }

    100% {
        stroke-dashoffset: 1281.77
    }
}

.rainbow-circle {
    content: '';
    position: absolute;
    width: 75px;
    height: 75px;
    border: double 2px transparent;
    border-radius: 100%;
    background-image: linear-gradient(white, #fff), linear-gradient(90deg, #803d9c 0, #d4145a 10%, #ec1b26 20%, #f36424 30%, #f7931e 40%, #ffdf18 50%, #8cc63f 60%, #06a352 70%, #00a99d 80%, #233e99 90%, #1b1464 100%);
    background-origin: border-box;
    background-clip: content-box, border-box
}

.nav-menu.night-time+.close-button:after,
.nav-menu.night-time+.close-button:before {
    background-color: #fff
}

.nav-menu.night-time+.close-button>.rainbow-circle {
    background-image: linear-gradient(black, #000), linear-gradient(90deg, #803d9c 0, #d4145a 10%, #ec1b26 20%, #f36424 30%, #f7931e 40%, #ffdf18 50%, #8cc63f 60%, #06a352 70%, #00a99d 80%, #233e99 90%, #1b1464 100%) !important
}

@media (max-width:991px) {
    .rainbow-circle {
        width: 35px;
        height: 35px
    }
}

.menu-wrap {
    position: absolute;
    z-index: -1;
    width: calc(100vw - 44px);
    height: 100%;
    left: 44px;
    font-size: 1.15em;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

.openButtonTrigger>.open-button>.menu-wrap {
    animation: menuWrapAnimClose 1001ms ease 0s forwards
}

.show-menu.openButtonTrigger>.open-button>.menu-wrap {
    animation: menuWrapAnim 1000ms ease 0s forwards
}

@keyframes menuWrapAnim {
    0% {
        transform: translateX(-100%)
    }

    25% {
        transform: translateX(calc(-100% - 44px))
    }

    50% {
        transform: translateX(calc(-100% - 44px))
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes menuWrapAnimClose {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(calc(-100% - 44px))
    }

    75% {
        transform: translateX(calc(-100% - 44px))
    }

    100% {
        transform: translateX(-100%)
    }
}

.content-wrap {
    width: calc(100vw - 44px);
    -webkit-transform: translateX(44px);
    transform: translateX(44px)
}

.openButtonTrigger>.content-wrap {
    animation: contentWrapAnimClose 1001ms ease 0s forwards
}

.show-menu.openButtonTrigger>.content-wrap {
    animation: contentWrapAnim 1000ms ease 0s forwards
}

@keyframes contentWrapAnim {
    0% {
        transform: translateX(44px)
    }

    25% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(100% + 44px))
    }
}

@keyframes contentWrapAnimClose {
    0% {
        transform: translateX(calc(100% + 44px))
    }

    50% {
        transform: translateX(0)
    }

    75% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(44px)
    }
}

:root {
    --animate-duration: 1000ms;
    --animate-delay: 1000ms;
    --animate-repeat: 1
}

#aboutService.swiper-slide-visible>div>div>#p-1,
#aboutService.swiper-slide-visible>div>div>#p-2,
#collaboration-2.swiper-slide-visible>div>div>#collaboration-paragraph,
#collaboration-2.swiper-slide-visible>div>div>.line-dash,
#collaboration-2.swiper-slide-visible>div>div>div>#collaboration,
#ethos.swiper-slide-visible>div>div>div>#ethos-7per8,
#ethos.swiper-slide-visible>div>div>div>#principles,
#ethos.swiper-slide-visible>div>div>div>#the-principles,
#exploration-3.swiper-slide-visible>div>div>#exploration-paragraph,
#exploration-3.swiper-slide-visible>div>div>#exploration-quote,
#exploration-3.swiper-slide-visible>div>div>.line-dash,
#exploration-3.swiper-slide-visible>div>div>div>#exploration,
#main-slider.swiper-slide-visible>div>div>div>.main-tagline,
#purpose-1.swiper-slide-visible>div>div>#purpose-paragraph,
#purpose-1.swiper-slide-visible>div>div>#purpose-quote,
#purpose-1.swiper-slide-visible>div>div>.line-dash,
#purpose-1.swiper-slide-visible>div>div>div>#purpose,
#selected-clients-content.swiper-slide-visible>div>div>div>div>div,
#what-we-create-content.swiper-slide-visible>div>div>div>div>div {
    animation: fadeInUp 1.56s ease 0s forwards
}

#selected-clients.swiper-slide-visible>div>img,
#what-we-create.swiper-slide-visible>div>img {
    animation: fadeInLeft 780ms ease 0s forwards
}

#collaboration-2.swiper-slide-visible>div>div>div>#number-2,
#ethos.swiper-slide-visible>div>div>div>#ethos-big,
#exploration-3.swiper-slide-visible>div>div>div>#number-3,
#purpose-1.swiper-slide-visible>div>div>div>#number-1 {
    animation: fadeInDown 1.56s ease 0s forwards
}

.openButtonTrigger>.open-button>#menuWrap>nav.nav-menu>#innerNav>#mainNavWindow>#followUs>div,
.openButtonTrigger>.open-button>#menuWrap>nav.nav-menu>#innerNav>#mainNavWindow>#getInTouch>div,
.openButtonTrigger>.open-button>#menuWrap>nav.nav-menu>#innerNav>#mainNavWindow>#inquiries>div {
    -webkit-animation: fadeOutDown 1000ms ease 0s forwards;
    animation: fadeOutDown 1000ms ease 0s forwards;
    opacity: 0
}

.show-menu.openButtonTrigger>.open-button>#menuWrap>nav.nav-menu>#innerNav>#mainNavWindow>#followUs>div,
.show-menu.openButtonTrigger>.open-button>#menuWrap>nav.nav-menu>#innerNav>#mainNavWindow>#getInTouch>div,
.show-menu.openButtonTrigger>.open-button>#menuWrap>nav.nav-menu>#innerNav>#mainNavWindow>#inquiries>div {
    -webkit-animation: fadeInUp 2400ms ease 0s forwards;
    animation: fadeInUp 2400ms ease 0s forwards
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    75% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    75% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    25% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    25% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.animate {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@-webkit-keyframes bouncy {

    0%,
    100% {
        -webkit-transform: translateX(.1rem)
    }

    50% {
        -webkit-transform: translateX(.6rem)
    }
}

@keyframes bouncy {

    0%,
    100% {
        transform: translateX(.1rem)
    }

    50% {
        transform: translateX(.6rem)
    }
}

.bouncy {
    -webkit-animation-name: bouncy;
    animation-name: bouncy
}

@-webkit-keyframes bounce {

    20%,
    53%,
    80%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}
#close-circle-w{
    height: 100%;
}
#close-cross{
    height: 100%;
}