/* ---------------------------------------------------------------------------------------------- * File Name: template-3d-animation Template * Description: 3D Animation Template Specific CSS * ---------------------------------------------------------------------------------------------- * Item Name: Crypto ICO - Cryptocurrency Website Landing Page HTML Template * Version: 1.0 * Author: PIXINVENT * Author URL: http://www.themeforest.net/user/pixinvent * ----------------------------------------------------------------------------------------------*/ /* Basic reboot css -------------------------------------------------------------------------------------------*/ body { overflow-x: hidden; } p { font-size: .938rem; } a:hover { text-decoration: none; } /* Theme type css -------------------------------------------------------------------------------------------*/ body { line-height: 1.6; letter-spacing: .25px; } ul { font-size: .938rem; list-style: none; } /* Pre-loader Component css -------------------------------------------------------------------------------------------*/ /* Loader wrapper */ #loader-wrapper { position: fixed; z-index: 100000; top: 0; left: 0; width: 100%; height: 100%; } #loader-wrapper .loader-section { position: fixed; z-index: 99; top: 0; width: 51%; height: 100%; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); background: #fff; } #loader-wrapper .loader-section.section-left { left: 0; } #loader-wrapper .loader-section.section-right { right: 0; } /* Revel screen after page load */ .loaded #loader-wrapper { visibility: hidden; -webkit-transition: all .3s 1s ease-out; -moz-transition: all .3s 1s ease-out; -o-transition: all .3s 1s ease-out; transition: all .3s 1s ease-out; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .loaded #loader-wrapper .loader-section.section-left { -webkit-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1); -moz-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1); -o-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1); transition: all .7s .3s cubic-bezier(.645, .045, .355, 1); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .loaded #loader-wrapper .loader-section.section-right { -webkit-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1); -moz-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1); -o-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1); transition: all .7s .3s cubic-bezier(.645, .045, .355, 1); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .loaded #loader { -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; opacity: 0; } /* SVG loader animation */ svg#loader { position: absolute; z-index: 999; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; margin: 0 auto; background: #fff; } svg#loader g { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: spin 15s linear infinite; -moz-animation: spin 15s linear infinite; -o-animation: spin 15s linear infinite; animation: spin 15s linear infinite; } svg#loader g circle { -webkit-animation: dostuff 18s ease infinite; -moz-animation: dostuff 18s ease infinite; -o-animation: dostuff 18s ease infinite; animation: dostuff 18s ease infinite; color: #eeecf4; fill: none; stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 260, 0, 1, 0, 1, 0, 1, 0, 10, 1, 10, 1, 10, 1, 10, 1, 10, 10, 1, 10, 1, 10, 1, 10, 10, 1; } svg#loader g:nth-child(even) { animation-direction: reverse; } svg#loader g:nth-child(1n) { -webkit-animation-delay: -1s; -moz-animation-delay: -1s; -o-animation-delay: -1s; animation-delay: -1s; } svg#loader g:nth-child(2n) { -webkit-animation-delay: -2s; -moz-animation-delay: -2s; -o-animation-delay: -2s; animation-delay: -2s; } svg#loader g:nth-child(3n) { -webkit-animation-delay: -3s; -moz-animation-delay: -3s; -o-animation-delay: -3s; animation-delay: -3s; } svg#loader g:nth-child(4n) { -webkit-animation-delay: -4s; -moz-animation-delay: -4s; -o-animation-delay: -4s; animation-delay: -4s; } svg#loader g:nth-child(5n) { -webkit-animation-delay: -5s; -moz-animation-delay: -5s; -o-animation-delay: -5s; animation-delay: -5s; } svg#loader g:nth-child(6n) { -webkit-animation-delay: -6s; -moz-animation-delay: -6s; -o-animation-delay: -6s; animation-delay: -6s; } svg#loader g:nth-child(7n) { -webkit-animation-delay: -7s; -moz-animation-delay: -7s; -o-animation-delay: -7s; animation-delay: -7s; } svg#loader g:nth-child(1n) circle { -webkit-animation-delay: -1.5s; -moz-animation-delay: -1.5s; -o-animation-delay: -1.5s; animation-delay: -1.5s; } svg#loader g:nth-child(2n) circle { -webkit-animation-delay: -2.5s; -moz-animation-delay: -2.5s; -o-animation-delay: -2.5s; animation-delay: -2.5s; } svg#loader g:nth-child(3n) circle { -webkit-animation-delay: -3.5s; -moz-animation-delay: -3.5s; -o-animation-delay: -3.5s; animation-delay: -3.5s; } svg#loader g:nth-child(4n) circle, svg#loader g:nth-child(5n) circle { -webkit-animation-delay: -4.5s; -moz-animation-delay: -4.5s; -o-animation-delay: -4.5s; animation-delay: -4.5s; } svg#loader g:nth-child(6n) circle { -webkit-animation-delay: -5.5s; -moz-animation-delay: -5.5s; -o-animation-delay: -5.5s; animation-delay: -5.5s; } svg#loader g:nth-child(7n) circle { -webkit-animation-delay: -6.5s; -moz-animation-delay: -6.5s; -o-animation-delay: -6.5s; animation-delay: -6.5s; } svg#loader g:nth-child(8n) circle { -webkit-animation-delay: -7.5s; -moz-animation-delay: -7.5s; -o-animation-delay: -7.5s; animation-delay: -7.5s; } svg#loader g:nth-child(9n) circle { -webkit-animation-delay: -8.5s; -moz-animation-delay: -8.5s; -o-animation-delay: -8.5s; animation-delay: -8.5s; } svg#loader g:nth-child(10n) circle { -webkit-animation-delay: -9.5s; -moz-animation-delay: -9.5s; -o-animation-delay: -9.5s; animation-delay: -9.5s; } svg#loader g:last-child circle { fill: #ccc; stroke: none; } @-webkit-keyframes dostuff { 50% { stroke-dasharray: 10, 1, 10, 1, 10, 1, 10, 1, 10, 1, 10, 1, 10, 10, 10, 1, 20, 120, 1, 30, 1, 30, 1, 10, 30, 1; } } @-moz-keyframes dostuff { 50% { stroke-dasharray: 10, 1, 10, 1, 10, 1, 10, 1, 10, 1, 10, 1, 10, 10, 10, 1, 20, 120, 1, 30, 1, 30, 1, 10, 30, 1; } } @-o-keyframes dostuff { 50% { stroke-dasharray: 10, 1, 10, 1, 10, 1, 10, 1, 10, 1, 10, 1, 10, 10, 10, 1, 20, 120, 1, 30, 1, 30, 1, 10, 30, 1; } } @keyframes dostuff { 50% { stroke-dasharray: 10, 1, 10, 1, 10, 1, 10, 1, 10, 1, 10, 1, 10, 10, 10, 1, 20, 120, 1, 30, 1, 30, 1, 10, 30, 1; } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /* JavaScript Turned Off */ .no-js #loader-wrapper { display: none; } /* Button scss for button options and gradient classes -------------------------------------------------------------------------------------------*/ /* Button SCSS */ .btn { color: #fff; } .btn.btn-square { border-radius: 0; } .btn.btn-round { border-radius: 2rem; } .btn:focus, .btn.focus, .btn:active, .btn.active { outline: none; -webkit-box-shadow: none !important; box-shadow: none !important; } /* Gradient Button */ .btn-gradient-blue { -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; color: #fff; border: 0; background-image: -webkit-linear-gradient(50deg, #28bcfd 20%, #1d78ff 51%, #28bcfd 90%); background-image: -moz- oldlinear-gradient(50deg, #28bcfd 20%, #1d78ff 51%, #28bcfd 90%); background-image: -o-linear-gradient(50deg, #28bcfd 20%, #1d78ff 51%, #28bcfd 90%); background-image: linear-gradient(40deg, #28bcfd 20%, #1d78ff 51%, #28bcfd 90%); background-position: left center; -webkit-background-size: 200% auto; background-size: 200% auto; } .btn-gradient-blue:hover, .btn-gradient-blue:active { text-decoration: none; color: #fff; background-position: right center; } .btn-gradient-blue:not(:disabled):not(.disabled):active { background-image: -webkit-linear-gradient(50deg, #28bcfd 0%, #1d78ff 51%, #28bcfd 90%); background-image: -moz- oldlinear-gradient(50deg, #28bcfd 0%, #1d78ff 51%, #28bcfd 90%); background-image: -o-linear-gradient(50deg, #28bcfd 0%, #1d78ff 51%, #28bcfd 90%); background-image: linear-gradient(40deg, #28bcfd 0%, #1d78ff 51%, #28bcfd 90%); } .btn-gradient-blue.btn-glow { -webkit-box-shadow: 0 0 12px 0 #1f87ff; box-shadow: 0 0 12px 0 #1f87ff; } .btn-gradient-orange { -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; color: #fff; border: 0; background-image: -webkit-linear-gradient(50deg, #ff4137 20%, #fdc800 51%, #ff4137 90%); background-image: -moz- oldlinear-gradient(50deg, #ff4137 20%, #fdc800 51%, #ff4137 90%); background-image: -o-linear-gradient(50deg, #ff4137 20%, #fdc800 51%, #ff4137 90%); background-image: linear-gradient(40deg, #ff4137 20%, #fdc800 51%, #ff4137 90%); background-position: left center; -webkit-background-size: 200% auto; background-size: 200% auto; } .btn-gradient-orange:hover, .btn-gradient-orange:active { text-decoration: none; color: #fff; background-position: right center; } .btn-gradient-orange:not(:disabled):not(.disabled):active { background-image: -webkit-linear-gradient(50deg, #ff4137 0%, #fdc800 51%, #ff4137 90%); background-image: -moz- oldlinear-gradient(50deg, #ff4137 0%, #fdc800 51%, #ff4137 90%); background-image: -o-linear-gradient(50deg, #ff4137 0%, #fdc800 51%, #ff4137 90%); background-image: linear-gradient(40deg, #ff4137 0%, #fdc800 51%, #ff4137 90%); } .btn-gradient-orange.btn-glow { -webkit-box-shadow: 0 0 12px 0 #ff5f2b; box-shadow: 0 0 12px 0 #ff5f2b; } .btn-gradient-purple { -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; color: #fff; border: 0; background-image: -webkit-linear-gradient(50deg, #bf68e6 20%, #9e48cd 51%, #bf68e6 90%); background-image: -moz- oldlinear-gradient(50deg, #bf68e6 20%, #9e48cd 51%, #bf68e6 90%); background-image: -o-linear-gradient(50deg, #bf68e6 20%, #9e48cd 51%, #bf68e6 90%); background-image: linear-gradient(40deg, #bf68e6 20%, #9e48cd 51%, #bf68e6 90%); background-position: left center; -webkit-background-size: 200% auto; background-size: 200% auto; } .btn-gradient-purple:hover, .btn-gradient-purple:active { text-decoration: none; color: #fff; background-position: right center; } .btn-gradient-purple:not(:disabled):not(.disabled):active { background-image: -webkit-linear-gradient(50deg, #bf68e6 0%, #9e48cd 51%, #bf68e6 90%); background-image: -moz- oldlinear-gradient(50deg, #bf68e6 0%, #9e48cd 51%, #bf68e6 90%); background-image: -o-linear-gradient(50deg, #bf68e6 0%, #9e48cd 51%, #bf68e6 90%); background-image: linear-gradient(40deg, #bf68e6 0%, #9e48cd 51%, #bf68e6 90%); } .btn-gradient-purple.btn-glow { -webkit-box-shadow: 0 0 12px 0 #9e48cd; box-shadow: 0 0 12px 0 #9e48cd; } .btn-light { color: #fff; } .btn-light.btn-glow { -webkit-box-shadow: 0 0 12px 0 #fff; box-shadow: 0 0 12px 0 #fff; } /* Form Component css -------------------------------------------------------------------------------------------*/ .form-control { font-size: .875rem; margin-bottom: 3.5rem; padding: 1rem .5rem; color: #fff; border: none; border-bottom: 1px solid #eeecf4; border-radius: 0; background: none; } .form-control:focus { background: transparent; -webkit-box-shadow: none !important; box-shadow: none !important; } /* Gradient progress bar colors -------------------------------------------------------------------------------------------*/ .progress .progress-blue { background: -webkit-gradient(linear, left top, right top, from(#28bcfd), to(#1d78ff)); background: -webkit-linear-gradient(left, #28bcfd, #1d78ff); background: -moz- oldlinear-gradient(left, #28bcfd, #1d78ff); background: -o-linear-gradient(left, #28bcfd, #1d78ff); background: linear-gradient(to right, #28bcfd, #1d78ff); } .progress .progress-orange { background: -webkit-gradient(linear, left top, right top, from(#fdc800), to(#ff4137)); background: -webkit-linear-gradient(left, #fdc800, #ff4137); background: -moz- oldlinear-gradient(left, #fdc800, #ff4137); background: -o-linear-gradient(left, #fdc800, #ff4137); background: linear-gradient(to right, #fdc800, #ff4137); } .progress .progress-purple { background: -webkit-gradient(linear, left top, right top, from(#bf68e6), to(#9e48cd)); background: -webkit-linear-gradient(left, #bf68e6, #9e48cd); background: -moz- oldlinear-gradient(left, #bf68e6, #9e48cd); background: -o-linear-gradient(left, #bf68e6, #9e48cd); background: linear-gradient(to right, #bf68e6, #9e48cd); } /* Theme Utilities css -------------------------------------------------------------------------------------------*/ :focus { outline: none !important; } /* Font-size */ .font-xlarge { font-size: 2.75rem; } .font-large { font-size: 2rem; line-height: 2rem; } .font-medium { font-size: 1.125rem; } .font-small { font-size: .875rem; } .font-xsmall { font-size: .75rem; } /* Grey Color */ .grey-accent1 { color: #fff; } .grey-accent2 { color: #fff; } .grey-accent3 { color: #fff; } .white { color: #fff; } .black { color: #000; } /* Box Shadow */ .box-shadow-0 { -webkit-box-shadow: none !important; box-shadow: none !important; } .box-shadow-1 { -webkit-box-shadow: 0 7px 12px 0 rgba(29, 120, 255, .16); box-shadow: 0 7px 12px 0 rgba(29, 120, 255, .16); } .box-shadow-2 { -webkit-box-shadow: 0 10px 18px 0 rgba(29, 120, 255, .2); box-shadow: 0 10px 18px 0 rgba(29, 120, 255, .2); } .box-shadow-3 { -webkit-box-shadow: 0 14px 24px 0 rgba(29, 120, 255, .26); box-shadow: 0 14px 24px 0 rgba(29, 120, 255, .26); } .box-shadow-4 { -webkit-box-shadow: 0 16px 28px 0 rgba(29, 120, 255, .3); box-shadow: 0 16px 28px 0 rgba(29, 120, 255, .3); } .box-shadow-5 { -webkit-box-shadow: 0 27px 24px 0 rgba(29, 120, 255, .36); box-shadow: 0 27px 24px 0 rgba(29, 120, 255, .36); } /* Line height */ .line-height-1 { line-height: .5rem; } .line-height-2 { line-height: 1rem; } .line-height-3 { line-height: 1.5rem; } /* Extra small devices (portrait phones, less than 576px) */ /* (max-width: 575.98px) */ @media (max-width: 575.98px) { /* Margin/padding for Extra small screen (<576) */ .ml-xs-0 { margin-left: 0 !important; } .mr-xs-0 { margin-right: 0 !important; } .mt-xs-3 { margin-top: 1rem !important; } .mr-xs-3 { margin-right: 1rem !important; } .ml-xs-3 { margin-left: 1rem !important; } .mt-xs-5 { margin-top: 3rem !important; } .mb-xs-5 { margin-bottom: 3rem !important; } .pt-xs-3 { padding-top: 1rem !important; } .pt-xs-5 { padding-top: 3rem !important; } .pb-xs-5 { padding-bottom: 3rem !important; } } /* Mask Animation */ .maskUp { -webkit-animation-name: maskUp; -moz-animation-name: maskUp; -o-animation-name: maskUp; animation-name: maskUp; } .maskRight { -webkit-animation-name: maskRight; -moz-animation-name: maskRight; -o-animation-name: maskRight; animation-name: maskRight; } .maskDown { -webkit-animation-name: maskDown; -moz-animation-name: maskDown; -o-animation-name: maskDown; animation-name: maskDown; } .maskLeft { -webkit-animation-name: maskLeft; -moz-animation-name: maskLeft; -o-animation-name: maskLeft; animation-name: maskLeft; } /* Mask Up */ @-webkit-keyframes maskUp { from { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes maskUp { from { -moz-transform: translate(0, 100%); transform: translate(0, 100%); } to { -moz-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes maskUp { from { -o-transform: translate(0, 100%); transform: translate(0, 100%); } to { -o-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskUp { from { -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); } to { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } /* Mask Right */ @-webkit-keyframes maskRight { from { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes maskRight { from { -moz-transform: translate(-100%, 0); transform: translate(-100%, 0); } to { -moz-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes maskRight { from { -o-transform: translate(-100%, 0); transform: translate(-100%, 0); } to { -o-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskRight { from { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); } to { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } /* Mask Down */ @-webkit-keyframes maskDown { from { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes maskDown { from { -moz-transform: translate(0, -100%); transform: translate(0, -100%); } to { -moz-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes maskDown { from { -o-transform: translate(0, -100%); transform: translate(0, -100%); } to { -o-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskDown { from { -webkit-transform: translate(0, -100%); -moz-transform: translate(0, -100%); -o-transform: translate(0, -100%); transform: translate(0, -100%); } to { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } /* Mask Left */ @-webkit-keyframes maskLeft { from { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes maskLeft { from { -moz-transform: translate(100%, 0); transform: translate(100%, 0); } to { -moz-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes maskLeft { from { -o-transform: translate(100%, 0); transform: translate(100%, 0); } to { -o-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskLeft { from { -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } to { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } /* FedIn Shorter*/ .fadeInUpShorter { -webkit-animation-name: fadeInUpShorter; -moz-animation-name: fadeInUpShorter; -o-animation-name: fadeInUpShorter; animation-name: fadeInUpShorter; } .fadeInUpShortest { -webkit-animation-name: fadeInUpShortest; -moz-animation-name: fadeInUpShortest; -o-animation-name: fadeInUpShortest; animation-name: fadeInUpShortest; } .fadeInLeftShorter { -webkit-animation-name: fadeInLeftShorter; -moz-animation-name: fadeInLeftShorter; -o-animation-name: fadeInLeftShorter; animation-name: fadeInLeftShorter; } .fadeInRightShorter { -webkit-animation-name: fadeInRightShorter; -moz-animation-name: fadeInRightShorter; -o-animation-name: fadeInRightShorter; animation-name: fadeInRightShorter; } .fadeInDownShorter { -webkit-animation-name: fadeInDownShorter; -moz-animation-name: fadeInDownShorter; -o-animation-name: fadeInDownShorter; animation-name: fadeInDownShorter; } .fadeInDownShorterAbsCenter { -webkit-animation-name: fadeInDownShorterAbsCenter; -moz-animation-name: fadeInDownShorterAbsCenter; -o-animation-name: fadeInDownShorterAbsCenter; animation-name: fadeInDownShorterAbsCenter; } /* Fade In Up Shorter */ @-webkit-keyframes fadeInUpShorter { from { -webkit-transform: translate(0, 50px); transform: translate(0, 50px); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; } } @-moz-keyframes fadeInUpShorter { from { -moz-transform: translate(0, 50px); transform: translate(0, 50px); opacity: 0; } to { -moz-transform: none; transform: none; opacity: 1; } } @-o-keyframes fadeInUpShorter { from { -o-transform: translate(0, 50px); transform: translate(0, 50px); opacity: 0; } to { -o-transform: none; transform: none; opacity: 1; } } @keyframes fadeInUpShorter { from { -webkit-transform: translate(0, 50px); -moz-transform: translate(0, 50px); -o-transform: translate(0, 50px); transform: translate(0, 50px); opacity: 0; } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes fadeInUpShortest { from { -webkit-transform: translate(0, 25px); transform: translate(0, 25px); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; } } @-moz-keyframes fadeInUpShortest { from { -moz-transform: translate(0, 25px); transform: translate(0, 25px); opacity: 0; } to { -moz-transform: none; transform: none; opacity: 1; } } @-o-keyframes fadeInUpShortest { from { -o-transform: translate(0, 25px); transform: translate(0, 25px); opacity: 0; } to { -o-transform: none; transform: none; opacity: 1; } } @keyframes fadeInUpShortest { from { -webkit-transform: translate(0, 25px); -moz-transform: translate(0, 25px); -o-transform: translate(0, 25px); transform: translate(0, 25px); opacity: 0; } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; opacity: 1; } } /* Fade In Left Shorter */ @-webkit-keyframes fadeInLeftShorter { from { -webkit-transform: translate(50px, 0); transform: translate(50px, 0); opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @-moz-keyframes fadeInLeftShorter { from { -moz-transform: translate(50px, 0); transform: translate(50px, 0); opacity: 0; } to { -moz-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @-o-keyframes fadeInLeftShorter { from { -o-transform: translate(50px, 0); transform: translate(50px, 0); opacity: 0; } to { -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @keyframes fadeInLeftShorter { from { -webkit-transform: translate(50px, 0); -moz-transform: translate(50px, 0); -o-transform: translate(50px, 0); transform: translate(50px, 0); opacity: 0; } to { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } /* Fade In Right Shorter */ @-webkit-keyframes fadeInRightShorter { from { -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @-moz-keyframes fadeInRightShorter { from { -moz-transform: translate(-50px, 0); transform: translate(-50px, 0); opacity: 0; } to { -moz-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @-o-keyframes fadeInRightShorter { from { -o-transform: translate(-50px, 0); transform: translate(-50px, 0); opacity: 0; } to { -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @keyframes fadeInRightShorter { from { -webkit-transform: translate(-50px, 0); -moz-transform: translate(-50px, 0); -o-transform: translate(-50px, 0); transform: translate(-50px, 0); opacity: 0; } to { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } /* Fade In Down Shorter */ @-webkit-keyframes fadeInDownShorter { from { -webkit-transform: translate(0, -50px); transform: translate(0, -50px); opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @-moz-keyframes fadeInDownShorter { from { -moz-transform: translate(0, -50px); transform: translate(0, -50px); opacity: 0; } to { -moz-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @-o-keyframes fadeInDownShorter { from { -o-transform: translate(0, -50px); transform: translate(0, -50px); opacity: 0; } to { -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @keyframes fadeInDownShorter { from { -webkit-transform: translate(0, -50px); -moz-transform: translate(0, -50px); -o-transform: translate(0, -50px); transform: translate(0, -50px); opacity: 0; } to { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } /* Fade In Down Shorter - Absolute Center */ @-webkit-keyframes fadeInDownShorterAbsCenter { from { -webkit-transform: translate(-50%, -50px); transform: translate(-50%, -50px); opacity: 0; } to { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1; } } @-moz-keyframes fadeInDownShorterAbsCenter { from { -moz-transform: translate(-50%, -50px); transform: translate(-50%, -50px); opacity: 0; } to { -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1; } } @-o-keyframes fadeInDownShorterAbsCenter { from { -o-transform: translate(-50%, -50px); transform: translate(-50%, -50px); opacity: 0; } to { -o-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1; } } @keyframes fadeInDownShorterAbsCenter { from { -webkit-transform: translate(-50%, -50px); -moz-transform: translate(-50%, -50px); -o-transform: translate(-50%, -50px); transform: translate(-50%, -50px); opacity: 0; } to { -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1; } } .expandIn { -webkit-animation-name: expandIn; -moz-animation-name: expandIn; -o-animation-name: expandIn; animation-name: expandIn; } .blurIn { -webkit-animation-name: blurIn; -moz-animation-name: blurIn; -o-animation-name: blurIn; animation-name: blurIn; } /* Expand In */ @-webkit-keyframes expandIn { from { -webkit-transform: scale(.8); transform: scale(.8); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-moz-keyframes expandIn { from { -moz-transform: scale(.8); transform: scale(.8); opacity: 0; } to { -moz-transform: scale(1); transform: scale(1); opacity: 1; } } @-o-keyframes expandIn { from { -o-transform: scale(.8); transform: scale(.8); opacity: 0; } to { -o-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes expandIn { from { -webkit-transform: scale(.8); -moz-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8); opacity: 0; } to { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } } /* Blur In */ @-webkit-keyframes blurIn { from { -webkit-transform: scale(1.3); transform: scale(1.3); opacity: 0; -webkit-filter: blur(20px); filter: blur(20px); } to { -webkit-transform: none; transform: none; opacity: 1; -webkit-filter: blur(0); filter: blur(0); } } @-moz-keyframes blurIn { from { -moz-transform: scale(1.3); transform: scale(1.3); opacity: 0; filter: blur(20px); } to { -moz-transform: none; transform: none; opacity: 1; filter: blur(0); } } @-o-keyframes blurIn { from { -o-transform: scale(1.3); transform: scale(1.3); opacity: 0; filter: blur(20px); } to { -o-transform: none; transform: none; opacity: 1; filter: blur(0); } } @keyframes blurIn { from { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); opacity: 0; -webkit-filter: blur(20px); filter: blur(20px); } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; opacity: 1; -webkit-filter: blur(0); filter: blur(0); } } .stepsFadeInUp { -webkit-animation-name: stepsFadeInUp; -moz-animation-name: stepsFadeInUp; -o-animation-name: stepsFadeInUp; animation-name: stepsFadeInUp; } .stepsFadeInLeft { -webkit-animation-name: stepsFadeInLeft; -moz-animation-name: stepsFadeInLeft; -o-animation-name: stepsFadeInLeft; animation-name: stepsFadeInLeft; } .stepsFadeInRight { -webkit-animation-name: stepsFadeInRight; -moz-animation-name: stepsFadeInRight; -o-animation-name: stepsFadeInRight; animation-name: stepsFadeInRight; } /* Steps Fade In Up */ @-webkit-keyframes stepsFadeInUp { from { -webkit-transform: translate(-50%, 25%); transform: translate(-50%, 25%); opacity: 0; } to { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } @-moz-keyframes stepsFadeInUp { from { -moz-transform: translate(-50%, 25%); transform: translate(-50%, 25%); opacity: 0; } to { -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } @-o-keyframes stepsFadeInUp { from { -o-transform: translate(-50%, 25%); transform: translate(-50%, 25%); opacity: 0; } to { -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } @keyframes stepsFadeInUp { from { -webkit-transform: translate(-50%, 25%); -moz-transform: translate(-50%, 25%); -o-transform: translate(-50%, 25%); transform: translate(-50%, 25%); opacity: 0; } to { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } /* Steps Fade In Left */ @-webkit-keyframes stepsFadeInLeft { from { -webkit-transform: translate(-75%, -50%); transform: translate(-75%, -50%); opacity: 0; } to { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } @-moz-keyframes stepsFadeInLeft { from { -moz-transform: translate(-75%, -50%); transform: translate(-75%, -50%); opacity: 0; } to { -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } @-o-keyframes stepsFadeInLeft { from { -o-transform: translate(-75%, -50%); transform: translate(-75%, -50%); opacity: 0; } to { -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } @keyframes stepsFadeInLeft { from { -webkit-transform: translate(-75%, -50%); -moz-transform: translate(-75%, -50%); -o-transform: translate(-75%, -50%); transform: translate(-75%, -50%); opacity: 0; } to { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } /* Steps Fade In Right */ @-webkit-keyframes stepsFadeInRight { from { -webkit-transform: translate(-25%, -50%); transform: translate(-25%, -50%); opacity: 0; } to { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } @-moz-keyframes stepsFadeInRight { from { -moz-transform: translate(-25%, -50%); transform: translate(-25%, -50%); opacity: 0; } to { -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } @-o-keyframes stepsFadeInRight { from { -o-transform: translate(-25%, -50%); transform: translate(-25%, -50%); opacity: 0; } to { -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } @keyframes stepsFadeInRight { from { -webkit-transform: translate(-25%, -50%); -moz-transform: translate(-25%, -50%); -o-transform: translate(-25%, -50%); transform: translate(-25%, -50%); opacity: 0; } to { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } } .textBgFadeInUp { -webkit-animation-name: textBgFadeInUp; -moz-animation-name: textBgFadeInUp; -o-animation-name: textBgFadeInUp; animation-name: textBgFadeInUp; } .textBgFadeInUpDark { -webkit-animation-name: textBgFadeInUpDark; -moz-animation-name: textBgFadeInUpDark; -o-animation-name: textBgFadeInUpDark; animation-name: textBgFadeInUpDark; } .textBgFadeInUp2 { -webkit-animation-name: textBgFadeInUp2; -moz-animation-name: textBgFadeInUp2; -o-animation-name: textBgFadeInUp2; animation-name: textBgFadeInUp2; } /* Text bg Fade In Up */ @-webkit-keyframes textBgFadeInUp { from { -webkit-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .06; } } @-moz-keyframes textBgFadeInUp { from { -moz-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .06; } } @-o-keyframes textBgFadeInUp { from { -o-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -o-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .06; } } @keyframes textBgFadeInUp { from { -webkit-transform: translate(-50%, 200%); -moz-transform: translate(-50%, 200%); -o-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .06; } } /* Text bg Fade In Up Dark */ @-webkit-keyframes textBgFadeInUpDark { from { -webkit-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .02; } } @-moz-keyframes textBgFadeInUpDark { from { -moz-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .02; } } @-o-keyframes textBgFadeInUpDark { from { -o-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -o-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .02; } } @keyframes textBgFadeInUpDark { from { -webkit-transform: translate(-50%, 200%); -moz-transform: translate(-50%, 200%); -o-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .02; } } /* Text bg Fade In Up 2 */ @-webkit-keyframes textBgFadeInUp2 { from { -webkit-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .5; } } @-moz-keyframes textBgFadeInUp2 { from { -moz-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .5; } } @-o-keyframes textBgFadeInUp2 { from { -o-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -o-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .5; } } @keyframes textBgFadeInUp2 { from { -webkit-transform: translate(-50%, 200%); -moz-transform: translate(-50%, 200%); -o-transform: translate(-50%, 200%); transform: translate(-50%, 200%); opacity: 0; } to { -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: .5; } } .fadeInScale { -webkit-animation-name: fadeInScale; -moz-animation-name: fadeInScale; -o-animation-name: fadeInScale; animation-name: fadeInScale; } /* Fade In Scale */ @-webkit-keyframes fadeInScale { from { -webkit-transform: scale(.7); transform: scale(.7); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-moz-keyframes fadeInScale { from { -moz-transform: scale(.7); transform: scale(.7); opacity: 0; } to { -moz-transform: scale(1); transform: scale(1); opacity: 1; } } @-o-keyframes fadeInScale { from { -o-transform: scale(.7); transform: scale(.7); opacity: 0; } to { -o-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes fadeInScale { from { -webkit-transform: scale(.7); -moz-transform: scale(.7); -o-transform: scale(.7); transform: scale(.7); opacity: 0; } to { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } } .scaleOut { -webkit-animation-name: scaleOut; -moz-animation-name: scaleOut; -o-animation-name: scaleOut; animation-name: scaleOut; } @-webkit-keyframes scaleOut { from { -webkit-transform: scale(1.1); transform: scale(1.1); } to { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes scaleOut { from { -moz-transform: scale(1.1); transform: scale(1.1); } to { -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes scaleOut { from { -o-transform: scale(1.1); transform: scale(1.1); } to { -o-transform: scale(1); transform: scale(1); } } @keyframes scaleOut { from { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } to { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } /* particles position scss * -------------------------------------------------------------------------------------------*/ .particles-js-canvas-el { position: absolute; z-index: 1; top: 0; height: 100vh !important; } /* Background ripple effect scss * -------------------------------------------------------------------------------------------*/ @-webkit-keyframes k1 { 0% { -webkit-transform: scale(.01); transform: scale(.01); opacity: 0; } 33% { -webkit-transform: scale(.4); transform: scale(.4); opacity: .8; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @-moz-keyframes k1 { 0% { -moz-transform: scale(.01); transform: scale(.01); opacity: 0; } 33% { -moz-transform: scale(.4); transform: scale(.4); opacity: .8; } 100% { -moz-transform: scale(1); transform: scale(1); opacity: 0; } } @-o-keyframes k1 { 0% { -o-transform: scale(.01); transform: scale(.01); opacity: 0; } 33% { -o-transform: scale(.4); transform: scale(.4); opacity: .8; } 100% { -o-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes k1 { 0% { -webkit-transform: scale(.01); -moz-transform: scale(.01); -o-transform: scale(.01); transform: scale(.01); opacity: 0; } 33% { -webkit-transform: scale(.4); -moz-transform: scale(.4); -o-transform: scale(.4); transform: scale(.4); opacity: .8; } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 0; } } .bg-ripple-animation { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .left-bottom-ripples { position: absolute; bottom: 0; left: 0; width: 160vh; height: 160vh; margin-bottom: -80vh; margin-left: -80vh; } .intro-video-bg-ripples { position: absolute; left: 0; width: 140vh; height: 140vh; margin-top: 21vh; margin-left: -6vh; } .top-right-ripples { position: absolute; top: 0; right: 0; width: 160vh; height: 160vh; margin-top: -80vh; margin-right: -80vh; } .ripples { width: 100%; height: 100%; text-align: center; } .ripples:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-animation-name: k1; -moz-animation-name: k1; -o-animation-name: k1; animation-name: k1; -webkit-animation-duration: 6s; -moz-animation-duration: 6s; -o-animation-duration: 6s; animation-duration: 6s; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; opacity: 0; border: .5px solid white; border-radius: 50%; background: -webkit-radial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .4) 100%); background: -moz- oldradial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .4) 100%); background: -o-radial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .4) 100%); background: radial-gradient(ellipse at center, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .4) 100%); } .ripples:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-animation-name: k1; -moz-animation-name: k1; -o-animation-name: k1; animation-name: k1; -webkit-animation-duration: 6s; -moz-animation-duration: 6s; -o-animation-duration: 6s; animation-duration: 6s; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; opacity: 0; border: .5px solid white; border-radius: 50%; background: -webkit-radial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .4) 100%); background: -moz- oldradial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .4) 100%); background: -o-radial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .4) 100%); background: radial-gradient(ellipse at center, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .4) 100%); } /* Sales Notification -------------------------------------------------------------------------------------------*/ .alert-minimalist { z-index: 2147483648 !important; width: 350px; padding: 10px; border-radius: 5px; background-color: white; -webkit-box-shadow: 0 5px 40px rgba(14, 42, 76, .2); box-shadow: 0 5px 40px rgba(14, 42, 76, .2); } .alert-minimalist [data-notify='dismiss'] { color: rgba(149, 149, 149, .7); } .alert-minimalist #image { float: left; } .alert-minimalist #image [data-notify='icon'] { height: 60px; margin-right: 12px; } .alert-minimalist #text { float: left; margin-top: 2px; } .alert-minimalist #text [data-notify='title'] { font-size: 85%; font-weight: 700; line-height: 1rem; display: block; color: #333; } .alert-minimalist #text [data-notify='message'] { font-size: 80%; } .alert-minimalist #text [data-notify='message'] span.blue { font-weight: 700; color: #28bcfd; } .alert-minimalist #text [data-notify='time'] { font-size: 70%; display: block; margin-top: 4px; color: rgba(149, 149, 149, .7); } /* Page sections css * ----------------------------------------------------------------------------------------------*/ /* Navbar section : Navbar area css */ .navbar { padding: 0; } .navbar .navbar-brand { font-size: 2.1rem; } .navbar .navbar-brand img { margin-right: .65rem; } .navbar .navbar-brand .brand-text { font-weight: 700; position: relative; top: 5px; } .navbar .navbar-brand .brand-text .font-color-orange { color: #f59e33; } .navbar.navbar-dark { min-height: 65px; } .navbar.navbar-absolute { position: absolute; z-index: 999; top: 0; left: 0; width: 100%; padding: 1.2rem 0; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; background: transparent; } .navbar ul.navbar-nav li .nav-link { font-size: .8rem; font-weight: 700; padding: .21rem .95rem; text-decoration: none; letter-spacing: .5px; color: #fff; } .navbar ul.navbar-nav li::last-child { margin-right: .5rem; } .navbar .dropdown a { font-size: .8rem; font-weight: 700; padding: 1.9rem .65rem; text-decoration: none; color: #fff; } .navbar .dropdown .dropdown-menu { min-width: 200px; margin-top: 1rem; border: none; background-color: white; } .navbar .dropdown .dropdown-menu a { padding: .5rem .75rem; color: #fff; } .navbar .dropdown .dropdown-menu a:before { font-family: 'themify'; font-size: .55rem; font-weight: 700; padding-right: .5rem; content: '\e649'; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .navbar .dropdown .dropdown-menu a.dropdown-item { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; border: none; } .navbar .dropdown .dropdown-menu a.dropdown-item:hover, .navbar .dropdown .dropdown-menu a.dropdown-item:focus, .navbar .dropdown .dropdown-menu a.dropdown-item:active { padding-left: 20px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; background-color: transparent; } .navbar .dropdown .dropdown-menu a.dropdown-item:hover:before, .navbar .dropdown .dropdown-menu a.dropdown-item:focus:before, .navbar .dropdown .dropdown-menu a.dropdown-item:active:before { left: 10px; } .navbar .dropdown .dropdown-menu.show { border: none; -webkit-box-shadow: -1px 2px 25px 0 rgba(0, 0, 0, .09); box-shadow: -1px 2px 25px 0 rgba(0, 0, 0, .09); } .navbar .dropdown .dropdown-menu.show:before { position: absolute; top: -8px; left: 13px; float: right; content: ''; border-right: 8px solid transparent; border-bottom: 10px solid #fff; border-left: 8px solid transparent; } .navbar.navbar-light { min-height: 65px; } .navbar.navbar-light a { color: #fff; } .navbar.navbar-light a.btn { color: #fff; } .navbar.navbar-light ul.navbar-nav li .nav-link { color: #fff; } #navigation #slide-line { position: absolute; bottom: 0; height: 4px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .navbar.navbar-fixed { padding: .75rem 0; background: -webkit-gradient(linear, left top, right top, from(#140e38), to(#194089)); background: -webkit-linear-gradient(left, #140e38, #194089); background: -moz- oldlinear-gradient(left, #140e38, #194089); background: -o-linear-gradient(left, #140e38, #194089); background: linear-gradient(to right, #140e38, #194089); } header .navbar.navbar-shadow { -webkit-box-shadow: 0 5px 40px rgba(14, 42, 76, .2); box-shadow: 0 5px 40px rgba(14, 42, 76, .2); } /* Medium devices (tablets, 768px and up) */ @media (max-width: 1199.98px) { .navbar ul.navbar-nav li .nav-link { padding-right: .55rem; padding-left: .55rem; } } /* Responsive navbar for medium and small screen */ @media (max-width: 991.98px) { .main-menu.navbar .dropdown-menu.show:before { display: none; } .main-menu.navbar a.navbar-brand { padding: .21rem 1rem; } .main-menu.navbar .navbar-toggler { margin-right: 1rem; border-color: rgba(255, 255, 255, .7); } .main-menu.navbar div.navbar-nav { padding: 1rem 1.5rem; } .main-menu.navbar div.navbar-nav .dropdown { padding: 0 !important; } .main-menu.navbar div.navbar-nav .nav-link { padding: .40rem .65rem; } } /* 3d animation header section : Head area css */ .head-area { position: relative; } .head-area .btn { padding: 1rem 2.2rem 1rem 2.2rem; } .head-area .head-content { z-index: 6; height: 100vh; } .head-area .head-content h1 { font-size: 1.9rem; font-weight: 700; line-height: 2.75rem; color: #fff; } .head-area .head-content h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.9rem; margin-top: 4.375rem; color: #fff; } .head-area .head-content .container { z-index: 9; } /* About section : about content, image and play button css */ .about .content-area h4 { color: #fff; } .about .content-area h6 { font-size: 1.125rem; line-height: 1.5rem; color: #fff; } .about .content-area .play-video { position: absolute; top: 78%; left: 53%; -webkit-transform: translate(-70%, -50%); -moz-transform: translate(-70%, -50%); -ms-transform: translate(-70%, -50%); -o-transform: translate(-70%, -50%); transform: translate(-70%, -50%); } .about .content-area .play-video .play { display: inline-block; width: 72px; height: 72px; padding: 1.125rem 1.1rem; } .about .content-area .play-video .play:hover { text-decoration: none; } .about .content-area .play-video .play i { font-size: 2rem; } .about .content-area .play-video span { font-size: .875rem; display: block; color: #fff; } /* Exchange Listing section : Listing title & content css */ .exchange-listing .listing { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .exchange-listing .listing .col { font-weight: 600; margin: 1.75rem 0 .95rem; padding-top: .25rem; text-align: center; } .exchange-listing .listing .col:before { position: relative; top: 5px; left: -15px; float: left; height: 4rem; content: ''; border-left: 1px solid #c2c2c2; } .exchange-listing .listing .col:first-child:before { border-left: none; } .exchange-listing .listing .col h2 { font-size: 2rem; font-weight: 600; color: #fff; } @media (max-width: 991.98px) { .exchange-listing .listing .col:nth-child(2):before { border-left: none; } } @media (max-width: 575.98px) { .exchange-listing .listing .col:nth-child(4):before { border-left: none; } } /* header section type 2 : Light/Dark page section heading with title, sub-title and desc */ .section-padding { padding-top: 6.5rem; padding-bottom: 6.5rem; } /* Dark section heading */ .dark-bg-heading { position: relative; } @media (min-width: 768px) { .dark-bg-heading { margin-bottom: 6rem; } } @media (max-width: 991.98px) { .dark-bg-heading { margin-bottom: 3rem; } } .dark-bg-heading .title { padding-top: 2.25rem; text-transform: uppercase; color: #fff; } .dark-bg-heading .sub-title { font-size: 5.625rem; font-weight: 700; position: absolute; top: -2px; left: 50%; display: block; width: 100%; margin: 0 auto; -webkit-transform: translate(-50%); -moz-transform: translate(-50%); -ms-transform: translate(-50%); -o-transform: translate(-50%); transform: translate(-50%); text-align: center; letter-spacing: 0; text-transform: uppercase; opacity: .075; color: #dcd6f5; } .dark-bg-heading .content-desc { font-size: .875rem; margin-top: 2.5rem; color: #fff; } /* Default/Light section heading */ .heading { position: relative; } @media (min-width: 768px) { .heading { margin-bottom: 6rem; } } @media (max-width: 991.98px) { .heading { margin-bottom: 3rem; } } .heading .title { padding-top: 2.25rem; text-transform: uppercase; color: #fff; } .heading .sub-title { font-size: 5.625rem; font-weight: 700; position: absolute; top: -2px; left: 50%; display: block; width: 100%; margin: 0 auto; -webkit-transform: translate(-50%); -moz-transform: translate(-50%); -ms-transform: translate(-50%); -o-transform: translate(-50%); transform: translate(-50%); text-align: center; letter-spacing: 0; text-transform: uppercase; opacity: .2; color: #dcd6f5; } .heading .content-desc { margin-top: 2.5rem; color: #fff; } /* Team section : Team & Advisor section with team image and description */ .team .team-width span { font-size: 2rem; font-weight: 700; display: block; color: #fff; } .team .team-img { position: relative; z-index: 1; padding: 7px; cursor: pointer; border-radius: 50%; background: -webkit-linear-gradient(45deg, #29beff, #1c76fe); background: -moz- oldlinear-gradient(45deg, #29beff, #1c76fe); background: -o-linear-gradient(45deg, #29beff, #1c76fe); background: linear-gradient(45deg, #29beff, #1c76fe); -webkit-box-shadow: 0 0 12px 0 #29beff; box-shadow: 0 0 12px 0 #29beff; } .team .team-img:hover { background: -webkit-linear-gradient(45deg, #ff4137, #fdc800); background: -moz- oldlinear-gradient(45deg, #ff4137, #fdc800); background: -o-linear-gradient(45deg, #ff4137, #fdc800); background: linear-gradient(45deg, #ff4137, #fdc800); -webkit-box-shadow: 0 0 12px 0 #ff4137; box-shadow: 0 0 12px 0 #ff4137; } .team .team-img:hover:before { -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); -ms-transform: rotate(55deg); -o-transform: rotate(55deg); transform: rotate(55deg); border-image-source: linear-gradient(to top, #ff4137, #fdc800); } .team .team-img:hover ~ .team-icon { background: -webkit-linear-gradient(45deg, #ff4137, #fdc800); background: -moz- oldlinear-gradient(45deg, #ff4137, #fdc800); background: -o-linear-gradient(45deg, #ff4137, #fdc800); background: linear-gradient(45deg, #ff4137, #fdc800); } .team .team-img img { border: 5px solid #fff; } .team .team-img:before { position: absolute; z-index: -1; top: -28px; left: 50%; height: 200px; content: ''; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; -webkit-transition-property: -webkit-transform; -moz-transition-property: transform, -moz-transform; -o-transition-property: -o-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform, -moz-transform, -o-transform; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-right: 3px solid #29beff; border-image-source: linear-gradient(to top, #29beff, #1c76fe); border-image-slice: .5; } .team .team-icon { position: absolute; z-index: 1; bottom: 25%; left: 135px; padding: .2rem .1rem .017rem .17rem; border-radius: 50%; background: -webkit-linear-gradient(45deg, #29beff, #1c76fe); background: -moz- oldlinear-gradient(45deg, #29beff, #1c76fe); background: -o-linear-gradient(45deg, #29beff, #1c76fe); background: linear-gradient(45deg, #29beff, #1c76fe); } .team .team-icon i { font-size: .875rem; padding: .25rem .3rem; border-radius: 50%; background: #fff; } .team .profile .name { font-size: 1.125rem; font-weight: 700; color: #fff; } .team .profile .role { font-size: .875rem; color: #fff; } .team .profile img { position: relative; left: -10px; height: 40px; } .team .profile .social-profile a { font-size: 1.125rem; text-decoration: none; color: #fff; } /* Team modal popup scss */ .team-modal { background: -webkit-linear-gradient(45deg, rgba(41, 190, 255, .85), rgba(28, 118, 254, .85)); background: -moz- oldlinear-gradient(45deg, rgba(41, 190, 255, .85), rgba(28, 118, 254, .85)); background: -o-linear-gradient(45deg, rgba(41, 190, 255, .85), rgba(28, 118, 254, .85)); background: linear-gradient(45deg, rgba(41, 190, 255, .85), rgba(28, 118, 254, .85)); } .team-modal .close { position: absolute; z-index: 9; top: 1rem; right: 1rem; } .team-modal .progress { height: 6px; } /* FAQ section : FAQ navs with questions/answers accordion */ .faq .nav.nav-underline { border-bottom: 1px solid #eeecf4; } .faq .nav.nav-underline a { font-size: 1.125rem; font-weight: 700; text-align: center; color: #c7b8ff; background: transparent; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; } .faq .nav.nav-underline a.nav-item.nav-link.active { margin-bottom: -2px; color: #fff; border: none; border-bottom: 4px solid #7240a5; border-radius: 0; background-color: transparent; } .faq .tab-content .card { margin-bottom: .75rem; border: 1px solid #eeecf4; border-radius: .5rem; } .faq .tab-content .card .card-header { padding: .6rem; text-decoration: none; border-bottom: none; background-color: transparent; } .faq .tab-content .card .card-header .btn-link { font-size: 1rem; font-weight: 700; line-height: 1.5; display: inline-block; margin: 6px 2.25rem 0 2.9rem; padding: .375rem .75rem; cursor: pointer; text-align: left; white-space: unset; } .faq .tab-content .card .card-header .btn-link:hover, .faq .tab-content .card .card-header .btn-link:focus, .faq .tab-content .card .card-header .btn-link:active { text-decoration: none; } .faq .tab-content .card .card-body { font-size: .875rem; font-weight: 700; padding-top: .75rem; color: #fff; } .faq .collapse-icon .card-header { position: relative; } .faq .collapse-icon a[data-toggle='collapse']:after, .faq .collapse-icon a[data-toggle='collapse']:before { font-family: 'themify'; font-size: clac(.65rem); position: absolute; top: 40%; right: 20px; margin-top: -8px; -webkit-transition: all 300ms linear 0s; -moz-transition: all 300ms linear 0s; -o-transition: all 300ms linear 0s; transition: all 300ms linear 0s; background-image: -webkit-gradient(linear, left top, right top, from(#bf68e6), to(#9e48cd)); background-image: -webkit-linear-gradient(left, #bf68e6, #9e48cd); background-image: -moz- oldlinear-gradient(left, #bf68e6, #9e48cd); background-image: -o-linear-gradient(left, #bf68e6, #9e48cd); background-image: linear-gradient(90deg, #bf68e6, #9e48cd); -webkit-background-clip: text; background-clip: text; text-fill-color: transparent; } .faq .collapse-icon a[data-toggle='collapse']:after { content: '\e648'; } .faq .collapse-icon a[data-toggle='collapse']:before { content: '\e64b'; } .faq .collapse-icon a[data-toggle='collapse'] .icon { float: left; margin-top: 1px; } .faq .collapse-icon a[data-toggle='collapse'] .icon:after, .faq .collapse-icon a[data-toggle='collapse'] .icon:before { font-family: 'themify'; font-size: .65rem; position: absolute; top: 40%; left: 20px; margin-top: -8px; padding: .5rem .65rem; -webkit-transition: all 300ms linear 0s; -moz-transition: all 300ms linear 0s; -o-transition: all 300ms linear 0s; transition: all 300ms linear 0s; color: #fff; border: 0; border-radius: 1rem; background-image: -webkit-linear-gradient(45deg, #bf68e6, #9e48cd); background-image: -moz- oldlinear-gradient(45deg, #bf68e6, #9e48cd); background-image: -o-linear-gradient(45deg, #bf68e6, #9e48cd); background-image: linear-gradient(45deg, #bf68e6, #9e48cd); background-repeat: repeat-x; -webkit-box-shadow: 0 0 12px 0 #bf68e6; box-shadow: 0 0 12px 0 #bf68e6; } .faq .collapse-icon a[data-toggle='collapse'] .icon:after { content: '\e622'; } .faq .collapse-icon a[data-toggle='collapse'] .icon:before { content: '\e61a'; } .faq .collapse-icon.left a { padding-left: 28px; } .faq .collapse-icon.left a:before, .faq .collapse-icon.left a:after { right: auto; left: 20px; } .faq .collapse-icon a[aria-expanded='true']:before, .faq .collapse-icon a[aria-expanded='true'] .icon:before { opacity: 0; } .faq .collapse-icon a[aria-expanded='false']:after, .faq .collapse-icon a[aria-expanded='false'] .icon:after { opacity: 0; } .faq .collapse-icon.accordion-icon-rotate a[aria-expanded='true']:before, .faq .collapse-icon.accordion-icon-rotate a[aria-expanded='true'] .icon:before { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } .faq .collapse-icon.accordion-icon-rotate a[aria-expanded='false']:after, .faq .collapse-icon.accordion-icon-rotate a[aria-expanded='false'] .icon:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* contact page : Contact area info and icons */ .contact { position: relative; } .contact .contact-info { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .contact .contact-info li { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; } .contact .contact-info li i { font-size: 2rem; color: #7240a5; } .contact .contact-info li span { font-size: 1.125rem; vertical-align: top; color: #fff; } /* 3d animation footer section : footer area css */ .footer { position: relative; margin-top: 6.5rem; padding-top: 18.5rem; padding-bottom: 2.5rem; background: url('../../theme-assets/images/footer-image.png') no-repeat center center; -webkit-background-size: cover; background-size: cover; } .footer.footer-dark { color: #fff; } .footer.footer-light { color: #000; } .footer .footer-wrapper .title { margin-bottom: 55px; } .footer .footer-wrapper .logo-text { font-size: 1.5rem; } .footer .footer-wrapper ul.useful-links { padding: 0; } .footer .footer-wrapper ul.useful-links li { line-height: 30px; } .footer .footer-wrapper ul.useful-links li a { color: #fff; } .footer .footer-wrapper ul.useful-links li a:hover { text-decoration: none; } .footer .footer-wrapper ul.social-buttons li { display: inline-block; } .footer .footer-wrapper ul.social-buttons li a { font-size: 1.125rem; margin-right: 1rem; padding: 0; color: #fff; } .footer .footer-wrapper ul.social-buttons li a i { vertical-align: middle; } .footer .footer-wrapper ul.social-buttons li a:hover { color: #bf68e6; } .footer .footer-wrapper .feed span { font-size: .875rem; display: block; margin-bottom: 25px; } .footer .footer-wrapper .copyright { font-size: .75rem; } /* Template level css needed for all 3d-animation pages * ----------------------------------------------------------------------------------------------*/ .svg-wrapper { background-image: -webkit-linear-gradient(20deg, #140e38 0%, #140e38 25%, #14387b 35%, #14387b 65%, #140e38 75%, #140e38 100%); background-image: -moz- oldlinear-gradient(20deg, #140e38 0%, #140e38 25%, #14387b 35%, #14387b 65%, #140e38 75%, #140e38 100%); background-image: -o-linear-gradient(20deg, #140e38 0%, #140e38 25%, #14387b 35%, #14387b 65%, #140e38 75%, #140e38 100%); background-image: linear-gradient(70deg, #140e38 0%, #140e38 25%, #14387b 35%, #14387b 65%, #140e38 75%, #140e38 100%); } #svg-animation .cic-logo-animation { -webkit-animation: updown_logo 4s ease infinite; -moz-animation: updown_logo 4s ease infinite; -o-animation: updown_logo 4s ease infinite; animation: updown_logo 4s ease infinite; } #svg-animation .svg-elements-1-animation { -webkit-animation: updown1 3s ease 2; -moz-animation: updown1 3s ease 2; -o-animation: updown1 3s ease 2; animation: updown1 3s ease 2; } #svg-animation .svg-elements-2-animation { -webkit-animation: updown2 2s ease 2; -moz-animation: updown2 2s ease 2; -o-animation: updown2 2s ease 2; animation: updown2 2s ease 2; } @-webkit-keyframes updown_logo { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(16px); transform: translateY(16px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @-moz-keyframes updown_logo { 0% { -moz-transform: translateY(0px); transform: translateY(0px); } 50% { -moz-transform: translateY(16px); transform: translateY(16px); } 100% { -moz-transform: translateY(0px); transform: translateY(0px); } } @-o-keyframes updown_logo { 0% { -o-transform: translateY(0px); transform: translateY(0px); } 50% { -o-transform: translateY(16px); transform: translateY(16px); } 100% { -o-transform: translateY(0px); transform: translateY(0px); } } @keyframes updown_logo { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(16px); -moz-transform: translateY(16px); -o-transform: translateY(16px); transform: translateY(16px); } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes updown1 { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(8px); transform: translateY(8px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @-moz-keyframes updown1 { 0% { -moz-transform: translateY(0px); transform: translateY(0px); } 50% { -moz-transform: translateY(8px); transform: translateY(8px); } 100% { -moz-transform: translateY(0px); transform: translateY(0px); } } @-o-keyframes updown1 { 0% { -o-transform: translateY(0px); transform: translateY(0px); } 50% { -o-transform: translateY(8px); transform: translateY(8px); } 100% { -o-transform: translateY(0px); transform: translateY(0px); } } @keyframes updown1 { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); -o-transform: translateY(8px); transform: translateY(8px); } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes updown2 { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(8px); transform: translateY(8px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @-moz-keyframes updown2 { 0% { -moz-transform: translateY(0px); transform: translateY(0px); } 50% { -moz-transform: translateY(8px); transform: translateY(8px); } 100% { -moz-transform: translateY(0px); transform: translateY(0px); } } @-o-keyframes updown2 { 0% { -o-transform: translateY(0px); transform: translateY(0px); } 50% { -o-transform: translateY(8px); transform: translateY(8px); } 100% { -o-transform: translateY(0px); transform: translateY(0px); } } @keyframes updown2 { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); -o-transform: translateY(8px); transform: translateY(8px); } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } #svg-animation .path { -webkit-animation: dash 3s linear forwards; -moz-animation: dash 3s linear forwards; -o-animation: dash 3s linear forwards; animation: dash 3s linear forwards; fill: none; stroke-dasharray: 1000; stroke-dashoffset: 1000; } @-webkit-keyframes dash { to { stroke-dashoffset: 0; } } @-moz-keyframes dash { to { stroke-dashoffset: 0; } } @-o-keyframes dash { to { stroke-dashoffset: 0; } } @keyframes dash { to { stroke-dashoffset: 0; } } #svg-animation .path-reverse { -webkit-animation: dash-reverse 2s linear forwards; -moz-animation: dash-reverse 2s linear forwards; -o-animation: dash-reverse 2s linear forwards; animation: dash-reverse 2s linear forwards; fill: none; stroke-dasharray: 500; stroke-dashoffset: 500; } @-webkit-keyframes dash-reverse { from { stroke-dashoffset: -500; } to { stroke-dashoffset: 0; } } @-moz-keyframes dash-reverse { from { stroke-dashoffset: -500; } to { stroke-dashoffset: 0; } } @-o-keyframes dash-reverse { from { stroke-dashoffset: -500; } to { stroke-dashoffset: 0; } } @keyframes dash-reverse { from { stroke-dashoffset: -500; } to { stroke-dashoffset: 0; } } header .navbar.navbar-fixed { background: #fff; } header .navbar.navbar-fixed .brand-text { color: #154d8c; } header .navbar.navbar-fixed ul.navbar-nav li .nav-link { color: #154d8c; } header .navbar.navbar-fixed .dropdown a { color: #154d8c; } header .navbar .dropdown .dropdown-menu .dropdown-item { color: #7d7d7d; } #navigation #slide-line { background-color: #fdc800; } .ripples:before { border: .5px solid rgba(255, 255, 255, .4); background: -webkit-radial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .1) 100%); background: -moz- oldradial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .1) 100%); background: -o-radial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .1) 100%); background: radial-gradient(ellipse at center, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .1) 100%); } .ripples:after { border: .5px solid rgba(255, 255, 255, .4); background: -webkit-radial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .1) 100%); background: -moz- oldradial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .1) 100%); background: -o-radial-gradient(center, ellipse, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .1) 100%); background: radial-gradient(ellipse at center, rgba(182, 225, 235, 0) 0%, rgba(182, 225, 235, .05) 40%, rgba(182, 225, 235, .1) 100%); } p { color: #c7b8ff; } .dark-bg-text-color { color: #c7b8ff; } .title { color: #fff; } .heading .sub-title { opacity: .05 !important; } .crypto-3d-graphic { position: relative; left: -30%; margin-top: 100px; } #about:before { position: absolute; left: 0; width: 236px; height: 729px; content: ''; background: url('../../theme-assets/images/what-is-ocflo-shape.png') no-repeat center right; } #faq:before { position: absolute; right: 5%; width: 346px; height: 346px; content: ''; background: url('../../theme-assets/images/solutions-shape.png') no-repeat center right; } #token-sale-mobile-app { position: relative; } #token-sale-mobile-app .token-sale:before { position: absolute; top: 15%; left: 0; width: 673px; height: 902px; content: ''; background: url('../../theme-assets/images/token-sale-shape.png') no-repeat center left; } #token-sale-mobile-app ul.token-sale-info li { color: #c7b8ff; } #references:before { position: absolute; right: 0; width: 213px; height: 346px; content: ''; background: url('../../theme-assets/images/references-shape.png') no-repeat center right; } #token-distribution h6.content-title { color: #fff; } #team:before { position: absolute; left: 0; width: 260px; height: 424px; content: ''; background: url('../../theme-assets/images/team-shape.png') no-repeat center left; } #team .team-width p { color: #fff; } #team .profile .social-profile a { color: #c7b8ff !important; } .team-modal p { color: #7d7d7d; } .faq .tab-content .card .card-body { color: #7d7d7d; } .contact:before { position: absolute; right: 0; width: 153px; height: 556px; content: ''; background: url('../../theme-assets/images/contact-shape.png') no-repeat center right; } .exchange-listing .listing .col:before { border-left: 1px solid #c7b8ff; } .footer #collapsementionslegales p { color: #0b0c0f; } .ico-modal .close { font-size: 2rem; font-weight: normal; position: absolute; z-index: 999; top: -30px; right: 0; opacity: 1; color: #fff; } @media (max-width: 575.98px) { .svg-img { width: 350px !important; } .head-area .head-content .banner-content { padding-top: 1.5rem !important; text-align: center; } .head-area .head-content h1 { font-size: 1.2rem; line-height: 1.8rem; } .head-area .head-content h3 { font-size: .9rem; line-height: 1.4rem; margin-top: 2rem !important; } .head-area .head-content .btn { font-size: .8rem; padding: .8rem !important; } .section-padding { padding: 3rem 0 !important; } .dark-bg-heading { margin-bottom: 3rem !important; } .dark-bg-heading .sub-title, .heading .sub-title { display: none !important; } .dark-bg-heading .title, .heading .title { font-size: 1.4rem !important; } .move-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .about .content-area .what-is-ocflo-img { text-align: center; } .about .content-area .play-video { top: 75%; left: 53%; } .about .content-area .play-video .play { width: 50px; height: 50px; padding: .75rem !important; } .about .content-area .play-video .play i { font-size: 1.5rem; } .problems-img, .solutions-img { width: 250px; } .whitepaper-img { margin-bottom: 3rem; text-align: center; } .token-distribution .token-img { margin-bottom: 3rem; text-align: center; } .token-sale:before { content: none; } .roadmap .timestamp.active span:after { left: 44.1%; } .roadmap .timestamp span:after { left: 44.1%; } .roadmap .next-slide { right: -14px; } .roadmap .prev-slide { left: -14px; } .faq .nav.nav-underline a { font-size: 1rem; } .contact .contact-info { display: block; } .contact .contact-info li { margin: 1rem 0; } .contact .contact-info li i { font-size: 1.12rem; line-height: 1.5rem; } .coin-img { text-align: center; } .coin-img img { width: 200px; } .mobile-app { margin-top: 3rem !important; } .mobile-app .mobile-app-imgs .mobile-app-img-1 { width: 250px; } .mobile-app .mobile-app-imgs .mobile-app-img-2 { top: 36px; left: 145px; width: 70px; } .mobile-app .mobile-app-imgs .mobile-app-img-3 { top: -9px; left: 141px; width: 115px; } .mobile-app .mobile-app-imgs .mobile-app-img-4 { top: -92px; left: 146px; width: 175px; } .mobile-app .btn { padding: .7rem 1rem !important; } .mobile-app .btn span { padding-right: 1rem !important; } .token-details .progress-bottom { top: 2rem; } .token-details .clock-counter .flip-clock-wrapper .flip { height: 24px; margin: 2px; padding: 23px 1px; } .token-details .clock-counter .flip-clock-wrapper .flip li { top: 6px; } .token-details .clock-counter .flip-clock-wrapper .flip li a .up .inn { font-size: 1.5rem; top: -16px; } .token-details .clock-counter .flip-clock-wrapper .flip li a .down .inn { font-size: 1.5rem; bottom: 16px; } .token-details .clock-counter .flip-clock-wrapper .flip-clock-dot { left: 2px; width: 4px; height: 4px; } .token-details .clock-counter .flip-clock-wrapper .flip-clock-dot.top { top: 16px; } .token-details .clock-counter .flip-clock-wrapper .flip-clock-dot.bottom { bottom: 64px; } .token-details .clock-counter .flip-clock-divider.days .flip-clock-label { left: -20px; } .token-details .clock-counter .flip-clock-divider.hours .flip-clock-label { left: -8px; } .token-details .clock-counter .flip-clock-divider.minutes .flip-clock-label { left: -7px; } .token-details .clock-counter .flip-clock-divider.seconds .flip-clock-label { left: 0; } } @media (min-width: 576px) and (max-width: 767.98px) { .svg-img { width: 425px !important; } .head-area .head-content .banner-content { padding-top: 1rem !important; text-align: center; } .head-area .head-content h1 { font-size: 1.5rem; line-height: 2rem; } .head-area .head-content h3 { font-size: 1rem; line-height: 1.5rem; margin-top: 2rem !important; } .head-area .head-content .btn { font-size: .8rem; padding: .8rem; } .section-padding { padding: 3rem 0; } .dark-bg-heading { margin-bottom: 3rem !important; } .dark-bg-heading .sub-title, .heading .sub-title { font-size: 2.75rem; top: 14%; } .title { font-size: 1.5rem; } .about .content-area .what-is-ocflo-img { text-align: center; } .about .content-area .play-video { left: 52%; } .move-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .whitepaper-img { margin-bottom: 3rem; text-align: center; } .token-distribution .token-img { margin-bottom: 3rem; } .token-sale:before { content: none; } .roadmap .timestamp.active span:after { left: 44.6%; } .roadmap .timestamp span:after { left: 44.6%; } .roadmap .next-slide { right: -8px; } .roadmap .prev-slide { left: -8px; } .contact .contact-info { display: block; } .contact .contact-info li { margin: 1rem 0; } .coin-img { text-align: center; } } @media (min-width: 768px) and (max-width: 991.98px) { .svg-img { width: 475px; } .head-area .head-content .banner-content { padding-top: 1rem !important; text-align: center; } .head-area .head-content h1 { font-size: 1.5rem; line-height: 2rem; } .head-area .head-content h3 { font-size: 1rem; line-height: 1.5rem; margin-top: 2rem !important; } .head-area .head-content .btn { font-size: 1rem; padding: .6rem 1rem; } .dark-bg-heading .sub-title, .heading .sub-title { font-size: 4rem !important; top: 6% !important; } .about .content-area .what-is-ocflo-img { text-align: center; } .about .content-area .play-video { left: 52%; } .move-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .whitepaper-img { margin-bottom: 3rem; text-align: center; } .token-distribution .token-img { margin-bottom: 3rem; text-align: center; } .token-distribution .token-img img { width: 450px; } .coin-img { text-align: center; } .roadmap .next-slide { right: 2px; } .roadmap .prev-slide { left: 2px; } } @media (max-width: 991.98px) { .main-menu.navbar.navbar-absolute.open { background: #102e65; } .main-menu.navbar .dropdown-menu { background: #14387b; -webkit-box-shadow: none !important; box-shadow: none !important; } .main-menu.navbar .dropdown-menu a { color: #fff; } } @media (min-width: 992px) and (max-width: 1199.98px) { .svg-img { width: 450px !important; } .head-area .head-content .banner-content { padding-top: .5rem !important; } .head-area .head-content h1 { font-size: 1.5rem; line-height: 2rem; } .head-area .head-content h3 { font-size: 1rem; line-height: 1.5rem; margin-top: 2rem !important; } .dark-bg-heading .sub-title, .heading .sub-title { font-size: 4.625rem !important; } .about .content-area .what-is-ocflo-img img { width: 450px; } .about .content-area .play-video { left: 54%; } .token-img img { width: 450px; } .mobile-app .mobile-app-imgs .mobile-app-img-1 { width: 375px; } .mobile-app .mobile-app-imgs .mobile-app-img-2 { top: 55px; left: 220px; width: 102px; } .mobile-app .mobile-app-imgs .mobile-app-img-3 { top: -13px; left: 210px; width: 174px; } .mobile-app .mobile-app-imgs .mobile-app-img-4 { top: -114px; left: 235px; width: 220px; } .roadmap .next-slide { right: 14px; } .roadmap .prev-slide { left: 14px; } } @media (min-width: 1200px) and (max-width: 1499.98px) { .svg-img { width: 570px; } }