📁 PHP Dosya Yöneticisi
/
/
home
/
demodesigncom
/
firmascripti.demodesign.com.tr
/
assets
/
css
📝
style.css
← Geri Dön
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* 1.2 Root variables */ /* 1.3 Reset CSS */ html { -webkit-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } body { margin: 0; padding: 0; font-family: var(--font-primary); font-size: var(--font-size-small); line-height: var(--line-height-175); color: var(--color-dark-3); -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; outline: 0; width: 100%; min-width: 320px; word-wrap: break-word; overflow-wrap: anywhere; overflow-x: hidden; } main, article { position: relative; } p { font-size: var(--font-size-small); margin-bottom: 0; color: var(--color-dark-3); line-height: var(--line-height-175); } span { font-weight: normal; } mark, ins { text-decoration: none; } a { text-decoration: none; color: var(--color-dark-3); outline: none; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } a:hover, a:focus { text-decoration: none; color: var(--color-dark-3); outline: none; } button:hover, button:focus { outline: none; } :focus { outline: none; } ul { list-style: none; margin: 0; padding: 0; } video { height: 100%; width: 100%; } body img { border: none; max-width: 100%; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; } img, iframe { max-width: 100%; } img { height: auto; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; line-height: var(--line-height-125); letter-spacing: 0; color: var(--color-dark-2); } h1 {font-size: var(--font-size-xxl);font-family: var(--font-secondary);} h2 {font-size: var(--font-size-xlarge);font-family: var(--font-secondary);} h3 {font-size: var(--font-size-large);font-family: var(--font-secondary);} h4 {font-size: var(--font-size-medium);} h5 {font-size: var(--font-size-small);} h6 {font-size: var(--font-size-xsmall);} h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { color: inherit; } .font-bolder {font-weight: 900 !important;} .font-bold {font-weight: bold !important;} .font-italic {font-style: italic !important;} .browserupgrade { margin: 0.2em 0; background: var(--color-light-1); color: var(--color-black); padding: 0.2em 0; } ::-moz-selection { color: var(--color-white); background: var(--color-primary); text-shadow: none; } ::selection { color: var(--color-white); background: var(--color-primary); text-shadow: none; } .no-padding { padding-left: 0 !important; padding-right: 0 !important; } /* 1.4 Template Colors */ .color-bg-dark-1 {background: var(--color-dark-1);} .color-bg-dark-2 {background: var(--color-dark-2);} .color-bg-dark-3 {background: var(--color-dark-3);} .color-bg-light-1 {background: var(--color-light-1);} .color-bg-light-2 {background: var(--color-light-2);} .color-bg-primary {background: var(--color-primary);} .color-primary {color: var(--color-primary);} .color-white {color: var(--color-white) !important;} .text-color {color: var(--color-dark-3);} .text-color-light {color: var(--color-light-1) !important;} .overlay-bg {background: var(--color-dark-2);} /* Template Colors End */ .clearfix:after { content: ""; display: table; clear: both; } .body-font { font-family: var(--font-primary); font-weight: normal; line-height: var(--line-height-175); } .font-primary { font-family: var(--font-primary); } .font-secondary { font-family: var(--font-secondary); line-height: var(--line-height-100); } .font-secondary-italic { font-family: var(--font-secondary); font-style: italic; } i.icon-100-white { font-size: 100px; color: var(--color-white); } i.icon-100-color { font-size: 100px; color: var(--color-primary); } .font-small { font-size: var(--font-size-xsmall); } .font-medium { font-size: var(--font-size-medium); } .font-large { font-size: var(--font-size-large); } /* 1.5 Priyo Icons */ /* Grid Icon */ .priyo-icon-grid.post-nav { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .priyo-icon-grid { width: 28px; height: 28px; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; } .priyo-icon-grid .grid-icon.box-1, .priyo-icon-grid .grid-icon.box-2, .priyo-icon-grid .grid-icon.box-3 { position: relative; border: 1px solid; border-color: var(--color-dark-3); width: 8px; height: 8px; left: 0; top: 0; } .priyo-icon-grid .grid-icon.box-2 { top: 2px; } .priyo-icon-grid .grid-icon.box-3 { top: 4px; } .priyo-icon-grid .grid-icon.box-1::before, .priyo-icon-grid .grid-icon.box-2::before, .priyo-icon-grid .grid-icon.box-3::before, .priyo-icon-grid .grid-icon.box-1::after, .priyo-icon-grid .grid-icon.box-2::after, .priyo-icon-grid .grid-icon.box-3::after { content: ""; position: absolute; border: 1px solid; border-color: var(--color-dark-3); width: 8px; height: 8px; top: -1px; left: 100%; margin-left: 3px; } .priyo-icon-grid .grid-icon.box-1::after, .priyo-icon-grid .grid-icon.box-2::after, .priyo-icon-grid .grid-icon.box-3::after { left: 16px; -webkit-transform: scale(1); transform: scale(1); } .priyo-icon-grid:hover .grid-icon.box-1, .priyo-icon-grid:hover .grid-icon.box-1:before, .priyo-icon-grid:hover .grid-icon.box-1:after, .priyo-icon-grid:hover .grid-icon.box-2, .priyo-icon-grid:hover .grid-icon.box-3 { border-color: transparent; border-radius: 50%; background-color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .priyo-icon-grid:hover .grid-icon.box-2:after, .priyo-icon-grid:hover .grid-icon.box-3:before { border-radius: 50%; -webkit-transition: all 0.3s; transition: all 0.3s; } .priyo-icon-grid .grid-icon.box-2:before { border-color: transparent; background-color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .priyo-icon-grid:hover .grid-icon.box-2:before { border-radius: 50%; } .priyo-icon-grid:hover .grid-icon.box-2:before { border: 1px solid; border-color: var(--color-dark-3); background-color: transparent; -webkit-transition: all 0.3s; transition: all 0.3s; } .priyo-icon-grid:hover .grid-icon.box-3:after { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: top left; transform-origin: top left; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } /* Grid Icon End */ /* Long Arrow Icon */ .priyo-icon-arrow { position: relative; background-color: transparent; width: 30px; height: 30px; -webkit-transition: all 0.3s; transition: all 0.3s; } .priyo-icon-arrow.right { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .priyo-icon-arrow.left { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .priyo-icon-arrow.up { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .priyo-icon-arrow.down { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .priyo-icon-arrow:before { content: ""; top: 50%; left: 1px; width: 12px; height: 12px; border-left: 2px solid; border-top: 2px solid; border-color: var(--color-dark-2); -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); position: absolute; border-radius: 2px; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 1; } .priyo-icon-arrow:hover:before { margin-right: 2px; border-color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .priyo-icon-arrow:after { content: ""; width: 30px; height: 2px; background-color: var(--color-dark-2); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: -1px; border-radius: 2px; -webkit-transition: all 0.3s; transition: all 0.3s; } .priyo-icon-arrow:hover:after { width: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } /* Long Arrow Icon End */ /* Priyo Icons End */ /* 1.6 Default Spacings */ .container-fluid { padding-left: 0; padding-right: 0; } /* Gutters All Sides */ .g-xsmall {padding: var(--gutters-xsmall);} .g-small {padding: var(--gutters-small);} .g-medium {padding: var(--gutters-medium);} .g-large {padding: var(--gutters-large);} .g-xlarge {padding: var(--gutters-xlarge);} .g-xxlarge {padding: var(--gutters-xxlarge);} .g-super {padding: var(--gutters-super);} /* Gutters Left and Right */ .gx-xsmall { padding-left: var(--gutters-xsmall); padding-right: var(--gutters-xsmall); } .gx-small { padding-left: var(--gutters-small); padding-right: var(--gutters-small); } .gx-medium { padding-left: var(--gutters-medium); padding-right: var(--gutters-medium); } .gx-large { padding-left: var(--gutters-large); padding-right: var(--gutters-large); } .gx-xlarge { padding-left: var(--gutters-xlarge); padding-right: var(--gutters-xlarge); } .gx-xxlarge { padding-left: var(--gutters-xxlarge); padding-right: var(--gutters-xxlarge); } .gx-super { padding-left: var(--gutters-super); padding-right: var(--gutters-super); } /* Gutters Left */ .gl-xsmall {padding-left: var(--gutters-xsmall);} .gl-small {padding-left: var(--gutters-small);} .gl-medium {padding-left: var(--gutters-medium);} .gl-large {padding-left: var(--gutters-large);} .gl-xlarge {padding-left: var(--gutters-xlarge);} .gl-xxlarge {padding-left: var(--gutters-xxlarge);} .gl-super {padding-left: var(--gutters-super);} /* Gutters Right */ .gr-xsmall {padding-right: var(--gutters-xsmall);} .gr-small {padding-right: var(--gutters-small);} .gr-medium {padding-right: var(--gutters-medium);} .gr-large {padding-right: var(--gutters-large);} .gr-xlarge {padding-right: var(--gutters-xlarge);} .gr-xxlarge {padding-right: var(--gutters-xxlarge);} .gr-super {padding-right: var(--gutters-super);} /* Padding Top */ .pt-xsmall {padding-top: 25px;} .pt-small {padding-top: 50px;} .pt-medium {padding-top: 75px;} .pt-large {padding-top: 100px;} .pt-xlarge {padding-top: 140px;} .pt-none {padding-top: 0;} /* Padding Bottom */ .pb-xsmall {padding-bottom: 25px;} .pb-small {padding-bottom: 50px;} .pb-medium {padding-bottom: 75px;} .pb-large {padding-bottom: 100px;} .pb-xlarge {padding-bottom: 140px;} .pb-none {padding-bottom: 0;} /* No Gutters */ .no-padding {padding-left: 0; padding-right: 0;} /* Default Margins */ .mt-xsmall {margin-top: 25px;} .mt-small {margin-top: 50px;} .mt-medium {margin-top: 75px;} .mt-large {margin-top: 100px;} .mt-xlarge {margin-top: 140px;} .mt-none {margin-top: 0;} .mb-xsmall {margin-bottom: 25px;} .mb-small {margin-bottom: 50px;} .mb-medium {margin-bottom: 75px;} .mb-large {margin-bottom: 100px;} .mb-xlarge {margin-bottom: 140px;} .mb-none {margin-bottom: 0;} /* Default Offset Margins */ .mt-offset-xsmall {margin-top: -25px;} .mt-offset-small {margin-top: -50px;} .mt-offset-medium {margin-top: -75px;} .mt-offset-large {margin-top: -100px;} .mt-offset-xlarge {margin-top: -140px;} .mb-offset-xsmall {margin-bottom: -25px;} .mb-offset-small {margin-bottom: -50px;} .mb-offset-medium {margin-bottom: -75px;} .mb-offset-large {margin-bottom: -100px;} .mb-offset-xlarge {margin-bottom: -140px;} /* Margins - Inline CSS */ .mt-0 {margin-top: 0 !important;} .mt-5 {margin-top: 5px !important;} .mt-10 {margin-top: 10px !important;} .mt-15 {margin-top: 15px !important;} .mt-20 {margin-top: 20px !important;} .mt-24 {margin-top: 24px !important;} .mt-25 {margin-top: 25px !important;} .mt-30 {margin-top: 30px !important;} .mt-35 {margin-top: 35px !important;} .mt-40 {margin-top: 40px !important;} .mt-45 {margin-top: 45px !important;} /* .mt-50 { margin-top: 50px; } */ .mt-55 {margin-top: 55px !important;} .mt-60 {margin-top: 60px !important;} .mt-65 {margin-top: 65px !important;} .mt-70 {margin-top: 70px !important;} .mt-75 {margin-top: 75px !important;} .mt-80 {margin-top: 80px !important;} .mt-85 {margin-top: 85px !important;} .mt-90 {margin-top: 90px !important;} .mt-95 {margin-top: 95px !important;} .mt-100 {margin-top: 100px !important;} .mt-105 {margin-top: 105px !important;} .mt-110 {margin-top: 110px !important;} .mt-115 {margin-top: 115px !important;} .mt-120 {margin-top: 120px !important;} .mb-0 {margin-bottom: 0 !important;} .mb-5 {margin-bottom: 5px !important;} .mb-10 {margin-bottom: 10px !important;} .mb-15 {margin-bottom: 15px !important;} .mb-20 {margin-bottom: 20px !important;} .mb-24 {margin-bottom: 24px !important;} .mb-25 {margin-bottom: 25px !important;} .mb-30 {margin-bottom: 30px !important;} .mb-35 {margin-bottom: 35px !important;} .mb-40 {margin-bottom: 40px !important;} .mb-45 {margin-bottom: 45px !important;} .mb-50 {margin-bottom: 50px !important;} .mb-55 {margin-bottom: 55px !important;} .mb-60 {margin-bottom: 60px !important;} .mb-65 {margin-bottom: 65px !important;} .mb-70 {margin-bottom: 70px !important;} .mb-75 {margin-bottom: 75px !important;} .mb-80 {margin-bottom: 80px !important;} .mb-85 {margin-bottom: 85px !important;} .mb-90 {margin-bottom: 90px !important;} .mb-95 {margin-bottom: 95px !important;} .mb-100 {margin-bottom: 100px !important;} .mb-105 {margin-bottom: 105px !important;} .mb-110 {margin-bottom: 110px !important;} .mb-115 {margin-bottom: 115px !important;} .mb-120 {margin-bottom: 120px !important;} /* Paddings - Inline CSS */ .pt-0 {padding-top: 0 !important;} .pt-5 {padding-top: 5px !important;} .pt-10 {padding-top: 10px !important;} .pt-15 {padding-top: 15px !important;} .pt-20 {padding-top: 20px !important;} .pt-24 {padding-top: 24px !important;} .pt-25 {padding-top: 25px !important;} .pt-30 {padding-top: 30px !important;} .pt-35 {padding-top: 35px !important;} .pt-40 {padding-top: 40px !important;} .pt-45 {padding-top: 45px !important;} .pt-50 {padding-top: 50px !important;} .pt-55 {padding-top: 55px !important;} .pt-60 {padding-top: 60px !important;} .pt-65 {padding-top: 65px !important;} .pt-70 {padding-top: 70px !important;} .pt-75 {padding-top: 75px !important;} .pt-80 {padding-top: 80px !important;} .pt-85 {padding-top: 85px !important;} .pt-90 {padding-top: 90px !important;} .pt-95 {padding-top: 95px !important;} .pt-100 {padding-top: 100px !important;} .pt-105 {padding-top: 105px !important;} .pt-110 {padding-top: 110px !important;} .pt-113 {padding-top: 113px !important;} .pt-115 {padding-top: 115px !important;} .pt-120 {padding-top: 120px !important;} .pb-0 {padding-bottom: 0 !important;} .pb-5 {padding-bottom: 5px !important;} .pb-10 {padding-bottom: 10px !important;} .pt-15 {padding-bottom: 15px !important;} .pb-20 {padding-bottom: 20px !important;} .pb-24 {padding-bottom: 24px !important;} .pb-25 {padding-bottom: 25px !important;} .pb-30 {padding-bottom: 30px !important;} .pb-35 {padding-bottom: 35px !important;} .pb-40 {padding-bottom: 40px !important;} .pb-45 {padding-bottom: 45px !important;} .pb-50 {padding-bottom: 50px !important;} .pb-55 {padding-bottom: 55px !important;} .pb-60 {padding-bottom: 60px !important;} .pb-65 {padding-bottom: 65px !important;} .pb-70 {padding-bottom: 70px !important;} .pb-75 {padding-bottom: 75px !important;} .pb-80 {padding-bottom: 80px !important;} .pb-85 {padding-bottom: 85px !important;} .pb-90 {padding-bottom: 90px !important;} .pb-95 {padding-bottom: 95px !important;} .pb-100 {padding-bottom: 100px !important;} .pb-105 {padding-bottom: 105px !important;} .pb-110 {padding-bottom: 110px !important;} .pb-115 {padding-bottom: 115px !important;} .pb-120 {padding-bottom: 120px !important;} .gl-none {padding-left: 0 !important;} .gr-none {padding-right: 0 !important;} .lh-125 {line-height: var(--line-height-125);} .lh-150 {line-height: var(--line-height-150);} .w-50 {width: 50%;} .w-55 {width: 55%;} .w-60 {width: 60%;} .w-65 {width: 65%;} .w-70 {width: 70%;} .w-75 {width: 75%;} .w-80 {width: 80%;} .w-85 {width: 85%;} .w-90 {width: 90%;} .w-95 {width: 95%;} .w-100 {width: 100%;} /* Spacings End */ /* 1.7 Reset form */ .search_form ::placeholder, .form-register-form ::placeholder, .form-login-form ::placeholder, .billing-additional-fields__field-wrapper ::placeholder, .billing-fields__field-wrapper ::placeholder, .form-login ::placeholder, .coupon ::placeholder, .search-form ::placeholder, .account-login-form ::placeholder, .account-register-form ::placeholder, .subscribe-form ::placeholder, .contact__form ::placeholder { color: var(--color-gray); } .contact__form.theme-dark ::placeholder { color: var(--color-dark-3); opacity: .5; } /* 1.8 Mou Scrollbar */ .mou-scrollbar { overflow-y: auto; scrollbar-color: var(--color-dark-2) var(--color-dark-4); scrollbar-width: thin; } .mou-scrollbar::-webkit-scrollbar { width: 2px; } .mou-scrollbar::-webkit-scrollbar-track { background-color: var(--color-light-2); } .mou-scrollbar::-webkit-scrollbar-thumb { background-color: var(--color-dark-2); } /* Scrollbar End */ .content-header { font-weight: bold; color: var(--color-primary); line-height: var(--line-height-150); } .grid-header { font-weight: bold; color: var(--color-dark-3); line-height: var(--line-height-150); -webkit-transition: all 0.5s; transition: all 0.5s; } /* 1.9 Mou Buttons */ input.submit, .mou-mini-cart__buttons a, .theme-btn button, button.theme-btn, .theme-btn a { font-weight: 400; letter-spacing: 1px; color: var(--color-white); background: var(--color-dark-2); border: transparent; text-transform: uppercase; display: inline-block; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 1; padding: 10px 30px; } .mou-mini-cart__buttons { margin-top: 30px; } .mou-mini-cart__buttons a { display: block; text-align: center; margin-bottom: 15px; padding: 15px 30px; border: 1px solid var(--color-dark-2); } .mou-mini-cart__buttons a:hover { border: 1px solid var(--color-primary); } .mou-mini-cart__buttons a:last-child { margin-bottom: 0; background: var(--color-light-1); color: var(--color-dark-2); border: 1px solid var(--color-dark-2); } .mou-mini-cart__buttons a:last-child:hover { color: var(--color-white); border: 1px solid var(--color-primary); } input.submit.d-block, .theme-btn.d-block button, button.theme-btn.d-block, .theme-btn.d-block a { display: block; width: 100%; text-align: center; } .is-sticky .theme-btn.header-btn a { color: var(--color-white); border: none; background: var(--color-primary); } .is-sticky .theme-btn.header-btn a:hover { color: var(--color-primary); } input.submit.btn-large, .theme-btn.btn-large button, button.theme-btn.btn-large, .theme-btn.btn-large a { padding: 15px 30px; } input.submit.btn-small, .theme-btn.btn-small button, .theme-btn.btn-small a { font-size: var(--font-size-xsmall); font-weight: 500; padding: 6px 16px; } .mou-mini-cart__buttons a:before, .theme-btn button:before, button.theme-btn:before, .theme-btn a:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; z-index: -1; } .theme-btn.fill-primary button, .theme-btn.fill-primary a { background: var(--color-primary); color: var(--color-white); } .theme-btn.fill-white button, .theme-btn.fill-white a { background: var(--color-white); color: var(--color-primary); } .theme-btn.fill-dark button, .theme-btn.fill-dark a { background: var(--color-dark-2); border: 1px solid; color: var(--color-white); border-color: var(--color-dark-2); } .theme-btn.fill-dark button:before, .theme-btn.fill-dark a:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--color-light-1); -webkit-transition: all 0.3s; transition: all 0.3s; z-index: -1; } .theme-btn.fill-dark button:hover:before, .theme-btn.fill-dark a:hover:before { width: 100%; background: var(--color-light-1); -webkit-transition: all 0.3s; transition: all 0.3s; } .theme-btn.theme-bg button:hover:before, .theme-btn.theme-bg a:hover:before { background: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .mou-mini-cart__buttons a:hover:before, .theme-btn button:hover:before, button.theme-btn:hover:before, .theme-btn a:hover:before { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } input.submit:hover { background-color: var(--color-primary); } .theme-btn button:hover, button.theme-btn:hover, .theme-btn a:hover { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } input.submit.theme-bg:hover, .theme-btn.theme-bg button:hover, .theme-btn.theme-bg a:hover { color: var(--color-dark-3); -webkit-transition: all 0.3s; transition: all 0.3s; } input.submit.dark, .theme-btn.dark button, .theme-btn.dark a, .theme-btn.header-btn a { color: var(--color-primary); background: transparent; border: 1px solid var(--color-primary); letter-spacing: 2px; font-weight: 400; } .theme-btn.dark.btn-fill button { background: var(--color-primary); color: var(--color-white); } .theme-btn.dark.btn-fill button:before { background: var(--color-white); } .theme-btn.dark button:hover, .theme-btn.dark a:hover, .theme-btn.header-btn a:hover { color: var(--color-white); } .theme-btn.fill-primary button:hover:before, .theme-btn.fill-primary a:hover:before, .is-sticky .theme-btn.header-btn a:hover:before { background: var(--color-dark-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .theme-btn.fill-primary button:hover, .theme-btn.fill-primary a:hover, .theme-btn.fill-dark button:hover, .theme-btn.fill-dark a:hover { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .theme-btn.dark button:hover:before, .theme-btn.dark a:hover:before, .theme-btn.header-btn a:hover:before { background: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .theme-btn.dark.btn-fill button:hover:before { background: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .theme-btn.dark.btn-fill button:hover { background: var(--color-white); color: var(--color-primary); border-color: var(--color-white); } /* 1.10 Content Button */ .content-btn.dark a, .content-btn a { position: relative; color: var(--color-dark-2); } .content-btn.dark a { color: var(--color-white); } .content-btn.dark a::before, .content-btn a:before { position: absolute; content: ""; bottom: -4px; left: 0; width: 92%; height: 1px; background: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .content-btn a:hover:before { background: var(--color-dark-2); -webkit-transition: all 0.5s; transition: all 0.5s; } .content-btn.dark a:hover:before { background: var(--color-white); -webkit-transition: all 0.5s; transition: all 0.5s; } .content-btn i:before { margin: 0; font-size: var(--font-size-medium); line-height: var(--line-height-100); } .content-btn a i { position: absolute; right: -18px; opacity: 0; visibility: hidden; top: 0; color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .content-btn a:hover i { right: -28px; opacity: 1; visibility: visible; -webkit-transition: all 0.5s; transition: all 0.5s; } /* Buttons End */ /* ------------------------------ 2. Modal + Off-canvas ------------------------------ */ .offcanvas-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 0; height: 100vh; background-color: var(--color-dark-1); cursor: pointer; opacity: 0; visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .offcanvas-backdrop.show { width: 100vw; -webkit-transform: none; transform: none; opacity: 0.75; visibility: visible; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .mou_offcanvas-account, .mou_offcanvas-cart { top: 0; right: 0; width: 470px; border-left: none; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); -webkit-transform: translateX(100%); transform: translateX(100%); } .cart-panel-content-box { height: 100%; } /* 2.1 Close Button */ .mou_offcanvas-account .header-account-close, .mou_offcanvas-cart .header-cart-close { position: absolute; top: 34px; right: 34px; width: 28px; height: 22px; z-index: 3; cursor: pointer; -webkit-transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); } .mou_offcanvas-account .header-account-close, .mou_offcanvas-cart .header-cart-close { position: absolute; top: 34px; right: 34px; width: 28px; height: 0; opacity: 0; visibility: hidden; z-index: 3; cursor: pointer; -webkit-transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); } .mou_offcanvas-account.show .header-account-close, .mou_offcanvas-cart.show .header-cart-close { height: 22px; opacity: 1; visibility: visible; -webkit-transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); } .mou_offcanvas-account .header-account-close:before, .mou_offcanvas-account .header-account-close:after, .mou_offcanvas-cart .header-cart-close:before, .mou_offcanvas-cart .header-cart-close:after { content: ""; width: 30px; height: 1px; background: var(--color-primary); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -webkit-transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1); } .mou_offcanvas-account.show .header-account-close:before, .mou_offcanvas-account.show .header-account-close:before, .mou_offcanvas-cart.show .header-cart-close:before, .mou_offcanvas-cart.show .header-cart-close:before { width: 26px; -webkit-transform: translateY(-50%) rotate(-135deg); transform: translateY(-50%) rotate(-135deg); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } .mou_offcanvas-account.show .header-account-close:after, .mou_offcanvas-account.show .header-account-close:after, .mou_offcanvas-cart.show .header-cart-close:after, .mou_offcanvas-cart.show .header-cart-close:after { width: 26px; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } /* Close Button End */ /* 2.2 Mou Off-canvas Overlay */ .offcanvas-overlay { position: fixed; height: 100%; width: 0; background: var(--color-dark-1); top: 0; right: 0; opacity: 0.75; visibility: hidden; cursor: pointer; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); z-index: 105; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .offcanvas-overlay.active { width: 100%; visibility: visible; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } /* Mou Off-canvas Overlay End */ /* ------------------------------ 3. Preloader ------------------------------ */ .site-logo img { max-height: 30px; } .loading { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .percent { color: var(--color-white); font-size: 100px; font-weight: 900; text-align: center; } .progress-bar { width: 412px; height: 30px; background: var(--color-dark-2); padding: 6px; -webkit-box-sizing: border-box; box-sizing: border-box; } .loading-progress { width: 0; height: 100%; background: var(--color-primary); } .text { text-transform: uppercase; color: var(--color-dark-3); font-size: var(--font-size-medium); letter-spacing: 20px; line-height: var(--line-height-100); margin-bottom: 20px; display: none; padding-left: 20px; } .text-blink { -webkit-animation: animate 0.7s ease-in-out 0.1s; animation: animate 0.7s ease-in-out 0.1s; } @keyframes animate { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } } .loader-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-dark-1); z-index: 99999; } /* ------------------------------ 4. Cursor - CSS ------------------------------ */ /* Custom Cursor */ .custom-cursor, .custom-cursor-dot { position: fixed; z-index: 999; top: 0; left: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; } /* decorative */ .custom-cursor { width: 52px; height: 52px; background: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 50%; } .custom-cursor-dot { width: 12px; height: 12px; border-radius: 50%; background-color: transparent; } /* Follower */ /* Follower Container/Area/Wrapper */ .follower { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; height: 100px; border: none; border-radius: 50%; background-color: #04aa6d; color: var(--color-white); -webkit-transition: none; transition: none; pointer-events: none; } .pointer_large { cursor: pointer; } /* Custom Cursor End */ /* ------------------------------ 5. Header ------------------------------ */ .slidingbar-open { margin-right: 40px; } .slidingbar-open i::before { font-size: 24px; color: var(--color-dark-3); margin: 0; padding: 0; cursor: pointer; -webkit-transition: all 1s; transition: all 1s; } .slidingbar-open i:hover:before { color: var(--color-white); } .is-sticky .slidingbar-open i::before { color: var(--color-dark-2); -webkit-transition: all 1s; transition: all 1s; } .site-header-dark.is-sticky .slidingbar-open i::before { color: var(--color-dark-3); -webkit-transition: all 1s; transition: all 1s; } .is-sticky .slidingbar-open i:hover:before { color: var(--color-primary); -webkit-transition: all 1s; transition: all 1s; } .nav-logo img { max-width: 120px; max-height: 24px; height: 24px; } /* 5.1 Sliding Bar */ .slidingbar-container { width: 348px; height: 100%; min-height: 100vh; overflow: auto; margin: 0; padding: 30px; position: fixed; background: var(--color-dark-2); top: 0; right: 100%; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); z-index: 106; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; -webkit-transform: translateX(0); transform: translateX(0); } .slidingbar-container.site-header-dark { border-right: 1px solid var(--color-dark-2); } .slidingbar-container.active { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition-delay: 0s; transition-delay: 0s; } .slidingbar-close { position: absolute; top: 34px; right: 34px; width: 28px; height: 22px; z-index: 3; cursor: pointer; -webkit-transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); } .slidingbar-close:before, .slidingbar-close:after { content: ""; width: 26px; height: 1px; background: white; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -webkit-transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1); } .slidingbar-container.active .slidingbar-close:before { -webkit-transform: translateY(-50%) rotate(225deg); transform: translateY(-50%) rotate(225deg); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } .slidingbar-container.active .slidingbar-close:after { -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } .slidingbar-logo img { max-width: 120px; max-height: 24px; } .contact-info a, .contact-info p { color: var(--color-dark-3); display: block; font-size: var(--font-size-small); -webkit-transition: all 0.5s; transition: all 0.5s; } .contact-info a:hover { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .contact-info i { color: var(--color-white); float: left; margin-right: 18px; font-size: var(--font-size-large); line-height: var(--line-height-175); } .instagram-items li { width: 70px; height: 70px; overflow: hidden; float: left; margin-right: 1px; margin-bottom: 1px; position: relative; -webkit-transition: all 0.5s; transition: all 0.5s; } .instagram-items li a:before { position: absolute; content: "\f16d"; font-family: "Font Awesome 5 Brands", sans-serif; font-size: var(--font-size-large); color: var(--color-white); text-align: center; opacity: 0; visibility: hidden; width: 100%; height: 0; line-height: 70px; background: rgba(245, 36, 95, 0.9); -webkit-transition: all 0.5s; transition: all 0.5s; } .instagram-items li a:hover:before { opacity: 1; height: 100%; visibility: visible; -webkit-transition: all 0.5s; transition: all 0.5s; } .slidingbar-social li { display: inline-block; margin: 0 10px; } .slidingbar-social li:first-child { margin-left: 0; } .slidingbar-social li a { display: block; color: var(--color-primary); font-size: var(--font-size-medium); -webkit-transition: all 0.5s; transition: all 0.5s; } .slidingbar-social li a:hover { color: var(--color-white); -webkit-transition: all 0.5s; transition: all 0.5s; } /* ------------------------------ 6. Navbar Area ------------------------------ */ .site-header { position: absolute; padding: 15px 0; background: transparent; top: 0; left: 0; right: 0; z-index: 101; width: 100%; height: auto; -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInUp; animation: 500ms ease-in-out 0s normal none 1 running fadeInUp; -webkit-transition: 0.3s; transition: 0.3s; } .site-header.is-sticky { position: fixed; top: 0; left: 0; width: 100%; background: var(--color-white); padding: 15px 0; -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; -webkit-transition: 0.3s; transition: 0.3s; } .site-header.site-header-dark.is-sticky { background: var(--color-dark-1); border-bottom: 1px solid var(--color-dark-2); } /* 6.1 Main Menu */ .nav-container .menu-main > li { position: relative; display: inline-block; margin-right: 30px; opacity: 0; } .nav-container .menu-main > li > a { display: block; padding: 10px 0; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; position: relative; } .is-sticky .nav-container .menu-main > li > a:before, .nav-container .menu-main > li > a:before { content: ""; left: calc(100% + 2px); top: calc(50% - 5px); -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; background: var(--color-primary); height: 0; width: 6px; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .nav-container .menu-main > li > a.active:before, .nav-container .menu-main > li > a:active:before, .nav-container .menu-main > li > a:hover:before { top: calc(50% - 1px); height: 9px; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; visibility: visible; -webkit-transition: all 0.3s; transition: all 0.3s; } .nav-container .menu-main > li > a:active, .nav-container .menu-main > li > a.active, .nav-container .menu-main > li > a:hover { color: var(--color-dark-3); } .is-sticky .nav-container .menu-main > li > a:active, .is-sticky .nav-container .menu-main > li > a.active, .is-sticky .nav-container .menu-main > li > a:hover { color: var(--color-dark-2); } .is-sticky .nav-container .menu-main > li.active > a { color: var(--color-dark-2); } .site-header-dark.is-sticky .nav-container .menu-main > li > a:active, .site-header-dark.is-sticky .nav-container .menu-main > li > a.active, .site-header-dark.is-sticky .nav-container .menu-main > li > a:hover { color: var(--color-white); } .menu-main .sub-menu { width: 260px; position: absolute; margin-top: 30px; top: 100%; left: 0; background: var(--color-primary); visibility: hidden; opacity: 0; padding-top: 15px; padding-bottom: 15px; z-index: 1; display: block; -webkit-transform: scaleX(.75); transform: scaleX(.75); } .nav-container .menu-main > li:hover .sub-menu { visibility: visible; opacity: 1; margin-top: 0; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: .5s cubic-bezier(.78, -0.68, .65, 1.48); transition: .5s cubic-bezier(.78, -0.68, .65, 1.48); } .menu-main .sub-menu > li { position: relative; padding: 0 25px; display: block; } .menu-main .sub-menu > li:first-child::before { content: ""; position: absolute; top: -20px; left: 15px; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent var(--color-primary) transparent; } .menu-main .sub-menu .sub-sub-menu > li:hover, .menu-main .sub-menu > li:hover { background: rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s; transition: all 0.3s; } .menu-main .sub-menu > li > a { line-height: 2.25; color: var(--color-white); display: block; -webkit-transition: all 0.3s; transition: all 0.3s; } .menu-main .sub-menu > li > a:hover { margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .menu-main .sub-menu .sub-sub-menu { width: 260px; position: absolute; top: 0; left: 100%; background: var(--color-primary); visibility: hidden; padding-top: 15px; padding-bottom: 15px; margin-left: 10px; opacity: 0; z-index: 1; display: block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-container .menu-main > li:last-child .sub-sub-menu { right: 100%; left: auto; margin-right: 10px; } .nav-container .menu-main .sub-menu > li:hover .sub-sub-menu { visibility: visible; opacity: 1; margin-left: 1px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-container .menu-main > li:last-child .sub-menu > li:hover .sub-sub-menu { margin-right: 1px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .menu-main .sub-menu .sub-sub-menu li { padding: 0 25px; } .menu-main .sub-menu .sub-sub-menu li a { color: var(--color-white); display: block; line-height: 2.25; -webkit-transition: all 0.3s; transition: all 0.3s; } .menu-main .sub-menu .sub-sub-menu li a:hover { color: var(--color-white); margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .menu-main li i { font-size: 12px; color: var(--color-white); } .sub-menu li i.fas.fa-plus, .sub-menu li i.fas.fa-minus { position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .sub-menu li i.fas.fa-minus { opacity: 0; right: 25px; -webkit-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .menu-main .sub-menu li:hover i.fas.fa-plus { opacity: 0; -webkit-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .menu-main .sub-menu li:hover i.fas.fa-minus { opacity: 1; right: 20px; -webkit-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } /* End Navbar Area */ /* Main Menu End */ /* ------------------------------ 8. Main Menu - Nav Sliding ------------------------------ */ .menu-open { width: 34px; height: 20px; margin-left: 30px; cursor: pointer; -webkit-transform-origin: right; transform-origin: right; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); } .menu-open:before { content: ""; position: absolute; width: 34px; height: 2px; left: 0; top: 50%; -webkit-transform-origin: right; transform-origin: right; -webkit-transform: translateY(-50%) scaleX(1); transform: translateY(-50%) scaleX(1); -webkit-transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1); } .hamburger:before, .hamburger:after { content: ""; position: absolute; width: 34px; height: 2px; -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); left: 0; top: 0; -webkit-transition-delay: 1.3s; transition-delay: 1.3s; } .hamburger:after { top: auto; bottom: 0; } .menu-open.active .hamburger:after { -webkit-transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateY(-10px); transform: translateY(-10px); } .menu-open.active .hamburger:before { -webkit-transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateY(10px); transform: translateY(10px); } .menu-open:before, .hamburger:before, .hamburger:after { background: var(--color-primary); } .menu-open:before { background: var(--color-dark-3); } .is-sticky .menu-open:before { background: var(--color-dark-1); } .menu-open:hover .hamburger:after { background: var(--color-primary); -webkit-transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition-delay: 0s; transition-delay: 0s; } .menu-open:hover .hamburger:before { background: var(--color-primary); -webkit-transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition-delay: 0s; transition-delay: 0s; } .menu-open:hover:before { -webkit-transform: scaleX(0.75); transform: scaleX(0.75); } /* ------------------------------ 9. Nav Container ------------------------------ */ .nav-container.nav-sliding { width: 420px; height: 100%; min-height: 100vh; overflow: hidden; margin: 0; padding: 40px; padding-bottom: 80px; position: fixed; background: var(--color-dark-1); top: 0; left: 100%; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); z-index: 106; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; -webkit-transform: translateX(0); transform: translateX(0); overflow-y: auto; } .nav-container.nav-sliding.active { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition-delay: 0s; transition-delay: 0s; } .menu-close { position: absolute; top: 40px; right: 40px; width: 34px; height: 22px; z-index: 3; cursor: pointer; -webkit-transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); } .menu-close:before, .menu-close:after { content: ""; width: 34px; height: 2px; background: var(--color-primary); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -webkit-transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1); } .nav-container.nav-sliding.active .menu-close:before { -webkit-transform: translateY(-50%) rotate(225deg); transform: translateY(-50%) rotate(225deg); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } .nav-container.nav-sliding.active .menu-close:after { -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } .nav-container.nav-sliding .menu { margin-top: 50px; } .nav-container.nav-sliding .menu-main li { position: relative; display: block; opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .nav-container.nav-sliding .menu-main li:before { content: ""; position: absolute; top: 86%; left: 0; width: 0; height: 3px; background-color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 1; } .nav-container.nav-sliding .menu-main li:hover:before { width: 25%; left: 7px; -webkit-transition: all 0.5s; transition: all 0.5s; background-color: var(--color-primary); } .nav-container.nav-sliding .menu-main li a { font-weight: bold; color: var(--color-white); font-family: var(--font-secondary); text-transform: none; font-size: var(--font-size-xlarge); line-height: var(--line-height-100); padding: 5px 0; display: block; -webkit-transition: 0.3s; transition: 0.3s; } .nav-container.nav-sliding .menu-main > li:hover > a { text-decoration: none; color: var(--color-dark-4); letter-spacing: 3px; margin-left: 5px; -webkit-transition: 0.3s; transition: 0.3s; } .nav-container.nav-sliding .menu-main > li:hover > a:before { opacity: 0; } .header-right-items > * { padding-left: 20px; } /* Main Menu - Nav Sliding End */ /* ------------------------------ 10. Search Container ------------------------------ */ .search-container { width: 800px; height: 500px; border-radius: 20px; overflow: hidden; margin: 0; padding: 80px; position: fixed; background: var(--color-dark-2); top: 100%; left: 50%; opacity: 0; visibility: hidden; -webkit-transform: translateX(-50%) scale(0.5); transform: translateX(-50%) scale(0.5); -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); z-index: 106; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .search-container.active { opacity: 1; visibility: visible; top: 50%; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition-delay: 0s; transition-delay: 0s; } .search-close { position: absolute; top: 40px; right: 40px; width: 40px; height: 22px; z-index: 3; cursor: pointer; -webkit-transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); } .search-close:before, .search-close:after { content: ""; width: 40px; height: 2px; background: var(--color-primary); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -webkit-transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1); } .search-container.active .search-close:before { -webkit-transform: translateY(-50%) rotate(225deg); transform: translateY(-50%) rotate(225deg); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } .search-container.active .search-close:after { -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } .search_form { z-index: 4; position: absolute; width: 500px; height: 60px; background: transparent; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .search_form input { height: 100%; width: 88%; padding: 10px 20px; font-size: var(--font-size-large); color: var(--color-dark-3); border: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; outline: none; margin: 0; float: left; } .search_form input:focus::-webkit-input-placeholder { text-align: right; } .search_form input:focus:-ms-input-placeholder { text-align: right; } .search_form input:focus::placeholder { text-align: right; } .search_form .search_btn { height: 100%; width: 12%; background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-large); border: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; outline: none; border-left: 2px solid; border-color: var(--color-primary); margin: 0; float: right; -webkit-transition: all 0.5s; transition: all 0.5s; } .search_form .search_btn:hover { background: var(--color-white); border-left: 1px solid; border-color: var(--color-dark-2); color: var(--color-dark-2); -webkit-transition: all 0.5s; transition: all 0.5s; } /* Search Clear Icon */ #search-clear-icon::-webkit-search-cancel-button { position: relative; right: 0; -webkit-appearance: none; height: 24px; width: 24px; background: url("../images/icons/cancel.svg") no-repeat; cursor: pointer; } /* ------------------------------ 11. Header Right ------------------------------ */ .site-header .header-account > a, .site-header .header-wishlist > a, .site-header .header-cart > a { position: relative; color: var(--color-dark-3); } .site-header .header-cart .counter { position: absolute; top: -10px; right: -10px; font-size: 10px; font-weight: 500; color: var(--color-white); text-align: center; line-height: 11px; min-width: 18px; height: 18px; border-radius: 30px; padding: 4px; background-color: var(--color-primary); display: inline-block; } /* 11.1 Cart/Account Panel Content */ .account-panel-header, .cart-panel-header { background: var(--color-light-1); text-align: center; padding: 30px; } .cart_list { padding: 0 30px; overflow-y: auto; height: 100%; } .cart-panel-counter { color: var(--color-primary); } .offcanvas-account-register, .offcanvas-account-login, .cart-panel-content-box { height: 100%; } .account-panel-content, .cart-panel-content { background-color: var(--color-white); height: 100%; position: static; } .widget_shopping_cart_content { height: 100%; padding-bottom: 348px; position: static; background-color: var(--color-white); } .widget_shopping_cart_content ul.cart_list { margin: 0; padding: 0 30px; overflow-y: auto; height: 100%; } .mini-cart-item__thumbnail { max-width: 100px; margin-right: 20px; border: 2px solid; border-color: var(--color-dark-3); } .widget_shopping_cart_content ul.cart_list .mini_cart_item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding-bottom: 15px; margin-bottom: 15px; } .widget_shopping_cart_content ul.cart_list .mini_cart_item:first-child { margin-top: 30px; } .widget_shopping_cart_content .mini-cart-item__summary { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .widget_shopping_cart_content .mini-cart-item__price { display: block; color: var(--color-dark-2); } .amount { font-size: var(--font-size-medium); } .remove.remove_from_cart_button i:before { font-size: 8px; position: relative; top: -2px; color: var(--color-dark-3); margin-right: 6px; margin-left: 0; width: 18px; height: 18px; display: inline-block; background: var(--color-light-1); border-radius: 50%; text-align: center; line-height: 18px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .remove_from_cart_button:hover i:before { background: var(--color-primary-alpha-50); color: var(--color-white); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .mini-cart-item__title { font-weight: 500; font-size: var(--font-size-medium); letter-spacing: 0; } .mini-cart-item__title:hover { color: var(--color-primary); } .widget_shopping_cart_content .widget_shopping_cart_footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 30px 30px; background-color: var(--color-white); } .widget_shopping_cart_footer .total { font-size: var(--font-size-medium); color: var(--color-dark-2); padding: 20px 30px; background: var(--color-light-1); margin: 0 calc(30px * -1); } .widget_shopping_cart_content .total strong { float: left; font-weight: 600; } .widget_shopping_cart_content .total { text-align: right; } .widget_shopping_cart_footer .buttons { margin: 30px 0 0; } /* 11.2 Login */ .offcanvas-account-register { display: none; } .offcanvas-account-register.active { display: block; } .offcanvas-account-login { display: none; } .offcanvas-account-login.active { display: block; } .account-modal-logo { margin-bottom: 50px; margin-top: 20px; } .account-modal-logo img { max-height: 30px; } .account-panel-content { padding: 30px; } .form_register_links a { color: var(--color-primary); } .form_register_links a:hover { color: var(--color-dark-2); } .form_links_reset-password a { color: var(--color-dark-2); display: block; line-height: var(--line-height-100); } .form_links_reset-password a:hover { color: var(--color-primary); } /* ------------------------------ 12. Input Buttons ------------------------------ */ /* 12.1 Radio Button */ input[type="radio"] { display: none; } input[type="radio"] + label { cursor: pointer; margin-bottom: 0; text-transform: none; letter-spacing: normal; } input[type="radio"]:checked + label::before { background-color: var(--color-white); border: 5px solid var(--color-primary); padding: 1px; } input[type="radio"] + label::before { display: inline-block; content: ""; width: 17px; height: 17px; background-color: #e8eff3; border-radius: 40px; margin: -3px 10px 0 0; outline: none; vertical-align: middle; cursor: pointer; } /* 12.2 Checkbox */ .links_checkbox { display: none; } .links_checkbox + label { position: relative; padding-left: 28px; cursor: pointer; display: inline-block; color: var(--color-dark-4); line-height: var(--line-height-125); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .links_checkbox + label::before { content: ""; position: absolute; top: 0; left: 0; width: 18px; height: 18px; background-color: #e8eff3; border: 1px solid var(--color-gray); box-sizing: border-box; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .links_checkbox:checked + label::before { background-color: var(--color-primary); border-color: var(--color-primary); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .links_checkbox + label::after { content: ""; position: absolute; top: 2px; left: 6px; width: 6px; height: 10px; border: 2px solid; border-left: none; border-top: none; border-color: var(--color-white); -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); z-index: 1; opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .links_checkbox:checked + label::after { opacity: 1; -webkit-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } /* Login End */ /* Header Cart/Account End */ /* ------------------------------ 13. Site Section Default ------------------------------ */ #main { -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .page-main-wrapper { position: relative; overflow: hidden; } .overflow { position: relative; overflow: hidden; } .section, .section-content { position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .section-fullheight { display: -webkit-box; display: -ms-flexbox; display: flex; } .section-fullheight__inner { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; min-height: 100vh; } .section-bg-image { position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; z-index: 1; } .height-fixed { height: 700px; max-height: 100vh; } .section-bg-image.layout__regular, .section-bg-image.fullheight { min-height: 100vh; background-attachment: scroll; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .section-bg-image:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-dark-2); opacity: 0.9; z-index: -1; } .section-bg-image.overlay-none:before, .section-bg-image.fullheight.overlay-none:before { background: transparent; } .overlay_deither:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.25; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAgVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtFS1lAAAAK3RSTlMWi3QSa1uQOKBWCTwcb6V4gWInTWYOqQSGfa6XLyszmyABlFFJXySxQ0BGn2PQBgAAC4NJREFUWMMV1kWO5UAQRdFk5kwzs/33v8Cunr7ZUehKAdaRUAse99ozDjF5BqswrPKm7btzJ2tRziN3rMYXC236humIV5Our7nHWnVdFOBojW2XVnkeu1IZHNJH5OPHj9TjgVxBGBwAAmp60WoA1gBBvg3XMFhxUQ4KuLqx0CritYZPPXinsOqB7I76+OHaZlPzLEcftrqOlOwjeXvuEuH6t6emkaofgVUDIb4fEZB6CmRAeFCTq11lxbAgUyx4rXkqlH9I4bTUDRRVD1xjbqb9HyUBn7rhtr1x+x9Y0e3BdX31/loYvZaLxqnjbRuokz+pPG7WebnSNKE3yE6Tka4aDEDMVYr6Neq126c+ZR2nzzm3yyiC7PGWG/1uueqZudrVGYNdsgOMDvt1cI8CXu63QIcPvYNY8z870WwYazTS7DqpDEknZqS0AFXObWUxTaw0q5pnHlq4oQImakpLfJkmErdvAfhsc7lod0DVT4tuob25C0tQjzdiFObCz7U7eaKGP3s6yQVgQ/y+q+nY6K5dfV75iXzcNlGIP38aj22sVwtWWKMRb7B5HoHPaBvI1Ve5TSXATi66vV6utxsV+aZNFu+93VvlrG/oj8Wp67YT8l+Oq6PjwdGatFm7SEAP13kE0y9CEcf9qhtEWCMIq5AGq71moEAI9vrmFcmO8+7ZyDnmRN/VUaFkM2ce8KuBGFzDMmY6myLfQGra2ofgHhbJRXuRDZ4H+HmliWBHXQ0ysLGfv6FetbxtxzRgIZWjIsGVFl5imPXeyvVyayNek+dSWzjXd4t310YBdaF8sXeKs481PjsXbAtIru2+wHbv3GVh3sQY6Dnu6pF3pZ714VYdDi9A5GkXR/6xgaZN/tpQ8wVV3zeBuB+njoBNE4wjc+uA523ysXGd/P2sntmOb3OdHNWP5OVrxD3eJHdtH8QVkEIAqCor3hReR96yqt6PkTQfenllooQ447h6tOrnnuzwA8fMpq+jqg1oW8fTYYIncAYpVeTvkEFr/khQSbjoE8ykx9049OkE5MQEO9lC24tT7DwThQgf4Fhf8nGgAo3GYaON3crODpOr2pu5dBABz69t7F5yJBBo+r6QJdeLDWEoO7r1tceR3haA7gc7eZrCvpxSXXeKpo4P+hRixo9DeOFbqQVjKyWfBg9pnrEZKzK7R437YTTwhfoySG/YOCt3fs4aXlU3FjKortqQ6XyXaD0+Y/8VoqpyU9TRW45eN4oBxAH8Y/jLnNXfELJW+/p/MgO9Z+mBli2qqAP7dV/Arc2+YZRZwtBW8/p32y5ZsEuCS4O5AAgfR7Dde7zhiGfgvurQkfAXIrUG61rmxc2EZo18ph4vaWZI+QM0JdsbNlBJlPlwf9uguujQJy0j7TgTHdtRnjybTg55Hkk9S6l2rpYahumSewKHVosa1bh2Y6r9JGkdKvIDN/eeAwScrfjoLkCxWJuFZQ53FNP5w9XbQd1HhgHcVB/0fATG3sUUid1RTfc2+7pZVKldFSsaEK0v4k90tapQOk2HIbMhaJQtrUEL5+3sDanh8sOpbYRoQoqXWu6SQcUTQL9jzOrXNPWCJwXge4U7tlU1hkF012cAmvp8llQxf1IEMcw14pURxVOWATz4ITnYQjuF+vDXg5hgoiqXzO6mS91FQUBheURHIJxUeU1i3P0WOMpsm7vFYk0JJi/Ev+X3FwYD69cARPuP5GIc0PxoAFjcLRbNur0iMTrQmBBNYJ2ngU4x7SWfdTRl52Bqv7LmYW3C1CyTCPTHeWWIAM/Whm32COHsaj+2UQ739XB9t6NV0o9E9b7CW3XNiXzi9e0KiE+3rntukdIDBWrU2jsfQWuyFJRANxq8StHVv1JPy2C3Byco7qdNbASrnNXZ8G0L/Wp/pif4Ai9aEZ9Bb+TRx+REBdGlkF/s0dUdMSMr+6YCbuGxqPWdzcdqutvqkBzCksFcwAtjf55TeuH79M6AQa7r5PLeXxMFIlQKrXP9VJ275WGX+ptpf+tvTDBsecPnYQAlAWrVbRVJ7K2pRHwIjtSpbX96Y/lbKk6ZWXlBmh15r8yAWQsYxXgBOXYMAfHnUXF+rDqnB8bXDRtAn7bCziIqetSboK3NexMePvsCRLvmsoREA+kH8j4HWFpnNEaWgOmR7xyXHfTaz3slHc/YA6H6tl/L8d5tPcIwwD0tjvRaq3Y5BmYBSDClpv0VIX4s8D0XK3sPdpAb94HjPLkgboEz9EdZATW6ZdcmQvtKUwoWw+nAVKA7IcdY1UHnvNnIBplKci+knzewLz5/GGnzkGuuGky+0LTjtGBGR85EQICDqKChnm5pH3Z44nnWAk1YRdyu3g7QoFZ0h8jkr2ffjKmi+Qvsp+9GvNGZHmgW+YQAGUw7PPt8IPKbdy432vhKtRJjKWcSqq7helj81o3nfmaxVZ7Sqie8OOBk9WsyTD/ab7fQ5aWwQeJvnH6+ayo4IdIkOSBJjzXkgr+1TPhAx1AXDsxtCCj3TzQTLA1p782f7a8vdgPfwwrXmZxxbqo2h+6Zlo6mcMY4V7cFBOLm17VCvx9Qa2tAnkxEB+KYyQgbgAAnmNDOdOO6y2Cb+lke1MWQc9o+EMdQf7ubIG3Ek8GZ4k1PtGjbhwgOMPp5Em59JMVk/jU8/aF73Xcrd3UBNZyueQu0/xz2aGtZT8CRziOax2BWFXaeDzgZNV7oRtUzFoijoETf3xkAFFk3OMb7SgPh5wxU1+MygDIp9gZChH2qEcpgLh8pBIK90PXT1ZSU+ZExFK4Vm4GL/J7+K13lS5dQkW4HQwl6GX4yLqu8GhGWS2k75yel5IZIfFNdAL0NpKr2N5dQesBnxa42DLgJd6agS1jJsp1mO1dip7PU4P6diLLoTsZ4m3Q0QweiqeFfIGPLgF6v6mSVv6xe85VBD/1Mpe3AurRbcJ9SEo8NszNVy8rOCEexyIFcJRvYAlI/wk2I7r3p60FFLQXoH2q9xri/m41svRPbW0/EnPn2DWsmk0IiPpB60aa3+hiFfWuC8ZvWKEd9LxAk3HcOof6d77RewPaPsGw5lQAHcZN2vx1448u9pLfMLGQ3BSRRjBzRhKt7HcCw/7aqjtCDs5q76b4ZGphxN2th1WeXYlfnozX3ebKtX4Te11hf1tZP1diiGjIDAB1cR4Sb9rcFPC/nBARjlgDxd+tCBb1t91j71xJcgGjT3g/dUFnXXNiDrxkyoHANPk58ACPUa42hj8tgGrhiXOCmygxFZBiT2wyAJTDJ4wJEPmp6JIrDaSWYNqv4xH2wwdSTGYb3E0pXnS39nmLUsqoVZxzSoegqzd0o06wdbTXsaHGL+IF4JtIcXddTcD/dCd8hVf+fWPSV553kjMmMEULLS8HcgmptDO955dLGX78PjiDA6IsTHPm5IA6bc5ha0gaGkoEttXuxU11B2dOJ65/Q08tEF1+Y9cr2Nh/VECfQ33GyvR/gsdN1LuIeLpKMCAF2yRr769g9/4aJLZNRI71m2S91+Kp+Q0zubTcxoG2/6gm1Q79wkMj2XNO2ui7nWw8ULtu27CCvqTGX2PffD+xcwgh/TrOKvGZMM5jRFGDTn4NO/lwnDR/GY/waDZtkWDUPI0O8ztcFVqp6r2ZW+2bvkJ3raptYagFqu95VdIaml2CIp6CKets34x+fH2C+zH4cVFO7vj+6k2FU39PtRhWluYeZ3gDz1TLB9K2v7SD9gJU1qDxoRDrAWcrFGLyndhdtd0505+gEP79adK8fmFCWNYC+ahzVNcRH79E8dA1iqX/N0qq22xcOc20ALxLDspEj4QCFBQMgaIwoKbxr0Bd7Sbws6GiRK6tqoPfpiCle23axejRLyO1I+ahsEpWrzT5ZsCyS5RcY9jMfENFxSnhKsrfW8JHH6/rdQUMfmQPT3Uz9gY0C/pu1yuCnrPUvio0a1qMEosA/EwIzzid7cqsAAAAASUVORK5CYII=) repeat; } /* Overlay End */ /* ------------------------------ 14. MOU Styles ------------------------------ */ /* 14.1 Page Masthead */ .page-masthead.layout__regular, .page-masthead.layout__fullscreen { min-height: 100%; } .page-masthead__heading.gx-large { max-width: 85%; } /*Fullwidth Half-column*/ .page-masthead__heading.full-half { padding-left: var(--gutters-large); padding-right: var(--gutters-large); max-width: 748px; } .page-masthead__heading.align-center { text-align: center; } .page-masthead__heading.align-right { text-align: right; } .page-masthead__heading .entry-subtitle { font-weight: 300; text-transform: uppercase; color: var(--color-dark-3); letter-spacing: 1px; position: relative; padding-left: 8px; margin-top: 8px; } .page-masthead__heading.theme-dark .entry-subtitle { color: var(--color-gray); } .page-masthead__heading.align-center .entry-subtitle { padding-left: 0; } .page-masthead__heading.align-right .entry-subtitle { padding-right: 8px; } .page-masthead__heading .entry-subtitle:before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; height: 12px; width: 4px; border-radius: 2px; background-color: var(--color-primary); z-index: 1; } .page-masthead__heading.align-center .entry-subtitle:before { top: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 12px; } .page-masthead__heading.align-right .entry-subtitle:before { right: 0; left: auto; } .page-masthead__heading .entry-title { font-weight: 600; } .page-masthead__heading.theme-dark .entry-title { color: var(--color-white); } .page-masthead__heading .entry-title-desc p { color: var(--color-dark-3); } /* Page Masthead End */ /* 14.2 Mou Widget - Section Title */ .section-title h2, .section-title.theme-dark h2 { line-height: var(--line-height-100); position: relative; color: var(--color-white); font-weight: 600; z-index: 1; padding-left: 40px; margin-bottom: 15px; } .section-title h2 { color: var(--color-dark-2); } .section-title h2:before { content: ""; position: absolute; left: 0; top: -10px; height: 50px; width: 50px; background: var(--color-primary); border-radius: 50%; z-index: -1; } .section-title.color-bg-primary h2:before { background: var(--color-dark-2); } .section-title.color-bg-primary p, .section-title p { color: var(--color-dark-3); font-size: var(--font-size-medium); margin-left: 42px; } .section-title.color-bg-primary p { color: var(--color-white); } /* Mou Widget - Section Title End */ /* 14.3 Mou Widget - Content Block */ .section-content__heading.theme-dark h2, .section-content__heading.theme-dark h3 { color: var(--color-white); font-weight: normal; } .section-content__heading h2 b, .section-content__heading h3 b { color: var(--color-primary); font-weight: normal; } .mou_card-subtitle, .sub-heading { text-transform: uppercase; font-weight: 300; letter-spacing: 2px; color: var(--color-dark-3); } .text-highlight { color: var(--color-primary); } blockquote.mou-block-quote { background-color: var(--color-light-1); padding: 15px; border-left: 3px solid; border-color: var(--color-primary); margin: 30px 0; } blockquote.mou-block-quote cite { position: relative; display: block; margin-top: 10px; } blockquote.mou-block-quote cite:before { content: "—"; margin-right: 4px; } .theme-bullet li { margin-bottom: 8px; color: var(--color-dark-3); } .theme-bullet li i { width: 24px; height: 24px; line-height: 24px; font-size: var(--font-size-xsmall); border-radius: 50%; background: var(--color-primary); color: var(--color-white); text-align: center; margin-right: 8px; } .section-content__popup-video { position: relative; } .section-content__popup-video a.popup_video { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; height: 100px; line-height: 100px; text-align: center; color: var(--color-primary); background: var(--color-white); border-radius: 50%; -webkit-transition: all 0.3s; transition: all 0.3s; } .section-content__popup-video a.popup_video:before { content: ""; position: absolute; top: 50%; left: 50%; width: 105%; height: 105%; border: 2px solid var(--color-primary); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; padding: 54px; -webkit-transition: all 0.3s; transition: all 0.3s; } .section-content__popup-video a.popup_video:hover { color: var(--color-primary); background: var(--color-dark-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .section-content__popup-video a.popup_video:hover:before { border-color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .page-masthead__featured-image, .section-content__image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .section-content__image.fixed-height img { width: 100%; min-height: 600px; object-fit: cover; } /* 14.4 Video */ .section-content__video { position: relative; } .section-content__video:before { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: calc(100% - 16px); width: 8px; height: 50px; background-color: var(--color-dark-2); } .section-content__video.no-stand:before { display: none; } .section-content__video.theme-dark:before { background-color: var(--color-light-1); } .section-content__video:after { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: calc(100% + 26px); width: 70px; height: 12px; border-radius: 6px 6px 2px 2px; background-color: var(--color-dark-2); } .section-content__video.no-stand:after { display: none; } .section-content__video.theme-dark:after { background-color: var(--color-light-1); } .section-content__video video { border: 8px solid; border-color: var(--color-dark-2); border-radius: 25px; position: relative; } .section-content__video.no-frame video { border: none; border-radius: 0; } .section-content__video.theme-dark video { border-color: var(--color-light-1); } .section-content__popup-video.shape-before, .section-content__popup-video.shape-after { position: relative; } .section-content__popup-video.shape-before:before, .section-content__popup-video.shape-after:before { position: absolute; content: ""; top: 0; left: -100%; width: 100%; height: 400px; background: var(--color-primary); } .section-content__popup-video.shape-after:before { left: 100%; } .text-justify { text-align: justify; } /*Fullwidth Half-column*/ .mou__widget_content-text.full-half { padding-left: var(--gutters-large); padding-right: var(--gutters-large); max-width: 748px; } .mou__widget_content-text.full-half.left { padding-left: var(--gutters-large); padding-right: var(--gutters-large); max-width: 748px; margin-right: 0; margin-left: auto; } /* Video End */ /* Mou Widget - Content Block End */ /* Mou Widget - Cards */ .mou_card-media { margin: 0 30px; border: 4px solid var(--color-primary-alpha-50); position: relative; -webkit-transition: all .5s ease; transition: all .5s ease; overflow: hidden; z-index: 1; } .mou_cards_wrapper:hover .mou_card-media { border: 4px solid var(--color-primary-alpha-25); -webkit-transition: all .5s ease; transition: all .5s ease; } .mou_cards_wrapper .mou_card-media img { -webkit-transition: all .5s ease; transition: all .5s ease; } .mou_cards_wrapper:hover .mou_card-media img { filter: grayscale(.5); transform: scale(1.15) rotate(3deg); -webkit-transition: all .5s ease; transition: all .5s ease; } .mou_card-text { background-color: var(--color-light-1); padding: 30px; margin-top: -60px; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; } .mou_cards_wrapper:hover .mou_card-text { background-color: var(--color-dark-2); -webkit-transition: all .3s ease-in; transition: all .3s ease-in; } .mou_card-text .mou_card-title { font-size: 26px; margin-top: 50px; font-family: var(--font-primary); font-weight: 600; position: relative; padding-left: 16px; display: inline-block; -webkit-transition: all .3s ease; transition: all .3s ease; z-index: 1; } .mou_card-text .mou_card-title:before { content: ''; position: absolute; top: 8px; left: -8px; transform: rotate(45deg) scale(1); border-top: 8px solid var(--color-primary); border-right: 8px solid var(--color-primary); border-bottom: 8px solid transparent; border-left: 8px solid transparent; background-color: transparent; opacity: 1; -webkit-transition: all .3s ease; transition: all .3s ease; z-index: 2; } .mou_cards_wrapper:hover .mou_card-text .mou_card-title:before { opacity: 0; transform: rotate(45deg) scale(0); left: 0; -webkit-transition: all .3s ease; transition: all .3s ease; } .mou_cards_wrapper:hover .mou_card-text .mou_card-title { color: var(--color-white); padding-left: 0; -webkit-transition: all .3s ease; transition: all .3s ease; } .mou_card-text .mou_card-subtitle { -webkit-transition: all .3s ease; transition: all .3s ease; } .mou_cards_wrapper:hover .mou_card-text .mou_card-subtitle { color: var(--color-primary); letter-spacing: 1px; -webkit-transition: all .3s ease; transition: all .3s ease; } .mou_cards_wrapper:hover .mou_card-desc { color: var(--color-dark-4); -webkit-transition: all .3s ease; transition: all .3s ease; } .mou_cards_wrapper:hover .content-btn a { color: var(--color-white); } .mou_cards_wrapper:hover .content-btn a i { opacity: 1; visibility: visible; right: -28px; } .mou_cards_wrapper:hover .content-btn a:hover { color: var(--color-primary); } .mou_cards_wrapper:hover .content-btn a:hover i { color: var(--color-white); } .mou_cards_wrapper:hover .content-btn a:before { background: var(--color-dark-4); } /* Mou Widget - Cards End */ /* ------------------------------ 15. Hero Image Slider ------------------------------ */ .swiper-button-next, .swiper-button-prev { color: var(--color-dark-3); right: 50px; left: auto; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .swiper-button-prev { top: calc(50% - 100px); } .swiper-button-next { top: calc(50% + 100px); } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 50px; padding-right: 50px; text-align: right; font-size: var(--font-size-medium); } .swiper-pagination-current { color: var(--color-primary); font-size: var(--font-size-large); } .swiper-button-next::after, .swiper-rtl .swiper-button-prev::after { content: "next"; color: var(--color-primary); } .swiper-button-next::after, .swiper-button-prev::after { font-size: 36px; } .swiper-horizontal > .swiper-scrollbar { right: -12px; left: auto; top: 50%; width: 150px; height: 4px; -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); background: var(--color-dark-3); } .swiper-horizontal > .swiper-scrollbar { right: 27px; top: 50%; width: 70px; } .swiper-button-next::after, .swiper-button-prev::after { font-size: 24px; } .swiper-button-next { top: calc(50% + 50px); } .swiper-button-prev { top: calc(50% - 50px); } .swiper-button-next, .swiper-button-prev { right: 50px; } .swiper-scrollbar-drag { background: var(--color-white); } .hero-image-content__image.overflow { overflow: hidden; } .hero-image-content__image.style-1 { width: 90%; margin-left: auto; margin-right: 0; position: relative; z-index: 1; } .hero-image-content__image.style-1.clip-path { -webkit-clip-path: circle(50%); clip-path: circle(50%); } .hero-image-content__image.style-1:before { content: ""; position: absolute; right: 0; top: 0; background: transparent; border: 3px solid; border-color: var(--color-primary); width: 100%; height: 100%; opacity: 0; z-index: -1; -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__hero-slider .swiper-slide-active .hero-image-content__image.style-1:before { opacity: 1; right: -20px; top: -20px; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .hero-image-content__image.style-2 { position: relative; z-index: 1; } .hero-image-content__image.style-2:before { content: ""; position: absolute; width: 500px; height: 450px; border-radius: 50%; background-color: var(--color-primary); z-index: -1; opacity: 0; -webkit-transition: all 1s; transition: all 1s; -webkit-animation: shapeAnimate2 20s infinite; animation: shapeAnimate2 20s infinite; } .swiper__hero-slider .swiper-slide-active .hero-image-content__image.style-2:before { opacity: 1; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } @-webkit-keyframes shapeAnimate2 { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 0% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes shapeAnimate2 { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 0% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } /* 15.1 Scroll Button */ .scroll-btn { position: absolute; bottom: 50px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 50px; width: 30px; border: 1px solid var(--color-primary); border-radius: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 10; cursor: pointer; } .scroll-btn.align-left { left: auto; margin-left: 12px; } .scroll-btn.align-right { right: auto; } .scroll-btn i:before { color: var(--color-primary); font-size: var(--font-size-medium); margin: 0; } .scroll-btn-wrapper { height: 50px; position: relative; } .scroll-ball { position: absolute; background: var(--color-primary) none repeat scroll 0 0; border-radius: 2px; display: inline-block; height: 10px; width: 4px; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation: animate 3s ease 0s normal none infinite running; animation: animate 3s ease 0s normal none infinite running; } /* Scrolling animation */ @-webkit-keyframes animate { 0% { top: 10px; opacity: 1; } 50% { top: 30px; opacity: 1; } 100% { top: 10px; opacity: 1; } } @keyframes animate { 0% { top: 10px; opacity: 1; } 50% { top: 30px; opacity: 1; } 100% { top: 10px; opacity: 1; } } .hero-image-content__text { max-width: 100%; } .hero-image-content__text.style-1 { max-width: 95%; } .hero-image-content__text h2 { color: var(--color-white); position: relative; } .hero-image-content__text h2:after { content: ''; position: absolute; top: 0; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-primary); box-shadow: 0 0 0 0 var(--color-primary); -webkit-transform: scale(0); transform: scale(0); opacity: 0; animation: pulse 2s infinite; -webkit-transition: all 3s; transition: all 3s; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--color-primary-alpha-75); } 70% { transform: scale(1); box-shadow: 0 0 0 6px var(--color-primary-alpha-10); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--color-primary-alpha-10); } } .swiper__hero-slider .swiper-slide-active .hero-image-content__text h2:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 1s; transition-delay: 1s; } .hero-image-content__text h1, .hero-image-content__text h1 span { font-size: var(--font-size-super); color: var(--color-primary); line-height: var(--line-height-100); font-weight: 800; } .hero-image-content__text p { color: var(--color-white); font-size: var(--font-size-medium); line-height: var(--line-height-175); } .hero-image-content__text.style-2 h1 { color: var(--color-white); } .hero-image-content__text.style-3 h1 { color: var(--color-primary); } span.span-box { color: var(--color-primary); } .hero-image-content__text.style-3 h1 span.span-box { color: var(--color-white); font-weight: bold; } .hero-image-content__text.style-3 h4 { color: var(--color-white); font-size: 20px; line-height: var(--line-height-100); font-weight: 300; text-transform: uppercase; letter-spacing: 5px; background: var(--color-dark-3); display: inline-block; padding: 7px 7px 7px 14px; } /* Hero Image Slider End */ /* 15.2 Shape */ .shape-1 { position: absolute; left: 100px; top: -100px; z-index: 1; } .shape-2 { position: absolute; right: 100px; top: -100px; z-index: 1; } .shape-3 { position: absolute; right: 100px; z-index: 2; top: -100px; } /* Shape End */ /* 15.3 CTA Block */ .cta-content .cta-text h2 { color: var(--color-white); font-weight: 700; } .cta-content .cta-text h2 span { color: var(--color-primary); font-weight: bold; } .cta-content .cta-text h5 { color: var(--color-white); font-weight: 300; text-transform: uppercase; } /* CTA Block End */ /* ------------------------------ 16. Mou Widget - Service Box Style-1 ------------------------------ */ .mou__widget-service-box.style-1 { padding: 40px; margin-bottom: 24px; position: relative; overflow: hidden; } .mou__widget-service-box.style-1:before { content: ''; position: absolute; top: 0; left: -100%; transform: skewX(35deg); width: 50%; height: 100%; background-color: rgba(255, 255, 255, .15); -webkit-transition: all .7s ease; transition: all .7s ease; } .mou__widget-service-box.style-1:hover:before { left: calc(100% + 100px); opacity: .5; -webkit-transition: all .7s ease; transition: all .7s ease; } .mou__widget-service-box.style-1 .icon-md-1 { display: none; } .mou__widget-service-box.style-1 img { position: relative; top: 40px; -webkit-transition: cubic-bezier(.15, .26, .49, 1.41) 0.7s; transition: cubic-bezier(.15, .26, .49, 1.41) 0.7s; transition-delay: .2s; } .mou__widget-service-box.style-1:hover img { top: 0; -webkit-transition: cubic-bezier(.15, .26, .49, 1.41) 0.7s; transition: cubic-bezier(.15, .26, .49, 1.41) 0.7s; transition-delay: .2s; } .mou__widget-service-box.style-1 h3 { color: var(--color-white); font-family: var(--font-primary); line-height: var(--line-height-125); position: relative; top: 40px; font-weight: 500; margin: 20px 0; margin-bottom: 15px; -webkit-transition: cubic-bezier(.15, .26, .49, 1.41) 0.7s; transition: cubic-bezier(.15, .26, .49, 1.41) 0.7s; transition-delay: .1s; } .mou__widget-service-box.style-1:hover h3 { top: 0; -webkit-transition: cubic-bezier(.42, -0.01, .27, 1.15) 0.7s; transition: cubic-bezier(.42, -0.01, .27, 1.15) 0.7s; transition-delay: .1s; } .mou__widget-service-box.style-1 p { position: relative; line-height: var(--line-height-150); opacity: 0; bottom: -50px; -webkit-transform: scaleY(1.25); transform: scaleY(1.25); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .mou__widget-service-box.style-1:hover p { opacity: 1; bottom: 0; transform: none; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; transition-delay: .3s; } /* Mou Widget - Service Box Style-1 End */ /* ------------------------------ 17. Mou Widget - Counter-up ------------------------------ */ .mou__widget-counterup .counter { font-size: var(--font-size-xxl); font-family: var(--font-secondary); line-height: var(--line-height-100); color: var(--color-dark-2); font-weight: 600; } .mou__widget-counterup.theme-dark .counter { color: var(--color-white); } .mou__widget-counterup .counter-label { color: var(--color-primary); font-size: var(--font-size-small); font-family: var(--font-primary); line-height: var(--line-height-100); font-weight: 500; } .mou__widget-counterup.theme-dark .counter-label { color: var(--color-primary); font-family: var(--font-primary); } .mou__widget-counterup .counter-suffix { color: var(--color-dark-2); font-family: var(--font-secondary); font-size: var(--font-size-xlarge); font-weight: bold; } .mou__widget-counterup.theme-dark .counter-suffix { color: var(--color-white); font-weight: bold; } /* Mou Widget - Counter-up End */ /* ------------------------------ 18. Portfolio ------------------------------ */ .button-group button { border: none; color: var(--color-dark-3); background: transparent; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; margin: 0 15px; outline: none; position: relative; } .site-header-dark .button-group button { color: var(--color-dark-3); } .button-group button:before { position: absolute; content: ""; bottom: 0; left: 0; width: 0; height: 2px; background: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .button-group button:hover:before, .button-group button.active:before { width: 65%; -webkit-transition: all 0.5s; transition: all 0.5s; } .site-header-dark .button-group button:hover, .site-header-dark .button-group button.active { color: var(--color-white); } /* Portfolio End */ /* ------------------------------ 19. Team - Style-1 ------------------------------ */ .team__slider-style-1 { position: relative; } .mou__widget-team-box.style-1 .team-content__image { position: relative; overflow: hidden; } .mou__widget-team-box.style-1 .team-content__image:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translateY(100%); transform: translateY(100%); content: ""; background: rgba(245, 36, 95, 0.9); -webkit-transition: all 0.5s; transition: all 0.5s; } .mou__widget-team-box.style-1:hover .team-content__image:before { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.5s; transition: all 0.5s; } .team-hover { position: absolute; width: 100%; bottom: 65px; color: var(--color-white); -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; visibility: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; } .team-hover h3 { color: var(--color-white); line-height: var(--line-height-100); } .mou__widget-team-box.style-1:hover .team-hover { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.5s; transition: all 0.5s; } .team-content__social { padding: 20px; background: var(--color-dark-2); width: 60%; display: block; margin: 0 auto; position: relative; top: -38px; } .team-content__social ul li { display: inline-block; } .team-content__social ul li a { display: block; font-size: 20px; margin: 0 15px; color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .team-content__social ul li a:hover { color: var(--color-white); -webkit-transition: all 0.5s; transition: all 0.5s; } .team__slider-style-1 .owl-nav { display: block; margin-top: 24px; } .team__slider-style-1 .owl-nav button.owl-next i:before, .team__slider-style-1 .owl-nav button.owl-prev i:before { font-size: var(--font-size-large); margin: 0; } .team__slider-style-1 .owl-nav button.owl-next, .team__slider-style-1 .owl-nav button.owl-prev { background: var(--color-primary); color: var(--color-white); height: 50px; width: 50px; line-height: 48px; -webkit-transition: all 0.5s; transition: all 0.5s; } .team__slider-style-1 .owl-nav button.owl-prev { margin-right: 8px; } .team__slider-style-1 .owl-nav button.owl-next:hover, .team__slider-style-1 .owl-nav button.owl-prev:hover { background: var(--color-dark-2); color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .team__slider-style-1 .owl-nav button.owl-next:focus, .team__slider-style-1 .owl-nav button.owl-prev:focus { outline: none; } .team__slider-style-1 .owl-nav button.owl-next { right: 0; } /* Team - Style-1 End */ /* ------------------------------ 20. Testimonial - Style-1 ------------------------------ */ .testimonial__slider-style-3 .owl-item img { border: 4px solid; border-color: var(--color-primary); } .feedback-quote i:before { font-size: var(--font-size-super); color: var(--color-primary); margin: 0; } .feedback p { color: var(--color-white); } .client-name { color: var(--color-primary); } .client-name h4 { font-weight: normal; line-height: var(--line-height-100); color: var(--color-white); margin-bottom: 6px; font-family: var(--font-secondary); font-style: italic; } /* Testimonial - Style-1 End */ /* ------------------------------ 21. Product Category Slider ------------------------------ */ .mou_simple-slider { position: relative; } .mou_simple-slider .owl-nav { display: block; margin-top: 24px; } .mou_simple-slider .owl-nav button.owl-next i:before, .mou_simple-slider .owl-nav button.owl-prev i:before { font-size: var(--font-size-large); margin: 0; } .mou_simple-slider .owl-nav button.owl-next, .mou_simple-slider .owl-nav button.owl-prev { background: var(--color-primary); color: var(--color-white); height: 50px; width: 50px; line-height: 48px; -webkit-transition: all 0.5s; transition: all 0.5s; } .mou_simple-slider .owl-nav button.owl-prev { margin-right: 8px; } .mou_simple-slider .owl-nav button.owl-next:hover, .mou_simple-slider .owl-nav button.owl-prev:hover { background: var(--color-dark-2); color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .mou_simple-slider .owl-nav button.owl-next:focus, .mou_simple-slider .owl-nav button.owl-prev:focus { outline: none; } .mou_simple-slider .owl-nav button.owl-next { right: 0; } .owl-theme .owl-nav { margin-top: 0; } /* ------------------------------ 22. Blog Posts ------------------------------ */ /* 22.1 Post Format */ .format-quote, .format-audio, .format-video, .format-gallery { position: relative; z-index: 1; overflow: hidden; } .format-quote::after, .format-audio::after, .format-video::after, .format-gallery::after { font-family: "Font Awesome 5 Free", sans-serif; position: absolute; top: 0; right: 15px; content: "\f10d"; /* Quote */ /* content: "\f028"; Audio */ /* content: "\f03d"; Video */ /* content: "\f302"; Gallery */ font-size: 18px; width: 60px; height: 60px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; line-height: 60px; font-weight: 900; color: var(--color-white); text-align: center; background-color: var(--color-primary); z-index: 2; opacity: 0; visibility: hidden; -webkit-transform: translateY(-20px); transform: translateY(-20px); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .format-quote:hover::after, .format-audio:hover::after, .format-video:hover::after, .format-gallery:hover::after { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .blog-thumb, .blog-grid-thumb { position: relative; overflow: hidden; } .article-image-small { position: relative; overflow: hidden; } .blog-thumb:before, .blog-grid-thumb:before, .article-image-small:before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; background: rgba(28, 34, 46, 0.9); z-index: 1; -webkit-transition: all 0.5s; transition: all 0.5s; } .single-post:hover .blog-thumb:before, .single-grid-post:hover .blog-grid-thumb:before, .widget_recent_posts ul li:hover .article-image-small:before, .articles-wrapper-small ul li:hover .article-image-small:before { opacity: 1; visibility: visible; -webkit-transition: all 0.5s; transition: all 0.5s; } .post-meta-info { position: absolute; width: 100%; left: 0; bottom: 0; background: var(--color-dark-2); padding: 15px 25px; color: var(--color-primary); z-index: 2; -webkit-transition: all 0.5s; transition: all 0.5s; } .single-post:hover .post-meta-info, .single-grid-post:hover .post-meta-info, .widget_recent_posts ul li:hover .post-meta-info, .articles-wrapper-small ul li:hover .post-meta-info { background: transparent; padding-bottom: 15px; -webkit-transition: all 0.5s; transition: all 0.5s; } .post-meta-info a { display: inline-block; margin-right: 30px; color: var(--color-white); font-size: var(--font-size-small); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-meta-info a i { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-meta-info a:hover i { color: var(--color-white); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-meta-info a:hover { color: var(--color-white); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-content h3 a, .blog-grid-content h3 a { font-weight: 500; font-size: 28px; line-height: var(--line-height-125); display: block; -webkit-transition: all 0.5s; transition: all 0.5s; } .entry-title-small a { display: block; font-size: var(--font-size-medium); line-height: var(--line-height-150); font-weight: 500; -webkit-transition: all 0.5s; transition: all 0.5s; } .post-content h3:hover a, .blog-grid-content h4:hover a, .entry-title-small:hover a { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-content h3 a:focus, .blog-grid-content h4 a:focus, .entry-title-small a:focus, .post-content h3 a:active, .blog-grid-content h4 a:active, .entry-title-small a:active { color: var(--color-dark-2); -webkit-transition: all 0.5s; transition: all 0.5s; } .article-image-small { max-width: 150px; height: 150px; margin-right: 24px; } .post-meta-info-small a { font-size: var(--font-size-small); margin-right: 15px; } .post-meta-info-small a i { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-meta-info-small a:hover i { color: var(--color-dark-3); -webkit-transition: all 0.5s; transition: all 0.5s; } .blog-thumb img, .blog-grid-thumb img, .article-image-small img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s; transition: all 0.5s; } .single-post:hover .blog-thumb img, .single-grid-post:hover .blog-grid-thumb img, .widget_recent_posts ul li:hover .article-image-small img, .articles-wrapper-small ul li:hover .article-image-small img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.5s; transition: all 0.5s; } .widget_recent_posts .article-image-small { overflow: hidden; width: 80px; height: 80px; margin-right: 20px; float: left; } .widget_recent_posts .article-image-small img { width: 100%; height: auto; } .post-author a { text-transform: capitalize; letter-spacing: 1px; display: block; margin-bottom: 5px; } .post-author a i { color: var(--color-primary); font-size: var(--font-size-small); margin-right: 8px; -webkit-transition: all 0.5s; transition: all 0.5s; } .single-post:hover .post-author a i, .single-grid-post:hover .post-author a i, .widget_recent_posts ul li:hover .post-author a i, .articles-wrapper-small ul li:hover .post-author a i { color: var(--color-dark-2); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-author a:hover { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-author a:hover i { color: var(--color-dark-3); -webkit-transition: all 0.5s; transition: all 0.5s; } /* ------------------------------ 23. Clients Logo ------------------------------ */ .client-logo { border: 1px solid; border-color: var(--color-dark-3); margin-bottom: 24px; position: relative; overflow: hidden; -webkit-transition: 0.7s cubic-bezier(0.17, 0.85, 0.438, 0.99); transition: 0.7s cubic-bezier(0.17, 0.85, 0.438, 0.99); } .client-logo img { max-width: 160px; } .logo-hover { display: none; position: relative; margin-left: auto; margin-right: auto; -webkit-transition: 0.7s cubic-bezier(0.17, 0.85, 0.438, 0.99); transition: 0.7s cubic-bezier(0.17, 0.85, 0.438, 0.99); } .client-logo:hover .logo-hover { display: block; -webkit-transition: 0.7s cubic-bezier(0.17, 0.85, 0.438, 0.99); transition: 0.7s cubic-bezier(0.17, 0.85, 0.438, 0.99); } .client-logo:hover .logo-normal { display: none; -webkit-transition: 0.7s cubic-bezier(0.17, 0.85, 0.438, 0.99); transition: 0.7s cubic-bezier(0.17, 0.85, 0.438, 0.99); } .client-logo:hover { background-color: var(--color-primary); border-color: var(--color-primary); } /* ------------------------------ 24. Contact ------------------------------ */ .contact_form { background-color: var(--color-light-1); padding: 30px; } .contact_form.is-fullpageJS { background-color: inherit; padding: 0; } .mou__widget-info-box { position: relative; padding: 30px; background: var(--color-white); border-radius: 6px; border: 2px solid; border-color: var(--color-light-1); -webkit-transition: all 0.3s !important; transition: all 0.3s !important; } .mou__widget-info-box:hover { position: relative; background: var(--color-light-1); -webkit-transition: all 0.3s !important; transition: all 0.3s !important; } .mou__widget-info-box.is-fullpageJS { padding: 0; border: 0; background: none; } .info-box-icon i { font-size: var(--font-size-large); color: var(--color-primary); background: var(--color-white); border: 3px solid; border-color: var(--color-light-2); height: 60px; width: 60px; border-radius: 50%; line-height: 57px; margin-bottom: 10px; } .info-box-text { font-size: 20px; } .info-box-text p { font-size: var(--font-size-medium); color: var(--color-dark-3); line-height: var(--line-height-150); } .info-box-text a { display: block; font-size: var(--font-size-medium); line-height: var(--line-height-150); color: var(--color-dark-3); -webkit-transition: all 0.5s; transition: all 0.5s; } .info-box-text a:hover { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } /* ------------------------------ 25. Footer ------------------------------ */ .site-footer { position: relative; } .footer-top { background: var(--color-dark-1); position: relative; z-index: 1; } .footer-logo img { max-width: 120px; max-height: 24px; } .footer-social ul li { display: inline-block; margin-right: 20px; } .footer-social ul li { display: inline-block; } .footer-social ul li a { display: block; font-size: 20px; color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-social ul li a:hover { color: var(--color-white); -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-widget-1 p { color: var(--color-white); width: 95%; } .widget-title.size-small { font-weight: 500 !important; font-family: var(--font-primary); color: var(--color-dark-4); padding-bottom: 5px; margin-top: 0 !important; } .widget-title.shop-sidebar { font-weight: 600; color: var(--color-dark-4); padding-bottom: 5px; } .single-works { width: 90px; margin-right: 2px; margin-bottom: 2px; float: left; position: relative; overflow: hidden; } .single-works:before { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 0; background: rgba(245, 36, 95, 0.9); -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 1; } .single-works:hover:before { height: 100%; background: rgba(245, 36, 95, 0.9); -webkit-transition: all 0.5s; transition: all 0.5s; } .single-works img { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); -webkit-transition: all 0.5s; transition: all 0.5s; } .single-works:hover img { -webkit-transform: rotate(3deg) scale(1.15); transform: rotate(3deg) scale(1.15); -webkit-transition: all 0.5s; transition: all 0.5s; } .single-works-links i:before { margin: 0; font-size: var(--font-size-large); } .single-works-links a { position: absolute; margin-top: 50px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 20px; opacity: 0; visibility: hidden; color: var(--color-white); -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 2; } .single-works:hover .single-works-links a { opacity: 1; visibility: visible; margin-top: 0; -webkit-transition: all 0.5s; transition: all 0.5s; } /* ------------------------------ 26. Subscribe Form ------------------------------ */ .mou__widget-subscribe-form .subscribe-form { display: -webkit-box; display: -ms-flexbox; display: flex; } .mou__widget-subscribe-form.text-center .subscribe-form { display: block; } .mou__widget-subscribe-form .subscribe-heading { font-weight: 600; color: var(--color-dark-2); line-height: var(--line-height-100); } .mou__widget-subscribe-form.theme-dark .subscribe-heading { color: var(--color-white); } .mou__widget-subscribe-form p { font-size: var(--font-size-medium); } .mou__widget-subscribe-form .subscribe_input_box input { border: 2px solid; border-color: var(--color-dark-2); background: var(--color-white); height: 56px; width: 400px; padding: 15px; color: var(--color-dark-3); font-size: var(--font-size-medium); margin-bottom: 12px; margin-right: 8px; } .mou__widget-subscribe-form.text-center .subscribe_input_box input { margin-right: 0; } .mou__widget-subscribe-form.text-center .subscribe_input_box input { width: 500px; } .mou__widget-subscribe-form.theme-dark .subscribe_input_box input { border-color: var(--color-primary); color: var(--color-dark-3); } .mou__widget-subscribe-form.theme-dark .subscribe_input_box input:focus { border: 2px solid var(--color-dark-1); border-color: var(--color-primary-alpha-50) !important; -webkit-box-shadow: 0 0 0 4px var(--color-primary-alpha-25) !important; box-shadow: 0 0 0 4px var(--color-primary-alpha-25) !important; } .mou__widget-subscribe-form .subscribe_input_box input:focus { border: 2px solid var(--color-primary); } .mou__widget-subscribe-form .subscribe-btn button { padding: 0 40px; height: 56px; font-weight: 400; letter-spacing: 1px; color: var(--color-white); background: var(--color-dark-2); border: transparent; text-transform: uppercase; display: inline-block; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 1; } .mou__widget-subscribe-form.theme-dark .subscribe-btn button { background: var(--color-primary); color: var(--color-white); } .mou__widget-subscribe-form .subscribe-btn button:hover { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .mou__widget-subscribe-form.theme-dark .subscribe-btn button:hover { color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .mou__widget-subscribe-form .subscribe-btn button:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; z-index: -1; } .mou__widget-subscribe-form.theme-dark .subscribe-btn button:before { background: var(--color-dark-2); border: 1px solid; border-color: var(--color-primary); } .mou__widget-subscribe-form.theme-dark.text-center .subscribe-btn button:before { background: var(--color-dark-2); } .mou__widget-subscribe-form .subscribe-btn button:hover:before { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } p.confirm-text { font-size: var(--font-size-small); color: var(--color-dark-3); } .mou__widget-subscribe-form.text-center p.confirm-text { margin-top: 10px; } p.confirm-text span { color: var(--color-primary); } /* 26.1 Newsletter image */ .newsletter-image { position: relative; } .newsletter-image img { position: relative; z-index: 2; } .newsletter-image:before { content: ""; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 200px; height: 260px; border-radius: 50%; border: 1px dashed; border-color: var(--color-primary); z-index: 1; -webkit-animation: shapeAnimate3 50s infinite; animation: shapeAnimate3 50s infinite; } .newsletter-image:after { content: ""; position: absolute; top: 50%; right: -40px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 220px; height: 200px; border-radius: 50%; border: 1px dashed; border-color: var(--color-dark-3); z-index: 1; -webkit-animation: shapeAnimate3 50s infinite; animation: shapeAnimate3 50s infinite; } @-webkit-keyframes shapeAnimate3 { 0% { -webkit-transform: translateY(-50%) rotate(360deg); transform: translateY(-50%) rotate(360deg); } 100% { -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } 0% { -webkit-transform: translateY(-50%) rotate(-360deg); transform: translateY(-50%) rotate(-360deg); } } @keyframes shapeAnimate3 { 0% { -webkit-transform: translateY(-50%) rotate(360deg); transform: translateY(-50%) rotate(360deg); } 100% { -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } 0% { -webkit-transform: translateY(-50%) rotate(-360deg); transform: translateY(-50%) rotate(-360deg); } } /* Subscribe Form End */ /* 26.2 Footer Menu */ .footer-menu ul li { display: block; } .footer-menu ul li a { position: relative; color: var(--color-white); padding-bottom: 4px; -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-menu ul li a:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--color-white); } .footer-menu ul li a:hover { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-menu ul li a:hover:before { width: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; } /* 26.3 Footer Posts */ .footer-recent_post-items ul li { margin-bottom: 15px; -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-recent_post-items ul li:hover { opacity: 0.75; -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-recent_post-items ul li:last-child { margin-bottom: 0; } .footer-post-item .footer-post-thumb { max-width: 80px; float: left; margin-right: 15px; overflow: hidden; } .footer-post-item .footer-post-thumb img { width: 100%; height: auto; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-post-item:hover .footer-post-thumb img { -webkit-transform: scale(1.25) rotate(6deg); transform: scale(1.25) rotate(6deg); -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-post-item .footer-post-text h5 { color: var(--color-white); line-height: var(--line-height-150); -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-post-item:hover .footer-post-meta-info i { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-post-meta-info p { color: var(--color-dark-4); font-size: var(--font-size-xsmall); } .footer-post-meta-info p i { color: var(--color-dark-4); } /* 26.4 Footer Copyright */ .footer-bottom { padding: 25px 0; background: var(--color-dark-2); } .copyright-area p, .footer-author p { color: var(--color-white); font-size: 14px; } .copyright-area p span { color: var(--color-primary); } .footer-author i { color: var(--color-primary); } .footer-author a { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .footer-author a:hover { text-decoration: underline; -webkit-transition: all 0.5s; transition: all 0.5s; } /* ------------------------------ 27. Comment Box + Contact Form ------------------------------ */ .blog-comment-box { position: relative; width: 100%; } .blog-comment-box h3, .blog-comments h3 { font-weight: bold; color: var(--color-primary); } .comment_input_field input, .theme-dark .form_input_box input, .form_input_box input { width: 100%; border: 2px solid #e8eff3; background: var(--color-white); height: 56px; padding: 15px; color: var(--color-dark-3); margin-bottom: 15px; margin-top: 5px; box-sizing: border-box; } .theme-dark .form_input_box input { color: var(--color-white); border: 1px solid var(--color-dark-3); background: var(--color-dark-2); box-sizing: border-box; } .comment_input_field input:focus, .form_input_box input:focus, .comment_input_field textarea:focus, .form_input_box textarea:focus { border: 2px solid var(--color-dark-2); box-sizing: border-box; } .theme-dark .form_input_box input:focus, .theme-dark .form_input_box textarea:focus { border: 1px solid var(--color-primary); background: var(--color-dark-1); box-sizing: border-box; } p.form_input_box label, .form_input_box label { display: block; } .leave-form-name input, .leave-form-email input { width: calc(50% - 15px); float: left; border: 2px solid var(--color-primary); background: transparent; height: 50px; padding: 15px; color: var(--color-dark-3); margin-bottom: 12px; box-sizing: border-box; } .leave-form-name input { margin-right: 30px; } .theme-dark .text-leave textarea, .theme-dark .form_input_box textarea, .comment_input_field textarea, .text-leave textarea, .form_input_box textarea { width: 100%; height: 230px; border: 2px solid #e8eff3; background: var(--color-white); padding: 15px; color: var(--color-dark-3); margin-bottom: 15px; margin-top: 5px; box-sizing: border-box; } .theme-dark .text-leave textarea, .theme-dark .form_input_box textarea { border: 1px solid var(--color-dark-3); color: var(--color-white); background: var(--color-dark-2); box-sizing: border-box; } /* 27.1 Comments */ .comment-avatar { width: 100px; border: 2px solid var(--color-primary); margin-right: 30px; float: left; } .comment-text { float: right; width: calc(100% - 130px); font-size: var(--font-size-small); } .comment-text h6 { font-weight: bold; } .comment-text p { font-size: var(--font-size-small); line-height: var(--line-height-175); margin-bottom: 4px; } .comment-time span { font-size: var(--font-size-small); margin-right: 20px; } .comment-time i { color: var(--color-primary); } .comment-reply a { display: inline-block; color: var(--color-white); background: var(--color-primary); padding: 2px 10px; -webkit-transition: all 0.5s; transition: all 0.5s; } .comment-reply a:hover { background: var(--color-dark-2); -webkit-transition: all 0.5s; transition: all 0.5s; } .children { margin-left: 65px; } .related-post-header { font-weight: bold; color: var(--color-primary); } .related-post-content h5 { font-weight: bold; line-height: var(--line-height-125); } .single-related-post { padding-bottom: 2px; } .related-post-content h5:hover a { color: var(--color-primary); } /* ------------------------------ 28. Google Map ------------------------------ */ #map { width: 100%; min-height: 602px; } .gmnoprint, .gm-style-cc { opacity: 0; visibility: hidden; } button.gm-control-active.gm-fullscreen-control { display: none; } #map.map-full { width: 100%; height: 100%; } /* ------------------------------ 29. Back to Top ------------------------------ */ #back_to_top i:before { margin: 0; font-size: var(--font-size-medium); } #back_to_top { text-align: center; display: none; position: fixed; bottom: 30px; left: 30px; background: var(--color-primary); border: 0; color: var(--color-white); outline: none; padding: 4px 10px 2px; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-property: background-color, color; transition-property: background-color, color; z-index: 5; } #back_to_top:hover { background: var(--color-dark-2); color: var(--color-primary); } .btnEntrance { -webkit-animation: 500ms ease-in-out 0s normal none 1 running slideInUp; animation: 500ms ease-in-out 0s normal none 1 running slideInUp; -webkit-transition: 0.3s; transition: 0.3s; } /* ------------------------------ 30. Services - Creative ------------------------------ */ .mou__widget-service-box.style-2 { background-color: var(--color-white); padding: 40px; position: relative; -webkit-box-shadow: 0 2px 2px #e8eff3; box-shadow: 0 2px 2px #e8eff3; margin-bottom: 24px; -webkit-transition: all 0.3s; transition: all 0.3s; overflow: hidden; } .mou__widget-service-box.style-2.theme-dark { background-color: var(--color-dark-2); -webkit-box-shadow: none; box-shadow: none; } .mou__widget-service-box.style-2:hover { -webkit-box-shadow: none; box-shadow: none; } .service-featured-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .service-featured-image img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1.25); transform: translate(-50%, -50%) scale(1.25); opacity: 0; visibility: hidden; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .mou__widget-service-box.style-2:hover .service-featured-image img { opacity: 1; visibility: visible; -webkit-transition-delay: 1s; transition-delay: 1s; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .service-featured-image a { position: absolute; top: 50%; left: 50%; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translate(-50%, -50%) scale(0.5); transform: translate(-50%, -50%) scale(0.5); -webkit-transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1); } .service-featured-image a:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-dark-2); opacity: 0; z-index: -1; -webkit-transform: scale(10); transform: scale(10); -webkit-transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1); } .mou__widget-service-box.style-2:hover .service-featured-image a:before { opacity: 0.5; -webkit-transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1); } .mou__widget-service-box.style-2:hover .service-featured-image a { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; -webkit-transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1); } .service-featured-image i { text-align: center; font-size: var(--font-size-medium); color: var(--color-primary); background: var(--color-white); width: 100px; height: 100px; border-radius: 50%; line-height: 100px; -webkit-transition: all 0.3s; transition: all 0.3s; } .service-featured-image i:hover { color: var(--color-white); background: var(--color-dark-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .service-title { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); opacity: 1; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .mou__widget-service-box.style-2.theme-dark .service-title h3 { font-family: var(--font-primary); color: var(--color-white); } .mou__widget-service-box.style-2 p { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); opacity: 1; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .mou__widget-service-box.style-2:hover .service-title { -webkit-transform: translateX(-100%) scale(0.5); transform: translateX(-100%) scale(0.5); opacity: 0; -webkit-transition: 0.3s cubic-bezier(0.86, 0, 0.07, 1); transition: 0.3s cubic-bezier(0.86, 0, 0.07, 1); } .mou__widget-service-box.style-2:hover p { -webkit-transform: translateX(100%) scale(0.5); transform: translateX(100%) scale(0.5); opacity: 0; -webkit-transition: 0.3s cubic-bezier(0.86, 0, 0.07, 1); transition: 0.3s cubic-bezier(0.86, 0, 0.07, 1); } .service-title img { margin-right: 20px; max-width: 60px; } .mou__widget-service-box.style-2 p { color: var(--color-dark-3); } /* ------------------------------ 31. Fifty-fifty Section ------------------------------ */ .fifty-fifty { position: relative; z-index: 1; } .fifty-fifty:before { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: var(--color-dark-2); z-index: -1; } .fifty-fifty:after { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: var(--color-primary); z-index: -1; } /* ------------------------------ 32. Testimonials ------------------------------ */ .testimonial__slider, .testimonial__slider-style-2 { position: relative; } .testimonial-slide-wrapper p, .testimonial-slide-wrapper.theme-dark p, .testimonial__slide_wrapper-style-2 p { position: relative; background: var(--color-dark-2); border-radius: 16px; padding: 30px; padding-top: 15px; } .testimonial__slide_wrapper-style-2.theme-dark p { background: var(--color-primary); } .testimonial-slide-wrapper.theme-dark p { background: var(--color-primary); } .testimonial-slide-wrapper p:before, .testimonial-slide-wrapper.theme-dark p:before, .testimonial__slide_wrapper-style-2 p:before { position: absolute; left: 50px; bottom: -20px; display: block; width: 0; height: 0; border-width: 0 25px 20px; border-style: solid; border-color: transparent; border-left-color: var(--color-dark-2); content: " "; } .testimonial__slide_wrapper-style-2.theme-dark p:before, .testimonial-slide-wrapper.theme-dark p:before { border-left-color: var(--color-primary); } .testimonial-slide-wrapper i, .testimonial-slide-wrapper.theme-dark i, .testimonial__slide_wrapper-style-2 i { color: var(--color-primary); font-size: var(--font-size-xlarge); margin-right: 8px; opacity: 0.5; } .testimonial__slide_wrapper-style-2.theme-dark i, .testimonial-slide-wrapper.theme-dark i { color: var(--color-white); } .testimonial-slide-wrapper p, .testimonial__slide_wrapper-style-2 p { margin-bottom: 30px; } .client-photo { max-width: 100px; margin-right: 15px; } .testimonial__slider .owl-item img, .testimonial__slider-style-2 .owl-item img { border-radius: 50%; border: 4px solid; border-color: var(--color-primary-alpha-50); } .testimonial-slide-wrapper .client-title h5, .testimonial-slide-wrapper.theme-dark .client-title h5 { color: var(--color-white); font-size: var(--font-size-small); font-weight: 300; } .testimonial-slide-wrapper .client-title h5, .testimonial-slide-wrapper.theme-dark .client-title h5, .testimonial__slide_wrapper-style-2 .client-title h5, .testimonial__slide_wrapper-style-2.theme-dark .client-title h5 { color: var(--color-dark-3); } .testimonial-slide-wrapper.theme-dark .client-title h5, .testimonial__slide_wrapper-style-2.theme-dark .client-title h5 { color: var(--color-dark-4); } .testimonial-slide-wrapper .client-title h5 { color: var(--color-dark-3); } .testimonial-slide-wrapper.color-bg-primary .client-title h5, .testimonial__slide_wrapper-style-2.color-bg-primary .client-title h5, .testimonial__slide_wrapper-style-2.theme-dark .client-title h5 { color: var(--color-white); font-weight: normal; } .testimonial-slide-wrapper .client-title h3 { color: var(--color-dark-2); line-height: var(--line-height-150); font-weight: 600; font-size: 20px; } .testimonial-slide-wrapper.color-bg-primary .client-title h3, .testimonial-slide-wrapper.theme-dark .client-title h3 { color: var(--color-white); line-height: var(--line-height-150); } .testimonial__slide_wrapper-style-2 .client-title h3 { color: var(--color-dark-2); line-height: var(--line-height-150); } .testimonial__slide_wrapper-style-2.color-bg-primary .client-title h3, .testimonial__slide_wrapper-style-2.theme-dark .client-title h3 { color: var(--color-white); line-height: var(--line-height-150); font-size: 20px; } .testimonial__slider .owl-nav.disabled, .testimonial__slider-style-2 .owl-nav.disabled { display: block; position: absolute; top: -172px; right: 0; } .testimonial__slider .owl-nav, .testimonial__slider-style-2 .owl-nav { position: relative; text-align: right; } .testimonial__slider .owl-nav button.owl-next i:before, .testimonial__slider .owl-nav button.owl-prev i:before, .testimonial__slider-style-2 .owl-nav button.owl-next i:before, .testimonial__slider-style-2 .owl-nav button.owl-prev i:before { font-size: var(--font-size-large); margin: 0; } .testimonial__slider .owl-nav button.owl-next, .testimonial__slider .owl-nav button.owl-prev, .testimonial__slider-style-2 .owl-nav button.owl-next, .testimonial__slider-style-2 .owl-nav button.owl-prev { background: var(--color-primary); color: var(--color-white); height: 50px; width: 50px; line-height: 48px; right: 55px; -webkit-transition: all 0.5s; transition: all 0.5s; } .testimonial__slider .owl-nav button.owl-prev, .testimonial__slider-style-2 .owl-nav button.owl-prev { margin-right: 8px; } .testimonial__slider .owl-nav button.owl-next:hover, .testimonial__slider .owl-nav button.owl-prev:hover, .testimonial__slider-style-2 .owl-nav button.owl-next:hover, .testimonial__slider-style-2 .owl-nav button.owl-prev:hover { background: var(--color-dark-2); color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .testimonial__slider .owl-nav button.owl-next:focus, .testimonial__slider .owl-nav button.owl-prev:focus, .testimonial__slider-style-2 .owl-nav button.owl-next:focus, .testimonial__slider-style-2 .owl-nav button.owl-prev:focus { outline: none; } .testimonial__slider .owl-nav button.owl-next, .testimonial__slider-style-2 .owl-nav button.owl-next { right: 0; } /* ------------------------------ 33. Portfolio Grid ------------------------------ */ .portfolio-grid .grid-item, .portfolio-grid .grid-item-2, .portfolio-grid .grid-item-3, .portfolio-grid .grid-item-4, .portfolio-grid .grid-item-5 { position: relative; } .portfolio-grid .grid-item-4, .portfolio-grid .grid-item { padding: 1px; } .portfolio-grid .grid-item-2 { padding-bottom: 24px; } .portfolio-grid .grid-item-3 { margin-bottom: 30px; } .portfolio-grid .grid-item-5 { margin-bottom: 100px; } .gallery-box { position: relative; overflow: hidden; } .gallery-box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--color-dark-2); opacity: 0; visibility: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 1; } .gallery-box:hover:before { height: 50%; opacity: 0.9; visibility: visible; -webkit-transition: all 0.5s; transition: all 0.5s; } .gallery-box.no-overlay:hover:before { display: none; } .gallery-box::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: var(--color-dark-2); opacity: 0; visibility: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 1; } .gallery-box:hover:after { height: 50%; opacity: 0.9; visibility: visible; -webkit-transition: all 0.5s; transition: all 0.5s; } .gallery-box.no-overlay:hover:after { display: none; } .gallery-box a img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s; transition: all 0.5s; } .gallery-box:hover a img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.5s; transition: all 0.5s; } .gallery-box > a i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.5); transform: translate(-50%, -50%) scale(0.5); height: 100px; width: 100px; text-align: center; border-radius: 50%; background: var(--color-white); opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 2; } .gallery-box > a i:before { font-size: 30px; color: var(--color-primary); line-height: 100px; -webkit-transition: all 0.3s; transition: all 0.3s; margin-left: 30px; opacity: 0; } .gallery-box > a:hover i:before { color: var(--color-dark-2) !important; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .gallery-box:hover > a i:before { color: var(--color-primary); margin-left: 0; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; opacity: 1; } .gallery-box:hover > a i { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .image-hover-actions ul { position: absolute; bottom: 15px; left: 50%; background: var(--color-black); padding-left: 15px; padding-right: 15px; border-radius: 50px; opacity: 0; -webkit-transform: translateX(-50%) scale(0.5); transform: translateX(-50%) scale(0.5); -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 2; } .gallery-box:hover .image-hover-actions ul { opacity: 1; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .image-hover-actions ul li { opacity: 0; margin: 15px; -webkit-transform: translateX(-10px); transform: translateX(-10px); -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery-box:hover .image-hover-actions ul li:nth-child(1) { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; opacity: 1; } .gallery-box:hover .image-hover-actions ul li:nth-child(2) { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; opacity: 1; } .gallery-box:hover .image-hover-actions ul li:nth-child(3) { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; opacity: 1; } .gallery-box:hover .image-hover-actions ul li:nth-child(4) { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.6s; transition: all 0.6s; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; opacity: 1; } .image-hover-actions ul li a { display: block; color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .image-hover-actions ul li a:hover { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .fancybox-bg { background: var(--color-black); } .fancybox-is-open .fancybox-bg { opacity: 1; } .fancybox-thumbs > ul > li::before { border: 4px solid var(--color-primary); } /* Clear fix */ .isotope:after { content: ""; display: block; clear: both; } .gallery_box_style-3 { padding-left: 50px; } .gallery_box_style-3.order-changed { padding-right: 50px; padding-left: 0; text-align: right; } .gallery_box_style-3 h3 { font-size: var(--font-size-xlarge); font-weight: bold; color: var(--color-dark-4); } .gallery_box_style-3 h3 a { display: block; } .gallery_box_style-3.theme-dark h3 { color: var(--color-white); } .gallery_box_style-3 h3 a:hover { color: var(--color-dark-3); } .grid-item-5:hover .gallery_box_style-3.theme-dark h3 a { color: var(--color-dark-4); } .grid-item-5 .gallery_box_style-3.theme-dark h3 a:hover { color: var(--color-white); } .pointer-none { pointer-events: none; } .project-gallery { position: relative; overflow: hidden; } .project-gallery:before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--color-white); opacity: 0.9; transition: all 0.3s; } .project-gallery:hover:before { width: 100%; transition: all 0.3s; } .project-gallery a i { position: absolute; left: 50%; top: calc(50% - 25px); transform: translate(-50%, -50%); background: var(--color-primary); width: 100px; height: 100px; line-height: 80px; text-align: center; font-size: 24px; border-radius: 50%; color: var(--color-white); overflow: hidden; opacity: 0; transition: all 0.5s; } .project-gallery:hover a i { opacity: 1; width: 80px; height: 80px; top: 50%; transition: all 0.3s; } .project-gallery a i:before { position: relative; top: 50px; opacity: 0; transition: all 0.3s; } .project-gallery:hover a i:before { opacity: 1; top: 0; transition: all 0.3s; } .project-gallery a i:hover { width: 86px; height: 86px; line-height: 86px; color: var(--color-white); background: var(--color-dark-1); transition: all 0.3s; } /* ------------------------------ 34. Template Bullet Point ------------------------------ */ .theme-bullet li { margin-bottom: 8px; margin-left: 32px; color: var(--color-dark-3); } .theme-bullet li i { width: 24px; height: 24px; line-height: 24px; font-size: var(--font-size-xsmall); border-radius: 50%; background: var(--color-primary); color: var(--color-white); text-align: center; margin-left: -32px; margin-right: 8px; } .theme-bullet li i::before { margin-left: 2px; } /* ------------------------------ 35. Team Section ------------------------------ */ .mou__widget-team-box.style-2 { position: relative; overflow: hidden; } .mou__widget-team-box.style-2 .team-content__image { width: 100%; height: 100%; overflow: hidden; } .mou__widget-team-box.style-2 .team-content__image img { width: 100%; -webkit-transition: 0.5s; transition: 0.5s; } .mou__widget-team-box.style-2:hover .team-content__image img { opacity: 0.5; -webkit-transform: translateX(30%); transform: translateX(30%); } .team-content__image i { width: 30px; height: 30px; background: var(--color-white); border-radius: 50%; color: var(--color-primary); text-align: center; line-height: 30px; margin-left: 8px; } .mou__widget-team-box.style-2 .team-content__text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-primary); -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-animation: 0.5s ease-in-out 0s normal none 1 running slideOutRight; animation: 0.5s ease-in-out 0s normal none 1 running slideOutRight; } .mou__widget-team-box.style-2:hover .team-content__text { -webkit-transform: none; transform: none; width: 80%; -webkit-animation: 0.5s ease-in-out 0s normal none 1 running slideInLeft; animation: 0.5s ease-in-out 0s normal none 1 running slideInLeft; } .mou__widget-team-box.style-2 .team-content__text .team-info-center { padding: 20px; text-align: center; background: var(--color-white); position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; background: var(--color-dark-2); } .mou__widget-team-box.style-2 .team-content__text .team-info-center ul li { display: inline-block; margin: 5px; } .mou__widget-team-box.style-2 .team-content__text .team-info-center ul li a i { display: block; width: 36px; height: 36px; background: var(--color-white); color: var(--color-primary); line-height: 36px; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; } .mou__widget-team-box.style-2 .team-content__text .team-info-center ul li a:hover i { background: var(--color-primary); color: var(--color-white); -webkit-transition: all 0.5s; transition: all 0.5s; } .team-info-center h3 { margin-bottom: 5px; line-height: var(--line-height-100); } .team-social-info { margin-top: 10px; } .team-content__image { position: relative; } .team-content__image h4 { position: absolute; bottom: 0; left: 0; background: var(--color-dark-2); color: var(--color-primary); padding: 20px; border-top-right-radius: 20px; font-weight: normal; } .team-content__image h4 i { margin-right: 8px; } .mou__widget-team-box.style-2:hover .team-content__image h4 { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-animation: 0.5s ease-in-out 0s normal none 1 running slideOutDown; animation: 0.5s ease-in-out 0s normal none 1 running slideOutDown; } /* ------------------------------ 36. Blog ------------------------------ */ .mou__widget_post_card-style-1.theme-dark { background: var(--color-dark-2); overflow: hidden; position: relative; } .mou__widget_post_card-style-1 { background: var(--color-light-1); overflow: hidden; position: relative; } .mou__widget_post_card-style-1::before { position: absolute; content: ""; bottom: 0; left: 0; width: 0; height: 3px; background: var(--color-primary); -webkit-transition: all 0.7s; transition: all 0.7s; } .mou__widget_post_card-style-1:hover:before { width: 100%; -webkit-transition: all 0.7s; transition: all 0.7s; } .post-featured-image { position: relative; overflow: hidden; } .post-featured-image > img { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); -webkit-transition: all 0.5s; transition: all 0.5s; } .mou__widget_post_card-style-1:hover .post-featured-image > img { -webkit-transform: rotate(5deg) scale(1.25); transform: rotate(5deg) scale(1.25); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-author-image { width: 60px; border-radius: 50%; height: 60px; border: 3px solid #e8eff3; overflow: hidden; position: absolute; bottom: 25px; right: 25px; } .mou__widget_post_card-style-1 .post-date { position: absolute; top: 0; left: 0; background: var(--color-primary); text-align: center; padding: 15px; -webkit-transition: all 0.5s; transition: all 0.5s; } .mou__widget_post_card-style-1 .post-date a { color: var(--color-white); line-height: var(--line-height-100); font-weight: 700; font-size: 42px; display: block; } .mou__widget_post_card-style-1 .post-date a span { display: block; font-weight: 400; font-size: 20px; line-height: 20px; margin-top: 6px; text-transform: uppercase; } .mou__widget_post_card-style-1 .post-date:hover { background: var(--color-dark-2); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-content__text { padding: 30px; } .post-content__text h3 { color: var(--color-dark-2); line-height: var(--line-height-125); font-weight: 500; } .post-content__text h3 a:hover { color: var(--color-dark-2); } .mou__widget_post_card-style-1.theme-dark .post-content__text h3 { color: var(--color-white); } .mou__widget_post_card-style-1.theme-dark:hover .post-content__text h3 { color: var(--color-primary); } .mou__widget_post_card-style-1.theme-dark:hover .post-content__text h3 a:hover { color: var(--color-white); } .mou__widget_post_card-style-1:hover .post-content__text h3 { color: var(--color-primary); } .post-content__text p { margin-bottom: 15px; } /* ------------------------------ 37. Hero Banner ------------------------------ */ .section-fullheight__image { height: 100vh; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; } .hero-text h3 { color: var(--color-white); line-height: var(--line-height-100); font-size: 46px; } .hero-text h1 { margin-bottom: 30px; margin-top: 15px; color: var(--color-primary); line-height: var(--line-height-100); font-size: var(--font-size-xxl); } .hero-text h1 span { color: var(--color-white); font-weight: 700; } .hero-text h4 { color: var(--color-white); font-size: var(--font-size-large); line-height: var(--line-height-100); font-weight: 300; text-transform: uppercase; letter-spacing: 5px; background: var(--color-dark-3); display: inline-block; padding: 5px 5px 5px 10px; } #fp-nav ul li a span, .fp-slidesNav ul li a span { background: var(--color-primary); } #fp-nav ul li .fp-tooltip { top: -8px; } /* Hero Banner End */ .mini-portfolio .grid-item { padding: 1px; } /* ------------------------------ 38. Feature Box 1 ------------------------------ */ .mou__widget-features { background-color: var(--color-white); border: 1px solid; border-color: var(--color-light-2); padding: 30px; -webkit-transition: all 0.3s; transition: all 0.3s; } .mou__widget-features:hover { background-color: var(--color-primary); border-color: var(--color-primary); -webkit-transition: all 0.3s !important; transition: all 0.3s !important; } .mou__widget-features.theme-dark { background-color: var(--color-dark-1); border: 1px solid; border-color: var(--color-primary); padding: 30px; -webkit-transition: all 0.3s !important; transition: all 0.3s !important; } .mou__widget-features.theme-dark:hover { background-color: var(--color-primary); -webkit-transition: all 0.3s !important; transition: all 0.3s !important; } .feature-heading { margin-bottom: 10px; } .feature-heading h4 { color: var(--color-primary); font-family: var(--font-primary); font-size: 20px; -webkit-transition: all 0.3s; transition: all 0.3s; } .mou__widget-features:hover .feature-heading h4 { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .theme-dark .feature-heading h4 { color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .feature-heading img { max-height: 60px; margin-right: 15px; } .feature-text p { -webkit-transition: all 0.3s; transition: all 0.3s; } .mou__widget-features:hover .feature-text p { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } /* ------------------------------ 39. Feature Box Style-2 ------------------------------ */ .mou__widget-features-style-2 .feature-icon { margin-right: 25px; } .mou__widget-features-style-2 .feature-icon img { width: 120px; } .mou__widget-features-style-2 .feature-text h3 { color: var(--color-primary); font-family: var(--font-primary); font-weight: 500; line-height: var(--line-height-150); margin-bottom: 5px; } /* ------------------------------ 40. Hero Slider - Photography ------------------------------ */ .swiper__hero-slide-photography .photography__slide-content { background-size: cover; background-repeat: no-repeat; background-position: center center; padding: 50px; height: 100%; position: relative; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s; overflow: hidden; } .swiper__hero-slide-photography:hover .photography__slide-content { -webkit-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__hero-slider-photography .photography__slide-content:before { content: ""; position: absolute; bottom: 0; left: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1))); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); width: 100%; height: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: -1; } .swiper__hero-slider-photography .photography__slide-content:hover:before { height: 100%; opacity: 1; visibility: visible; -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__hero-slide-photography { position: relative; } .swiper__hero-slide-photography .hero-image-content__text.photography { background: var(--color-dark-2); border-right: 3px solid; border-color: var(--color-primary); padding: 30px; position: absolute; left: 0; bottom: 0; margin-bottom: 200px; -webkit-transform: translateX(-25%); transform: translateX(-25%); max-width: 65%; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__hero-slide-photography:hover .hero-image-content__text.photography { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; -webkit-transition: all 0.3s; transition: all 0.3s; } .hero-image-content__text.photography h3 { color: var(--color-primary); margin-bottom: 8px; -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__hero-slide-photography:hover .hero-image-content__text.photography h3 { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .hero-image-content__text.photography h3 a:hover { color: var(--color-primary); } /* Hero Slider - Photography End */ /* ------------------------------ 41. Shop Page ------------------------------ */ .product-inner .product-summary { margin-top: 15px; } .gallery_box-meta span.meta-cat, .product-summary span.meta-cat, .hero-image-content__text.photography span.posted_in { margin-bottom: 15px; display: block; } .product-meta-heading h5, .post-meta-heading h5 { margin-right: 8px; } .product-meta span.posted_in, .product-meta span.tagged_as, .post-meta-tags span.posted_in { display: block; } .gallery_box-meta span.meta-cat, .product-summary span.meta-cat { margin-bottom: 5px; } .gallery_box-meta .meta-cat a, .product-summary .meta-cat a, .product-meta .tagged_as a, .post-meta-tags .posted_in a, .hero-image-content__text.photography .posted_in a { padding: 3px 6px; font-size: 13px; text-transform: capitalize; margin-right: 5px; border-radius: 4px; letter-spacing: 0; white-space: nowrap; color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery_box-meta .meta-cat a:hover, .product-summary .meta-cat a:hover, .product-meta .tagged_as a:hover, .post-meta-tags .posted_in a:hover, .hero-image-content__text.photography .posted_in a:hover { background-color: var(--color-dark-3) !important; -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery_box-meta .meta-cat a:nth-child(1), .product-summary .meta-cat a:nth-child(1), .product-meta .tagged_as a:nth-child(1), .post-meta-tags .posted_in a:nth-child(5n + 1), .hero-image-content__text.photography .posted_in a:nth-child(1) { background-color: var(--color-green); -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery_box-meta .meta-cat a:nth-child(2), .product-summary .meta-cat a:nth-child(2), .product-meta .tagged_as a:nth-child(2), .post-meta-tags .posted_in a:nth-child(5n + 2), .hero-image-content__text.photography .posted_in a:nth-child(2) { background-color: #a29bfe; -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery_box-meta .meta-cat a:nth-child(3), .product-summary .meta-cat a:nth-child(3), .product-meta .tagged_as a:nth-child(3), .post-meta-tags .posted_in a:nth-child(5n + 3), .hero-image-content__text.photography .posted_in a:nth-child(3) { background-color: #fd79a8; -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery_box-meta .meta-cat a:nth-child(4), .product-summary .meta-cat a:nth-child(4), .product-meta .tagged_as a:nth-child(4), .post-meta-tags .posted_in a:nth-child(5n + 4), .hero-image-content__text.photography .posted_in a:nth-child(4) { background-color: #74b9ff; -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery_box-meta .meta-cat a:nth-child(5), .product-summary .meta-cat a:nth-child(5), .product-meta .tagged_as a:nth-child(5), .post-meta-tags .posted_in a:nth-child(5n + 5), .hero-image-content__text.photography .posted_in a:nth-child(5) { background-color: #ff4e9b; -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery_box-meta .meta-cat a:nth-child(6), .product-summary .meta-cat a:nth-child(6), .product-meta .tagged_as a:nth-child(6), .post-meta-tags .posted_in a:nth-child(6n + 6), .hero-image-content__text.photography .posted_in a:nth-child(6) { background-color: #fe696a; -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery_box-meta .meta-cat a:nth-child(7), .product-summary .meta-cat a:nth-child(7), .product-meta .tagged_as a:nth-child(7), .post-meta-tags .posted_in a:nth-child(7n + 7), .hero-image-content__text.photography .posted_in a:nth-child(7) { background-color: #8848c7; -webkit-transition: all 0.3s; transition: all 0.3s; } /* ------------------------------ 42. Swiper Slider ------------------------------ */ .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--color-primary); } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal { height: 8px; bottom: 0; top: auto; } .swiper__widget-slide .swiper-button-next, .swiper__widget-slide .swiper-button-prev, .swiper__hero-slider-photography .swiper-button-next, .swiper__hero-slider-photography .swiper-button-prev { top: calc(50% + 50px); width: 70px; height: 70px; background: rgba(255, 255, 255, 0.25); border-radius: 50%; -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__widget-slide .swiper-button-next, .swiper__widget-slide .swiper-button-prev { width: 50px; height: 50px; -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0; visibility: hidden; } .swiper__widget-slide:hover .swiper-button-next, .swiper__widget-slide:hover .swiper-button-prev { -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 1; visibility: visible; } .swiper__widget-slide .swiper-button-next:hover, .swiper__widget-slide .swiper-button-prev:hover, .swiper__hero-slider-photography .swiper-button-next:hover, .swiper__hero-slider-photography .swiper-button-prev:hover { background: rgba(255, 255, 255, 1); -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__hero-slider-photography .swiper-button-prev { top: calc(50% - 50px); } .swiper__widget-slide .swiper-button-prev { top: 35px; right: 25px; -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__widget-slide .swiper-button-next { top: 125px; right: 25px; -webkit-transition: all 0.6s; transition: all 0.6s; } .swiper__widget-slide:hover .swiper-button-prev { top: 50px; -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__widget-slide:hover .swiper-button-next { top: 110px; -webkit-transition: all 0.6s; transition: all 0.6s; } .swiper__widget-slide .swiper-pagination-current, .swiper__widget-slide .swiper-pagination-total, .swiper__widget-slide .swiper-pagination-fraction { color: var(--color-white); font-size: var(--font-size-medium); bottom: 15px; } .swiper__widget-slide .swiper-pagination-fraction { padding-right: 25px; } .swiper__widget-slide .swiper-button-next::after, .swiper__widget-slide .swiper-rtl .swiper-button-prev::after, .swiper__hero-slider-photography .swiper-button-next::after, .swiper__hero-slider-photography .swiper-rtl .swiper-button-prev::after { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__widget-slide .swiper-button-next::after, .swiper__widget-slide .swiper-button-prev::after { font-size: var(--font-size-large); -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__widget-slide .swiper-button-next:hover:after, .swiper__widget-slide .swiper-rtl .swiper-button-prev:hover:after, .swiper__hero-slider-photography .swiper-button-next:hover:after, .swiper__hero-slider-photography .swiper-rtl .swiper-button-prev:hover:after { color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__widget-slide .swiper-button-prev::after, .swiper__widget-slide .swiper-rtl .swiper-button-next::after, .swiper__hero-slider-photography .swiper-button-prev::after, .swiper__hero-slider-photography .swiper-rtl .swiper-button-next::after { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__widget-slide .swiper-button-prev:hover:after, .swiper__widget-slide .swiper-rtl .swiper-button-next:hover:after, .swiper__hero-slider-photography .swiper-button-prev:hover:after, .swiper__hero-slider-photography .swiper-rtl .swiper-button-next:hover:after { color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__slide-fullscreen, .swiper__hero-slide-shop { position: relative; } .swiper__slide-fullscreen:before, .swiper__hero-slide-shop:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 4px; background: var(--color-primary); z-index: 1; } .swiper__slider-fullscreen .swiper-slide-active.swiper__slide-fullscreen:before, .swiper__hero-slider-shop .swiper-slide-active.swiper__hero-slide-shop:before { width: 100%; -webkit-transition: all 5s; transition: all 5s; -webkit-transition-delay: 1s; transition-delay: 1s; } .swiper__slide-fullscreen, .swiper__hero-slide-shop { overflow: hidden; } .swiper__slide-fullscreen .section-fullheight__image, .swiper__hero-slide-shop .section-fullheight__image { opacity: 0.5; position: relative; -webkit-filter: grayscale(1); filter: grayscale(1); -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .swiper__slider-fullscreen .swiper-slide-active .section-fullheight__image, .swiper__hero-slider-shop .swiper-slide-active .section-fullheight__image { -webkit-filter: grayscale(0); filter: grayscale(0); -webkit-animation: kenburns 12s infinite; animation: kenburns 12s infinite; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } @-webkit-keyframes kenburns { 0% { opacity: 0.5; -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(1.025); transform: scale(1.025); opacity: 1; } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 75% { -webkit-transform: scale(1.075); transform: scale(1.075); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(1.075); transform: scale(1.075); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 25% { -webkit-transform: scale(1.025); transform: scale(1.025); opacity: 1; } 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; } } @keyframes kenburns { 0% { opacity: 0.5; -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(1.025); transform: scale(1.025); opacity: 1; } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 75% { -webkit-transform: scale(1.075); transform: scale(1.075); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(1.075); transform: scale(1.075); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 25% { -webkit-transform: scale(1.025); transform: scale(1.025); opacity: 1; } 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; } } .hero-image-content__text.slide, .hero-image-content__text.shop { background-color: var(--color-light-1); position: absolute; max-width: 35%; margin-left: -120px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 40px; } .hero-image-content__text.slide:before, .hero-image-content__text.shop:before { content: ""; position: absolute; bottom: 0; right: 0; height: 100%; width: 100%; background-color: var(--color-primary); z-index: 1; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .swiper__slider-fullscreen .swiper-slide-active .hero-image-content__text.slide:before, .swiper__hero-slider-shop .swiper-slide-active .hero-image-content__text.shop:before { height: 0; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } .hero-image-content__text.slide h4, .hero-image-content__text.shop h4 { -webkit-filter: grayscale(1); filter: grayscale(1); letter-spacing: 5px; font-size: var(--font-size-small); color: var(--color-white); line-height: var(--line-height-100); font-weight: 300; background-color: var(--color-dark-3); text-transform: uppercase; display: inline-block; margin-bottom: 5px; padding: 5px 5px 5px 10px; top: -5px; position: relative; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .swiper__slider-fullscreen .swiper-slide-active .hero-image-content__text.slide h4, .swiper__hero-slider-shop .swiper-slide-active .hero-image-content__text.shop h4 { -webkit-filter: grayscale(0); filter: grayscale(0); top: 0; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); -webkit-transition-delay: 1s; transition-delay: 1s; } .hero-image-content__text.slide h2, .hero-image-content__text.shop h2 { -webkit-filter: grayscale(1); filter: grayscale(1); font-weight: normal; font-size: var(--font-size-xlarge); color: var(--color-dark-2); margin-bottom: 10px; position: relative; top: -10px; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .hero-image-content__text.shop h2 { font-style: normal; font-weight: 600; } .swiper__slider-fullscreen .swiper-slide-active .hero-image-content__text.slide h2, .swiper__hero-slider-shop .swiper-slide-active .hero-image-content__text.shop h2 { -webkit-filter: grayscale(0); filter: grayscale(0); top: 0; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .hero-image-content__text.slide p, .hero-image-content__text.shop p { -webkit-filter: grayscale(1); filter: grayscale(1); position: relative; top: -10px; font-size: var(--font-size-medium); color: var(--color-dark-3); font-weight: 500; letter-spacing: 0; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .swiper__slider-fullscreen .swiper-slide-active .hero-image-content__text.slide p, .swiper__hero-slider-shop .swiper-slide-active .hero-image-content__text.shop p { -webkit-filter: grayscale(0); filter: grayscale(0); top: 0; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .hero-image-content__text.slide .theme-btn, .hero-image-content__text.shop .theme-btn { -webkit-filter: grayscale(1); filter: grayscale(1); top: -10px; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .swiper__slider-fullscreen .swiper-slide-active .hero-image-content__text.slide .theme-btn, .swiper__hero-slider-shop .swiper-slide-active .hero-image-content__text.shop .theme-btn { -webkit-filter: grayscale(0); filter: grayscale(0); top: 0; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); -webkit-transition-delay: 1.3s; transition-delay: 1.3s; } .hero-image-content__text.slide p span, .hero-image-content__text.shop p span { color: var(--color-primary); font-weight: 700; } /* Swiper Slider End */ /* 42.1 Product category */ .product-cat-wrapper { position: relative; overflow: hidden; } .product-cat-wrapper:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); z-index: 1; } .product-cat-wrapper .product-cat-text { position: absolute; bottom: 0; left: 0; padding: 30px; z-index: 2; } .product-cat-title h3 { color: var(--color-white); font-family: var(--font-primary); margin-bottom: 8px; } .product-cat-wrapper:hover .product-cat-title h3 { color: var(--color-primary); } .product-cat-title h3 a:hover { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .product-cat-counter { color: var(--color-white); font-size: var(--font-size-small); background-color: var(--color-primary); width: 30px; height: 30px; display: inline-block; text-align: center; line-height: 30px; border-radius: 50%; margin-left: 6px; -webkit-transition: all 0.3s; transition: all 0.3s; } .product-cat-wrapper:hover .product-cat-counter { color: var(--color-primary); background-color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .product-cat-thumbnail img { position: relative; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transition: all 0.5s; transition: all 0.5s; } .product-cat-wrapper:hover .product-cat-thumbnail img { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); -webkit-transition: all 0.5s; transition: all 0.5s; } .product-inner .product-thumbnail_hover .attachment-woocommerce_thumbnail { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s; transition: all 0.5s; } .product-inner .product-thumbnail_hover:hover .attachment-woocommerce_thumbnail { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.5s; transition: all 0.5s; } .product-inner .product-thumbnail_hover .attachment-woocommerce_thumbnail.hover-image { position: absolute; top: 0; left: 0; opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.5s; transition: all 0.5s; } .product-inner .product-thumbnail_hover:hover .attachment-woocommerce_thumbnail.hover-image { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s; transition: all 0.5s; } /* ------------------------------ 43. WooCommerce ------------------------------ */ .woocommerce-badges .new, .woocommerce-badges .featured, .woocommerce-badges .onsale { display: block; background-color: var(--color-green); color: var(--color-white); width: 50px; height: 50px; border-radius: 50%; position: absolute; top: 12px; left: 12px; text-align: center; line-height: 50px; z-index: 1; } .woocommerce-badges .new { background-color: var(--color-dark-3); } .woocommerce-badges .featured { background-color: var(--color-primary); } .product-thumbnail { position: relative; } .product-actions__buttons { position: absolute; right: 12px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s; transition: all 0.3s; } .product-actions__buttons a { height: 40px; width: 40px; line-height: 40px; border-radius: 50%; -webkit-transform: translateY(-8px); transform: translateY(-8px); background: var(--color-white); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); display: block; margin-bottom: 12px; text-align: center; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .product-thumbnail_hover:hover .product-actions__buttons a:nth-child(1), .product-thumbnail_hover:hover .product-actions__buttons a:nth-child(2), .product-thumbnail_hover:hover .product-actions__buttons a:nth-child(3), .product-thumbnail_hover:hover .product-actions__buttons a:nth-child(4) { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .product-actions__buttons a:hover { background: var(--color-primary); color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .product-thumbnail_hover { position: relative; overflow: hidden; } .add_to_cart_button { position: absolute; left: 0; bottom: 24px; background-color: var(--color-dark-2); color: var(--color-white); padding: 8px 16px; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; white-space: nowrap; -webkit-transition: all 0.3s; transition: all 0.3s; } .add_to_cart_button i { margin-right: 8px; } .product-thumbnail_hover:hover .add_to_cart_button { -webkit-transform: none; transform: none; opacity: 1; -webkit-transition: all 0.3s; transition: all 0.3s; } .product-thumbnail_hover .add_to_cart_button:hover { color: var(--color-white); background-color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .product-thumbnail_hover .add_to_cart_button i { color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .product-thumbnail_hover .add_to_cart_button:hover i { color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .woocommerce-loop-product__title { font-size: var(--font-size-medium); -webkit-transition: all 0.3s; transition: all 0.3s; } .woocommerce-loop-product__title a:hover { color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .product-section-wrapper .product-item { margin-bottom: 50px; } .star-rating { line-height: var(--line-height-100); } .star-rating::before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f005 \f005 \f005 \f005 \f5c0"; letter-spacing: 0.25em; font-size: 12px; font-weight: 900; color: var(--color-primary); } .woocs_price_code del { margin-right: 8px; color: #a6a6a6; } .woocs_price_code ins { color: var(--color-primary); } .shop-filter-btn { margin-bottom: var(--gutters-xsmall); } .shop-filter-btn button { background: none; outline: none; border: none; font-size: 18px; -webkit-transition: all 0.3s; transition: all 0.3s; } .shop-filter-btn button#show_filter:hover { letter-spacing: 1px; -webkit-transition: all 0.3s; transition: all 0.3s; } .shop-filter-btn button#hide_filter { color: var(--color-gray); font-size: 16px; } .shop-filter-btn button#hide_filter i { color: var(--color-dark-3); -webkit-transition: all 0.3s; transition: all 0.3s; } .shop-filter-btn button#hide_filter:hover i { color: var(--color-dark-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .shop-filter-btn button i { font-size: 15px; color: var(--color-primary); margin-right: 8px; } /* ------------------------------ 44. Image Icon Box ------------------------------ */ .mou__widget-image-icon-box { background: var(--color-light-1); padding: 30px; border-radius: 6px; cursor: pointer; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .mou__widget-image-icon-box:hover { background: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .icon-box-icon img { max-width: 50px; height: auto; -webkit-transform: rotate(0); transform: rotate(0); margin-right: 20px; -webkit-filter: grayscale(1); filter: grayscale(1); width: 50px; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .icon-box-icon i { font-size: 40px; margin-right: 20px; color: var(--color-dark-2); -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .mou__widget-image-icon-box:hover .icon-box-icon img { -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-animation: scaleAnimate 1s; animation: scaleAnimate 1s; -webkit-filter: grayscale(0); filter: grayscale(0); -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .mou__widget-image-icon-box:hover .icon-box-icon i { -webkit-animation: scaleAnimate 1s; animation: scaleAnimate 1s; color: var(--color-primary); -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } @-webkit-keyframes scaleAnimate { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes scaleAnimate { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .icon-box-text h4 { margin-bottom: 5px; color: var(--color-primary); } .icon-box-text p { color: var(--color-dark-3); line-height: var(--line-height-150); } /* Image Icon Box End */ /* ------------------------------ 45. Promo ------------------------------ */ .promo-content h1 { margin-bottom: 10px; font-family: var(--font-primary); color: var(--color-primary); font-weight: bold; } .promo-content h4 { text-transform: uppercase; } .single-countdown { background-color: var(--color-white); display: inline-block; width: 120px; padding: 20px 0; text-align: center; margin-right: 15px; border: 1px dashed; border-color: var(--color-dark-3); border-radius: 6px; } .single-countdown h2 { color: var(--color-dark-2); -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } .single-countdown.count-seconds h2 { color: var(--color-primary); -webkit-animation: secondsAnimate 1s; animation: secondsAnimate 1s; -webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1); transition: 1s cubic-bezier(0.86, 0, 0.07, 1); } @-webkit-keyframes secondsAnimate { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes secondsAnimate { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .promo-image img { max-width: 70%; } /* WooCommerce End */ /* ------------------------------ 44. Pages ------------------------------ */ .breadcrumb-item i { margin-right: 6px; } .page-banner-image img { max-height: 200px; } .page-title-content h2 { color: var(--color-white); font-weight: 900; text-transform: uppercase; margin-bottom: 10px; } /* 44.1 Blockquote */ blockquote.mou-block-quote { background-color: var(--color-light-1); padding: 15px; border-left: 3px solid; border-color: var(--color-primary); margin: 30px 0; } blockquote.mou-block-quote cite { position: relative; display: block; margin-top: 10px; } blockquote.mou-block-quote cite:before { content: "—"; margin-right: 4px; } /* 44.2 Accordions */ .mou__widget-accordion .accordion .accordion-item { display: block; margin-bottom: 30px; border: none; } .mou__widget-accordion .accordion .accordion-item:last-child { margin-bottom: 0; } .mou__widget-accordion .accordion .accordion-title { padding: 15px 50px 15px 25px; position: relative; display: block; font-size: var(--font-size-medium); cursor: pointer; color: var(--color-white); background: var(--color-dark-2); border: 1px solid; border-color: var(--color-dark-2); } .mou__widget-accordion.theme-dark .accordion .accordion-title { color: var(--color-white); background: var(--color-primary); border: none; border-color: var(--color-primary); } .mou__widget-accordion .accordion .accordion-title i { position: absolute; right: 25px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: var(--color-primary); font-size: var(--font-size-medium); -webkit-transition: 0.6s; transition: 0.6s; } .mou__widget-accordion.theme-dark .accordion .accordion-title i { color: var(--color-white); } .mou__widget-accordion .accordion .accordion-title.active i::before { font-family: "Font Awesome 5 Free", sans-serif; font-weight: 900; content: "\f077"; color: var(--color-dark-3); } .mou__widget-accordion.theme-dark .accordion .accordion-title.active i::before { color: var(--color-white); } .mou__widget-accordion .accordion .accordion-content { display: none; background-color: var(--color-light-1); border: 1px solid; border-color: var(--color-dark-3); border-top: none; padding: 25px; } .mou__widget-accordion.theme-dark .accordion .accordion-content { background-color: var(--color-white); border: none; } .mou__widget-accordion.theme-dark .accordion .accordion-content:last-child { padding: 25px; } .mou__widget-accordion .accordion .accordion-content.show { display: block; } .page-title-content h2 { text-align: center; font-weight: normal; text-transform: capitalize; } /* 44.3 Breadcrumb */ .breadcrumb { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 0; } .breadcrumb-item a { color: var(--color-dark-2); } .breadcrumb-item a i { color: var(--color-dark-3); transition: all 0.3s; -webkit-transition: all 0.3s; } .breadcrumb-item a:hover, .breadcrumb-item a:hover i { color: var(--color-primary); transition: all 0.3s; -webkit-transition: all 0.3s; } /* 44.4 Pricing */ .pricing-table { background-color: var(--color-white); padding-bottom: 48px; } .recommended-price .pricing-header { background-color: var(--color-primary); } .pro-price .pricing-header { background-color: var(--color-green); } .pricing-header { background-color: var(--color-dark-2); padding: 30px; } .pricing-header h3 { color: var(--color-primary); font-family: var(--font-primary); } .recommended-price .pricing-header h3, .pro-price .pricing-header h3 { color: var(--color-white); } .pricing-header h2 { color: var(--color-white); font-family: var(--font-primary); font-weight: 600; } .pricing-features { padding: 30px 40px; } .pricing-features li { margin: 8px 0; font-size: var(--font-size-medium); color: var(--color-dark-2); margin-left: 38px; } .pricing-features li i { text-align: center; color: var(--color-green); font-size: 12px; margin-right: 8px; width: 30px; height: 30px; line-height: 30px; background-color: var(--color-light-1); border-radius: 50%; margin-left: -38px; } .pricing-features li i.fa-times { color: var(--color-primary); } .pricing-features del { color: var(--color-dark-3); text-decoration: none; } /* Pricing End */ /* 44.5 Coming Soon */ .big-text h1 { text-transform: uppercase; letter-spacing: 15px; text-shadow: 2px 2px 0 var(--color-white); margin: 40px 0; font-family: var(--font-primary); } .subscribe-form-label h4 { text-transform: uppercase; color: var(--color-dark-3); font-weight: normal; letter-spacing: 5px; margin-top: 40px; } .display-image img { max-width: 70%; } .display-image { position: relative; z-index: 1; } .display-image:before { content: ""; position: absolute; width: 500px; height: 400px; border-radius: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--color-primary); z-index: -1; -webkit-transition: all 1s; transition: all 1s; -webkit-animation: shapeAnimate4 40s infinite; animation: shapeAnimate4 40s infinite; } @-webkit-keyframes shapeAnimate4 { 0% { -webkit-transform: translateY(-50%) rotate(360deg); transform: translateY(-50%) rotate(360deg); } 100% { -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } 0% { -webkit-transform: translateY(-50%) rotate(-360deg); transform: translateY(-50%) rotate(-360deg); } } @keyframes shapeAnimate4 { 0% { -webkit-transform: translateY(-50%) rotate(360deg); transform: translateY(-50%) rotate(360deg); } 100% { -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } 0% { -webkit-transform: translateY(-50%) rotate(-360deg); transform: translateY(-50%) rotate(-360deg); } } /* Coming Soon End */ /* 44.6 404 Error */ .error-image img { max-width: 520px; } .error-text h4 { margin: 50px 0; } /* 404 Error End */ /* ------------------------------ 45. Portfolio Grid-2 ------------------------------ */ .gallery_box_style-2 h4 a { font-size: var(--font-size-large); } .gallery_box_style-2 h4 a:hover { color: var(--color-primary); } /* Portfolio Grid-2 End */ /* ------------------------------ 46. Portfolio Single ------------------------------ */ .project-meta-info.vertical { margin-bottom: 40px; } .project-meta-info h6 { text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; color: var(--color-dark-3); font-weight: 300; } .project-meta-info.theme-dark h6 { color: var(--color-white); } .project-meta-info h6 i { color: var(--color-primary); padding-left: 4px; font-size: 10px; } .project-meta-info p, .project-meta-info a { font-size: var(--font-size-medium); color: var(--color-dark-3); -webkit-transition: all 0.3s; transition: all 0.3s; } .project-meta-info a i { padding-right: 4px; font-size: var(--font-size-small); -webkit-transition: all 0.3s; transition: all 0.3s; } .project-meta-info a:hover i { color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } /* 46.1 Single Post Navigation */ .single-post-nav { position: relative; min-height: 118px; } .nav-prev-thumb img, .nav-next-thumb img { max-width: 70px; border: 2px solid; border-color: var(--color-dark-3); } .single-post-nav .post-prev .nav-prev-thumb { margin-right: 15px; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav .post-prev:hover .nav-prev-thumb { margin-left: 20px; margin-right: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav .post-prev .priyo-icon-arrow.left { margin-right: 25px; } .single-post-nav .post-next .priyo-icon-arrow.right { margin-left: 25px; } .single-post-nav .post-prev:hover .priyo-icon-arrow:after { width: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav .post-prev:hover .priyo-icon-arrow:before { border-color: var(--color-primary); } .single-post-nav .post-prev:hover .priyo-icon-arrow { width: 8px; margin: 0 8px; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav .post-next:hover .priyo-icon-arrow:after { width: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav .post-next:hover .priyo-icon-arrow:before { border-color: var(--color-primary); } .single-post-nav .post-next:hover .priyo-icon-arrow { width: 8px; margin: 0 8px; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav .post-next .nav-next-thumb { margin-left: 15px; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav .post-next:hover .nav-next-thumb { margin-right: 20px; margin-left: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav a { font-size: var(--font-size-medium); letter-spacing: 0; color: var(--color-dark-2); -webkit-transition: all 0.3s; transition: all 0.3s; line-height: var(--line-height-125); } .single-post-nav a.post-prev { text-align: left; position: absolute; left: 0; width: 45%; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav a:hover.post-prev { color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav a.post-next { text-align: right; position: absolute; right: 0; width: 45%; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav a:hover.post-next { color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav a.post-prev i { margin-right: 8px; font-size: var(--font-size-small); color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav a.post-next i { margin-left: 8px; font-size: var(--font-size-small); color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .single-post-nav a:hover i { opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } /* Single Post Navigation End */ /* 46.2 Social share */ .post-social-share a { color: var(--color-primary); margin: 0 6px; } .post-social-share a:hover { color: var(--color-dark-3); } .post-social-share a:last-child { margin-right: 0; } .col-image { height: auto; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; } /* ------------------------------ 47. Swiper Thumbs Gallery ------------------------------ */ .swiper__widget-thumb { cursor: pointer; margin-top: 18px; } .swiper__widget-thumb .swiper-slide.slide-thumb { border: 4px solid; border-color: var(--color-light-1); box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__widget-thumb .swiper-slide.slide-thumb:hover { border-color: var(--color-primary-alpha-50); -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__widget-thumb .swiper-slide-thumb-active.slide-thumb { border-color: var(--color-primary-alpha-25); -webkit-transition: all 0.3s; transition: all 0.3s; } /* Swiper Thumbs Gallery End */ /* Portfolio Single End */ /* ------------------------------ 48. Gallery Slider ------------------------------ */ .gallery__slide-fullscreen .single-slide { background-size: cover; background-repeat: no-repeat; background-position: center center; height: 100vh; } .swiper__widget-slide { overflow: hidden; } .swiper-slide .gallery { text-align: center; } .swiper-slide .gallery i { position: absolute; top: 25px; left: 25px; width: 50px; height: 50px; color: var(--color-white); background: var(--color-white-alpha-25); font-size: var(--font-size-large); border-radius: 50%; line-height: 50px; opacity: 0; visibility: hidden; -webkit-transform: translateY(-100%) scale(0); transform: translateY(-100%) scale(0); -webkit-transition: all 0.6s; transition: all 0.6s; } .swiper-slide .gallery:hover i { -webkit-transition: all 0.6s; transition: all 0.6s; -webkit-transform: translateY(0px) scale(1); transform: translateY(0px) scale(1); opacity: 1; visibility: visible; } .swiper-slide .gallery i:hover { -webkit-transition: all 0.3s; transition: all 0.3s; color: var(--color-primary); background: var(--color-white); } .swiper__gallery-ribbon .swiper-pagination-bullet { -webkit-transform: translateY(0); transform: translateY(0); width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: var(--font-size-small); color: var(--color-dark-3); opacity: 1; background: var(--color-light-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .swiper__gallery-ribbon .swiper-pagination-bullet:hover, .swiper__gallery-ribbon .swiper-pagination-bullet-active { color: var(--color-white); background: var(--color-primary); -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-transition: all 0.3s; transition: all 0.3s; } /* Gallery Slider End */ /* ------------------------------ 49. Blog Page ------------------------------ */ .sidebar:not(.left-sidebar) { padding-left: var(--gutters-small); } .left-sidebar { padding-right: var(--gutters-small); } .sidebar.gl-xsmall:not(.left-sidebar) { padding-left: var(--gutters-xsmall); } .search-form { position: relative; } .widget_search input.search-form_input { border: 2px solid; border-color: var(--color-dark-2); background: var(--color-white); height: 50px; width: 100%; padding: 15px; color: var(--color-dark-3); font-size: var(--font-size-medium); position: relative; } .widget_search input:focus.search-form_input { border: 2px solid var(--color-primary); padding-right: 60px; } .widget_search input:focus.search-form_input::-webkit-input-placeholder { text-align: right; } .widget_search input:focus.search-form_input:-ms-input-placeholder { text-align: right; } .widget_search input:focus.search-form_input::placeholder { text-align: right; } .widget_search button.search-form_submit { position: absolute; top: 4px; right: 4px; width: 42px; height: 42px; font-size: var(--font-size-small); background: var(--color-primary); color: var(--color-white); border: transparent; -webkit-transition: all 0.3s; transition: all 0.3s; } .widget_search input:focus.search-form_input ~ button.search-form_submit { background: var(--color-dark-2); } .widget_search button:hover.search-form_submit { color: var(--color-primary); background: var(--color-dark-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .post-meta .meta-wrapper { display: inline-block; margin-right: 15px; } .post-meta .meta-wrapper i { color: var(--color-primary); } .post-meta .meta-wrapper:hover i { color: var(--color-dark-3); } .widget .widget-title { font-family: var(--font-primary); font-weight: 600; color: var(--color-dark-2); margin-bottom: var(--gutters-xsmall); margin-top: 40px; position: relative; z-index: 1; } .widget .widget-title.theme-dark { color: var(--color-white); } .widget .widget-title.list-items { margin-bottom: 15px; } .widget .widget-title:before { content: ""; position: absolute; bottom: 0; left: 0; width: 25%; height: 2px; background-color: var(--color-primary); z-index: 1; } .widget .widget-title:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--color-light-2); z-index: -1; } .widget-title.size-small:after { background-color: var(--color-dark-4); width: 70%; } .widget_archives_list .archive-month a, .widget_categories .cat-item a { line-height: var(--line-height-250); -webkit-transition: all 0.3s; transition: all 0.3s; } .widget_archives_list .archive-month.current-month a, .widget_categories .cat-item.current-cat a { color: var(--color-dark-2); -webkit-transition: all 0.3s; transition: all 0.3s; } .widget_archives_list .archive-month:hover a, .widget_categories .cat-item:hover a { color: var(--color-primary); -webkit-transition: all 0.3s; transition: all 0.3s; } .widget_archives_list ul li, .widget_categories ul li { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-transition: all 0.3s; transition: all 0.3s; } .widget_archives_list ul li span, .widget_categories ul li span { padding: 0 8px; background-color: var(--color-light-1); border-radius: 4px; -webkit-transition: all 0.3s; transition: all 0.3s; } .widget_archives_list ul li.current-month span, .widget_categories ul li.current-cat span { background-color: var(--color-dark-2); color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .widget_archives_list ul li:hover span, .widget_categories ul li:hover span { background-color: var(--color-primary); color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .article-text-small { padding-left: 100px; } .widget_latest_comments .latest-comments { list-style: none; margin: 0; padding: 0; } .latest-comments__comment-avatar { border-radius: 50%; border: 2px solid; border-color: var(--color-black-alpha-25); display: block; float: left; width: 50px; height: auto; margin-right: 20px; } .latest-comments__comment-meta h5 { margin-bottom: 5px; } .latest-comments__comment-excerpt p { line-height: var(--line-height-150); } .latest-comments__comment-excerpt p i { color: var(--color-gray); } .latest-comments__comment-excerpt, .latest-comments__comment-meta { margin-left: 70px; } .latest-comments__comment-author { color: var(--color-primary); font-weight: 500; display: inline-block; } .latest-comments__comment-author:hover { color: var(--color-dark-2); } .latest-comments__comment { border-bottom: 1px solid; border-color: var(--color-light-1); padding: 15px 0; } .latest-comments__comment:first-child { padding-top: 0; } .latest-comments__comment:last-child { padding-bottom: 0; border: none; } /* 49.1 Blog Pagination */ .pagination-block ul li { display: inline-block; } .pagination-block ul li a { display: block; line-height: 24px; padding: 8px 20px; margin: 0 2px; background-color: var(--color-light-1); color: var(--color-dark-3); } .pagination-block.theme-dark ul li a { background-color: var(--color-dark-2); color: var(--color-white); } .pagination-block ul li a.active, .pagination-block ul li a:hover { color: var(--color-primary); background: var(--color-dark-2); -webkit-transition: all 0.5s; transition: all 0.5s; } .pagination-block.theme-dark ul li a.active, .pagination-block.theme-dark ul li a:hover { color: var(--color-white); background: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .pagination-block ul li a.active { color: var(--color-white); } .pagination-block ul li a i { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .pagination-block ul li a:hover i { color: var(--color-white); -webkit-transition: all 0.5s; transition: all 0.5s; } /* 49.2 Single Post */ .entry-content h2 { margin-bottom: 20px; margin-top: 50px; } .post-meta li { display: inline-block; margin-right: 15px; } .post-meta li:last-child { margin-right: 0; } .post-meta li a i { color: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } .post-meta li a:hover i { color: var(--color-dark-2); -webkit-transition: all 0.5s; transition: all 0.5s; } /* ------------------------------ 50. Simple Gallery Slider ------------------------------ */ .simple-gallery-slider.owl-carousel .owl-dots { text-align: center; bottom: 30px; margin: 0; } .simple-gallery-slider.owl-carousel button.owl-dot { height: 8px; width: 8px; background: var(--color-dark-4); border-radius: 50%; margin: 5px 5px 0; -webkit-transition: all 0.5s; transition: all 0.5s; } .simple-gallery-slider.owl-carousel button.owl-dot.active { background: var(--color-dark-3); -webkit-transition: all 0.5s; transition: all 0.5s; } .simple-gallery-slider.owl-carousel button.owl-dot:hover { background: var(--color-primary); -webkit-transition: all 0.5s; transition: all 0.5s; } /* Simple Gallery Slider End */ /* ------------------------------ 51. Comment Reply ------------------------------ */ .comment-reply-title { font-weight: 500; color: var(--color-dark-2); margin-bottom: var(--gutters-xsmall); position: relative; z-index: 1; } .comment-reply-title:before { content: ""; position: absolute; bottom: 0; left: 0; width: 25%; height: 2px; background-color: var(--color-primary); z-index: 1; } .comment-reply-title:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--color-light-2); z-index: -1; } .comment .comment { padding-left: 40px; } .comment { margin-top: var(--gutters-small); } .comment-author .avatar { max-width: 70px; float: left; margin-right: 20px; border: 1px solid var(--color-dark-3); } .comment-content-wrapper { padding-left: 90px; } .comment-metadata a:first-child { display: block; text-transform: capitalize; font-weight: 500; letter-spacing: 0; font-size: var(--font-size-medium); color: var(--color-primary); line-height: var(--line-height-100); } .comment-metadata a:last-child { color: var(--color-dark-4); font-size: 13px; } .comment-metadata a:hover:first-child { color: var(--color-dark-2); } .comment-content { padding-top: 5px; padding-bottom: 10px; } .required { color: var(--color-primary); } .comment-notes { margin-bottom: 30px; } /* Comment Reply End */ /* ------------------------------ 52. Range Slider ------------------------------ */ #slider-range { margin-top: var(--gutters-xsmall); margin-bottom: 15px; } #amount { border: none; color: var(--color-primary); font-weight: 500; } .ui-slider-range.ui-corner-all.ui-widget-header { background: var(--color-dark-2); } .ui-widget.ui-widget-content { border: none; background-color: #dddddd; border-radius: 0; height: 4px; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: none; background: var(--color-primary); border-radius: 50%; top: -7px; } .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:focus { border: none; -webkit-box-shadow: 0 0 0 6px var(--color-primary-alpha-50); box-shadow: 0 0 0 6px var(--color-primary-alpha-50); } #amount { width: 50%; } /* Range Slider End */ /* Single Post End */ /* Blog Page End */ /* ------------------------------ 53. Products filter ------------------------------ */ /* 53.1 Filter by Color */ .products-filter--swatches .swatch-color { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .products-filter--swatches .swatch-color .bg-color { display: block; width: 22px; height: 22px; margin-right: 15px; position: relative; } .products-filter--swatches .swatch-color .bg-color::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ""; width: 6px; height: 10px; display: block; border: solid var(--color-white); border-width: 0 2px 2px 0; position: absolute; top: 4px; left: 8px; opacity: 0; } .products-filter--swatches .swatch-color.selected .bg-color::before, .products-filter--swatches .swatch-color:hover .bg-color::before { opacity: 1; } .products-filter--swatches .products-filter__option { cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s; } .products-filter--swatches .products-filter__option.selected, .products-filter--swatches .products-filter__option:hover { color: var(--color-dark-2); } /* 53.2 Filter by Size */ .select-by-size li { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-transition: all 0.3s; transition: all 0.3s; padding: 8px 0; } .select-by-size li span { padding: 0 8px; background-color: var(--color-light-1); border-radius: 4px; -webkit-transition: all 0.3s; transition: all 0.3s; } .select-by-size li.selected span { background-color: var(--color-dark-2); color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .select-by-size li:hover span { background-color: var(--color-primary); color: var(--color-white); -webkit-transition: all 0.3s; transition: all 0.3s; } .select-by-size li.selected label, .select-by-size li:hover label { color: var(--color-dark-2); -webkit-transition: all 0.3s; transition: all 0.3s; } /* 53.3 Filter by popular */ .product-image { max-width: 70px; border: 2px solid; border-color: var(--color-light-1); float: left; } .product-name a { color: var(--color-dark-2); font-weight: 500; } .product-name a:hover { color: var(--color-primary); } .widget-product-wrapper { margin-bottom: 24px; } .widget-product-wrapper:last-of-type { margin-bottom: 0; } .widget-product-wrapper .product-summary { padding-left: 85px; } .widget-product-wrapper .product-summary h4 a { font-size: 16px; } .widget-product-wrapper .product-summary .amount { font-size: 16px; } .widget-product-wrapper .product-summary .star-rating { line-height: var(--line-height-100); margin-bottom: 4px; } .product-status li { margin-bottom: 8px; } .product-status li:last-child { margin-bottom: 0; } /* 53.4 Product Sorting */ .product-viewing-meta { margin-bottom: 15px; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: var(--color-dark-2); color: var(--color-white); font-weight: normal; } .nice-select .option { letter-spacing: 0; min-height: 28px; line-height: 28px; font-size: 16px; } .nice-select { background-color: var(--color-dark-2); color: var(--color-dark-4); border: none; border-radius: 0; font-size: 16px; letter-spacing: 0; padding-left: 22px; padding-right: 40px; } .nice-select .list { background-color: var(--color-dark-2); border-radius: 0; -webkit-box-shadow: none; box-shadow: none; padding: 16px 6px; letter-spacing: 0; } .nice-select::after { height: 8px; border-color: var(--color-white); width: 8px; margin-top: -5px; right: 18px; } /* ------------------------------ 54. WooCommerce Pages ------------------------------ */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } .quantity .input-text.qty { width: 46px; height: 46px; margin-bottom: 0; padding: 10px; text-align: center; letter-spacing: 0; font-size: var(--font-size-small); color: var(--color-dark-2); display: inline-block; border: 1px solid var(--color-light-1); border-left: none; border-right: none; } .quantity .plus, .quantity .minus { border-radius: 0; height: 46px; border: 1px solid var(--color-light-1); width: 30px; color: var(--color-dark-2); background-color: var(--color-light-1); -webkit-transition: all 0.5s; transition: all 0.5s; } .quantity .plus:hover, .quantity .minus:hover { border: 1px solid var(--color-dark-2); color: var(--color-white); background-color: var(--color-dark-2); -webkit-transition: all 0.5s; transition: all 0.5s; } form.cart .quantity { margin-right: 24px; } .table { margin-bottom: 0; color: var(--color-dark-3); border-spacing: 0; } .table-striped > tbody > tr:nth-of-type(2n + 1) > * { color: var(--color-dark-3); } .cart-table-wrapper .product-thumbnail { width: 100px; } .cart-table-wrapper .product-thumbnail img { border: 1px solid; border-color: var(--color-dark-4); } .cart-table-wrapper .remove i { font-size: var(--font-size-medium); color: var(--color-gray); } .cart-table-wrapper .remove:hover i { color: var(--color-primary); } .cart-table-wrapper td { vertical-align: middle; color: var(--color-dark-3); } .cart-table-wrapper thead { border-bottom: 2px solid; border-color: var(--color-primary-alpha-25); } .checkout-review-order-table td.product-name { max-width: 75%; line-height: var(--line-height-150); } th.product-remove { width: 40px; } th.product-remove, th.product-thumbnail { font-size: 0; } .cart-table-wrapper .coupon { border: 1px dashed; border-color: var(--color-primary-alpha-50); padding: 25px; width: 440px; max-width: 100%; float: left; margin-top: 30px; -webkit-transition: all 0.3s; transition: all 0.3s; } .cart-table-wrapper .coupon:hover { border: 1px dashed; border-color: var(--color-primary); -webkit-box-shadow: 0 16px 32px var(--color-primary-alpha-10); box-shadow: 0 16px 32px var(--color-primary-alpha-10); -webkit-transition: all 0.3s; transition: all 0.3s; } .cart-table-wrapper .coupon label { display: block; margin-bottom: 10px; } textarea.input_field, input.input_field { height: 56px; border: 2px solid; border-color: var(--color-light-1); padding: 15px; display: block; width: 100%; margin-bottom: 15px; margin-top: 5px; } textarea.input_field { min-height: 160px; } textarea:focus.input_field, input:focus.input_field { border: 2px solid; border-color: var(--color-dark-2); } button.input_button { background-color: var(--color-dark-2); color: var(--color-white); border: none; padding: 12px 30px; } button.input_button:hover { background-color: var(--color-primary); } .update-cart button { float: right; margin-top: 30px; } .cart_totals { border: 2px solid; border-color: var(--color-dark-2); background-color: var(--color-light-1); padding: 0 30px 30px; } .cart_totals h2 { font-family: var(--font-primary); text-align: center; background-color: var(--color-dark-2); color: var(--color-white); padding: 10px; margin: 0 calc(30px * -1) 30px; font-size: 30px; } .cart_totals .amount { text-align: right; display: block; white-space: nowrap; font-weight: 600; } .select2-dropdown .select2-search--dropdown .select2-search__field { border: 1px solid var(--color-primary-alpha-25); margin-bottom: 15px; height: 40px; padding-left: 20px; } .select2-dropdown { border: 1px solid var(--color-light-1); padding: 15px; min-width: 300px; width: 100%; } .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; scrollbar-width: thin; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--color-dark-2); color: var(--color-white); } .select2-container--open .select2-dropdown--above, .select2-container--open .select2-dropdown--below { border-radius: 0; border: 1px !important; } .form-coupon-toggle, .form-login-toggle { border: 1px solid; border-color: var(--color-light-1); padding: 15px 25px; margin-bottom: 30px; } .form-coupon-toggle { margin-bottom: 0; } .showcoupon, .showlogin { color: var(--color-primary); float: right; } .showcoupon:hover, .showlogin:hover { color: var(--color-dark-2); } .form-register-form, .form-login-form, .form-login { margin-top: 15px; background-color: var(--color-light-1); padding: 20px 25px; margin-bottom: 30px; width: 75%; display: none; } .form-register-form, .form-login-form { margin: 0; display: block; width: 100%; padding: 30px; } .coupon.collapse label { margin-bottom: 15px; } .coupon.collapse { border: 1px dashed; border-color: var(--color-primary-alpha-50); padding: 25px; width: 75%; margin-top: 15px; display: none; } .form-login p:first-child { margin-bottom: 15px; font-size: 14px; } .lost_password a { color: var(--color-primary); } .lost_password a:hover { color: var(--color-dark-2); } .billing-fields h2 { font-family: var(--font-primary); margin-bottom: 30px; } .payment_methods li { margin-bottom: 15px; } .payment_methods li:last-child { margin-bottom: 0; } .payment_box.payment_method_cod p, .payment_box.payment_method_cheque p, .payment_box.payment_method_bacs p { padding: 15px; background: var(--color-light-1); margin: 10px 0; font-size: 13px; } .privacy-policy-text p { margin: 30px 0; } .privacy-policy-link { color: var(--color-primary); } .privacy-policy-link:hover { color: var(--color-dark-2); } .billing-fields { background-color: var(--color-light-1); border: 1px dashed var(--color-dark-4); padding: 30px 30px 15px; } .billing-additional-fields h3 { margin: 30px 0 15px; font-family: var(--font-primary); } .billing-account-fields { margin: 50px 0; } .order-review { border: 2px solid; padding: 0 30px 30px; border-color: var(--color-dark-2); } #order_review_heading { background: var(--color-dark-2); color: var(--color-white); text-align: center; font-family: var(--font-primary); padding: 10px; margin: 0 calc(30px * -1) 15px; font-size: 30px; } .shop_table.checkout-review-order-table { width: 100%; } .price-amount.amount { text-align: right; } .product-total { text-align: right; display: block; white-space: nowrap; } .cart_item .price-amount.amount { text-align: right; display: block; white-space: nowrap; } .checkout-payment { margin-top: 30px; } .product-quantity i::before { font-size: 10px; margin-left: 10px; margin-right: 10px; } .checkout-review-order-table tr { border-bottom: 1px solid #e8eff3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12px 30px; margin: 0 calc(30px * -1); } .order-total { color: var(--color-primary); font-weight: 600; } /* 54.1 Custom Select2 */ .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single { border-radius: 0; margin-bottom: 15px; margin-top: 5px; display: block; background: var(--color-white); height: 50px; padding: 15px; border: 1px solid var(--color-light-1) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--color-dark-3); line-height: var(--line-height-125); } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--color-gray); } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 15px; right: 15px; } .select2-container--default .select2-selection--single .select2-selection__arrow b, .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { height: 8px; width: 8px; background-color: transparent; border: 2px solid var(--color-gray); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: transparent; border-left: transparent; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .form-register-form h2, .form-login-form h2 { font-family: var(--font-primary); margin-bottom: 30px; } .custom-login-btn.google-login a, .custom-login-btn.facebook-login a { width: calc(50% - 6px); height: 50px; text-align: center; line-height: 48px; background-color: #3b5998; border: 2px solid #3b5998; color: var(--color-white); float: left; margin-right: 6px; border-radius: 4px; } .custom-login-btn.google-login a { float: right; margin-right: 0; background-color: #4c8bf5; border: 2px solid #4c8bf5; } .custom-login-btn.google-login a:hover { border: 2px solid var(--color-dark-2); background-color: var(--color-white); color: var(--color-dark-2); } .custom-login-btn.google-login a:hover i { color: #ea4335; } .custom-login-btn.facebook-login a:hover { border: 2px solid var(--color-dark-2); background-color: var(--color-white); color: var(--color-dark-2); } .custom-login-btn.facebook-login a:hover i { color: #3b5998; } .form_links_2 a { color: var(--color-primary); } .form_links_2 a:hover { color: var(--color-dark-2); } /* 54.2 Single Product */ .product-details__short-description { margin: 20px 0 30px; } .entry-summary .product_title { font-family: var(--font-primary); } .single-product-gallery .swiper-slide .gallery i { color: var(--color-primary); background: var(--color-white); -webkit-box-shadow: 0 2px 2px var(--color-dark-alpha-10); box-shadow: 0 2px 2px var(--color-dark-alpha-10); } .single-product-gallery .swiper-slide .gallery i:hover { color: var(--color-white); background: var(--color-dark-2); -webkit-box-shadow: none; box-shadow: none; } .single-product-gallery .swiper__widget-slide:hover .swiper-button-prev, .single-product-gallery .swiper__widget-slide:hover .swiper-button-next { color: var(--color-white); background: var(--color-dark-alpha-10); } .single-product-gallery .swiper__widget-slide:hover .swiper-button-prev:hover, .single-product-gallery .swiper__widget-slide:hover .swiper-button-next:hover { background: var(--color-primary-alpha-10); } .single-product-gallery .swiper__widget-slide .swiper-button-prev:hover:after, .single-product-gallery .swiper__widget-slide .swiper-button-next:hover:after { color: var(--color-primary); } .single-product-gallery .swiper__widget-slide .swiper-pagination-current, .single-product-gallery .swiper__widget-slide .swiper-pagination-total, .single-product-gallery .swiper__widget-slide .swiper-pagination-fraction { color: var(--color-gray); } /* 54.3 Nav Tabs */ .nav-tabs .nav-link { color: var(--color-dark-2); } .nav-tabs .nav-link:hover { color: var(--color-primary); } .nav.nav-tabs { margin-bottom: var(--gutters-small); } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: var(--color-primary); } /* 54.4 Review Form */ #review_form_wrapper { background-color: var(--color-light-1); padding: 30px; } #reply-title { font-size: var(--font-size-large); text-transform: none; } #reply-title:after, #reply-title:before { content: ""; display: none; } .comment-form-rating { margin-bottom: 15px; display: inline-block; } .comment-form-rating p.stars a { position: relative; height: 1em; width: 1em; text-indent: -999em; display: inline-block; text-decoration: none; -webkit-box-shadow: none; box-shadow: none; } .comment-form-rating p.stars a { margin-right: 5px; } .comment-form-rating p.stars a::before { content: "\f005"; font-family: "Font Awesome 5 Free", sans-serif; font-size: var(--font-size-medium); color: var(--color-dark-4); display: block; position: absolute; top: 0; left: 0; width: 1em; line-height: 1; text-indent: 0; } .comment-form-rating p.stars:hover a:before { content: "\f005"; font-family: "Font Awesome 5 Free", sans-serif; font-weight: bold; color: var(--color-primary); } .comment-form-cookies-consent .links_checkbox + label { letter-spacing: 0; } .comment-form-comment.form_input_box textarea { height: 150px; } .user-reviews-title { font-family: var(--font-primary); color: var(--color-primary); margin-bottom: 15px; } .user-reviews-title span { color: var(--color-dark-2); } .commentlist { list-style: none; margin: 0; padding: 0; } .commentlist li { position: relative; clear: both; padding: 15px 0; } .comment_container .avatar { max-width: 100px; border: 2px solid var(--color-dark-3); } .review__published-date { color: var(--color-gray); } /* Review Form End */ /* WooCommerce Pages End */
💾 Kaydet
İptal
📝 Yeniden Adlandır
İptal
Kaydet
🔐 Dosya İzinleri (chmod)
İzin Değeri:
Hızlı Seçim:
777
755
644
600
777
= Herkes okur/yazar/çalıştırır
755
= Sahip tam, diğerleri okur/çalıştırır
644
= Sahip okur/yazar, diğerleri okur
600
= Sadece sahip okur/yazar
İptal
Uygula