/*------------------------------------------------------------------ * Project: Nepayatri * Author: CN-InfoTech * URL: hthttps://themeforest.net/user/cn-infotech * Created: 03/06/2020 ------------------------------------------------------------------- */ /* ========================================= */ /* Default CSS */ /* ========================================= */ @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap'); * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; box-sizing: border-box; } ol, ul { list-style: none; } :focus { outline: 0; } .clear { clear: both; line-height: 0; font-size: 0; } .clearfix:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; } .clearfix:after .test { color: red; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } html { position: relative; min-height: 100%; } .clearfix { display: block; } header, nav, section, article, aside, footer { display: block; } * { margin: 0; padding: 0; } body { margin: 0; padding: 0; font-size: 15px; font-family: 'Roboto', sans-serif; overflow-x: hidden; } /* Preloader */ .preloader { background-color: #F9B522; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999999; } .preloader .spinner { width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; background-color: #242C33; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /* End Preloader */ h1, h2, h3, h4, h5, h6 { font-weight: 500; color: #333333e8; font-family: 'Poppins', sans-serif; margin-top: 0; line-height: 1.5; margin-bottom: 15px; text-transform: capitalize; } h1 { font-size: 54px; } h2 { font-size: 32px; } h3 { font-size: 21px; } h4 { font-size: 16px; } h5 { font-size: 15px; } h6 { font-size: 13px; } @media(max-width: 991px) { h2 { font-size: 28px; } } @media(max-width: 735px) { h2 { font-size: 24px; } h3 { font-size: 18px; } } @media(max-width: 360px) { h2 { font-size: 21px; } } hr { border: 0.5px solid #444444; } p { font-size: 15px; font-weight: 400; line-height: 24px; margin-bottom: 15px; color: #666; } ul { margin: 0; padding: 0; } ul li { font-size: 16px; font-weight: 400; margin-bottom: 15px; line-height: 24px; color: #666; position: relative; padding: 0; } ol { margin: 0; counter-reset: i; position: relative; } ol li { font-size: 16px; font-weight: 400; margin-bottom: 15px; line-height: 24px; color: #181d31; padding-left: 40px; position: relative; } a { color: #464545; transition: all ease-in-out 0.4s; } a:hover, a:focus { text-decoration: none!important; color: #ef2853; transition: all 0.4s ease; } input[type=text], input[type=email], input[type=number], input[type=search], input[type=password], input[type=tel], input[type=date], input[type=time], textarea, select { font-size: 14px; font-weight: 300; background-color: #fff; border: 1px solid #eee; border-radius: 10px; padding: 10px 20px 10px 20px; width: 100%; color: #444444; margin-bottom: 15px; height: 46px; box-shadow: none; margin-bottom: 0; } input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=search]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=date]:focus, textarea:focus, select:focus { border-color: #ffac00; transition: all 0.5s ease; } select { padding: 10px 20px; } textarea { resize: vertical; height: 120px; } label { display: inline-block; color: #242424; margin-bottom: 8px; font-weight: 400; font-size: 15px; } img { max-width: 100%; } blockquote { font-size: 14px; font-weight: 300; background-color: #287cbc; margin-bottom: 15px; border: none; padding: 30px 70px 30px 70px; line-height: 24px; color: #fff; margin: 20px 0; font-style: italic; position: relative; } blockquote:after { content: ''; position: absolute; height: 60%; width: 2px; background: #fff; top: 20%; left: 35px; } blockquote p { color: #fff; margin: 0; } blockquote:before { content: '\f10d'; font-family: fontawesome; font-size: 45px; position: absolute; bottom: 26px; right: 20px; color: #fff; transform: rotate(180deg); } blockquote span { position: relative; padding-left: 20px; } blockquote span:before { content: ''; width: 12px; height: 1px; background: #ffac00; position: absolute; left: 0; top: 50%; margin-top: -2px; } /*margin none*/ .mar-0 { margin: 0 !important } /*margin top*/ .mar-top-0 { margin-top: 0px } .mar-top-5 { margin-top: 5px } .mar-top-10 { margin-top: 10px!important } .mar-top-15 { margin-top: 15px } .mar-top-20 { margin-top: 20px } .mar-top-25 { margin-top: 25px } .mar-top-30 { margin-top: 30px } .mar-top-40 { margin-top: 40px } .mar-top-50 { margin-top: 50px } .mar-top-60 { margin-top: 60px } .mar-top-70 { margin-top: 70px } /*margin bottom*/ .mar-bottom-0 { margin-bottom: 0px!important; } .mar-bottom-5 { margin-bottom: 5px } .mar-bottom-10 { margin-bottom: 10px!important; } .mar-bottom-15 { margin-bottom: 15px!important; } .mar-bottom-20 { margin-bottom: 20px } .mar-bottom-25 { margin-bottom: 25px } .mar-bottom-30 { margin-bottom: 30px } .mar-bottom-40 { margin-bottom: 40px } .mar-bottom-50 { margin-bottom: 50px } .mar-bottom-60 { margin-bottom: 60px } .mar-bottom-70 { margin-bottom: 70px } .mar-bottom-80 { margin-bottom: 80px } /*margin left*/ .mar-left-0 { margin-left: 0px } .mar-left-5 { margin-left: 129px } .mar-left-10 { margin-left: 10px } .mar-left-15 { margin-left: 15px } .mar-left-20 { margin-left: 20px } .mar-left-25 { margin-left: 25px } .mar-left-30 { margin-left: 30px } .mar-left-40 { margin-left: 40px } .mar-left-50 { margin-left: 50px } /*margin right*/ .mar-right-0 { margin-right: 0px } .mar-right-5 { margin-right: 5px } .mar-right-10 { margin-right: 10px } .mar-right-15 { margin-right: 15px } .mar-right-20 { margin-right: 20px } .mar-right-25 { margin-right: 25px } .mar-right-30 { margin-right: 30px } .mar-right-40 { margin-right: 40px } .mar-right-50 { margin-right: 50px } /*padding*/ .pad-0 { padding: 0!important; } .pad-top-0 { padding-top: 0px !important; } .pad-top-5 { padding-top: 5px } .pad-top-10 { padding-top: 10px } .pad-top-15 { padding-top: 15px } .pad-top-20 { padding-top: 20px } .pad-top-25 { padding-top: 25px } .pad-top-30 { padding-top: 30px; } .pad-top-40 { padding-top: 40px; } .pad-top-50 { padding-top: 50px } .pad-top-60 { padding-top: 60px } .pad-top-70 { padding-top: 70px; } .pad-top-80 { padding-top: 80px; } /*padding bottom*/ .pad-bottom-0 { padding-bottom: 0 !important; } .pad-bottom-5 { padding-bottom: 5px } .pad-bottom-10 { padding-bottom: 10px } .pad-bottom-15 { padding-bottom: 15px } .pad-bottom-20 { padding-bottom: 20px } .pad-bottom-25 { padding-bottom: 25px } .pad-bottom-30 { padding-bottom: 30px } .pad-bottom-40 { padding-bottom: 40px } .pad-bottom-50 { padding-bottom: 50px } .pad-bottom-60 { padding-bottom: 60px } .pad-bottom-70 { padding-bottom: 70px } .pad-bottom-80 { padding-bottom: 80px } /*padding left*/ .pad-left-0 { padding-left: 0px } .pad-left-5 { padding-left: 5px } .pad-left-10 { padding-left: 10px } .pad-left-15 { padding-left: 15px } .pad-left-20 { padding-left: 20px } .pad-left-25 { padding-left: 25px } .pad-left-30 { padding-left: 30px } .pad-left-40 { padding-left: 40px } .pad-left-50 { padding-left: 50px } /*padding right*/ .pad-right-0 { padding-right: 0px } .pad-right-5 { padding-right: 5px } .pad-right-10 { padding-right: 10px } .pad-right-15 { padding-right: 15px } .pad-right-20 { padding-right: 20px } .pad-right-25 { padding-right: 25px } .pad-right-30 { padding-right: 30px } .pad-right-40 { padding-right: 40px } .pad-right-50 { padding-right: 50px } /*placeholder*/ input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 14px; } input::-moz-placeholder { /* Firefox 19+ */ font-size: 14px; } input:-ms-input-placeholder { /* IE 10+ */ font-size: 14px; } input:-moz-placeholder { /* Firefox 18- */ font-size: 14px; } /*color*/ .white { color: #fff!important; } .themecolor { color: #ef2853; } .line-height { line-height: 1.5; } .text-uppercase { text-transform: uppercase; } .width100 { width: 100%!important; } .container, .container-fluid { position: relative; z-index: 2; } .animation-off { animation: none!important; } section { padding: 71px 0 80px; position: relative; z-index: 1; background: #fff; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } .color-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: linear-gradient(to top, black, transparent); transition: all ease-in-out 0.5s; } .display-flex { display: flex; align-items: center; } @media(max-width: 991px) { .display-flex { display: inherit; } section { overflow: hidden; } } .bg-grey { background: #fbfbfb; } .bg-white { background: #fff; } .bold { font-weight: bold; } .box-shadow-0 { box-shadow: none!important; } .border-0 { border: none!important; } .space-between { justify-content: space-between; } /*heading title*/ .section-title { text-align: center; width: 60%; margin: 0 auto 50px; position: relative; z-index: 1; } .bg-grey .section-title h4 { color: #fff; } .section-title h2 { position: relative; padding-bottom: 24px; margin-bottom: 20px; font-weight: 700; } .section-title h2:after { position: absolute; content: ''; height: 2px; width: 50px; background: #ef2853; left: 0; right: 0; margin: 0 auto; bottom: 0; } .section-title.title-full { text-align: left; margin: 0 0 50px; } .section-title.title-full h2:after { left: 0; right: inherit; } @media(max-width: 1100px) { .section-title { width: 80%; } .section-title h4 { font-size: 55px; top: -30px; } } @media(max-width: 735px) { .section-title { width: 90%; } .section-title h4 { font-size: 36px; } } /*breadcrumb*/ section.breadcrumb-outer { position: relative; overflow: hidden; padding: 80px 0 80px; } section.breadcrumb-outer:before { background: url(../images/banner2.png) no-repeat; background-position: center; animation: kbrns_zoomInOut 15s linear 0s infinite alternate; background-size: cover; height: 100%; width: 100%; position: absolute; top: 0; left: 0; content: ''; } .breadcrumb-content { position: relative; z-index: 1; } .breadcrumb-content h2 { font-size: 40px; margin-bottom: 0; } .breadcrumb-content .breadcrumb { background: transparent; margin: 0; border-radius: 0; } .breadcrumb { padding: 0; margin: 0; } .breadcrumb-content .breadcrumb>li { position: relative; font-size: 18px; color: #ccc; font-weight: 400; display: inline-block; padding: 0; margin: 0; } .breadcrumb-content .breadcrumb a { color: #fff; } .breadcrumb>li+li:before { content: '|'; padding: 0 15px; } section.breadcrumb-1 { background: transparent; padding: 0; border: 1px solid #e4e4e4; } .breadcrumb-1 ul.breadcrumb { margin-bottom: 0; padding: 15px 0; } .breadcrumb-1 .breadcrumb-content .breadcrumb>.active { color: #333; } .breadcrumb-1 .breadcrumb>li { margin-bottom: 0; } @media(max-width: 991px) { .breadcrumb-content h2 { font-size: 32px; } } @media(max-width: 811px) { section.breadcrumb-outer { padding: 71px 0 80px } } /*pagination*/ .pagination-main { line-height: 0.8; } .pagination { margin-top: 0px; margin-bottom: 0; } .pagination { margin-top: 2px; } .pagination li { padding-left: 0; padding-bottom: 0; margin-bottom: 0; display: inline-block; } .pagination li:before, .pagination li:after { display: none !important; } .pagination li a { height: 40px; line-height: 38px; margin-right: 9px; padding: 0; text-align: center; width: 40px; color: #444444; font-size: 12px; border: none; border: 1px solid #f1f1f1; border-radius: 5px; } .pagination li a:hover, .pagination li a:focus { background-color: #b5b5b5; color: #FFFFFF!important; border-color: #b5b5b5; } .pagination .prev a, .pagination .next a { border-radius: 0px; } .pagination li.active a { background: #b5b5b5 !important; border-color: #b5b5b5 !important; color: #FFFFFF; } /*Buttons*/ .biz-btn, .biz-btn-black, .biz-btn-white { position: relative; z-index: 1; font-size: 14px; text-align: center; padding: 13px 24px 11px; text-transform: uppercase; transition: all 0.3s ease-in-out; background: #ef2853; color: #fff; display: inline-block; border-radius: 10px; border: none; } .biz-btn:before, .biz-btn-black:before, .biz-btn-white:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: all 0.3s ease-in-out; transform: scale(0, 1); z-index: -1; border: 2px solid #ef2853; color: #fff; background: transparent; border-radius: 10px; } .biz-btn:hover, .biz-btn-black:hover, .biz-btn-white:hover { color: #000000!important; background: transparent!important; transition: all 0.3s ease-in-out; } .biz-btn1:hover { color: #ef2853; } .biz-btn:hover:before, .biz-btn-black:hover:before, .biz-btn-white:hover:before { transform: scale(1); transition: all 0.3s ease-in-out; } .biz-btn-black { background: #333; } .biz-btn-black:before { border-color: #333; } .biz-btn-black:hover { color: #333; } .biz-btn-white { background: #fff; color: #ef2853; } .biz-btn-white:before { border-color: #fff; } .biz-btn-white:hover { color: #fff!important; } input#submit.biz-btn:hover { background: #ef2853!important; opacity: 0.8; } /* Preloader */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #de2b52; z-index: 999999; } #status { position: fixed; content: ''; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; margin: 0 auto; background: url(../images/loader.gif); background-size: cover; background-position: center; opacity: 1; visibility: visible; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 9999999999; } /* End Preloader */ #back-to-top { position: fixed; z-index: 1000; bottom: 20px; right: 20px; display: none; } #back-to-top a { display: block; width: 40px; height: 40px; background: #ef2853; position: relative; -webkit-transition: 0.2s all linear; -moz-transition: 0.2s all linear; -o-transition: 0.2s all linear; transition: 0.2s all linear; text-align: center; border-radius: 10px; } #back-to-top a:after { position: absolute; content: '\f062'; font-family: 'fontawesome'; font-size: 20px; color: #fff; top: 50%; left: 50%; z-index: 1; font-weight: 500; transform: translate(-50%, -50%); } /* ========================================= */ /* Ribbon CSS */ /* ======================================== */ .ribbon { width: 150px; height: 150px; overflow: hidden; position: absolute; z-index: 2; } .ribbon::before, .ribbon::after { position: absolute; z-index: -1; content: ''; display: block; border: 5px solid #666; } .ribbon span { position: absolute; display: block; width: 225px; padding: 12px 0; background-color: #ef2853; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); color: #fff; font: 700 16px/1; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-transform: uppercase; text-align: center; } /* top left*/ .ribbon-top-left { top: -10px; left: -10px; } .ribbon-top-left::before, .ribbon-top-left::after { border-top-color: transparent; border-left-color: transparent; } .ribbon-top-left::before { top: 0; right: 0; } .ribbon-top-left::after { bottom: 0; left: 0; } .ribbon-top-left span { right: -25px; top: 40px; transform: rotate(-45deg); } .alert { margin-bottom: 10px; border-radius: 0px; color: #e83737; padding: 0; } .alert.alert-success { background: transparent; border: transparent; border-radius: 0; color: #3c763d; } .alert.alert-success h4 { margin-bottom: 8px; } .alert.alert-success p { color: #fff; } /* ========================================= */ /* Custom animation CSS */ /* ======================================== */ @-webkit-keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(.2); transform: scale(.2); } } @keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(.2); transform: scale(.2); } } @-webkit-keyframes zoom-fade-two { 0% { -webkit-transform: scale(1.5); transform: scale(1.5); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.5); transform: scale(1.5); } } @keyframes zoom-fade-two { 0% { -webkit-transform: scale(1.5); transform: scale(1.5); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.5); transform: scale(1.5); } } @-webkit-keyframes zoom-fade { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes zoom-fade { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes slide { from { background-position: 0 0; } to { background-position: -111px 0; } } @-webkit-keyframes slide { from { background-position: 0 0; } to { background-position: -111px 0; } } @-webkit-keyframes ripple { 70% { box-shadow: 0 0 0 40px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes ripple { 70% { box-shadow: 0 0 0 40px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes up-down { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes jackInTheBox { from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } to { opacity: 1; transform: scale(1); } } .jackInTheBox { animation-name: jackInTheBox; } .animated { animation-duration: 1s; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @keyframes animationFramesOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg); transform: translate(73px, -1px) rotate(36deg); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg); transform: translate(141px, 72px) rotate(72deg); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg); transform: translate(83px, 122px) rotate(108deg); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg); transform: translate(-40px, 72px) rotate(144deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } } @-webkit-keyframes animationFramesOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); } } @keyframes animationFramesTwo { 0% { transform: translate(0, 0) rotate(0); } 21% { transform: translate(40px, 50px) rotate(35deg); } 41% { transform: translate(-20px, -75px) rotate(48deg); } 60% { transform: translate(25px, 48px) rotate(125deg); } 80% { transform: translate(16px, -15px) rotate(180deg); } 100% { transform: translate(0, 0) rotate(0); } } @-webkit-keyframes animationFramesTwo { 0% { -webkit-transform: translate(0, 0) rotate(0); } 21% { -webkit-transform: translate(40px, 5px) rotate(35deg); } 41% { -webkit-transform: translate(-20px, -75px) rotate(48deg); } 60% { -webkit-transform: translate(25px, 48px) rotate(125deg); } 80% { -webkit-transform: translate(16px, -15px) rotate(180deg); } 100% { -webkit-transform: translate(0, 0) rotate(0); } } @keyframes animationFramesThree { 0% { transform: translate(0, 0) rotate(0); } 21% { transform: translate(4px, 10px) rotate(360deg); } 41% { transform: translate(25px, 40px) rotate(360deg); } 60% { transform: translate(35px, 22px) rotate(360deg); } 80% { transform: translate(17px, 46px) rotate(360deg); } 100% { transform: translate(0, 0) rotate(0); } } @-webkit-keyframes animationFramesThree { 0% { -webkit-transform: translate(0, 0) rotate(0); } 21% { -webkit-transform: translate(4px, -20px) rotate(360deg); } 41% { -webkit-transform: translate(-50px, -80px) rotate(360deg); } 60% { -webkit-transform: translate(-75px, -35px) rotate(360deg); } 80% { -webkit-transform: translate(-20px, 20px) rotate(360deg); } 100% { -webkit-transform: translate(0, 0) rotate(0); } } @-webkit-keyframes movebounce { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes movebounce { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes rotateme { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotateme { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } /*--move-forever--*/ @keyframes move-forever { 0% { transform: translate(-90px, 0%); } 100% { transform: translate(85px, 0%); } }