/*----------------------------------------------------------------------------------- Template Name: Smash - Bootstrap Template Template URI: uideck.com Author: UIdeck Version: 1.0 ----------------------------------------------------------------------------------- CSS INDEX =================== 01. Theme default CSS 02. Header 03. Hero 04. Footer -----------------------------------------------------------------------------------*/ /*=========================== 01.COMMON css ===========================*/ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800"); body { font-family: "Poppins", sans-serif; font-weight: normal; font-style: normal; color: #203b43; background-color: #fcfefc;} * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; } a:focus, input:focus, textarea:focus, button:focus { text-decoration: none; outline: none; } .nav-tabs .nav-link:focus { outline: none; box-shadow: none; border-color: transparent; } .nav-tabs .nav-link.active:focus, .nav-tabs .nav-item.show .nav-link:focus { border-color: #dee2e6 #dee2e6 #fff; } a:focus, a:hover { text-decoration: none; } i, span, a { display: inline-block; } h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; font-weight: 600; color: #203b43; margin: 0px; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 22px; line-height: 27px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ul, ol { margin: 0px; padding: 0px; list-style-type: none; } p { font-size: 16px; font-weight: 400; line-height: 24px; color: #203b43; margin: 0px; } .bg_cover { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } a, .btn-link {color: #27CC55;} a:hover, .btn-link:hover {color: #2dce89;} /*===== All Slick Slide Outline Style =====*/ .slick-slide { outline: 0; } /*===== All Section Title Style =====*/ .section-title .title { font-size: 44px; font-weight: 600; color: #203b43; line-height: 55px; } @media (max-width: 767px) { .section-title .title { font-size: 30px; line-height: 35px; } } .section-title .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 24px; margin-bottom: 24px;} /*===== All Preloader Style =====*/ .preloader { /* Body Overlay */ position: fixed; top: 0; left: 0; display: table; height: 100%; width: 100%; /* Change Background Color */ background: #fff; z-index: 99999; } .preloader .loader { display: table-cell; vertical-align: middle; text-align: center; } .preloader .loader .ytp-spinner { position: absolute; left: 50%; top: 50%; width: 64px; margin-left: -32px; z-index: 18; pointer-events: none; } .preloader .loader .ytp-spinner .ytp-spinner-container { pointer-events: none; position: absolute; width: 100%; padding-bottom: 100%; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; -webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; animation: ytp-spinner-linspin 1568.23529647ms linear infinite; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator { position: absolute; width: 100%; height: 100%; -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; right: 50%; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right { position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden; left: 50%; } .preloader .loader .ytp-spinner-circle { box-sizing: border-box; position: absolute; width: 200%; height: 100%; border-style: solid; /* Spinner Color */ border-color: #27CC55 #27CC55 #e9ecef; border-radius: 50%; border-width: 6px; } .preloader .loader .ytp-spinner-left .ytp-spinner-circle { left: 0; right: -100%; border-right-color: #e9ecef; -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner-right .ytp-spinner-circle { left: -100%; right: 0; border-left-color: #e9ecef; -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } /* Preloader Animations */ @-webkit-keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); } } @keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); } } @-webkit-keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } } @keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } } @-webkit-keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } } @keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } } /*=========================== 11.BUTTON css ===========================*/ .buttons-title .title { font-size: 36px; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .buttons-title .title { font-size: 24px; line-height: 35px; } } .main-btn { display: inline-block; font-weight: 700; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 2px solid transparent; padding: 0 20px; font-size: 16px; line-height: 46px; color: #27CC55; cursor: pointer; z-index: 5; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; position: relative; } @media (max-width: 767px) { .main-btn { font-size: 14px; padding: 0 20px; line-height: 40px; } } /*===== standard Buttons =====*/ .standard-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .standard-buttons ul li { margin-left: 0; } } .standard-buttons ul li:first-child { margin-left: 0; } .standard-buttons .standard-one { border-color: #27CC55; } .standard-buttons .standard-one:hover { color: #27CC55; background-color: rgba(0, 103, 244, 0.4); } .standard-buttons .standard-two { color: #fff; background-color: #27CC55; border-color: #27CC55; } .standard-buttons .standard-two:hover { color: #27CC55; background-color: transparent; } .standard-buttons .standard-three { overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); border: 0; line-height: 52px; background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .standard-buttons .standard-three { line-height: 44px; } } @media (max-width: 767px) { .standard-buttons .standard-three { line-height: 44px; } } .standard-buttons .standard-three:hover { background-position: right center; } .standard-buttons .standard-four { border-color: #27CC55; padding-left: 60px; } @media (max-width: 767px) { .standard-buttons .standard-four { padding-left: 40px; } } .standard-buttons .standard-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-four span { left: 15px; } } .standard-buttons .standard-four:hover { color: #27CC55; background-color: rgba(0, 103, 244, 0.4); } .standard-buttons .standard-four:hover i { animation: iconTranslateY 0.5s forwards; } .standard-buttons .standard-five { color: #fff; background-color: #27CC55; border-color: #27CC55; padding-left: 60px; } @media (max-width: 767px) { .standard-buttons .standard-five { padding-left: 40px; } } .standard-buttons .standard-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-five span { left: 15px; } } .standard-buttons .standard-five:hover { color: #27CC55; background-color: transparent; } .standard-buttons .standard-five:hover i { animation: iconTranslateY 0.5s forwards; } .standard-buttons .standard-six { padding-right: 60px; overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); border: 0; line-height: 52px; background-size: 200% auto; } @media (max-width: 767px) { .standard-buttons .standard-six { padding-right: 40px; line-height: 44px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .standard-buttons .standard-six { line-height: 44px; } } .standard-buttons .standard-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-six span { right: 15px; } } .standard-buttons .standard-six:hover { background-position: right center; } .standard-buttons .standard-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Light Rounded Buttons =====*/ .light-rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .light-rounded-buttons ul li { margin-left: 0; } } .light-rounded-buttons ul li:first-child { margin-left: 0; } .light-rounded-buttons .main-btn { border-radius: 5px; } .light-rounded-buttons .light-rounded-one { border-color: #27CC55; } .light-rounded-buttons .light-rounded-one:hover { color: #27CC55; background-color: rgba(0, 103, 244, 0.4); } .light-rounded-buttons .light-rounded-two { color: #fff; background-color: #27CC55; border-color: #27CC55; } .light-rounded-buttons .light-rounded-two:hover { color: #27CC55; background-color: transparent; } .light-rounded-buttons .light-rounded-three { overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; line-height: 52px; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .light-rounded-buttons .light-rounded-three { line-height: 44px; } } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-three { line-height: 44px; } } .light-rounded-buttons .light-rounded-three:hover { background-position: right center; } .light-rounded-buttons .light-rounded-four { border-color: #27CC55; padding-left: 60px; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-four { padding-left: 40px; } } .light-rounded-buttons .light-rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-four span { left: 15px; } } .light-rounded-buttons .light-rounded-four:hover { color: #27CC55; background-color: rgba(0, 103, 244, 0.4); } .light-rounded-buttons .light-rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .light-rounded-buttons .light-rounded-five { color: #fff; background-color: #27CC55; border-color: #27CC55; padding-left: 60px; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-five { padding-left: 40px; } } .light-rounded-buttons .light-rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-five span { left: 15px; } } .light-rounded-buttons .light-rounded-five:hover { color: #27CC55; background-color: transparent; } .light-rounded-buttons .light-rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .light-rounded-buttons .light-rounded-six { padding-right: 60px; overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; line-height: 52px; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .light-rounded-buttons .light-rounded-six { line-height: 44px; } } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-six { padding-right: 40px; line-height: 44px; } } .light-rounded-buttons .light-rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-six span { right: 15px; } } .light-rounded-buttons .light-rounded-six:hover { background-position: right center; } .light-rounded-buttons .light-rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Semi Rounded Buttons =====*/ .semi-rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .semi-rounded-buttons ul li { margin-left: 0; } } .semi-rounded-buttons ul li:first-child { margin-left: 0; } .semi-rounded-buttons .main-btn { border-radius: 10px; } .semi-rounded-buttons .semi-rounded-one { border-color: #27CC55; } .semi-rounded-buttons .semi-rounded-one:hover { color: #27CC55; background-color: rgba(0, 103, 244, 0.4); } .semi-rounded-buttons .semi-rounded-two { color: #fff; background-color: #27CC55; border-color: #27CC55; } .semi-rounded-buttons .semi-rounded-two:hover { color: #27CC55; background-color: transparent; } .semi-rounded-buttons .semi-rounded-three { overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; border: 0; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .semi-rounded-buttons .semi-rounded-three { line-height: 44px; } } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-three { line-height: 44px; } } .semi-rounded-buttons .semi-rounded-three:hover { background-position: right center; } .semi-rounded-buttons .semi-rounded-four { border-color: #27CC55; padding-left: 60px; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-four { padding-left: 40px; } } .semi-rounded-buttons .semi-rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-four span { left: 15px; } } .semi-rounded-buttons .semi-rounded-four:hover { color: #27CC55; background-color: rgba(0, 103, 244, 0.4); } .semi-rounded-buttons .semi-rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .semi-rounded-buttons .semi-rounded-five { color: #fff; background-color: #27CC55; border-color: #27CC55; padding-left: 60px; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-five { padding-left: 40px; } } .semi-rounded-buttons .semi-rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-five span { left: 15px; } } .semi-rounded-buttons .semi-rounded-five:hover { color: #27CC55; background-color: transparent; } .semi-rounded-buttons .semi-rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .semi-rounded-buttons .semi-rounded-six { padding-right: 60px; overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; border: 0; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .semi-rounded-buttons .semi-rounded-six { line-height: 44px; } } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-six { padding-right: 40px; line-height: 44px; } } .semi-rounded-buttons .semi-rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-six span { right: 15px; } } .semi-rounded-buttons .semi-rounded-six:hover { background-position: right center; } .semi-rounded-buttons .semi-rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Rounded Buttons =====*/ .rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .rounded-buttons ul li { margin-left: 0; } } .rounded-buttons ul li:first-child { margin-left: 0; } .rounded-buttons .main-btn { border-radius: 50px; } .rounded-buttons .rounded-one { border-color: #27CC55; } .rounded-buttons .rounded-one:hover { color: #27CC55; background-color: rgba(0, 103, 244, 0.4); } .rounded-buttons .rounded-two { color: #27cc55; background-color: #fff; border-color: #27CC55; margin-bottom: 7px;} .rounded-buttons .rounded-two:hover { color: #147730; background-color: #fff; } .rounded-buttons .rounded-three { overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; color: #fff; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .rounded-buttons .rounded-three { line-height: 44px; } } @media (max-width: 767px) { .rounded-buttons .rounded-three { line-height: 44px; } } .rounded-buttons .rounded-three:hover { background-position: right center; } .rounded-buttons .rounded-four { border-color: #27CC55; padding-left: 60px; } @media (max-width: 767px) { .rounded-buttons .rounded-four { padding-left: 40px; } } .rounded-buttons .rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-four span { left: 15px; } } .rounded-buttons .rounded-four:hover { color: #27CC55; background-color: rgba(0, 103, 244, 0.4); } .rounded-buttons .rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .rounded-buttons .rounded-five { color: #fff; background-color: #27CC55; border-color: #27CC55; padding-left: 60px; } @media (max-width: 767px) { .rounded-buttons .rounded-five { padding-left: 40px; } } .rounded-buttons .rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-five span { left: 15px; } } .rounded-buttons .rounded-five:hover { color: #27CC55; background-color: transparent; } .rounded-buttons .rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .rounded-buttons .rounded-six { padding-right: 60px; overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; color: #fff; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .rounded-buttons .rounded-six { line-height: 44px; } } @media (max-width: 767px) { .rounded-buttons .rounded-six { padding-right: 40px; line-height: 44px; } } .rounded-buttons .rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-six span { right: 15px; } } .rounded-buttons .rounded-six:hover { background-position: right center; } .rounded-buttons .rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Success Buttons =====*/ .success-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .success-buttons ul li { margin-left: 0; } } .success-buttons ul li:first-child { margin-left: 0; } .success-buttons .success-one { border-color: #4da422; color: #4da422; } .success-buttons .success-one:hover { color: #4da422; background-color: rgba(77, 164, 34, 0.4); } .success-buttons .success-two { color: #fff; background-color: #4da422; border-color: #4da422; } .success-buttons .success-two:hover { color: #4da422; background-color: transparent; } .success-buttons .success-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .success-buttons .success-three { line-height: 44px; } } @media (max-width: 767px) { .success-buttons .success-three { line-height: 44px; } } .success-buttons .success-three:hover { background-position: right center; } .success-buttons .success-four { padding-left: 60px; border-color: #4da422; color: #4da422; } @media (max-width: 767px) { .success-buttons .success-four { padding-left: 40px; } } .success-buttons .success-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-four span { left: 15px; } } .success-buttons .success-four:hover { color: #4da422; background-color: rgba(77, 164, 34, 0.4); } .success-buttons .success-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .success-buttons .success-five { padding-left: 60px; color: #fff; background-color: #4da422; border-color: #4da422; } @media (max-width: 767px) { .success-buttons .success-five { padding-left: 40px; } } .success-buttons .success-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-five span { left: 15px; } } .success-buttons .success-five:hover { color: #4da422; background-color: transparent; } .success-buttons .success-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .success-buttons .success-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: -o-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .success-buttons .success-six { line-height: 44px; } } @media (max-width: 767px) { .success-buttons .success-six { padding-right: 40px; line-height: 44px; } } .success-buttons .success-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-six span { right: 15px; } } .success-buttons .success-six:hover { background-position: right center; } .success-buttons .success-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Warning Buttons =====*/ .warning-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .warning-buttons ul li { margin-left: 0; } } .warning-buttons ul li:first-child { margin-left: 0; } .warning-buttons .warning-one { border-color: #ffb400; color: #ffb400; } .warning-buttons .warning-one:hover { color: #ffb400; background-color: rgba(255, 180, 0, 0.4); } .warning-buttons .warning-two { color: #fff; background-color: #ffb400; border-color: #ffb400; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-two { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-two { padding-right: 40px; line-height: 44px; } } .warning-buttons .warning-two:hover { color: #ffb400; background-color: transparent; } .warning-buttons .warning-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-three { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-three { line-height: 44px; } } .warning-buttons .warning-three:hover { background-position: right center; } .warning-buttons .warning-four { padding-left: 60px; border-color: #ffb400; color: #ffb400; } @media (max-width: 767px) { .warning-buttons .warning-four { padding-left: 40px; } } .warning-buttons .warning-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-four span { left: 15px; } } .warning-buttons .warning-four:hover { color: #ffb400; background-color: rgba(255, 180, 0, 0.4); } .warning-buttons .warning-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .warning-buttons .warning-five { padding-left: 60px; color: #fff; background-color: #ffb400; border-color: #ffb400; } @media (max-width: 767px) { .warning-buttons .warning-five { padding-left: 40px; } } .warning-buttons .warning-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-five span { left: 15px; } } .warning-buttons .warning-five:hover { color: #ffb400; background-color: transparent; } .warning-buttons .warning-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .warning-buttons .warning-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-six { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-six { padding-right: 40px; line-height: 44px; } } .warning-buttons .warning-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-six span { right: 15px; } } .warning-buttons .warning-six:hover { background-position: right center; } .warning-buttons .warning-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Info Buttons =====*/ .info-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .info-buttons ul li { margin-left: 0; } } .info-buttons ul li:first-child { margin-left: 0; } .info-buttons .info-one { border-color: #00b8d8; color: #00b8d8; } .info-buttons .info-one:hover { color: #00b8d8; background-color: rgba(0, 184, 216, 0.4); } .info-buttons .info-two { color: #fff; background-color: #00b8d8; border-color: #00b8d8; } .info-buttons .info-two:hover { color: #00b8d8; background-color: transparent; } .info-buttons .info-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .info-buttons .info-three { line-height: 44px; } } @media (max-width: 767px) { .info-buttons .info-three { line-height: 44px; } } .info-buttons .info-three:hover { background-position: right center; } .info-buttons .info-four { padding-left: 60px; border-color: #00b8d8; color: #00b8d8; } @media (max-width: 767px) { .info-buttons .info-four { padding-left: 40px; } } .info-buttons .info-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-four span { left: 15px; } } .info-buttons .info-four:hover { color: #00b8d8; background-color: rgba(0, 184, 216, 0.4); } .info-buttons .info-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .info-buttons .info-five { padding-left: 60px; color: #fff; background-color: #00b8d8; border-color: #00b8d8; } @media (max-width: 767px) { .info-buttons .info-five { padding-left: 40px; } } .info-buttons .info-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-five span { left: 15px; } } .info-buttons .info-five:hover { color: #00b8d8; background-color: transparent; } .info-buttons .info-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .info-buttons .info-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .info-buttons .info-six { line-height: 44px; } } @media (max-width: 767px) { .info-buttons .info-six { padding-right: 40px; line-height: 44px; } } .info-buttons .info-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-six span { right: 15px; } } .info-buttons .info-six:hover { background-position: right center; } .info-buttons .info-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Danger Buttons =====*/ .danger-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .danger-buttons ul li { margin-left: 0; } } .danger-buttons ul li:first-child { margin-left: 0; } .danger-buttons .danger-one { border-color: #fc3832; color: #fc3832; } .danger-buttons .danger-one:hover { color: #fc3832; background-color: rgba(252, 56, 50, 0.4); } .danger-buttons .danger-two { color: #fff; background-color: #fc3832; border-color: #fc3832; } .danger-buttons .danger-two:hover { color: #fc3832; background-color: transparent; } .danger-buttons .danger-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .danger-buttons .danger-three { line-height: 44px; } } @media (max-width: 767px) { .danger-buttons .danger-three { line-height: 44px; } } .danger-buttons .danger-three:hover { background-position: right center; } .danger-buttons .danger-four { padding-left: 60px; border-color: #fc3832; color: #fc3832; } @media (max-width: 767px) { .danger-buttons .danger-four { padding-left: 40px; } } .danger-buttons .danger-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-four span { left: 15px; } } .danger-buttons .danger-four:hover { color: #fc3832; background-color: rgba(252, 56, 50, 0.4); } .danger-buttons .danger-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .danger-buttons .danger-five { padding-left: 60px; color: #fff; background-color: #fc3832; border-color: #fc3832; } @media (max-width: 767px) { .danger-buttons .danger-five { padding-left: 40px; } } .danger-buttons .danger-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-five span { left: 15px; } } .danger-buttons .danger-five:hover { color: #fc3832; background-color: transparent; } .danger-buttons .danger-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .danger-buttons .danger-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .danger-buttons .danger-six { line-height: 44px; } } @media (max-width: 767px) { .danger-buttons .danger-six { padding-right: 40px; line-height: 44px; } } .danger-buttons .danger-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-six span { right: 15px; } } .danger-buttons .danger-six:hover { background-position: right center; } .danger-buttons .danger-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } @-webkit-keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @-moz-keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } .lg-btn { line-height: 64px !important; font-size: 18px; } @media (max-width: 767px) { .lg-btn { font-size: 16px; ine-height: 52px; } } .el-btn { line-height: 80px !important; font-size: 20px; } @media (max-width: 767px) { .el-btn { font-size: 18px; line-height: 74px; } } .sm-btn { line-height: 40px !important; font-size: 12px; } /*===== Regular Icon Buttons =====*/ .regular-icon-buttons ul li { display: inline-block; margin-left: 10px; margin-top: 20px; } .regular-icon-buttons ul li:first-child { margin-left: 0; } .regular-icon-buttons ul li .regular-icon-light-one { width: 40px; height: 40px; line-height: 36px; border: 2px solid #27CC55; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-one:hover { color: #fff; background-color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-two { width: 40px; height: 40px; line-height: 36px; border: 2px solid #27CC55; text-align: center; font-size: 24px; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-two:hover { color: #fff; background-color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-three { width: 40px; height: 40px; line-height: 36px; border: 2px solid #27CC55; text-align: center; font-size: 24px; border-radius: 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-three:hover { color: #fff; background-color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-four { width: 40px; height: 40px; line-height: 36px; border: 2px solid #27CC55; text-align: center; font-size: 24px; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; } .regular-icon-buttons ul li .regular-icon-light-four:hover { color: #fff; background-color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-five { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; } .regular-icon-buttons ul li .regular-icon-light-five:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-six { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; border-radius: 5px; } .regular-icon-buttons ul li .regular-icon-light-six:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-seven { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; border-radius: 10px; } .regular-icon-buttons ul li .regular-icon-light-seven:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-eight { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; border-radius: 50%; } .regular-icon-buttons ul li .regular-icon-light-eight:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-nine { width: 40px; height: 40px; line-height: 36px; border: 2px solid #27CC55; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-nine:hover { color: #27CC55; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-ten { width: 40px; height: 40px; line-height: 36px; border: 2px solid #27CC55; text-align: center; font-size: 24px; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-ten:hover { color: #27CC55; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-eleven { width: 40px; height: 40px; line-height: 36px; border: 2px solid #27CC55; text-align: center; font-size: 24px; border-radius: 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-eleven:hover { color: #27CC55; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-twelve { width: 40px; height: 40px; line-height: 36px; border: 2px solid #27CC55; text-align: center; font-size: 24px; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #27CC55; } .regular-icon-buttons ul li .regular-icon-light-twelve:hover { color: #27CC55; background-color: transparent; } /*===== Group Buttons =====*/ .group-buttons .btn-group { margin-left: 30px; } .group-buttons .group-one { margin-left: 0; } .group-buttons .group-one .main-btn { background: none; border: 2px solid #27CC55; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .group-buttons .group-one .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-one .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-one .main-btn:hover { background-color: #27CC55; color: #fff; } .group-buttons .group-two .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(#27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(#27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(#27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: auto 200%; border-top: 0; border-bottom: 0; border-color: rgba(244, 246, 247, 0.2); } .group-buttons .group-two .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-two .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-two .main-btn:hover { background-position: bottom center; } .group-buttons .group-three .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; border: 0; } .group-buttons .group-three .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-three .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-three .main-btn:hover { background-position: right center; } .group-buttons .group-four { margin-left: 0; } .group-buttons .group-four .main-btn { background: none; border: 2px solid #27CC55; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; padding: 0 12px; } .group-buttons .group-four .main-btn i { font-size: 24px; } .group-buttons .group-four .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-four .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-four .main-btn:hover { background-color: #27CC55; color: #fff; } .group-buttons .group-five .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(#27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(#27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(#27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: auto 200%; border-top: 0; border-bottom: 0; border-color: rgba(244, 246, 247, 0.2); padding: 0 16px; } .group-buttons .group-five .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-five .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-five .main-btn:hover { background-position: bottom center; } .group-buttons .group-six .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 50%, #27CC55 100%); background-size: 200% auto; border: 0; padding: 0 16px; } .group-buttons .group-six .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-six .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-six .main-btn:hover { background-position: right center; } /*=========================== 06.FORM ELEMENTS css ===========================*/ .form-elements-title { font-size: 36px; font-weight: 600; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .form-elements-title { font-size: 24px; line-height: 35px; } } .form-group { margin-bottom: 0; } .form-input .help-block { margin-top: 2px; } .form-input .help-block .list-unstyled li { font-size: 12px; line-height: 16px; color: #fc3832; } .form-input label { font-size: 12px; line-height: 18px; color: #6c6c6c; margin-bottom: 8px; display: inline-block; } .form-input .input-items { position: relative; } .form-input .input-items input, .form-input .input-items textarea { width: 100%; height: 44px; border: 2px solid; padding-left: 44px; padding-right: 12px; position: relative; font-size: 16px; } .form-input .input-items textarea { padding-top: 8px; height: 130px; resize: none; } .form-input .input-items i { position: absolute; top: 11px; left: 13px; font-size: 20px; z-index: 9; } .form-input .input-items.default input, .form-input .input-items.default textarea { border-color: #a4a4a4; color: #6c6c6c; } .form-input .input-items.default input:focus, .form-input .input-items.default textarea:focus { border-color: #27CC55; } .form-input .input-items.default input::placeholder, .form-input .input-items.default textarea::placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-moz-placeholder, .form-input .input-items.default textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-moz-placeholder, .form-input .input-items.default textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-webkit-input-placeholder, .form-input .input-items.default textarea::-webkit-input-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default i { color: #6c6c6c; } .form-input .input-items.active input, .form-input .input-items.active textarea { border-color: #27CC55; color: #203b43; } .form-input .input-items.active input::placeholder, .form-input .input-items.active textarea::placeholder { color: #203b43; opacity: 1; } .form-input .input-items.active input::-moz-placeholder, .form-input .input-items.active textarea::-moz-placeholder { color: #203b43; opacity: 1; } .form-input .input-items.active input::-moz-placeholder, .form-input .input-items.active textarea::-moz-placeholder { color: #203b43; opacity: 1; } .form-input .input-items.active input::-webkit-input-placeholder, .form-input .input-items.active textarea::-webkit-input-placeholder { color: #203b43; opacity: 1; } .form-input .input-items.active i { color: #27CC55; } .form-input .input-items.error input, .form-input .input-items.error textarea { border-color: #fc3832; color: #fc3832; } .form-input .input-items.error input::placeholder, .form-input .input-items.error textarea::placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-moz-placeholder, .form-input .input-items.error textarea::-moz-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-moz-placeholder, .form-input .input-items.error textarea::-moz-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-webkit-input-placeholder, .form-input .input-items.error textarea::-webkit-input-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error i { color: #fc3832; } .form-input .input-items.success input, .form-input .input-items.success textarea { border-color: #4da422; color: #4da422; } .form-input .input-items.success input::placeholder, .form-input .input-items.success textarea::placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-moz-placeholder, .form-input .input-items.success textarea::-moz-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-moz-placeholder, .form-input .input-items.success textarea::-moz-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-webkit-input-placeholder, .form-input .input-items.success textarea::-webkit-input-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success i { color: #4da422; } .form-input .input-items.disabled input, .form-input .input-items.disabled textarea { border-color: #a4a4a4; color: #6c6c6c; background: none; } .form-input .input-items.disabled input::placeholder, .form-input .input-items.disabled textarea::placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-moz-placeholder, .form-input .input-items.disabled textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-moz-placeholder, .form-input .input-items.disabled textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-webkit-input-placeholder, .form-input .input-items.disabled textarea::-webkit-input-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled i { color: #6c6c6c; } .form-style-two .form-input .input-items input, .form-style-two .form-input .input-items textarea { border-radius: 5px; padding-left: 12px; padding-right: 44px; } .form-style-two .form-input .input-items i { left: auto; right: 13px; } .form-style-three .form-input { text-align: center; } .form-style-three .form-input .input-items input, .form-style-three .form-input .input-items textarea { border-radius: 50px; text-align: center; } .form-style-four .form-input label { padding-left: 44px; margin-bottom: 0; } .form-style-four .form-input .input-items input, .form-style-four .form-input .input-items textarea { border-top: 0; border-left: 0; border-right: 0; } .form-style-five .form-input { position: relative; } .form-style-five .form-input label { position: absolute; top: -10px; left: 10px; background-color: #fff; z-index: 5; padding: 0 5px; } .form-style-five .form-input .input-items input, .form-style-five .form-input .input-items textarea { border-radius: 5px; } /*=========================== 09.NAVBAR css ===========================*/ .navbar-area { position: absolute; top: 0; left: 0; width: 100%; padding: 10px 0; z-index: 99; } .navbar-area .navbar { position: relative; padding: 0; } .navbar-area .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #fff; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-collapse { position: absolute; top: 115%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 0; -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } } @media (max-width: 767px) { .navbar-area .navbar .navbar-collapse { position: absolute; top: 115%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 0; -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } } .navbar-area .navbar .navbar-nav .nav-item { margin: 0 16px; position: relative; } .navbar-area .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 26px 0; color: #fff; text-transform: uppercase; position: relative; /*opacity: 0.8;*/ -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; color: #203b43; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; color: #203b43; } } .navbar-area .navbar .navbar-nav .nav-item a::before { position: absolute; content: ''; width: 32px; height: 4px; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, white 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, white 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, white 100%); left: 50%; margin: 0 2px; bottom: 14px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translate(-50%) scaleX(0); -moz-transform: translate(-50%) scaleX(0); -ms-transform: translate(-50%) scaleX(0); -o-transform: translate(-50%) scaleX(0); transform: translate(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item a::before { display: none; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item a::before { display: none; } } .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a { opacity: 1; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a { color: #203b43; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a { color: #203b43; } } .navbar-area .navbar .navbar-nav .nav-item.active > a::before, .navbar-area .navbar .navbar-nav .nav-item:hover > a::before { -webkit-transform: translate(-50%) scaleX(1); -moz-transform: translate(-50%) scaleX(1); -ms-transform: translate(-50%) scaleX(1); -o-transform: translate(-50%) scaleX(1); transform: translate(-50%) scaleX(1); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } .navbar-area .navbar .navbar-btn li { display: inline-block; margin-right: 5px; } .navbar-area .navbar .navbar-btn li a { padding: 10px 16px; font-size: 16px; /*text-transform: uppercase;*/ font-weight: 700; color: #fff; border: 2px solid; border-radius: 4px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area .navbar .navbar-btn li a.light { border-color: #fff; } .navbar-area .navbar .navbar-btn li a.light:hover { background-color: rgba(255, 255, 255, 0.4); } .navbar-area .navbar .navbar-btn li a.solid { background-color: transparent; border-color: #fff; color: #fff; } .navbar-area .navbar .navbar-btn li a.solid:hover { background-color: #fcfefc; color: #27CC55; } .navbar-area.sticky { background-color: #fff; z-index: 999; position: fixed; -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } .navbar-area.sticky .navbar .navbar-toggler .toggler-icon { background-color: #203b43; } .navbar-area.sticky .navbar .navbar-nav .nav-item a { color: #203b43; /*opacity: 0.7;*/ } .navbar-area.sticky .navbar .navbar-nav .nav-item a::before { background: -webkit-linear-gradient(left, rgba(18, 18, 18, 0) 0%, #203b43 100%); background: -o-linear-gradient(left, rgba(18, 18, 18, 0) 0%, #203b43 100%); background: linear-gradient(to right, rgba(18, 18, 18, 0) 0%, #203b43 100%); } .navbar-area.sticky .navbar .navbar-nav .nav-item.active, .navbar-area.sticky .navbar .navbar-nav .nav-item:hover { color: #203b43; opacity: 1; } .navbar-area.sticky .navbar .navbar-btn li a.light { border-color: #27CC55; color: #27CC55; } .navbar-area.sticky .navbar .navbar-btn li a.solid { border-color: #5f8188; /*background-color: #27CC55;*/ color: #5f8188; } /*=========================== 10.SLIDER css ===========================*/ .carousel-item { /*background-image: linear-gradient(120deg, #fcfefc 0%, #fff 100%);*/ /*background-color: #27CC55;*/ position: relative; } /*.carousel-item::before { position: absolute; content: ''; width: 33%; height: 100%; background: -webkit-linear-gradient(rgb(1, 116, 87) 0%, rgb(79, 165, 152) 100%); background: -o-linear-gradient(rgb(1, 116, 87) 0%, rgb(79, 165, 152) 100%); background: linear-gradient(rgb(1, 116, 87) 0%, rgb(79, 165, 152) 100%); top: 0; right: 15%; -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); -ms-transform: skewX(20deg); -o-transform: skewX(20deg); transform: skewX(20deg); }*/ @media only screen and (min-width: 992px) and (max-width: 1199px) { .carousel-item::before { width: 40%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-item::before { width: 60%; } } @media (max-width: 767px) { .carousel-item::before { width: 50%; right: 45%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .carousel-item::before { right: 25%; } } .carousel-item .slider-image-box { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 9; } .carousel-item .slider-image-box .slider-image { max-width: 680px; width: 100%; position: absolute; top: 60px;} .slider-content { position: relative; z-index: 9; padding-top: 260px; padding-bottom: 130px; } @media (max-width: 767px) { .slider-content { padding-top: 190px; padding-bottom: 150px; } } .slider-content .title { font-size: 57px; line-height: 65px; color: #203b43; font-weight: 700; margin-bottom: 28px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-content .title { font-size: 58px; line-height: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-content .title { font-size: 72px; line-height: 90px; } } @media (max-width: 767px) { .slider-content .title { font-size: 34px; line-height: 45px; } } .slider-content .text { color: #fff; font-size: 16px; line-height: 24px; margin-top: 16px; } .slider-content .slider-btn { padding-top: 16px; } .slider-content .slider-btn li { display: inline-block; margin: 16px 8px 0; } @media (max-width: 767px) { .slider-content .slider-btn li { margin: 16px 3px 0; } } .slider-content .slider-btn li a.rounded-one { background-color: #fff; border-color: #fff; } .slider-content .slider-btn li a.rounded-one:hover { background-color: transparent; color: #fff; } .slider-content .slider-btn li a.rounded-two { border-color: #27cc55; background-color: #fff } .slider-content .slider-btn li a.rounded-two:hover { background-color: #fff; color: #147730; } .carousel-indicators { margin-bottom: 50px; } .carousel-indicators li { display: block; width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50px; border: 0; margin: 0px 2px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-indicators li { width: 13px; height: 13px; } } @media (max-width: 767px) { .carousel-indicators li { width: 13px; height: 13px; } } .carousel-indicators li.active { background-color: #fff; width: 16px; border-radius: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-indicators li.active { width: 23px; } } @media (max-width: 767px) { .carousel-indicators li.active { width: 23px; } } .carousel .carousel-control-prev, .carousel .carousel-control-next { top: 50%; font-size: 32px; color: #fff; bottom: auto; left: 60px; right: auto; opacity: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 99; width: 48px; height: 48px; line-height: 48px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .carousel .carousel-control-prev, .carousel .carousel-control-next { left: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel .carousel-control-prev, .carousel .carousel-control-next { display: none; } } @media (max-width: 767px) { .carousel .carousel-control-prev, .carousel .carousel-control-next { display: none; } } .carousel .carousel-control-next { right: 60px; left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .carousel .carousel-control-next { right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel .carousel-control-next { right: 30px; } } @media (max-width: 767px) { .carousel .carousel-control-next { right: 30px; } } /*=========================== 17.FEATURES css ===========================*/ /*===== features TWO =====*/ .features-area { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 130px; } .single-features { padding: 0px 20px 35px; } .single-features .features-title { font-size: 25px; line-height: 32px; } .single-features .features-title-icon .features-title a { font-size: 36px; line-height: 45px; color: #203b43; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; font-weight: 400; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-features .features-title-icon .features-title a { font-size: 24px; line-height: 35px; } } @media (max-width: 767px) { .single-features .features-title-icon .features-title a { font-size: 24px; line-height: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-features .features-title-icon .features-title a { font-size: 36px; line-height: 45px; } } .single-features .features-title-icon .features-title a:hover { color: #27CC55; } .single-features .features-title-icon .features-icon { position: relative; display: inline-block; } .single-features .features-title-icon .features-icon i { font-size: 88px; line-height: 70px; color: #27CC55; position: relative; z-index: 5; } .single-features .features-title-icon .features-icon .shape { position: absolute; top: 0; left: 0; } .single-features .features-content .text { font-size: 14px; line-height: 20px; color: #203b43; margin-top: 16px; } .single-features .features-content .features-btn { color: #27CC55; font-size: 16px; font-weight: 700; margin-top: 29px; } /*=========================== 18.PORTFOLIO css ===========================*/ .portfolio-area { padding-top: 120px; } .portfolio-menu ul li, .portfolio-menu-a a { font-size: 16px; font-weight: 700; color: #6c6c6c; line-height: 48px; padding: 0 30px; position: relative; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; width: 100%; border-radius: 50px; overflow: hidden; margin-top: 4px; text-transform: uppercase; } .portfolio-menu ul li:last-child { margin-right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-menu ul li { font-size: 14px; padding: 0 26px; } } @media (max-width: 767px) { .portfolio-menu ul li { font-size: 14px; padding: 0 22px; line-height: 42px; } } .portfolio-menu ul li::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 100%); z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .portfolio-menu ul li:hover, .portfolio-menu ul li.active { color: #fff; } .portfolio-menu ul li:hover::before, .portfolio-menu ul li.active::before { opacity: 1; } .single-portfolio .portfolio-image { position: relative; overflow: hidden; } .single-portfolio .portfolio-image img { width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-portfolio .portfolio-image .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; background-color: rgba(255, 255, 255, 0.8); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); border-radius: 8px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content { padding: 16px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon { position: relative; display: inline-block; margin: 0 20px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 48px; color: #27CC55; position: relative; z-index: 5; line-height: 50px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon .shape { position: absolute; top: 7px; left: 0; } .single-portfolio:hover .portfolio-overlay { opacity: 1; visibility: visible; } /*=========================== 16.PRICING css ===========================*/ .pricing-area { padding-top: 120px; } /*===== PRICING STYLE NINE =====*/ .pricing-style { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 38px; border-radius: 8px; position: relative; overflow: hidden; background: -webkit-linear-gradient(#2bdbdc 0%, #27CC55 100%); background: -o-linear-gradient(#2bdbdc 0%, #27CC55 100%); background: linear-gradient(#2bdbdc 0%, #27CC55 100%); } .pricing-style .pricing-icon img { width: 190px; } .pricing-style .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #fff; position: relative; margin-top: 24px; } .pricing-style .pricing-header .month { font-size: 20px; font-weight: 300; line-height: 25px; color: #fff; margin-top: 3px; } .pricing-style .pricing-header .month .price { font-size: 36px; font-weight: 600; line-height: 45px; color: #fff; margin-top: 8px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style .pricing-header .month .price { font-size: 24px; margin-top: 32px; line-height: 30px; } } .pricing-style .pricing-list { margin-top: 24px; } .pricing-style .pricing-list ul li { font-size: 16px; line-height: 24px; color: #fff; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style .pricing-list ul li i { color: #fff; margin-right: 8px; } .pricing-style .pricing-btn { margin-top: 31px; } .pricing-style .pricing-btn .main-btn { background-color: #fff; border-color: #fff; } .pricing-style .pricing-btn .main-btn:hover { color: #27CC55; -webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); } /*=========================== 15.ABOUT css ===========================*/ .about-area { padding-top: 80px; position: relative; } .about-area .about-title .sub-title { font-size: 18px; font-weight: 400; color: #27CC55; text-transform: uppercase; } @media (max-width: 767px) { .about-area .about-title .sub-title { font-size: 16px; } } .about-area .about-title .title { font-size: 30px; padding-top: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area .about-title .title { font-size: 26px; } } @media (max-width: 767px) { .about-area .about-title .title { font-size: 22px; } } .about-area .about-accordion .accordion .card { border: 0; background: none;border: none;box-shadow: none; } .about-area .about-accordion .accordion .card .card-header { padding: 0; border: 0; background: none; margin-top: 0px; } .about-area .about-accordion .accordion .card .card-header a { font-size: 18px; font-weight: 500; color: #000; display: block; position: relative; padding-right: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area .about-accordion .accordion .card .card-header a { font-size: 16px; } } @media (max-width: 767px) { .about-area .about-accordion .accordion .card .card-header a { font-size: 16px; } } .about-area .about-accordion .accordion .card .card-header a::before { content: '\ea80'; font-family: 'LineIcons'; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .about-area .about-accordion .accordion .card .card-header .collapsed::before { content: '\ea7b'; } .about-area .about-accordion .accordion .card .card-body { padding: 5px 11px 0; } .about-area .about-accordion .accordion .card .card-body .text { margin-bottom: 10px; } .about-area .about-accordion .accordion .card .card-body p:last-child { margin-bottom: 0px !important; } .about-area .about-image img { width: 100%; } /*=========================== 26.TESTIMONIAL css ===========================*/ /*===== TESTIMONIAL STYLE THREE =====*/ .testimonial-area { padding-top: 80px; padding-bottom: 130px; background-color: #f4f6f7; } .testimonial-area .testimonial-left-content .sub-title { font-size: 18px; font-weight: 400; color: #27CC55; text-transform: uppercase; } @media (max-width: 767px) { .testimonial-area .testimonial-left-content .sub-title { font-size: 16px; } } .testimonial-area .testimonial-left-content .title { font-size: 32px; padding-top: 10px; color: #203b43; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-area .testimonial-left-content .title { font-size: 30px; } } @media (max-width: 767px) { .testimonial-area .testimonial-left-content .title { font-size: 24px; } } .testimonial-area .testimonial-left-content .testimonial-line { padding-top: 10px; } .testimonial-area .testimonial-left-content .testimonial-line li { height: 5px; background-color: #27CC55; opacity: 0.2; display: inline-block; border-radius: 50px; margin-right: 3px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(1) { width: 40px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(2) { width: 15px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(3) { width: 10px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(4) { width: 5px; } .testimonial-area .testimonial-left-content .text { padding-top: 15px; } .testimonial-area .testimonial-right-content { position: relative; background-color: #e9ecef; -webkit-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); border-radius: 50px; max-width: 500px; padding-top: 50px; } .testimonial-area .testimonial-right-content .quota { position: absolute; top: 10px; left: 15px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); opacity: 0.1; } .testimonial-area .testimonial-right-content .quota i { font-size: 130px; line-height: 95px; color: #27CC55; } .testimonial-area .testimonial-content-wrapper { position: relative; left: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-area .testimonial-content-wrapper { left: 0; } } @media (max-width: 767px) { .testimonial-area .testimonial-content-wrapper { left: 0; } } .single-testimonial { background-color: #fff; padding: 40px 30px 50px; border-radius: 50px; } .single-testimonial .testimonial-text .text { font-size: 24px; font-weight: 400; line-height: 36px; color: #203b43; padding-bottom: 25px; } @media (max-width: 767px) { .single-testimonial .testimonial-text .text { font-size: 18px; line-height: 32px; } } .single-testimonial .testimonial-author { border-top: 1px solid #e9ecef; padding-top: 50px; } .single-testimonial .testimonial-author .author-info .author-image img { border-radius: 50%; width: 70px; } .single-testimonial .testimonial-author .author-info .author-name { padding-left: 30px; } .single-testimonial .testimonial-author .author-info .author-name .name { font-size: 16px; font-weight: 700; color: #203b43; } .single-testimonial .testimonial-author .author-info .author-name .sub-title { font-size: 14px; color: #a4a4a4; margin-top: 5px; } @media (max-width: 767px) { .single-testimonial .testimonial-author .author-review { padding-left: 100px; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-testimonial .testimonial-author .author-review { padding-left: 0; padding-top: 15px; } } .single-testimonial .testimonial-author .author-review .star li { display: inline-block; font-size: 14px; color: #ffb400; } .single-testimonial .testimonial-author .author-review .review { font-size: 14px; color: #000; margin-top: 5px; } .testimonial-active .slick-arrow { position: absolute; bottom: 0; left: -635px; font-size: 22px; cursor: pointer; color: #a4a4a4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-active .slick-arrow { left: -480px; } } .testimonial-active .slick-arrow:hover { color: #000; } .testimonial-active .slick-arrow.next { left: -600px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-active .slick-arrow.next { left: -445px; } } /*=========================== 13.TEAM css ===========================*/ /*===== TEAM STYLE ELEVEN =====*/ .team-style-eleven { position: relative; -webkit-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); -moz-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); } .team-style-eleven .team-image img { width: 100%; } .team-style-eleven .team-content { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff; padding-top: 25px; padding-bottom: 25px; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content { padding-top: 15px; padding-bottom: 15px; } } .team-style-eleven .team-content::before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: -webkit-linear-gradient(left, #27CC55 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #27CC55 0%, #2bdbdc 100%); background: linear-gradient(to right, #27CC55 0%, #2bdbdc 100%); z-index: -1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 0; } .team-style-eleven .team-content .team-social { position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; visibility: hidden; opacity: 0; } .team-style-eleven .team-content .team-social .social { background-color: #fff; display: inline-block; padding: 10px 20px 6px; border-radius: 50px; } .team-style-eleven .team-content .team-social .social li { display: inline-block; margin: 0 8px; } .team-style-eleven .team-content .team-social .social li a { font-size: 16px; color: #a4a4a4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .team-style-eleven .team-content .team-social .social li a:hover { color: #27CC55; } .team-style-eleven .team-content .team-name a { color: #203b43; font-size: 24px; font-weight: 600; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content .team-name a { font-size: 18px; } } .team-style-eleven .team-content .sub-title { font-size: 16px; color: #27CC55; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content .sub-title { font-size: 14px; } } .team-style-eleven:hover .team-content { padding-top: 50px; } @media (max-width: 767px) { .team-style-eleven:hover .team-content { padding-top: 35px; } } .team-style-eleven:hover .team-content::before { opacity: 1; } .team-style-eleven:hover .team-content .team-social { top: -20px; visibility: visible; opacity: 1; } .team-style-eleven:hover .team-content .team-name a { color: #fff; } .team-style-eleven:hover .team-content .sub-title { color: #fff; } /*=========================== 19.CONTACT css ===========================*/ .contact-area { padding-top: 60px; padding-bottom: 60px; } p.form-message.success, p.form-message.error { font-size: 16px; color: #333; background: #ddd; padding: 10px 15px; margin-top: 15px; margin-left: 15px; } p.form-message.success.form-message.error, p.form-message.error.form-message.error { color: #f00; } .contact-map iframe { width: 100%; height: 550px; } @media (max-width: 767px) { .contact-map iframe { height: 350px; } } .contact-info .single-contact-info .contact-info-icon i { width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 29px; color: #fff; border-radius: 50%; } .contact-info .single-contact-info .contact-info-content { padding-left: 10px; } .contact-info .single-contact-info .contact-info-content .text { color: #203b43; } .contact-info .single-contact-info.contact-color-1 .contact-info-icon i { background-color: #203b43; } .contact-info .single-contact-info.contact-color-2 .contact-info-icon i { background-color: #203b43; } .contact-info .single-contact-info.contact-color-3 .contact-info-icon i { background-color: #27CC55; } .contact-wrapper .contact-title { font-size: 32px; font-weight: 700; color: #000; } @media (max-width: 767px) { .contact-wrapper .contact-title { font-size: 26px; } } .contact-wrapper .contact-title i { color: #203b43; margin-right: 8px; } .contact-wrapper .contact-title span { font-weight: 400; } /*=========================== 21.FOOTER css ===========================*/ /*===== FOOTER FIVE =====*/ .footer-area { background-color: #f4f6f7;} .footer-area h4, .footer-area p { color: #fff; } .footer-area h4 { margin-bottom: 15px; } .footer-area .footer-top { background-color: #203b43; padding: 45px 0 30px 0;} .footer-area .footer-top ul li { padding: 10px 0 10px 0;} .footer-area .footer-top .logo { padding: 0 0 15px 0;} .footer-area .copyright { background-color: #203b43; padding: 20px 0 20px 0;} /*===== BACK TO TOP =====*/ .back-to-top { font-size: 20px; color: #fff; position: fixed; right: 20px; bottom: 20px; width: 45px; height: 45px; line-height: 45px; border-radius: 5px; background-color: #27CC55; text-align: center; z-index: 99; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: none; } .back-to-top:hover { color: #fff; background-color: #27CC55; } .row.gap-y { margin-top: -15px; margin-bottom: -15px; } .row.gap-y > .col, .row.gap-y > [class*="col-"] { padding-top: 15px; padding-bottom: 15px; } .row.gap-y.gap-1 { margin-top: -4px; margin-bottom: -4px; } .row.gap-y.gap-1 > .col, .row.gap-y.gap-1 > [class*="col-"] { padding-top: 4px; padding-bottom: 4px; } .row.gap-y.gap-2 { margin-top: -8px; margin-bottom: -8px; } .row.gap-y.gap-2 > .col, .row.gap-y.gap-2 > [class*="col-"] { padding-top: 8px; padding-bottom: 8px; } .row.gap-y.gap-3 { margin-top: -15px; margin-bottom: -15px; } .row.gap-y.gap-3 > .col, .row.gap-y.gap-3 > [class*="col-"] { padding-top: 15px; padding-bottom: 15px; } .row.gap-y.gap-4 { margin-top: -15px; margin-bottom: -15px; } .row.gap-y.gap-4 > .col, .row.gap-y.gap-4 > [class*="col-"] { padding-top: 15px; padding-bottom: 15px; } .row.gap-y.gap-5 { margin-top: -15px; margin-bottom: -15px; } .row.gap-y.gap-5 > .col, .row.gap-y.gap-5 > [class*="col-"] { padding-top: 15px; padding-bottom: 15px; } .btn-default-site { background-color: #27cc55; color: #fff; border: 2px solid transparent; border-radius: 4px; } .btn-default-site:hover, .btn-default-site:focus { background-color: transparent; border-color: #27cc55; color: #27cc55; } .btn-white-site { background-color: transparent; border-color: #fff !important; color: #fff; border: 2px solid; } .btn-white-site:hover, .btn-default-site:focus { border-color: #007a5c !important; color: #fff; } .text-green { color: #2dce89 !important; } a.text-green:hover, a.text-green:focus { color: #1f8f5f !important; } /*- ---------------------------------------------------------------------------------------------------------------- -*/ .card-deck { -ms-flex-flow: row wrap; flex-flow: row wrap; margin-right: -15px; margin-left: -15px; display: flex; } .card-deck .card { display: -ms-flexbox; display: flex; -ms-flex: 1 0 0%; flex: 1 0 0%; -ms-flex-direction: column; flex-direction: column; margin-right: 15px; margin-bottom: 0; margin-left: 15px; } .card { border-radius: 12px; box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15); background-color: #fff; color: #252422; margin-bottom: 20px; position: relative; border: 0 none; -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; } .card .card-body { padding: 15px 15px 10px 15px; } .card .card-body.table-full-width { padding-left: 0; padding-right: 0; } .card .card-header { padding: 15px 15px 0; border: 0; } .card .card-header:not([data-background-color]) { background-color: transparent; } .card .card-header .card-title { margin-top: 10px; } .card .map { border-radius: 3px; } .card .map.map-big { height: 400px; } .card[data-background-color="orange"] { background-color: #51cbce; } .card[data-background-color="orange"] .card-header { background-color: #51cbce; } .card[data-background-color="orange"] .card-footer .stats { color: #fff; } .card[data-background-color="red"] { background-color: #ef8157; } .card[data-background-color="yellow"] { background-color: #fbc658; } .card[data-background-color="blue"] { background-color: #51bcda; } .card[data-background-color="green"] { background-color: #6bd098; } .card .image { overflow: hidden; height: 200px; position: relative; } .card .avatar { width: 30px; height: 30px; overflow: hidden; border-radius: 50%; margin-bottom: 15px; } .card .numbers { font-size: 2em; } .card .big-title { font-size: 12px; text-align: center; font-weight: 500; padding-bottom: 15px; } .card label { font-size: 0.8571em; margin-bottom: 5px; color: #9a9a9a; } .card .card-footer { background-color: transparent; border: 0; } .card .card-footer .stats i { margin-right: 5px; position: relative; top: 0px; color: #66615b; } .card .card-footer .btn { margin: 0; } .card.card-plain { background-color: transparent; box-shadow: none; border-radius: 0; } .card.card-plain .card-body { padding-left: 5px; padding-right: 5px; } .card.card-plain img { border-radius: 12px; } .card-plain { background: transparent; box-shadow: none; } .card-plain .card-header, .card-plain .card-footer { margin-left: 0; margin-right: 0; background-color: transparent; } .card-plain:not(.card-subcategories).card-body { padding-left: 0; padding-right: 0; } .card-chart .card-header .card-title { margin-top: 10px; margin-bottom: 0; } .card-chart .card-header .card-category { margin-bottom: 5px; } .card-chart .table { margin-bottom: 0; } .card-chart .table td { border-top: none; border-bottom: 1px solid #e9ecef; } .card-chart .card-progress { margin-top: 30px; } .card-chart .chart-area { height: 190px; width: calc(100% + 30px); margin-left: -15px; margin-right: -15px; } .card-chart .card-footer { margin-top: 15px; } .card-chart .card-footer .stats { color: #9a9a9a; } .card-chart .dropdown { position: absolute; right: 20px; top: 20px; } .card-chart .dropdown .btn { margin: 0; } .card-user .image { height: 130px; } .card-user .image img { border-radius: 12px; } .card-user .author { text-align: center; text-transform: none; margin-top: -77px; } .card-user .author a + p.description { margin-top: -7px; } .card-user .avatar { width: 124px; height: 124px; border: 1px solid #fff; position: relative; } .card-user .card-body { min-height: 240px; } .card-user hr { margin: 5px 15px 15px; } .card-user .card-body + .card-footer { padding-top: 0; } .card-user .card-footer h5 { font-size: 1.25em; margin-bottom: 0; } .card-user .button-container { margin-bottom: 6px; text-align: center; } .card-stats .card-body { padding: 15px 15px 0px; } .card-stats .card-body .numbers { text-align: right; font-size: 2em; } .card-stats .card-body .numbers p { margin-bottom: 0; } .card-stats .card-body .numbers .card-category { color: #9a9a9a; font-size: 16px; line-height: 1.4em; } .card-stats .card-footer { padding: 0px 15px 15px; } .card-stats .card-footer .stats { color: #9a9a9a; } .card-stats .card-footer hr { margin-top: 10px; margin-bottom: 15px; } .card-stats .icon-big { font-size: 3em; min-height: 64px; } .card-stats .icon-big i { line-height: 59px; } /*- ---------------------------------------------------------------------------------------------------------------- -*/ /* - Timeline - */ .timeline {position: relative;padding: 0;list-style: none} .timeline:before {position: absolute;top: 0;bottom: 0;left: 40px;width: 2px;margin-left: -1.5px;content: '';background-color: #e9ecef} .timeline > li {position: relative;min-height: 50px;margin-bottom: 30px} .timeline > li:after, .timeline > li:before {display: table;content: ' '} .timeline > li:after {clear: both} .timeline > li .timeline-panel {position: relative;float: right;width: 100%;padding: 0 20px 0 100px;text-align: left} .timeline > li .timeline-panel:before {right: auto;left: -15px;border-right-width: 15px;border-left-width: 0} .timeline > li .timeline-panel:after {right: auto;left: -14px;border-right-width: 14px;border-left-width: 0} .timeline > li .timeline-image {position: absolute;z-index: 100;left: 0;width: 80px;height: 80px;margin-left: 0;text-align: center;color: #fff;border: 7px solid #e9ecef;border-radius: 100%;} .timeline > li .timeline-image img {width: 100%;border-radius: 100%;} .timeline > li .timeline-image h4 {font-size: 10px;line-height: 14px;margin-top: 12px} .timeline > li.timeline-inverted > .timeline-panel {float: right;padding: 0 20px 0 100px;text-align: left} .timeline > li.timeline-inverted > .timeline-panel:before {right: auto;left: -15px;border-right-width: 15px;border-left-width: 0} .timeline > li.timeline-inverted > .timeline-panel:after {right: auto;left: -14px;border-right-width: 14px;border-left-width: 0} .timeline > li:last-child {margin-bottom: 0} .timeline .timeline-heading h4 {margin-top: 0;color: inherit} .timeline .timeline-body > p, .timeline .timeline-body > ul {margin-bottom: 0} .timeline-cta .timeline-arrow {display: inline-block;animation: timeline-arrow-float 1.8s ease-in-out infinite;will-change: transform;} @keyframes timeline-arrow-float { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(4px);} } .typing-wrapper {display: inline-flex;flex-direction: column;align-items: flex-start;} .typing-static {margin-bottom: 4px;white-space: nowrap;} .typing-line {display: inline-flex;align-items: flex-end;white-space: nowrap;} .typing-dynamic {display: inline-block;min-width: 0.25em;} .typing-cursor {display: inline-block;width: 2px;height: 1.1em;margin-left: 4px;background: currentColor;animation: typing-cursor-blink 0.8s steps(1) infinite;} .typing-cursor.is-typing {animation-duration: 0.4s;} @keyframes typing-cursor-blink { 0%, 49% {opacity: 1;} 50%, 100% {opacity: 0;} } @media (min-width: 768px) { .timeline:before {left: 50%} .timeline > li {min-height: 100px;margin-bottom: 50px} .timeline > li .timeline-panel {float: left;width: 41%;padding: 0 20px 20px 30px;text-align: right} .timeline > li .timeline-image {left: 50%;width: 100px;height: 100px;margin-left: -50px} .timeline > li .timeline-image h4 {font-size: 13px;line-height: 18px;margin-top: 16px} .timeline > li.timeline-inverted > .timeline-panel {float: right;padding: 0 30px 20px 20px;text-align: left} } @media (min-width: 992px) { .timeline > li {min-height: 150px} .timeline > li .timeline-panel {padding: 0 20px 20px} .timeline > li .timeline-image {width: 150px;height: 150px;margin-left: -75px} .timeline > li .timeline-image h4 {font-size: 26px;line-height: 26px;margin-top: 30px} .timeline > li.timeline-inverted > .timeline-panel {padding: 0 20px 20px} } @media (min-width: 1200px) { .timeline > li {min-height: 170px} .timeline > li .timeline-panel {padding: 0 20px 20px 100px} .timeline > li .timeline-image {width: 170px;height: 170px;margin-left: -85px} .timeline > li .timeline-image h4 {margin-top: 34px} .timeline > li.timeline-inverted > .timeline-panel {padding: 0 100px 20px 20px} } /* - -------------------------------------------------------------------------------------------------------------- - */ .page-full {padding-top: 120px;} .page-box {padding-top: 60px;padding-bottom: 25px !important;} .page-light {background-color: #dcdcdc17;} .page-dark {background-color: #f3f6f7;} .plan-features hr {margin: 15px 0;} .plan-features .feature .title {font-size: 18px;color: #66bb6a !important;margin-bottom: 5px;font-weight: 500;} .plan-features .feature .description {font-size: 11px;color: #66615b !important;line-height: 16px;} .plan-features .feature .detail {font-size: 12px;color: #66615b !important;line-height: 16px;font-weight: bold; margin: 10px 0;} .plan-features .feature .additional {font-size: 11px;color: #66615b !important;line-height: 16px;} /** * * - ----------------------------------------------------------------------------------------------------------------- - * Box With Image Right * */ section.box-with-image-right { overflow: hidden; } section.box-with-image-right .center { position: relative; } section.box-with-image-right .green-line { width: 150px; height: 5px; left: 0; background: #17bab8; opacity: 0.75; position: absolute; top: 0; } section.box-with-image-right .image { float: right; position: relative; background-size: cover; background-position: 50% 25%; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } section.box-with-image-right .image .image-caption { width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); height: auto; bottom: 0; left: 0; padding: 50px; position: absolute; -webkit-border-bottom-left-radius: 2px; -moz-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(1, rgba(0, 0, 0, 0.55))); background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.55) 100%); background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.55) 100%); background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.55) 100%); background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.55) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.55) 100%); } section.box-with-image-right .image .image-caption p { font-weight: 300; font-size: 16px; color: #fff; } section.box-with-image-right .content h3 { color: #00897b; font-weight: 800; font-size: 13px; margin-left: 2px; border-bottom: 3px solid #00897b; padding-bottom: 10px; display: inline-block; margin-bottom: 60px; text-transform: uppercase; } section.box-with-image-right .content h2 { color: #2c3459; font-size: 30px; margin-bottom: 30px; } section.box-with-image-right .content p { color: #9498ab; font-size: 16px; margin-bottom: 30px; font-weight: 300; line-height: 1.6em; } section.box-with-image-right .content p.without-margin-bottom { margin-bottom: 0; } section.box-with-image-right .content p a { color: #2c3459; text-decoration: underline; } section.box-with-image-right .content p a:hover { text-decoration: none; } section.box-with-image-right .content ul { list-style-type: square; margin: 0 0 30px 18px; } section.box-with-image-right .content ul li { font-weight: 300; font-size: 16px; line-height: 1.6em; color: #9498ab; } section.box-with-image-right .content ul li a { color: #2c3459; text-decoration: underline; } section.box-with-image-right .content ul li a:hover { text-decoration: none; } section.box-with-image-right .content ul ul { margin: 10px 0 10px 18px; } @media (min-width: 1350px) { section.box-with-image-right .content { width: 512.5px; float: left; padding: 37.5px 0; } section.box-with-image-right .container { padding: 0px 0; } } @media (min-width: 950px) and (max-width: 1349px) { section.box-with-image-right .content { width: 400px; float: left; padding: 25px 0; } section.box-with-image-right .container { padding: 25px 0; } section.box-with-image-right .image { background-position: 100% 50%; } /*section.box-with-image-right .form input[type="text"] { width: 145px; }*/ } @media (min-width: 600px) and (max-width: 949px) { section.box-with-image-right .content { margin-bottom: 0px; } section.box-with-image-right .container { padding: 25px 0; } } @media (max-width: 599px) { section.box-with-image-right .content { margin-bottom: 30px; } section.box-with-image-right .container { padding: 25px 10px; } section.box-with-image-right .content h3 { margin-bottom: 30px; } section.box-with-image-right .form input { margin-bottom: 10px; width: -webkit-calc(100% - 52px); width: -moz-calc(100% - 52px); width: calc(100% - 52px); } } /** * - ----------------------------------------------------------------------------------------------------------------- - */ /*- ---------------------------------------------------------------------------------------------------------------- -*/ /* - Páginas de erros - */ .page-error {} .page-error .error-code { margin-bottom: 30px; font-size: 150px; text-align: center; font-family: 'Roboto'; } .page-error .error-code > div { position: relative; display: inline-block; background-color: #fff; padding: 0px 30px; border-radius: 100px 60px 40px 0px; -moz-border-radius: 100px 60px 40px 0px; -webkit-border-radius: 100px 60px 40px 0px; line-height: normal; } .page-error .error-code > div > span { color: #17bab8; } .page-error .error-code > div:after { content: ""; width: 0; height: 0; border-top: 60px solid #fff; border-right: 60px solid transparent; position: absolute; left: 0px; bottom: -40px; } .page-error .error-message { margin-bottom: 15px; text-align: left; } .page-error .error-message h4 { font-size: 32px; font-weight: 300; color: #e57373; } .page-error .error-message h5 { font-size: 20px; font-weight: 300; color: #e57373; } .page-error .error-body { margin-bottom: 60px; } .page-error .error-footer-container { margin-top: 30px; padding: 15px; color: #666; } .page-error .error-footer-container a { color: #868686; } .page-error .error-footer-container a:hover, .page-error .error-footer-container a:focus { text-decoration: none; } .page-error .error-footer-container .footer-right { text-align: right; } .page-error .error-footer-container .footer-right .footer-meta i { color: #00bcd4; } /* - -------------------------------------------------------------------------------------------------------------- - */ /*- ---------------------------------------------------------------------------------------------------------------- -*/ /* - start preloader - */ /*- ---------------------------------------------------------------------------------------------------------------- -*/ /* Preloader */ #preloaderPage { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff75; z-index: 1000000097; } .loader { top: 50%; width: 50px; height: 50px; border-radius: 100%; position: relative; margin: 0 auto; } #loader-1:before, #loader-1:after { content: ""; position: absolute; top: -10px; left: -10px; width: 100%; height: 100%; border-radius: 100%; border: 7px solid transparent; border-top-color: #20324fe0; } #loader-1:before { z-index: 100; animation: spin 2s infinite; } #loader-1:after { border: 7px solid #72b2b46b; } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /*- ---------------------------------------------------------------------------------------------------------------- -*/ /* - end preloader - */ /*- ---------------------------------------------------------------------------------------------------------------- -*/ .hide {display: none !important;} .show {display: block !important;} @keyframes pulse-whats { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(51, 217, 178, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(51, 217, 178, 0); } } .btn-whats-corner-screen { position: fixed; bottom: 84px; right: 18px; z-index: 10; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background-color: #25D366; border-radius: 50%; animation: pulse-whats 2s infinite; overflow: visible; } .btn-whats-corner-screen::after { content: 'Dúvidas?'; position: absolute; top: 50%; left: 0; transform: translate(-100%, -50%) translateX(-12px); background-color: #25D366; color: #fff; font-size: 17px; font-weight: 500; line-height: 1.2; padding: 6px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .btn-whats-corner-screen::before { content: ''; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%) scale(0.75); border-width: 6px; border-style: solid; border-color: transparent transparent transparent #25D366; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .btn-whats-corner-screen:hover::after, .btn-whats-corner-screen:focus-visible::after { opacity: 1; transform: translate(-100%, -50%) translateX(-6px); } .btn-whats-corner-screen:hover::before, .btn-whats-corner-screen:focus-visible::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .btn-whats-corner-screen img {} .pulse { margin: 1px; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; -webkit-animation: smallToBig 600ms alternate infinite ease; -moz-animation: smallToBig 600ms alternate infinite ease; } @-webkit-keyframes smallToBig { from {-webkit-transform: scale(1);} to {-webkit-transform: scale(1.1);} } @-moz-keyframes smallToBig { from {-moz-transform: scale(1);} to {-moz-transform: scale(1.1);} } .register-company {} .register-company .plan-name {} .register-company .plan-price-no-discount {text-decoration: line-through;font-size: 13px;} .register-company .plan-price-discount {color: #399b3e;} .register-company .plan-discount {color: #ffc107;} .register-company .plan-description-discount {color: #ff7b07;font-size: 13px;} .register-company .plan-price {} .register-company .plan-period {} .register-company .plan-features {} .register-company .plan-features li {font-size: 17px;color: #66615b !important;padding: 0 5px;} .register-company .plan-features li .feature-description {font-size: 11px;} .feature {position: relative;min-height: 65px;} .feature { margin-bottom: 20px;} .feature .feature-icon { position: absolute; left: 0; top: 0; width: 65px; height: 65px; line-height: 65px; text-align: center; border-radius: 50%; font-size: 30px; border: 1px solid #ebebeb; color: #2dce89;} .feature .feature-icon.fa-arrow-right { animation: feature-icon-wobble 2s ease-in-out infinite; will-change: transform; } .feature-content {padding-left: 100px;padding-top: 10px;} .feature-content h4 { color: #2c3459; } /* - -------------------------------------------------------------------------------------------------------------- - */ /* - testimonials single - */ @keyframes feature-icon-wobble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(4px); } 50% { transform: translateX(-4px); } 75% { transform: translateX(2px); } } .testimonials-single { padding: 25px 0; } .testimonials-single .section-header { margin-bottom: 40px; } .testimonials-single .testimonial-item .testimonial-img { width: 120px; border-radius: 50%; border: 4px solid #fff; float: left; } .testimonials-single .testimonial-item h3 { font-size: 20px; font-weight: bold; margin: 10px 0 5px 0; /*color: #111;*/ } .testimonials-single .testimonial-item h4 { font-size: 14px; color: #999; margin: 0 0 10px 0; } .testimonials-single .testimonial-item p { font-style: italic; margin: 0 0 15px 0px; } .testimonials-single .owl-nav, .testimonials-single .owl-dots { margin-top: 5px; text-align: center; } .testimonials-single .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; } .testimonials-single .owl-dot.active { background-color: #2d3657; } /* - -------------------------------------------------------------------------------------------------------------- - */ @keyframes fa-blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; } } .blink { -webkit-animation: fa-blink .75s linear infinite; -moz-animation: fa-blink .75s linear infinite; -ms-animation: fa-blink .75s linear infinite; -o-animation: fa-blink .75s linear infinite; animation: fa-blink .75s linear infinite; } .floating { animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }