/* @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900'); */ /* @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900'); */ /* @import 'css/fonts.css'; */ /* @import 'css/bootstrap.min.css'; */ /* @import 'css/owl.carousel.min.css'; */ /* @import 'css/animate.css'; */ /* @import 'css/magnific-popup.css'; */ /* @import 'css/font-awesome.min.css'; */ /* @import 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; */ /* @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/montserrat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: block; src: url(fonts/montserrat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: block; src: url(fonts/montserrat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: block; src: url(fonts/montserrat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } */ /** * Owl Carousel v2.2.1 * Copyright 2013-2017 David Deutsch * Licensed under () */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /* @charset "UTF-8"; */ /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 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); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-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; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* -------------------------- :: 1.0 Base CSS Start -------------------------- */ * { margin: 0; padding: 0; } body{ background-color: #fcfcfc; } body, html { font-family: 'Montserrat','Open Sans', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 400; color: #55585f; line-height: 1.2; } h2{ font-weight: 600; } h3, h4 { font-weight: 500; } a, a:hover { /* font-weight: 400; */ text-decoration: none; color: #5c4cff; /* -webkit-transition-duration: 300ms; transition-duration: 300ms; */ } ul li { list-style: none; } p { font-family: 'Montserrat', sans-serif; color: #363F5A; font-size: 14px; font-weight: 500; margin-top: 0; line-height: 22px; } ul, ol { margin: 0; padding: 0; } img { max-width: 100%; height: auto; } .mt-12 { margin-top: 12px; } .mt-15 { margin-top: 15px; } .mt-30 { margin-top: 30px !important; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-100 { margin-top: 100px; } .mt-150 { margin-top: 150px; } .mr-15 { margin-right: 15px; } .mr-30 { margin-right: 30px; } .mr-50 { margin-right: 50px; } .mr-100 { margin-right: 100px; } .mb-15 { margin-bottom: 15px; } .mb-30 { margin-bottom: 30px; } .mb-50 { margin-bottom: 50px; } .mb-100 { margin-bottom: 100px; } .ml-15 { margin-left: 15px !important; } .ml-30 { margin-left: 30px; } .ml-50 { margin-left: 50px; } .ml-100 { margin-left: 100px; } .min-fit { min-width: fit-content; } #preloader { overflow: hidden; background-color: #211b31; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 999999; } .mosh-preloader { overflow: hidden; -webkit-animation: 3000ms linear 0s normal none infinite running mosh-preloader; animation: 3000ms linear 0s normal none infinite running mosh-preloader; background-color: transparent; border-color: #f1f2f3 #f1f2f3 #5c4cff; border-radius: 50%; border-style: solid; border-width: 4px; height: 50px; left: calc(50% - 25px); position: relative; top: calc(50% - 25px); width: 50px; z-index: 9; } @-webkit-keyframes mosh-preloader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes mosh-preloader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } #fc_frame { bottom: 50px !important; } #scrollUp { bottom: 0; font-size: 24px; left: 30px; width: 40px; background: #5c4cff; color: #fff; text-align: center; height: 50px; line-height: 38px; border-radius: 20px 20px 0 0; box-shadow: 2px 10px 8px rgba(0, 0, 0, 0.15); } .mosh-table { display: table; height: 100%; left: 0; position: relative; top: 0; width: 100%; z-index: 2; } .mosh-table-cell { display: table-cell; vertical-align: middle; } .section-heading { margin-bottom: 100px; } .section-heading > p { font-weight: 700; color: #bec0cc; font-size: 12px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; } .section-heading > h2 { font-size: 40px; margin: 0; } .section-heading > h5 { font-size: 22px; color: #5c4cff; line-height: 1.8; font-weight: 500; } .mosh-btn { background-color: #5c4cff; cursor: pointer; /* min-width: 150px; */ height: 54px; padding: 0 30px; border-radius: 70px; color: #fff; font-size: 14px; line-height: 54px; font-weight: 700; text-transform: uppercase; -webkit-transition: background-color 200ms; transition: background-color 200ms; box-shadow: 0px 0px 20px 3px #4a7aec73; font-family: 'Montserrat', sans-serif; } .mosh-btn:hover { background-color: #4c87ff; color: #fff; } .bg-overlay, .bg-overlay-white { position: relative; z-index: 1; } .bg-overlay:after, .bg-overlay-white:after { background-color: rgba(33, 27, 49, 0.7); width: 100%; height: 100%; top: 0; left: 0; content: ''; z-index: -1; position: absolute; } .bg-overlay-white:after { background-color: rgba(231, 235, 246, 0.89); } .bg-img { background-position: center center; background-repeat: no-repeat; background-size: cover; } /* -------------------------- :: 2.0 Header Area CSS -------------------------- */ body, .header_area { min-width: 360px; } .header_area { /* background-color: #fff; */ /* height: 78px; */ width: 100%; position: fixed; top: 0; z-index: 999; -webkit-transition-duration: 0; transition-duration: 0; } .menu_area { position: relative; z-index: 2; } .menu_area #nav .nav-link { color: #333; display: block; font-size: 15px; /* padding: 0; */ /* margin: 0 15px; */ font-weight: 400; } .menu_area .dropdown-menu.show { border: none; /* box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.15); */ } .menu_area .dropdown-item { font-size: 14px; font-weight: 500; color: #555; padding: .5rem 2rem; text-decoration: none; transition: ease-in-out .2s; border-radius: .8rem; margin: 0.1rem; width: auto; } .menu_area #nav .nav-link:hover, .menu_area #nav .nav-item.active .nav-link, .menu_area .dropdown-item:hover { color: #5c4cff; background: #eceaff; } .menu_area #nav .nav-link:focus, .menu_area #nav .nav-item.active .nav-link:focus, .menu_area .dropdown-item:focus { color: #5c4cff; } .login-register-btn a { color: #5c4cff; display: inline-block; font-weight: 500; } .login-register-btn a:hover { color: #000; } .search-button > a { margin: 0 80px; } .navbar-nav { /* header navbar animation */ /* -webkit-transition-duration: 500ms; transition-duration: 500ms; */ } /* Search Form CSS */ .search-form-area { width: auto; height: 50px; display: none; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .search-form-open .search-form-area { display: block !important; } .search-form-open .navbar-nav { display: none !important; } .search-form-area #search { width: 550px; height: 50px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.7); padding: 0 30px; color: #fff !important; font-size: 14px; background-color: transparent; -webkit-transition-duration: 500ms; transition-duration: 500ms; } /* Sticky CSS */ .header_area.sticky { /* background-color: #fffffff1; */ /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); */ /* height: 80px; */ position: fixed; top: 0; z-index: 999; } .header_area .menu_area { border-radius: 2.5rem; box-shadow: 0 6px 20px rgb(0 0 0 / 15%); margin-top: .4rem; } @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { .header_area .menu_area { background-color: #ffffffcc; backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem); } } /* -------------------------- :: 3.0 Welcome Area CSS -------------------------- */ .welcome_area { position: relative; z-index: 2; height: 1080px; /* top: 20vh; */ background-repeat: no-repeat; background-size: cover; background-position: top center; } .hero-slides { position: relative; z-index: 2; top: -1rem; } .single-hero-slide { height: 1020px; width: 100%; position: relative; z-index: 1; } .hero-slide-content h2 { font-size: 60px; color: #fff; line-height: 1.8; } .hero-slide-content h4 { color: #fff; font-weight: 400; margin-bottom: 0; } .hero-slide-content .slide-img { color: #fff; margin-top: 40px; font-weight: 400; } .hero-slides .owl-prev, .hero-slides .owl-next { position: absolute; width: 60px; height: 60px; background-color: #000; line-height: 60px; text-align: center; top: 75%; margin-top: -30px; left: 50px; border-radius: 50%; color: #fff; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .hero-slides .owl-next { left: auto; right: 50px; } .hero-slides .owl-prev:hover, .hero-slides .owl-next:hover { background-color: #5c4cff; } /* ------------------------- :: 4.0 Service Area ------------------------- */ .mosh-service-slides { position: relative; z-index: 1; } .single-service-area h2 { font-size: 60px; font-weight: 600; margin-bottom: 20px; -webkit-transition-duration: 500ms; transition-duration: 500ms; color: #bec0cc; } .mosh-service-slides .center .single-service-area h2, .single-service-area:hover h2 { color: #5c4cff; } .single-service-area h4 { margin-bottom: 20px; } .mosh-service-slides .owl-prev, .mosh-service-slides .owl-next { position: absolute; width: 50px; height: 50px; background-color: transparent; line-height: 50px; text-align: center; top: 50%; margin-top: -30px; left: -25px; border-radius: 50%; color: #5c4cff; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .mosh-service-slides .owl-next { left: auto; right: -25px; } /* ------------------------- :: 6.0 Features Area ------------------------- */ .mosh-features-area { background-color: #211b31; position: relative; z-index: 1; } .features-img > img { height: 100%; /* position: absolute; */ bottom: -30px; left: 30px; z-index: 9; } .mosh-features-area .section-heading { margin-bottom: 60px; } .mosh-features-area .section-heading h2 { color: #fff; } .pos-rel { position: relative; } .barfiller { background: #f4f4f4; border: none; border-radius: 0; box-shadow: none; height: 20px; margin-bottom: 5px; position: relative; width: 100%; border-radius: 10px; } .barfiller .fill { display: block; position: relative; width: 0px; height: 100%; background: #5c4cff; z-index: 1; border-radius: 10px; } .barfiller .tipWrap { display: none; } .barfiller .tip { margin-top: -24px; padding: 2px 4px; font-size: 15px; color: #5c4cff; left: 0px; position: absolute; z-index: 2; background: transparent; font-weight: 500; } .barfiller .tip:after { display: none; } .single_progress_bar p { margin-bottom: 15px; } /* ------------------------- :: 8.0 Portfolio Area ------------------------- */ .portfolio-menu { margin-bottom: 100px; margin-top: -10px; } .portfolio-menu > p { display: inline-block; padding: 0 15px; cursor: pointer; -webkit-transition-duration: 500ms; transition-duration: 500ms; margin-bottom: 0; } .portfolio-menu > p:hover { color: #5c4cff; } .single_gallery_item { width: 25%; display: inline-block; float: left; z-index: 3; position: relative; overflow: hidden } .single_gallery_item > img { width: 100%; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .single_gallery_item:hover > img { -webkit-transform: scale(1.1); transform: scale(1.1); filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: blur(8px); filter: blur(8px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); } .gallery-hover-overlay { position: absolute; width: 100%; height: 100%; z-index: 9; left: 0; top: 0; background-color: #5c4cff; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .single_gallery_item:hover .gallery-hover-overlay { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" } .port-hover-text h4 { color: #fff; margin-bottom: 10px; } .port-hover-text > a { color: #fff; font-size: 15px; } /* ------------------------- :: 9.0 Workflow Area ------------------------- */ .single-workflow-area > h3 { font-size: 16px; -webkit-box-flex: 0; -ms-flex: 0 0 47px; flex: 0 0 47px; width: 47px!important; height: 47px!important; text-align: center; background-color: #f3f5f9; line-height: 47px; border-radius: 50%; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .single-workflow-area:hover .h3 { background-color: #5c4cff; color: #fff; } .mosh-workflow-slides .owl-dots { margin-top: 60px; text-align: center; } .mosh-workflow-slides .owl-dot { background-color: #daddeb; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px; display: inline-block; } .mosh-workflow-slides .owl-dot.active { background-color: #5c4cff; } /* ------------------------- :: 10.0 CTA Area ------------------------- */ .mosh-call-to-action-area { position: relative; z-index: 1; background-attachment: fixed; } .cta-content .section-heading { margin-bottom: 0; } .cta-content .section-heading h2 { margin-bottom: 40px; color: #fff; font-size: 44px; } /* ------------------------- :: 11.0 FAQ Area ------------------------- */ .panel { background-color: #fff; border: 0 solid transparent; border-radius: 4px; box-shadow: 0 0 0 transparent; margin-bottom: 15px; } .single-accordion:last-of-type { margin-bottom: 0px; } .single-accordion h6 a { background-color: #5c4cff; border-radius: 0; color: #fff; display: block; margin: 0; font-weight: 400; padding: 15px 15px 15px 15px; position: relative; font-size: 15px; text-transform: capitalize; border-radius: 30px; } .single-accordion h6 a.collapsed:hover { background-color: #5c4cff; } .single-accordion h6 a.collapsed { width: 75%; margin: auto; background-color: #ccc; color: #fff; } .single-accordion h6 a span { font-size: 10px; position: absolute; left: 20px; text-align: center; top: 17px; } .single-accordion h6 a.collapsed span.accor-close { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } span.accor-open { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .single-accordion h6 a.collapsed span.accor-open { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .single-accordion h6 { margin-bottom: 0; text-transform: uppercase; } .single-accordion .accordion-content { border-top: 0 solid transparent; box-shadow: none; } .single-accordion .accordion-content p { padding: 10px 15px 0; margin-bottom: 10px; } /* -------------------------- :: 12.0 Footer Area CSS -------------------------- */ .footer-area { position: relative; z-index: 1; background-color: #211b31; } .single-footer-widget h5 { color: #fff; margin-bottom: 50px; } .single-footer-widget ul > li > a { color: #999; margin-bottom: 10px!important; display: block; font-weight: 500; font-family: 'Montserrat', sans-serif; } .single-footer-widget a, .single-footer-widget p { color: rgba(226, 219, 243, 0.5); } .single-footer-widget a:hover { color: #ffffff; } .single-footer-widget ul > li > a:last-child { margin-bottom: 0; } .single-footer-widget ul > li > a:hover { color: #ffffff; } .copyright-text > p { margin-bottom: 0; font-size: 13px; } .copyright-text a { color: #c5bfff; } .copyright-text a:hover { color: #fff; } .footer-social-info > a { color: #5c4cff; margin: 0 15px; display: inline-block; font-size: 1em; } .footer-social-info > a:hover { color: #fff; } .footer-single--blog-post { margin-bottom: 30px; } .footer-single--blog-post:last-child { margin-bottom: 0; } .footer-single--blog-post .blog-post-date > p { font-size: 12px; margin-bottom: 5px; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .footer-single--blog-post .blog-post-title > h6 { font-size: 14px; margin-bottom: 0; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .footer-single--blog-post .blog-post-date > p:hover, .footer-single--blog-post .blog-post-title > h6:hover { color: #5c4cff; } .footer-single-contact-info .contact-icon { margin-right: .2em; } .footer-bottom-area { background-color: #191426; height: 60px; } /* -------------------- :: 13.0 Breadcumb CSS -------------------- */ .clear-header{ height: 78px; } .page-title { background: linear-gradient(90deg, #5b25d5, #9741d1); } .bradcumbContent .breadcrumb { padding: 0; background-color: transparent; border-radius: 0; margin-top: 10px; } .bradcumbContent .breadcrumb-item a, .bradcumbContent .breadcrumb-item { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /* ----------------------- :: 14.0 About Us CSS ----------------------- */ .few-words-from-ceo { overflow-x: hidden; } .few-words-contents, .few-words-thumb { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; height: 770px; } .few-words-contents { background-color: #211b31; } .few-words-text .section-heading { margin-bottom: 50px; } .few-words-text .section-heading h2 { color: #fff; } .few-words-text > p { margin-bottom: 0; } .ceo-meta-data .ceo-thumb { width: 52px; height: 52px; -webkit-box-flex: 0; -ms-flex: 0 0 52px; flex: 0 0 52px; border-radius: 50%; margin-right: 20px; } .ceo-meta-data .ceo-name h6 { color: #fff; margin-bottom: 10px; line-height: 1; } .ceo-meta-data .ceo-name p { margin-bottom: 0; line-height: 1; font-size: 12px; font-weight: 700; } /* ------------------------- :: 15.0 Services Area CSS ------------------------- */ .services-content-area { position: relative; z-index: 98; padding: 100px 0 200px 0; } .services-text h2 { font-size: 55px; margin-bottom: 50px; } .services-text p { line-height: 2; margin-bottom: 50px; } /* ------------------------- :: 16.0 Team Member Area ------------------------- */ .team-thumbnail { width: 189px; height: 189px; border-radius: 50%; margin: 0 auto 50px; position: relative; z-index: 1; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .team-thumbnail:after { position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ""; background-color: #5c4cff; z-index: 2; border-radius: 50%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .team-thumbnail > img { width: 100%; height: 100%; border-radius: 50%; } .team-meta-info { margin-bottom: 50px; } .team-meta-info h4 { line-height: 1; margin-bottom: 10px; } .team-meta-info span { font-size: 12px; font-weight: 900; color: #5c4cff; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 35px; display: block; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .team-social-info { margin-top: 30px; } .team-social-info > a { font-size: 13px; color: #5c4cff; display: inline-block; padding: 0 15px; } .single-team-slide:hover .team-meta-info span, .team-social-info > a:hover { color: #5c4cff; } .single-team-slide:hover .team-thumbnail:after { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" } .mosh-team-slides { position: relative; z-index: 2; } .mosh-team-slides .owl-prev, .mosh-team-slides .owl-next { position: absolute; width: 60px; height: 60px; background-color: transparent; line-height: 60px; text-align: center; top: 21%; margin-top: -30px; left: -25px; border-radius: 50%; color: #5c4cff; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .mosh-team-slides .owl-next { left: auto; right: -25px; } .mosh-subscribe-newsletter-area { background-attachment: fixed; } .subscribe-newsletter-content p { text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 2px; } .subscribe-newsletter-content h2 { font-size: 44px; margin-bottom: 30px; } .subscribe-newsletter-content form { position: relative; z-index: 1; } .subscribe-newsletter-content form > input { width: 60%; height: 55px; border-radius: 70px; border: none; padding: 0 30px; font-style: italic; font-size: 14px; color: #5c4cff; } .subscribe-newsletter-content form > button { width: 150px; height: 55px; border-radius: 0 70px 70px 0; border: none; padding: 0 30px; font-size: 14px; color: #fff; background-color: #5c4cff; position: absolute; right: 20%; font-weight: 700; cursor: pointer; text-transform: uppercase; top: 0; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .subscribe-newsletter-content form > button:hover { color: #fff; background-color: #5c4cff; } /* ------------------------- :: 17.0 Clients Area ------------------------- */ .mosh-clients-testimonials-area { background-color: #211b31; position: relative; z-index: 1; } .mosh-clients-testimonials-area .section-heading h2 { color: #fff; } .testimonial-content span { font-size: 60px; color: #fff; line-height: 1; font-weight: 900; } .testimonial-content p { margin-bottom: 0; } .testimonials-meta .testimonial-thumb { width: 52px; height: 52px; margin: 0 auto 20px; border-radius: 50%; border: 3px solid #211b31; -webkit-transition-duration: 500ms; transition-duration: 500ms; position: relative; z-index: 1; margin-top: 40px; } .testimonials-meta > h6 { color: rgba(255, 255, 255, 0.5); margin-bottom: 5px; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .testimonials-meta > p { margin-bottom: 0; font-weight: 700; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; } .testimonials-slides { position: relative; z-index: 1; } .testimonials-slides:before { position: absolute; width: 33.33333%; text-align: center; content: "Previous"; top: 0; left: 0; z-index: -5; height: 100%; color: #fff; } .testimonials-slides:after { position: absolute; width: 33.33333%; text-align: center; content: "Next"; top: 0; right: 0; z-index: -5; height: 100%; color: #fff; } .testimonials-slides .owl-prev, .testimonials-slides .owl-next { position: absolute; width: 60px; height: 60px; background-color: transparent; line-height: 60px; text-align: center; top: 21%; margin-top: -30px; left: -25px; border-radius: 50%; color: #5c4cff; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .testimonials-slides .owl-next { left: auto; right: -25px; } .testimonials-slides .single-testimonial-area .testimonial-content { display: none; } .testimonials-slides .center .single-testimonial-area .testimonial-content { display: block; } .single-testimonial-area:hover .testimonials-meta > h6, .testimonials-slides .center .single-testimonial-area .testimonials-meta > h6 { color: #fff; } .single-testimonial-area:hover .testimonials-meta .testimonial-thumb { border: 3px solid #5c4cff; } /* Sonar CSS */ .testimonial-thumb:before { content: ''; display: inline-block; position: absolute; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; top: 3px; left: 3px; -webkit-animation: sonar-effect 1s ease-in-out 0s infinite; animation: sonar-effect 1s ease-in-out 0s infinite; z-index: -1 } .testimonials-slides .center .testimonial-thumb:before { display: none; } @-webkit-keyframes sonar-effect { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } 50% { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; box-shadow: 0 0 0 3px #5c4cff, 0 0 5px 5px #5c4cff, 0 0 0 5px #5c4cff; } 100% { box-shadow: 0 0 0 3px #5c4cff, 0 0 5px 5px #5c4cff, 0 0 0 5px #5c4cff; -webkit-transform: scale(1.4); transform: scale(1.4); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } @keyframes sonar-effect { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } 50% { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; box-shadow: 0 0 0 3px #5c4cff, 0 0 5px 5px #5c4cff, 0 0 0 5px #5c4cff; } 100% { box-shadow: 0 0 0 3px #5c4cff, 0 0 5px 5px #5c4cff, 0 0 0 5px #5c4cff; -webkit-transform: scale(1.4); transform: scale(1.4); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } .mosh-cool-facts-area.service-page { width: 100%; position: relative; z-index: 1; height: 500px; } .mosh-cool-facts-area.service-page .counter-area h3, .mosh-cool-facts-area.service-page .cool-facts-content p { color: #fff; } .skills-text > p { padding-right: 30px; } .skills-text > p:last-child { padding-right: 0; } /* ----------------------- :: 18.0 Blog Area CSS ----------------------- */ .blog-area { position: relative; z-index: 5; } .single-blog { margin-bottom: 100px; } .single-blog .blog-post-thumb { margin-bottom: 40px; } .single-blog h2 { font-size: 24px; margin-bottom: 20px; } .post-meta { margin-bottom: 10px; } .post-meta h6 { color: #b1b3c3; text-transform: capitalize; margin-bottom: 0; font-size: 12px; } .post-meta h6 a { color: #b1b3c3; display: inline-block; margin-right: 5px; } .post-meta h6 a:hover { color: #5c4cff; } .single-blog > a { color: #6270ff; font-size: 14px; text-transform: uppercase; } .single-blog p { margin-bottom: 40px; } .mosh-pagination-area .page-link { padding: 0; line-height: 42px; color: #007bff; border: none; border-radius: 0; width: 42px; height: 42px; font-size: 14px; text-align: center; } .page-item:first-child .page-link, .page-item:last-child .page-link { margin-left: 0; border-radius: 0; } .blog-post-search-widget form { position: relative; z-index: 1; } .blog-post-search-widget form > input { width: 100%; height: 50px; border-top: none; border-left: none; border-radius: 0; border-right: none; border-bottom: 2px solid #e6e7f4; } .blog-post-search-widget form > button { position: absolute; right: 0; top: 0; width: 50px; height: 50px; text-align: center; line-height: 50px; border: none; background-color: transparent; cursor: pointer } .blog-post-archives > h5, .blog-post-categories > h5, .latest-blog-posts > h5, .instagram-feeds > h5 { font-size: 18px; margin-bottom: 30px; } .blog-post-archives ul > li > a, .blog-post-categories ul > li > a { color: #5c4cff; font-size: 15px; display: block; padding: 5px 0; font-weight: 500; } .latest-blog-post-content h6 > a { color: #404551; } .latest-blog-post-content h6 > a:hover, .blog-post-archives ul > li > a:hover, .blog-post-categories ul > li > a:hover { color: #5c4cff; } .single-latest-blog-post { margin-bottom: 20px; } .latest-blog-post-thumb { width: 70px; -webkit-box-flex: 0; -ms-flex: 0 0 70px; flex: 0 0 70px; margin-right: 20px; } .instagram-feeds ul > li { width: calc(33.3333333% - 8px); margin: 4px; display: inline-block; float: left; } /* ---------------------- :: 19.0 Contact Page CSS ---------------------- */ .contact-form-area .form-control { font-size: 18px !important; color: #191426; background-color: #fff; /* border-bottom: 2px solid #ebebeb; */ height: 50px; /*margin-bottom: 6px;*/ padding: 15px; } .form-control-top { border-radius: 16px 16px 0 0; padding: 12px; } .form-control-mid { border-radius: 0; padding: 12px; } .form-control-bot { border-radius: 0 0 16px 16px; padding: 12px; } .form-control-single { border-radius: 16px; padding: 12px; } .form-control-left{ border-radius: 32px 0 0 32px; } .form-control-right{ border-radius: 0 32px 32px 0; } .mosh-btn-lg { width: 100%; cursor: pointer; font-size: 18px; } .contact-form-area textarea.form-control { height: 140px; } .contact-social-info > a { color: #777; padding: 0 10px; display: inline-block; } .contact-social-info > a:hover { color: #5c4cff; } #googleMap { width: 100%; height: 680px; } /* ----------------------- :: 20.0 Elements Area CSS ----------------------- */ .elements-title h2 { margin-bottom: 60px; font-size: 24px; } .mosh-btn.mosh-btn-2 { color: #404551; background-color: #fff; } .mosh-btn.mosh-btn-2:hover, .mosh-btn.mosh-btn-2:focus { color: #fff; background-color: #5c4cff; } .mosh-btn.mosh-btn-3 { border: none; color: #999; background-color: #fff; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15); } .mosh-btn.mosh-btn-3:hover, .mosh-btn.mosh-btn-3:focus { color: #fff; background-color: #4c87ff; } .mosh-cool-facts-area { width: 100%; } .mosh-cool-facts-area .counter-area > h3 { color: #5c4cff; font-size: 60px; margin-bottom: 0; line-height: 1; } .mosh-cool-facts-area .cool-facts-content > p { color: #292d4f; } .download-box{ align-items: center; text-align: center; } .download-box i{ font-size: 5em; color: #5c4cff; } .download-box i:hover{ color: #5c4cff; transition: 100ms; } .download-box h2 { margin: 8px; } .download-box img { width: 160px; } .payment-icons { width: 300px; } .app a { color: #9597a6; font-size: 1.3em; } .pr { padding: 0; } .pr > div{ background-color: #f3f5f9; border-radius: 16px; margin: 5px; padding: 40px; } .navbar-prof { flex-direction: row; } .ma { margin-left: auto; margin-right: auto; justify-content: center; } .prof-link { padding: 10px 32px; border-radius: 20px; margin: 5px; } .prof-link:hover { background-color: #5c4cff; color: #fff !important; } .prof-item.active .prof-link { color: #555; font-weight: 900; } .prof-link:hover { color: #555; } .dropdown-item:focus, .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #5c4cff; } .dropdown-menu { background-color: #5c4cff; } .headerText{ margin: 30px; } #history td { padding: 5px 10px; color: #777; /* background-color: #f3f5f9; */ } .history { border-radius: 20px; } .bread-top { /* background-repeat: no-repeat; */ /* background-size: cover; */ background-position: center center; } .download-box td { text-align: right; } .mt_100 { margin-top: -100px; } .cart { color: #fff; padding: 0 0.3rem; background: #5c4cff; margin-left: 0.2rem; border-radius: 30px; font-size: 0.8em; display: inline-block; box-shadow: 0 0 0 5px #5c4cff; vertical-align: middle; } .cart:hover { background: #5c4cff; } .mosh-btn-red { cursor: pointer; padding: 0.5em 1.5em; margin: .4em; border-radius: 70px; border-color: #F44336; color: #F44336; background: none; } .mosh-btn-red:hover { color: #fff; background: #F44336; } .mosh-btn-add { cursor: pointer; /* padding: 0.5em 1.5em; */ margin: 0.6em; border-radius: 70px; width: 40px; height: 40px; /* border-color: #5c4cff; */ color: #5c4cff; background: #fff; box-shadow: 0px 0px 20px 0px #c8d5f56b; transform: scale(1.2); } .mosh-btn-add:hover { color: #fff; background: #5c4cff; } .mosh-btn-green { cursor: pointer; padding: 0.5em 1.5em; margin: .4em; border-radius: 70px; color: #fff; background: #5c4cff; } .mosh-btn-green:hover { color: #fff; background: #5c4cff; } .row-sep { border-bottom: #fff 1px solid; } .card-light-bg { background-color: #f3f5f9; border-radius: 16px; padding: 1rem; font-size: 1.4rem; } .grey-text { color: #656565; margin-left: 0.4em; margin-right: 0.4em; } .text-lg { font-size: 125%; } .form-control { border: 1px solid #f3f5f9; /* background: #EEF; */ box-shadow: 0px 0px 11px 5px #4a7aec0f; } select.form-control { height: auto !important; } /* -------------------------------- ============= The End ============= ---------------------------------*/ .home_banner_area { z-index: 1; clip-path: polygon(50% 0%, 100% 0, 100% 100%, 80% 100%,50% 89%,20% 100%, 0 100%, 0 0); /* background: url(img/gas/home-banner.svg) no-repeat right center; */ background-size: cover; } .home_banner_area .banner_inner { width: 100%; } .home_banner_area .banner_inner .banner_content { text-align: left; color: #fff; } .home_banner_area .banner_inner .col-lg-5 { /* vertical-align: middle; align-self: center; */ } .home_banner_area .banner_inner .banner_content h1 { margin-top: 0px; font-size: 48px; font-weight: 500; line-height: 54px; margin-bottom: 20px; color: #fff; } .banner_box { max-width: 1620px; margin: auto; } .home_banner_area .banner_inner .banner_content p { color: #fff; font-size: 14px; margin-bottom: 20px; font-weight: 400; } .home_banner_area .banner_inner .banner_content .primary_btn { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; margin-right: 30px; } .primary_btn span { padding: 0 35px; } .video-play-button { position: relative; box-sizing: content-box; display: inline-block; width: 32px; height: 44px; border-radius: 50%; padding: 46px 8px 18px 28px; } .home_banner_area .banner_inner .banner_content .watch_video { margin: 0 30px; font-size: 12px; text-transform: uppercase; } .home_banner_area .banner_inner { padding-top: 50px; padding-bottom: 50px; } .home_right_img>img { max-width: 500px; } @media (max-width: 991px){ .home_right_img { display: none; } .home_banner_area .banner_inner { padding: 70px 0px 100px 0px; } } @media (max-width: 1199px){ } .pr { padding: 0; } .pr > div{ background-color: #ffffff; border-radius: 24px; margin: 5px; padding: 18px; box-shadow: 0px 0px 20px 0px #c8d5f561; } .download-box img { width: 92px; } .small-text{ font-size: .4em; padding-bottom: .5em; } .inline { display: inline-block; } .navbar-prof { flex-direction: row; } .ma { margin: auto; justify-content: center; } .prof-link { padding: 10px 32px; border-radius: 20px; margin: 5px; } .prof-link:hover { background-color: #5c4cff; color: #fff !important; } .prof-item.active .prof-link { color: #555; font-weight: 900; } .prof-link:hover { color: #555; } .dropdown-item:focus, .dropdown-item:hover { color: #000 !important; text-decoration: none; transition: ease-in-out .2s; background-color: #f1e7ff; } .dropdown-menu { background-color: #fff; border-radius: 1em; padding: 0.2rem !important; box-shadow: 0px 0px 20px 0px #9cb7fb9c; margin: -.6em 1em; min-width: 9rem; font-family: 'Montserrat', sans-serif; } .headerText{ margin: auto; padding: 0 1.5em; } .nav-highlight>a{ border-radius: 2em !important; /* padding: .8em 2em !important; */ } .menu_area #nav .nav-link { color: #333; display: block; font-size: 14px; padding: .8rem 1.4rem; /* margin: 1rem .2rem; */ border-radius: 1em; font-weight: 500; font-family: 'Montserrat', sans-serif; } .history td { padding: 5px 10px; color: #777; background-color:none; } .history th { padding: 12px 5px; color: #fff; } table.history > thead > tr { background: linear-gradient(-150deg, #3d2ddc,#4090ff ); } table.history > thead > tr > th:first-child { border-radius: 20px 0px 0px 0px; } table.history > thead > tr > th:last-child { border-radius: 0px 20px 0px 0px; } table.history > tbody > tr:last-child > td:first-child { border-radius: 0px 0px 0px 20px; } table.history > tbody > tr:last-child > td:last-child { border-radius: 0px 0px 20px 0px; } table.history { border-radius: 20px; box-shadow: 0px 0px 20px 3px #4a7aec36; } .history tr:hover { background-color: #d2ddf3 !important; box-shadow: 0px 0px 20px 3px #ffffff36; } .history { border-radius: 20px; } .edit-icons{ display: inline-flex; } .b-icons>a, .edit-icons>a { padding: 6px 12px; border-radius: 1.5em; color: #777; } .b-icons>a>i, .edit-icons>a>i { /* width: 34px; */ color: #5c4cff; } .b-icons>a:hover, .edit-icons>a:hover { background-color: #fff; box-shadow: 0px 0px 20px 3px #4a7aec36; } .text-icon>a{ padding-right: 1em; } .download-icons>a { padding: 1em 2em; border-radius: 2em; } .download-icons>a:hover { padding: 1em 2em; } .pr-icon{ max-width: 16px; } .pr-ul>li { text-align: left; } .pr-ul{ width: fit-content; } .pr-cent{ /* padding-bottom: .2rem; */ display: contents; font-size: .8em; font-weight: 500; /* color: #999; */ } .text_currency { font-size: .8em; font-weight: 500; } .primary-switch { display: inline-block; width: 64px; height: 32px; border-radius: 16px; background: #ccc; position: relative; cursor: pointer; } .primary-switch input { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; margin: .5rem; } .primary-switch input + label { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; cursor: pointer; } .primary-switch input:checked + label:before { background: #4090ff; } .primary-switch input + label:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: transparent; border-radius: 16px; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .primary-switch input:checked + label:after { left: 32px; } .primary-switch input + label:after { content: ""; position: absolute; top: 1px; left: 1px; width: 30px; height: 30px; border-radius: 50%; background: #fff; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2); cursor: pointer; } .switch { width: fit-content; margin: auto; } .switch-lable { display: inline-block; height: 100%; width: fit-content; margin: 15px; } .simple-card { border-radius: 1rem; box-shadow: 0px 0px 2rem 0px #c8d5f561; } .features-icons-card { width: 100%; height: 100%; -webkit-transition-duration: 200ms; transition-duration: 200ms; transition-property: box-shadow; border-radius: 3em; box-shadow: 0 10px 20px 10px rgba(100, 0, 255, 0.05); } .features-icons-card:hover { box-shadow: 0 10px 20px 10px rgba(100, 0, 255, 0.1); } .features-icons-card > img { margin-bottom: 40px; width: 92px; } /* ------------------------- :: 5.0 Clients Area ------------------------- */ .clients-logo-area a{ width: fit-content; margin: auto; } .clients-logo-area a > img { display: block; height: 4em; filter: grayscale() opacity(.5); margin: auto; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .clients-logo-area a:hover > img { filter: none; opacity: 1; } .contact-icon { color: #5c4cff; font-size: 1.2rem; } .footer-single-contact-info a:hover .contact-icon { color: #4c87ff; } .footer-heading > h3 { font-size: 1.1em; color: #fff; } .mosh-btn:focus { color: #fff; } .cart-anim:before{ content: ""; background: #af52ef; padding: 10px; margin-left: -5px; position: absolute; opacity: .8; border-radius: 100%; transform: scale(0); animation: cart .5s ease-out; } @keyframes cart { from {transform: scale(0); opacity: .8;} to {transform: scale(5); opacity: 0;} } .navbar-toggler:focus { outline: none; } .navbar-collapse { height: auto !important; border-radius: 2em !important; transition: none; } .navbar-collapse.show { /* box-shadow: 0 10px 20px 10px rgba(100, 0, 255, 0.1); */ height: auto !important; } .navbar { padding: 0.6rem; } /* menu */ .menu { display: none; clear: both; max-height: 0; transition: max-height .2s ease-out; } /* menu icon */ .menu__icon { cursor: pointer; display: block; float: right; padding-right: 2rem; position: relative; user-select: none; } .hamburger { background: #af52ef; display: block; height: 4px; position: relative; transition: .2s ease-out; width: 20px; float: right; margin: 8px -10px; border-radius: 5px; } .hamburger:before, .hamburger:after { background: #af52ef; content: ''; display: block; height: 100%; position: absolute; transition: .2s ease-out; width: 150%; border-radius: 5px; } .hamburger:before { top: 8px; } .hamburger:after { top: -8px; } /* menu checkbox */ .menu__checkbox { opacity: 0; } .menu__checkbox:checked~.menu { max-height: 240px; display: block; } .menu__checkbox:focus~.menu__icon { /* outline: #5E9ED6 1px solid; */ /* background-color: #f4f4f4; */ } .menu__checkbox:checked~.menu__icon { /* background-color: #f4f4f4; */ } .menu__checkbox:checked~.menu__icon .hamburger { background: transparent; } .menu__checkbox:checked~.menu__icon .hamburger:before { transform: rotate(-45deg); } .menu__checkbox:checked~.menu__icon .hamburger:after { transform: rotate(45deg); } .menu__checkbox:checked~.menu__icon:not(.steps) .hamburger:before, .menu__checkbox:checked~.menu__icon:not(.steps) .hamburger:after { top: 0; } .fit-content { width: fit-content; margin: auto; } .hide { display: none; } /*switcher 3*/ .button-cover, .knobs, .layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .button { position: relative; top: 50%; width: 74px; height: 36px; margin: -20px auto 0 auto; overflow: hidden; transform: scale(1.5); } .button.r, .button.r .layer { border-radius: 100px; } .button.b2 { border-radius: 2px; } .checkbox { position: relative; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 3; } .knobs { z-index: 2; } .knobs::before, .knobs::after { box-sizing: content-box; } .layer { width: 100%; background: #efefef; transition: 0.3s ease all; z-index: 1; box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.2); } /* Button 10 */ #button-10 .knobs:before, #button-10 .knobs:after, #button-10 .knobs span { position: absolute; top: 4px; width: 20px; height: 10px; font-size: 10px; font-weight: bold; text-align: center; line-height: 1; padding: 9px 4px; border-radius: 50%; transition: 0.3s ease all; } #button-10 .knobs:before { content: ''; left: 4px; background-color: #fff; transform: scale(1.1); box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2); } #button-10 .knobs:after { content: 'UPC'; right: 5px; color: #777; } #button-10 .knobs span { display: inline-block; left: 3px; color: #222; z-index: 1; } #button-10 .checkbox:checked + .knobs span { color: #777; } #button-10 .checkbox:checked + .knobs:before { left: 42px; background-color: #fff; } #button-10 .checkbox:checked + .knobs:after { color: #222; } #button-10 .checkbox:checked ~ .layer { background: #efefef ; } .dropdown-toggle:after{ content: ''; transform: rotate(45deg); border: solid #555; border-width: 0 2px 2px 0; padding: 2px; margin: -1px 5px; transition: transform .3s ease; } .show > .dropdown-toggle:after{ transform: rotate(-135deg) translate(-2px, -2px); } .cta-area{ background: #eeecff;; } .cta-area h2{ color: #333;; } .footer-heading p { color: #aaa; } .grey-bg { background-color: #f3f5f9; padding: 2em 1em; border-radius: 2em; } .grey-bg input, .grey-bg textarea { background-color: #fff !important; } .input-pr::-webkit-inner-spin-button, .input-pr::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .input-pr{ border-radius: 50px !important; width: 1.2em !important; min-width: 80px !important; } .pr-img { height: 100px; } .blue { color: #5c4cff; } .name { font-size: 11px; color: #555; margin: auto; display: inline; line-height: 12px; } .capital { display: none; } .alpha-2 { display: none; } img.flag { border-radius: .3em; width: 2rem; opacity: .7; margin-right: 12px; box-shadow: 0px 0px 19px 2px #4a7aec6b; } .country { float: left; margin: 1em 0; display: flex; } .country-obj{ border-radius: 1em; -webkit-transition-duration: 200ms; transition-duration: 200ms; } .country-obj:hover{ box-shadow: 0px 0px 19px 2px #4a7aec6b; } .warning-bg { background-color: #dc354512; } .mosh-nav-highlight { /* border-radius: 2em; */ /* margin-top: 1em !important; */ padding-block: .2rem; color: #fff !important; background: #5c4cff !important; font-weight: 700; text-transform: uppercase; -webkit-transition: background-color 200ms; transition: background-color 200ms; box-shadow: 0px 0px 20px 3px #4a7aec73; } .mosh-nav-highlight:hover { background-color: #4c87ff !important; } .mosh-color { color: #5c4cff ; } .f-6 { font-weight: 600; } .f-5 { font-weight: 500; } .f-4 { font-weight: 400; } .grecaptcha-badge { visibility: hidden; } .dark-grey { color: #999; } .white { color: #fff; } .g-btn { height: 100%; padding: 15px 30px; font-weight: 500; text-transform: none; font-family: inherit; -webkit-transition-duration: 200ms; transition-duration: 200ms; background-color: #4285F4; /* background: linear-gradient(-150deg, #3d2ddc,#4090ff ); */ } .g-btn:hover { background-color: #5c4cff; /* background: linear-gradient(-100deg, #3d2ddc,#4090ff ); */ /* background-color: linear-gradient(-100deg, #3d2ddc,#4090ff ); */ } .region-map { position: absolute; display: block; filter: invert(1); opacity: 0.3; z-index: 0; /* transform: scale(1.2); */ -webkit-mask-image: url(img/barcode-mask.svg); -webkit-mask-box-image: stretch; } .region-flag { border-radius: 0.5em; opacity: .9; box-shadow: 0px 0px 19px 2px var(--gr_shadow); left: 30%; top: 25%; width: 40%; transform: scale(0.75); } .region h2 { -webkit-transition-duration: 200ms; transition-duration: 200ms; } .region:hover h2 { color: #5c4cff; } .notify-wrap{ position: fixed; top: 0; margin-top: 78px; z-index: 10; width: 100%; opacity: 1; -webkit-transition-duration: 200ms; transition-duration: 200ms; } .notify-hide{ opacity: 0 !important; } .notify { /* background-color: #fff; */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* height: 80px; */ right: 0; float: right; /* top: 78px; */ width: fit-content; border: none; background-color: rgba(204, 229, 255, 0.95); } .notify-cart { color: #5c4cff; padding: 0; font-weight: 600; font-size: 1em; background: none; box-shadow: none; margin: 0; } .notify-cart:hover { background: none; } .notify-cart:before { display: none; } .triangle-wrap .triangle { pointer-events: none; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(0px); width: 0; border-bottom: solid 10px #cce5ff!important; border-right: solid 10px transparent; border-left: solid 10px transparent; -webkit-transition-duration: 200ms; transition-duration: 200ms; } .triangle-wrap { opacity: 0; width: 100%; position: relative; } .triangle-wrap.open-triangle { opacity: 1; } .triangle-wrap { pointer-events: none; } .triangle-menu { transform: translateX(-50%) translateY(53px) !important; } /* blog triangle */ .nav-item.active .blog-nav { opacity: 1 !important; } .triangle-wrap>.triangle-blog { border-bottom: solid 10px #7f36d2 !important; } @media (max-width: 992px) { .nav-item.active .blog-nav { opacity: 0 !important; } } /* blog triangle */ .cart-img { height: 300px; min-width: 280px; max-width: 100%; } a.underline:hover { text-decoration: underline; } .generate-option { padding-block: 4px; } .generate-option-inner { background-color: hsla(234, 100%, 107%, 1); border-radius: 16px; padding: 18px; box-shadow: 0px 0px 20px 0px #83a7ff61; position: relative; } .generate-thumb { padding-block: 4px; } .generate-thumb-inner { background-color: #ffffff; border-radius: 16px; padding: 18px; box-shadow: 0px 0px 20px 0px #83a7ff61; } .generate-select { cursor: pointer; padding: 12px 10px; border-radius: 24px; width: fit-content; background: #fff; transition: outline, box-shadow 0.3s ease ; border: none; z-index: 1; font-family: 'Montserrat', sans-serif; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); } .generate-select:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); } .generate-select option { font-weight: normal; display: block; white-space: pre; min-height: 1.2em; padding: 2px 4px; } .range-slider { margin: 1em 0; width: 100%; display: flex; align-items: center; } .range-slider__range { -webkit-appearance: none; width: calc(100% - (73px)); height: 10px; border-radius: 5px; background: #d7dcdf; outline: none; padding: 0; margin: 0; } .range-slider__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; cursor: pointer; -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; box-shadow: 0px 0px 6px 1px #4c87ff80; } .range-slider__range::-webkit-slider-thumb:hover { box-shadow: 0px 0px 6px 2px #4c87ff; } .range-slider__range:active::-webkit-slider-thumb { background: #fff; box-shadow: 0px 0px 6px 2px #4c87ff; } .range-slider__range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #5c4cff; cursor: pointer; -moz-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } .range-slider__range::-moz-range-thumb:hover { box-shadow: 0px 0px 6px 2px #4c87ff; } .range-slider__range:active::-moz-range-thumb { background: #fff; box-shadow: 0px 0px 6px 2px #4c87ff; } .range-slider__range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #4c87ff; } .range_slider_label { position: relative; display: block; width: 7ch; background: #5c4cff; color: #fff; line-height: 1.2rem; text-align: center; border-radius: 0.4rem; margin: 0 0 0 .8rem; border: none; padding: 0; } .range_slider_label:focus { background: #5c4cff; color: #fff; border: none; } .range_slider_input{ background-color: transparent; color: #fff; border: none; width: 100%; border-radius: 0.4rem; padding: .4em .3rem .4em .8em; text-align: end; } .range_slider_input:focus{ outline: none; border: none; box-shadow: 0 0 0 0.2rem rgba(92,76,255,.25); } .range_slider_input::-webkit-outer-spin-button, .range_slider_input::-webkit-inner-spin-button { margin-left: 0.3rem; } .range_slider_label:after{ position: absolute; top: 8px; left: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-right: 7px solid #5c4cff; border-bottom: 7px solid transparent; content: ''; } ::-moz-range-track { /* background: #d7dcdf; */ border: 0; } input::-moz-focus-inner, input::-moz-focus-outer { border: 0; } #barcode_img { width: fit-content; } .price-total { font-size: 1.2em; } /* responsive */ @media (max-width: 320px) { .navbar-brand{ width: 60% !important; } .mosh-btn-lg { font-size: .8rem; } .bradcumbContent h2 { font-size: 2.5rem; } .pr > div { padding: 20px 2px; } .gen-item { font-size: 12px; } } @media (max-width: 992px) { .dropdown-menu { padding: 0 !important; box-shadow: none; margin: .5em; } } @media (min-width: 992px) { nav li { float: left; } nav li a { /* padding: 20px 30px; */ } .menu { display: block; clear: none; float: right; max-height: none; } .menu__icon, .menu__checkbox, .hamburger { display: none; } } @media (min-width: 992px) and (max-width: 1199px) { .search-button > a { margin: 0 40px; } .menu_area #nav .nav-link { /* padding: 0 10px; */ } .search-form-area #search { width: 450px; } .hero-slides .owl-next { right: 20px; } .hero-slides .owl-prev { left: 20px; } } @media (min-width: 320px) and (max-width: 991px) { .banner_content { text-align: center !important; } .banner_btn{ margin: auto !important; } .history { /* border-radius: 20px; */ overflow: scroll; } .history::-webkit-scrollbar { display: none; } .header_area { padding: 0; /* height: 80px; */ } .navbar-toggler { /* border: 2px solid #fff; */ /* background-color: #f2f4f6; */ margin: 11px 0; } .sticky .navbar-toggler { margin: 11px 0; } .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .navbar-toggler:focus,.navbar-toggler-icon:focus { outline: none; } #mosh-navbar { padding: 30px; border-radius: 5px; background-color: #fff; text-align: left; } .header_area.sticky .navbar { height: 70px; } .menu_area #nav .nav-link { font-size: 1.2em; margin: 0.2rem; } .search-button > a { margin: 15px 0; display: block; } .hero-slide-content h2 { font-size: 20px; } .hero-slide-content h4 { font-size: 18px; } .welcome_area, .single-hero-slide { height: 600px; } .hero-slides .owl-next { right: 5px; } .hero-slides .owl-prev { left: 5px; } .search-form-area #search { width: 200px; border-radius: 10px; padding: 0 15px; } .section-heading > h2 { /* font-size: 24px; */ } .clients-logo-area > a > img { /* max-width: 100px; height: auto;*/ margin: 15px; } .features-img > img { width: 100%; position: relative; bottom: -30px; left: 0; z-index: 9; } .single_gallery_item { width: 100%; } .cta-content .section-heading h2 { font-size: 24px; } .mosh-service-slides .owl-prev { left: -15px; } .mosh-service-slides .owl-next { left: auto; right: -15px; } .footer-bottom-area { height: 100px; text-align: center; padding: 25px 0; } .bradcumbContent h2 { font-size: 40px; } .mosh-features-thumb { margin-bottom: 100px; } .few-words-contents, .few-words-thumb { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; height: 770px; } .mosh-team-slides .owl-prev { left: -10px; } .mosh-team-slides .owl-next { left: auto; right: -10px; } .subscribe-newsletter-content h2 { font-size: 24px; } .subscribe-newsletter-content form > input { width: 100%; } .subscribe-newsletter-content form > button { width: 120px; padding: 0 15px; right: 0; } .testimonials-slides .owl-prev { left: -10px; } .testimonials-slides .owl-next { left: auto; right: -10px; } .testimonial-content p { font-size: 13px; } .mosh-cool-facts-area .counter-area > h3 { font-size: 20px; } .testimonials-slides:after { text-align: right; } .testimonials-slides:before { text-align: left; } } @media (min-width: 480px) and (max-width: 767px) { .banner_content { text-align: center !important; } .banner_btn{ margin: auto !important; } .welcome_area, .single-hero-slide { height: 700px; } .clients-logo-area > a > img { /* max-width: 75px; */ /* height: auto; */ /* margin: 0 15px; */ } } @media (min-width: 576px) and (max-width: 767px) { .banner_content { text-align: center !important; } .banner_btn{ margin: auto !important; } .welcome_area, .single-hero-slide { height: 800px; } .hero-slide-content h2 { font-size: 30px; } } /*! * Social Share Kit v1.0.7 (http://socialsharekit.com) * Copyright 2015 Social Share Kit / Kaspars Sprogis. * Licensed under Creative Commons Attribution-NonCommercial 3.0 license: * https://github.com/darklow/social-share-kit/blob/master/LICENSE * --- */@font-face{font-family:'social-share-kit';src:url('./fonts/social-share-kit.eot');src:url('./fonts/social-share-kit.eot?#iefix') format('embedded-opentype'),url('./fonts/social-share-kit.woff') format('woff'),url('./fonts/social-share-kit.ttf') format('truetype'),url('./fonts/social-share-kit.svg#social-share-kit') format('svg');font-weight:normal;font-style:normal}.ssk:before{display:inline-block;font-family:"social-share-kit" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ssk-facebook:before{content:"a";text-indent:4px;margin-right:-4px}.ssk-twitter:before{content:"b"}.ssk-google-plus:before{content:"v"}.ssk-google-plus-old:before{content:"c"}.ssk-email:before{content:"d";top:-1px;position:relative}.ssk-pinterest:before{content:"e";transform:scale(.9)}.ssk-tumblr:before{content:"f"}.ssk-linkedin:before{content:"g"}.ssk-github:before{content:"h"}.ssk-vk:before{content:"i"}.ssk-instagram:before{content:"j"}.ssk-amazon:before{content:"k"}.ssk-skype:before{content:"s"}.ssk-youtube:before{content:"x"}.ssk-vimeo:before{content:"u"}.ssk-ebay:before{content:"p"}.ssk-apple:before{content:"l"}.ssk-behance:before{content:"q"}.ssk-dribble:before{content:"n"}.ssk-android:before{content:"o"}.ssk-whatsapp:before{content:"m"}.ssk-reddit:before{content:"r"}.ssk-reddit2:before{content:"t"}.ssk-link:before{content:"w"}.ssk-buffer:before{content:"\79";transform:scale(.85)}.ssk{background-color:#757575;color:white;display:inline-block;font-size:22px;line-height:1px;margin-right:2px;margin-bottom:2px;padding:7px;text-align:center;text-decoration:none;transition:background-color .1s;-webkit-transition:background-color .1s;-moz-transition:background-color .1s;-ms-transition:background-color .1s;-o-transition:background-color .1s}.ssk:before,.ssk .glyphicon,.ssk .fa{position:relative;font-size:22px;top:0;vertical-align:middle}.ssk.ssk-xs,.ssk-xs>.ssk{padding:4px}.ssk.ssk-xs:before,.ssk-xs>.ssk:before,.ssk.ssk-xs .glyphicon,.ssk-xs>.ssk .glyphicon,.ssk.ssk-xs .fa,.ssk-xs>.ssk .fa{font-size:15px}.ssk.ssk-sm,.ssk-sm>.ssk{padding:5px}.ssk.ssk-sm:before,.ssk-sm>.ssk:before,.ssk.ssk-sm .glyphicon,.ssk-sm>.ssk .glyphicon,.ssk.ssk-sm .fa,.ssk-sm>.ssk .fa{font-size:20px}.ssk.ssk-lg,.ssk-lg>.ssk{padding:9px}.ssk.ssk-lg:before,.ssk-lg>.ssk:before,.ssk.ssk-lg .glyphicon,.ssk-lg>.ssk .glyphicon,.ssk.ssk-lg .fa,.ssk-lg>.ssk .fa{font-size:28px}.ssk:last-child{margin-right:0}.ssk:hover{background-color:#424242}.ssk:hover,.ssk:focus{color:#fff;text-decoration:none}.ssk.ssk-round,.ssk-round .ssk{border-radius:50%}.ssk.ssk-round:before,.ssk-round .ssk:before{text-indent:0;margin-right:0}.ssk.ssk-rounded,.ssk-rounded .ssk{border-radius:15%}.ssk.ssk-icon{color:#757575;padding:2px;font-size:24px}.ssk.ssk-icon,.ssk.ssk-icon:hover{background-color:transparent}.ssk.ssk-icon:hover{color:#424242}.ssk.ssk-icon.ssk-xs,.ssk-xs>.ssk.ssk-icon{font-size:16px}.ssk.ssk-icon.ssk-sm,.ssk-sm>.ssk.ssk-icon{font-size:20px}.ssk.ssk-icon.ssk-lg,.ssk-lg>.ssk.ssk-icon{font-size:28px}.ssk.ssk-text{overflow:hidden;font-size:17px;line-height:normal;padding-right:10px}.ssk.ssk-text:before,.ssk.ssk-text .glyphicon,.ssk.ssk-text .fa{margin:-7px 10px -7px -7px;padding:7px;background-color:rgba(0,0,0,0.15);vertical-align:bottom;text-indent:0}.ssk-block .ssk.ssk-text{display:block;margin-right:0;text-align:left}.ssk.ssk-text.ssk-xs,.ssk-xs>.ssk.ssk-text{font-size:12px;padding-right:6px}.ssk.ssk-text.ssk-xs:before,.ssk-xs>.ssk.ssk-text:before,.ssk.ssk-text.ssk-xs .glyphicon,.ssk-xs>.ssk.ssk-text .glyphicon,.ssk.ssk-text.ssk-xs .fa,.ssk-xs>.ssk.ssk-text .fa{margin:-4px 6px -4px -4px;padding:4px}.ssk.ssk-text.ssk-sm,.ssk-sm>.ssk.ssk-text{font-size:16px;padding-right:7px}.ssk.ssk-text.ssk-sm:before,.ssk-sm>.ssk.ssk-text:before,.ssk.ssk-text.ssk-sm .glyphicon,.ssk-sm>.ssk.ssk-text .glyphicon,.ssk.ssk-text.ssk-sm .fa,.ssk-sm>.ssk.ssk-text .fa{margin:-5px 7px -5px -5px;padding:5px}.ssk.ssk-text.ssk-lg,.ssk-lg>.ssk.ssk-text{font-size:22px;padding-right:13px}.ssk.ssk-text.ssk-lg:before,.ssk-lg>.ssk.ssk-text:before,.ssk.ssk-text.ssk-lg .glyphicon,.ssk-lg>.ssk.ssk-text .glyphicon,.ssk.ssk-text.ssk-lg .fa,.ssk-lg>.ssk.ssk-text .fa{margin:-9px 13px -9px -9px;padding:9px}.ssk-group,.ssk-sticky{font-size:0}.ssk-sticky{top:0;position:fixed;z-index:2000}.ssk-sticky .ssk{transition:padding .1s ease-out;-webkit-transition:padding .1s ease-out;-moz-transition:padding .1s ease-out;-ms-transition:padding .1s ease-out;-o-transition:padding .1s ease-out;margin:0}@media (min-width:768px){.ssk-sticky.ssk-left .ssk,.ssk-sticky.ssk-right .ssk{display:block;clear:both}.ssk-sticky.ssk-left.ssk-center,.ssk-sticky.ssk-right.ssk-center{top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%)}.ssk-sticky.ssk-left{left:0}.ssk-sticky.ssk-left .ssk{float:left}.ssk-sticky.ssk-left .ssk:hover{padding-left:15px}.ssk-sticky.ssk-right{right:0}.ssk-sticky.ssk-right .ssk{float:right}.ssk-sticky.ssk-right .ssk:hover{padding-right:15px}}.ssk-sticky.ssk-bottom{font-size:0;top:auto;bottom:0}.ssk-sticky.ssk-bottom.ssk-center{left:50%;right:auto;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.ssk-sticky.ssk-bottom .ssk{vertical-align:bottom}.ssk-sticky.ssk-bottom .ssk:hover{padding-bottom:15px}.ssk-sticky.ssk-round.ssk-xs .ssk:hover{padding:8px}.ssk-sticky.ssk-round.ssk-sm .ssk:hover{padding:9px}.ssk-sticky.ssk-round .ssk:hover{padding:11px}.ssk-sticky.ssk-round.ssk-lg .ssk:hover{padding:13px}@media (max-width:767px){.ssk-sticky{left:0;right:0;bottom:0;top:auto;width:100%;display:flex !important;flex-direction:row;flex-wrap:nowrap}.ssk-sticky.ssk-sticky-hide-xs{display:none !important}.ssk-sticky .ssk{flex:1;width:auto}.ssk-sticky .ssk .ssk-num{display:none}}.ssk-count{padding-top:20px}.ssk-count .ssk{position:relative}.ssk-count .ssk-num{border-radius:4px;color:#8f8f8f;background-color:rgba(50,50,50,0.03);display:block;font-size:12px;left:0;line-height:20px;position:absolute;right:0;text-align:center;top:-20px}@media (min-width:768px){.ssk-count.ssk-sticky{padding-top:0}.ssk-count.ssk-sticky.ssk-left .ssk-num,.ssk-count.ssk-sticky.ssk-right .ssk-num{top:20%;background-color:transparent}.ssk-count.ssk-sticky.ssk-left .ssk-num{left:100%;margin-left:5px}.ssk-count.ssk-sticky.ssk-right .ssk-num{right:115%;margin-left:-100%;text-align:right}}.ssk-facebook{background-color:#2d88ff}.ssk-grayscale>.ssk-facebook{background-color:#757575}.ssk-facebook:hover{background-color:#0268e2}.ssk-facebook:hover{background-color:#0268e2}.ssk-grayscale>.ssk-facebook:hover{background-color:#2d88ff}.ssk-facebook.ssk-icon{color:#2d88ff}.ssk-facebook.ssk-icon:hover{color:#0268e2}.ssk-facebook.ssk-icon:before{text-indent:0;margin-right:0}.ssk-twitter{background-color:#1DA1F2}.ssk-grayscale>.ssk-twitter{background-color:#757575}.ssk-twitter:hover{background-color:#0c85d0}.ssk-twitter:hover{background-color:#0c85d0}.ssk-grayscale>.ssk-twitter:hover{background-color:#1DA1F2}.ssk-twitter.ssk-icon{color:#1DA1F2}.ssk-twitter.ssk-icon:hover{color:#0c85d0}.ssk-google-plus{background-color:#EA4335}.ssk-grayscale>.ssk-google-plus{background-color:#757575}.ssk-google-plus:hover{background-color:#d62516}.ssk-google-plus:hover{background-color:#d62516}.ssk-grayscale>.ssk-google-plus:hover{background-color:#EA4335}.ssk-google-plus.ssk-icon{color:#EA4335}.ssk-google-plus.ssk-icon:hover{color:#d62516}.ssk-pinterest{background-color:#BD081C}.ssk-grayscale>.ssk-pinterest{background-color:#757575}.ssk-pinterest:hover{background-color:#8c0615}.ssk-pinterest:hover{background-color:#8c0615}.ssk-grayscale>.ssk-pinterest:hover{background-color:#BD081C}.ssk-pinterest.ssk-icon{color:#BD081C}.ssk-pinterest.ssk-icon:hover{color:#8c0615}.ssk-tumblr{background-color:#395773}.ssk-grayscale>.ssk-tumblr{background-color:#757575}.ssk-tumblr:hover{background-color:#283d51}.ssk-tumblr:hover{background-color:#283d51}.ssk-grayscale>.ssk-tumblr:hover{background-color:#395773}.ssk-tumblr.ssk-icon{color:#395773}.ssk-tumblr.ssk-icon:hover{color:#283d51}.ssk-email{background-color:#5c4cff}.ssk-grayscale>.ssk-email{background-color:#757575}.ssk-email:hover{background-color:#4031d5}.ssk-email:hover{background-color:#4031d5}.ssk-grayscale>.ssk-email:hover{background-color:#4031d5}.ssk-grayscale>.ssk-email:hover{background-color:#4031d5}.ssk-email.ssk-icon{color:#757575}.ssk-email.ssk-icon:hover{color:#5b5b5b}.ssk-vk{background-color:#54769a}.ssk-grayscale>.ssk-vk{background-color:#757575}.ssk-vk:hover{background-color:#425d79}.ssk-vk:hover{background-color:#425d79}.ssk-grayscale>.ssk-vk:hover{background-color:#54769a}.ssk-vk.ssk-icon{color:#54769a}.ssk-vk.ssk-icon:hover{color:#425d79}.ssk-linkedin{background-color:#1c87bd}.ssk-grayscale>.ssk-linkedin{background-color:#757575}.ssk-linkedin:hover{background-color:#156791}.ssk-linkedin:hover{background-color:#156791}.ssk-grayscale>.ssk-linkedin:hover{background-color:#1c87bd}.ssk-linkedin.ssk-icon{color:#1c87bd}.ssk-linkedin.ssk-icon:hover{color:#156791}.ssk-whatsapp{background-color:#34AF23}.ssk-grayscale>.ssk-whatsapp{background-color:#757575}.ssk-whatsapp:hover{background-color:#27851a}.ssk-whatsapp:hover{background-color:#27851a}.ssk-grayscale>.ssk-whatsapp:hover{background-color:#34AF23}.ssk-whatsapp.ssk-icon{color:#34AF23}.ssk-whatsapp.ssk-icon:hover{color:#27851a}.ssk-reddit{background-color:#5f99cf}.ssk-grayscale>.ssk-reddit{background-color:#757575}.ssk-reddit:hover{background-color:#3a80c1}.ssk-reddit:hover{background-color:#3a80c1}.ssk-grayscale>.ssk-reddit:hover{background-color:#5f99cf}.ssk-reddit.ssk-icon{color:#5f99cf}.ssk-reddit.ssk-icon:hover{color:#3a80c1}.ssk-reddit2{background-color:#5f99cf}.ssk-grayscale>.ssk-reddit2{background-color:#757575}.ssk-reddit2:hover{background-color:#3a80c1}.ssk-reddit2:hover{background-color:#3a80c1}.ssk-grayscale>.ssk-reddit2:hover{background-color:#5f99cf}.ssk-reddit2.ssk-icon{color:#5f99cf}.ssk-reddit2.ssk-icon:hover{color:#3a80c1}.ssk-buffer{background-color:#323B43}.ssk-grayscale>.ssk-buffer{background-color:#757575}.ssk-buffer:hover{background-color:#1c2126}.ssk-buffer:hover{background-color:#1c2126}.ssk-grayscale>.ssk-buffer:hover{background-color:#323B43}.ssk-buffer.ssk-icon{color:#323B43}.ssk-buffer.ssk-icon:hover{color:#1c2126}.ssk-turquoise{background-color:#1abc9c}.ssk-turquoise:hover{background-color:#148f77}.ssk-emerald{background-color:#2ecc71}.ssk-emerald:hover{background-color:#25a25a}.ssk-peter-river{background-color:#3498db}.ssk-peter-river:hover{background-color:#217dbb}.ssk-belize-hole{background-color:#2980b9}.ssk-belize-hole:hover{background-color:#20638f}.ssk-amethyst{background-color:#9b59b6}.ssk-amethyst:hover{background-color:#804399}.ssk-wisteria{background-color:#8e44ad}.ssk-wisteria:hover{background-color:#703688}.ssk-wet-asphalt{background-color:#34495e}.ssk-wet-asphalt:hover{background-color:#222f3d}.ssk-midnight-blue{background-color:#2c3e50}.ssk-midnight-blue:hover{background-color:#1a242f}.ssk-green-sea{background-color:#16a085}.ssk-green-sea:hover{background-color:#107360}.ssk-nephritis{background-color:#27ae60}.ssk-nephritis:hover{background-color:#1e8449}.ssk-sunflower{background-color:#f1c40f}.ssk-sunflower:hover{background-color:#c29d0b}.ssk-orange{background-color:#f39c12}.ssk-orange:hover{background-color:#c87f0a}.ssk-carrot{background-color:#e67e22}.ssk-carrot:hover{background-color:#bf6516}.ssk-pumpkin{background-color:#d35400}.ssk-pumpkin:hover{background-color:#a04000}.ssk-alizarin{background-color:#e74c3c}.ssk-alizarin:hover{background-color:#d62c1a}.ssk-pomegranate{background-color:#c0392b}.ssk-pomegranate:hover{background-color:#962d22}.ssk-clouds{background-color:#cfd9db}.ssk-clouds:hover{background-color:#b1c2c6}.ssk-concrete{background-color:#95a5a6}.ssk-concrete:hover{background-color:#798d8f}.ssk-silver{background-color:#bdc3c7}.ssk-silver:hover{background-color:#a1aab0}.ssk-asbestos{background-color:#7f8c8d}.ssk-asbestos:hover{background-color:#667273}.ssk-dark-gray{background-color:#555}.ssk-dark-gray:hover{background-color:#3b3b3b}.ssk-black{background-color:#333}.ssk-black:hover{background-color:#1a1a1a} .barcodes_blog .ssk-round>a:focus { background-color: #6300d4; color: #fff; } .gen-item{ background-color: #ffffff; border-radius: 20px; padding: 20px; display: block; box-shadow: 0px 0px 20px 0px #c8d5f561; transition: border-color, box-shadow 200ms; color: #000; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #55585f; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; border: 3px solid #5c4cff00; } .gen-item.active { border: 3px solid #ffffff80; background: #5c4cff; box-shadow: inset 0px 0px 20px 0px #12008ba3; color: #fff; } .gen-item.active img { filter: brightness(10); } .gen-item:hover{ box-shadow: 0px 0px 16px 0px #5c4cff70; border: 3px solid #5c4cff00; } .gen-item.active:hover { box-shadow: inset 0px 0px 20px 0px #12008ba3; border: 3px solid #ffffff80; } .gen-item-option { padding: 12px 24px; margin: 0px 8px; border-radius: 32px; box-shadow: 0px 0px 20px 0px #aab9e061; } .gen-img { display: block; height: 40px; margin: auto; margin-bottom: 16px; } #download.gen-menu { scroll-margin-top: 100px; } .generate-bulk-more { display: block; width: fit-content; position: absolute; right: 10px; top: 20px; background-color: #5c4cff; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; border-radius: 16px; padding: 2px 10px; } #generate-color { border-radius: 10px; height: 18px; width: 18px; border: 2px solid#fff; box-shadow: 0px 0px 6px 0px #5c4cff70; outline: none; -webkit-appearance: none; appearance: none; transform: scale(2.5); margin-left: 20px; transition: opacity, transform 200ms; } #generate-color::-webkit-color-swatch-wrapper { padding: 0; } #generate-color::-webkit-color-swatch { border: none; border-radius: 10px; } #generate-color::-moz-color-swatch-wrapper { padding: 0; } #generate-color::-moz-color-swatch { border: none; border-radius: 10px; } #generate-color:disabled { opacity: .5; transform: scale(0); } .card-hr { margin: 4px; border-top: 1px solid #4c88ff27; border-bottom: 1px solid #efefef7d; } .generate-data { color: #000; font-family: 'Courier New', Courier, monospace; } .generate-data:focus { color: #000; font-family: 'Courier New', Courier, monospace; } .generate-label{ font-family: 'Montserrat', sans-serif; font-weight: 500; } .generate-reset{ /* position: relative; */ } .generate-reset-btn { display: block; /* width: fit-content; */ position: absolute; right: 20px; top: 20px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; border-radius: 24px; padding: 6px 12px; } .generate-reset-btn:hover { box-shadow: 0px 0px 16px 0px #5c4cff70; } .cart-spinner { position: relative; overflow: hidden; display: inline-flex; border-radius: 0.5rem; padding: 0.1rem 0.5rem; } .cart-spinner.cart-spin::before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; opacity: .75; /* transform: translate(-50%, 50%); */ background: -webkit-linear-gradient(90deg, transparent, #fff, transparent); background: linear-gradient(90deg, transparent, #fff, transparent); -webkit-transform: translateX(-100%) skewX(0deg); transform: translateX(-100%) skewX(0deg); -webkit-animation: loading 1.5s infinite; animation: loading 1s infinite; } .cart-spinner.cart-spin::after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; /* transform: translate(-50%, 50%); */ opacity: .3; background:#5c4cff; transition: opacity 300ms ease-out ; border-radius: 0.5rem; } .cart-spinner.cart-spin-fade::after { opacity: 0; } @-webkit-keyframes loading { 100% { -webkit-transform: translateX(100%) skewX(0deg); transform: translateX(100%) skewX(0deg) } } @keyframes loading { 100% { -webkit-transform: translateX(100%) skewX(0deg); transform: translateX(100%) skewX(0deg) } } .checkout-spinner { display: block; font-size: 2em; width: 1em; height: 1em; left: 50%; background: transparent; box-sizing: border-box; border-top: 2px solid #5c4cff; border-left: 2px solid #5c4cff; border-right: 2px solid transparent; border-bottom: 2px solid transparent; border-radius: 100%; animation: spin 0.6s ease-out infinite; } @keyframes spin { 100% {transform: rotate(360deg)} } .aurora { position: relative; } .aurora::after { content: ''; height: 100%; top: 0; left: 50%; position: absolute; opacity: 0.5; --bg-aurora-1: #ffffff40; --bg-aurora-2: #9fdcff38; --bg-aurora-3: #7bff9140; --p-0: 0rem; --p-1: 10rem; --p-2: 20rem; --p-3: 30rem; --p-4: 40rem; --p-5: 50rem; --p-6: 60rem; --p-7: 70rem; --p-8: 80rem; --p-9: 90rem; --p-0-1: -20rem; --p-1-1: -5rem; --p-2-1: 25rem; --p-3-1: 65rem; --p-4-1: 55rem; --p-5-1: 15rem; --p-6-1: 45rem; --p-7-1: 95rem; --p-8-1: 55rem; --p-9-1: 100rem; --blur-aurora-1: 0rem; --blur-aurora-2: 2rem; animation: aurora 60s ease-in-out infinite; -webkit-animation: aurora 60s ease-in-out infinite; mix-blend-mode: overlay; /* filter: blur(0.0rem); */ } @keyframes aurora { 0%,100% { box-shadow: var(--p-0) 0 var(--blur-aurora-2) var(--bg-aurora-1), var(--p-9) 0 var(--blur-aurora-1) 25rem var(--bg-aurora-2), var(--p-8) 0 var(--blur-aurora-1) 5rem var(--bg-aurora-3), var(--p-7) 0 var(--blur-aurora-1) 10rem var(--bg-aurora-3), var(--p-6) 0 var(--blur-aurora-1) 10rem var(--bg-aurora-1), var(--p-5) 0 var(--blur-aurora-2) 3rem var(--bg-aurora-2), var(--p-4) 0 var(--blur-aurora-1) 5rem var(--bg-aurora-3), var(--p-3) 0 var(--blur-aurora-1) 3rem var(--bg-aurora-1), var(--p-2) 0 var(--blur-aurora-2) 10rem var(--bg-aurora-2), var(--p-1) 0 var(--blur-aurora-1) 3rem var(--bg-aurora-3), calc(-1*var(--p-9)) 0 var(--blur-aurora-1) 25rem var(--bg-aurora-1), calc(-1*var(--p-8)) 0 var(--blur-aurora-2) 10rem var(--bg-aurora-1), calc(-1*var(--p-7)) 0 var(--blur-aurora-1) 10rem var(--bg-aurora-2), calc(-1*var(--p-6)) 0 var(--blur-aurora-1) 10rem var(--bg-aurora-3), calc(-1*var(--p-5)) 0 var(--blur-aurora-1) 5rem var(--bg-aurora-2), calc(-1*var(--p-4)) 0 var(--blur-aurora-1) 10rem var(--bg-aurora-1), calc(-1*var(--p-3)) 0 var(--blur-aurora-2) 5rem var(--bg-aurora-3), calc(-1*var(--p-2)) 0 var(--blur-aurora-1) 10rem var(--bg-aurora-2), calc(-1*var(--p-1)) 0 var(--blur-aurora-1) 25rem var(--bg-aurora-1) ; } 50% { box-shadow: var(--p-0-1) 0 var(--blur-aurora-2) 1rem var(--bg-aurora-1), var(--p-9-1) 0 var(--blur-aurora-1) 25rem var(--bg-aurora-2), var(--p-8-1) 0 var(--blur-aurora-1) 5rem var(--bg-aurora-1), var(--p-7-1) 0 var(--blur-aurora-1) 10rem var(--bg-aurora-1), var(--p-6-1) 0 var(--blur-aurora-2) 10rem var(--bg-aurora-2), var(--p-5-1) 0 var(--blur-aurora-1) 3rem var(--bg-aurora-1), var(--p-4-1) 0 var(--blur-aurora-1) 5rem var(--bg-aurora-3), var(--p-3-1) 0 var(--blur-aurora-2) 3rem var(--bg-aurora-1), var(--p-2-1) 0 var(--blur-aurora-1) 10rem var(--bg-aurora-1), var(--p-1-1) 0 var(--blur-aurora-1) 3rem var(--bg-aurora-2), calc(-1*var(--p-9-1)) 0 var(--blur-aurora-1) 25rem var(--bg-aurora-1), calc(-1*var(--p-8-1)) 0 var(--blur-aurora-1) 10rem var(--bg-aurora-1), calc(-1*var(--p-7-1)) 0 var(--blur-aurora-2) 10rem var(--bg-aurora-2), calc(-1*var(--p-6-1)) 0 var(--blur-aurora-2) 10rem var(--bg-aurora-3), calc(-1*var(--p-5-1)) 0 var(--blur-aurora-1) 5rem var(--bg-aurora-1), calc(-1*var(--p-4-1)) 0 var(--blur-aurora-1) 10rem var(--bg-aurora-1), calc(-1*var(--p-3-1)) 0 var(--blur-aurora-1) 5rem var(--bg-aurora-2), calc(-1*var(--p-2-1)) 0 var(--blur-aurora-2) 10rem var(--bg-aurora-1), calc(-1*var(--p-1-1)) 0 var(--blur-aurora-1) 25rem var(--bg-aurora-3) ; } } .btn-glow { background-color: #ffffff; color: #8500ff; box-shadow: 0px 0px 20px 3px #ffffff73; } .btn-glow:hover { background-color: #fff; color: #8500ff; box-shadow: 0px 0px 20px 5px #fff; } i.fa, i.fab, i.fad, i.fal, i.far, i.fas { min-width: 1rem; display: inline-block; } b, strong { font-weight: 600; } .btn-spinner { position: relative; padding-left: 2rem; } .btn-spinner i { display: none; } .btn-spinner::before{ content: ''; height: 1rem; width: 1rem; top: 50%; margin-left: -1.3rem; margin-top: -0.5rem; position: absolute; background: transparent; box-sizing: border-box; border-top: 2px solid; border-left: 2px solid; border-right: 2px solid transparent; border-bottom: 2px solid transparent; border-radius: 100%; -webkit-animation: spin 1s infinite; animation: spin 1s infinite; } .btn-pulse{ cursor: initial; position: relative; animation: pulse 1.5s ease-out ; transition: 200ms; } .shake{ animation: shake 0.3s ease-out ; } @keyframes shake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 25% { -webkit-transform: translateX(-1rem); transform: translateX(-1rem) } 50% { -webkit-transform: translateX(1rem); transform: translateX(1rem) } 75% { -webkit-transform: translateX(-1rem); transform: translateX(-1rem) } 100% {transform: translateX(0)} } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--primary) } 100%,30% { box-shadow: 0 0 0 36px transparent } } img.order-flag { border-radius: 0.3em; width: 1.3rem; opacity: .7; margin-right: 0.1rem; } .ratio.ratio-1x1 { aspect-ratio: 1; } .ratio.ratio-16x9 { aspect-ratio: calc(16 / 9); } .accordion .btn-light { white-space: normal; word-break: break-word; overflow-wrap: break-word; text-align: left; } .text-balance { text-wrap: balance; } .relative { position: relative; } .z-0 { z-index: 0; } .z-10 { z-index: 10; } .stretched-link::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; }