/*:root { --main-color: #EE0033; --background-color-1: #eef5fb; --star-color: #ffc911; }*/ /*:root { --main-color: #F36F21; --background-color-1: #eef5fb; --star-color: #ffc911; }*/ :root { --main-color: #FF3211; --background-color-1: #eef5fb; --star-color: #ffc911; } .logo { animation: logo-animation linear 4s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: logo-animation linear 4s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; -moz-animation: logo-animation linear 4s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -o-animation: logo-animation linear 4s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -ms-animation: logo-animation linear 4s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%; } .logo-1 { animation: logo-1-animation linear 2s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: logo-1-animation linear 2s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; -moz-animation: logo-1-animation linear 2s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -o-animation: logo-1-animation linear 2s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -ms-animation: logo-1-animation linear 2s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%; } .logo-2 { animation: logo-2-animation linear 1s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: logo-animation linear 1s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; -moz-animation: logo-animation linear 1s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -o-animation: logo-animation linear 1s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -ms-animation: logo-animation linear 1s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%; } @keyframes logo-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0.990099773451273; } 101% { opacity: 0.99; } } @-moz-keyframes logo-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0.990099773451273; } 101% { opacity: 0.99; } } @-webkit-keyframes logo-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0.990099773451273; } 101% { opacity: 0.99; } } @-o-keyframes logo-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0.990099773451273; } 101% { opacity: 0.99; } } @-ms-keyframes logo-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0.990099773451273; } 101% { opacity: 0.99; } } @keyframes logo-1-animation { 0% { opacity: 0.1; } 50% { opacity: 0.7; } 75% { opacity: 0.95; } 100% { opacity: 1; } } @-moz-keyframes logo-1-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0.990099773451273; } 101% { opacity: 0.99; } } @-webkit-keyframes logo-1-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0.990099773451273; } 101% { opacity: 0.99; } } @-o-keyframes logo-1-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0.990099773451273; } 101% { opacity: 0.99; } } @-ms-keyframes logo-1-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0.990099773451273; } 101% { opacity: 0.99; } } .flash-header-img-ellipse-1 { position: fixed; top: 125px; right: 0px; } .flash-header-img-ellipse-2 { position: fixed; top: 0px; left: 0px; } .flash-header-img-ellipse-3 { position: fixed; bottom: 0px; left: 0; right: 0px; } .flash-header-img-ellipse-4 { position: fixed; bottom: 0px; /* top: calc(75% - 80px); */ left: calc(50% - 100px); } .flash-logo { position: fixed; top: calc(18% - 0px); left: -35px; /* width: 100%; */ height: 412px; text-align: center; } .flash-slogan { position: fixed; top: calc(40% + 45px); left: 0px; width: 100%; text-align: center; } #pot { /*bottom: 15%;*/ top: 20px; display: block; position: absolute; animation: linear infinite alternate; animation-name: run; animation-duration: 2s; } #pot h2 { font-weight: 400; font-size: 40px; /*line-height: 148px;*/ text-align: center; letter-spacing: -0.281372px; color: #EE0033; } @-webkit-keyframes run { 0% { left: 0; transform: translateX(0); } 100% { left: 100%; transform: translateX(-100%); } } /*@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');*/ * { margin: 0; padding: 0; } body { font-family: "Nunito", sans-serif; font-size: 14px; color: #999999; word-wrap: break-word; } p { margin: 0 0 10px; } ul { list-style: none; } .container { width: 100%; margin: auto; font-weight: 900; text-transform: uppercase; text-align: center; padding: 0 0 200px; } /*.take-input { margin: 50px 0 0; } .take-input input { width: 400px; height: 35px; padding: 0 10px; border-radius: 5px; border: 1px solid #ececec; margin: 0 15px 0 0; font-size: 15px; }*/ /*a, a:link, a:visited { text-decoration: none; padding: 9px 15px; border: 1px solid #ececec; border-radius: 5px; color: gray; }*/ .animate { font-size: 40px; /*margin: 100px 0 0;*/ /*border-bottom: 2px solid #ccc;*/ } .animate span { display: inline-block; } a.repeat { display: inline-block; font-size: 12px; text-transform: none; text-decoration: none; color: orange; padding: 5px 12px; border: 1px solid rgba(0, 0, 0, 0.15); font-weight: normal; margin: 0 0 0 50px; border-radius: 3px; position: relative; bottom: 15px; } a.repeat:hover { background: rgba(0, 0, 0, 0.7); color: white; } .animate span:nth-of-type(2) { animation-delay: .05s; } .animate span:nth-of-type(3) { animation-delay: .1s; } .animate span:nth-of-type(4) { animation-delay: .15s; } .animate span:nth-of-type(5) { animation-delay: .2s; } .animate span:nth-of-type(6) { animation-delay: .25s; } .animate span:nth-of-type(7) { animation-delay: .3s; } .animate span:nth-of-type(8) { animation-delay: .35s; } .animate span:nth-of-type(9) { animation-delay: .4s; } .animate span:nth-of-type(10) { animation-delay: .45s; } .animate span:nth-of-type(11) { animation-delay: .5s; } .animate span:nth-of-type(12) { animation-delay: .55s; } .animate span:nth-of-type(13) { animation-delay: .6s; } .animate span:nth-of-type(14) { animation-delay: .65s; } .animate span:nth-of-type(15) { animation-delay: .7s; } .animate span:nth-of-type(16) { animation-delay: .75s; } .animate span:nth-of-type(17) { animation-delay: .8s; } .animate span:nth-of-type(18) { animation-delay: .85s; } .animate span:nth-of-type(19) { animation-delay: .9s; } .animate span:nth-of-type(20) { animation-delay: .95s; } /* Animation One */ .one span { color: #24a8e6; opacity: 0; transform: translate(-150px, -50px) rotate(-180deg) scale(3); animation: revolveScale .4s forwards; } @keyframes revolveScale { 60% { transform: translate(20px, 20px) rotate(30deg) scale(.3); } 100% { transform: translate(0) rotate(0) scale(1); opacity: 1; } } /* Animation Two */ .two span { color: #a5cb21; opacity: 0; transform: translate(200px, -100px) scale(2); animation: ballDrop .3s forwards; } @keyframes ballDrop { 60% { transform: translate(0, 20px) rotate(-180deg) scale(.5); } 100% { transform: translate(0) rotate(0deg) scale(1); opacity: 1; } } /* Animation Three */ .three span { color: #b10e81; opacity: 0; transform: translate(-300px, 0) scale(0); animation: sideSlide .5s forwards; } @keyframes sideSlide { 60% { transform: translate(20px, 0) scale(1); color: #b10e81; } 80% { transform: translate(20px, 0) scale(1); color: #b10e81; } 99% { transform: translate(0) scale(1.2); color: #00f0ff; } 100% { transform: translate(0) scale(1); opacity: 1; color: #b10e81; } } /* Animation Four */ .four span { color: #8d6a00; opacity: 0; transform: translate(0, -100px) rotate(360deg) scale(0); animation: revolveDrop .3s forwards; } @keyframes revolveDrop { 30% { transform: translate(0, -50px) rotate(180deg) scale(1); } 60% { transform: translate(0, 20px) scale(.8) rotate(0deg); } 100% { transform: translate(0) scale(1) rotate(0deg); opacity: 1; } } /* Animation Five */ .five span { color: #dd3f0f; opacity: 0; transform: translate(0, -100px) rotate(360deg) scale(0); animation: dropVanish .5s forwards; } @keyframes dropVanish { 30% { transform: translate(0, -50px) rotate(180deg) scale(1); } 50% { transform: translate(0, 20px) scale(.8) rotate(0deg); opacity: 1; } 80% { transform: translate(-100px, -100px) scale(1.5) rotate(-180deg); opacity: 0; } 100% { transform: translate(0) scale(1) rotate(0deg); opacity: 1; } } /* Animation Six */ .six span { color: #ddb40f; opacity: 0; transform: rotate(-180deg) translate(150px, 0); animation: twister .5s forwards; } @keyframes twister { 10% { opacity: 1; } 100% { transform: rotate(0deg) translate(0); opacity: 1; } } /* Animation Seven */ .seven span { color: var(--main-color); opacity: 0; transform: translate(-150px, 0) scale(.3); animation: leftRight .5s forwards; } @keyframes leftRight { 40% { transform: translate(50px, 0) scale(.7); opacity: 1; color: #348c04; } 60% { color: #0f40ba; } 80% { transform: translate(0) scale(2); opacity: 0; } 100% { transform: translate(0) scale(1); opacity: 1; } }