/*------------------------------------------------------------------ * Project: Travelin - Travel Tour Booking HTML Templates * Author: bizberg_themes * URL: https://themeforest.net/user/bizberg_themes * Created: 06/27/2022 ------------------------------------------------------------------- */ /* ========================================= */ /* Default CSS */ /* ========================================= */ @import '_variable.scss'; header, nav, section, article, aside, footer { display: block; } *{ margin: 0; padding: 0; } body { margin: 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: $fontfamily-pop; overflow-x: hidden; font-weight: $fontnormal; color: $bgrey; background-size:cover; background-attachment:fixed; background-repeat:no-repeat; } // heading h1,h2,h3,h4,h5,h6{ font-weight: $fontbold; font-family: $fontfamily-play; text-transform:$textcap; margin:0 0 1rem; color: $title; line-height:1.4; a { color:$title; transition: $transition; cursor:pointer; text-decoration:none; &:hover, &:focus{ color: $themecolor; transition: $transition; outline:none; text-decoration: none !important; } } } h1 {font-size: 58px;} h2 {font-size: 46px; } h3 {font-size: 26px;} h4 {font-size: 22px;} h5 { font-size: 18px; } h6 {font-size: 16px;} @media(max-width: 991px){ h1 {font-size: 48px;} h2{font-size: 36px;} } @media(max-width: 735px){ h1 {font-size: 38px;} h2{font-size: 28px;} h3{font-size: 21px;} } p{margin-bottom:8px;} // ordering list ul { margin: 0; padding: 0; list-style-type: none; li{ margin-bottom: 0px; line-height:$fontlineheight; color:$bgrey; position:relative; display:inline-block; padding: 0; } } ol { margin: 0; counter-reset: i; position:relative; li{ font-size: 16px; margin-bottom: 10px; line-height: $fontlineheight; color:$bgrey; padding-left: 0; position:relative; } } a { color: $bgrey; transition: $transition; cursor:pointer; text-decoration: none; &:hover, &:focus{ text-decoration: none; color: $themecolor; transition: $transition; outline:none; } } a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover{ color:$themecolor!important; } ::-webkit-input-placeholder { /* Edge */ color: $bgrey!important; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: $bgrey!important; } input::placeholder { color:$bgrey!important; } .row [class*="col-"]{padding:0 15px;} img{max-width:$size100;} .btn-info.focus, .btn-info:focus, .btn-info:active { outline: none; box-shadow: none!important; background: transparent!important; border: none!important; } .container{position:relative; z-index:1;} @media(max-width:767px){ .container, .container-sm{max-width:100%;} } .border{border-color:#f1f1f1!important;} .before-none{ &::before{display:none!important;} } // colors .white{color: $white!important;} .theme{color: $themecolor!important;} .theme1{color: $themecolor1!important;} .theme2{color: $title!important;} .black{color: $black!important;} .grey{color:$bgrey!important;} .title{color:$title!important;} // background colors .bg-grey{background: $grey!important;} .bg-lgrey{background: $lgrey!important;} .bg-theme{background: $themecolor!important;} .bg-theme1{background: $themecolor1!important;} .bg-theme2{background: $themecolor2!important;} .bg-title{background: $title!important;} .bg-fblack{background: $fullblack!important;} .bg-white{background: $white!important;} .bordernone{border:none!important;} .border-b{border-bottom:$borderdashed!important;} .border-all{border:$borderall!important;} .border-end {border-right: 1px solid #f1f1f1!important;} .rating { span { color: #ffbc00; display: inline; font-size: 14px; } } .small, small{font-size: 85%;} // margin-top .mt-1, .my-1{margin-top:0.5rem!important;} .mt-2, .my-2{margin-top:1rem!important;} .mt-3, .my-3{margin-top:1.5rem!important;} .mt-4, .my-4{margin-top:2rem!important;} .mt-5, .my-5{margin-top:2.5rem!important;} .mt-6, .my-6{margin-top:3rem!important;} .mt-7, .my-7{margin-top:3.5rem!important;} .mt-8, .my-8{margin-top:4rem!important;} .mt-9, .my-9{margin-top:4.5rem!important;} .mt-10, .my-10{margin-top:5rem!important;} .mt-minus{margin-top:-5rem!important;} // margin-bottom .mb-1, .my-1{margin-bottom:0.5rem!important;} .mb-2, .my-2{margin-bottom:1rem!important;} .mb-3, .my-3{margin-bottom:1.5rem!important;} .mb-4, .my-4{margin-bottom:2rem!important;} .mb-5, .my-5{margin-bottom:2.5rem!important;} .mb-6, .my-6{margin-bottom:3rem!important;} .mb-7, .my-7{margin-bottom:3.5rem!important;} .mb-8, .my-8{margin-bottom:4rem!important;} .mb-9, .my-9{margin-bottom:4.5rem!important;} .mb-10, .my-10{margin-bottom:5rem!important;} .mb-minus{margin-bottom:-5rem!important;} // Padding-top .pt-1, .py-1{padding-top:0.5rem!important;} .pt-2, .py-2{padding-top:1rem!important;} .pt-3, .py-3{padding-top:1.5rem!important;} .pt-4, .py-4{padding-top:2rem!important;} .pt-5, .py-5{padding-top:2.5rem!important;} .pt-6, .py-6{padding-top:3rem!important;} .pt-7, .py-7{padding-top:3.5rem!important;} .pt-8, .py-8{padding-top:4rem!important;} .pt-9, .py-9{padding-top:4.5rem!important;} .pt-10, .py-10{padding-top:5rem!important;} .pt-14, .py-14{padding-top:7rem!important;} .pt-17, .py-17{padding-top:8.5rem!important;} .pt-18, .py-18{padding-top:9rem!important;} .pt-19, .py-19{padding-top:9.5rem!important;} .pt-20, .py-20{padding-top:10rem!important;} .pt-lg-7, .py-lg-7{padding-top:3.5rem!important;} // Padding-bottom .pb-1, .py-1{padding-bottom:0.5rem!important;} .pb-2, .py-2{padding-bottom:1rem!important;} .pb-3, .py-3{padding-bottom:1.5rem!important;} .pb-4, .py-4{padding-bottom:2rem!important;} .pb-5, .py-5{padding-bottom:2.5rem!important;} .pb-6, .py-6{padding-bottom:3rem!important;} .pb-7, .py-7{padding-bottom:3.5rem!important;} .pb-8, .py-8{padding-bottom:4rem!important;} .pb-9, .py-9{padding-bottom:4.5rem!important;} .pb-10, .py-10{padding-bottom:5rem!important;} .pb-14, .py-14{padding-bottom:7rem!important;} .pb-17, .py-17{padding-bottom:8.5rem!important;} .pb-18, .py-18{padding-bottom:9rem!important;} .pb-19, .py-19{padding-bottom:9.5rem!important;} .pb-20, .my-20{padding-bottom:10rem!important;} .pb-lg-7, .py-lg-7{padding-bottom:3.5rem!important;} .top-minus-20{top: -20px!important;} .top-minus-40{top: -40px!important;} .top-inherit{top: inherit!important;} .bottom-inherit{bottom: inherit!important;} .translatey-50{transform:translateY(-50%);} // z-index .z-index1{z-index:1;} .z-index2{z-index:2;} .z-index3{z-index:4;} // input field .form-group{ width:$size100; display:inline-block; } input[type=text], input[type=email], input[type=number], input[type=search], input[type=password], input[type=tel], input[type=date], input[type=time], textarea, select { font-size: 15px; font-weight: $fontlight; background-color:$white; border:$borderall; border-radius:10px; padding: 12px 20px; color: $bgrey; margin-bottom: 0; height:50px; box-shadow: none; width: $size100; &:focus{ outline:none; transition: all 0.5s ease; box-shadow:none; } } select{ width: $size100; height:inherit; option{color:$black} } textarea{border-radius:none; resize: vertical; height: 120px;} label { display: inline-block; color: $bgrey; margin-bottom: 8px; font-weight: $fontnormal; font-size: 15px; } // blockquote blockquote { font-size: 14px; font-weight: $fontnormal; background-color:$themecolor; margin-bottom: 15px; border: 0; padding: 30px 70px 30px 70px; line-height:$fontlineheight; color:$white; margin: 20 0; font-style: $fontitalic; position:relative; :after{ content:''; position: absolute; height: 60%; width: 2px; background:$white; top: 20%; left: 35px; } p{color:$white; margin:0;} :before{ content: '\f10d'; font-family:'fontawesome'; font-size: 45px; position: absolute; bottom: 26px; right: 20px; color:$white; transform: rotate(180deg); } span{position:relative; padding-left:20px; :before{ content:''; width:12px; height:1px; background:$themecolor; position: absolute; left: 0; top: 50%; margin-top: -2px; } } } // table format table>{ tbody, tfoot, thead{ tr{ td,th{ padding:10px; vertical-align:sub!important; border:$borderall; } } tr:nth-child(even){background:$lgrey;} } } table { width:100%; thead { tr { th { border-bottom: none!important; } } } } // overlay // overlay .overlay, .dot-overlay, .color-overlay, .white-overlay, .left-overlay{ position: absolute; top: 0; left: 0; width:$size100; height: $size100; background: $fullblack; transition: $transition; opacity:0.5; } .dot-overlay{ background:$fullblack url(../images/dot-overlay.png) repeat; opacity: 0.6; } .color-overlay{ top: inherit; bottom:0; background:linear-gradient(to bottom, transparent, #000000); height:50%; opacity:0.6; } .left-overlay{ background:linear-gradient(to left, transparent,#fff); height:100%; opacity:1; } @media(max-width:639px){ .color-overlay{height: 100%; opacity: 0.4; background:$fullblack;} } .white-overlay{ background:#fdfdfd; opacity: 0.5; } // section section{ padding: 4.5rem 0 5rem; position:relative; } /*heading title*/ .section-title, .section-title-w, .section-title-l{ position:relative; z-index: 1; h2{ position: relative; line-height:1.2; } } .section-title-w{ &:before{ border-color:$white!important; } h2 span{ color:$themecolor2; } } .section-title-l{ &:before{ left:0; right: inherit;; } } @media(max-width: 991px){ .section-title{ width:100%!important; } } @media(max-width: 767px){ .section-title{ width:$size100!important; text-align:center!important; &::before{ left:0; right:0; } } } .row.slick-slider{ margin:0 -15px; } iframe{width: 100%; border:none;} .border-t{ border-top: 2px dashed #cccccc5e; } .box-shadow{box-shadow: $box-shadow;} .rounded{border-radius:10px!important;} .rounded-start{ border-top-left-radius: 10px!important;; border-bottom-left-radius: 10px!important;; } .rounded-top{ border-top-left-radius: 10px!important;; border-top-right-radius: 10px!important;; } .nav-tabs { border-bottom: none; background: $white; overflow: hidden; margin-bottom:30px; >li.nav-item{ margin: 0 4px; button { border-radius: 10px; padding: 15px; margin: 0; line-height: inherit; border: 1px solid #f1f1f1; display:inline-block; width:100%; &:hover{ color: $white!important; border-color:$themecolor; background:$themecolor; } } button.active{ color: $white!important; border-color:$themecolor; background:$themecolor; &:hover{ color: $white!important; border-color:$themecolor; background:$themecolor; } } } } @media(max-width:991px){ .nav-tabs{width:100%!important;} } @media(max-width:767px){ .nav-tabs{ >li.nav-item{margin:0 4px 4px;} } } /*pagination*/ .pagination-main{ line-height:0.8; .pagination{ margin-top: 0; margin-bottom: 0; display:inline-block; li{ padding-left: 0; padding-bottom: 0; margin-bottom: 0; &:before, &:after{display:none;} a{ padding:0; height: 40px; line-height: 38px; margin-right: 9px; text-align: center; width: 40px; color: $black; font-size: 14px; border:$borderall; display:inline-block; background: $lgrey; background:$white; border-radius:10px; &:hover,&:focus{ background-color: $themecolor; color:$white!important; border-color: $themecolor; } } &:last-child>{ a, span{border-radius:none; margin:0;} } } li.active{ a{ background: $themecolor !important; border-color: $themecolor !important; color:$white; } } .prev, .next{ a{border-radius:0px;} } } } @media(max-width: 567px){ .pagination li a { height: 30px; width: 30px; line-height: 28px; } } @media (max-width: 359px){ .pagination li a { height: 28px; width: 28px; line-height: 28px; } } .fade:not(.show){opacity:1;} /*breadcrumb*/ .breadcrumb-main{ background-repeat:no-repeat; background-position: top; background-size:cover; background-attachment: fixed; position:relative; .breadcrumb-outer{ background: transparent; position: relative; z-index: 1; &:before{ display:none; } .breadcrumb-content, .bread-content{ position:relative; text-align:center; justify-content:center; z-index:1; h1{ color: $white; text-transform: uppercase; line-height: 0.6; } } .bread-content{ nav{ left: 0; right: 0; } } } } .breadcrumb{ background: transparent; margin: 0; padding: 0; display: inline-block; li, li.active{ margin-bottom: 0; color:$white; a{ color:$themecolor; } } .breadcrumb-item+.breadcrumb-item{ &:before{ content: '|'; color: $white; } } } @media(max-width:991px){ .breadcrumb-main{ .breadcrumb-outer { .breadcrumb-content { display:block!important; text-align:center!important; nav{right:0; margin:0} h2{ margin:0!important; } h1{font-size:44px;} } } } .cover-content{margin-bottom:2rem;} } @media(max-width:811px){ .breadcrumb-main { .breadcrumb-outer { .breadcrumb-content{ h1{font-size:36px;} } } } .page-cover{ h1{font-size:36px;} .author-detail{display:block!important;} } } @media(max-width:639px){ .breadcrumb-main { .breadcrumb-outer { .breadcrumb-content{ h1{font-size:28px;} } } } .page-cover{ h1{font-size:28px;} } } @media(max-width: 479px){ .breadcrumb-main{ .breadcrumb-outer { .breadcrumb-content { text-align: center; h1{font-size:24px;} h2{display:block; font-size: 40px;} } } } } /*Buttons*/ button{border:none;} .nir-btn, .nir-btn-black{ position:relative; z-index: 1; font-size: 14px; text-align: center; padding: 14px 24px; text-transform: $textcap; transition: $transition; background: $themecolor; color:$white; display: inline-block; border-radius:10px; border:none; box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.1); overflow: hidden; &::before{ position: absolute; left: 0; width: 0; height: 100%; top: 0; content: ''; background: $themecolor1; color: $white!important; transition: all ease-in-out 0.5s; z-index: -1; } &:hover::before{ width: 100%; transition: all ease-in-out 0.5s; } &:hover{ color: $white!important; transition: all ease-in-out 0.5s; } } .nir-btn-black{ background: $title; &:before{ color:$white; } &:hover{ background:$white; color:$black; &:before{color:$themecolor1;} } } input#submit{border:none;} input#submit:hover{ opacity: 0.8; background: $themecolor!important; color:#fff; } .item-slider{ .slick-prev, .slick-next{ top: -124px; background:$white; border-radius:5px; border:1px solid #f1f1f1; width:50px; height: 50px; line-height:1; &::before{color: $bgrey; font-size:28px; line-height:1.5;} &:hover, &:focus{ background:$themecolor; border-color:$themecolor; &::before{ color: $white; } } } .slick-prev {right: 76px; left: inherit;} .slick-next {right: 16px;} } .banner-slider{ .slick-prev, .slick-next{ background:$themecolor1; border-radius:50%; width: 50px; height: 50px; &::before{color: $white; font-size:28px; line-height:1.8;} &:hover, &:focus{ background:$title; } } .slick-prev {left: 30px;} .slick-next {right: 30px;} } #preloader{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background:#f4f4f4; z-index: 999999; #status{ position: fixed; content:''; display: block; top: 50%; left: 50%; width: 400px; height: 300px; margin: 0 auto; background: url(../images/loader.gif); background-size: cover; background-position: center; opacity: 1; transform:translate(-50%, -50%); visibility: visible; transition:$transition; z-index: 9999999999; } } /* End Preloader */ #back-to-top { position: fixed; z-index: 1000; bottom: 20px; right: 20px; display: none; a{ display: block; width: 50px; height: 50px; background: $themecolor; position:relative; transition: $transition; text-align: center; border-radius:50%; &:after{ position: absolute; content: '\f30c'; font-family: "Font Awesome 5 Free"; font-size: 20px; color:$white; top: 50%; left: 50%; z-index: 1; font-weight: $fontbold; transform: translate(-50%,-50%); } } } .alert{ margin-bottom: 10px; border-radius: 0px; color: #e83737; padding: 0; .alert-success{ background:transparent; border:transparent; border-radius:0px; color:#3c763d; h4{margin-bottom:8px;} p{color:$white;} } } /* ========================================= */ /* Ribbon CSS */ /* ======================================== */ .ribbon { width: 150px; height: 150px; overflow: hidden; position: absolute; z-index: 2; &::before, &::after{ position: absolute; z-index: -1; content: ''; display: block; border: 5px solid #666; } span{ position: absolute; display: block; width: 225px; padding: 10px 0; background-color: $themecolor1; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); color: #fff; font-size:18px; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-transform: uppercase; text-align: center; } span.open{ background: #5ECFB1; } } .ribbon-top-left{ top: -10px; left: -10px; &:before, &:after{ border-top-color: transparent; border-left-color: transparent; } &:before{ top: 0; right: 0; } &:after{ bottom: 0; left: 0; } span { right: -25px; top: 40px; transform: rotate(-45deg); } } /* ========================================= */ /* Wickedpicker CSS */ /* ======================================== */ .wickedpicker { width: 120px!important; height: auto!important; z-index:9; } .wickedpicker .wickedpicker__title { display: none!important; } .wickedpicker__controls__control-up:before { content: '\f106'!important; font-family: 'Font Awesome\ 5 Free'!important; font-weight: 900!important; color: #909090!important; } .wickedpicker__controls__control-down:after { content: '\f107'!important; font-family: 'Font Awesome\ 5 Free'!important; font-weight: 900!important; color: #909090!important; } /* ========================================= */ /* Accrodion CSS */ /* ======================================== */ .accrodion-grp { .accrodion+.accrodion { margin-top: 10px; } .accrodion { .accrodion-title { border: $borderall; background: $white; padding:20px; cursor: pointer; transition:$transition; border-radius:10px; h5 { margin: 0; position: relative; text-transform: capitalize; border:none; &:before { content: '\f107'; font-family: 'FontAwesome'; color: #222222; font-size: 20px; position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } } .accrodion-content { padding-top: 10px; .inner { padding: 30px; p { margin: 0; font-size: 15px; line-height: 25px; letter-spacing: .01em; color: #74787D; } } } } .accrodion.active { .accrodion-title { background: $themecolor; border-color: $themecolor; h5 { color: $white; &:before { content: '\f106'; color: $white; } } } } } @media(max-width: 567px){ .accrodion-grp { .accrodion { .accrodion-title { h5{font-size: 14px;} } } } } /* ========================================= */ /* Custom animation CSS */ /* ======================================== */ @-webkit-keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(.2); transform: scale(.2); } } @keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(.2); transform: scale(.2); } } @-webkit-keyframes zoom-fade-two { 0% { -webkit-transform: scale(1.5); transform: scale(1.5); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.5); transform: scale(1.5); } } @keyframes zoom-fade-two { 0% { -webkit-transform: scale(1.5); transform: scale(1.5); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.5); transform: scale(1.5); } } @-webkit-keyframes zoom-fade { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes zoom-fade { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes slide { from { background-position: 0 0; } to { background-position: -111px 0; } } @-webkit-keyframes slide { from { background-position: 0 0; } to { background-position: -111px 0; } } @-webkit-keyframes ripple { 70% { box-shadow: 0 0 0 40px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes ripple { 70% { box-shadow: 0 0 0 40px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes up-down { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes jackInTheBox { from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } to { opacity: 1; transform: scale(1); } } .jackInTheBox { animation-name: jackInTheBox; } .animated { animation-duration: 1s; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @keyframes animationFramesOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg); transform: translate(73px, -1px) rotate(36deg); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg); transform: translate(141px, 72px) rotate(72deg); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg); transform: translate(83px, 122px) rotate(108deg); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg); transform: translate(-40px, 72px) rotate(144deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } } @-webkit-keyframes animationFramesOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); } } @keyframes animationFramesTwo { 0% { transform: translate(0, 0) rotate(0); } 21% { transform: translate(40px, 50px) rotate(35deg); } 41% { transform: translate(-20px, -75px) rotate(48deg); } 60% { transform: translate(25px, 48px) rotate(125deg); } 80% { transform: translate(16px, -15px) rotate(180deg); } 100% { transform: translate(0, 0) rotate(0); } } @-webkit-keyframes animationFramesTwo { 0% { -webkit-transform: translate(0, 0) rotate(0); } 21% { -webkit-transform: translate(40px, 5px) rotate(35deg); } 41% { -webkit-transform: translate(-20px, -75px) rotate(48deg); } 60% { -webkit-transform: translate(25px, 48px) rotate(125deg); } 80% { -webkit-transform: translate(16px, -15px) rotate(180deg); } 100% { -webkit-transform: translate(0, 0) rotate(0); } } @keyframes animationFramesThree { 0% { transform: translate(0, 0) rotate(0); } 21% { transform: translate(4px, 10px) rotate(360deg); } 41% { transform: translate(25px, 40px) rotate(360deg); } 60% { transform: translate(35px, 22px) rotate(360deg); } 80% { transform: translate(17px, 46px) rotate(360deg); } 100% { transform: translate(0, 0) rotate(0); } } @-webkit-keyframes animationFramesThree { 0% { -webkit-transform: translate(0, 0) rotate(0); } 21% { -webkit-transform: translate(4px, -20px) rotate(360deg); } 41% { -webkit-transform: translate(-50px, -80px) rotate(360deg); } 60% { -webkit-transform: translate(-75px, -35px) rotate(360deg); } 80% { -webkit-transform: translate(-20px, 20px) rotate(360deg); } 100% { -webkit-transform: translate(0, 0) rotate(0); } } @-webkit-keyframes movebounce { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes movebounce { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes rotateme { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotateme { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } /*--move-forever--*/ @keyframes move-forever { 0% { transform: translate(-90px, 0%); } 100% { transform: translate(85px, 0%); } } @-webkit-keyframes ripple { 0% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.75); transform: scale(1.75); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes ripple { 0% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.75); transform: scale(1.75); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @-webkit-keyframes border-transform { 0%, to { border-radius: 63% 37% 54% 46%/55% 48% 52% 45% } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51% } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51% } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39% } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30% } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44% } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65% } } @keyframes border-transform { 0%, to { border-radius: 63% 37% 54% 46%/55% 48% 52% 45% } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51% } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51% } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39% } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30% } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44% } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65% } } .team-slider{ .slick-prev, .slick-next{ background: #fff; height: 60px; width: 60px; box-shadow:$box-shadow; &:before{ font-size: 36px; line-height: 1.6; color: $themecolor; } &:hover, &:focus{ opacity: 1; background:$themecolor; color: $white; &:before{ color:$white; } } } .slick-prev{left:-15px;} .slick-next{right:-15px;} } @media(max-width: 767px){ .team-slider { .slick-prev, .slick-next{display:none!important;} } } // /*---------- ANIMATION ----------*/ @-webkit-keyframes kbrns_zoomOutIn { 0% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes kbrns_zoomOutIn { 0% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } } @-ms-keyframes kbrns_zoomOutIn { 0% { -ms-transform: scale(1.3); } 100% { -ms-transform: scale(1); } } @-o-keyframes kbrns_zoomOutIn { 0% { -o-transform: scale(1.3); } 100% { -o-transform: scale(1); } } @keyframes kbrns_zoomOutIn { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }