/* /*-------------------------------------------------------------- ====================================== * CSS TABLE CONTENT * ====================================== 1. GENERAL 2. HEADINGS 3. TEXT & PARAGRAPH 4. LISTS 5. BOX SPACING (inner & outer) >padding >marging 6. BOX MAX-WIDTH CSS 7. POSITIONS ( absolute & relative & statice & z-index ) 8. COLOR (text & background) >text color >background color 9. IMAGES OVERLAY EFFECTS (overly animation on images) 10. IMAGES EFFECTS (image animation in images) >image-opacity >image-zoom >image-zoom-slow >image-shrink >image-side-pan >image-vertical-pan >image-fade-in >image-fade-out >image-rotate >image-sepia >image-blurr >image-blurr-invert >image off color >image on color 11. CONTENT SHOW ON IMAGE BOX 12. FORM ELEMENTS 13. WP DEFAULT 14. HEADER (top part of page) 15. PAGE TOP BAR (left & right content) 16. LOGO ( company identify symbol ) 17. MAIN BAR ( place logo & main-navigation ) 18. NAVIGATIONS >mena-menu >mobile-menu >footer-menu 19. BANNER 20. SLIDER >rs slider >owl slider 21. BLOG 22. WIDGETS 23. CUSTOMIZE CSS >set-radius >transition >float-clearfix 24. SORTCODES >Buttons >Title separators >Deviders >Lists & bullets >Tabs >Accordians >Carousels >Testimonials >Pricing table >Alert box >Modal pop >Social icons >Breadcrumb >Tables >Image effects 25. PAGINATION 26. FOOTER 27. PAGE-CONTENT 28. INNER-CONTENT 29. SIDE-NAV 30. CONTACT 31. SHOPPING ====================================== * END TABLE CONTENT * ====================================== */ /* ========================================================================== SECTION: CORE ========================================================================== */ 1. GENERAL ---------------------------------------------------------------*/ body, html { -moz-osx-font-smoothing: grayscale; min-height: 100%; } body { background-color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 400; color: #6f6f6f; padding: 0; margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display: flex; flex-direction: column; } a { color: #EFBB20; outline: 0 none; text-decoration: none; } a:hover, a:focus { text-decoration: none; outline: 0 none; } a:active, a:hover { color: #333333; } p a { color: #333333; } img { border-style: none; height: auto; max-width: 100%; vertical-align: middle; } hr { clear: both; } button, select { outline: none; } section, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, summary { display: block; } address { font-style: italic; } table { background-color: transparent; width: 100%; } table thead th { color: #333; } table td { padding: 15px 10px; } p, address, pre, hr, ul, ol, dl, dd, table { margin-bottom: 24px; } ::selection { color: #000; background: #dbdbdb; } ::-moz-selection { color: #000; background: #dbdbdb; } .overflow-auto { overflow: auto; } .clear { clear: both; } ::-moz-selection { background: #3396d1; color: #fff; } ::selection { background: #3396d1; color: #fff; } .op { font-family: 'Open Sans', sans-serif; } /*--------------------------------------------------------------- 2. HEADINGS ---------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { color: #1c1e25; font-family: 'Oswald', sans-serif; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #1c1e25; } h1 { font-size: 36px; line-height: 45px; margin-bottom: 25px; } h2 { font-size: 60px; line-height: 1.2; margin-bottom: 25px; } h3 { font-size: 45px; line-height: 1.3; margin-bottom: 20px; } h4 { font-size: 28px; line-height: 1.2; margin-bottom: 15px; } h5 { font-size: 24px; line-height: 30px; margin-bottom: 10px; } h6 { font-size: 18px; line-height: 24px; margin-bottom: 10px; } /*--------------------------------------------------------------- 3. TEXT & PARAGRAPH ---------------------------------------------------------------*/ p { line-height: 28px; margin-bottom: 24px; } strong { font-weight: 400; } /*text align*/ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify } .text-uppercase { text-transform: uppercase } /*--------------------------------------------------------------- 4. LISTS ---------------------------------------------------------------*/ dl, ul, ol { list-style-position: outside; padding: 0; } ul, ol { margin-bottom: 24px; gap: 2vh; } ul li, ol li { padding: 0; } dl { margin-left: 0; margin-bottom: 30px; } dl dd { margin-bottom: 10px; } .list-inline>li { padding-left: 2px; padding-right: 2px; display: inline-block; } .m-t15 { margin-top: 15px; } .m-t50 { margin-top: 50px; } /*== >marging (bottom) ==*/ .m-b0 { margin-bottom: 0; } .m-b20 { margin-bottom: 20px; } .m-b30 { margin-bottom: 30px; } .m-b40 { margin-bottom: 40px; } .m-r10 { margin-right: 10px; } .m-t15 { margin-top: 15px; } .m-t50 { margin-top: 50px; } /*== >marging (bottom) ==*/ .m-b0 { margin-bottom: 0; } .m-b20 { margin-bottom: 20px; } .m-b30 { margin-bottom: 30px; } .m-b40 { margin-bottom: 40px; } /*== >marging (right) ==*/ @media only screen and (max-width: 1200px) { .m-lg-t0 { margin-top: 0; } .m-lg-b30 { margin-bottom: 30px; } @media only screen and (max-width: 991px) { .m-md-t0 { margin-top: 0; } @media only screen and (max-width: 767px) { .m-sm-t0 { margin-top: 0; } @media only screen and (max-width: 576px) { .m-xs-t0 { margin-top: 0; } .m-xs-t30 { margin-top: 30px; } /*--------------------------------------------------------------- 7. POSITIONS ( absolute & relative & statice & z-index ) ---------------------------------------------------------------*/ .absolute { position: absolute; } .relative { position: relative; } .static { position: static; } /*--------------------------------------------------------------- /*=== >text color ===*/ 8. COLOR (text & background)>text color>background color ---------------------------------------------------------------*/ .text-white { color: #fff; } .bg-white { background-color: #FFF; } .bg-black { background-color: #000; } .s4p_ai-bnr-inr.bg-pt, .bg-pt { background-position: top; background-size: cover; } .s4p_ai-bnr-inr.bg-pb, .bg-pb { background-position: bottom; background-size: cover; } .s4p_ai-img-overlay1:hover:before, .s4p_ai-box:hover .s4p_ai-img-overlay1:before { opacity: 0.5; } .s4p_ai-img-overlay2.on:before { opacity: 1; } .s4p_ai-img-overlay2:hover:before, .s4p_ai-box:hover .s4p_ai-img-overlay2:before { opacity: 0.9; } .s4p_ai-img-overlay3:hover:before, .s4p_ai-box:hover .s4p_ai-img-overlay3:before { width: 100%; height: 100%; top: 0; left: 0; } .s4p_ai-img-overlay4:hover:before, .s4p_ai-box:hover .s4p_ai-img-overlay4:before { width: 100%; left: 0; } .s4p_ai-img-overlay5:hover:before, .s4p_ai-box:hover .s4p_ai-img-overlay5:before { height: 100%; top: 0; } .s4p_ai-img-overlay6:hover:before, .s4p_ai-box:hover .s4p_ai-img-overlay6:before { height: 100%; } .s4p_ai-img-overlay7:hover:before, .s4p_ai-img-overlay7:hover:after, .s4p_ai-box:hover .s4p_ai-img-overlay7:before, .s4p_ai-box:hover .s4p_ai-img-overlay7:after { width: 50%; } .s4p_ai-img-overlay8:hover:before, .s4p_ai-img-overlay8:hover:after, .s4p_ai-box:hover .s4p_ai-img-overlay8:before, .s4p_ai-box:hover .s4p_ai-img-overlay8:after { width: 100%; opacity: 0.3; } .s4p_ai-img-overlay9:hover:before, .s4p_ai-img-overlay9:hover:after, .s4p_ai-box:hover .s4p_ai-img-overlay9:before, .s4p_ai-box:hover .s4p_ai-img-overlay9:after { width: 100%; height: 100%; opacity: 0.3; } .s4p_ai-img-overlay10:hover:before, .s4p_ai-box:hover .s4p_ai-img-overlay10:before { opacity: 0.5; } .s4p_ai-img-overlay10:hover:after, .s4p_ai-box:hover .s4p_ai-img-overlay10:after { width: 90%; height: 80%; left: 5%; top: 10%; opacity: 0.5; background: none; border: 1px dashed #FFFFFF; } .s4p_ai-img-overlay11:hover:after, .s4p_ai-box:hover .s4p_ai-img-overlay11:after { height: 95%; opacity: 1; right: 7.5%; top: 2.5%; -moz-transform: skewY(0deg); -webkit-transform: skewY(0deg); -o-transform: skewY(0deg); -ms-transform: skewY(0deg); transform: skewY(0deg); width: 85%; } .s4p_ai-img-overlay11:hover:before, .s4p_ai-box:hover .s4p_ai-img-overlay11:before { height: 85%; left: 2.5%; opacity: 1; top: 7.5%; -moz-transform: skewY(0deg); -webkit-transform: skewY(0deg); -o-transform: skewY(0deg); -ms-transform: skewY(0deg); transform: skewY(0deg); width: 95%; } /* overlay-12 */ .s4p_ai-img-overlay12:hover:after, .s4p_ai-box:hover .s4p_ai-img-overlay12:after { opacity: 1; transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -moz-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -o-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); } .s4p_ai-img-overlay12.left:hover:after, .s4p_ai-box:hover .s4p_ai-img-overlay12.left:after { transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); -moz-transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); -webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); -o-transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); } .s4p_ai-img-overlay12.left:after { border-bottom: 2px solid #ffffff; border-top: 2px solid #ffffff; transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 0, 1); -moz-transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 0, 1); -o-transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 0, 1); -webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 0, 1); -moz-transform-origin: 50% 50% 0; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; } .s4p_ai-img-overlay12:hover:before, .s4p_ai-box:hover .s4p_ai-img-overlay12:before { opacity: 0.4; } /* >image-opacity */ .s4p_ai-img-effect.opacity img:hover { opacity: 0.8; -moz-opacity: 0.8; -webkit-opacity: 0.8; } /* >image-zoom-slow */ .s4p_ai-box:hover .s4p_ai-img-effect.zoom img, .our-team:hover .s4p_ai-img-effect.zoom img, .blog-post:hover .s4p_ai-img-effect.zoom img, .s4p_ai-img-effect.zoom:hover img { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } /* >image-fade-in */ .s4p_ai-img-effect.fade-in { background: #000 } .s4p_ai-img-effect.fade-in img { opacity: 0.65; -moz-opacity: 0.65; -webkit-opacity: 0.65; } .s4p_ai-img-effect.fade-in:hover img { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; } /* >image-rotate */ .blog-post:hover .s4p_ai-img-effect.rotate img, .s4p_ai-box:hover .s4p_ai-img-effect.rotate img, .s4p_ai-img-effect.rotate:hover img { -moz-transform: scale(1.5) rotate(-20deg); -webkit-transform: scale(1.5) rotate(-20deg); -o-transform: scale(1.5) rotate(-20deg); -ms-transform: scale(1.5) rotate(-20deg); transform: scale(1.5) rotate(-20deg); } .s4p_ai-info-has.bg-black { background-color: rgba(0, 0, 0, 0.6); } .s4p_ai-info-has.bg-white { background-color: rgba(255, 255, 255, 0.8) !important; } .s4p_ai-info-has.bg-white h1, .s4p_ai-info-has.bg-white h2, .s4p_ai-info-has.bg-white h3, .s4p_ai-info-has.bg-white h4, .s4p_ai-info-has.bg-white h5, .s4p_ai-info-has.bg-white h6 { color: #3d474a; } .s4p_ai-info-has.bg-white h1 a, .s4p_ai-info-has.bg-white h2 a, .s4p_ai-info-has.bg-white h3 a, .s4p_ai-info-has.bg-white h4 a, .s4p_ai-info-has.bg-white h5 a, .s4p_ai-info-has.bg-white h6 a { color: #3d474a; } .s4p_ai-info-has.bg-white .s4p_ai-info-has-text, .s4p_ai-info-has.bg-white p { color: #767676; } .s4p_ai-media { overflow: hidden; position: relative; } .s4p_ai-box:hover .s4p_ai-info-has, .s4p_ai-media:hover .s4p_ai-info-has { opacity: 1; width: 100%; margin-bottom: 0; } /* ========================================================================== SECTION: ANIMATIONS ========================================================================== */ /* ========================================================================== SECTION: COMPONENTS ========================================================================== */ /*--------------------------------------------------------------- 12. FORM ELEMENTS ---------------------------------------------------------------*/ label { font-weight: 600; margin-bottom: 10px; } .form-group { margin-bottom: 25px; } .form-control { border-color: #e1e6eb; box-shadow: none; height: 40px; font-size: 13px; line-height: 20px; padding: 9px 12px; } textarea.form-control { height: auto; } .form-control:focus { border-color: #e1e1e1; outline: 0; } .form-control:focus, .has-error .form-control:focus { -webkit-box-shadow: none; box-shadow: none; } .form-control.kv-fileinput-caption { height: 39px; } .form-group.form-inline .radio, .form-group.form-inline .checkbox { margin-right: 15px; } /*input group*/ .input-group { width: 100%; } .input-group .form-control, .input-group-addon, .input-group-btn { display: table-cell; } /*select box*/ .dropdown-menu { font-size: 13px; } .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 100%; } .bootstrap-select .dropdown-toggle { border: 1px solid #e7ecf1 !important; background-color: #fff !important; height: 40px; font-size: 13px; color: #999; } .bootstrap-select .dropdown-toggle:after { display: none; } .bootstrap-select .dropdown-toggle:active, .bootstrap-select .dropdown-toggle:focus, .bootstrap-select .dropdown-toggle:hover { background-color: #fff !important; border: 1px solid #e9e9e9 !important; box-shadow: none !important; outline: 0px !important; } .bootstrap-select:active, .bootstrap-select:focus { border: 0px !important; box-shadow: none !important; outline: 0px !important; } .bootstrap-select.show { box-shadow: none !important; outline: 0px !important; } .bootstrap-select.show .dropdown-toggle { box-shadow: none !important; outline: 0px !important; } .bootstrap-select.show.btn-group .dropdown-menu.inner { display: block; } .bootstrap-select div.dropdown-menu { border: 1px solid #e9e9e9; border-radius: 0; box-shadow: none; margin-top: -1px; padding: 0; font-size: 13px; } .bootstrap-select div.dropdown-menu ul li { padding: 0; } .bootstrap-select div.dropdown-menu ul li a { padding: 5px 15px; } .bootstrap-select div.dropdown-menu ul li a img { border-radius: 100%; -webkit-border-radius: 100%; margin-right: 5px; } .bootstrap-select .bs-searchbox .form-control { padding: 5px 10px; height: 30px; } .bootstrap-select .dropdown-menu>li>a { display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap; } .bootstrap-select .dropdown-menu>li>a:hover { background-color: #f2f2f4; } /*radio & checkbox*/ input[type=checkbox], input[type=radio] { display: ; opacity: 0; margin-left: 1px !important; position: absolute; } input[type=checkbox]+label, input[type=radio]+label { display: block; padding-left: 25px !important; position: relative; } input[type=checkbox]+label:hover:before, input[type=radio]+label:hover:before { border-color: #3396d1; } input[type=checkbox]+label:before, input[type=radio]+label:before { background-color: #ffffff; border: 2px solid #b6b7b8; border-radius: 0; content: ""; display: inline-block; height: 16px; left: 1px; line-height: 1; position: absolute; top: 50%; transition: all 0.1s linear 0s; -moz-transition: all 0.1s linear 0s; -webkit-transition: all 0.1s linear 0s; -o-transition: all 0.1s linear 0s; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); width: 16px; } input[type=checkbox]+label:after { color: #fff; content: "\f00c"; font-family: FontAwesome; font-size: 0px; -webkit-font-smoothing: antialiased; left: 6px; position: absolute; top: 7px; transition: all linear 0.1s; -moz-transition: all linear 0.1s; -webkit-transition: all linear 0.1s; -o-transition: all linear 0.1s; width: 14px; text-align: center; } input[type=checkbox]:checked+label:before { border-width: 7px; } input[type=checkbox]:checked+label:after { font-size: 10px; left: 2px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); } input[type=radio]+label:before { border-radius: 50%; content: ""; } input[type=radio]:checked+label:before { border-color: #3396d1; border-width: 5px; } .form-inline .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"] { position: absolute; left: 0; bottom: 0; } .bootstrap-touchspin .input-group-btn-vertical>.btn { display: block; float: none; width: 100%; max-width: 100%; padding: 10px 10px 9px; margin-left: -1px; position: relative; border-width: 1px; border-style: solid; border-color: #e1e1e1; background: #FFF; } .input-rating input[type=radio]:checked+label:before, .input-rating input[type=radio]+label.marked:before, .input-rating input[type=radio]+label.filled:before, .input-rating input[type=radio]+label.hovered.filled:before { content: "\f005"; } blockquote { padding: 20px 20px 20px 100px; font-size: 24px; font-style: italic; color: #3e3e3e; margin: 25px 0; border-left: none; line-height: 34px; position: relative; clear: both; text-align: left; font-weight: 600; } blockquote p { font-size: 18px; color: #555555; line-height: 30px; margin-bottom: 0px; } blockquote:before { content: ""; position: absolute; left: 10px; top: 35px; font-style: normal; width: 60px; height: 3px; background: #1b1e25; margin-left: 0; } blockquote cite { display: block; margin-top: 10px; font-size: 18px; font-weight: 600; } .ext-header .main-bar .logo-header { display: none; } @media only screen and (max-width: 480px) { .extra-nav { text-align: right; } } @media only screen and (max-width: 480px) { #header-part.fix-map-header { height: 160px; } } @media only screen and (max-width: 991px) { .s4p_ai-topbar-right { padding-left: 0; padding-right: 15px; } @media only screen and (max-width: 767px) { .top-bar [class*="col-"] { width: 100%; text-align: right; padding: 10px 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .service-list ul li .title { font-size: 18px; font-weight: 600; margin-bottom: 2px; line-height: 24px; } /*--------------------------------------------------------------- /* ========================================================================== SECTION: LAYOUT ========================================================================== */ /*=== >logo for header ===*/ 16. LOGO (company identify symbol) ---------------------------------------------------------------*/ .logo-header { display: table; float: left; vertical-align: middle; padding: 0; color: #EFBB20; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; width: 125px; height: 100px; position: relative; z-index: 9; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; margin-left: 15px; } .logo-header>a, .logo-footer>a { display: table-cell; vertical-align: middle; font-size: 28px; color: #000; font-weight: 600; } .logo-header.center-block { margin-left: auto; margin-right: auto; float: none; } .logo-header img, .logo-footer img { height: auto; width: 100%; max-width: 180px; } .logo-header span, .logo-footer span { font-size: 20px; color: #EFBB20; letter-spacing: 20px; } /*= When header is sticky =*/ .is-fixed .logo-header { transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; } /*= Set width for mobile =*/ @media only screen and (max-width: 767px) { .logo-header, .is-fixed .logo-header { width: 100px; max-width: 100px; height: 50px; } .logo-header img, .logo-footer img { max-width: 135px; } .is-fixed .header-nav .logo-header a img { vertical-align: middle; } .site-header .navbar-toggler, .site-header .is-fixed .navbar-toggler { margin: 18px 0 14px 10px; } .site-header .extra-nav, .site-header .is-fixed .extra-nav { padding: 10px 0; } } /*--------------------------------------------------------------- /*== >mena-menu ==*/ 18. NAVIGATIONS>mena-menu>mobile-menu>footer-menu ---------------------------------------------------------------*/ .navbar-toggler { border: 0 solid #efbb20; font-size: 16px; line-height: 24px; margin: 26px 0 18px 15px; padding: 0; float: right; } .navbar-toggler span { background: #666; } .site-header .main-bar .container { position: relative; } .header-nav { padding: 0; } .header-nav .nav { float: right; padding: 0; } .header-nav .nav>li { margin: 0px; font-weight: 400; position: relative; } .header-nav .nav>li>a { border-radius: 0px; color: #020d26; font-size: 16px; padding: 38px 20px; cursor: pointer; font-weight: 600; display: inline-block; position: relative; border-width: 0 0 0 1px; text-transform: uppercase; } .header-nav .nav>li>a.nav-link { padding-left: 12px; padding-right: 12px; } .header-nav .nav>li>a:hover { background-color: transparent; color: var(--primary); } .header-nav .nav>li>a:active, .header-nav .nav>li>a:focus { background-color: transparent; } .header-nav .nav>li.active>a, .header-nav .nav>li.current-menu-item>a { background-color: transparent; color: var(--primary); } .header-nav .nav>li>a.active:after, .main-bar.bg-primary .header-nav .nav>li>a:after, .main-bar.bg-primary .header-nav .nav>li.active>a:after { background: #fff; } .header-nav .nav>li:hover>.sub-menu, .header-nav .nav>li:hover>.mega-menu { opacity: 1; visibility: visible; margin-top: 0; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .header-nav .nav>li>.sub-menu, .header-nav .nav>li>.mega-menu { box-shadow: 0px 1px 40px 0px rgba(0, 0, 0, 0.1); } .header-nav .nav>li .sub-menu, .header-nav .nav>li .mega-menu { border-radius: 2px; } .header-nav .nav>li .sub-menu { background-color: #ffffff; display: block; left: 0; list-style: none; opacity: 0; padding: 5px 0; position: absolute; visibility: hidden; width: 220px; z-index: 10; } .header-nav .nav>li .sub-menu li { border-bottom: 0px solid #f4f4f4; position: relative; } .header-nav .nav>li .sub-menu li a { color: #000; display: block; font-size: 15px; padding: 10px 25px; text-transform: capitalize; transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; font-weight: 600; text-transform: uppercase; } .header-nav .nav>li.sub-menu-down>a:after { content: "\f107"; font-size: 14px; margin-left: 5px; margin-top: 0; vertical-align: middle; font-weight: 900; font-family: "FontAwesome"; } .header-nav .nav>li .mega-menu>li ul a:hover, .header-nav .nav>li .sub-menu li:hover>a { background-color: #F2F2F2; text-decoration: none; } .header-nav .nav>li .sub-menu li:hover>a { color: var(--primary); } .header-nav .nav>li .sub-menu li:last-child { border-bottom: 0px; } .header-nav .nav>li .sub-menu li>.sub-menu.left, .header-nav .nav>li .sub-menu li:hover .sub-menu.left { left: auto; right: 220px; } .header-nav .nav>li .sub-menu li .fa { color: inherit; display: block; float: right; font-size: 16px; opacity: 1; } .header-nav .nav>li .sub-menu li .fa.fa-nav { color: inherit; display: inline-block; float: none; font-size: 13px; margin-right: 5px; opacity: 1; position: unset; right: 10px; top: 12px; } .header-nav .nav>li .sub-menu li>.sub-menu { left: 220px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .header-nav .nav>li .sub-menu li:hover>.sub-menu { left: 220px; margin: 0px; opacity: 1; top: -1px; visibility: visible; } .header-nav .nav>li .sub-menu li:hover>.sub-menu:before { background-color: transparent; bottom: 0px; content: ''; display: block; height: 100%; left: -6px; position: absolute; top: 0px; width: 6px; } .header-nav .nav>li.has-mega-menu { position: inherit; } .header-nav .nav>li .mega-menu { background-color: #ffffff; border: 1px solid #f8f8f8; display: flex; left: 0px; list-style: none; opacity: 0; position: absolute; right: 0px; visibility: hidden; width: 100%; margin-top: 20px; z-index: 9; } .header-nav .nav>li .mega-menu>li { display: block; padding: 30px 0 25px; position: relative; vertical-align: top; width: 25%; } .header-nav .nav>li .mega-menu>li:after { content: ""; background-color: rgba(0, 0, 0, 0.1); position: absolute; padding: 10px; display: flex; align-items: center; gap: 8px; background-image: linear-gradient(to top, #ad6d39 0, #d48d54 100%, #ad6d39 100%); background-size: 200%; color: white; } /* Sticky Footer Implementation */ .page-wraper { display: flex; flex-direction: column; min-height: 100vh; } .page-content { flex: 1 0 auto; } /* Responsive Footer */ @media (max-width: 992px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } @media (max-width: 576px) { .site-footer { padding: 40px 0 0; } .menu-btn .menu { width: 25px; height: 16px; position: relative; display: flex; flex-direction: column; justify-content: space-between; } .menu-btn .menu span { display: block; height: 2px; width: 100%; background: white; transition: all 0.3s ease; } .menu-btn.disabled { pointer-events: none; } /* zachowujemy gradient z oryginalnego designu */ .extra-nav ul li .menu-btn { padding: 30px 20px; font-weight: 500; font-size: 15px; } margin-right: 5px; text-align: center; width: 15px; } .header-nav .nav>li.menu-item-has-children:before { content: "\f078"; display: block; font-family: "FontAwesome"; right: 4px; position: absolute; top: 50%; color: #999; margin-top: -8px; font-size: 8px; } /* Mega Menu */ .header-nav .nav>li.has-mega-menu.demos .mega-menu { left: auto; right: auto; max-width: 600px; z-index: 9; } @media only screen and (max-width: 1200px) { .header-nav .nav>li>a { padding: 22px 15px 22px 15px; font-size: 14px; font-weight: 500; } .logo-header img, .logo-footer img { width: 140px; } .logo-header { width: 140px; height: 65px; } } @media only screen and (max-width: 991px) { .middle-bar { display: none; } .site-header.center .header-nav .nav { width: 100%; float: none; } .site-header.center .navbar-nav>li { display: block; float: left; width: 100%; } .header-nav .nav>li.has-mega-menu.demos .mega-menu { max-width: 100%; } .header-nav .nav>li .mega-menu { border: 0; } .site-header.center .is-fixed .header-nav .nav { height: auto; } .header-nav .nav>li .mega-menu>li { padding: 10px 0; } .header-nav .nav>li .sub-menu, .header-nav .nav>li .mega-menu { border-radius: 0; } .header-nav .nav>li:hover>a:after, .header-nav .nav>li.active>a:after { content: none; } .header-nav .nav>li .sub-menu li a, .header-nav .nav>li .mega-menu>li ul a { padding: 2px 0 1px 15px; display: block; font-size: 15px; line-height: 30px; position: relative; } .header-nav .nav>li .sub-menu li a:after, .header-nav .nav>li .mega-menu li a:after, .header-nav .nav>li .mega-menu>li ul a:after { content: "\f105"; font-family: FontAwesome; width: auto; height: auto; background: transparent !important; top: 1px; color: #000; font-size: 16px; position: absolute; left: 0; font-weight: 700; } .header-nav .nav>li .sub-menu:after, .header-nav .nav>li .mega-menu:after { content: ""; } } @media only screen and (max-width: 767px) { .header-nav .logo-header>a { width: 100%; display: block; text-align: center; } } @media only screen and (max-width: 767px) { .site-header.center .logo-header img { height: 60px; margin-bottom: -30px; } .logo-header { height: 50px; } } .shop-cart .dropdown-menu.cart-list { box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.3); top: 35px; border: 0; right: 0; left: auto; width: 300px; border-top: 3px solid var(--color-primary); } .cart-list.dropdown-menu { width: 260px; margin-top: 30px; } .is-fixed .cart-list.dropdown-menu { margin-top: 18px; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .cart-item .media-body { position: relative; padding-left: 10px; } .header-nav .nav>li.demos { position: inherit; } .header-nav .nav>li.demos .mega-menu { max-width: 700px; width: 700px; left: auto; right: 0; } .header-nav .nav>li .mega-menu>li.header-add { padding: 18px 14px; } @media only screen and (max-width: 991px) { header .logo { display: block; padding: 4px 0; } .header-nav .nav>li.demos .mega-menu.left { width: 100%; max-width: 100%; } } @media only screen and (max-width: 767px) { .shop-cart .dropdown-menu.cart-list { left: auto; right: 0; } .cart-list.dropdown-menu, .is-fixed .cart-list.dropdown-menu { margin-top: 0; } } @media only screen and (max-width: 991px) { .header-nav { clear: both; margin: 0 -15px; border-bottom: 1px solid #E9E9E9; } .header-nav .nav { float: none; margin: 0; background: #fff; width: 100%; display: block; } .header-nav .nav>li { float: none; display: block; width: 100%; font-family: Roboto; padding: 0 25px 0 25px; } .header-nav .nav>li .sub-menu>li, .header-nav .nav>li .mega-menu>li { float: none; display: block; width: auto; } .header-nav .nav>li>a { display: block; position: relative; border: 0; padding: 8px 0; font-size: 18px; line-height: 30px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .header-nav .nav>li .mega-menu>li:after { display: none; } .header-nav .nav>li ul, .header-nav .nav>li .sub-menu, .header-nav .nav>li .mega-menu { display: none; position: static; visibility: visible; width: auto; background: #f6f6f6; box-shadow: none; } .header-nav .nav>li ul.mega-menu ul { display: none; } .header-nav .nav>li:hover>ul, .header-nav .nav>li:hover .sub-menu, .header-nav .nav>li:hover .mega-menu, .header-nav .nav>li .sub-menu li>.sub-menu { opacity: 1; visibility: visible; display: block; margin: 0; } .header-nav .nav>li ul.mega-menu li:hover ul { display: block; } /* Mobile Responsive */ .side-nav .nav.navbar-nav li a i.fa-chevron-down:before, .nav.navbar-nav li a i.fa-chevron-down:before { content: "\f105"; } .side-nav .nav.navbar-nav li.open a i.fa-chevron-down:before, .nav.navbar-nav li.open a i.fa-chevron-down:before { content: "\f107"; } .header-nav .nav>li ul, .header-nav .nav>li .sub-menu, .header-nav .nav>li .mega-menu { background: transparent; } .header-nav .nav>li .mega-menu { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .header-nav .nav>li>.sub-menu { border: 1px solid rgba(0, 0, 0, 0.1); padding: 10px 0; border-width: 0 0 1px 0; } .header-nav .nav>li>.sub-menu .sub-menu li a { padding: 2px 0 1px 30px; } .header-nav .nav>li>.sub-menu .sub-menu li a:hover { background-color: rgba(0, 0, 0, 0.1); } .header-nav .nav>li>.sub-menu .sub-menu li a:after { content: "\f111"; font-family: FontAwesome; width: auto; height: auto; background: transparent; top: 3px; color: #000; font-size: 5px; left: 15px; font-weight: 700; } .side-nav .nav.navbar-nav li a i.fa-chevron-down, .nav.navbar-nav li a i.fa-chevron-down, .nav.navbar-nav li a i.fa-angle-right { background-color: var(--color-primary); color: #ffffff; height: 30px; line-height: 30px; right: 0; text-align: center; width: 30px; z-index: 3; float: right; font-size: 20px; margin: 0; } .header-nav .nav>li .sub-menu li i.fa-angle-right:before { content: "\f105"; } .header-nav .nav>li .sub-menu li.open i.fa-angle-right:before { content: "\f107"; } .header-nav .nav>li .sub-menu .sub-menu, .header-nav .nav>li:hover .sub-menu .sub-menu, .header-nav .nav>li:hover .sub-menu, .header-nav .nav>li:hover .mega-menu { display: none; opacity: 1; margin-top: 0; } .header-nav .nav li .sub-menu .sub-menu { display: none; opacity: 1; margin-top: 0; } .header-nav .nav>li.open>.sub-menu .sub-menu { display: none; } .header-nav .nav>li.open>.sub-menu li.open .sub-menu, .header-nav .nav>li.open>.mega-menu, .header-nav .nav>li.open>.sub-menu, .header-nav .nav>li ul.mega-menu ul { display: block; opacity: 1; margin-top: 0; } .header-nav .nav>li ul.mega-menu {} .header-nav .nav>li.open>.sub-menu li.open>a>i, .header-nav .nav>li.open>a>i { background: #313444; } .header-nav .nav>li.open .sub-menu li.open>a>i { background: #fff; } .header-nav .nav>li .mega-menu>li { padding: 0; } .header-nav .nav>li .mega-menu>li>a { display: none; } .header-nav .nav .mega-menu a i { display: inline-block; float: none; margin-top: 0; } .header-nav .nav .open>a, .header-nav .nav .open>a:focus, .header-nav .nav .open>a:hover { background-color: inherit; border-color: #e9e9e9; } .header-nav .nav>li .mega-menu>li ul a:hover, .header-nav .nav>li .sub-menu li:hover>a { background-color: transparent; text-decoration: none; } .header-nav.nav-dark.nav .open>a, .header-nav.nav-dark .nav .open>a:focus, .header-nav.nav-dark .nav .open>a:hover { border-color: rgba(0, 0, 0, 0.2); } .header-nav .nav>li .sub-menu li .fa { color: #000; display: block; float: right; font-size: 20px; opacity: 1; background: #fff; } } /*= nav dark version =*/ .nav-dark.header-nav .nav>li .sub-menu, .nav-dark.header-nav .nav>li .mega-menu { background-color: #232323; border: 1px solid rgba(0, 0, 0, 0.2); } .nav-dark.header-nav .nav>li .sub-menu li { border-bottom: 0px solid rgba(0, 0, 0, 0.2); } .nav-dark.header-nav .nav>li .sub-menu li a, .nav-dark.header-nav .nav>li .mega-menu>li ul a { color: rgba(255, 255, 255, 0.6); } .header-nav.nav-dark .nav>li .mega-menu>li>a { color: #fff; } .nav-dark.header-nav .nav>li .sub-menu li a:hover { background-color: rgba(255, 255, 255, 0.0); } .nav-dark.header-nav .nav>li .sub-menu li:hover>a, .nav-dark.header-nav .nav>li ul li a:hover, .nav-dark.header-nav .nav>li .mega-menu>li ul a:hover { background-color: rgba(255, 255, 255, 0.0); color: #fff !important; } .nav-dark.header-nav .nav>li .mega-menu>li:after { background-color: rgba(0, 0, 0, 0.2); } @media only screen and (max-width: 991px) { .nav-dark.header-nav .nav>li>a { color: #9d9d9d; } .nav-dark.header-nav { border-bottom: 1px solid rgba(0, 0, 0, 0.8); } .nav-dark.header-nav .nav { background-color: #202020; } .nav-dark.header-nav .nav>li>a { border-top: 0px solid rgba(0, 0, 0, 0.2); } [class*="bg-"] .nav-dark.header-nav .nav>li>a { color: #999; } [class*="bg-"] .nav-dark.header-nav .nav>li.active>a, [class*="bg-"] .nav-dark.header-nav .nav>li:hover>a { color: #EFBB20; } .nav-dark.header-nav .nav>li>a:hover, .nav-dark.header-nav .nav>li>a:active, .nav-dark.header-nav .nav>li>a:focus { background-color: #282828; color: #EFBB20; } .nav-dark.header-nav .nav>li ul, .nav-dark.header-nav .nav>li .sub-menu, .nav-dark.header-nav .nav>li .mega-menu { background-color: #282828; } } /*= when header is sticky =*/ .is-fixed .main-bar { position: fixed; top: 0; left: 0; } @media only screen and (max-width: 991px) {} /*= Header style designs strat =*/ /*header with bg primary color 1 */ [class*="bg-"] .header-nav .nav>li>a { color: #fff; } [class*="bg-"] .header-nav .nav>li.active>a, [class*="bg-"] .header-nav .nav>li.current-menu-item>a { color: #fff; } [class*="bg-"] .header-nav .nav>li>a:hover, [class*="bg-"] .header-nav .nav>li:hover>a { color: #fff; } [class*="bg-"] .navbar-toggler { border-color: #fff; } [class*="bg-"] .navbar-toggler span { background-color: #fff; } @media only screen and (max-width: 991px) { [class*="bg-"] .header-nav .nav>li>a { color: #555; } } /*header style 1 (default) */ /* Header Dark */ .header.dark, .header.dark .main-bar { background: #252525 } @media only screen and (min-width: 991px) { .header.header-transparent .header-nav .nav>li>a, .header.dark .header-nav .nav>li>a, .header.header-transparent .main-bar .header-nav .nav>li>a, .header.dark .main-bar .header-nav .nav>li>a { border: 1px solid rgba(255, 255, 255, 0.10); border-width: 0 0 0 1px; } .header.header-transparent .header-nav .nav>li:last-child>a, .header.dark .header-nav .nav>li:last-child>a { border-width: 0 1px 0 1px; } } .header.dark .s4p_ai-topbar-left ul li a, .header.dark .s4p_ai-topbar-right ul li a, .header.dark .header-nav .nav>li>a, .header.dark .extra-nav .site-button-link, .header.dark .navbar-toggler { color: #dfdfdf; } .header.dark .navbar-toggler span { background-color: #dfdfdf; } .header.dark .top-bar { background-color: #252525; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #dfdfdf; } .header-transparent+.page-content .s4p_ai-bnr-inr-md, .header-transparent+.page-content .s4p_ai-bnr-inr-sm { padding-top: 60px; } .header-transparent .header-nav .nav>li>a { color: #fff; } .header-transparent .s4p_ai-topbar-left ul li a, .header-transparent .header-nav .nav>li>a, .header-transparent .extra-nav .site-button-link, .header-transparent .navbar-toggler { color: #fff; } .header-transparent .navbar-toggler span { background-color: #fff; } .header-transparent .is-fixed .main-bar { position: fixed; } /* Overlay */ .header-transparent.overlay .top-bar, .header-transparent.overlay .main-bar { background-color: rgba(0, 0, 0, 0.5); } @media only screen and (max-width: 767px) { .fullwidth .container-fluid { padding-left: 15px; padding-right: 15px; } } .top-bar.bg-black { background-color: #000; color: #fff; } .s4p_ai-bnr-text .btn { margin-right: 30px; } @media only screen and (max-width: 1200px) { .s4p_ai-bnr-text strong { font-size: 60px; line-height: 60px; margin: 0 0 15px; } @media only screen and (max-width: 991px) { .s4p_ai-bnr-text strong { font-size: 50px; line-height: 50px; margin: 0 0 10px; } } @media only screen and (max-width: 767px) { .s4p_ai-bnr-text strong { font-size: 40px; line-height: 40px; margin: 0 0 0; } } @media only screen and (max-width: 680px) { .s4p_ai-bnr-text strong { font-size: 30px; line-height: 30px; margin: 0 0 0; } @media only screen and (max-width: 480px) { .s4p_ai-bnr-text strong { font-size: 20px; line-height: 20px; } /*== > inner page banner ==*/ .s4p_ai-bnr-inr { height: 100%; background-size: cover; background-position: center center; display: table; width: 100%; text-align: center; width: 380px; background-color: #1c1e25; position: fixed; right: 100px; top: 0; overflow: hidden; } .s4p_ai-bnr-inr.s4p_ai-bnr-inr-lg, .s4p_ai-bnr-inr.style-2.s4p_ai-bnr-inr-lg { height: 100vh; } .s4p_ai-bnr-inr.s4p_ai-bnr-inr-md, .s4p_ai-bnr-inr.style-2.s4p_ai-bnr-inr-md { height: 400px; } .s4p_ai-bnr-inr.s4p_ai-bnr-inr-sm, .s4p_ai-bnr-inr.style-2.s4p_ai-bnr-inr-sm { height: 300px; } .s4p_ai-bnr-inr .container { height: 100%; } .s4p_ai-bnr-inr-entry { display: flex; align-items: center; height: 100%; justify-content: center; writing-mode: vertical-lr; width: 100%; flex-direction: column; padding: 50px 0; } .s4p_ai-bnr-inr-entry.align-m { vertical-align: middle; } .s4p_ai-bnr-inr.style-2 { width: 100%; position: relative; right: unset; top: unset; height: 350px; padding: 0; display: flex; } .s4p_ai-bnr-inr.style-2 .s4p_ai-bnr-inr-entry { writing-mode: unset; } /* Banner Contant */ .s4p_ai-bnr-inr.banner-content h1 { font-weight: 500; } .s4p_ai-bnr-inr.banner-content p { font-size: 20px; font-weight: 100; letter-spacing: 1px; line-height: 36px; max-width: 750px; display: inline-block; } .s4p_ai-bnr-inr.banner-content .site-button { padding: 13px 35px; font-size: 16px; } @media only screen and (max-width: 1481px) { .s4p_ai-bnr-inr { width: 300px; } .s4p_ai-bnr-inr:before { font-size: 180px; line-height: 180px; } } /* Banner */ .s4p_ai-bnr-inr .breadcrumb-row { padding: 0; background-color: rgba(0, 0, 0, 0); } .s4p_ai-bnr-inr h1 { font-weight: 400; font-size: 70px; margin-bottom: 0; text-transform: uppercase; letter-spacing: 10px; margin: 0 5px; line-height: 1.2; } .s4p_ai-bnr-inr .breadcrumb-row ul li:after, .s4p_ai-bnr-inr .breadcrumb-row ul li:last-child { color: #ef5525; } .s4p_ai-bnr-inr:before { content: attr(data-content); font-family: 'Oswald', sans-serif; position: absolute; transform: translateY(-50%); top: 50%; font-size: 240px; white-space: nowrap; text-transform: uppercase; color: rgba(0, 0, 0, 0); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15); writing-mode: vertical-rl; left: 0; line-height: 220px; } .s4p_ai-bnr-inr.style-2 .breadcrumb-row ul li:after { top: 0; right: 0; } .s4p_ai-bnr-inr.style-2 .breadcrumb-row ul li { padding: 0 20px 0 0; margin-right: 10px; } .s4p_ai-bnr-inr.style-2 .breadcrumb-row ul li:last-child { margin-right: 0; padding-right: 0; } .s4p_ai-bnr-inr.style-2 .breadcrumb-row { padding: 12px 0 0; margin: 0; } .s4p_ai-bnr-inr.style-2:before { top: auto; font-size: 180px; line-height: 180px; writing-mode: unset; left: 0; bottom: 0; } @media only screen and (max-width: 767px) { .ele-bnr .bnr-title, .ele-bnr h1 a, .ele-bnr .breadcrumb-row h5 { display: none; } .ele-bnr .s4p_ai-bnr-inr-entry { text-align: center; } .s4p_ai-bnr-inr-entry h1 { margin-bottom: 10px; } .s4p_ai-bnr-inr { padding-bottom: 0; } .s4p_ai-bnr-inr .breadcrumb-row ul { display: block; float: none; width: 100%; text-align: center; } .s4p_ai-bnr-inr .breadcrumb-row ul li { font-size: 14px; } .s4p_ai-bnr-inr .s4p_ai-bnr-inr { height: 200px; } .s4p_ai-bnr-inr h1 { font-size: 36px; text-align: center; } .s4p_ai-bnr-inr.s4p_ai-bnr-inr-lg, .s4p_ai-bnr-inr.style-2.s4p_ai-bnr-inr-lg { height: 300px; } .s4p_ai-bnr-inr.s4p_ai-bnr-inr-md, .s4p_ai-bnr-inr.style-2.s4p_ai-bnr-inr-md { height: 250px; } .s4p_ai-bnr-inr.s4p_ai-bnr-inr-sm, .s4p_ai-bnr-inr.style-2.s4p_ai-bnr-inr-sm { height: 200px; } .s4p_ai-bnr-inr { height: 180px; } .s4p_ai-bnr-inr-entry { padding-top: 15px; padding-bottom: 15px; } .s4p_ai-bnr-inr.style-2 .breadcrumb-row { padding: 0; } } .navicon { width: 20px; height: 18px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } .navicon span { display: block; position: absolute; height: 2px; width: 100%; border-radius: 1px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .navicon span:nth-child(1) { top: 0px; } .navicon span:nth-child(2) { top: 7px; } .navicon span:nth-child(3) { top: 14px; } .navicon.open span:nth-child(1) { top: 7px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .navicon.open span:nth-child(2) { opacity: 0; left: -60px; } .navicon.open span:nth-child(3) { top: 7px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .tp-caption .text { color: #ffffff; font-size: 20px; line-height: 24px; width: 500px; } /*== >owl slider ==*/ /* next pre btn */ .owl-none .owl-nav { display: none; } .owl-theme .owl-nav, .owl-theme .owl-dots { margin-top: 30px; text-align: center; } .owl-theme .owl-nav .disabled { opacity: .5; cursor: default } /* owl dots button */ .owl-theme .owl-dots { text-align: left; } .owl-theme .owl-dots .owl-dot { display: inline-block; cursor: pointer; } .owl-theme .owl-dots .owl-dot span { width: 30px; height: 4px; margin: 0 1px; background: #d6d6d6; display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791 } /* owl dots style */ .owl-theme.dots-style-1 .owl-dots .owl-dot {} .owl-theme.dots-style-1 .owl-dots .owl-dot span, .owl-theme.dots-style-2 .owl-dots .owl-dot span { background: rgba(0, 0, 0, 0.1); width: 43px; height: 3px; } .owl-theme.dots-style-1 .owl-dots .owl-dot.active span, .owl-theme.dots-style-1 .owl-dots .owl-dot:hover span { background: #ef5525; } .owl-nav.disabled { display: none; } /*owl button top to center */ .owl-btn-top-c .owl-nav { text-align: center; } /*owl button top to left */ .owl-btn-top-l .owl-nav { text-align: left; } .owl-btn-top-l .owl-nav .owl-prev { margin-left: 0; } /*owl button top to right */ .owl-btn-top-r .owl-nav { text-align: right; } .owl-btn-top-r .owl-nav .owl-next { margin-right: 0; } /*owl button top to left & right */ .owl-btn-top-lr .owl-nav { text-align: left; } .owl-btn-top-lr .owl-nav .owl-next { margin-right: 0; float: right; } .owl-btn-full .owl-prev, .owl-btn-full .owl-next { padding: 40px 8px; } /*owl button < > CENTER to left & right */ .owl-btn-center-lr .owl-nav { margin: 0; } .owl-btn-center-lr+.owl-theme .owl-nav { margin: 0; } .owl-btn-center-lr .owl-nav .owl-prev, .owl-btn-center-lr .owl-nav .owl-next { position: absolute; left: 0; top: 50%; margin: 0; transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .owl-btn-center-lr .owl-nav .owl-next { left: auto; right: 0; } .owl-carousel .owl-item img { transform-style: inherit; } /* Owl Button Style */ .owl-btn-1 .owl-prev, .owl-btn-1 .owl-next, .owl-btn-2 .owl-prev, .owl-btn-2 .owl-next, .owl-btn-3 .owl-prev, .owl-btn-3 .owl-next { border-radius: 3px; height: 40px; line-height: 40px; margin: 0 10px !important; padding: 0; text-align: center; width: 40px; } .owl-btn-2 .owl-prev, .owl-btn-2 .owl-next, .owl-btn-3 .owl-prev, .owl-btn-3 .owl-next { margin: 0 -70px !important; } .owl-btn-3 .owl-prev, .owl-btn-3 .owl-next { background-color: rgba(0, 0, 0, 0); color: #000000; font-size: 35px; height: auto; width: auto; opacity: 0.2; } .owl-btn-3 .owl-prev:hover, .owl-btn-3 .owl-next:hover { background-color: rgba(0, 0, 0, 0); color: #000; opacity: 1; } .owl-btn-3.btn-white .owl-prev, .owl-btn-3.btn-white .owl-next { color: #fff; } .owl-btn-3.btn-white .owl-prev:hover, .owl-btn-3.btn-white .owl-next:hover { color: #fff; } .owl-btn-4 .owl-prev, .owl-btn-4 .owl-next { background: #ffffff none repeat scroll 0 0; border-radius: 30px; box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.5); color: #000000; font-size: 24px; height: 50px; line-height: 50px; margin: 0 -10px !important; overflow: hidden; padding: 0; width: 50px; opacity: 0.7; } .owl-btn-4 .owl-prev:hover, .owl-btn-4 .owl-next:hover { background: #ffffff none repeat scroll 0 0; color: #000; opacity: 1; } /* Thumb */ #sync2 .owl-item.active.current .item img { outline: 5px solid rgba(0, 0, 0, 0.2); outline-offset: -9px; } /* owl-dots */ .owl-dots-none .owl-dots { display: none; } .owl-dots-primary-full.owl-theme .owl-dots .owl-dot span, .owl-dots-black-full.owl-theme .owl-dots .owl-dot span, .owl-dots-white-full.owl-theme .owl-dots .owl-dot span, .owl-dots-primary-big.owl-theme .owl-dots .owl-dot span, .owl-dots-black-big.owl-theme .owl-dots .owl-dot span, .owl-dots-white-big.owl-theme .owl-dots .owl-dot span { opacity: 0.5; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; margin: 2px; } .owl-dots-primary-full.owl-theme .owl-dots .owl-dot span, .owl-dots-primary-big.owl-theme .owl-dots .owl-dot span { background-color: var(--color-primary); } .owl-dots-black-full.owl-theme .owl-dots .owl-dot span, .owl-dots-black-big.owl-theme .owl-dots .owl-dot span { background-color: #000; } .owl-dots-white-full.owl-theme .owl-dots .owl-dot span, .owl-dots-white-big.owl-theme .owl-dots .owl-dot span { background-color: #f5f5f5; } .owl-dots-primary-full.owl-theme .owl-dots .owl-dot.active span, .owl-dots-black-full.owl-theme .owl-dots .owl-dot.active span, .owl-dots-white-full.owl-theme .owl-dots .owl-dot.active span { opacity: 1; } .owl-dots-primary-big.owl-theme .owl-dots .owl-dot.active span, .owl-dots-black-big.owl-theme .owl-dots .owl-dot.active span, .owl-dots-white-big.owl-theme .owl-dots .owl-dot.active span { width: 14px; height: 14px; opacity: 1; margin: 0px 4px 2px 4px; } @media only screen and (max-width: 1200px) { .owl-btn-2 .owl-prev, .owl-btn-2 .owl-next, .owl-btn-3 .owl-prev, .owl-btn-3 .owl-next { margin: 0 10px !important; } } .text-white .s4p_ai-post-meta ul li, .text-white .s4p_ai-post-meta a, .text-white .s4p_ai-post-meta i { color: #fff; } .s4p_ai-post-meta.text-white i, .s4p_ai-post-meta.text-white ul li, .s4p_ai-post-meta.text-white ul li a { color: #fff; } .s4p_ai-info[class*="border-"] .post-title { margin-top: 0; } .text-white .post-title a { color: #fff; } .s4p_ai-info>div:last-child, .s4p_ai-info>p:last-child { margin-bottom: 0; } @media only screen and (max-width: 1200px) { .s4p_ai-post-meta .d-flex { display: block !important; } } .date-style-2 .post-date:after, .date-style-2 .post-date .fa, .date-style-3 .post-date:after, .date-style-3 .post-date .fa, .date-style-4 .post-date .fa { display: none; } .blog-effect1 .s4p_ai-info { background: #fff; } .share-btn ul li a.site-button { border-radius: 3px; width: 40px; line-height: 44px; height: 44px; display: block; color: #000; background: #E6E6E6; } .share-btn ul li a.site-button:hover { background: #D6D6D6; } .share-btn ul:hover li.share-button a.site-button { background: #A0A0A0; } .pagination .page-numbers { background-color: #fff; border: 1px solid #e0e0e0; color: #767676; padding: 9px 15px; font-weight: 600; font-size: 12px; display: block; float: left; margin-left: -1px; } .pagination .page-numbers.current, .pagination a.page-numbers:hover { background: #3396D1; color: #fff; } .pagination i { font-size: 24px; line-height: 45px; } .pagination li.active a { background-color: var(--primary) !important; color: #fff; border-color: var(--primary) !important; position: relative; } .pagination li.active a:after { content: ""; position: absolute; top: 2px; z-index: 1; border-right: 10px solid #fff; border-bottom: 10px solid transparent; right: 2px; } /*gallery css for blog post*/ .blog [class*="galleryid-"] { clear: both; margin: 0 auto; overflow: hidden } .gallery .gallery-item { float: left; list-style: none; margin: 0px 0 0; overflow: hidden; padding: 0px 0px 5px 15px; text-align: center } .gallery .gallery-caption { padding-top: 10px; font-size: 13px; } .gallery .gallery-item img { float: left; padding: 0 0px; width: 100%; border: none !important; } /*side bar*/ .side-bar .widget { margin-bottom: 50px; } @media only screen and (max-width: 991px) { .side-bar { margin-bottom: 40px; } } @media only screen and (max-width: 591px) { .side-bar .widget { margin-bottom: 40px; } } @media only screen and (max-width: 591px) { .blog-single .s4p_ai-post-tags { display: block; } } ol.comment-list li.comment { position: relative; padding: 0; } ol.comment-list li.comment .comment-body { position: relative; padding: 0px 30px 30px 85px; margin-bottom: 30px; position: relative; border: 0; border-bottom: 1px solid #e5e5e5; } ol.comment-list li.comment .comment-author { display: block; margin-bottom: 5px; } ol.comment-list li.comment .comment-author .avatar { position: absolute; top: 0; left: 0; width: 60px; height: 60px; border-radius: 100%; -webkit-border-radius: 100%; } ol.comment-list li.comment .comment-author .fn { display: inline-block; color: #1b1e25; font-size: 20px; font-weight: 600; font-style: normal; } ol.comment-list li.comment .comment-author .says { display: none; color: #999999; font-weight: 600; } ol.comment-list li.comment .comment-meta { color: #8d8d8d; text-transform: uppercase; margin-bottom: 10px; } ol.comment-list li.comment .comment-meta a { color: #989ca2; font-weight: 600; font-style: italic; } ol.comment-list li.comment p { line-height: 30px; font-size: 18px; font-weight: 500; margin-bottom: 0; font-style: italic; color: #747474; } ol.comment-list li.comment .reply a { position: absolute; top: 5px; right: 10px; font-size: 14px; font-weight: 600; padding: 4px 15px; border: 2px solid #e7e7e7; text-transform: uppercase; color: #1b1e25 !important; border-radius: 3px; } ol.comment-list li .children { list-style: none; margin-left: 80px; } ol.comment-list li .children li { padding: 0; } @media only screen and (max-width: 767px) { .comments-area .padding-30 { padding: 15px; } ol.comment-list li.comment .comment-body { margin-bottom: 30px; } ol.comment-list li.comment .comment-author .avatar { height: 60px; width: 60px; } ol.comment-list li .children { margin-left: 20px; } ol.comment-list li.comment .reply a { position: static; } } @media only screen and (max-width: 480px) { ol.comment-list li.comment .comment-author .avatar { top: 12px; width: 40px; height: 40px; } } ol.comment-list li.comment .comment-respond .comment-form p { padding: 0 15px !important; } @media only screen and (max-width: 767px) { .comments-area .comment-form p { width: 100%; float: none; margin-bottom: 20px; } .widget { margin-bottom: 40px; } .widget.bg-white { border: 1px solid #ebedf2; } .widget.border-0 ul li { border: 0 none; } .widget .widget-title, .widget .post-title { text-transform: uppercase; } .widget .post-title { line-height: 24px; margin-bottom: 4px; margin-top: 0; text-transform: capitalize; font-size: 16px; color: #000; font-weight: 500; } .widget_tag_cloud.radius a { border-radius: 40px; padding: 7px 10px; } @media only screen and (max-width: 767px) { .gallery-grid-8 li { width: 25%; } } /* Newslatter */ .widget-newslatter .news-box { position: relative; z-index: 1; overflow: hidden; } .widget-newslatter .form-control { background: #ffffff none repeat scroll 0 0; border: 1px solid #d0d0d0; height: 50px; margin-bottom: 15px; padding: 5px 20px; font-size: 16px; } .news-box form:after { color: #000000; content: "Newslatter"; font-size: 50px; font-weight: 700; opacity: 0.05; position: absolute; top: -40px; z-index: -1; } .news-box form { position: relative; } /* About us Widgets */ .widget-about .s4p_ai-title { margin: 15px 0 5px 0; color: #000; } /*--------------------------------------------------------------- /* ========================================================================== SECTION: PAGES ========================================================================== */ /*--------------------------------------------------------------- 27. PAGE-CONTENT ---------------------------------------------------------------*/ .page-wraper { background: #F8F8F8; min-height: 100vh; display: flex; flex-direction: column; } .section-full { position: relative; } /*= Section Head Part =*/ .section-head { margin-bottom: 50px; } .section-head.m-b0 { margin-bottom: 0; } .section-head.m-b15 { margin-bottom: 15px; } .section-head.m-b20 { margin-bottom: 20px; } .section-head.m-b30 { margin-bottom: 30px; } .section-head.m-b40 { margin-bottom: 40px; } .section-head { margin-bottom: 50px; } .section-head h1, .section-head h2, .section-head h3 { margin-top: 0; } .section-head p { font-size: 20px; color: #747474; line-height: 1.5; font-weight: 500; } .text-center.section-head p { margin-left: auto; margin-right: auto; max-width: 700px; } .text-white { color: #FFF; } .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p, .text-white .title-small { color: #FFF; } @media only screen and (max-width: 991px) { .page-content { margin-top: 0; } } @media only screen and (max-width: 767px) { .page-notfound strong i, .page-notfound strong { font-size: 120px; } } .s4p_ai-quik-search.On form { transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; max-width: 1200px; opacity: 1; } .s4p_ai-quik-search .form-control { padding: 15px 60px 15px 15px; width: 100%; height: 90px; border: none; background: none; color: #fff; font-size: 20px; border-bottom: 2px solid rgba(255, 255, 255, 0.2); } .s4p_ai-quik-search .form-control::-moz-placeholder { color: #fff; } .s4p_ai-quik-search .form-control:-moz-placeholder { color: #fff; } .s4p_ai-quik-search .form-control:-ms-input-placeholder { color: #fff; } .s4p_ai-quik-search .form-control::-webkit-input-placeholder { color: #fff; } /*==== LOADING ====*/ #loading-area { width: 100%; height: 100%; position: fixed; left: 0; top: 0; opacity: 1; z-index: 999999999; background-repeat: no-repeat, repeat; background-size: 150px, contain; background-position: center; background-image: none; display: flex; align-items: center; justify-content: center; background-color: #1c1e25; } /* #loading-area div{ flex:0 0 calc(100% / 6); width:calc(100% / 6); height:100%; background-color: #1c1e25; opacity:0.8; } #loading-area div:nth-child(2n+1){ background:#fff; } */ #loading-area p { margin: 0; font-size: 30vw; font-weight: 800; color: #fff; opacity: 0.02; } .content-inner { padding-top: 80px; padding-bottom: 50px; } .content-inner-1 { padding-top: 80px; padding-bottom: 0px; } /* sp */ .row.sp80, .sp80 { margin-left: -40px; margin-right: -40px; } .row.sp80 [class*="col-"], .sp80 [class*="col-"] { padding-left: 40px; padding-right: 40px; } .row.sp60, .sp60 { margin-left: -30px; margin-right: -30px; } .row.sp60 [class*="col-"], .sp60 [class*="col-"] { padding-left: 30px; padding-right: 30px; } .row.sp40, .sp40 { margin-left: -20px; margin-right: -20px; } .row.sp40 [class*="col-"], .sp40 [class*="col-"] { padding-left: 20px; padding-right: 20px; } .row.sp20, .sp20 { margin-left: -9px; margin-right: -9px; } .row.sp20 [class*="col-"], .sp20 [class*="col-"] { padding-left: 9px; padding-right: 9px; } .row.sp15, .sp15 { margin-left: -7.5px; margin-right: -7.5px; } .row.sp15 [class*="col-"], .sp15 [class*="col-"] { padding-left: 7.5px; padding-right: 7.5px; } .row.sp10, .sp10 { margin-left: -5px; margin-right: -5px; } .row.sp10 [class*="col-"], .sp10 [class*="col-"] { padding-left: 5px; padding-right: 5px; } .row.spno, .spno { margin-left: 0; margin-right: 0; } .row.spno [class*="col-"], .spno [class*="col-"] { padding-left: 0; padding-right: 0; } /* Google Recaptcha */ .g-recaptcha, #rc-imageselect { transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform-origin: 0 0; -o-transform-origin: 0 0; -moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; } @media screen and (max-width: 1280px) { #rc-imageselect, .g-recaptcha { transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -webkit-transform: scale(0.7); transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; } } @media screen and (max-width: 575px) { #rc-imageselect, .g-recaptcha { transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -webkit-transform: scale(0.7); transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; } } /* Animacja wjazdu strony */ .page-animate { opacity: 0; transform: translateY(50px); transition: opacity 0.7s cubic-bezier(.77, 0, .18, 1), transform 0.7s cubic-bezier(.77, 0, .18, 1); } .page-animate.page-animate-in { opacity: 1; transform: translateY(0); } /* Ukrycie treści przed załadowaniem JS */ body { opacity: 0; transition: opacity 0.3s ease; } body.content-loaded { opacity: 1; } /* Responsive Typography for Hero Section */ .banner-inner .title { font-size: 110px; line-height: 1.1; } @media (max-width: 1600px) { .banner-inner .title { font-size: 90px; } @media (max-width: 1366px) { .banner-inner .title { font-size: 70px; } @media (max-width: 1024px) { .banner-inner .title { font-size: 60px; } @media (max-width: 768px) { .banner-inner .title { font-size: 48px; } @media (max-width: 480px) { .banner-inner .title { font-size: 36px; } /* pagination style-1 */ 25 . PAGINATION ---------------------------------------------------------------* / . pagination-bx . pagination, . cvf-universal-pagination . pagination { margin: 0; } .pagination { padding: 10px 0; } .pagination>li:first-child>a, .pagination>li:first-child>span { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: 0; } .pagination>li:last-child>a, .pagination>li:last-child>span { border-bottom-right-radius: 0; border-top-right-radius: 0; } .pagination>li>a, .pagination>li>span { background-color: #fff; border: 1px solid #efefef; color: #000; padding: 10px 10px; font-weight: 400; font-size: 16px; display: inline-block; height: 45px; min-width: 45px; } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { border-color: transparent; color: #fff; background-color: var(--primary); } .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus { border-color: transparent; } .pagination>.previous>a, .pagination>.next>a { padding: 10px 15px; font-size: 16px; font-weight: 400; } .pagination-sm .pagination>li>a, .pagination-sm .pagination>li>span .pagination-sm .pagination>.previous>a, .pagination-sm .pagination>.next>a { font-size: 12px; padding: 6px 12px; } .pagination-lg .pagination>li>a, .pagination-lg .pagination>li>span .pagination-lg .pagination>.previous>a, .pagination-lg .pagination>.next>a { font-size: 18px; padding: 10px 20px; } /* pagination color */ .pagination-bx.primary {} .pagination-bx.primary .pagination>li>a, .pagination-bx.primary .pagination>li>span { background-color: var(--color-primary); color: #fff; margin: 0 1px; border: 0; } .pagination-bx.primary .pagination>li>a:hover, .pagination-bx.primary .pagination>li>span:hover, .pagination-bx.primary .pagination>li.active>span, .pagination-bx.primary .pagination>li.active>a { background-color: var(--color-hover); } .pagination-bx.rounded .pagination>li>a, .pagination-bx.rounded .pagination>li>span { border-radius: 30px; margin: 0 1px; } .pagination-bx.rounded-sm .pagination>li>a, .pagination-bx.rounded-sm .pagination>li>span { border-radius: 4px; margin: 0 1px; } .pagination-bx .pagination { width: 100%; } .pagination-bx.gray .pagination>li>a, .pagination-bx.gray .pagination>li>span { background-color: #f6f7f8; margin: 0 1px; border: 0; } .pagination-bx.gray .pagination>li>a:hover, .pagination-bx.gray .pagination>li>span:hover, .pagination-bx.gray .pagination>li.active>span, .pagination-bx.gray .pagination>li.active>a { background-color: var(--color-primary); box-shadow: 2px 2px 8px 0 rgba(26, 188, 156, 0.5); color: #fff; } @media only screen and (max-width: 991px) { .pagination-bx { margin-bottom: 30px; } } @media only screen and (max-width: 576px) { .pagination-lg .pagination>li>a, .pagination-lg .pagination>li>span .pagination-lg .pagination>.previous>a, .pagination-lg .pagination>.next>a { font-size: 16px; padding: 8px 15px; } } /*DataTable pagination */ .dataTables_paginate ul.pagination { margin: 0; } .dataTables_paginate .pagination>li { padding: 0; } .s4p_ai-bnr-inr.bg-pb, .bg-pb { background-position: bottom; background-size: cover; } .bootstrap-select .bs-searchbox .form-control { padding: 5px 10px; height: 30px; } .bootstrap-select .dropdown-menu>li>a { display: block; padding: 3px 20px; clear: both; font-weight: 400; color: #333333; white-space: nowrap; } .navbar-toggler { border: 0 solid #efbb20; border-radius: 0; padding: 10px 15px; font-size: 18px; font-weight: 700; color: #fff; background-color: transparent; border-color: transparent; outline: none; box-shadow: none; } .header.dark .s4p_ai-topbar-left ul li a, .header.dark .s4p_ai-topbar-right ul li a, .header.dark .header-nav .nav>li>a, .header.dark .extra-nav .site-button-link, .header.dark .navbar-toggler { color: #dfdfdf; } .subscribe-form input.radius-no { border-radius: 0 !important; } .subscribe-form .site-button { height: 50px; text-transform: uppercase; font-weight: 500; font-size: 14px; } .subscribe-form .input-group-btn { padding-left: 10px; } button.scroltop.radius { border-radius: 100%; } button.scroltop.white { background: #fff; color: var(--color-primary) !important; } @-webkit-keyframes spinAround { from { -webkit-transform: rotate(0deg) scale(1.2) } to { -webkit-transform: rotate(360deg) scale(1.2); } } @-moz-keyframes spinAround { from { -moz-transform: rotate(0deg) scale(1.2) } to { -moz-transform: rotate(360deg) scale(1.2); } } @keyframes spinAround { from { transform: rotate(0deg) scale(1.2) } to { transform: rotate(360deg) scale(1.2); } } .icon-bx-wraper:hover .icon-up img, .icon-bx-wraper:hover .icon-up i, .icon-up:hover i { -webkit-animation: toTopFromBottom 0.8s forwards; -moz-animation: toTopFromBottom 0.8s forwards; animation: toTopFromBottom 0.8s forwards; } @-webkit-keyframes toTopFromBottom { 49% { -webkit-transform: translateY(-100%); } 50% { opacity: 0; -webkit-transform: translateY(100%); } 51% { opacity: 1; } } @-moz-keyframes toTopFromBottom { 49% { -moz-transform: translateY(-100%); } 50% { opacity: 0; -moz-transform: translateY(100%); } 51% { opacity: 1; } } @keyframes toTopFromBottom { 49% { transform: translateY(-100%); } 50% { opacity: 0; transform: translateY(100%); } 51% { opacity: 1; } } .footer-white .form-control { border-color: rgba(0, 0, 0, 0.1); } .site-footer .icon-bx-wraper { overflow: hidden; } .site-footer .icon-content { overflow: unset; } .site-footer .s4p_ai-tilte { position: inherit; } .site-footer .icon-bx-wraper:hover .icon-sm i { transform: scale(1.5) rotate(20deg); -webkit-transform: scale(1.5) rotate(20deg); -moz-transform: scale(1.5) rotate(20deg); -o-transform: scale(1.5) rotate(20deg); -ms-transform: scale(1.5) rotate(20deg); } @media only screen and (max-width: 575px) { .footer-bottom .text-center, .footer-bottom .text-left, .footer-bottom .text-right { text-align: center !important; } }