@charset "UTF-8"; /*----------------------------------------------------------------------------------- Theme Name: Tutorgo - Online Learning and Education HTML Template Author: Theme Pure Support: https://themepure.net/help/support/login Description: Tutorgo – Education Template is a clean and modern HTML5 , Bootstrap Education Template. Version: 1.0 ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** 01. THEME DEFAULT CSS 02. HEADER CSS 03. MEAN MENU CSS 04. SLIDER CSS 05. HERO CSS 06. ABOUT CSS 07. TEAM CSS 08. SERVICES CSS 09. PORTFOLIO CSS 10. COURSES CSS 11. EVENT CSS 12. CTA CSS 13. COUNTER CSS 14. FEATURE CSS 15. TESTIMONIAL CSS 16. BRAND CSS 17. BLOG CSS 18. CHECKOUT CSS 19. CART CSS 20. LOGIN CSS 21. FOOTER CSS **********************************************/ /*----------------------------------------*/ /* 01. THEME DEFAULT CSS START /*----------------------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"); :root { /** @font family declaration */ --tp-ff-body: 'Roboto', sans-serif; --tp-ff-heading: 'Roboto', sans-serif; --tp-ff-p: 'Roboto', sans-serif; --tp-ff-fontawesome: "Font Awesome 6 Pro"; --tp-ff-eleganticons: "ElegantIcons"; /** @color declaration */ --tp-common-white: #ffffff; --tp-common-black: #000; --tp-heading-primary: #000f2f; --tp-grey-1: #f5f5f5; --tp-grey-2: #f5f7fb; --tp-text-body: #333f59; --tp-text-2: #7e8188; --tp-text-3: #949db1; --tp-text-4: #737383; --tp-theme-primary: #006147; --tp-theme-secondary: #ffa423; --tp-theme-bg: #006147; --tp-theme-bg-2: #020c2a; --tp-border-1: #000f2f; --tp-border-2: #eeeff0; /** @font weight declaration */ --tp-fw-normal: normal; --tp-fw-elight: 200; --tp-fw-light: 300; --tp-fw-regular: 400; --tp-fw-medium: 500; --tp-fw-sbold: 600; --tp-fw-bold: 700; --tp-fw-ebold: 800; --tp-fw-black: 900; /** @font size declaration */ --tp-fz-body: 14px; --tp-fz-p: 14px; --tp-fz-h1: 40px; --tp-fz-h2: 36px; --tp-fz-h3: 24px; --tp-fz-h4: 20px; --tp-fz-h5: 16px; --tp-fz-h6: 14px; } * { margin: 0; padding: 0; box-sizing: border-box; } /*--------------------------------- typography css start ---------------------------------*/ body { font-family: var(--tp-ff-body); font-size: var(--tp-fz-body); font-weight: normal; color: var(--tp-text-body); line-height: 26px; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--tp-ff-heading); color: var(--tp-heading-primary); margin-top: 0px; font-weight: 700; line-height: 1.2; -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; } h1 { font-size: var(--tp-fz-h1); } h2 { font-size: var(--tp-fz-h2); } h3 { font-size: var(--tp-fz-h3); } h4 { font-size: var(--tp-fz-h4); } h5 { font-size: var(--tp-fz-h5); } h6 { font-size: var(--tp-fz-h6); } ul { margin: 0px; padding: 0px; } p { font-family: var(--tp-ff-p); font-size: var(--tp-fz-p); font-weight: var(--tp-fw-normal); color: var(--tp-text-body); margin-bottom: 15px; line-height: 26px; } a, button, p, input, select, textarea, li, .transition-3, h1, h2, h3, h4, h5, h6 { -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; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus { outline: 0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } input { outline: none; } input::-webkit-input-placeholder { color: var(--tp-text-3); } input:-moz-placeholder { color: var(--tp-text-3); } input::-moz-placeholder { color: var(--tp-text-3); } input:-ms-input-placeholder { color: var(--tp-text-3); } input[type=color] { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; height: 100%; width: 100%; padding: 0; border-radius: 50%; } *::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } *::-moz-placeholder { color: var(--tp-common-black); font-size: var(--tp-fz-body); opacity: 1; } *::-moz-placeholder::-webkit-input-placeholder { color: var(--tp-text-3); } *::-moz-placeholder:-moz-placeholder { color: var(--tp-text-3); } *::-moz-placeholder::-moz-placeholder { color: var(--tp-text-3); } *::-moz-placeholder:-ms-input-placeholder { color: var(--tp-text-3); } *::placeholder { color: var(--tp-common-black); font-size: var(--tp-fz-body); opacity: 1; } *::placeholder::-webkit-input-placeholder { color: var(--tp-text-3); } *::placeholder:-moz-placeholder { color: var(--tp-text-3); } *::placeholder::-moz-placeholder { color: var(--tp-text-3); } *::placeholder:-ms-input-placeholder { color: var(--tp-text-3); } /*--------------------------------- common classes css start ---------------------------------*/ .w-img img { width: 100%; } .m-img img { max-width: 100%; } .fix { overflow: hidden; } .clear { clear: both; } .z-index-1 { z-index: 1; } .z-index-11 { z-index: 11; } .overflow-y-visible { overflow-x: hidden; overflow-y: visible; } .p-relative { position: relative; } .p-absolute { position: absolute; } .include-bg { background-position: center; background-size: cover; background-repeat: no-repeat; } /*---------------------------------------- Body Overlay -----------------------------------------*/ .body-overlay { background-color: var(--tp-common-black); height: 100%; width: 100%; position: fixed; top: 0; z-index: 98; right: 0; opacity: 0; visibility: hidden; -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; } .body-overlay:hover { cursor: url(../img/icons/cross-out.png), pointer; } .body-overlay.opened { opacity: 0.7; visibility: visible; } /*---------------------------------------- Progress Wrap -----------------------------------------*/ @media (max-width: 575px) { .progress-wrap { right: 15px; bottom: 15px; } } .basic-pagination ul li { display: inline-block; margin-bottom: 30px; } .basic-pagination ul li:not(:last-child) { margin-right: 10px; } @media (max-width: 575px) { .basic-pagination ul li:not(:last-child) { margin-right: 3px; } } .basic-pagination ul li a, .basic-pagination ul li span { display: inline-block; width: 50px; height: 50px; line-height: 46px; text-align: center; -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; border: 2px solid #f1f1f1; font-size: 18px; font-weight: 600; } .basic-pagination ul li a:hover, .basic-pagination ul li a.current, .basic-pagination ul li span:hover, .basic-pagination ul li span.current { background: var(--tp-theme-primary); border-color: var(--tp-theme-primary); color: var(--tp-common-white); } .nice-select::after { border: none; background-color: transparent; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); margin-top: 0; right: 0; content: "\f107"; font-family: var(--tp-ff-fontawesome); transform-origin: center; color: var(--tp-common-black); font-weight: 500; height: auto; width: auto; } .nice-select.open::after { -webkit-transform: translateY(-50%) rotate(-180deg); -moz-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); -o-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); } /* cart plus minus default style css */ .tp-backtotop { position: fixed; bottom: 0; right: 40px; background: var(--tp-theme-primary); z-index: 6; width: 50px; height: 50px; text-align: center; line-height: 50px; color: #fff; font-size: 16px; box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06); opacity: 0; transition: 0.6s; z-index: 99; font-size: 20px; border-radius: 5px; } .tp-backtotop.show { top: auto; bottom: 40px; opacity: 1; } .tp-backtotop:hover { background-color: var(--tp-theme-secondary); } .cart-plus, .cart-minus { width: 25px; height: 30px; line-height: 30px; display: inline-block; vertical-align: middle; text-align: center; font-size: 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; } .cart-plus:hover, .cart-minus:hover { cursor: pointer; } .product-quantity input { color: #000; font-size: 14px; font-weight: normal; text-align: center; width: 40px; } .cart-input { height: 30px; width: 32px; text-align: center; font-size: 14px; border: none; border-top: 2px solid var(--tp-border-1); border-bottom: 2px solid var(--tp-border-1); display: inline-block; vertical-align: middle; margin: 0 -3px; padding-bottom: 0px; } .cart-input:focus { outline: none; } /* dropcap */ .tp-dropcap { display: inline-block; font-size: 50px; font-weight: 700; float: left; height: 70px; width: 70px; line-height: 70px; text-align: center; color: var(--tp-common-black); background-color: var(--tp-common-white); box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06); margin-right: 20px; } .course__view h4 { font-size: 15px; font-weight: 500; color: #53545b; display: inline-block; margin-bottom: 0; } .course__sort-inner .nice-select { background-color: var(--tp-grey-2); } .course__sort-inner .nice-select::after { right: 10px; background-color: var(--tp-grey-2); } /*-- - Spacing -----------------------------------------*/ /*----------------------------------------*/ /* ALL CSS START /*----------------------------------------*/ /* theme btn */ .br-0 span { border-radius: 0 !important; } .tp-btn-2 { display: inline-block; font-size: 14px; font-weight: 600; color: var(--tp-common-white); background: #022f23; text-align: center; padding: 15px 38px; position: relative; z-index: 1; overflow: hidden; } .tp-btn-2 i { padding-left: 5px; } .tp-btn-2:hover { color: var(--tp-theme-primary); background-color: var(--tp-common-white); } .tp-btn-2:focus { color: var(--tp-theme-primary); } /* Button 9 */ .tp-btn { padding: 2px; text-align: center; position: relative; text-decoration: none; display: inline-block; overflow: hidden; border-radius: 6px; } .tp-btn span { color: var(--tp-common-white); background-color: #022f23; width: 100%; font-size: 14px; font-weight: 500; position: relative; padding: 8px 25px; letter-spacing: -0.02rem; /*border: 1px solid var(--tp-theme-primary);*/ display: inline-block; border-radius: 6px; -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; } .tp-btn i { padding-left: 15px; } .tp-btn:hover span { color: var(--tp-common-white); background-color: var(--tp-theme-secondary); border-color: transparent; } .tp-border-btn, .tp-border-btn-white { padding: 2px; text-align: center; position: relative; text-decoration: none; display: inline-block; } .tp-border-btn span, .tp-border-btn-white span { color: var(--tp-theme-primary); background-color: var(--tp-common-white); width: 100%; font-size: 14px; font-weight: 500; position: relative; padding: 7px 35px; letter-spacing: -0.02rem; border: 2px solid var(--tp-theme-primary); display: inline-block; border-radius: 6px; -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; } .tp-border-btn i, .tp-border-btn-white i { padding-left: 15px; } .tp-border-btn:hover span, .tp-border-btn-white:hover span { color: var(--tp-common-white); background-color: var(--tp-theme-primary); border-color: transparent; } .tp-border-btn-white span { border-color: rgba(50, 112, 252, 0.08); color: var(--tp-common-black); padding: 7px 25px; } .tp-transparent-btn { padding: 2px; text-align: center; position: relative; text-decoration: none; display: inline-block; overflow: hidden; } .tp-transparent-btn span { color: var(--tp-common-white); background-color: transparent; width: 100%; font-size: 14px; font-weight: 500; position: relative; padding: 10px 35px; letter-spacing: -0.02rem; border: 2px solid; border-color: rgba(255, 255, 255, 0.1); display: inline-block; border-radius: 6px; -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; } .tp-transparent-btn i { padding-left: 15px; } .tp-transparent-btn:hover span { color: var(--tp-common-white); background-color: var(--tp-theme-primary); border-color: transparent; } .tp-white-btn { padding: 2px; text-align: center; position: relative; text-decoration: none; display: inline-block; overflow: hidden; } .tp-white-btn span { color: var(--tp-common-black); background-color: var(--tp-common-white); width: 100%; font-size: 14px; font-weight: 500; position: relative; padding: 12px 35px; letter-spacing: -0.02rem; display: inline-block; 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; } .tp-white-btn i { padding-left: 15px; } .tp-white-btn:hover span { color: var(--tp-common-white); background-color: var(--tp-theme-primary); border-color: transparent; } .tp-phone-btn { font-size: 14px; color: var(--tp-common-white); margin-right: 20px; } .tp-phone-btn i { margin-right: 5px; } .tp-phone-btn:hover { color: var(--tp-common-white); } .tp-play-btn { color: var(--tp-common-white); display: inline-block; } .tp-play-btn span { display: inline-block; } .tp-play-btn i { font-size: 24px; width: 47px; height: 47px; line-height: 47px; text-align: center; border-radius: 50%; line-height: 43px; border: 2px solid var(--tp-common-white); display: inline-block; margin-right: 15px; -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; } .tp-play-btn:hover { color: var(--tp-common-white); } .tp-play-btn:hover i { background-color: var(--tp-theme-secondary); } .tp-submit-btn { display: inline-block; font-size: 14px; font-weight: 600; color: var(--tp-common-white); background-color: var(--tp-theme-primary); text-align: center; padding: 12px 30px; position: relative; z-index: 1; overflow: hidden; border-radius: 6px; } .tp-submit-btn i { padding-left: 5px; } .tp-submit-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-secondary); } .tp-submit-btn:focus { color: var(--tp-theme-primary); } .e-btn { display: inline-block; height: 50px; line-height: 52px; text-align: center; padding: 0 25px; color: #ffffff; background: var(--tp-theme-primary); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-weight: 500; } .e-btn:hover { background-color: var(--tp-theme-secondary); } .tp-hader-btn { color: var(--tp-common-white); } .tp-hader-btn .icon { margin-left: 10px; display: inline-block; } .tp-hader-btn .avata { width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%; display: inline-block; border-width: 2px; border-color: rgba(255, 255, 255, 0.1); border-style: solid; border-radius: 50%; line-height: 32px; margin-left: 40px; } .tp-hader-btn:hover { color: var(--tp-common-white); } .tp-hader-btn:hover .icon { animation: tfLeftToRight 0.5s forwards; } .play-btn { display: inline-block; width: 44px; height: 44px; font-size: 12px; text-align: center; line-height: 44px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #ffffff; color: var(--tp-theme-primary); animation: pulse 2s infinite; } /* pulse btn */ .pulse-btn { display: inline-block; width: 80px; height: 80px; line-height: 84px; text-align: center; background-color: var(--tp-common-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; color: var(--tp-common-black); animation: pulse 2s infinite; } .pulse-btn i { font-size: 18px; } .pulse-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .pulse-btn i { padding-left: 2px; } /* hambur btn */ .hamburger-btn { width: 30px; height: 30px; position: relative; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; background: transparent; border: 0; outline: 0; } .hamburger-btn span { display: inline-block; width: 100%; background: var(--tp-common-black); display: block; position: absolute; height: 3px; width: 100%; opacity: 1; left: 0; z-index: 1; } .hamburger-btn span:nth-child(1) { top: 0; } .hamburger-btn span:nth-child(2) { top: 10px; } .hamburger-btn span:nth-child(3) { top: 20px; } /* link btn style 1 */ .link-btn { position: relative; display: inline-block; font-size: 18px; color: var(--tp-text-3); background: transparent; border: 1px solid var(--tp-border-2); width: 50px; height: 50px; text-align: center; line-height: 48px; padding-right: 25px; transition: all ease 0.2s; -webkit-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -ms-transition: all ease 0.2s; -o-transition: all ease 0.2s; overflow: hidden; } .link-btn i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: all ease 0.2s; -webkit-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -ms-transition: all ease 0.2s; -o-transition: all ease 0.2s; } .link-btn i:last-child { left: 0%; visibility: hidden; opacity: 0; } .link-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-primary); border-color: var(--tp-theme-primary); } .link-btn:hover i { left: 100%; visibility: hidden; opacity: 0; } .link-btn:hover i:last-child { left: 50%; visibility: visible; opacity: 1; } /* link btn style 2 */ .link-btn-2 { position: relative; font-size: 16px; color: var(--tp-text-1); font-weight: 500; padding-right: 21px; display: inline-block; } .link-btn-2 i { font-size: 14px; position: absolute; top: 12px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); transition: all ease 0.2s; -webkit-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -ms-transition: all ease 0.2s; -o-transition: all ease 0.2s; } .link-btn-2 i:first-child { right: 10%; visibility: hidden; opacity: 0; } .link-btn-2 i:last-child { right: 0; } .link-btn-2:hover { color: var(--tp-theme-primary); } .link-btn-2:hover i:first-child { right: 0; visibility: visible; opacity: 1; } .link-btn-2:hover i:last-child { right: -10%; visibility: hidden; opacity: 0; } .link-btn-2.link-prev { padding-right: 0; padding-left: 21px; } .link-btn-2.link-prev i:first-child { left: 10%; right: auto; } .link-btn-2.link-prev i:last-child { left: 0; right: auto; } .link-btn-2.link-prev:hover i:first-child { left: 0%; right: auto; } .link-btn-2.link-prev:hover i:last-child { left: -10%; right: auto; } .more-btn { font-weight: 500; font-size: 16px; } .more-btn i { margin-left: 10px; } .more-btn:hover { color: var(--tp-theme-primary); } .more-btn:hover i { animation: tfLeftToRight 0.5s forwards; } .hero-btn-2 { margin-bottom: 10px; } /* pulse effect animation */ @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes tp-bounce { 20%, 53%, 80%, from, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); } 70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } } .tp-bounce { animation-name: bounce; transform-origin: center bottom; } @keyframes tfLeftToRight { 49% { transform: translateX(30%); } 50% { opacity: 0; transform: translateX(-30%); } 51% { opacity: 1; } } @-webkit-keyframes tp-float-1 { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 50% { transform: translate(30px, 40px) rotate(0deg) scale(1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } @keyframes tp-float-1 { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 50% { transform: translate(30px, 40px) rotate(0deg) scale(1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } @keyframes tp-float-2 { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 50% { transform: translate(30px, -30px) rotate(0deg) scale(1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } @-webkit-keyframes tp-float-2 { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 50% { transform: translate(30px, 40px) rotate(0deg) scale(1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } @-webkit-keyframes tp-float-3 { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 50% { transform: translate(20px, 30px) rotate(0deg) scale(1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } @keyframes tp-float-3 { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 50% { transform: translate(20px, 30px) rotate(0deg) scale(1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } @keyframes tpswing { 0% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } } @keyframes tpswing2 { 0% { transform: rotate(5deg); } 100% { transform: rotate(-1deg); } } @keyframes tpupdown { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } @keyframes opactiy { 0% { transform: rotate(5deg); } 100% { transform: rotate(-1deg); } } @keyframes opactiy { 0% { opacity: 0.1; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes borderanimate2 { 0% { transform: translate(-50%, -50%) scale(0.8); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } /*----------------------------------------*/ /* PRELOADER CSS START /*----------------------------------------*/ .tp-preloader { background-color: var(--tp-common-white); height: 100%; width: 100%; position: fixed; top: 0; z-index: 9999; left: 0; opacity: 1; visibility: visible; -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; } .tp-preloader__center { display: flex; justify-content: center; align-items: center; height: 100%; } .tp-preloader img, .tp-preloader svg { display: block; width: 100px; height: 100px; animation: tp-bounce 3s infinite; } .tp-preloader img .path-yellow, .tp-preloader svg .path-yellow { color: #EDB83E; width: 0; animation: colorchange 1.5s infinite; -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; } @keyframes colorchange { 10% { color: green; } 10% { color: pink; } 20% { color: deeppink; } 30% { color: darkorange; } 40% { color: aquamarine; } 50% { color: darkcyan; } 70% { color: orange; } 80% { color: cornflowerblue; } 90% { color: grey; } 100% { color: white; } } /*-- - Background color -----------------------------------------*/ .grey-bg { background: var(--tp-grey-1); } .grey-bg-2 { background: var(--tp-grey-2); } .white-bg { background: var(--tp-common-white); } .black-bg { background: var(--tp-common-black); } .theme-bg { background-color: var(--tp-theme-bg); } .theme-bg-2 { background-color: var(--tp-theme-bg-2); } .primary-bg { background-color: var(--tp-theme-primary); } /* tp range slider css */ .tp-range-slider .inside-slider { padding-left: 7px; padding-right: 17px; } .tp-range-slider .noUi-target { background-color: #191C3C; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; border: 0; box-shadow: none; } .tp-range-slider .noUi-connect { background-color: var(--tp-theme-primary); } .tp-range-slider .noUi-horizontal { height: 6px; } .tp-range-slider .noUi-handle { height: 24px; width: 24px; background-color: var(--tp-theme-primary); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 4px solid var(--tp-common-white); box-shadow: 0px 4px 10px rgba(5, 9, 43, 0.3); top: -9px; } .tp-range-slider .noUi-handle:hover { cursor: pointer; } .tp-range-slider .noUi-handle::before, .tp-range-slider .noUi-handle::after { display: none; } .tp-range-slider-dark .noUi-handle { border: 4px solid #2D314B; } /* tp swiper slider dot */ .tp-swiper-dot .swiper-pagination-bullet { width: 8px; height: 8px; background-color: var(--tp-grey-1); opacity: 1; margin: 0 9px; position: relative; } .tp-swiper-dot .swiper-pagination-bullet::after { position: absolute; content: ""; left: 50%; top: 50%; width: calc(100% + 16px); height: calc(100% + 16px); background-color: transparent; border: 2px solid transparent; border-radius: 50%; transform: translate(-50%, -50%) scale(0); } .tp-swiper-dot .swiper-pagination-bullet button { font-size: 0; } .tp-swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-theme-primary); } .tp-swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::after { border-color: var(--tp-theme-primary); transform: translate(-50%, -50%) scale(1); } .tp-swiper-arrow { width: 80px; height: 80px; line-height: 80px; font-size: 20px; text-align: center; background-color: var(--tp-common-white); color: var(--tp-common-black); } .tp-swiper-arrow:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } /* tp slick arrow */ /*----------------------------------------*/ /* OFFCANVAS CSS START /*----------------------------------------*/ .offcanvas__logo img { max-width: 128px; } .offcanvas__area { position: fixed; right: -490px; top: 0; width: 450px; height: 100%; transition-duration: 0.5s; z-index: 999; -ms-overflow-style: none; /* for Internet Explorer, Edge */ scrollbar-width: none; /* for Firefox */ overflow-y: scroll; min-width: 300px; min-height: 768px; background-size: cover; background-color: var(--tp-grey-1); } .offcanvas__area::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } .offcanvas__area.offcanvas-opened { right: 0px; } @media (max-width: 575px) { .offcanvas__area { width: 290px; } } .offcanvas__wrapper { position: relative; padding: 45px; overflow: auto; width: 100%; height: 100%; scrollbar-width: none; } .offcanvas__wrapper .tp-btn { height: 45px; line-height: 45px; } @media (max-width: 575px) { .offcanvas__wrapper { padding: 20px; } } .offcanvas__close-btn { display: inline-block; font-size: 16px; height: 40px; width: 40px; line-height: 36px; background: var(--tp-theme-primary); color: #fff; } .offcanvas__close-btn:hover { background: var(--tp-theme-secondary); } .offcanvas-info p { margin-bottom: 40px; color: var(--tp-common-black); } .offcanvas__top { padding-bottom: 20px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__top { margin-bottom: 0; } } .offcanvas__cta { position: absolute; bottom: 0; } .offcanvas__cta-2 { position: static; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .offcanvas__cta { position: static; } } .offcanvas__cta-title { color: var(--tp-common-black); font-size: 18px; font-weight: 700; text-transform: uppercase; line-height: 22px; margin-bottom: 20px; } .offcanvas__cta span { display: block; font-size: 16px; color: var(--tp-common-black); margin-bottom: 15px; } .offcanvas__cta span a:hover { color: var(--tp-theme-primary); } /*----------------------------------------*/ /* BREADCRUMB CSS START /*----------------------------------------*/ @media (max-width: 575px) { .breadcrumb__area { padding-top: 150px; padding-bottom: 100px; } } .breadcrumb__title { font-size: 70px; color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__title { font-size: 68px; } } @media (max-width: 575px) { .breadcrumb__title { font-size: 40px; } } .breadcrumb__title-2 { font-size: 50px; line-height: 1.1; margin-top: 12px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__title-2 { font-size: 40px; } } @media (max-width: 575px) { .breadcrumb__title-2 { font-size: 26px; } } .breadcrumb__title-pre { display: inline-block; height: 24px; line-height: 26px; font-size: 14px; color: #ffffff; font-weight: 500; background: var(--tp-theme-2); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 0 7px; margin-bottom: 12px; } .breadcrumb__list span { font-size: 16px; color: var(--tp-common-white); font-weight: 500; padding-right: 3px; margin-right: 3px; text-transform: capitalize; } .breadcrumb__list span a:hover { color: var(--tp-theme-primary); } .breadcrumb__list-2 span { font-size: 14px; color: var(--tp-text-11); font-weight: 500; padding-right: 3px; margin-right: 3px; text-transform: capitalize; } .breadcrumb__list-2 span a:hover { color: var(--tp-theme-primary); } .breadcrumb__overlay { position: relative; } .breadcrumb__overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 3, 32, 0.6); } .tp-custom-accordio .accordion-items { margin-bottom: 20px; border: 1px solid #F2F5FA; } .tp-custom-accordio .accordion-buttons { position: relative; width: 100%; text-align: left; font-size: 24px; font-weight: 700; padding: 40px; padding-bottom: 20px; background-color: var(--tp-common-white); color: #212121; border-radius: 10px 10px 0 0; } @media (max-width: 575px) { .tp-custom-accordio .accordion-buttons { font-size: 17px; padding: 28px 20px; } } .tp-custom-accordio .accordion-buttons::after { position: absolute; content: "\f063"; font-family: "Font Awesome 5 Pro"; background-image: none; top: auto; right: 40px; color: var(--tp-theme-primary); width: auto; height: auto; font-weight: 300; font-size: 20px; } @media (max-width: 575px) { .tp-custom-accordio .accordion-buttons::after { top: 33px; right: 18px; } } .tp-custom-accordio .accordion-buttons.collapsed { padding: 40px; } .tp-custom-accordio .accordion-buttons.collapsed::after { content: "\f062"; color: var(--tp-common-black); } .tp-custom-accordio .collapsed { border-radius: 10px 10px 10px 10px; } .tp-custom-accordio .accordion-body { background-color: var(--tp-common-white); padding: 0; position: relative; z-index: 1; font-size: 16px; padding: 40px; padding-top: 0; padding-right: 80px; border-bottom: 4px solid var(--tp-theme-primary); } @media (max-width: 575px) { .tp-custom-accordio .accordion-body { padding: 20px 25px; } } .faq-accordio-border .accordion-items { background-color: var(--tp-common-white); border: 1px solid #F5F5F5; border-radius: 10px; } /*----------------------------------------*/ /* NAV TAB CSS START /*----------------------------------------*/ .tp-tab .nav-tabs { padding: 0; margin: 0; border: 0; } .tp-tab .nav-tabs .nav-link { padding: 0; margin: 0; border: 0; } /*----------------------------------------*/ /* MODAL CSS START /*----------------------------------------*/ /*----------------------------------------*/ /* SECTION TITLE CSS START /*----------------------------------------*/ .tp-section__title { font-size: 40px; color: var(--tp-common-black); } .tp-section__title span { color: var(--tp-theme-primary); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-section__title { font-size: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-section__title br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-section__title { font-size: 30px; } .tp-section__title br { display: none; } } @media (max-width: 575px) { .tp-section__title { font-size: 25px; } .tp-section__title br { display: none; } } .tp-section__title-wrapper p { font-size: 16px; } .error__title { font-size: 70px; } /*----------------------------------------*/ /* 02. HEADER CSS /*----------------------------------------*/ .tp-header__transparent { position: absolute !important; left: 0; margin: auto; top: 0; width: 100%; z-index: 88; background: transparent; } .tp-header__container { padding-left: 200px; padding-right: 200px; } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-header__container { padding-left: 130px; padding-right: 130px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-header__container { padding-left: 80px; padding-right: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header__container { padding-left: 0px; padding-right: 0px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-header__container { padding-left: 0px; padding-right: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-header__main { padding-top: 20px; padding-bottom: 20px; } } .tp-header__top { padding: 4px 0; } .tp-header__info ul li { list-style: none; display: inline-block; margin-right: 20px; color: var(--tp-common-white); opacity: 0.7; font-size: 12px; } .tp-header__info ul li:last-child { margin-right: 0; } .tp-header__info ul li:hover { opacity: 1; } .tp-header__info ul li a i { margin-right: 5px; } .tp-header__info ul li a svg { width: 13px; height: 13px; margin-right: 5px; } .tp-header__info ul li a svg path { fill: var(--tp-text-4); } .tp-header__border { border-bottom: 1px solid rgba(3, 18, 32, 0.07); } .tp-header__search-input { position: relative; } .tp-header__search-input input { width: 100%; height: 40px; background-color: var(--tp-grey-1); border: 1px solid var(--tp-grey-1); padding: 0 20px; padding-right: 60px; } .tp-header__search-input input::-webkit-input-placeholder { color: var(--tp-text-3); } .tp-header__search-input input:-moz-placeholder { color: var(--tp-text-3); } .tp-header__search-input input::-moz-placeholder { color: var(--tp-text-3); } .tp-header__search-input input:-ms-input-placeholder { color: var(--tp-text-3); } .tp-header__search-btn { position: absolute; top: 46%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 15px; font-size: 16px; color: var(--tp-common-black); padding-left: 17px; background-color: var(--tp-grey-1); } .tp-header__search-btn::after { position: absolute; content: ""; left: 0; top: 57%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 100%; width: 1px; background-color: rgba(3, 18, 32, 0.1); } .tp-header__search-2 { margin-left: 13px; } .tp-header__search-2 input { height: 44px; line-height: 44px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; background-color: var(--tp-grey-5); } .tp-header__search-2 input::-webkit-input-placeholder { color: var(--tp-text-10); } .tp-header__search-2 input:-moz-placeholder { color: var(--tp-text-10); } .tp-header__search-2 input::-moz-placeholder { color: var(--tp-text-10); } .tp-header__search-2 input:-ms-input-placeholder { color: var(--tp-text-10); } .tp-header__search-2 button::after { background-color: rgba(62, 132, 84, 0.14); } .tp-header__search-3 button svg path { stroke: var(--tp-theme-3); } .tp-header__hamburger { margin-top: 3px; } .tp-header__sticky.header__sticky { position: fixed !important; left: 0; margin: auto; top: 0; width: 100%; box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07); z-index: 99; -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1); background: var(--tp-common-white); } .tp-header__account ul li { display: inline-block; margin-right: 10px; } .tp-header__account ul li a { color: var(--tp-common-white); font-size: 12px; opacity: 0.7; } .tp-header__account ul li a:hover { opacity: 1; } .tp-header__account ul li a i { margin-right: 5px; } .tp-header__category { position: relative; margin-right: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header__category { margin-right: 10px; } } .tp-header__category svg { width: 16px; } .tp-header__category svg .cat-dot { fill: var(--tp-common-black); } .tp-header__category::after { position: absolute; content: ""; left: 0; top: 60%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 40px; } .tp-header__category ul li { position: relative; list-style: none; } .tp-header__category ul li .cat-submenu { position: absolute; top: calc(100% + 30px); left: 0; width: 200px; padding: 17px 0; padding-bottom: 15px; background: var(--tp-common-white); -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08); -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08); -ms-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08); -o-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08); box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; z-index: 1; visibility: hidden; 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; } .tp-header__category ul li .cat-submenu li { display: block; margin-right: 0; } .tp-header__category ul li .cat-submenu li > a { width: 100%; display: block; padding: 3px 30px; text-transform: capitalize; color: var(--tp-text-body); font-weight: 500; position: relative; } .tp-header__category ul li .cat-submenu li > a::after { right: 30px; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } .tp-header__category ul li .cat-submenu li:hover > a { color: var(--tp-theme-primary); } .tp-header__category ul li:hover .cat-submenu { visibility: visible; opacity: 1; top: calc(100% + 10px); } .tp-header__search form { position: relative; } .tp-header__search form input { height: 46px; border: 0; background-color: var(--tp-grey-2); padding-left: 20px; padding-right: 40px; border-radius: 6px; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-header__search form input { width: 200px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-header__search form input { width: 170px; } } .tp-header__search form input::-webkit-input-placeholder { color: #838b95; } .tp-header__search form input:-moz-placeholder { color: #838b95; } .tp-header__search form input::-moz-placeholder { color: #838b95; } .tp-header__search form input:-ms-input-placeholder { color: #838b95; } .tp-header__search form button { position: absolute; top: 50%; transform: translateY(-50%); right: 20px; } .tp-header__search-2 form { padding-top: 17px; padding-bottom: 17px; position: relative; } .tp-header__search-2 form input { width: 350px; } .cat-menu { font-weight: 500; } .cat-menu i { margin-left: 5px; display: inline-block; } /* logo */ .logo.has-border { border-right: 1px solid; border-color: rgba(255, 255, 255, 0.1); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .logo.has-border { border-right: 0; } } .logo img { width: 150px; } .cat-dot-icon { margin-right: 10px; } .header-sticky { position: fixed; top: 0; left: 0; right: 0; background-color: var(--tp-common-white); animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.09); z-index: 91; } /* main menu css */ .tp-header__transparent .main-menu ul li { position: relative; list-style: none; display: inline-block; margin-right: 35px; text-align: left; } .tp-header__transparent .main-menu ul li a { display: inline-block; font-size: 14px; color: var(--tp-common-white); padding: 27px 0; font-weight: 500; } .tp-header__transparent .main-menu ul li.has-dropdown > a { position: relative; } .tp-header__transparent .main-menu ul li.has-dropdown > a::after { content: "\f107"; -webkit-transform: translateY(1px); -moz-transform: translateY(1px); -ms-transform: translateY(1px); -o-transform: translateY(1px); transform: translateY(1px); font-size: 14px; color: var(--tp-common-white); font-family: var(--tp-ff-fontawesome); font-weight: 400; margin-left: 5px; display: inline-block; -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; } .tp-header__transparent .main-menu ul li .submenu { position: absolute; top: 120%; left: 0; width: 200px; background: var(--tp-common-white); 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; visibility: hidden; opacity: 0; -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); -ms-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); -o-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); padding-top: 20px; padding-bottom: 20px; border-top: 3px solid var(--tp-theme-primary); } .tp-header__transparent .main-menu ul li .submenu li { display: block; width: 100%; margin: 0; } .tp-header__transparent .main-menu ul li .submenu li.has-dropdown > a::after { position: absolute; top: 50%; right: 25px; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } .tp-header__transparent .main-menu ul li .submenu li a { padding: 5px 25px; font-size: 13px; position: relative; z-index: 1; color: var(--tp-common-black); width: 100%; } .tp-header__transparent .main-menu ul li .submenu li .submenu { left: 120%; top: 0; visibility: hidden; opacity: 0; } .tp-header__transparent .main-menu ul li .submenu li:hover > a { color: var(--tp-theme-primary); } .tp-header__transparent .main-menu ul li .submenu li:hover > a::after { color: var(--tp-theme-primary); } .tp-header__transparent .main-menu ul li .submenu li:hover > a::before { left: 0; right: auto; width: 100%; } .tp-header__transparent .main-menu ul li .submenu li:hover > .submenu { left: 100%; visibility: visible; opacity: 1; } .tp-header__transparent .main-menu ul li:hover > a { color: #fbe48a; } .tp-header__transparent .main-menu ul li:hover > a::after { color: var(--tp-theme-primary); transform: rotate(-180deg); } .tp-header__transparent .main-menu ul li:hover > .submenu { top: 100%; visibility: visible; opacity: 1; } .tp-header__transparent .hamburger-btn span { background-color: var(--tp-common-white); } .tp-header__transparent .header-sticky { background-color: #006147; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu { padding-left: 30px; } } .main-menu ul li { position: relative; list-style: none; display: inline-block; margin-right: 35px; text-align: left; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu ul li { margin-right: 30px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .main-menu ul li { margin-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu ul li { margin-right: 20px; } } .main-menu ul li:last-child { margin-right: 0; } .main-menu ul li a { display: inline-block; font-size: 14px; color: var(--tp-common-black); padding: 27px 0; font-weight: 500; } .main-menu ul li.has-dropdown > a { position: relative; } .main-menu ul li.has-dropdown > a::after { content: "\f107"; -webkit-transform: translateY(1px); -moz-transform: translateY(1px); -ms-transform: translateY(1px); -o-transform: translateY(1px); transform: translateY(1px); font-size: 14px; color: var(--tp-common-black); font-family: var(--tp-ff-fontawesome); font-weight: 400; margin-left: 5px; display: inline-block; -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; } .main-menu ul li .submenu { position: absolute; top: 120%; left: 0; width: 200px; background: var(--tp-common-white); 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; visibility: hidden; opacity: 0; padding-top: 20px; padding-bottom: 20px; border-top: 3px solid var(--tp-theme-primary); -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); -ms-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); -o-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); } .main-menu ul li .submenu li { display: block; width: 100%; margin: 0; } .main-menu ul li .submenu li.has-dropdown > a::after { position: absolute; top: 50%; right: 25px; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } .main-menu ul li .submenu li a { padding: 5px 25px; font-size: 13px; position: relative; z-index: 1; color: var(--tp-common-black); width: 100%; } .main-menu ul li .submenu li .submenu { left: 120%; top: 0; visibility: hidden; opacity: 0; } .main-menu ul li .submenu li:hover > a { color: var(--tp-theme-primary); } .main-menu ul li .submenu li:hover > a::after { color: var(--tp-theme-primary); } .main-menu ul li .submenu li:hover > a::before { left: 0; right: auto; width: 100%; } .main-menu ul li .submenu li:hover > .submenu { left: 100%; visibility: visible; opacity: 1; } .main-menu ul li:hover > a { color: var(--tp-theme-primary); } .main-menu ul li:hover > a::after { color: var(--tp-theme-primary); transform: rotate(-180deg); } .main-menu ul li:hover > .submenu { top: 100%; visibility: visible; opacity: 1; } .main-menu-2 ul li { position: relative; list-style: none; display: inline-block; margin-right: 35px; text-align: left; } .main-menu-2 ul li a { display: inline-block; font-size: 14px; color: var(--tp-common-white); padding: 15px 0; font-weight: 500; } .main-menu-2 ul li.has-dropdown > a { position: relative; } .main-menu-2 ul li.has-dropdown > a::after { content: "\f107"; -webkit-transform: translateY(1px); -moz-transform: translateY(1px); -ms-transform: translateY(1px); -o-transform: translateY(1px); transform: translateY(1px); font-size: 14px; color: var(--tp-common-white); font-family: var(--tp-ff-fontawesome); font-weight: 400; margin-left: 5px; display: inline-block; -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; } .main-menu-2 ul li .submenu { position: absolute; top: 120%; left: 0; width: 200px; background: var(--tp-common-white); 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; visibility: hidden; opacity: 0; border-top: 3px solid var(--tp-theme-primary); -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); -ms-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); -o-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08); } .main-menu-2 ul li .submenu li { display: block; width: 100%; margin: 0; } .main-menu-2 ul li .submenu li.has-dropdown > a::after { position: absolute; top: 50%; right: 25px; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } .main-menu-2 ul li .submenu li a { padding: 5px 25px; font-size: 13px; position: relative; z-index: 1; color: var(--tp-common-black); width: 100%; } .main-menu-2 ul li .submenu li .submenu { left: 120%; top: 0; visibility: hidden; opacity: 0; } .main-menu-2 ul li .submenu li:hover > a { color: var(--tp-theme-secondary); } .main-menu-2 ul li .submenu li:hover > a::after { color: var(--tp-theme-secondary); } .main-menu-2 ul li .submenu li:hover > a::before { left: 0; right: auto; width: 100%; } .main-menu-2 ul li .submenu li:hover > .submenu { left: 100%; visibility: visible; opacity: 1; } .main-menu-2 ul li:hover > a { color: var(--tp-theme-secondary); } .main-menu-2 ul li:hover > a::after { color: var(--tp-theme-secondary); transform: rotate(-180deg); } .main-menu-2 ul li:hover > .submenu { top: 100%; visibility: visible; opacity: 1; } @media only screen and (min-width: 992px) and (max-width: 99999px) { .tp-header__area.header-sticky .tp-header__main { display: none; } } .header-acttion-btns .tp-hader-btn { margin-right: 40px; } .header-acttion-btns .avata { width: 36px; height: 36px; border-radius: 50%; border: 2px solid; display: inline-block; text-align: center; line-height: 32px; color: var(--tp-common-white); border-color: rgba(255, 255, 255, 0.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; } .header-acttion-btns .avata:hover { border-color: rgba(255, 255, 255, 0.7); } /*----------------------------------------*/ /* 03. MEAN MENU CSS /*----------------------------------------*/ /* mean menu customize */ .mean-container a.meanmenu-reveal { display: none; } .mean-container .mean-nav { background: none; margin-top: 0; } .mean-container .mean-bar { padding: 0; min-height: auto; background: none; } .mean-container .mean-nav > ul { padding: 0; margin: 0; width: 100%; list-style-type: none; display: block !important; } .mean-container a.meanmenu-reveal { display: none !important; } .mean-container .mean-nav ul li a { width: 100%; padding: 10px 0; color: var(--tp-common-black); border-top: 1px solid #ebebeb; font-size: 14px; line-height: 1.5; font-weight: 700; } .mean-container .mean-nav ul li a:hover { color: var(--tp-theme-primary); } .mean-container .mean-nav ul li a.mean-expand { margin-top: 5px; padding: 0 !important; line-height: 14px; border: 1px solid #ebebeb !important; height: 30px; width: 30px; line-height: 30px; color: var(--tp-common-black); line-height: 30px; top: 0; font-weight: 400; } .mean-container .mean-nav ul li a.mean-expand:hover { background: var(--tp-theme-primary); color: var(--tp-common-white); border-color: var(--tp-theme-primary); } .mean-container .mean-nav ul li > a > i { display: none; } .mean-container .mean-nav ul li > a.mean-expand i { display: inline-block; } .mean-container .mean-nav > ul > li:first-child > a { border-top: 0; } .mean-container .mean-nav ul li a.mean-expand.mean-clicked { color: var(--tp-common-white); background-color: var(--tp-theme-primary); } .mean-container .mean-nav ul li a.mean-expand.mean-clicked i { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); color: var(--tp-common-white); } /*----------------------------------------*/ /* 04. SLIDER CSS /*----------------------------------------*/ .tp-slider__section { margin-bottom: -70px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-slider__section { margin-bottom: -15px; } } .tp-slider__height { min-height: 950px; background-size: cover; background-repeat: no-repeat; background-position: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-slider__height { min-height: 750px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-slider__height { min-height: 650px; } } @media (max-width: 575px) { .tp-slider__height { min-height: 450px; } } .tp-slider__height-2 { min-height: 820px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-slider__height-2 { min-height: 750px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-slider__height-2 { min-height: 650px; } } @media (max-width: 575px) { .tp-slider__height-2 { min-height: 450px; } } .tp-slider__item { background-size: cover; background-position: center; background-repeat: no-repeat; } .tp-slider__overlay { position: relative; z-index: 1; } .tp-slider__overlay::after { position: absolute; content: ""; top: 0; left: 0; right: auto; width: 100%; height: 100%; -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); transform: translate(0%, 0%); background-color: var(--tp-common-black); background-color: rgb(0, 6, 20); opacity: 0.8; z-index: -1; } .tp-slider__subtitle { color: var(--tp-common-white); font-size: 20px; margin-bottom: 10px; display: inline-block; } .tp-slider__title { font-size: 90px; color: var(--tp-common-white); font-weight: var(--tp-fw-bold); line-height: 1.1; margin-bottom: 20px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-slider__title { font-size: 60px; } .tp-slider__title br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-slider__title { font-size: 60px; } } @media (max-width: 575px) { .tp-slider__title { font-size: 45px; } } .tp-slider__title-pre { font-size: 18px; font-weight: 500; color: var(--tp-common-white); display: inline-block; margin-bottom: 15px; text-transform: uppercase; } .tp-slider__content p { font-size: 18px; line-height: 28px; color: var(--tp-common-white); margin-bottom: 45px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider__arrows { display: none; } } .tp-slider__arrows button { position: absolute; top: 50%; left: 30px; z-index: 1; font-size: 50px; font-weight: 300; color: var(--tp-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-slider__arrows button { left: 10px; } } .tp-slider__arrows button.slick-next { left: auto; right: 30px; z-index: 11; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-slider__arrows button.slick-next { right: 10px; } } .tp-slider__dot { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 9; text-align: center; } .tp-slider__dot .swiper-pagination-bullet { width: 8px; height: 8px; background-color: var(--tp-common-white); margin: 0 8px; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .slider-play-btn { font-size: 14px; color: var(--tp-common-dark-3); text-transform: capitalize; font-weight: 700; } @media (max-width: 575px) { .slider-play-btn { display: block; } } .slider-play-btn .slider-play-btn-icon { display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; background-color: var(--tp-common-white); color: var(--tp-common-dark-3); border-radius: 50%; } .slider-play-btn .slider-play-btn-text { margin-left: 20px; } .slider-play-btn:hover { color: var(--tp-common-white); } /*----------------------------------------*/ /* 05. HERO CSS /*----------------------------------------*/ /* hero css start here */ .tp-hero__shapes-1 { position: absolute; top: 110px; left: 50%; animation: tp-float-1 6s infinite alternate; } .tp-hero__shapes-2 { position: absolute; top: 310px; right: 5%; animation: tp-float-2 8s infinite alternate; } .tp-hero__shapes-3 { position: absolute; bottom: 100px; left: 5%; animation: tp-float-1 5s infinite alternate; } .tp-hero__shapes-4 { position: absolute; top: 0; right: 0; } .tp-hero__shapes-5 { position: absolute; bottom: 270px; right: 0; animation: tpswing 1s ease-in-out 1s forwards infinite alternate; transform-origin: top bottom; } .tp-hero__shapes-6 { position: absolute; top: 240px; left: 13%; animation: tp-float-2 7s infinite alternate; } .tp-hero__img { margin-left: -80px; } .tp-hero__section { margin-bottom: -100px; } .tp-hero__subtitle { font-size: 20px; display: inline-block; } .tp-hero__title { font-size: 70px; font-weight: 800; line-height: 1.1; } @media (max-width: 575px) { .tp-hero__title { font-size: 48px; } } .tp-hero__content { position: relative; z-index: 1; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero__content { padding-top: 0; } } .tp-hero__content p { font-size: 18px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero__img img { width: 100%; } } /*----------------------------------------*/ /* 06. ABOUT CSS /*----------------------------------------*/ .tp-about__img-large { position: relative; z-index: 1; margin-right: 30px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about__img-large { margin-right: 0; } } .tp-about__img-sm { position: relative; z-index: 1; margin-top: 220px; margin-right: 40px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about__img-sm { margin-right: 0; margin-top: 0; } } .tp-about__shapes-1 { position: absolute; top: -50px; left: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-about__shapes-1 > img { width: 100%; } } .tp-about__shapes-2 { position: absolute; top: 30%; text-align: center; left: 0; right: 0; transform: translateX(110px); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about__shapes-2 { transform: translateX(0); } } .tp-about__shapes-2 img { display: inline-block; } .tp-about__feature-list ul li { list-style: none; font-size: 15px; font-weight: 700; padding-left: 35px; position: relative; margin-bottom: 20px; } .tp-about__feature-list ul li i { background-image: -moz-linear-gradient(120deg, rgb(43, 112, 250) 0%, rgb(132, 188, 250) 100%); background-image: -webkit-linear-gradient(120deg, rgb(43, 112, 250) 0%, rgb(132, 188, 250) 100%); background-image: -ms-linear-gradient(120deg, rgb(43, 112, 250) 0%, rgb(132, 188, 250) 100%); box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3); width: 25px; height: 25px; line-height: 25px; text-align: center; border-radius: 50%; display: inline-block; color: var(--tp-common-white); position: absolute; left: 0; } .tp-about__feature-list ul li:hover i { box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3); } .tp-about-2__img-large { position: relative; z-index: 1; margin-right: 30px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-2__img-large { margin-right: 0; } } .tp-about-2__img-sm { position: relative; z-index: 1; margin-right: 40px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-2__img-sm { margin-right: 0; margin-top: 0; } } .tp-about-2__shapes-1 { position: absolute; right: 0px; top: 80%; z-index: -1; animation: tp-float-3 4s infinite alternate; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-2__shapes-1 img { width: 100%; } } .tp-about-2__shapes-2 { position: absolute; left: 30px; bottom: 150px; z-index: -1; animation: tp-float-2 6s infinite alternate; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-2__shapes-2 { transform: translateX(0); } } .tp-about-2__shapes-2 img { display: inline-block; } .tp-about-2__shapes-3 { position: absolute; left: 100px; top: 50%; z-index: -1; animation: tp-float-2 6s infinite alternate; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-2__shapes-3 { display: none; } } .tp-about-2__shapes-3 img { display: inline-block; } .tp-about-2__shapes-4 { position: absolute; left: 50%; top: 150px; z-index: -1; animation: tp-float-2 6s infinite alternate; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-2__shapes-4 { transform: translateX(0); } } .tp-about-2__shapes-4 img { display: inline-block; } .tp-about-2__shapes-7 { position: absolute; left: 70%; top: 260px; z-index: 1; animation: tp-float-2 6s infinite alternate; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-2__shapes-7 { left: 0; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-2__shapes-7 { transform: translateX(0); left: 7%; } } .tp-about-2__shapes-7 img { display: inline-block; } .tp-about-2__shapes-8 { position: absolute; right: 0px; top: 260px; z-index: 1; animation: tpswing 1s ease-in-out 1s forwards infinite alternate; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-2__shapes-8 { transform: translateX(0); } } .tp-about-2__shapes-8 img { display: inline-block; } .tp-about-2__feature-list { display: inline-block; } .tp-about-2__feature-list ul li { list-style: none; font-size: 16px; font-weight: 500; padding-left: 35px; position: relative; margin-bottom: 30px; width: 50%; float: left; color: #000f2f; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-2__feature-list ul li { width: 100%; } } .tp-about-2__feature-list ul li i { display: inline-block; color: var(--tp-theme-primary); position: absolute; left: 0; top: 2px; -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-size: 20px; } .tp-about-2__feature-list ul li:hover i { transform: rotateY(-180deg); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-2__right { margin-left: 0; } } .tp-about-3__img-large { position: relative; z-index: 1; margin-right: 30px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-3__img-large { margin-right: 0; } } .tp-about-3__img-sm { position: relative; z-index: 1; margin-right: 40px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-3__img-sm { margin-right: 0; margin-top: 0; } } .tp-about-3__shapes-1 { position: absolute; left: -40px; bottom: 110px; z-index: -1; animation: tp-float-3 4s infinite alternate; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-3__shapes-1 img { width: 100%; } } .tp-about-3__feature-list { display: inline-block; } .tp-about-3__feature-list ul li { list-style: none; font-size: 16px; font-weight: 400; padding-left: 70px; position: relative; margin-bottom: 50px; width: 50%; float: left; color: #011025; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-3__feature-list ul li { width: 100%; } } .tp-about-3__feature-list ul li i { width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 50%; display: inline-block; color: var(--tp-theme-primary); background-color: rgba(40, 120, 235, 0.1); position: absolute; top: 50%; transform: translateY(-50%); left: 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; font-size: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-3__right { margin-left: 0; } } .tp-about-3__whitebox { background-color: var(--tp-common-white); position: absolute; bottom: 30px; right: 30px; padding: 30px; border-radius: 10px; padding-right: 50px; box-shadow: 0px 10px 20px 0px rgba(1, 16, 37, 0.06); } .tp-about-3__whitebox span { width: 50px; height: 50px; line-height: 50px; text-align: center; text-align: center; display: inline-block; background-color: #f2f7fe; font-size: 21px; color: var(--tp-theme-primary); margin-bottom: 30px; border-radius: 6px; } .tp-about-3__whitebox h4 { font-size: 18px; } .tp-about-3__img-wrapper { margin-right: 50px; margin-left: -80px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-3__img-wrapper { margin-right: 0; } } /*----------------------------------------*/ /* 07. TEAM CSS /*----------------------------------------*/ .tp-team__overlay { position: relative; } .tp-team__overlay::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: -moz-linear-gradient(90deg, rgba(0, 5, 14, 0.8) 0%, rgba(0, 5, 14, 0.54) 32%, rgba(0, 5, 14, 0) 100%); background-image: -webkit-linear-gradient(90deg, rgba(0, 5, 14, 0.8) 0%, rgba(0, 5, 14, 0.54) 32%, rgba(0, 5, 14, 0) 100%); background-image: -ms-linear-gradient(90deg, rgba(0, 5, 14, 0.8) 0%, rgba(0, 5, 14, 0.54) 32%, rgba(0, 5, 14, 0) 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; pointer-events: none; } .tp-team__member:hover .tp-team__info { opacity: 0; transform: translateY(100%); } .tp-team__member:hover .tp-team__social { opacity: 1; transform: translateY(0); } .tp-team__member:hover .tp-team__img img { transform: scale(1.05, 1.05); } .tp-team__member:hover .tp-team__overlay::after { opacity: 0; } .tp-team__img img { -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; } .tp-team__info { width: 100%; position: absolute; bottom: 10px; z-index: 1; color: var(--tp-common-white); -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; } .tp-team__name { font-size: 18px; color: var(--tp-common-white); line-height: 1; margin-bottom: 0; } .tp-team__social { position: absolute; bottom: 0; transform: translateY(100%); width: 100%; text-align: center; z-index: 3; background-color: var(--tp-theme-primary); z-index: 2; padding: 15px 0; 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; } .tp-team__social span { margin: 0 5px; } .tp-team__social span a { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; display: inline-block; text-align: center; line-height: 36px; color: var(--tp-common-white); border: 2px solid; border-color: rgba(255, 255, 255, 0.3); } .tp-team__social span a:hover { background-color: var(--tp-common-white); color: var(--tp-theme-primary); } .tp-team-2__overlay::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: -moz-linear-gradient(90deg, rgb(0, 5, 14) 0%, rgba(0, 5, 14, 0.68) 32%, rgba(0, 5, 14, 0) 100%); background-image: -webkit-linear-gradient(90deg, rgb(0, 5, 14) 0%, rgba(0, 5, 14, 0.68) 32%, rgba(0, 5, 14, 0) 100%); background-image: -ms-linear-gradient(90deg, rgb(0, 5, 14) 0%, rgba(0, 5, 14, 0.68) 32%, rgba(0, 5, 14, 0) 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; opacity: 0; border-radius: 6px; } .tp-team-2__member:hover .tp-team-2__social { opacity: 1; transform: translateY(0); } .tp-team-2__member:hover .tp-team-2__overlay::after { opacity: 1; } .tp-team-2__img img { -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; border-radius: 6px; } .tp-team-2__info { padding-top: 20px; } .tp-team-2__name { font-size: 20px; line-height: 1; margin-bottom: 0; } .tp-team-2__name a:hover { color: var(--tp-theme-primary); } .tp-team-2__social { position: absolute; bottom: 20px; transform: translateY(100%); width: 100%; left: 25px; z-index: 2; 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; } .tp-team-2__social span { margin-right: 10px; } .tp-team-2__social span a { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 4px; line-height: 36px; display: inline-block; text-align: center; color: var(--tp-common-white); border: 2px solid; border-color: rgba(255, 255, 255, 0.1); } .tp-team-2__social span a:hover { background-color: var(--tp-common-white); color: var(--tp-theme-primary); } .tp-team-2__ratting { color: #faa423; } .tp-team-2__pro { color: var(--tp-text-2); display: inline-block; margin-bottom: 5px; } .teacher__item { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; padding: 30px; } .teacher__item:hover { background: var(--tp-common-white); -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1); -moz-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1); -ms-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1); -o-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1); box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1); } .teacher__item:hover .teacher__thumb img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .teacher__content { padding-top: 25px; } .teacher__content span { font-size: 16px; } .teacher__title { display: inline-block; font-size: 20px; margin-bottom: 10px; } .teacher__social ul li { display: inline-block; margin: 0 5px; } .teacher__social ul li a { display: inline-block; width: 36px; height: 36px; line-height: 36px; font-size: 13px; text-align: center; border: 2px solid red; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; color: var(var(--tp-common-black)); } .teacher__social ul li a:hover { background: var(--tp-theme-primary); color: var(--tp-common-white); border-color: red; } @media only screen and (min-width: 576px) and (max-width: 767px) { .teacher__social-2 { margin-bottom: 30px; } } @media (max-width: 575px) { .teacher__social-2 { margin-bottom: 30px; } } .teacher__social-2 h4 { font-size: 16px; font-weight: 500; margin-bottom: 0; } .teacher__social-2 ul li { display: inline-block; } .teacher__social-2 ul li a { font-size: 14px; color: #898a93; margin: 2px; } .teacher__social-2 ul li a:hover { color: var(--tp-theme-primary); } @media only screen and (min-width: 576px) and (max-width: 767px) { .teacher__rating { margin-bottom: 30px; } } @media (max-width: 575px) { .teacher__rating { margin-bottom: 30px; } } .teacher__rating span { font-size: 16px; } .teacher__rating span i { padding-right: 5px; } .teacher__rating h5 { font-size: 14px; font-weight: 600; margin-bottom: 0; } .teacher__rating ul li { display: inline-block; } .teacher__rating ul li a { font-size: 14px; color: var(--tp-theme-secondary); } .teacher__rating-inner p { font-size: 16px; color: var(var(--tp-common-black)); font-weight: 600; margin-bottom: 0; padding-left: 3px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .teacher__info { margin-bottom: 30px; } } @media (max-width: 575px) { .teacher__info { margin-bottom: 30px; } } .teacher__info h4 { font-size: 40px; margin-bottom: 0; } .teacher__info span { font-size: 16px; } .teacher__follow-btn { display: inline-block; height: 40px; line-height: 40px; text-align: center; padding: 0 25px; border: 2px solid #eef0f6; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; color: var(var(--tp-common-black)); font-weight: 16px; font-weight: 500; text-transform: capitalize; background: var(--tp-common-white); } .teacher__follow-btn:hover { background-color: var(--tp-theme-primary); color: var(--tp-common-white); border-color: transparent; } .teacher__top { padding-bottom: 20px; border-bottom: 1px solid #e8eaf0; } .teacher__bio { padding-bottom: 50px; padding-top: 35px; border-bottom: 1px solid #e8eaf0; } .teacher__bio h3 { font-size: 20px; margin-bottom: 15px; } .teacher__bio p { font-size: 16px; line-height: 26px; margin-bottom: 0; } .teacher__courses .section__title { font-size: 30px; } .teacher__details-thumb img { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .teacher__details-thumb { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .teacher__details-thumb { margin-bottom: 50px; } } @media (max-width: 575px) { .teacher__details-thumb { margin-bottom: 50px; padding-right: 0; } } .teacher__details-shape img { position: absolute; z-index: -1; width: auto; } .teacher__details-shape img.teacher-details-shape-1 { right: 0px; bottom: 70px; } .teacher__details-shape img.teacher-details-shape-2 { left: -27px; top: 55px; } /*----------------------------------------*/ /* 08. SERVICES CSS /*----------------------------------------*/ .services__item { padding: 45px 45px 40px; position: relative; z-index: 1; } @media (max-width: 575px) { .services__item { padding-left: 35px; padding-right: 35px; } } .services__icon { margin-bottom: 20px; } .services__icon i { font-size: 60px; color: var(--tp-theme-primary); } .services__counter { counter-reset: count; } .services__counter-2 { counter-reset: count2; } .services__title { font-size: 26px; color: var(--tp-common-black); text-transform: uppercase; margin-bottom: 15px; } .services__title a:hover { color: var(--tp-theme-primary); } .services__no span { display: inline-block; font-size: 14px; color: var(--tp-text-1); position: relative; padding-right: 20px; text-transform: uppercase; } .services__no span::after { position: absolute; counter-increment: count; content: "0" counter(count); right: 0; top: 48%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: var(--tp-text-1); } .services__no-text { position: relative; } .services__no-text::before { position: absolute; counter-increment: count2; content: "0" counter(count2); right: -45px; top: 25px; -webkit-text-fill-color: transparent; background: var(--tp-common-white); -webkit-background-clip: text; -webkit-text-stroke: 1px var(--tp-border-1); color: var(--tp-common-white) !important; font-size: 170px; z-index: -1; font-weight: 700; } .services__content { position: relative; border: 1px solid var(--tp-border-2); border-top: 0; padding: 30px 0px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .services__content { padding-left: 15px; padding-right: 15px; } } .services__box-item { padding: 40px 30px; } .services__box-title { font-size: 26px; color: var(--tp-common-black); text-transform: uppercase; margin-bottom: 15px; } .services__box-title a:hover { color: var(--tp-theme-primary); } .services__box-icon { margin-bottom: 20px; } .services__box-icon i { font-size: 60px; color: var(--tp-theme-primary); } .services__box-content p { font-size: 16px; color: var(--tp-text-1); } .services__grid-tag { position: absolute; top: 0; right: 20px; } .services__grid-tag span { color: var(--tp-common-white); font-size: 14px; font-weight: 700; display: inline-block; padding: 0 18px; padding-top: 2px; background-color: var(--tp-theme-primary); text-transform: uppercase; } .services__grid-tag span:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .services__grid-title { font-size: 26px; color: var(--tp-common-black); text-transform: uppercase; margin-bottom: 15px; } .services__grid-title a:hover { color: var(--tp-theme-primary); } .services__grid-content { padding: 30px 30px 40px; border: 1px solid var(--tp-border-1); border-top: none; } .services__grid-content p { font-size: 16px; color: var(--tp-text-1); } .services__square-item:hover .services__thumb-3 img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .services__square-title { font-size: 24px; color: var(--tp-common-black); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__square-title { font-size: 20px; } } .services__square-title a:hover { color: var(--tp-theme-primary); } .services__square-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 120px; height: 120px; text-align: center; line-height: 135px; background-color: var(--tp-common-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; z-index: 1; } .services__square-icon i { display: inline-block; width: 60px; height: 60px; line-height: 60px; font-size: 50px; } .services__square-thumb { z-index: 1; } .services__square-thumb::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--tp-common-black); opacity: 0.5; } .services__square-content { padding-top: 20px; } .services__details-thumb { margin-bottom: 50px; } .services__details-title { font-size: 40px; text-transform: uppercase; margin-bottom: 23px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__details-title { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services__details-title { font-size: 30px; } } .services__details-content p { font-size: 16px; line-height: 1.6; margin-bottom: 15px; } .services__details-question h4 { font-size: 20px; text-transform: uppercase; margin-bottom: 20px; } .services__details-question ul li { list-style: none; line-height: 1; } .services__details-question ul li p { font-size: 16px; line-height: 1.6; } .services__details-question ul li p span { color: var(--tp-common-black); font-weight: 700; } .services__details-process h4 { font-size: 20px; text-transform: uppercase; margin-bottom: 22px; } .services__details-contact { padding: 50px 60px 60px; border: 1px solid #f1f1f1; box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services__details-contact { padding-left: 15px; padding-right: 15px; } } .services__details-contact h4 { font-size: 40px; text-transform: uppercase; margin-bottom: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services__details-contact h4 { font-size: 30px; } } .services__details-contact .contact__input input, .services__details-contact .contact__input textarea { background-color: var(--tp-grey-4); border-color: var(--tp-grey-4); } .services__details-contact .contact__input input:focus, .services__details-contact .contact__input textarea:focus { border-color: var(--tp-theme-primary); } .services__details-contact .contact__input input::-webkit-input-placeholder, .services__details-contact .contact__input textarea::-webkit-input-placeholder { color: var(--tp-text-12); } .services__details-contact .contact__input input:-moz-placeholder, .services__details-contact .contact__input textarea:-moz-placeholder { color: var(--tp-text-12); } .services__details-contact .contact__input input::-moz-placeholder, .services__details-contact .contact__input textarea::-moz-placeholder { color: var(--tp-text-12); } .services__details-contact .contact__input input:-ms-input-placeholder, .services__details-contact .contact__input textarea:-ms-input-placeholder { color: var(--tp-text-12); } .services__details-contact .contact__input i { color: var(--tp-common-black); } .services__widget { padding: 33px 40px 30px; border: 1px solid #f3f3f3; } .services__widget-title { font-size: 20px; text-transform: uppercase; padding-right: 70px; position: relative; margin-bottom: 17px; } .services__widget-title::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 70px; height: 1px; background-color: var(--tp-theme-primary); } .services__widget ul li { list-style: none; margin-bottom: 2px; } .services__widget ul li:last-child { margin-bottom: 0; } .services__widget ul li a { font-size: 16px; color: var(--tp-text-1); padding-left: 30px; position: relative; } .services__widget ul li a::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 1px; background-color: var(--tp-common-black); } .services__widget ul li:hover > a { color: var(--tp-theme-primary); padding-left: 40px; } .services__widget ul li:hover > a::after { background-color: var(--tp-theme-primary); width: 22px; } .services-widget-banner { position: relative; background-color: var(--tp-grey-4); z-index: 1; padding: 50px 25px 35px; } .services-widget-banner .services-banner-shape-1 { position: absolute; bottom: 0; left: 0; width: 100%; z-index: -1; } .services-widget-banner .services-banner-content { text-align: center; } .services-widget-banner .services-banner-content span { font-size: 14px; display: inline-block; margin-bottom: 5px; } .services-widget-banner .services-banner-content h5 { font-size: 20px; text-transform: uppercase; margin-bottom: 15px; } .services-widget-banner .services-banner-content p { font-size: 30px; color: var(--tp-theme-primary); font-weight: 700; position: relative; display: inline-block; } .services-widget-banner .services-banner-content p::after { position: absolute; content: ""; left: 0; bottom: -3px; width: 100%; height: 2px; background-color: var(--tp-theme-primary); } /*----------------------------------------*/ /* 09. PORTFOLIO CSS /*----------------------------------------*/ .portfolio__item { min-height: 416px; position: relative; z-index: 1; } .portfolio__item::after { position: absolute; content: ""; top: 0; left: 0; right: auto; width: 100%; height: 100%; -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); transform: translate(0%, 0%); background-color: var(--tp-common-black); opacity: 0; } .portfolio__item:hover::after { opacity: 0.9; } .portfolio__item:hover .portfolio__content { bottom: 45px; opacity: 1; visibility: visible; } @media (max-width: 575px) { .portfolio__item:hover .portfolio__content { bottom: 20px; } } .portfolio__item:hover .portfolio__view { top: 50px; opacity: 1; visibility: visible; } @media (max-width: 575px) { .portfolio__item:hover .portfolio__view { top: 20px; } } .portfolio__title { font-size: 24px; color: var(--tp-common-white); text-transform: uppercase; margin-bottom: 0; } .portfolio__title a:hover { color: var(--tp-theme-primary); } .portfolio__content { position: absolute; bottom: 0; left: 50px; z-index: 1; visibility: hidden; opacity: 0; } @media (max-width: 575px) { .portfolio__content { left: 20px; } } .portfolio__tag { display: inline-block; font-size: 14px; font-weight: 700; color: var(--tp-common-white); text-transform: uppercase; margin-bottom: 5px; } .portfolio__tag-3 { position: absolute; bottom: 0; left: 40px; } .portfolio__tag-3 a { display: inline-block; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--tp-common-black); background-color: var(--tp-theme-primary); padding: 0 7px; } .portfolio__view { position: absolute; top: 0; left: 50px; z-index: 1; visibility: hidden; opacity: 0; } .portfolio__view .portfolio-view-btn { display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; color: var(--tp-common-white); background-color: var(--tp-theme-primary); font-size: 16px; } .portfolio__view .portfolio-view-btn:hover { color: var(--tp-theme-primary); background-color: var(--tp-common-white); } @media (max-width: 575px) { .portfolio__view { left: 20px; } } .portfolio__thumb { min-height: 416px; } .portfolio__thumb-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } .portfolio__box-item.portfolio-item-active .portfolio__box-btn { -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); visibility: visible; opacity: 1; } .portfolio__box-item:hover .portfolio__box-btn { -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); visibility: visible; opacity: 1; } .portfolio__box-title { font-size: 24px; color: var(--tp-common-black); text-transform: uppercase; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__box-title { font-size: 18px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__box-title { font-size: 20px; } } @media (max-width: 575px) { .portfolio__box-title { font-size: 20px; } } .portfolio__box-title a:hover { color: var(--tp-theme-primary); } .portfolio__box-content { border: 1px solid var(--tp-border-1); padding: 32px 40px; } @media (max-width: 575px) { .portfolio__box-content { padding-left: 20px; padding-right: 20px; } } .portfolio__box-tag { position: absolute; bottom: 0; left: 40px; } .portfolio__box-tag a { display: inline-block; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--tp-common-black); background-color: var(--tp-theme-primary); padding: 0 7px; } .portfolio__box-btn { -webkit-transform: perspective(400px) rotateX(-60deg); -moz-transform: perspective(400px) rotateX(-60deg); -ms-transform: perspective(400px) rotateX(-60deg); -o-transform: perspective(400px) rotateX(-60deg); transform: perspective(400px) rotateX(-60deg); transform-origin: top center; visibility: hidden; opacity: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__details-wrapper { padding-right: 0; } } .portfolio__details-text h3 { font-size: 30px; text-transform: uppercase; margin-bottom: 15px; } .portfolio__details-text p { font-size: 16px; line-height: 26px; margin-bottom: 30px; padding-right: 10px; } .portfolio__details-text-highlight { color: #333333; } .portfolio__details-msg { font-size: 20px; text-transform: uppercase; line-height: 1.5; margin-bottom: 55px; } .portfolio__details-goal-item h4 { font-size: 20px; text-transform: uppercase; border-bottom: 1px solid var(--tp-border-1); padding-bottom: 15px; margin-bottom: 20px; } .portfolio__details-goal-item h4 span { color: var(--tp-theme-primary); } .portfolio__details-goal-item p { font-size: 16px; padding-right: 20px; } .portfolio__details-post-item { padding: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__details-post-item { margin-bottom: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__details-post-item-right .portfolio__details-post-thumb { margin-right: 20px; margin-left: 0; } } .portfolio__details-post-thumb img { width: 80px; height: 80px; } .portfolio__details-post-content span { font-size: 14px; display: inline-block; font-weight: 700; color: var(--tp-theme-primary); text-transform: uppercase; margin-bottom: 5px; } .portfolio__details-post-content h4 { font-size: 24px; text-transform: uppercase; margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__details-post-content h4 { font-size: 20px; } } .portfolio__details-post-content h4 a:hover { color: var(--tp-theme-primary); } .portfolio__details-info { padding: 0 40px 30px; } .portfolio__details-info ul li { list-style: none; border-bottom: 1px solid #f2f2f2; margin-bottom: 13px; padding-bottom: 10px; } .portfolio__details-info ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .portfolio__details-info ul li p { font-size: 14px; color: var(--tp-text-1); margin-bottom: 0; } .portfolio__details-info ul li p span { color: var(--tp-common-black); font-weight: 700; } .portfolio__contact-title { font-size: 18px; text-transform: uppercase; margin-bottom: 25px; } .portfolio__contact .contact__input input, .portfolio__contact .contact__input textarea { border-color: #f2f2f2; height: 60px; line-height: 60px; padding-left: 50px; padding-right: 15px; } .portfolio__contact .contact__input input:focus, .portfolio__contact .contact__input textarea:focus { border-color: var(--tp-theme-primary); } .portfolio__contact .contact__input textarea { height: 140px; line-height: 1.3; } .portfolio__contact .contact__input .nice-select { height: 60px; line-height: 60px; border: 1px solid #f2f2f2; background-color: transparent; padding-left: 50px; } .portfolio__contact .contact__input i { top: 23px; left: 23px; right: auto; color: var(--tp-common-black); } .portfolio__widget { box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04); border: 1px solid #f2f2f2; } .portfolio__widget-title { font-size: 18px; text-transform: uppercase; margin-bottom: 20px; padding: 35px 40px 0; } /*----------------------------------------*/ /* 10. COURSES CSS /*----------------------------------------*/ .tp-courses__item { background-color: var(--tp-common-white); -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; } .tp-courses__item.has-radius { border-radius: 4px; } .tp-courses__item:hover { box-shadow: 0px 30px 50px 0px rgba(4, 5, 60, 0.1); } .tp-courses__item:hover .tp-courses__content { box-shadow: none; } .tp-courses__item:hover .tp-courses__thumb img { transform: scale(1.05, 1.05) rotate(2deg); } .tp-courses__thumb img { -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; } .tp-courses__cat { position: absolute; top: 20px; left: 20px; border-radius: 4px; } .tp-courses__cat a { padding: 0 15px; color: var(--tp-common-white); display: inline-block; } .tp-courses__cat.cat-color-1 { background-color: var(--tp-theme-primary); } .tp-courses__cat.cat-color-2 { background-color: #be4ffd; } .tp-courses__cat.cat-color-3 { background-color: #fa7919; } .tp-courses__cat.cat-color-4 { background-color: #f2277e; } .tp-courses__cat.cat-color-5 { background-color: #30a820; } .tp-courses__cat.cat-color-6 { background-color: #006147; } .tp-courses__content { height: 120px!important; padding-top: 30px; padding-bottom: -30px; box-shadow: 0px 1px 2px 0px rgba(34, 22, 56, 0.1); } .tp-courses__title { text-align: center; padding-bottom: 20px; font-size: 19px; font-weight: 700; line-height: 1.4; margin-bottom: 15px; padding-right: 30px; padding-left: 30px; } .tp-courses__title a:hover { color: var(--tp-theme-primary); } .tp-courses__meta { margin-bottom: 10px; padding-right: 30px; padding-left: 30px; } .tp-courses__meta span { margin-right: 20px; } .tp-courses__meta span.tp-ratting i { color: var(--tp-theme-secondary); } .tp-courses__meta span i { margin-right: 5px; } .tp-courses__avata { margin-bottom: 20px; padding-right: 30px; padding-left: 30px; position: relative; } .tp-courses__avata img { width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; margin-right: 10px; } .tp-courses__avata a:hover { color: var(--tp-theme-primary); } .tp-courses__price { padding-right: 30px; padding-left: 30px; padding-top: 15px; padding-bottom: 15px; border-top: 1px solid var(--tp-border-2); } .tp-courses__time { color: #333f59; } .tp-courses__time span i { margin-right: 10px; } .tp-courses__value { font-size: 18px; font-weight: 700; color: #020c2a; } .tp-courses__buttons .nav-link { background-color: var(--tp-common-white); border-radius: 0; padding: 5px 20px; color: inherit; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-courses__buttons .nav-link { margin-bottom: 30px; } } .tp-courses__buttons .nav-link.active { background-color: #006147; color: var(--tp-common-white); } .tp-courses__buttons ul li:not(:last-child) { margin-right: 10px; } .tp-courses-2__item { border-radius: 6px; overflow: hidden; } .tp-courses-2__item:hover .tp-courses-2__thumb img { transform: scale(1.05, 1.05) rotate(2deg); } .tp-courses-2__thumb img { -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; } .tp-courses-2__cat a { padding: 0 20px; border-radius: 4px; color: var(--tp-common-white); display: inline-block; background-color: var(--tp-theme-primary); } .tp-courses-2__cat.cat-color-1 a { background-color: rgba(177, 40, 255, 0.08); color: #b128ff; } .tp-courses-2__cat.cat-color-2 a { background-color: rgba(50, 112, 252, 0.08); color: var(--tp-theme-primary); } .tp-courses-2__cat.cat-color-3 a { background-color: rgba(48, 168, 32, 0.08); color: #30a820; } .tp-courses-2__content { padding-top: 30px; padding-bottom: -30px; box-shadow: 0px 1px 2px 0px rgba(34, 22, 56, 0.1); } .tp-courses-2__title { font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 25px; padding-right: 25px; padding-left: 25px; } .tp-courses-2__title a:hover { color: var(--tp-theme-primary); } .tp-courses-2__price { font-size: 18px; font-weight: 700; } .tp-courses-2__meta { margin-bottom: 15px; padding-right: 25px; padding-left: 25px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-courses-2__sub { margin-bottom: 10px; } } .tp-courses-2__sub i { margin-right: 8px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-courses-2__review { display: none; } } .tp-courses-2__bottom { padding-right: 25px; padding-left: 25px; padding-top: 15px; padding-bottom: 15px; border-top: 1px solid var(--tp-border-2); } .tp-courses-2__review span i { color: var(--tp-theme-secondary); } .course__tab-inner { padding: 15px 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .course__tab-btn .nav-tabs { border: none; } .course__tab-btn .nav-tabs .nav-item .nav-link { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; border: none; width: 30px; height: 30px; background: transparent; padding: 0; margin-right: 6px; } .course__tab-btn .nav-tabs .nav-item .nav-link svg { width: 14px; height: 14px !important; } .course__tab-btn .nav-tabs .nav-item .nav-link svg.grid .st0 { fill: none; stroke: var(--tp-common-black); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .course__tab-btn .nav-tabs .nav-item .nav-link.active { background: var(--tp-theme-primary); } .course__tab-btn .nav-tabs .nav-item .nav-link.active svg.grid .st0 { fill: none; stroke: var(--tp-common-white); } .course__tab-btn .nav-tabs .nav-item .nav-link.active svg .st0 { fill: var(--tp-common-white); } .course__tab-2 .nav-tabs { border: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; overflow: hidden; } .course__tab-2 .nav-tabs .nav-item { width: 25%; } .course__tab-2 .nav-tabs .nav-item:not(:last-child) .nav-link { border-right: 1px solid var(--tp-common-white); } .course__tab-2 .nav-tabs .nav-item .nav-link { background: #e4e4e4; font-size: 16px; font-weight: 600; color: var(--tp-common-color); width: 100%; height: 54px; line-height: 54px; padding: 0; text-align: center; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } .course__tab-2 .nav-tabs .nav-item .nav-link i { padding-right: 5px; } .course__tab-2 .nav-tabs .nav-item .nav-link.active { background: var(--tp-theme-primary); color: var(--tp-common-white); } @media (max-width: 575px) { .course__tab-2 .nav-tabs .nav-item .nav-link span { display: none; } } .tp-courses-4__item { box-shadow: 0px 1px 2px 0px rgba(34, 22, 56, 0.1); background-color: var(--tp-common-white); box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.06); } .tp-courses-4__thumb { height: 100%; } .tp-courses-4__thumb img { -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; height: 100%; object-fit: cover; } .tp-courses-4__cat a { padding: 2px 20px; color: var(--tp-common-white); display: inline-block; background-color: var(--tp-theme-primary); } .tp-courses-4__cat.cat-color-1 a { background-color: rgba(177, 40, 255, 0.08); color: #b128ff; } .tp-courses-4__cat.cat-color-2 a { background-color: rgba(50, 112, 252, 0.08); color: var(--tp-theme-primary); } .tp-courses-4__cat.cat-color-3 a { background-color: rgba(48, 168, 32, 0.08); color: #30a820; } .tp-courses-4__content { padding: 60px 80px; padding-top: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-courses-4__content { padding: 40px 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-courses-4__content { padding: 40px 35px; } } @media (max-width: 575px) { .tp-courses-4__content { padding: 20px 15px; } } .tp-courses-4__title { font-size: 36px; font-weight: 700; line-height: 1.4; margin-bottom: 25px; } @media (max-width: 575px) { .tp-courses-4__title { font-size: 30px; } } .tp-courses-4__title a:hover { color: var(--tp-theme-primary); } .tp-courses-4__price { font-size: 18px; font-weight: 700; padding-top: 20px; padding-bottom: 20px; padding-left: 80px; padding-right: 80px; border-top: 1px solid var(--tp-border-2); } @media (max-width: 575px) { .tp-courses-4__price { padding-left: 20px; padding-right: 20px; } } .tp-courses-4__meta { margin-bottom: 15px; } .tp-courses-4__meta i { margin-right: 5px; } .tp-courses-4__meta span { margin-right: 20px; } @media (max-width: 575px) { .tp-courses-4__meta span { margin-right: 15px; } } .tp-courses-4__meta span.tp-ratting i { color: var(--tp-theme-secondary); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-courses-4__sub { margin-bottom: 10px; } } .tp-courses-4__sub i { margin-right: 8px; } .tp-courses-4__bottom { padding-right: 25px; padding-left: 25px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--tp-border-2); } .tp-courses-4__avata img { margin-right: 10px; border-radius: 50%; } .tp-courses-4__review span i { color: var(--tp-theme-secondary); } .course__description-list h4 { font-size: 22px; font-weight: 600; margin-bottom: 15px; } .course__description-list ul li { font-size: 16px; color: var(--tp-common-black); list-style: none; } .course__description-list ul li:not(:last-child) { margin-bottom: 5px; } .course__description-list ul li i { display: inline-block; width: 18px; height: 18px; text-align: center; line-height: 18px; font-size: 15px; font-weight: 500; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin-right: 10px; } .course__tag-2 { border-top: 1px solid #e4e6ef; padding-top: 25px; } .course__tag-2 i { margin-right: 10px; } .course__tag-2 span { font-size: 16px; color: var(--tp-text-3); margin-right: 7px; } .course__tag-2 a { font-size: 16px; font-weight: 500; margin-left: 5px; } .course__tag-2 a:hover { color: var(--tp-theme-primary); } .course__curriculum .accordion-item { padding: 0; } .course__curriculum .accordion-item .accordion-button { outline: none; border: 1px solid var(--tp=border-1); -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; background: var(--tp-grey-3); font-size: 20px; font-weight: 700; color: var(--tp-common-black); padding-top: 18px; padding-left: 30px; padding-right: 30px; } .course__curriculum .accordion-item .accordion-button.collapsed { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .course__curriculum .accordion-item .accordion-button:focus { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .course__curriculum .accordion-item .accordion-body { padding: 0; } .course__curriculum-content { padding: 13px 30px; border-bottom: 1px solid #edeef2; -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; } .course__curriculum-info svg { width: 16px; height: 16px; margin-right: 7px; color: var(--tp-grey-3); } .course__curriculum-info svg .st0 { fill: none; stroke: #6D6E75; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .course__curriculum-info h3 { display: inline-block; font-size: 16px; color: #53545b; font-weight: 400; margin-bottom: 0; } .course__curriculum-meta span.time { font-size: 16px; color: #53545b; } .course__curriculum-meta span.question { display: inline-block; height: 24px; line-height: 24px; color: #ffffff; padding: 0 11px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: var(--tp-theme-primary); margin-left: 20px; } .course__review-rating-info { padding: 51px 0; border-right: 3px solid #ffffff; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .course__review-rating-info h5 { font-size: 100px; line-height: 70px; font-weight: 500; margin-bottom: 8px; } .course__review-rating-info ul li a { color: var(--tp-theme-secondary); } .course__review-rating-info ul li { display: inline-block; } .course__review-details { padding: 35px 65px 10px 35px; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .course__review-progress { width: calc(100% - 60px - 60px); height: 4px; overflow: hidden; background: #d8dae3; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .course__review-text span { font-size: 16px; color: #53545b; } .course__review-progress .single-progress { background: #2b4eff; height: 100%; } .course__review-text span { font-size: 16px; color: #53545b; } .course__review-percent h5 { font-size: 16px; font-weight: 400; color: #53545b; margin-bottom: 0; } .course__review-item { margin-bottom: 5px; } .course__comment li { list-style: none; } .course__comment-box { background: #f3f4f8; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 25px 40px 25px 30px; margin-bottom: 10px; } .course__comment-info h4 { font-size: 16px; line-height: 1; margin-bottom: 0; } .course__comment-rating ul li { display: inline-block; } .course__comment-rating ul li a { font-size: 12px; color: var(--tp-theme-secondary); } .course__rating-inner i { color: var(--tp-theme-secondary); } .course__comment-info { margin-bottom: 15px; } .course__comment-thumb img { width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .page__title-pre { background-color: var(--tp-theme-primary); color: var(--tp-common-white); padding: 5px 10px; margin-bottom: 10px; display: inline-block; } .course__form h3 { font-size: 26px; margin-bottom: 40px; } .course__form-input input, .course__form-input textarea { width: 100%; height: 56px; line-height: 54px; border: 2px solid var(--tp-grey-2); outline: none; background: var(--tp-grey-1); padding: 0 22px; font-size: 15px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; margin-bottom: 20px; } .course__form-input input:focus, .course__form-input textarea:focus { border-color: var(--tp-theme-primary); background: var(--tp-common-white); } .course__form-input input::placeholder, .course__form-input textarea::placeholder { color: grey; } .course__form-input textarea { height: 150px; resize: none; padding: 20px; line-height: 1.1; } .course__form-rating { margin-bottom: 10px; } .course__form-rating span { color: var(--tp-common-black); } .course__form-rating ul { display: inline-block; } .course__form-rating ul li { display: inline-block; } .course__form-rating ul li a { font-size: 14px; color: var(--tp-theme-secondary); } .course__form-rating ul li a.no-rating { color: #b8b9bf; } .course__form-btn button { text-transform: capitalize; } .course__member-item { padding: 25px 30px; background: var(--tp-grey-1); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; margin-bottom: 10px; } .course__member-thumb { position: relative; } .course__member-thumb::after { position: absolute; content: ""; right: 0; top: -5px; width: 1px; height: 80px; background: #dddee4; } @media (max-width: 575px) { .course__member-thumb::after { display: none; } } .course__member-thumb img { width: 70px; height: 70px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .course__member-name h5 { font-size: 16px; line-height: 1; margin-bottom: 0; } .course__member-name span { font-size: 15px; color: var(--tp-text-3); } @media only screen and (min-width: 576px) and (max-width: 767px) { .course__member-info { padding-left: 0; } } @media (max-width: 575px) { .course__member-info { margin-top: 25px; padding-left: 0; } } .course__member-info h5 { font-size: 16px; line-height: 1; margin-bottom: 0; } .course__member-info span { font-size: 15px; color: var(--tp-text-3); } .course__instructor h3 { font-size: 26px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .course__instructor-item { margin-right: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .course__instructor-item { margin-top: 25px; margin-right: 0px; } } @media (max-width: 575px) { .course__instructor-item { margin-top: 25px; margin-right: 0px; } } .course__instructor-thumb img { width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .course__instructor-content h3 { font-size: 16px; margin-bottom: 0; line-height: 1; } .course__instructor-content p { font-size: 14px; margin-bottom: 0; } .course__share h3 { font-size: 20px; } .course__share ul li { display: inline-block; margin-right: 10px; } .course__share ul li a { display: inline-block; width: 40px; height: 40px; line-height: 44px; text-align: center; font-size: 13px; color: var(--tp-common-black); background: var(--tp-common-white); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .course__share ul li a.fb { color: #285da1; background: rgba(40, 93, 161, 0.1); } .course__share ul li a.fb:hover { color: var(--tp-common-white); background: #285da1; } .course__share ul li a.tw { color: #03a9f4; background: rgba(3, 169, 244, 0.1); } .course__share ul li a.tw:hover { color: var(--tp-common-white); background: #03a9f4; } .course__share ul li a.pin { color: #d8163f; background: rgba(216, 22, 63, 0.1); } .course__share ul li a.pin:hover { color: var(--tp-common-white); background: #d8163f; } .course__video-thumb { position: relative; overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .course__video-thumb::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 3, 32, 0.5); } .course__video-play { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .course__video-price h5 { font-size: 26px; display: inline-block; margin-bottom: 0; } .course__video-price h5 span { font-size: 20px; font-weight: 600; } .course__video-price h5.old-price { text-decoration: line-through; color: var(--tp-grey-3); font-weight: 500; font-size: 16px; padding-left: 10px; } .course__video-discount span { display: inline-block; font-size: 14px; height: 24px; line-height: 24px; padding: 0 12px; color: var(--tp-theme-primary); background: rgba(255, 0, 0, 0.08); font-weight: 600; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .course__video-content ul li:not(:last-child) { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #eef0f6; } .course__video-icon svg { width: 16px; height: 20px; margin-right: 12px; } .course__video-icon svg .st0 { fill: none; stroke: var(--tp-theme-primary); stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 2.6667; } .course__video-info h5 { margin-bottom: 0; font-weight: 400; color: var(--tp-text-3); font-size: 15px; line-height: 1; } .course__video-info h5 span { font-weight: 500; color: var(--tp-common-black); padding-right: 5px; } .course__payment h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; } .course__enroll-btn i { padding-left: 4px; } .course__sm-thumb img { width: 60px; height: 60px; object-fit: cover; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; } .course__sm-content h5 { font-size: 16px; margin-bottom: 0; font-weight: 600; line-height: 1; } .course__sm-content h5 a:hover { color: var(--tp-theme-primary); } .course__sm-price span { font-size: 14px; color: var(--tp-text-3); font-weight: 600; } .course__sm-rating ul li { display: inline-block; } .course__sm-rating ul li a { font-size: 10px; color: var(--tp-theme-secondary); line-height: 1; } .course__instructor h3 { font-size: 26px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .course__instructor-item { margin-right: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .course__instructor-item { margin-top: 25px; margin-right: 0px; } } @media (max-width: 575px) { .course__instructor-item { margin-top: 25px; margin-right: 0px; } } .course__instructor-thumb img { width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .course__instructor-content h3 { font-size: 16px; margin-bottom: 0; line-height: 1; } .course__instructor-content p { font-size: 14px; margin-bottom: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .course__tab-wrapper { margin-bottom: 30px; } } .course__sidebar-widget-2 { padding: 30px; -webkit-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1); -moz-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1); box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } @media (max-width: 575px) { .course__sidebar-widget-2 { padding: 30px 15px; } } .course__sidebar-widget-2 ul li { list-style: none; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .course__sidebar { padding-left: 0; } } /*----------------------------------------*/ /* 11. EVENT CSS /*----------------------------------------*/ .tp-event__item { box-shadow: 0px 30px 50px 0px rgba(4, 5, 60, 0.1); } .tp-event__item:hover .tp-event__thumb img { transform: scale(1.05, 1.05) rotate(2deg); } .tp-event__thumb img { -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; } .tp-event__content { padding: 25px 30px; padding-bottom: 40px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-event__content { padding: 25px 20px; } } .tp-event__title { font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 25px; } .tp-event__title a:hover { color: var(--tp-theme-primary); } .tp-event__meta span.event-date { margin-right: 8px; } .tp-event__meta span.event-date i { color: var(--tp-theme-primary); margin-right: 2px; } .tp-event__meta span.event-cat i { color: #0acc86; margin-right: 2px; } .tp-event-2__item { padding: 15px 40px; box-shadow: 0px 30px 50px 0px rgba(4, 5, 60, 0.1); border-radius: 6px; background-color: var(--tp-common-white); } .tp-event-2__item:hover .tp-event-2__thumb img { transform: scale(1.05, 1.05) rotate(2deg); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-event-2__item { padding: 30px 25px; } } .tp-event-2__item .tp-border-btn span { border-color: rgba(50, 112, 252, 0.08); color: #020c2a; padding: 4px 25px; } .tp-event-2__item .tp-border-btn:hover span { color: var(--tp-common-white); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-event-2__content { margin-bottom: 30px; } } .tp-event-2__title { font-size: 24px; font-weight: 500; line-height: 1.4; margin-bottom: 15px; } .tp-event-2__title a:hover { color: var(--tp-theme-primary); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-event-2__title { font-size: 22px; } } .tp-event-2__info span { color: var(--tp-text-3); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-event-2__info { margin-bottom: 30px; } } .tp-event-2__date span { border-right: 1px solid; display: inline-block; padding-right: 30px; border-color: rgba(0, 15, 47, 0.1); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-event-2__date span { border: 0; } } .tp-event-2__date span b { display: block; font-size: 40px; line-height: 1.2; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-event-2__date { margin-bottom: 30px; } } .tp-event-2__meta img { margin-right: 10px; margin-bottom: 5px; } .tp-event-2__time { border-radius: 8px; overflow: hidden; display: inline-block; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-event-2__time { margin-bottom: 20px; } } .tp-event-2__time span { background-color: rgba(50, 112, 252, 0.06); padding: 2px 15px; display: inline-block; border-radius: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-event-2__time span { padding: 5px 15px; margin-right: 0; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-event-2__time span { padding: 5px 10px; margin-right: 0; } } .tp-event-2__time.color-1 { background-color: rgba(50, 112, 252, 0.06); color: #3270fc; } .tp-event-2__time.color-2 { background-color: rgba(177, 40, 255, 0.06); color: #b128ff; } .tp-event-2__time.color-3 { background-color: rgba(48, 168, 32, 0.06); color: #30a820; } .tp-event-2__time.color-4 { background-color: rgba(255, 138, 0, 0.06); color: #ff8a00; } .tp-event-2__shapes-1 { position: absolute; top: 110px; left: 50%; animation: tp-float-1 6s infinite alternate; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-event-2__shapes-1 { top: 50px; } } .tp-event-2__shapes-2 { position: absolute; top: 60%; left: 5%; animation: tp-float-2 8s infinite alternate; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-event-2__shapes-2 { display: none; } } .tp-event-2__shapes-3 { position: absolute; top: 50%; right: 0; animation: tpswing 1s ease-in-out 1s forwards infinite alternate; transform-origin: top bottom; } .tp-event-3__item { padding: 30px 40px; border-radius: 6px; background-color: var(--tp-common-white); border: 2px solid; border-color: rgba(1, 16, 37, 0.06); 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; } .tp-event-3__item:hover { box-shadow: 0px 20px 50px 0px rgba(1, 16, 37, 0.14); border-color: transparent; } .tp-event-3__item:hover .tp-event-3__thumb img { transform: scale(1.05, 1.05) rotate(2deg); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-event-3__item { padding: 30px 25px; } } .tp-event-3__item .tp-border-btn span { border-color: rgba(50, 112, 252, 0.08); color: #020c2a; } .tp-event-3__item .tp-border-btn:hover span { color: var(--tp-common-white); } .tp-event-3__title { font-size: 24px; font-weight: 500; line-height: 1.4; padding-right: 40px; margin-bottom: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-event-3__title { padding-right: 0; } } .tp-event-3__title a:hover { color: var(--tp-theme-primary); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-event-3__title { font-size: 22px; } } .tp-event-3__info span { color: var(--tp-text-3); margin-right: 15px; margin-bottom: 10px; display: inline-block; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-event-3__info { margin-bottom: 30px; } } .events__sidebar-widget { position: relative; padding: 30px; -webkit-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1); -moz-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1); box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .events__info-price h5 { font-size: 26px; display: inline-block; margin-bottom: 0; } .events__info-price h5 span { font-size: 20px; font-weight: 600; } .events__info-price h5.old-price { text-decoration: line-through; color: var(--tp-text-3); font-weight: 500; font-size: 16px; padding-left: 10px; } .events__info-discount span { display: inline-block; font-size: 14px; height: 24px; line-height: 24px; padding: 0 12px; color: red; background: rgba(255, 0, 0, 0.08); font-weight: 600; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .events__info-content ul li:not(:last-child) { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #eef0f6; } .events__info-icon svg { width: 16px; height: 20px; margin-right: 12px; } .events__info-icon svg .st0 { fill: none; stroke: var(--tp-theme-primary); stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 2.6667; } .events__info-item h5 { margin-bottom: 0; font-weight: 400; color: var(--tp-grey-3); font-size: 15px; line-height: 1; } .events__info-item h5 span { font-weight: 500; color: var(--tp-common-black); padding-right: 5px; } .events__sponsor-title { font-size: 20px; margin-bottom: 20px; } .events__sponsor-info h3 { font-size: 16px; } .events__sponsor-info > h4 { font-size: 15px; font-weight: 500; margin-bottom: 10px; } .events__sponsor-info > h4 span { font-weight: 400; color: var(--tp-text-3); } .events__social h4 { font-size: 20px; font-weight: 600; margin-bottom: 0px; margin-right: 10px; } .events__social ul li { display: inline-block; margin-left: 5px; } .events__social ul li a { display: inline-block; width: 40px; height: 40px; line-height: 44px; text-align: center; font-size: 13px; color: var(--tp-common-black); background: var(); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .events__social ul li a.fb { color: #285da1; background: rgba(40, 93, 161, 0.1); } .events__social ul li a.fb:hover { color: var(--tp-common-white); background: #285da1; } .events__social ul li a.tw { color: #03a9f4; background: rgba(3, 169, 244, 0.1); } .events__social ul li a.tw:hover { color: var(--tp-common-white); background: #03a9f4; } .events__social ul li a.pin { color: #d8163f; background: rgba(216, 22, 63, 0.1); } .events__social ul li a.pin:hover { color: var(--tp-common-white); background: #d8163f; } .events__allow h3 { font-size: 26px; font-weight: 600; margin-bottom: 15px; } .events__allow ul li { font-size: 16px; color: var(--tp-common-black); list-style: none; } .events__allow ul li:not(:last-child) { margin-bottom: 5px; } .events__allow ul li i { display: inline-block; width: 18px; height: 18px; text-align: center; line-height: 18px; font-size: 10px; font-weight: 500; color: var(--tp-theme-primary); background: rgba(83, 146, 251, 0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin-right: 10px; } .events__tag { border-top: 1px solid #e4e6ef; padding-top: 25px; } .events__tag span { font-size: 16px; color: var(--tp-text-3); margin-right: 7px; } .events__tag a { font-size: 16px; color: var(--tp-theme-primary); font-weight: 600; } .events__tag a:hover { color: var(--tp-theme-secondary); } .events__info-discount span { display: inline-block; font-size: 14px; height: 24px; line-height: 24px; padding: 0 12px; color: #ff4690; background: rgba(255, 70, 144, 0.08); font-weight: 600; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .course__teacher-thumb-3 img { width: 44px; height: 44px; margin-bottom: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #ffffff; -webkit-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1); -moz-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1); box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1); } .course__instructor-thumb img { width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .tp-event__shape .event-1 { position: absolute; right: 100px; animation: tp-float-1 6s infinite alternate; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-event__shape .event-1 { display: none; } } .tp-event__shape .event-2 { position: absolute; top: 50%; left: 100px; animation: tp-float-3 6s infinite alternate; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-event__shape .event-2 { top: 0; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-event__shape .event-2 { display: none; } } .tp-counter-2__item.has-border { position: relative; } .tp-counter-2__item.has-border::after { content: ""; width: 2px; height: 54px; position: absolute; right: 0; top: 50%; display: inline-block; background-color: var(--tp-common-white); opacity: 0.1; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .events__sidebar { padding-left: 0; } } /*----------------------------------------*/ /* 12. CTA CSS /*----------------------------------------*/ .tp-cta__bg { position: absolute; bottom: 0; height: 50%; width: 100%; display: inline-block; border-radius: 4px; background-size: cover; background-repeat: no-repeat; z-index: -1; } .tp-cta__box { padding: 40px 60px; border-radius: 4px; background-size: cover; background-repeat: no-repeat; background-position: center center; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-cta__box { padding: 40px 30px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta__box { padding: 40px 20px; } } .tp-cta__title { font-size: 44px; font-weight: 800; } .tp-cta__title span { font-weight: 300; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-cta__title { font-size: 35px; margin-bottom: 30px; } .tp-cta__title br { display: none; } } .tp-cta__form input { width: 100%; height: 72px; position: relative; padding-right: 200px; padding-left: 20px; border: 1px solid var(--tp-border-2); border-radius: 4px; } .tp-cta__form input::-webkit-input-placeholder { color: var(--tp-text-4); } .tp-cta__form input:-moz-placeholder { color: var(--tp-text-4); } .tp-cta__form input::-moz-placeholder { color: var(--tp-text-4); } .tp-cta__form input:-ms-input-placeholder { color: var(--tp-text-4); } .tp-cta__form input:focus { border-color: var(--tp-theme-primary); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta__form input { margin-bottom: 30px; padding-left: 5px; padding-right: 5px; } } .tp-cta__form button { position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-right: 6px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta__form button { position: relative; transform: translateY(0); } } .tp-cta__btn-wrappper .tp-white-btn { padding: inherit; box-shadow: 0px 10px 20px 0px rgba(8, 30, 68, 0.1); } .tp-cta__btn-wrappper .tp-white-btn .transition { display: none; } .tp-box__shadow { box-shadow: 0px 30px 50px 0px rgba(4, 5, 60, 0.1); } .tp-form__main { padding: 40px 50px; box-shadow: 0px 30px 40px 0px rgba(0, 15, 47, 0.1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-form__main { margin-right: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-form__main { margin-right: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-form__main { padding: 40px 20px; } } .tp-form__field { margin-bottom: 20px; } .tp-form__field input { width: 100%; height: 48px; padding-left: 20px; padding-right: 20px; border: 0; background-color: #f5f5f5; border-radius: 6px; } .tp-form__field input::-webkit-input-placeholder { color: var(--tp-text-3); } .tp-form__field input:-moz-placeholder { color: var(--tp-text-3); } .tp-form__field input::-moz-placeholder { color: var(--tp-text-3); } .tp-form__field input:-ms-input-placeholder { color: var(--tp-text-3); } .tp-form__field label { font-weight: 700; margin-bottom: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-form__text { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-form__text { padding-left: 0; padding-right: 0; } } .tp-cta-2__section { background-size: cover; background-repeat: no-repeat; } .tp-cta-2__field input { width: 100%; height: 60px; padding-left: 20px; padding-right: 150px; border: 0; background-color: #f5f5f5; border-radius: 6px; font-size: 16px; } .tp-cta-2__btn { position: absolute; top: 0; right: 0; display: inline-block; height: 100%; line-height: 60px; padding: 0 30px; text-align: center; font-size: 15px; color: var(--tp-common-white); background-color: #000f2f; border-radius: 0 6px 6px 0; text-transform: uppercase; } .tp-cta-2__btn:hover { background-color: var(--tp-theme-secondary); } @media (max-width: 575px) { .tp-cta-2__btn { margin-top: 20px; position: relative; border-radius: 6px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-2__img img { width: 100%; } } .tp-contact__form-6 input { width: 100%; height: 60px; margin-bottom: 30px; padding: 0 20px; border: 2px solid #e4e4e4; -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; } .tp-contact__form-6 input::-webkit-input-placeholder { color: var(--tp-text-7); } .tp-contact__form-6 input:-moz-placeholder { color: var(--tp-text-7); } .tp-contact__form-6 input::-moz-placeholder { color: var(--tp-text-7); } .tp-contact__form-6 input:-ms-input-placeholder { color: var(--tp-text-7); } .tp-contact__form-6 input:focus { border-color: var(--tp-theme-primary); } .tp-contact__form-6 textarea { width: 100%; height: 230px; margin-bottom: 30px; padding: 20px; resize: none; border: 2px solid #e4e4e4; -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; } .tp-contact__form-6 textarea::-webkit-input-placeholder { color: var(--tp-text-7); } .tp-contact__form-6 textarea:-moz-placeholder { color: var(--tp-text-7); } .tp-contact__form-6 textarea::-moz-placeholder { color: var(--tp-text-7); } .tp-contact__form-6 textarea:-ms-input-placeholder { color: var(--tp-text-7); } .tp-contact__form-6 textarea:focus { outline: 0; border-color: var(--tp-theme-primary); } .contact__form-input input, .contact__form-input textarea { width: 100%; height: 52px; padding-left: 20px; padding-right: 20px; border: 2px solid transparent; background-color: #f5f5f5; border-radius: 6px; margin-bottom: 20px; } .contact__form-input input:focus, .contact__form-input textarea:focus { border-color: var(--tp-theme-primary); outline: 0; } .contact__form-input textarea { height: 200px; padding: 20px; resize: 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; } .contact__form-input textarea::-webkit-input-placeholder { color: var(--tp-text-3); } .contact__form-input textarea:-moz-placeholder { color: var(--tp-text-3); } .contact__form-input textarea::-moz-placeholder { color: var(--tp-text-3); } .contact__form-input textarea:-ms-input-placeholder { color: var(--tp-text-3); } .contact__form-input .contact__form-agree label { margin-left: 5px; } .contact__info-inner { padding: 45px 40px; padding-right: 70px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1); -moz-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1); box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1); position: relative; z-index: 1; } .contact__info-inner li { list-style: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact__info-inner { margin-top: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact__info-inner { margin-top: 50px; } } @media (max-width: 575px) { .contact__info-inner { margin-top: 50px; padding-right: 35px; } } .contact__info-icon svg { fill: none; stroke: var(--tp-theme-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .contact__info-icon svg.map { width: 16px; height: 20px; } .contact__info-icon svg.mail { width: 18px; height: 18px; } .contact__info-icon svg.call { width: 18px; height: 18px; } .contact__info-text h4 { font-size: 20px; font-weight: 600; margin-bottom: 6px; } .contact__info-text p { margin-bottom: 0; } .contact__info-text p a:hover { color: var(--tp-theme-primary); } .contact__social h4 { font-size: 20px; font-weight: 600; margin-bottom: 13px; } .contact__social ul li { display: inline-block; margin-right: 10px; } .contact__social ul li a { display: inline-block; width: 40px; height: 40px; line-height: 44px; text-align: center; font-size: 13px; color: #0e1133; background: #f3f4f8; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .contact__social ul li a.fb { color: #285da1; background: rgba(40, 93, 161, 0.1); } .contact__social ul li a.fb:hover { color: #ffffff; background: #285da1; } .contact__social ul li a.tw { color: #03a9f4; background: rgba(3, 169, 244, 0.1); } .contact__social ul li a.tw:hover { color: #ffffff; background: #03a9f4; } .contact__social ul li a.pin { color: #d8163f; background: rgba(216, 22, 63, 0.1); } .contact__social ul li a.pin:hover { color: #ffffff; background: #d8163f; } .tp-contact-map iframe { width: 100%; height: 100%; display: block; } .tp-map-height { height: 700px; } @media (max-width: 575px) { .tp-map-height { height: 450px; } } .tp-form-shape-1 { position: absolute; left: 120px; bottom: 128px; animation: tp-float-3 5s infinite alternate; } .tp-form-shape-2 { position: absolute; left: 120px; top: -130px; } .tp-form-shape-3 { position: absolute; top: 50%; right: -150px; transform: translateY(-50%); } .tp-cta-2__shape img { position: absolute; left: 55%; animation: tp-float-2 7s infinite alternate; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-cta-2__shape img { top: 50%; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-2__shape img { display: none; } } .tp-cta-2__img { margin-right: -150px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-cta-2__img { margin-right: 0; } } .tp-form__main-shape { position: absolute; bottom: 80px; left: -30px; z-index: -1; } /*----------------------------------------*/ /* 13. COUNTER CSS /*----------------------------------------*/ .tp-counter__item { text-align: center; color: var(--tp-common-white); } .tp-counter__item.has-border { position: relative; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-counter__item.has-border::after { display: none !important; } } .tp-counter__item.has-border::after { position: absolute; right: -20px; top: -20px; content: ""; width: 1px; height: 100px; background-color: rgba(255, 255, 255, 0.2); display: inline-block; } .tp-counter__item span b { font-size: 36px; display: block; line-height: 1; position: relative; } .tp-counter__item span b::after { content: "+"; } .tp-counter-2__bg { background-size: cover; background-repeat: no-repeat; background-position: center center; border-radius: 10px; } .tp-counter-2__icon { font-size: 40px; display: inline-block; margin-bottom: 30px; } .tp-counter-2__item { text-align: center; color: var(--tp-common-white); } .tp-counter-2__item span b { font-size: 36px; display: block; line-height: 1; position: relative; } .tp-counter-2__item span b::after { content: "+"; } .tp-pulse-border { border-radius: 50%; z-index: 1; } .tp-pulse-border::before { position: absolute; content: ""; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); animation: borderanimate2 2s linear infinite; animation-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s; -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; z-index: -1; } .tp-pulse-border::before { animation-delay: 0.7s; } .tp-countdown__video { display: flex; justify-content: center; align-items: center; min-height: 300px; } .tp-countdown__video a { background-color: var(--tp-common-white); width: 90px; height: 90px; line-height: 90px; text-align: center; border-radius: 50%; display: inline-block; font-size: 20px; color: var(--tp-theme-primary); position: relative; } .tp-countdown__video a::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--tp-common-white); left: 0; top: 0; transform: scale(1.3); } @media (max-width: 575px) { .tp-countdown__right { padding-left: 30px; padding-right: 30px; } } @media (max-width: 575px) { .tp-coundown__countdown { background-color: var(--tp-common-white); padding: 30px 15px; display: inline-block; } } .tp-coundown__countdown .cdown { padding: 20px 25px; background-color: white; display: inline-block; text-align: center; margin-right: 5px; border-radius: 5px; } @media (max-width: 575px) { .tp-coundown__countdown .cdown { padding: 0; margin-right: 10px; } } .tp-coundown__countdown .cdown p { margin-bottom: 0; } .tp-coundown__countdown .time-count { font-size: 30px; font-weight: 700; } .count-down-shapes-1 { position: absolute; left: 50px; top: 40px; transform: scale(0.6); } .count-down-shapes-2 { position: absolute; right: 25%; transform: scale(0.6); } .count-down-shapes-3 { position: absolute; right: 0px; bottom: 20%; } .course__view { margin-left: 15px; } /*----------------------------------------*/ /* 14. FEATURE CSS /*----------------------------------------*/ .tp-feature__item { max-height: 74%; padding-top: 40px; padding-bottom: 70px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.078); background-color: rgba(255, 255, 255, 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; position: relative; } .tp-feature__item::before { content: ""; position: absolute; top: 0; height: 3px; width: 0; right: 0; display: inline-block; background-color: var(--tp-theme-primary); -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; } .tp-feature__item.before-color-1::before { background-color: #ffa28f; } .tp-feature__item.before-color-2::before { background-color: #8997f9; } .tp-feature__item.before-color-3::before { background-color: #f86470; } .tp-feature__item.before-color-4::before { background-color: #5fa79c; } .tp-feature__item.before-color-5::before { background-color: #73d17e; } .tp-feature__item.before-color-6::before { background-color: #b451f9; } .tp-feature__item.before-color-7::before { background-color: #11c5ce; } .tp-feature__item.before-color-8::before { background-color: #ee9c2d; } .tp-feature__item:hover { box-shadow: 0px 16px 40px 0px rgba(0, 15, 47, 0.1), inset 0px 3px 0px 0px rgba(44, 121, 255, 0.004); border-color: transparent; } .tp-feature__item:hover::before { width: 100%; right: auto; left: 0; } .tp-feature__item:hover .tp-feature__icon { transform: translateY(-8px); } .tp-feature__icon { margin-bottom: 50px; -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; } .tp-feature__title { font-size: 20px; } .tp-feature__title a:hover { color: var(--tp-theme-primary); } .tp-feature__item p { margin-bottom: 0; } .tp-feature-2__section .row [class*=col-]:first-child .tp-feature-2__item { border-radius: 10px 0 0 10px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-feature-2__section .row [class*=col-]:first-child .tp-feature-2__item { border-radius: 10px 10px 0 0; } } .tp-feature-2__section .row [class*=col-]:last-child .tp-feature-2__item { border-radius: 0 10px 10px 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-feature-2__section .row [class*=col-]:last-child .tp-feature-2__item { border-radius: 0 0 10px 10px; } } .tp-feature-2__item { padding: 35px 50px; -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; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-feature-2__item { padding: 35px 25px; } } .tp-feature-2__item.tp-feature-2__color-1 { background-color: #ffa423; box-shadow: 0px 40px 60px 0px rgba(255, 164, 35, 0.3); } .tp-feature-2__item.tp-feature-2__color-2 { background-color: rgb(44, 121, 255); box-shadow: 0px 40px 60px 0px rgba(50, 111, 253, 0.3); } .tp-feature-2__item.tp-feature-2__color-3 { background-color: rgb(162, 0, 255); box-shadow: 0px 40px 60px 0px rgba(162, 0, 255, 0.3); } .tp-feature-2__item:hover .tp-feature-2__icon { transform: rotateY(-180deg); } .tp-feature-2__icon { color: var(--tp-common-white); margin-bottom: 50px; -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-size: 36px; display: inline-block; } .tp-feature-2__title { font-size: 22px; color: var(--tp-common-white); margin-bottom: 15px; } .tp-feature-2__content p { margin-bottom: 20px; color: var(--tp-common-white); font-size: 16px; } .tp-feature-2__content span a { color: var(--tp-common-white); width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%; border: 2px solid; display: inline-block; border-color: rgba(255, 255, 255, 0.2); line-height: 32px; } .tp-feature-2__content span a:hover { background-color: var(--tp-common-white); border-color: transparent; } .tp-feature-2__content span a:hover i { animation: tfLeftToRight 0.5s forwards; color: var(--tp-theme-primary); } .gx-70 { --bs-gutter-x: 70px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .gx-70 { --bs-gutter-x: 1.5rem; } } /*----------------------------------------*/ /* 15. TESTIMONIAL CSS /*----------------------------------------*/ .tp-testimonial__slider { box-shadow: 0px 30px 50px 0px rgba(4, 5, 60, 0.1); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-testimonial__slider .slick-slide img { width: 100%; } } .tp-testimonial___thumb { flex: 0 0 auto; object-fit: cover; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-testimonial__bg { background-color: var(--tp-common-white); } } .tp-testimonial__review { padding-left: 50px; padding-right: 50px; padding-top: 30px; padding-bottom: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-testimonial__review { padding-left: 30px; padding-right: 30px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-testimonial__review { padding-left: 30px; padding-right: 30px; padding-top: 30px; padding-bottom: 30px; } } .tp-testimonial__review h3 { font-size: 20px; margin-bottom: 0; line-height: 1; } .tp-testimonial__review p { font-size: 18px; margin-bottom: 30px; line-height: 1.7; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-testimonial__review p br { display: none; } } .tp-testimonial__review span { color: #7e8188; } .tp-testimonial__quote { font-size: 50px; margin-bottom: 15px; display: inline-block; } .tp-testimonial__quote i { color: var(--tp-theme-primary); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-testimonial__quote { margin-bottom: 30px; } } .tp-testimonial__dots { text-align: center; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; transform: translateY(100%); } .tp-testimonial__dots li { list-style: none; display: inline-block; margin-right: 20px; } .tp-testimonial__dots li button { font-size: 0; position: relative; } .tp-testimonial__dots li button:before { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; line-height: 10px; text-align: center; border-radius: 50%; display: inline-block; background-color: var(--tp-theme-primary); opacity: 0.5; } .tp-testimonial__dots li.slick-active button:before { opacity: 1; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-testimonial__arrows { display: none; } } .tp-testimonial__arrows .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); left: 20px; font-size: 40px; } .tp-testimonial__arrows .slick-arrow:hover { color: var(--tp-theme-primary); } .tp-testimonial__arrows .slick-arrow.slick-next { left: auto; right: 20px; } .tp-testimonial-2__slider .slick-track { padding-top: 50px; } .tp-testimonial-2__slider.slick-list { margin: 0 -15px; } .tp-testimonial-2__slider .slick-slide { margin-right: 15px; margin-left: 15px; } .tp-testimonial-2__avata { text-align: center; display: inline-block; } .tp-testimonial-2__avata img { border-radius: 50%; margin-bottom: 30px; display: inline-block; } .tp-testimonial-2__ratting { display: block; margin-bottom: 5px; } .tp-testimonial-2__ratting i { color: #faa423; } .tp-testimonial-2__box { padding: 30px 40px; border-radius: 10px; background-color: rgb(255, 255, 255); box-shadow: 0px 15px 30px 0px rgba(67, 68, 71, 0.1); text-align: center; margin-bottom: 60px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-testimonial-2__box { padding: 30px 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-testimonial-2__review { padding-left: 30px; padding-right: 30px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-testimonial-2__review { padding-left: 0px; padding-right: 0px; padding-top: 30px; } } .tp-testimonial-2__review h3 { font-size: 20px; margin-bottom: 0; line-height: 1; } .tp-testimonial-2__review p { font-size: 16px; margin-bottom: 30px; } .tp-testimonial-2__dots { text-align: center; } .tp-testimonial-2__dots li { list-style: none; display: inline-block; margin-right: 20px; } .tp-testimonial-2__dots li button { font-size: 0; position: relative; } .tp-testimonial-2__dots li button:before { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; line-height: 10px; text-align: center; border-radius: 50%; display: inline-block; background-color: #cbd1dc; } .tp-testimonial-2__dots li.slick-active button:before { background-color: var(--tp-theme-primary); } /*----------------------------------------*/ /* 16. BRAND CSS /*----------------------------------------*/ .tp-brand__box h3 { font-size: 20px; margin-bottom: 6px; } .tp-brand__box p { color: var(--tp-text-2); } .tp-brand__box span { color: var(--tp-theme-secondary); margin-bottom: 2px; display: inline-block; } .tp-brand__item { height: 130px; display: flex !important; align-items: center; } .tp-brand__item img { height: 54px; padding-right: 20px; max-width: 100%; /* filter: grayscale(1); opacity: 0.7;*/ } .tp-brand__box { box-shadow: 0px 30px 40px 0px rgba(1, 16, 37, 0.1); padding-left: 60px; padding-right: 60px; position: relative; z-index: 1; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-brand__box { padding-left: 30px; padding-right: 30px; } } /*----------------------------------------*/ /* 17. BLOG CSS /*----------------------------------------*/ .tp-blog__item { margin-bottom: 20px; background-color: var(--tp-common-white); -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; } .tp-blog__item:hover { box-shadow: 0px 30px 50px 0px rgba(3, 27, 40, 0.1); } .tp-blog__item:hover .tp-blog__content { border-color: transparent; } @media (max-width: 575px) { .tp-blog__item { border-radius: 10px; } } .tp-blog__content { padding: 35.5px 25px; border: 2px solid; border-color: #e5e7e8; border-left: 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; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-blog__content { padding-top: 30px; padding-bottom: 30px; border: 0; box-shadow: 0px 30px 50px 0px rgba(3, 27, 40, 0.1); border-radius: 10px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-blog__thub img { width: 100%; border-radius: 10px; } } .tp-blog__title { margin-bottom: 25px; } .tp-blog__title a:hover { color: var(--tp-theme-primary); } .tp-blog__meta { margin-bottom: 10px; } .tp-blog__meta span { margin-right: 10px; } .tp-blog__meta span i { margin-right: 5px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .postbox__wrapper { padding-right: 0; margin-bottom: 60px; } } .postbox__thumb .play-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .postbox__audio { height: 455px; width: 100%; } .postbox__audio iframe { width: 100%; height: 100%; border: none; } .postbox__item-single:hover { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .postbox__content { padding: 40px 0; } @media (max-width: 575px) { .postbox__content { padding-left: 20px; padding-right: 20px; } } .postbox__content-single { padding-left: 0; padding-right: 0; border: none; } .postbox__title { font-size: 38px; margin-bottom: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .postbox__title { font-size: 28px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .postbox__title { font-size: 33px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__title { font-size: 30px; } } @media (max-width: 575px) { .postbox__title { font-size: 25px; } } .postbox__title a:hover { color: var(--tp-theme-primary); } .postbox__meta { margin-bottom: 5px; } .postbox__meta span { font-size: 14px; font-weight: 600; text-transform: uppercase; display: inline-block; margin-right: 30px; } .postbox__meta span:last-child { margin-right: 0; } .postbox__meta span i { color: var(--tp-theme-primary); margin-right: 3px; } .postbox__text img { max-width: 100%; } .postbox__text p { margin-bottom: 28px; } .postbox__text-single p { margin-bottom: 15px; } .postbox__slider button { position: absolute; left: 50px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; font-size: 30px; color: var(--tp-common-white); } .postbox__slider button.postbox-slider-button-next { left: auto; right: 50px; } @media (max-width: 575px) { .postbox__slider button.postbox-slider-button-next { right: 10px; } } @media (max-width: 575px) { .postbox__slider button { left: 10px; } } .postbox__comment ul li { margin-bottom: 10px; list-style: none; } .postbox__comment ul li.children { margin-left: 100px; } @media (max-width: 575px) { .postbox__comment ul li.children { margin-left: 15px; } } .postbox__comment-form { margin-bottom: 20px; padding: 40px 30px; box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.09); background: var(--tp-common-white); } .postbox__comment-form-title { font-size: 26px; font-weight: 600; margin-bottom: 40px; } .postbox__comment-input { position: relative; margin-bottom: 20px; } .postbox__comment-input span { font-weight: 600; color: var(--tp-common-black); margin-bottom: 12px; display: block; } .postbox__comment-input input, .postbox__comment-input textarea { height: 55px; padding: 0 20px; width: 100%; font-size: 14px; color: var(--tp-common-black); outline: none; border: 1px solid transparent; -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; background: #f7f7f7; } .postbox__comment-input textarea { height: 175px; resize: none; padding-top: 20px; padding-bottom: 20px; } .postbox__comment-input textarea::-webkit-input-placeholder { color: var(--tp-text-3); } .postbox__comment-input textarea:-moz-placeholder { color: var(--tp-text-3); } .postbox__comment-input textarea::-moz-placeholder { color: var(--tp-text-3); } .postbox__comment-input textarea:-ms-input-placeholder { color: var(--tp-text-3); } .postbox__comment-title { font-size: 26px; font-weight: 600; margin-bottom: 20px; } .postbox__comment-box { padding: 30px; padding-right: 40px; padding-top: 25px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .postbox__comment-avater img { width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .postbox__comment-name { margin-bottom: 5px; } .postbox__comment-name h5 { font-size: 16px; line-height: 1; margin-bottom: 0; } .postbox__comment-name span { font-size: 14px; color: var(--tp-text-1); } @media (max-width: 575px) { .postbox__comment-text { margin-left: 0; margin-top: 15px; } } .postbox__comment-text p { font-size: 16px; color: var(--tp-text-11); margin-bottom: 15px; } .postbox__comment-reply { margin-top: 10px; } .postbox__comment-reply a { display: inline-block; color: var(--tp-theme-primary); background: rgba(61, 108, 231, 0.1); height: 22px; line-height: 22px; padding: 0 10px; font-weight: 500; font-size: 14px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .postbox__comment-reply a:hover { color: var(--tp-common-white); background: var(--tp-theme-primary); } .postbox__comment-agree { padding-left: 5px; } .postbox__comment-agree input { margin: 0; appearance: none; -moz-appearance: none; display: block; width: 14px; height: 14px; background: var(--tp-common-white); border: 1px solid #b9bac1; outline: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; flex: 0 0 auto; -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .postbox__comment-agree input:checked { position: relative; background-color: var(--tp-theme-primary); border-color: transparent; } .postbox__comment-agree input:checked::after { box-sizing: border-box; content: "\f00c"; position: absolute; font-family: var(--tp-ff-fontawesome); font-size: 10px; color: var(--tp-common-white); top: 46%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .postbox__comment-agree input:hover { cursor: pointer; } .postbox__comment-agree label { padding-left: 8px; color: var(--tp-text-1); line-height: 1; } .postbox__comment-agree label a { color: var(--tp-common-black); font-weight: 600; padding-left: 4px; } .postbox__comment-agree label a:hover { color: var(--tp-theme-primary); } .postbox__comment-agree label:hover { cursor: pointer; } .postbox__tag span { font-size: 16px; margin-bottom: 17px; color: var(--tp-common-black); margin-right: 10px; } .rc__post ul li:not(:last-child) { margin-bottom: 15px; } .rc__post-thumb img { width: 80px; height: 80px; object-fit: cover; } .rc__post-title { margin-bottom: 6px; font-size: 17px; } .rc__post-title a:hover { color: var(--tp-theme-primary); } .rc__meta span { font-size: 12px; text-transform: uppercase; font-weight: 600; } .sidebar__widget { padding: 30px; background: var(--tp-grey-2); } .sidebar__widget-title { position: relative; display: inline-block; font-size: 20px; margin-bottom: 30px; font-weight: 600; text-transform: capitalize; } .sidebar__widget ul li { list-style: none; padding-left: 19px; margin-bottom: 25px; line-height: 1; } .sidebar__widget ul li:last-child { margin-bottom: 0; } .sidebar__widget ul li a { font-size: 16px; color: var(--tp-common-black); position: relative; } .sidebar__widget ul li a::after { position: absolute; content: "\f105"; left: -19px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: var(--tp-common-black); font-family: var(--tp-ff-fontawesome); font-size: 16px; -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; } .sidebar__widget ul li a:hover { color: var(--tp-theme-primary); } .sidebar__widget ul li a:hover::after { color: var(--tp-theme-primary); left: -14px; } .sidebar__widget ul li span { float: right; } .sidebar__widget ul li ul { padding-left: 25px; padding-top: 20px; } .sidebar__search { position: relative; } .sidebar__search input { width: 100%; height: 60px; line-height: 60px; background-color: var(--tp-common-white); padding: 0 25px; text-transform: capitalize; border: 1px solid var(--tp-grey-1); outline: none; padding-top: 3px; padding-right: 80px; } .sidebar__search input:focus { border-color: var(--tp-theme-primary); } .sidebar__search button { position: absolute; top: 0; right: 0; height: 100%; padding: 0 24px; color: #fff; line-height: 60px; background: var(--tp-theme-primary); } .sidebar__banner::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .sidebar__banner-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; background: var(--tp-common-white); } .sidebar__banner-content h4 { padding: 15px 20px; font-size: 24px; color: var(--tp-common-black); text-transform: uppercase; margin-bottom: 0; } .tagcloud a { background: var(--tp-common-white); color: var(--tp-common-black); display: inline-block; font-size: 13px; line-height: 1; padding: 8px 21px; padding-bottom: 8px; margin-bottom: 8px; margin-right: 5px; text-transform: uppercase; border: 0; } .tagcloud a:hover { background: var(--tp-common-black); color: var(--tp-common-white); } blockquote { background: var(--tp-grey-1); padding: 35px 50px; margin-bottom: 35px; } @media (max-width: 575px) { blockquote { padding-left: 15px; padding-right: 15px; } } blockquote p { line-height: 1.5; font-size: 20px; color: #57565e; font-weight: 400; } blockquote cite { font-size: 18px; display: block; margin-top: 10px; color: #070337; font-style: inherit; font-weight: 600; position: relative; } blockquote cite::before { content: ""; font-size: 28px; color: var(--tp-theme-primary); padding-bottom: 0px; display: inline-block; background: var(--tp-theme-primary); height: 2px; width: 40px; font-weight: 400; text-align: center; top: -4px; margin-right: 10px; position: relative; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .sidebar__wrapper { padding-left: 0; } } /*----------------------------------------*/ /* 18. CHECKOUT CSS /*----------------------------------------*/ /* 16. Cart */ .table-content .table > :not(:first-child) { border-top: 0; } .table-content table { background: #ffffff; border-color: #eaedff; border-radius: 0; border-style: solid; border-width: 1px 0 0 1px; text-align: center; width: 100%; margin-bottom: 0; } .table-content .table > :not(:last-child) > :last-child > * { border-bottom-color: #eaedff; } .table-content .product-quantity { float: none; } .table-content table td.product-name { font-size: 16px; font-weight: 400; text-transform: capitalize; } .table-content table td.product-name a:hover { color: var(--tp-theme-1); } .table-content table td { border-top: medium none; padding: 20px 10px; vertical-align: middle; font-size: 16px; } .table-content table th, .table-content table td { border-bottom: 1px solid #eaedff; border-right: 1px solid #eaedff; } .table-content table td.product-subtotal { font-size: 16px; } .table-content table td .cart-plus-minus { float: none; margin: 0 auto; } .coupon-all { margin-top: 50px; } .coupon { float: left; } @media (max-width: 767px) { .coupon { float: none; } } #coupon_code { height: 58px; border: 2px solid #eaedff; padding: 0 15px; margin-right: 10px; } @media (max-width: 767px) { #coupon_code { margin-bottom: 15px; } } .coupon2 { float: right; } @media (max-width: 767px) { .coupon2 { float: none; margin-top: 15px; } } .cart-page-total { padding-top: 50px; } .cart-page-total > h2 { font-size: 25px; margin-bottom: 20px; text-transform: capitalize; } .cart-page-total > ul { border: 1px solid #eaedff; } .cart-page-total > ul > li { list-style: none; font-size: 15px; color: #6f7172; padding: 10px 30px; border-bottom: 1px solid #eaedff; font-weight: 400; } .cart-page-total ul > li > span { float: right; } .cart-page-total li:last-child { border-bottom: 0; } td.product-thumbnail img { width: 125px; } /* 17. Checkout */ .coupon-accordion h3 { background-color: #f7f7f7; border-top: 3px solid var(--tp-theme-primary); font-size: 16px; font-weight: 500; margin: 0 0 25px; padding: 1em 2em 1em 3.5em; position: relative; width: auto; } .coupon-accordion h3 span { font-weight: 400; -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; } .coupon-accordion h3 span:hover { color: var(--tp-theme-primary); } .coupon-accordion h3::before { content: "\f07b"; left: 15px; top: 13px; position: absolute; color: var(--tp-theme-1); font-family: "Font Awesome 5 Pro"; font-weight: 700; } .coupon-accordion > span { color: #6f7172; cursor: pointer; transition: 0.3s; font-weight: 500; } .coupon-accordion > span:hover, p.lost-password a:hover { color: var(--tp-common-black); } .coupon-content { border: 1px solid #eaedff; display: none; margin-bottom: 20px; padding: 30px; } .coupon-info p.coupon-text { margin-bottom: 15px; } .coupon-info p { margin-bottom: 0; } .coupon-info p.form-row-first label, .coupon-info p.form-row-last label { display: block; color: #6f7172; } .coupon-info p.form-row-first label span.required, .coupon-info p.form-row-last label span.required { color: var(--tp-theme-1); font-weight: 700; } .coupon-info p.form-row-first input, .coupon-info p.form-row-last input { border: 1px solid #eaedff; height: 45px; margin: 0 0 14px; max-width: 100%; padding: 0 0 0 10px; width: 100%; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .coupon-info p.form-row-first input:focus, .coupon-info p.form-row-last input:focus { border-color: var(--tp-common-black); } .coupon-info p.form-row input[type=submit]:hover, p.checkout-coupon input[type=submit]:hover { background: #3e976c none repeat scroll 0 0; } .coupon-info p.form-row input[type=checkbox] { position: relative; } .form-row > label { margin-top: 15px; margin-left: 15px; color: #6f7172; } .buttons-cart input, .coupon input[type=submit], .buttons-cart a, .coupon-info p.form-row input[type=submit] { background: #252525 none repeat scroll 0 0; border: medium none; color: #fff; display: inline-block; float: left; font-size: 12px; font-weight: 700; height: 40px; line-height: 40px; margin-right: 15px; padding: 0 15px; text-transform: uppercase; transition: all 0.3s ease 0s; } p.lost-password { margin-top: 15px; } p.lost-password a { color: #6f6f6f; } p.checkout-coupon input[type=text] { height: 45px; padding: 0 15px; width: 100%; border: 1px solid #eaedff; margin-bottom: 15px; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } p.checkout-coupon input[type=text]:focus { border-color: var(--tp-common-black); } .coupon-checkout-content { display: none; } .checkbox-form h3 { border-bottom: 1px solid #eaedff; font-size: 26px; margin: 0 0 20px; padding-bottom: 10px; width: 100%; font-weight: 500; } .country-select { margin-bottom: 30px; position: relative; } .country-select select { width: 100%; background-color: transparent; border: 1px solid #eaedff; padding: 0 10px; height: 50px; } .country-select label, .checkout-form-list label { color: #6f7172; display: block; margin: 0 0 5px; } .country-select label span.required, .checkout-form-list label span.required { color: var(--tp-theme-1); } .country-select .nice-select { border: 1px solid #eaedff; height: 45px; padding-left: 10px; width: 100%; color: #6f7172; margin-bottom: 20px; border-radius: 0; } .country-select .nice-select::after { right: 10px; } .country-select .nice-select .list { width: 100%; } .checkout-form-list { margin-bottom: 30px; } .checkout-form-list label { color: #6f7172; } .checkout-form-list input[type=text], .checkout-form-list input[type=password], .checkout-form-list input[type=email] { background: #ffffff; border: 1px solid #eaedff; border-radius: 0; height: 45px; padding: 0 0 0 10px; width: 100%; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .checkout-form-list input[type=text]:focus, .checkout-form-list input[type=password]:focus, .checkout-form-list input[type=email]:focus { border-color: var(--tp-common-black); } .checkout-form-list input[type=text]::-moz-placeholder, .checkout-form-list input[type=password]::-moz-placeholder, .checkout-form-list input[type=email]::-moz-placeholder { color: #6f7172; opacity: 1; } .checkout-form-list input[type=text]::placeholder, .checkout-form-list input[type=password]::placeholder, .checkout-form-list input[type=email]::placeholder { color: #6f7172; opacity: 1; } .checkout-form-list input[type=checkbox] { display: inline-block; margin-right: 10px; position: relative; top: 1px; } .create-acc label { color: #6f7172; display: inline-block; } .create-account { display: none; } .ship-different-title h3 label { display: inline-block; margin-right: 20px; color: var(--tp-common-black); font-weight: 700; } .order-notes textarea { border: 1px solid #eaedff; height: 120px; padding: 15px; width: 100%; outline: 0; resize: none; } .order-notes textarea:focus { border-color: var(--tp-common-black); } .order-notes textarea::-moz-placeholder { color: #6f7172; opacity: 1; } .order-notes textarea::placeholder { color: #6f7172; opacity: 1; } #ship-box-info { display: none; } .panel-group .panel { border-radius: 0; } .panel-default > .panel-heading { border-radius: 0; } .your-order { padding: 30px 40px 45px; border: 3px solid #f7f7f7; } @media (max-width: 767px) { .your-order { padding: 15px; } } .your-order h3 { border-bottom: 1px solid #eaedff; font-size: 30px; margin: 0 0 20px; padding-bottom: 10px; width: 100%; font-weight: 700; } .your-order-table table { background: none; border: 0; width: 100%; } .your-order-table table th, .your-order-table table td { border-bottom: 1px solid #eaedff; border-right: medium none; color: #6f7172; font-size: 14px; padding: 15px 0; text-align: left; } @media (max-width: 767px) { .your-order-table table th, .your-order-table table td { padding-right: 10px; } } .your-order-table table th { border-top: medium none; color: #6f7172; font-weight: normal; text-align: left; vertical-align: middle; white-space: nowrap; width: 250px; } .panel-body > p { color: #222; } .your-order-table table .shipping ul li { list-style: none; } .your-order-table table .shipping ul li input { position: relative; top: 2px; } .your-order-table table .shipping ul li label { color: #6f7172; } .your-order-table table .shipping th { vertical-align: top; } .your-order-table table .order-total th { border-bottom: 0; font-size: 14px; } .your-order-table table .order-total td { border-bottom: medium none; } .your-order-table table tr.cart_item:hover { background: #F9F9F9; } .your-order-table table tr.order-total td span { color: var(--tp-common-black); font-size: 18px; font-weight: 500; } .payment-method { margin-top: 40px; } .payment-method .accordion-item:last-of-type { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .payment-method .accordion-item { background-color: #fff; border: 0; border-bottom: 1px solid #e7e7e7; } .payment-method .accordion-button { font-size: 16px; font-weight: 500; color: var(--tp-common-black); padding: 23px 0; border: none; } .payment-method .accordion-button:focus { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .payment-method .accordion-button::after { position: absolute; content: "\f067"; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-family: var(--tp-ff-fontawesome); font-size: 16px; font-weight: 400; margin-left: 0; background-image: none; color: var(--tp-theme-1); } .payment-method .accordion-button:not(.collapsed) { color: var(--tp-common-black); background-color: var(--tp-common-white); box-shadow: none; } .payment-method .accordion-button:not(.collapsed)::after { content: "\f068"; } .payment-method .accordion-body { padding: 8px 0; padding-bottom: 40px; } .payment-method .accordion-collapse { border: none; } .panel-title > a { display: block; } .order-button-payment input { background: #232323 none repeat scroll 0 0; border: medium none; color: #fff; font-size: 15px; font-weight: 600; height: 40px; margin: 0px 0 0; padding: 0; text-transform: uppercase; transition: all 0.3s ease 0s; width: 100%; } .order-button-payment input:hover { background: #3e976c none repeat scroll 0 0; } .payment-method .btn-link { -moz-user-select: none; background: no-repeat; border: medium none; border-radius: 0; color: #444; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: 1px; line-height: 1; margin-bottom: 0; padding: 3px 10px; text-align: center; text-transform: uppercase; transition: all 0.3s ease 0s; vertical-align: middle; white-space: nowrap; text-decoration: none; } .payment-method .card { background-color: #ffffff; border: 1px solid #eaedff; border-radius: 0; margin-bottom: 10px; } .payment-method .accordion .card:first-of-type { border: 1px solid #eaedff; } .card-header:first-child { border-radius: 0; } .payment-method .card-header { background-color: #ffffff; border-bottom: 1px solid #eaedff; } .order-button-payment button { width: 100%; } /*----------------------------------------*/ /* 19. CART CSS /*----------------------------------------*/ .cart-area .table-content table { background: #ffffff; border-color: #eaedff; border-radius: 0; border-style: solid; border-width: 1px 0 0 1px; text-align: center; width: 100%; margin-bottom: 0; } .cart-area .table > :not(:first-child) { border: 0; } .cart-area .table-content .product-quantity { float: none; } .cart-area .table-content table td.product-name { font-size: 16px; font-weight: 400; text-transform: capitalize; } .cart-area .table > :not(:last-child) > :last-child > * { border-bottom-color: #eaedff; } .cart-area .table-content table td.product-name a:hover { color: var(--tp-common-black); } .cart-area .table-content table td { border-top: medium none; padding: 20px 10px; vertical-align: middle; font-size: 16px; } .cart-area .table-content table th, .cart-area .table-content table td { border-bottom: 1px solid #eaedff; border-right: 1px solid #eaedff; } .cart-area .table td, .cart-area .table th { border-top: 1px solid #eaedff; } .cart-area .table-content table td.product-subtotal { font-size: 16px; } .cart-area .table-content table td .cart-plus-minus { float: none; margin: 0 auto; } .cart-area .coupon-all { margin-top: 50px; } .cart-area .coupon { float: left; } @media (max-width: 767px) { .cart-area .coupon { float: none; } } .cart-area #coupon_code { height: 50px; border: 2px solid #eaedff; padding: 0 15px; margin-right: 10px; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .cart-area #coupon_code:focus { border-color: var(--tp-common-black); } @media (max-width: 767px) { .cart-area #coupon_code { margin-bottom: 15px; } } .cart-area .coupon2 { float: right; } @media (max-width: 767px) { .cart-area .coupon2 { float: none; margin-top: 15px; } } .cart-area .cart-page-total { padding-top: 50px; } .cart-area .cart-page-total > h2 { font-size: 25px; margin-bottom: 20px; text-transform: capitalize; } .cart-area .cart-page-total > ul { border: 1px solid #eaedff; } .cart-area .cart-page-total > ul > li { list-style: none; font-size: 15px; color: #6f7172; padding: 10px 30px; border-bottom: 1px solid #eaedff; font-weight: 400; } .cart-area .cart-page-total ul > li > span { float: right; } .cart-area .cart-page-total li:last-child { border-bottom: 0; } .cart-area td.product-thumbnail img { width: 125px; } .cart-area .product-quantity-form { margin: auto; width: 122px; height: 58px; border: 2px solid #dadada; text-align: center; 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; } .cart-area .product-quantity-form:hover { border-color: var(--tp-common-black); } .cart-area .cart-plus, .cart-area .cart-minus { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 45px; height: 40px; line-height: 40px; display: inline-block; vertical-align: middle; text-align: center; font-size: 14px; background: transparent; border: none; outline: none; } .cart-area .cart-plus:hover, .cart-area .cart-minus:hover { cursor: pointer; color: var(--tp-common-black); background: transparent; } .cart-area .cart-plus { left: auto; right: 0; } .cart-area .cart-input { height: 58px; width: 32px; text-align: center; font-size: 14px; border: none; display: inline-block; vertical-align: middle; margin: 0 -3px; padding-bottom: 4px; background: transparent; } .cart-area .cart-input:focus { outline: none; } /* cart plus minus default style css */ /*----------------------------------------*/ /* 20. LOGIN CSS /*----------------------------------------*/ .sign__wrapper { padding: 50px 70px; padding-bottom: 45px; margin: 0 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14); -moz-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14); -ms-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14); -o-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14); box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14); z-index: 11; } @media (max-width: 575px) { .sign__wrapper { margin: 0; padding: 30px 20px; padding-bottom: 25px; } } .sign__shape img { position: absolute; z-index: -1; } .sign__shape img.man-1 { left: 50%; top: 50%; z-index: -1; transform: translateX(-50%) translateY(-50%); } .sign__shape img.man-2 { right: 24%; top: 65%; } .sign__shape img.circle { right: 32%; top: 38%; animation: signCircle 5s linear 0s infinite alternate; -webkit-animation: signCircle 5s linear 0s infinite alternate; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .sign__shape img.circle { right: 25%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sign__shape img.circle { right: 22%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sign__shape img.circle { right: 11%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sign__shape img.circle { right: 4%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .sign__shape img.circle { right: 2%; } } @media (max-width: 575px) { .sign__shape img.circle { display: none; } } .sign__shape img.dot { right: 34%; top: 43%; animation: signDot 5s linear 0s infinite alternate; -webkit-animation: signDot 5s linear 0s infinite alternate; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .sign__shape img.dot { right: 29%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sign__shape img.dot { right: 26%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sign__shape img.dot { right: 18%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sign__shape img.dot { right: 5%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .sign__shape img.dot { right: 3%; } } @media (max-width: 575px) { .sign__shape img.dot { display: none; } } .sign__shape img.bg { left: 33%; top: 26%; opacity: 0.06; max-width: 100%; animation: signBg 5s linear 0s infinite alternate; -webkit-animation: signBg 5s linear 0s infinite alternate; } @media only screen and (min-width: 768px) and (max-width: 991px) { .sign__shape img.bg { left: 10%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .sign__shape img.bg { left: 0%; } } @media (max-width: 575px) { .sign__shape img.bg { display: none; } } .sign__shape img.zigzag { left: 32%; top: 43%; animation: signZigzag 5s linear 0s infinite alternate; -webkit-animation: signZigzag 5s linear 0s infinite alternate; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .sign__shape img.zigzag { left: 24%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sign__shape img.zigzag { left: 23%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sign__shape img.zigzag { left: 11%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sign__shape img.zigzag { left: 3%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .sign__shape img.zigzag { left: 2%; } } @media (max-width: 575px) { .sign__shape img.zigzag { display: none; } } .sign__shape img.flower { bottom: 13%; right: 30%; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .sign__shape img.flower { right: 24%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sign__shape img.flower { right: 24%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sign__shape img.flower { right: 12%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sign__shape img.flower { right: 3%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .sign__shape img.flower { right: 1%; } } @media (max-width: 575px) { .sign__shape img.flower { right: 1%; bottom: 3%; } } .sign__header { padding: 0 35px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .sign__header { padding: 0 10px; } } @media (max-width: 575px) { .sign__header { padding: 0px; } } .sign__header p { margin-bottom: 0; position: relative; padding: 0 40px; display: inline-block; } .sign__header p span { position: absolute; top: 40%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .sign__header p span:last-child { left: auto; right: 0; } .sign__header p a:hover { color: var(--tp-theme-primary); } .sign__social { display: block; height: 50px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; position: relative; line-height: 52px; padding-left: 23px; z-index: 1; overflow: hidden; font-size: 16px; } .sign__social::after { position: absolute; content: ""; left: -55%; top: 45%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 220px; width: 220px; background: #3360bd; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; z-index: -1; } @media (max-width: 575px) { .sign__social::after { left: -62%; } } .sign__social i { color: var(--tp-common-white); font-size: 16px; margin-right: 50px; } @media (max-width: 575px) { .sign__social i { margin-right: 35px; } } .sign__social:hover { color: var(--tp-common-white); } .sign__social:hover::after { width: 100%; height: 150%; left: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; } .sign__social.g-plus::after { background: #e93e30; } .sign__form h5 { font-size: 16px; font-weight: 500; color: var(--tp-common-black); margin-bottom: 11px; } .sign__input { position: relative; } .sign__input input { width: 100%; height: 60px; line-height: 52px; padding: 0 50px; font-size: 14px; border: 2px solid #ccc; color: var(--tp-common-black); -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; } .sign__input input:focus { outline: none; background: var(--tp-common-white); border-color: var(--tp-theme-primary); -webkit-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2); -moz-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2); -ms-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2); -o-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2); box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2); } .sign__input i { position: absolute; top: 51%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 25px; font-size: 14px; } .sign__agree input { margin: 0; appearance: none; -moz-appearance: none; display: block; width: 14px; height: 14px; background: transparent; border: 1px solid #ccc; outline: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .sign__agree input:checked { position: relative; background-color: var(--tp-theme-primary); border-color: transparent; } .sign__agree input:checked::after { box-sizing: border-box; content: "\f00c"; position: absolute; font-family: var(--tp-ff-fontawesome); font-size: 10px; color: var(--tp-common-white); top: 46%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .sign__agree input:hover { cursor: pointer; } .sign__agree label { padding-left: 10px; font-size: 14px; } .sign__agree label:hover { cursor: pointer; } .sign__agree label a { color: var(--tp-common-black); font-weight: 500; } .sign__agree label a:hover { color: var(--tp-theme-primary); } .sign__forgot a:hover { color: var(--tp-theme-primary); } .sign__new p { margin-bottom: 0; } .sign__new p a { color: var(--tp-theme-primary); } @keyframes signDot { 0% { transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } 100% { transform: translateY(50px); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); } } @keyframes signZigzag { 0% { transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } 100% { transform: translateY(50px); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); } } @keyframes signCircle { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /*----------------------------------------*/ /* 21. FOOTER CSS /*----------------------------------------*/ .footer__widget-logo img { width: 150px; } .footer__widget p { color: var(--tp-text-1); font-size: 16px; margin-bottom: 20px; } .footer__widget-space { padding-top: 40px; padding-bottom: 40px; } .footer__widget-title { font-size: 20px; padding-top: 15px; margin-bottom: 35px; font-weight: 500; position: relative; } .footer__widget ul { overflow: hidden; } .footer__widget ul li { list-style: none; margin-bottom: 24px; line-height: 1; } .footer__widget ul li:last-child { margin-bottom: 0; } .footer__widget ul li a { font-size: 14px; color: var(--tp-text-body); position: relative; } .footer__widget ul li a:hover { color: var(--tp-theme-primary); } .footer__blog-meta { margin-bottom: 3px; } .footer__blog-meta span { color: var(--tp-text-1); } .footer__blog-meta span i { color: var(--tp-theme-primary); margin-right: 3px; } .footer__blog-meta span:hover { color: var(--tp-common-black); } .footer__blog-title { font-size: 15px; text-transform: uppercase; color: var(--tp-common-black); margin-bottom: 0; line-height: 1.4; } .footer__blog-title a:hover { color: var(--tp-theme-primary); } .footer__info-item { margin-bottom: 20px; } .footer__info-icon i { font-size: 20px; color: var(--tp-theme-primary); } .footer__info-text h4 { color: var(--tp-common-black); font-size: 18px; margin-bottom: 0; } .footer__info-text a { color: var(--tp-text-1); } .footer__contact p { color: var(--tp-text-1); font-size: 16px; margin-bottom: 20px; } .footer__contact iframe { width: 100%; height: 110px; filter: grayscale(100%); } .footer__subscribe p { color: var(--tp-text-1); font-size: 16px; margin-bottom: 20px; } .footer__subscribe-box { position: relative; } .footer__subscribe-input.has-border-radius { border-radius: 4px; overflow: hidden; } .footer__subscribe-input input { width: 100%; height: 50px; padding: 0 23px; padding-right: 160px; border: 1px solid transparent; background-color: var(--tp-common-white); font-size: 16px; color: var(--tp-common-black); } .footer__subscribe-input input:focus { border-color: var(--tp-theme-primary); } .footer__subscribe-input input::-webkit-input-placeholder { color: var(--tp-text-3); } .footer__subscribe-input input:-moz-placeholder { color: var(--tp-text-3); } .footer__subscribe-input input::-moz-placeholder { color: var(--tp-text-3); } .footer__subscribe-input input:-ms-input-placeholder { color: var(--tp-text-3); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer__subscribe-input input { padding-right: 23px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__subscribe-input input { padding-right: 160px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .footer__subscribe-input input { padding-right: 23px; } } .footer__copyright p { font-size: 16px; } .footer__copyright p a { color: var(--tp-theme-primary); opacity: 0.7; } .footer__copyright p a:hover { opacity: 0.9; } .footer__social span { display: inline-block; } .footer__social span:not(:last-child) { margin-right: 10px; } .footer__social span a { display: inline-block; font-size: 15px; width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; line-height: 32px; text-align: center; background: #0d88f0; color: var(--tp-common-white); border: 1px solid transparent; } .footer__social span a:hover { background-color: var(--tp-common-white); color: #0d88f0; border: 1px solid var(--tp-theme-primary); } .footer__social span a.tw { background: #03a9f4; } .footer__social span a.tw:hover { background-color: var(--tp-common-white); color: #03a9f4; border-color: #03a9f4; } .footer__social span a.yt { background: #d2173f; border-color: #d2173f; } .footer__social span a.yt:hover { background-color: var(--tp-common-white); color: #d2173f; } .footer__top { position: relative; padding-top: 100px; padding-bottom: 40px; z-index: 1; } .footer__bottom { border-top: 1px solid; border-color: rgba(0, 15, 47, 0.06); padding-top: 25px; padding-bottom: 25px; } .footer__bottom p { margin-bottom: 0; } .footer-sub-btn { position: absolute; top: 0; right: 0; display: inline-block; height: 100%; line-height: 50px; padding: 0 30px; text-align: center; font-size: 15px; color: var(--tp-common-white); background-color: var(--tp-theme-primary); } /*-------------------------------------------------------------- # Our Values --------------------------------------------------------------*/ .our-values .card { border: 0; padding: 160px 20px 20px 20px; position: relative; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } .our-values .card-body { z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 15px 30px; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); transition: 0.3s; transition: ease-in-out 0.4s; border-radius: 5px; } .our-values .card-title { font-weight: 700; text-align: center; margin-bottom: 15px; } .our-values .card-title a { color: #150517; } .our-values .card-text { color: #5e5e5e; } .our-values .read-more a { color: #777777; text-transform: uppercase; font-weight: 600; font-size: 12px; transition: 0.4s; } .our-values .read-more a:hover { text-decoration: underline; } .our-values .card:hover .card-body { background: #006147; } .our-values .card:hover .read-more a, .our-values .card:hover .card-title, .our-values .card:hover .card-title a, .our-values .card:hover .card-text { color: #fff; } /************************ Designed by : http://responsivewebinc.com ************************/ /* Open Sans */ @import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,700'); /* General */ body { color: #666666; font-size: 13px; line-height: 23px; background: #fff; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: #666; font-family: 'Open Sans', sans-serif; font-weight: 600; margin: 2px 0px; padding: 0px; } h1 { font-size: 30px; line-height: 45px; } h2 { font-size: 25px; line-height: 40px; } h3 { font-size: 22px; line-height: 37px; } h4 { font-size: 18px; line-height: 33px; } h5 { font-size: 15px; line-height: 30px; } h6 { font-size: 13px; line-height: 28px; } p { margin: 2px 0px; padding: 0px; line-height:28px; margin-bottom:5px; } a{ text-decoration: none; color: #777; } a:hover,a:active,a:focus { outline: 0; text-decoration: none; color: #999; } hr { margin: 10px 0px; padding: 0px; border-top: 0px; border-bottom: 1px solid #eee; } :focus { outline:none; } ::-moz-focus-inner { border:0; } /* Text color classes */ .white { color: #ffffff !important; } .grey { color: #eeeeee !important; } .black { color: #555555 !important; } .red { color: #f75353 !important; } .green { color: #51d466 !important; } .lblue { color: #32c8de !important; } .blue { color: #609cec !important; } .orange { color: #f78153 !important; } .yellow { color: #fcd419 !important; } .purple { color: #cb79e6 !important; } .rose { color: #ff61e7 !important; } .brown { color: #d08166 !important; } /* Background color classes */ .bg-white { background-color: #ffffff !important; } .bg-grey { background-color: #eeeeee !important; } .bg-black { background-color: #555555 !important; } .bg-red { background-color: #f75353 !important; } .bg-green { background-color: #51d466 !important; } .bg-lblue { background-color: #32c8de !important; } .bg-blue { background-color: #609cec !important; } .bg-orange { background-color: #f78153 !important; } .bg-yellow { background-color: #fcd419 !important; } .bg-purple { background-color: #cb79e6 !important; } .bg-rose { background-color: #ff61e7 !important; } .bg-brown { background-color: #d08166 !important; } /* Border color classes */ .br-white { border: 1px solid #ffffff !important; } .br-grey { border: 1px solid #eeeeee; } .br-black { border: 1px solid #555555; } .br-red { border: 1px solid #f75353; } .br-green { border: 1px solid #51d466; } .br-lblue { border: 1px solid #32c8de; } .br-blue { border: 1px solid #609cec; } .br-orange { border: 1px solid #f78153; } .br-yellow { border: 1px solid #fcd419; } .br-purple { border: 1px solid #cb79e6; } .br-rose { border: 1px solid #ff61e7; } .br-brown { border: 1px solid #d08166; } /* Button classes */ .btn { border-radius: 2px; position: relative; } .btn.btn-no-border { border: 0px !important; } /* Button colors */ .btn.btn-white { background: #ffffff; color: #666666; border: 1px solid #dddddd; } .btn.btn-white:hover, .btn.btn-white:focus, .btn.btn-white.active, .btn.btn-white:active { background: #f7f7f7; color: #666666; } .btn.btn-grey { background: #eeeeee; color: #666666; border: 1px solid #d5d5d5; } .btn.btn-grey:hover, .btn.btn-grey:focus, .btn.btn-grey.active, .btn.btn-grey:active { background: #d5d5d5; color: #999; } .btn.btn-black { color: #ffffff; background: #666666; border: 1px solid #4d4d4d; } .btn.btn-black:hover, .btn.btn-black:focus, .btn.btn-black.active, .btn.btn-black:active { background: #4d4d4d; color: #ffffff; } .btn.btn-red { color: #ffffff; background: #ed5441; border: 1px solid #e52d16; } .btn.btn-red:hover, .btn.btn-red:focus, .btn.btn-red.active, .btn.btn-red:active { color: #ffffff; background: #e52d16; } .btn.btn-green { color: #ffffff; background: #51d466; border: 1px solid #30c247; } .btn.btn-green:hover, .btn.btn-green:focus, .btn.btn-green.active, .btn.btn-green:active { background: #30c247; color: #ffffff; } .btn.btn-lblue { color: #ffffff; background: #32c8de; border: 1px solid #1faabe; } .btn.btn-lblue:hover, .btn.btn-lblue:focus, .btn.btn-lblue.active, .btn.btn-lblue:active { background: #1faabe; color: #ffffff; } .btn.btn-blue { color: #ffffff; background: #609cec; border: 1px solid #3280e7; } .btn.btn-blue:hover, .btn.btn-blue:focus, .btn.btn-blue.active, .btn.btn-blue:active { background: #3280e7; color: #ffffff; } .btn.btn-orange { color: #ffffff; background: #f8a841; border: 1px solid #f69110; } .btn.btn-orange:hover, .btn.btn-orange:focus, .btn.btn-orange.active, .btn.btn-orange:active { background: #f69110; color: #ffffff; } .btn.btn-yellow { background: #fcd419; color: #ffffff; border: 1px solid #dfb803; } .btn.btn-yellow:hover, .btn.btn-yellow:focus, .btn.btn-yellow.active, .btn.btn-yellow:active { background: #dfb803; color: #ffffff; } .btn.btn-purple { background: #cb79e6; color: #ffffff; border: 1px solid #ba4ede; } .btn.btn-purple:hover, .btn.btn-purple:focus, .btn.btn-purple.active, .btn.btn-purple:active { background: #ba4ede; color: #ffffff; } .btn.btn-rose { background: #ff61e7; color: #ffffff; border: 1px solid #ff2edf; } .btn.btn-rose:hover, .btn.btn-rose:focus, .btn.btn-rose.active, .btn.btn-rose:active { background: #ff2edf; color: #ffffff; } .btn.btn-brown { background: #d08166; color: #ffffff; border: 1px solid #c4613f; } .btn.btn-brown:hover, .btn.btn-brown:focus, .btn.btn-brown.active, .btn.btn-brown:active { background: #c4613f; color: #ffffff; } /* Label */ .label { border-radius: 2px; font-weight: normal; padding: 3px 7px; font-size: 12px; line-height: 18px; } /* Label sizes */ .label.label-xs { font-size: 10px; padding: 1px 5px; line-height: 12px; } .label.label-sm { font-size: 11px; padding: 2px 6px; line-height: 15px; } .label.label-lg { font-size: 13px; padding: 5px 9px; line-height: 23px; } /* Label colors */ .label.label-white{ color: #666666 !important; background: #f7f7f7; } .label.label-grey { color: #666666 !important; background: #eeeeee; } .label.label-black { color: #ffffff; background: #666666; } .label.label-red { color: #ffffff; background: #ed5441; } .label.label-green { color: #ffffff; background: #51d466; } .label.label-lblue { color: #ffffff; background: #32c8de; } .label.label-blue { color: #ffffff; background: #609cec; } .label.label-orange { color: #ffffff; background: #f8a841; } .label.label-yellow { background: #fcd419; color: #ffffff; } .label.label-purple { background: #cb79e6; color: #ffffff; } .label.label-rose { background: #ff61e7; color: #ffffff; } .label.label-brown { background: #d08166; color: #ffffff; } /* Badges */ .badge { min-width: 10px; padding: 3px 7px !important; font-size: 12px; line-height: 12px; font-weight: normal; display: inline-block; color: #fff; border-radius: 10px; } .badge.badge-white { color: #666666; background: #ffffff; } .badge.badge-grey { color: #a2a2a2; background: #eeeeee; } .badge.badge-black { color: #ffffff; background: #666666; } .badge.badge-red { color: #ffffff; background: #ed5441; } .badge.badge-green { color: #ffffff; background: #51d466; } .badge.badge-lblue { color: #ffffff; background: #32c8de; } .badge.badge-blue { color: #ffffff; background: #609cec; } .badge.badge-orange { color: #ffffff; background: #f8a841; } .badge.badge-yellow { color: #ffffff; background: #fcd419; } .badge.badge-purple { color: #ffffff; background: #cb79e6; } .badge.badge-rose { color: #ffffff; background: #ff61e7; } .badge.badge-brown { color: #ffffff; background: #d08166; } .btn .badge { position: absolute; top: -13px; right: -8px; } /* Social Media */ .facebook { background: #3280e7; } .facebook:hover { background: #134fa0; } .twitter { background: #32c8de;} .twitter:hover { background: #188392;} .google-plus {background: #f96f4a;} .google-plus:hover { background: #eb6440;} .linkedin { background: #729fda;} .linkedin:hover {background: #3069b6;} .pinterest { background: #ed5441;} .pinterest:hover { background: #b72411;} .dropbox {background: #32c8de;} .dropbox:hover { background: #188392;} .bitcoin {background: #f8a841;} .bitcoin:hover { background: #cc7607;} .foursquare {background: #22bed4;} .foursquare:hover {background: #146f7c;} .flickr { background: #ff61e7;} .flickr:hover { background: #fa00d4;} .github {background: #666666;} .github:hover { background: #333333;} .instagram { background: #d6917a;} .instagram:hover {background: #b35637;} .skype {background: #32c8de;} .skype:hover {background: #188392;} .tumblr {background: #84a1c8;} .tumblr:hover {background: #476d9f;} .vimeo {background: #32c8de;} .vimeo:hover {background: #188392;} .dribbble{background: #ff2edf;} .dribbble:hover {background: #c700a9;} .youtube {background: #ed5441;} .youtube:hover { background: #b72411;} /* General */ /* UI */ .ui-4{ margin-top:40px; } /* UI Border */ .ui-bor{ padding-left:0px; padding-right:0px; } @media (max-width:767px){ .ui-bor{ padding-left:15px; padding-right:15px; } } /* UI Item */ .ui-item{ position:relative; overflow:hidden; } @media (max-width:767px){ .ui-item{ max-width:400px; margin-left:auto; margin-right:auto; } } /* UI Content */ .ui-item .ui-content{ position:absolute; top:0px; width:100%; height:100%; text-align:center; } /* Heading */ .ui-item .ui-content h2{ color:#fff; font-size:30px; font-weight:300; margin-top:72px; } @media (max-width:991px) and (min-width:391px){ .ui-item .ui-content h2{ margin-top:104px; } } /* UI Background */ .ui-item .ui-bg-red{ background:rgba(255,0,0,0.2); } .ui-item .ui-bg-green{ background:rgba(35,207,62,0.4); } .ui-item .ui-bg-yellow{ background:rgba(252,249,3,0.4); } .ui-item .ui-bg-lblue{ background:rgba(0,255,234,0.4); } .ui-item .ui-bg-blue{ background:rgba(0,66,255,0.4); } .ui-item .ui-bg-rose-pink{ background:rgba(0,0,255,0.4); } .ui-item .ui-bg-orange{ background:rgba(255,162,0,0.4); } .ui-item .ui-bg-brown{ background:rgba(162,50,50,0.4); } /* UI Content Hover */ .ui-item .ui-content .ui-content-hover{ position:absolute; top:100%; left:0px; width:100%; height:100%; text-align:left; padding:0px 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .ui-item:hover .ui-content .ui-content-hover{ top:0px; } /* Heading */ .ui-item .ui-content .ui-content-hover h2{ font-size:20px; font-weight:400; margin-top:24px; line-height:30px; } @media (max-width:1200px) and (min-width:992px){ .ui-item .ui-content .ui-content-hover h2{ margin-top:10px; } } @media (max-width:312px){ .ui-item .ui-content .ui-content-hover h2{ margin-top:16px; } } .ui-item .ui-content .ui-content-hover h2 a{ color:#fff; } /* Paragraph */ .ui-item .ui-content .ui-content-hover p{ color:#fff; font-size:13px; line-height:26px; } /* UI Icon */ .ui-item .ui-content .ui-content-hover .ui-icon{ position:absolute; bottom:20px; right:20px; } .ui-item .ui-content .ui-content-hover .ui-icon a i{ color:#fff; font-size:22px; font-weight:700; width:28px; height:28px; border-radius:100%; border:2px solid #fff; line-height:24px; text-align:center; } /************************ Designed by : http://responsivewebinc.com ************************/ /* Open Sans */ @import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600'); /* General */ body { color: #666666; font-size: 13px; line-height: 23px; background: #fff; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: #666; font-family: 'Open Sans', sans-serif; font-weight: 600; margin: 2px 0px; padding: 0px; } h1 { font-size: 30px; line-height: 45px; } h2 { font-size: 25px; line-height: 40px; } h3 { font-size: 22px; line-height: 37px; } h4 { font-size: 18px; line-height: 33px; } h5 { font-size: 15px; line-height: 30px; } h6 { font-size: 13px; line-height: 28px; } p { margin: 2px 0px; padding: 0px; margin-bottom:5px; line-height:28px; } a{ text-decoration: none; color: #777; } a:hover,a:active,a:focus { outline: 0; text-decoration: none; color: #999; } hr { margin: 10px 0px; padding: 0px; border-top: 0px; border-bottom: 1px solid #eee; } :focus { outline:none; } ::-moz-focus-inner { border:0; } /* Text color classes */ .white { color: #ffffff !important; } .grey { color: #eeeeee !important; } .black { color: #555555 !important; } .red { color: #f75353 !important; } .green { color: #51d466 !important; } .lblue { color: #32c8de !important; } .blue { color: #609cec !important; } .orange { color: #f78153 !important; } .yellow { color: #fcd419 !important; } .purple { color: #cb79e6 !important; } .rose { color: #ff61e7 !important; } .brown { color: #d08166 !important; } /* Background color classes */ .bg-white { background-color: #ffffff !important; } .bg-grey { background-color: #eeeeee !important; } .bg-black { background-color: #555555 !important; } .bg-red { background-color: #f75353 !important; } .bg-green { background-color: #51d466 !important; } .bg-lblue { background-color: #32c8de !important; } .bg-blue { background-color: #609cec !important; } .bg-orange { background-color: #f78153 !important; } .bg-yellow { background-color: #fcd419 !important; } .bg-purple { background-color: #cb79e6 !important; } .bg-rose { background-color: #ff61e7 !important; } .bg-brown { background-color: #d08166 !important; } /* Border color classes */ .br-white { border: 1px solid #ffffff !important; } .br-grey { border: 1px solid #eeeeee; } .br-black { border: 1px solid #555555; } .br-red { border: 1px solid #f75353; } .br-green { border: 1px solid #51d466; } .br-lblue { border: 1px solid #32c8de; } .br-blue { border: 1px solid #609cec; } .br-orange { border: 1px solid #f78153; } .br-yellow { border: 1px solid #fcd419; } .br-purple { border: 1px solid #cb79e6; } .br-rose { border: 1px solid #ff61e7; } .br-brown { border: 1px solid #d08166; } /* Button classes */ .btn { border-radius: 2px; position: relative; } .btn.btn-no-border { border: 0px !important; } /* Button colors */ .btn.btn-white { background: #ffffff; color: #666666; border: 1px solid #dddddd; } .btn.btn-white:hover, .btn.btn-white:focus, .btn.btn-white.active, .btn.btn-white:active { background: #f7f7f7; color: #666666; } .btn.btn-grey { background: #eeeeee; color: #666666; border: 1px solid #d5d5d5; } .btn.btn-grey:hover, .btn.btn-grey:focus, .btn.btn-grey.active, .btn.btn-grey:active { background: #d5d5d5; color: #999; } .btn.btn-black { color: #ffffff; background: #666666; border: 1px solid #4d4d4d; } .btn.btn-black:hover, .btn.btn-black:focus, .btn.btn-black.active, .btn.btn-black:active { background: #4d4d4d; color: #ffffff; } .btn.btn-red { color: #ffffff; background: #ed5441; border: 1px solid #e52d16; } .btn.btn-red:hover, .btn.btn-red:focus, .btn.btn-red.active, .btn.btn-red:active { color: #ffffff; background: #e52d16; } .btn.btn-green { color: #ffffff; background: #51d466; border: 1px solid #30c247; } .btn.btn-green:hover, .btn.btn-green:focus, .btn.btn-green.active, .btn.btn-green:active { background: #30c247; color: #ffffff; } .btn.btn-lblue { color: #ffffff; background: #32c8de; border: 1px solid #1faabe; } .btn.btn-lblue:hover, .btn.btn-lblue:focus, .btn.btn-lblue.active, .btn.btn-lblue:active { background: #1faabe; color: #ffffff; } .btn.btn-blue { color: #ffffff; background: #609cec; border: 1px solid #3280e7; } .btn.btn-blue:hover, .btn.btn-blue:focus, .btn.btn-blue.active, .btn.btn-blue:active { background: #3280e7; color: #ffffff; } .btn.btn-orange { color: #ffffff; background: #f8a841; border: 1px solid #f69110; } .btn.btn-orange:hover, .btn.btn-orange:focus, .btn.btn-orange.active, .btn.btn-orange:active { background: #f69110; color: #ffffff; } .btn.btn-yellow { background: #fcd419; color: #ffffff; border: 1px solid #dfb803; } .btn.btn-yellow:hover, .btn.btn-yellow:focus, .btn.btn-yellow.active, .btn.btn-yellow:active { background: #dfb803; color: #ffffff; } .btn.btn-purple { background: #cb79e6; color: #ffffff; border: 1px solid #ba4ede; } .btn.btn-purple:hover, .btn.btn-purple:focus, .btn.btn-purple.active, .btn.btn-purple:active { background: #ba4ede; color: #ffffff; } .btn.btn-rose { background: #ff61e7; color: #ffffff; border: 1px solid #ff2edf; } .btn.btn-rose:hover, .btn.btn-rose:focus, .btn.btn-rose.active, .btn.btn-rose:active { background: #ff2edf; color: #ffffff; } .btn.btn-brown { background: #d08166; color: #ffffff; border: 1px solid #c4613f; } .btn.btn-brown:hover, .btn.btn-brown:focus, .btn.btn-brown.active, .btn.btn-brown:active { background: #c4613f; color: #ffffff; } /* Label */ .label { border-radius: 2px; font-weight: normal; padding: 3px 7px; font-size: 12px; line-height: 18px; } /* Label sizes */ .label.label-xs { font-size: 10px; padding: 1px 5px; line-height: 12px; } .label.label-sm { font-size: 11px; padding: 2px 6px; line-height: 15px; } .label.label-lg { font-size: 13px; padding: 5px 9px; line-height: 23px; } /* Label colors */ .label.label-white{ color: #666666 !important; background: #f7f7f7; } .label.label-grey { color: #666666 !important; background: #eeeeee; } .label.label-black { color: #ffffff; background: #666666; } .label.label-red { color: #ffffff; background: #ed5441; } .label.label-green { color: #ffffff; background: #51d466; } .label.label-lblue { color: #ffffff; background: #32c8de; } .label.label-blue { color: #ffffff; background: #609cec; } .label.label-orange { color: #ffffff; background: #f8a841; } .label.label-yellow { background: #fcd419; color: #ffffff; } .label.label-purple { background: #cb79e6; color: #ffffff; } .label.label-rose { background: #ff61e7; color: #ffffff; } .label.label-brown { background: #d08166; color: #ffffff; } /* Badges */ .badge { min-width: 10px; padding: 3px 7px !important; font-size: 12px; line-height: 12px; font-weight: normal; display: inline-block; color: #fff; border-radius: 10px; } .badge.badge-white { color: #666666; background: #ffffff; } .badge.badge-grey { color: #a2a2a2; background: #eeeeee; } .badge.badge-black { color: #ffffff; background: #666666; } .badge.badge-red { color: #ffffff; background: #ed5441; } .badge.badge-green { color: #ffffff; background: #51d466; } .badge.badge-lblue { color: #ffffff; background: #32c8de; } .badge.badge-blue { color: #ffffff; background: #609cec; } .badge.badge-orange { color: #ffffff; background: #f8a841; } .badge.badge-yellow { color: #ffffff; background: #fcd419; } .badge.badge-purple { color: #ffffff; background: #cb79e6; } .badge.badge-rose { color: #ffffff; background: #ff61e7; } .badge.badge-brown { color: #ffffff; background: #d08166; } .btn .badge { position: absolute; top: -13px; right: -8px; } /* Social Media */ .facebook { background: #3280e7; } .facebook:hover { background: #134fa0; } .twitter { background: #32c8de;} .twitter:hover { background: #188392;} .google-plus {background: #f96f4a;} .google-plus:hover { background: #eb6440;} .linkedin { background: #729fda;} .linkedin:hover {background: #3069b6;} .pinterest { background: #ed5441;} .pinterest:hover { background: #b72411;} .dropbox {background: #32c8de;} .dropbox:hover { background: #188392;} .bitcoin {background: #f8a841;} .bitcoin:hover { background: #cc7607;} .foursquare {background: #22bed4;} .foursquare:hover {background: #146f7c;} .flickr { background: #ff61e7;} .flickr:hover { background: #fa00d4;} .github {background: #666666;} .github:hover { background: #333333;} .instagram { background: #d6917a;} .instagram:hover {background: #b35637;} .skype {background: #32c8de;} .skype:hover {background: #188392;} .tumblr {background: #84a1c8;} .tumblr:hover {background: #476d9f;} .vimeo {background: #32c8de;} .vimeo:hover {background: #188392;} .dribbble{background: #ff2edf;} .dribbble:hover {background: #c700a9;} .youtube {background: #ed5441;} .youtube:hover { background: #b72411;} /* ui-6 */ body{ background:#f4f8fd; } .ui-6{ margin:30px 0px; } /* UI Item */ .ui-6 .ui-item{ max-width:600px; margin:20px auto; } @media (max-width:1200px){ .ui-6 .ui-item{ max-width:440px; } } @media (max-width:500px){ .ui-6 .ui-item{ max-width:220px; } } @media (max-width:350px){ .ui-6 .ui-item{ max-width:190px !important; } } /* Ui Icon */ .ui-6 .ui-item .ui-icon{ float:left; width:250px; height:240px; text-align:center; background:url("../img/ui-6/overlay.png"); background-size: 252px 230px; box-shadow:0px 0px 5px rgba(0,0,0,0.1); } @media (max-width:350px){ .ui-6 .ui-item .ui-icon{ width:190px !important; } } @media (max-width:500px){ .ui-6 .ui-item .ui-icon{ float:none; width:220px; } } @media (max-width:1200px){ .ui-6 .ui-item .ui-icon{ height:220px; width:220px; } } /* Icon */ .ui-6 .ui-icon a > i{ font-size:60px; color:#fff; margin-top:75px; margin-bottom:10px; } @media (max-width:1200px){ .ui-6 .ui-icon a > i{ margin-top:55px; } } /* Heading */ .ui-6 .ui-icon h3 > a{ color:#fff; } @media (max-width:1200px){ .ui-6 .ui-icon h3 > a{ font-size:20px; } } /* UI list */ .ui-6 .ui-list{ width:250px; height:240px; padding:50px 20px; border:1px solid #ddd; margin-left:250px; background:#fff; box-shadow:0px 0px 5px rgba(0,0,0,0.06); } @media (max-width:350px){ .ui-6 .ui-list{ width:190px !important; } } @media (max-width:500px){ .ui-6 .ui-list{ float:none; width:220px; margin-left:0px !important; } } @media (max-width:1200px){ .ui-6 .ui-list{ height:220px; width:220px; margin-left:220px; padding:40px 20px; } } /* CSS3 arrow please */ .ui-6 .ui-list:after, .ui-6 .ui-list:before { right:54%; top:53%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } @media (max-width:1200px){ .ui-6 .ui-list:after, .ui-6 .ui-list:before { right:49%; } } .ui-6 .ui-list:after { border-right-color: #fff; border-width:16px; margin-top: -30px; } @media (max-width:500px){ .ui-6 .ui-list:after{ border-right-color:transparent; } } .ui-6 .ui-list ul > li{ font-size:15px; color:#888585; line-height:35px; } /* UI list icon */ .ui-6 .ui-list ul li > i{ font-size: 12px; height:20px; width:20px; border-radius: 100%; line-height:20px; text-align: center; color: #fff; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) { .footer-sub-btn { position: relative; margin-top: 15px; width: 100%; } } .footer-sub-btn:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } /* footer col design for home 1 */ .footer-col-1 { padding-right: 35px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-1 { padding-right: 0; } } .footer-col-2 { padding-left: 30px; padding-right: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) { .footer-col-2 { padding-right: 0; padding-left: 0; } } .footer-col-3 { padding-right: 10px; padding-left: 60px; padding-right: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-3 { padding-right: 0; padding-left: 0; } } /*# sourceMappingURL=main.css.map */