925 lines
18 KiB
SCSS
925 lines
18 KiB
SCSS
/*------------------------------------------------------------------------
|
|
|
|
Template Name: Conbix - Business Consulting Next js Template
|
|
Author: ThemeOri
|
|
Author URI: http://themeori.com
|
|
Version: 1.0.2
|
|
Description: This Template is created for web template
|
|
|
|
--------------------------------------------------------------------------
|
|
TABLE OF CONTENTS
|
|
--------------------------------------------------------------------------
|
|
|
|
* Google Fonts
|
|
* Common CSS
|
|
* Form CSS
|
|
* Hedging CSS
|
|
* Conbix Button And Title Styles CSS
|
|
* Conbix Text Style CSS
|
|
* Scroll Top CSS
|
|
* Preloader CSS
|
|
* Animation CSS
|
|
* Conbix Color CSS
|
|
* Dark CSS
|
|
* Dark Light Switch CSS
|
|
* Space And Container CSS
|
|
* Top Bar CSS
|
|
* Top Bar Three CSS
|
|
* Menu Bar Sticky CSS
|
|
* Menu Bar CSS
|
|
* Menu Sidebar CSS
|
|
* Header Two CSS
|
|
* Header Three CSS
|
|
* Menu Responsive CSS
|
|
* Banner One CSS
|
|
* Banner Two CSS
|
|
* Banner Three CSS
|
|
* About One CSS
|
|
* About Two CSS
|
|
* About Three CSS
|
|
* About Company CSS
|
|
* Company Two CSS
|
|
* About Solution CSS
|
|
* Company History CSS
|
|
* Features CSS
|
|
* Consulting CSS
|
|
* Work CSS
|
|
* Services CSS
|
|
* Services Two CSS
|
|
* Services Three CSS
|
|
* Services Page CSS
|
|
* Services Details CSS
|
|
* Cta CSS
|
|
* Cta Two CSS
|
|
* Get In Touch CSS
|
|
* Get In Touch Three CSS
|
|
* Help CSS
|
|
* Pricing CSS
|
|
* Pricing Two CSS
|
|
* Team CSS
|
|
* Team Two CSS
|
|
* Team Three CSS
|
|
* Team Details CSS
|
|
* Testimonial CSS
|
|
* Testimonial Two CSS
|
|
* Choose Us CSS
|
|
* FAQ CSS
|
|
* FAQ Two CSS
|
|
* Project CSS
|
|
* Portfolio One CSS
|
|
* Portfolio Two CSS
|
|
* Portfolio Three CSS
|
|
* Conbix Filter CSS
|
|
* Project Filter CSS
|
|
* Project Details CSS
|
|
* Solution CSS
|
|
* Solution Two CSS
|
|
* Experience CSS
|
|
* Subscribe One CSS
|
|
* Subscribe Two CSS
|
|
* Blog One CSS
|
|
* Blog Two CSS
|
|
* Blog Three CSS
|
|
* News Details CSS
|
|
* News Standard CSS
|
|
* Conbix Contact CSS
|
|
* Contact Page CSS
|
|
* Contact Two CSS
|
|
* Contact Three CSS
|
|
* Contact Four CSS
|
|
* Request Quote CSS
|
|
* Footer Top CSS
|
|
* Footer One CSS
|
|
* Footer Two CSS
|
|
* Footer Three CSS
|
|
* All Footer CSS
|
|
* Copyright One CSS
|
|
* Copyright Two CSS
|
|
* Copyright Three CSS
|
|
* All Side Bar CSS
|
|
* Post CSS
|
|
* Theme Pagination CSS
|
|
* Page Banner CSS
|
|
* Error CSS
|
|
* Contact CSS
|
|
|
|
/*==========================================================================
|
|
Common CSS
|
|
==========================================================================*/
|
|
body {
|
|
font-family: var(--body-font);
|
|
color: var(--body-color);
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
font-weight: 400;
|
|
text-transform: capitalize;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
transition: 0.4s;
|
|
}
|
|
a {
|
|
outline: none;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
a,
|
|
button,
|
|
i {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
a:focus,
|
|
a:hover {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
.section-padding {
|
|
padding: 120px 0;
|
|
}
|
|
.section-padding-two {
|
|
padding: 95px 0 120px 0;
|
|
}
|
|
@media (max-width: 575px) {
|
|
.section-padding {
|
|
padding: 90px 0;
|
|
}
|
|
.section-padding-two {
|
|
padding: 65px 0 90px 0;
|
|
}
|
|
}
|
|
.display-none {
|
|
display: none;
|
|
}
|
|
.display-block {
|
|
display: block;
|
|
}
|
|
.filter img {
|
|
filter: grayscale(100%);
|
|
}
|
|
.img__full {
|
|
width: 100%;
|
|
}
|
|
/*==========================================================================
|
|
Form CSS
|
|
==========================================================================*/
|
|
button,
|
|
input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
border: 1px solid var(--border-color-2);
|
|
border-color: transparent;
|
|
border-radius: 6px;
|
|
background: var(--primary-color-1);
|
|
color: var(--text-white);
|
|
padding: 17px 40px;
|
|
}
|
|
button:hover,
|
|
input[type="button"]:hover,
|
|
input[type="reset"]:hover,
|
|
input[type="submit"]:hover {
|
|
border-color: transparent;
|
|
}
|
|
button:active,
|
|
button:focus,
|
|
input[type="button"]:active,
|
|
input[type="button"]:focus,
|
|
input[type="reset"]:active,
|
|
input[type="reset"]:focus,
|
|
input[type="submit"]:active,
|
|
input[type="submit"]:focus {
|
|
border-color: transparent;
|
|
}
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="url"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="number"],
|
|
input[type="tel"],
|
|
input[type="range"],
|
|
input[type="date"],
|
|
input[type="month"],
|
|
input[type="week"],
|
|
input[type="time"],
|
|
input[type="datetime"],
|
|
input[type="datetime-local"],
|
|
input[type="color"],
|
|
textarea {
|
|
color: var(--body-color);
|
|
border-radius: 6px;
|
|
width: 100%;
|
|
height: 60px;
|
|
border: 1px solid var(--border-color-2);
|
|
padding: 0 15px;
|
|
background: var(--bg-white);
|
|
}
|
|
input[type="text"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="url"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="search"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="tel"]:focus,
|
|
input[type="range"]:focus,
|
|
input[type="date"]:focus,
|
|
input[type="month"]:focus,
|
|
input[type="week"]:focus,
|
|
input[type="time"]:focus,
|
|
input[type="datetime"]:focus,
|
|
input[type="datetime-local"]:focus,
|
|
input[type="color"]:focus,
|
|
textarea:focus {
|
|
color: var(--text-heading-color);
|
|
outline: none;
|
|
box-shadow: none;
|
|
border-color: var(--primary-color-1);
|
|
}
|
|
select {
|
|
border: 1px solid var(--border-color-2);
|
|
}
|
|
textarea {
|
|
width: 100%;
|
|
height: 150px;
|
|
padding-top: 15px;
|
|
}
|
|
button,
|
|
button:hover,
|
|
button:focus {
|
|
box-shadow: none;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
/*==========================================================================
|
|
Hedging CSS
|
|
==========================================================================*/
|
|
$list: (h1, 70px, 80px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
|
(h2, 48px, 60px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
|
(h3, 30px, 40px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
|
(h4, 24px, 34px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
|
(h5, 22px, 32px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
|
(h6, 20px, 30px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
|
(p, 16px, 30px, 0, 0);
|
|
@each $name, $size, $height, $p, $m, $color, $font, $weight in $list {
|
|
#{$name}{
|
|
font-size: $size;
|
|
line-height: $height;
|
|
padding: $p;
|
|
margin: $m;
|
|
color: $color;
|
|
font-family: $font;
|
|
font-weight: $weight;
|
|
}
|
|
}
|
|
$list: left, center, right;
|
|
@each $i in $list {
|
|
.t-#{$i} {
|
|
text-align: $i;
|
|
}
|
|
}
|
|
@media (max-width: 1399px) {
|
|
h2 {
|
|
font-size: 45px;
|
|
line-height: 55px;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
h2 {
|
|
font-size: 38px;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
@media (max-width: 420px) {
|
|
h2 {
|
|
font-size: 31px;
|
|
line-height: 41px;
|
|
}
|
|
h3 {
|
|
font-size: 28px;
|
|
line-height: 38px;
|
|
}
|
|
}
|
|
@media (max-width: 359px) {
|
|
h2 {
|
|
font-size: 27px;
|
|
line-height: 37px;
|
|
}
|
|
h3 {
|
|
font-size: 24px;
|
|
line-height: 34px;
|
|
}
|
|
h4 {
|
|
font-size: 21px;
|
|
line-height: 31px;
|
|
}
|
|
h5 {
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
}
|
|
h6 {
|
|
font-size: 18px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
/*==========================================================================
|
|
Conbix Button And Title Styles CSS
|
|
==========================================================================*/
|
|
.subtitle-one,
|
|
.subtitle-two,
|
|
.subtitle-three {
|
|
position: relative;
|
|
text-transform: uppercase;
|
|
font-family: var(--heading-font);
|
|
color: var(--primary-color-1);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
padding-left: 55px;
|
|
display: inline-block;
|
|
margin-bottom: 14px;
|
|
&::before {
|
|
position: absolute;
|
|
content: '';
|
|
top: 6px;
|
|
left: 0;
|
|
width: 40px;
|
|
height: 2px;
|
|
background: var(--primary-color-1);
|
|
}
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
bottom: 6px;
|
|
left: 0;
|
|
width: 40px;
|
|
height: 2px;
|
|
background: var(--primary-color-1);
|
|
}
|
|
}
|
|
.subtitle-two {
|
|
color: var(--primary-color-2);
|
|
&::before {
|
|
background: var(--primary-color-2);
|
|
}
|
|
&::after {
|
|
background: var(--primary-color-2);
|
|
}
|
|
}
|
|
.subtitle-three {
|
|
color: var(--primary-color-3);
|
|
&::before {
|
|
background: var(--primary-color-3);
|
|
}
|
|
&::after {
|
|
background: var(--primary-color-3);
|
|
}
|
|
}
|
|
.btn-one,
|
|
.btn-two,
|
|
.btn-three,
|
|
.btn-four,
|
|
.btn-five,
|
|
.btn-six,
|
|
.btn-seven,
|
|
.btn-eight,
|
|
.btn-nine {
|
|
background: var(--primary-color-1);
|
|
color: var(--text-white);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
padding: 17px 43px;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
font-family: var(--heading-font);
|
|
z-index: 3;
|
|
position: relative;
|
|
transition: 0.4s;
|
|
text-transform: uppercase;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
i {
|
|
position: relative;
|
|
top: 0px;
|
|
margin-left: 15px;
|
|
font-size: 13px;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
height: 400px;
|
|
width: 430px;
|
|
top: 50%;
|
|
left: 50%;
|
|
background: var(--btn-heading-color);
|
|
border-radius: 50%;
|
|
transform: translateY(-50%) translateX(-50%) scale(0);
|
|
transition: all 0.5s ease-out 0s;
|
|
z-index: -1;
|
|
}
|
|
&:hover {
|
|
color: var(--text-white);
|
|
&::before {
|
|
transform: translateY(-50%) translateX(-50%) scale(1);
|
|
}
|
|
}
|
|
&:focus {
|
|
color: var(--text-white);
|
|
}
|
|
}
|
|
.btn {
|
|
&-two {
|
|
background: var(--btn-white);
|
|
color: var(--btn-heading-color);
|
|
border: 1px solid var(--color-4);
|
|
padding: 16px 42px;
|
|
&::before {
|
|
background: var(--primary-color-1);
|
|
}
|
|
&:focus {
|
|
color: var(--primary-color-1);
|
|
}
|
|
&:hover {
|
|
border-color: var(--primary-color-1);
|
|
}
|
|
}
|
|
&-three {
|
|
background: transparent;
|
|
color: var(--text-white);
|
|
border: 1px solid var(--border-white);
|
|
padding: 16px 42px;
|
|
&:hover {
|
|
color: var(--text-white);
|
|
border-color: var(--primary-color-1);
|
|
}
|
|
&::before {
|
|
background: var(--primary-color-1);
|
|
}
|
|
&:focus {
|
|
color: var(--text-white);
|
|
}
|
|
}
|
|
&-four {
|
|
background: var(--btn-heading-color);
|
|
&::before {
|
|
background: var(--btn-white);
|
|
}
|
|
&:hover {
|
|
color: var(--btn-heading-color);
|
|
}
|
|
}
|
|
&-five {
|
|
background: var(--primary-color-2);
|
|
color: var(--text-white);
|
|
border-radius: 30px;
|
|
&::before {
|
|
background: var(--btn-white);
|
|
}
|
|
&:hover {
|
|
color: var(--btn-heading-color);
|
|
}
|
|
&:focus {
|
|
color: var(--btn-heading-color);
|
|
}
|
|
}
|
|
&-six {
|
|
background: transparent;
|
|
border: 1px solid var(--primary-color-2);
|
|
color: var(--primary-color-2);
|
|
border-radius: 30px;
|
|
&:hover {
|
|
border-color: var(--text-white);
|
|
}
|
|
&::before {
|
|
background: var(--btn-white);
|
|
}
|
|
&:focus {
|
|
color: var(--primary-color-2);
|
|
}
|
|
}
|
|
&-seven {
|
|
background: var(--primary-color-3);
|
|
&::before {
|
|
background: var(--btn-heading-color);
|
|
}
|
|
}
|
|
&-eight {
|
|
background: transparent;
|
|
color: var(--primary-color-3);
|
|
border: 1px solid var(--primary-color-3);
|
|
padding: 16px 42px;
|
|
&:hover {
|
|
border-color: var(--btn-heading-color);
|
|
}
|
|
&::before {
|
|
background: var(--btn-heading-color);
|
|
}
|
|
&:focus {
|
|
color: var(--primary-color-3);
|
|
}
|
|
}
|
|
&-nine {
|
|
background: var(--btn-white);
|
|
color: var(--text-white);
|
|
&:hover {
|
|
color: var(--text-white);
|
|
}
|
|
&::before {
|
|
background: var(--btn-heading-color);
|
|
}
|
|
&:focus {
|
|
color: var(--primary-color-3);
|
|
}
|
|
}
|
|
}
|
|
.simple-btn-1,
|
|
.simple-btn-2,
|
|
.simple-btn-3 {
|
|
color: var(--primary-color-1);
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
font-weight: 700;
|
|
font-family: var(--heading-font);
|
|
transition: 0.4s;
|
|
text-transform: uppercase;
|
|
i {
|
|
position: relative;
|
|
top: 0;
|
|
margin-left: 15px;
|
|
font-size: 13px;
|
|
}
|
|
&:hover {
|
|
color: var(--btn-heading-color);
|
|
}
|
|
&:focus {
|
|
color: var(--btn-heading-color);
|
|
}
|
|
}
|
|
.simple-btn {
|
|
&-2 {
|
|
color: var(--text-heading-color);
|
|
&:hover {
|
|
color: var(--primary-color-1);
|
|
}
|
|
}
|
|
&-3 {
|
|
color: var(--text-white);
|
|
&:hover {
|
|
color: var(--primary-color-1);
|
|
}
|
|
}
|
|
}
|
|
/*==========================================================================
|
|
Conbix Text Style CSS
|
|
==========================================================================*/
|
|
.text {
|
|
&-one {
|
|
font-family: var(--heading-font);
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
line-height: 28px;
|
|
text-transform: capitalize;
|
|
color: var(--text-heading-color);
|
|
}
|
|
&-two {
|
|
font-family: var(--heading-font);
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
text-transform: capitalize;
|
|
color: var(--text-heading-color);
|
|
}
|
|
&-three {
|
|
font-family: var(--heading-font);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
text-transform: capitalize;
|
|
color: var(--text-heading-color);
|
|
}
|
|
&-four {
|
|
font-family: var(--heading-font);
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
text-transform: capitalize;
|
|
color: var(--text-heading-color);
|
|
}
|
|
&-five {
|
|
font-family: var(--heading-font);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
text-transform: capitalize;
|
|
color: var(--text-heading-color);
|
|
}
|
|
&-six {
|
|
font-size: 17px;
|
|
line-height: 30px;
|
|
text-transform: capitalize;
|
|
color: var(--text-heading-color);
|
|
}
|
|
&-seven {
|
|
font-size: 15px;
|
|
line-height: 26px;
|
|
text-transform: capitalize;
|
|
color: var(--text-heading-color);
|
|
}
|
|
&-eight {
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
text-transform: capitalize;
|
|
color: var(--text-heading-color);
|
|
}
|
|
&-nine {
|
|
font-size: 12px;
|
|
line-height: 22px;
|
|
text-transform: capitalize;
|
|
color: var(--text-heading-color);
|
|
}
|
|
}
|
|
@keyframes rotate {
|
|
100% {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
/*==========================================================================
|
|
Scroll Top CSS
|
|
==========================================================================*/
|
|
.scroll-up {
|
|
cursor: pointer;
|
|
display: block;
|
|
border-radius: 50px;
|
|
box-shadow: inset 0 0 0 2px var(--color-8);
|
|
z-index: 10000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(15px);
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
height: 50px;
|
|
width: 50px;
|
|
transition: all 200ms linear;
|
|
&::after {
|
|
position: absolute;
|
|
font-family: 'Font Awesome 5 Pro';
|
|
content: "\f176";
|
|
text-align: center;
|
|
line-height: 50px;
|
|
font-size: 24px;
|
|
color: var(--primary-color-1);
|
|
left: 0;
|
|
top: 0;
|
|
font-size: 20px;
|
|
height: 50px;
|
|
width: 50px;
|
|
cursor: pointer;
|
|
display: block;
|
|
z-index: 1;
|
|
transition: all 200ms linear;
|
|
}
|
|
&.active-scroll {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
svg path {
|
|
fill: none;
|
|
}
|
|
svg.scroll-circle path {
|
|
stroke: var(--primary-color-1);
|
|
stroke-width: 4;
|
|
box-sizing:border-box;
|
|
transition: all 200ms linear;
|
|
}
|
|
&.two {
|
|
&::after {
|
|
color: var(--primary-color-2);
|
|
}
|
|
svg.scroll-circle path {
|
|
stroke: var(--primary-color-2);
|
|
}
|
|
}
|
|
&.three {
|
|
&::after {
|
|
color: var(--primary-color-3);
|
|
}
|
|
svg.scroll-circle path {
|
|
stroke: var(--primary-color-3);
|
|
}
|
|
}
|
|
}
|
|
/*==========================================================================
|
|
Preloader CSS
|
|
==========================================================================*/
|
|
.theme-loader {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--bg-heading-color);
|
|
z-index: 9999999999;
|
|
}
|
|
.spinner {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
display: flex;
|
|
}
|
|
.spinner-bounce {
|
|
will-change: transform;
|
|
height: 45px;
|
|
width: 45px;
|
|
border-radius: 50%;
|
|
background: var(--primary-color-1);
|
|
display: inline-block;
|
|
animation: bounces 1s ease-in-out infinite alternate;
|
|
transform-origin: 50% 50%;
|
|
&.one {
|
|
margin-right: 15px;
|
|
}
|
|
&.two {
|
|
margin-right: 15px;
|
|
animation-delay: .4s;
|
|
}
|
|
&.three {
|
|
animation-delay: .8s;
|
|
}
|
|
}
|
|
@keyframes bounces {
|
|
0% {
|
|
transform: scale(1);
|
|
background: var(--primary-color-1);
|
|
}
|
|
50% {
|
|
background: var(--primary-color-2);
|
|
}
|
|
100% {
|
|
transform: scale(.2);
|
|
background: var(--primary-color-3);
|
|
}
|
|
}
|
|
/*==========================================================================
|
|
Animation CSS
|
|
==========================================================================*/
|
|
.video {
|
|
position: relative;
|
|
text-align: center;
|
|
display: inline-block;
|
|
z-index: 4;
|
|
span {
|
|
position: relative;
|
|
color: var(--primary-color-2);
|
|
font-size: 20px;
|
|
z-index: 1;
|
|
background: var(--bg-white);
|
|
width: 90px;
|
|
height: 90px;
|
|
line-height: 90px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.video-pulse::after, .video-pulse::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid var(--border-white);
|
|
opacity: 0.3;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 50%;
|
|
animation-duration: 2.5s;
|
|
animation-timing-function: linear;
|
|
animation-name: video-animation;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
.video-pulse::before {
|
|
animation-delay: 1s;
|
|
}
|
|
.modal-video-close-btn {
|
|
padding: 0
|
|
}
|
|
@keyframes video-animation {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.5);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(2);
|
|
}
|
|
}
|
|
|
|
.content__roll {
|
|
animation: roll 10s infinite linear;
|
|
}
|
|
@keyframes roll {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(-359deg);
|
|
}
|
|
}
|
|
.roll {
|
|
animation: rotation 2s infinite linear;
|
|
}
|
|
@keyframes rotation {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
.left-right-animate {
|
|
animation-name: left-right;
|
|
animation-duration: 3s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
@keyframes left-right {
|
|
0% {
|
|
transform: translateX(20px);
|
|
}
|
|
50% {
|
|
transform: translateX(5px);
|
|
}
|
|
100% {
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
.left-right-animate2 {
|
|
animation-name: left-right2;
|
|
animation-duration: 4s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
@keyframes left-right2 {
|
|
0% {
|
|
transform: translateX(10px);
|
|
}
|
|
50% {
|
|
transform: translateX(110px);
|
|
}
|
|
100% {
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
.icon-animation {
|
|
animation: icon-animation 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes icon-animation {
|
|
|
|
from {
|
|
transform:rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
20%, 32%, 44%, 56%, 68% {
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
23%, 35%, 47%, 59%, 71% {
|
|
transform: rotate3d(0,0,1,15deg);
|
|
}
|
|
26%, 38%, 50%, 62%, 74% {
|
|
transform: rotate3d(0,0,1,0deg);
|
|
}
|
|
29%, 41%, 53%, 65%, 77% {
|
|
transform: rotate3d(0,0,1,-15deg);
|
|
}
|
|
80% {
|
|
transform:rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes animation {
|
|
100% {
|
|
left: 125%;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateY {
|
|
100% {
|
|
transform: rotateY(360deg);
|
|
}
|
|
}
|
|
|
|
.swiper-button-prev::after {
|
|
display: none;
|
|
}
|
|
.swiper-button-next::after {
|
|
display: none;
|
|
} |