/* ========================== Template: bitinvest - Bitcoin HTML5 Template Author: thewebmax team Version: 1.0 ========================== */ /*======================================= || CSS TABLE CONTENT || ======================================= ======================================= 1. GENERAL ======================================= ======================================= 2. HEADING & TITLE ======================================= ======================================= 3. TEXT & PARAGRAPH ======================================= ------------------------------------- 1. text align ------------------------------------- 2. text vertical align ------------------------------------- 3. text no line brack ------------------------------------- 4. text transform ------------------------------------- 5. text size ------------------------------------- 6. text bold ====================================== 4. LISTING STYLES ====================================== ------------------------------------- 1. listing before icon color css ------------------------------------- 2. listing before numbers ------------------------------------- ====================================== 5. BOX SPACING (Padding & Margin) ====================================== ------------------------------------- 1.1 padding (around) ------------------------------------- 1.2 Padding (top) ------------------------------------- 1.3 Padding (bottom) ------------------------------------- 1.4 Padding (left) ------------------------------------- 1.5 Padding (right) ------------------------------------- 1.6 Padding (left right) ------------------------------------- 1.7 Padding (top bottom) ------------------------------------- 2.1 margin (around) ------------------------------------- 2.2 marging (top) ------------------------------------- 2.3 marging (bottom) ------------------------------------- 2.4 marging (left) ------------------------------------- 2.5 marging (right) ------------------------------------- 2.6 marging (left right) ------------------------------------- 2.7 marging (top bottom) ------------------------------------- 2.8 colum gap less ------------------------------------- ====================================== 6. POSITIONS ( absolute , relative , statice & z-index) ====================================== ------------------------------------- 1. position ------------------------------------- 1.1 relative 1.2 absolute 1.3 static ------------------------------------- 2. z-index ------------------------------------- ====================================== 7. COLOR ====================================== ------------------------------------- 1. text ------------------------------------- 2. background color ------------------------------------- 3. background image ------------------------------------- ====================================== 8. OVERLAY ( transparient box style ) ====================================== use for box ------------------------------------- 1. show for text ------------------------------------- ====================================== 9. BOXES CSS ====================================== ------------------------------------- 1. box content ------------------------------------- 2. For icons with box ------------------------------------- 3. Border ------------------------------------- 4. For only icons ------------------------------------- 5. place icon with box ------------------------------------- 6. icon box left align ------------------------------------- 7. icon box right align ------------------------------------- 8. icon box center align ------------------------------------- 9. media with content box css ------------------------------------- 10. before & after for line css ------------------------------------- 11. for images ------------------------------------- ====================================== 10. IMAGES OVERLAY EFFECTS (overly animation on images) ====================================== ------------------------------------- 1. effect 1 ------------------------------------- 2. effect 2 ------------------------------------- 3. effect 3 ------------------------------------- 4. effect 4 ------------------------------------- 5. effect 5 ------------------------------------- 6. effect 6 ------------------------------------- 7. effect 7 ------------------------------------- 8. effect 8 ------------------------------------- 9. effect 9 ------------------------------------- 10. effect 10 ------------------------------------- ====================================== 11. shortcodeS ====================================== ------------------------------------- 1. Buttons ------------------------------------- 1.1 theme default button 1.2 button text uppercase 1.3 button size 1.4 button rounded 1.5 button colors 1.6 white 1.7 black 1.8 Gray 1.9 pink 1.10 Blue 1.11 Green 1.12 Orange 1.13 Red 1.14 Brown 1.15 Yellow 1.16 purple 1.17 Graphical 1.18 3D 1.19 Outline 1.20 Outline white 1.21 Outline black 1.22 Outline gray 1.23 Outline pink 1.24 Outline blue 1.25 Outline green 1.26 Outline orange 1.27 Outline red 1.28 Outline brown 1.29 Outline yellow 1.30 Outline purple 1.31 Outline hover 1.32 button text link 1.33 text link white 1.34 text link black 1.35 text link Gray 1.36 text link pink 1.37 text link Blue 1.38 text link Green 1.39 text link Orange 1.40 text link Red 1.41 text link Brown 1.42 text link Yellow 1.43 text link purple 1.44 app strore 1.45 filter buttons css 1.45(1) Masonry filter alignment [Left-Right-Center] 1.45(2) Masonry filter link style 1.45(3) Masonry filter button style 1.45(4) Masonry filter button outline style ------------------------------------- 2. Title separators ------------------------------------- Separator defualt Separator liner Separator square Separator icon ------------------------------------- 3. Deviders ------------------------------------- 4. TABS ------------------------------------- 4.1 tabs style 1 [ default ] tabs nav center 4.2 tabs bg [ tabs background ] 4.3 tabs bg [ tabs background ] 4.4 tabs bg & top border [ tabs background & top border in active ] 4.4 tabs style 2 [ content with border outer ] 4.5 tabs style 3 [ left-nav ] 4.6 tabs style 4 [ left-nav & content with border ] 4.7 tabs style 5 [ right-nav ] 4.8 tabs style 6 [ right-nav & content with border ] ------------------------------------- 5. Accordians ------------------------------------- Accodian open close indicator css 1. Accordion defult 2. Accordion outline 3. Accordion bg gray 4. Accordion bg primary 5. Accordion bg dark ------------------------------------- 6. Carousels ------------------------------------- 6.1 Default Carousel 6.2 Blog carousel empty media 6.3 Event carousel empty media 6.4 Client carousel 1 ------------------------------------- 7. Testimonials ------------------------------------- 7.1 testimonial with background image 7.2 testimonial 1 7.3 testimonial 2 7.4 testimonial 2 with background image 7.5 testimonial 3 7.6 testimonial 4 ------------------------------------- 8. Pricing table ------------------------------------- 8.1 Pricing table 8.2 pricing table style 2 ------------------------------------- 9. Alert box ------------------------------------- 10. Image effects ------------------------------------- 10.1 image-opacity 10.2 image-zoom 10.3 image-zoom-slow 10.4 image-shrink 10.5 image-side-pan 10.6 image-vertical-pan 10.7 image-fade-in 10.8 image-fade-out 10.9 image-rotate 10.10 image-sepia 10.11 image-blurr 10.12 image-blurr-invert 10.13 image off color 10.14 image on color ------------------------------------- 11. Modal pop ------------------------------------- 12. Social icons ------------------------------------- 12.1 social icon default 12.2 social icon with border 12.3 social icon dark 12.4 social share icon style 1 ------------------------------------- 13. Breadcrumb ------------------------------------- 13.1 breadcrumb-row-1 13.2 Breadcrumb-1 13.3 Breadcrumb-2 13.4 breadcrumb-3 ------------------------------------- 14. Google map ------------------------------------- 15. Progress Bar ------------------------------------- 16. Countdown clock ------------------------------------- 17. Form elements ------------------------------------- 17.1 input group 17.2 select box 17.3 radio & checkbox 17.4 Browse Button css 17.5 touchspin input type number 17.6 rating star 17.7 simple rating list 17.8 validation symbol 17.9 error for select box 17.10 succes for select box 17.11 textarea 17.11(1) resize-vertical 17.11(2) resize-horizontal 17.11(3) resize-none ------------------------------------- 18. Loading ------------------------------------- 18.1 loading - 1 18.2 loading - 2 ------------------------------------- 19. Widgets ------------------------------------- 19.1 widget listing 19.2 widget search custom 19.3 widget search wp-default 19.4 widget recent-posts 19.5 widget recent-comment 19.6 widget meta 19.7 widget calender 19.8 widget tags-list 19.9 widget archive 19.10 widget text 19.11 widget categories 19.12 widget RSS 19.13 widget get in tuch 19.14 widget gallery 19.15 widget Categories Dropdown ------------------------------------- 20. Table ------------------------------------- 21. Video ------------------------------------- 22. Icons ------------------------------------- 23. Call to action ------------------------------------- ====================================== 12. WP DEFAULT ====================================== ====================================== 13. BLOG ====================================== ------------------------------------- 1. post date syle css ------------------------------------- 2. post without media ------------------------------------- if no image with blog post ------------------------------------- 3. if no image with blog post ------------------------------------- 4. blog post half image ------------------------------------- 5. Blog paging Next & Prev css ------------------------------------- 6. Post navigation ------------------------------------- 7. post pagination ------------------------------------- 7.1 Sticky Post ------------------------------------- 8. Post password form ------------------------------------- 9. gallery css for blog post ------------------------------------- 10. side bar ------------------------------------- 11. Blog single ------------------------------------- 12. comment list ------------------------------------- 13. comment form ------------------------------------- ====================================== 14. HEADER (top part of page) ====================================== 1. header full screen ------------------------------------- 2. without top bar ------------------------------------- 3. map page header ------------------------------------- 4. Skew header block ------------------------------------- logo with boxed view logo with boxed view ====================================== 15. PAGE TOP BAR (left & right content) ====================================== 1. eamil-phone (left) ------------------------------------- 2. social-links (right) ------------------------------------- 3. language-list () ====================================== 16. LOGO ( company identify symbol ) ====================================== 1. logo for header ------------------------------------- 2. when header is sticky ====================================== 17. MAIN BAR ( place logo & main-navigation ) ====================================== main bar with box view ------------------------------------- 1. Top Part Search Bar ====================================== 18. NAVIGATIONS ====================================== ------------------------------------- 1. mena-menu ------------------------------------- 2. nav dark version ------------------------------------- 3. when header is sticky ------------------------------------- 4. when header is sticky ------------------------------------- 5. header full width ------------------------------------- 6. header with bg primary color 1 ------------------------------------- 7. header style 2 (center content) ------------------------------------- 8. header style 3 (header transperent) ------------------------------------- header 3 fixed ------------------------------------- 9. header style 4 (header white overlay) ------------------------------------- header 4 fixed ------------------------------------- 10. header style 5 (header black overlay) ------------------------------------- header 5 fixed ====================================== 19. BANNER ====================================== ------------------------------------- 1. inner page banner ------------------------------------- ====================================== 20. SLIDER ====================================== ------------------------------------- 1. owl slider ------------------------------------- 1.1 next pre btn 1.2 owl dots button 1.3 owl button top to center 1.4 owl button top to left 1.5 owl button top to right 1.6 owl button bottom to center [it is default position ] 1.7 owl button bottom to left 1.8 owl button bottom to right 1.9 owl button vertical to center 1.10 owl button show on hover 1.11 owl slider button 1.12 owl dots nav position ====================================== 21. PAGINATION ====================================== 1. pagination style-1 2. pagination style-2 3. Pager ====================================== 22. FOOTER ====================================== ------------------------------------- 1. footer fixed on bottom css ------------------------------------- 1.1 footer fixed with fullscreen view 1.2 footer fixed with boxed view 1.3 Constrot strip line ------------------------------------- 2. Footer dark version css ------------------------------------- 3. Footer light version css ------------------------------------- 4. widget li in footer ------------------------------------- 5. widget Getintuch ------------------------------------- 6. scroll top btn css ------------------------------------- ====================================== 23. PAGE-CONTENT ====================================== ------------------------------------- 1. Section Head Part ------------------------------------- 2. Section Content Part ------------------------------------- ====================================== 24. AFTER-LOGIN-CONTENT ====================================== ------------------------------------- 1. calender css ------------------------------------- 2. Contact us page ------------------------------------- 3.page not found ------------------------------------- ====================================== 25. THEMEFOREST REQUIRED CLASSES ====================================== ------------------------------------- 1. Text meant only for screen readers ------------------------------------- ====================================== 26. HOME PAGE VERSION-1 ====================================== ====================================== 27. BOX MAX-WIDTH css ( ) ====================================== ====================================== 28. SHOP & PRODUCT DETAIL (Woocommerce) ====================================== ------------------------------------- 1. Product Box ------------------------------------- 2. Product Detail ------------------------------------- 3. Product Review ------------------------------------- ====================================== 29. content show on image box () ====================================== info box show ====================================== 30. Customize Grouping css ====================================== ------------------------------------- 1.set-radius ------------------------------------- 2. transition ------------------------------------- 3. float-clearfix ------------------------------------- ====================================== 32. Inner pages ====================================== ------------------------------------- 1. Contact us ------------------------------------- 1.1 Contact us 1 ------------------------------------- 2. Out Team ------------------------------------- 2.1. Out Team one 2.2. Out Team two 2.3. Out Team three 2.4. Out Team four 2.5. Out Team five ------------------------------------- 3. Social-new block ------------------------------------- 4. portfolio block ------------------------------------- 5. services ------------------------------------- 6. latest project ------------------------------------- ====================================== 33. Box-corner ====================================== corner-sm ====================================== 34. Menu list block ====================================== ====================================== 35. Company Detail skew ====================================== ====================================== 36. Clients ====================================== ====================================== 37. FAQ ====================================== ====================================== 38. Cart ====================================== ====================================== 39. Product ====================================== ====================================== 40. Glass reflection ====================================== ====================================== 40. Glass reflection ====================================== ====================================== 53. Background Effects ====================================== */ /*====================================== 1. GENERAL ======================================*/ body { background-color: #FFF; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 400; color: #767676; padding: 0; margin: 0; overflow-x: hidden; } @media (min-width: 1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1170px; } } a { color: #ec5598; outline: 0 none; text-decoration: none; } a:hover, a:focus { text-decoration: none; outline: 0 none; } a:active, a:hover, a:focus { color: #333333; } p a { color: #333333; } img { border-style: none; height: auto; max-width: 100%; vertical-align: middle; } hr { clear: both; } section, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, summary { display: block; } .inline-block { display: inline-block; } .display-block { display: block; } address { font-style: italic; } table { background-color: transparent; width: 100%; } table thead th { color: #333; } table td { padding: 15px 10px; } @media only screen and ( max-width:360px) { table td { word-break: break-all; } } p, address, pre, hr, ul, ol, dl, dd, table { margin-bottom: 24px; } .overflow-hide { overflow: hidden; } .overflow-auto { overflow: auto; } .clear { clear: both; } .pull-none { float: none; } ::selection { background: #ec5598; color: #fff; } ::-moz-selection { background: #ec5598; color: #fff; } ::-webkit-selection { background: #ec5598; color: #fff; } @media only screen and (max-width:600px) { .col-xs-100pc { width: 100%; } } /*====================================== 2. HEADING & TITLE ======================================*/ h1, h2, h3, h4, h5, h6 { margin-bottom: 24px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #3d474a; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #ec5598; } h1 { font-size: 36px; line-height: 42px; color: #171f2c; font-weight: normal; } h2 { font-size: 32px; line-height: 38px; color: #171f2c; font-weight: normal; } h3 { font-size: 24px; line-height: 30px; color: #171f2c; font-weight: normal; margin-bottom: 20px; } h4 { font-size: 18px; line-height: 22px; color: #171f2c; font-weight: normal; margin-bottom: 15px; } h5 { font-size: 16px; line-height: 22px; color: #171f2c; font-weight: normal; margin-bottom: 10px; } h6 { font-size: 14px; line-height: 18px; color: #171f2c; font-weight: normal; margin-bottom: 10px; } /*====================================== 3. TEXT & PARAGRAPH ======================================*/ p { line-height: 24px; margin-bottom: 24px; } strong { font-weight: 600; } /*------------------------------------- 1. text align ------------------------------------ */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify } /*------------------------------------- 2. text vertical align ------------------------------------ */ .v-align-t { vertical-align: top; } .v-align-m { vertical-align: middle; } .v-align-b { vertical-align: bottom; } /*------------------------------------- 3. text no line brack ------------------------------------ */ .text-nowrap { white-space: nowrap } /*------------------------------------- 4. text transform ------------------------------------ */ .text-lowercase { text-transform: lowercase } .text-uppercase { text-transform: uppercase } .text-capitalize { text-transform: capitalize } /*------------------------------------- 5. text size ------------------------------------ */ .font-12 { font-size: 12px; line-height: 18px; } .font-14 { font-size: 14px; line-height: 20px; } .font-16 { font-size: 16px; line-height: 22px; } .font-18 { font-size: 18px; line-height: 24px; } .font-20 { font-size: 20px; line-height: 26px; } .font-22 { font-size: 22px; line-height: 28px; } .font-24 { font-size: 24px; line-height: 30px; } .font-26 { font-size: 26px; line-height: 32px; } .font-50 { font-size: 50px; line-height: 56px; } .font-60 { font-size: 60px; line-height: 66px; } .font-70 { font-size: 70px; line-height: 76px; } .font-80 { font-size: 80 px; line-height: 86px; } /*------------------------------------- 6. text bold ------------------------------------ */ .font-weight-300 { font-weight: 300; } .font-weight-400 { font-weight: 400; } .font-weight-500 { font-weight: 500; } .font-weight-600 { font-weight: 600; } .font-weight-700 { font-weight: 700; } .font-weight-800 { font-weight: 800; } .font-weight-900 { font-weight: 900; } /*====================================== 4. LISTING STYLES ======================================*/ dl, ul, ol { list-style-position: outside; padding: 0; } ul, ol { margin-bottom: 24px; } ul li, ol li { padding: 0; } dl { margin-left: 0; margin-bottom: 30px; } dl dd { margin-bottom: 10px; } .list-simple li { margin-bottom: 10px; } .list-simple li ul { margin-left: 15px; margin-top: 10px; } .list-simple.list-unstyled li ul { margin-left: 30px; margin-top: 10px; } .list-circle, .list-angle-right, .list-arrow, .list-check, .list-checked, .list-check-circle, .list-chevron-circle, .list-arrow-circle, .list-times-circle { margin: 0 0 20px 0; padding: 0; list-style: none; } .list-circle li, .list-angle-right li, .list-arrow li, .list-check li, .list-checked li, .list-check-circle li, .list-chevron-circle li, .list-arrow-circle li, .list-times-circle li { padding: 5px 5px 5px 20px; position: relative; } .list-circle li:before, .list-angle-right li:before, .list-arrow li:before, .list-check li:before, .list-checked li:before, .list-check-circle li:before, .list-chevron-circle li:before, .list-arrow-circle li:before, .list-times-circle li:before { font-family: "FontAwesome"; position: absolute; left: 0; top: 6px; display: block; font-size: 15px; color: #777; } .list-circle li:before { top: 10px; font-size: 10px; } .list-circle li:before { content: "\f111"; } .list-angle-right li:before { content: "\f105"; } .list-arrow li:before { content: "\f0da"; } .list-check li:before { content: "\f00c"; } .list-checked li:before { content: "\f046"; } .list-check-circle li:before { content: "\f058"; } .list-chevron-circle li:before { content: "\f138"; } .list-arrow-circle li:before { content: "\f0a9"; } .list-times-circle li:before { content: "\f057"; } /*------------------------------------- 1. listing before icon color css -------------------------------------*/ ul.primary li:before { color: #ffbc13; } ul.secondry li:before { color: #77C04B; } ul.black li:before { color: #000; } ul.white li:before { color: #fff; } ul.orange li:before { color: #FF6600; } ul.green li:before { color: #00CC00; } ul.red li:before { color: #FF3737; } dl.no-margin, ul.no-margin, ol.no-margin { margin: 0px !important; list-style: none; } /*------------------------------------- 2. listing before numbers -------------------------------------*/ ol.list-num-count { counter-reset: li; padding-left: 0; } ol.list-num-count>li { position: relative; margin: 0 0 6px 30px; padding: 4px 8px; list-style: none; } ol.list-num-count>li:before { content: counter(li, decimal); counter-increment: li; position: absolute; top: 0; left: -28px; width: 28px; height: 28px; padding: 5px; color: #fff; background: #FFBC13; font-weight: bold; text-align: center; font-size: 12px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } ol.list-num-count.lower-alpha>li:before { content: counter(li, lower-alpha); } ol.list-num-count.upper-alpha>li:before { content: counter(li, upper-alpha); } ol.list-num-count.list-outline>li:before { border: 1px solid #EC5598; background-color: transparent; color: #787878; } ol.list-num-count.list-outline-none>li:before { background-color: transparent; color: #787878; } /*====================================== 5. BOX SPACING (Padding & Margin) ======================================*/ /*------------------------------------- 1.1 padding (around) -------------------------------------*/ .p-a0 { padding: 0; } .p-a5 { padding: 5px; } .p-a10 { padding: 10px; } .p-a15 { padding: 15px; } .p-a20 { padding: 20px; } .p-a25 { padding: 25px; } .p-a30 { padding: 30px; } .p-a40 { padding: 40px; } .p-a50 { padding: 50px; } .p-a60 { padding: 60px; } .p-a70 { padding: 70px; } .p-a80 { padding: 80px; } .p-a90 { padding: 90px; } .p-a100 { padding: 100px; } .p-a110 { padding: 110px; } .p-a120 { padding: 120px; } .p-a130 { padding: 130px; } .p-a140 { padding: 140px; } .p-a150 { padding: 150px; } /*------------------------------------- 1.2 Padding (top) -------------------------------------*/ .p-t0 { padding-top: 0; } .p-t5 { padding-top: 5px; } .p-t10 { padding-top: 10px; } .p-t15 { padding-top: 15px; } .p-t20 { padding-top: 20px; } .p-t30 { padding-top: 30px; } .p-t40 { padding-top: 40px; } .p-t50 { padding-top: 50px; } .p-t60 { padding-top: 60px; } .p-t70 { padding-top: 70px; } .p-t80 { padding-top: 80px; } .p-t90 { padding-top: 90px; } .p-t100 { padding-top: 100px; } .p-t110 { padding-top: 110px; } .p-t120 { padding-top: 120px; } .p-t130 { padding-top: 130px; } .p-t140 { padding-top: 140px; } .p-t150 { padding-top: 150px; } /*------------------------------------- 1.3 Padding (bottom) -------------------------------------*/ .p-b0 { padding-bottom: 0; } .p-b5 { padding-bottom: 5px; } .p-b10 { padding-bottom: 10px; } .p-b15 { padding-bottom: 15px; } .p-b20 { padding-bottom: 20px; } .p-b30 { padding-bottom: 30px; } .p-b40 { padding-bottom: 40px; } .p-b50 { padding-bottom: 50px; } .p-b60 { padding-bottom: 60px; } .p-b70 { padding-bottom: 70px; } .p-b80 { padding-bottom: 80px; } .p-b90 { padding-bottom: 90px; } .p-b100 { padding-bottom: 100px; } .p-b110 { padding-bottom: 110px; } .p-b120 { padding-bottom: 120px; } .p-b130 { padding-bottom: 130px; } .p-b140 { padding-bottom: 140px; } .p-b150 { padding-bottom: 150px; } /*------------------------------------- 1.4 Padding (left) -------------------------------------*/ .p-l0 { padding-left: 0; } .p-l5 { padding-left: 5px; } .p-l10 { padding-left: 10px; } .p-l15 { padding-left: 15px; } .p-l20 { padding-left: 20px; } .p-l30 { padding-left: 30px; } .p-l40 { padding-left: 40px; } .p-l50 { padding-left: 50px; } .p-l60 { padding-left: 60px; } .p-l70 { padding-left: 70px; } .p-l80 { padding-left: 80px; } .p-l90 { padding-left: 90px; } .p-l100 { padding-left: 100px; } .p-l110 { padding-left: 110px; } .p-l120 { padding-left: 120px; } .p-l130 { padding-left: 130px; } .p-l140 { padding-left: 140px; } .p-l150 { padding-left: 150px; } /*------------------------------------- 1.5 Padding (right) -------------------------------------*/ .p-r0 { padding-right: 0; } .p-r5 { padding-right: 5px; } .p-r10 { padding-right: 10px; } .p-r15 { padding-right: 15px; } .p-r20 { padding-right: 20px; } .p-r30 { padding-right: 30px; } .p-r40 { padding-right: 40px; } .p-r50 { padding-right: 50px; } .p-r60 { padding-right: 60px; } .p-r70 { padding-right: 70px; } .p-r80 { padding-right: 80px; } .p-r90 { padding-right: 90px; } .p-r100 { padding-right: 100px; } .p-r110 { padding-right: 110px; } .p-r120 { padding-right: 120px; } .p-r130 { padding-right: 130px; } .p-r140 { padding-right: 140px; } .p-r150 { padding-right: 150px; } /*------------------------------------- 1.6 Padding (left right) -------------------------------------*/ .p-lr0 { padding-left: 0; padding-right: 0; } .p-lr5 { padding-left: 5px; padding-right: 5px; } .p-lr10 { padding-left: 10px; padding-right: 10px; } .p-lr15 { padding-left: 15px; padding-right: 15px; } .p-lr20 { padding-left: 20px; padding-right: 20px; } .p-lr30 { padding-left: 30px; padding-right: 30px; } .p-lr40 { padding-left: 40px; padding-right: 40px; } .p-lr50 { padding-left: 50px; padding-right: 50px; } .p-lr60 { padding-left: 60px; padding-right: 60px; } .p-lr70 { padding-left: 70px; padding-right: 70px; } .p-lr80 { padding-left: 80px; padding-right: 80px; } .p-lr90 { padding-left: 90px; padding-right: 90px; } .p-lr100 { padding-left: 100px; padding-right: 100px; } .p-lr120 { padding-left: 120px; padding-right: 120px; } .p-lr150 { padding-left: 150px; padding-right: 150px; } /*------------------------------------- 1.7 Padding (top bottom) -------------------------------------*/ .p-tb0 { padding-bottom: 0; padding-top: 0; } .p-tb5 { padding-bottom: 5px; padding-top: 5px; } .p-tb10 { padding-bottom: 10px; padding-top: 10px; } .p-tb15 { padding-bottom: 15px; padding-top: 15px; } .p-tb20 { padding-bottom: 20px; padding-top: 20px; } .p-tb30 { padding-bottom: 30px; padding-top: 30px; } .p-tb40 { padding-bottom: 40px; padding-top: 40px; } .p-tb50 { padding-bottom: 50px; padding-top: 50px; } .p-tb60 { padding-bottom: 60px; padding-top: 60px; } .p-tb70 { padding-bottom: 70px; padding-top: 70px; } .p-tb80 { padding-bottom: 80px; padding-top: 80px; } .p-tb90 { padding-bottom: 90px; padding-top: 90px; } .p-tb100 { padding-bottom: 100px; padding-top: 100px; } .p-tb120 { padding-bottom: 120px; padding-top: 120px; } .p-tb150 { padding-bottom: 150px; padding-top: 150px; } /*------------------------------------- 2.1 margin (around) -------------------------------------*/ .m-a-1 { margin: -1px } .m-a0 { margin: 0; } .m-a5 { margin: 5px; } .m-a10 { margin: 10px; } .m-a15 { margin: 15px; } .m-a20 { margin: 20px; } .m-a30 { margin: 30px; } .m-a40 { margin: 40px; } .m-a50 { margin: 50px; } .m-a60 { margin: 60px; } .m-a70 { margin: 70px; } .m-a80 { margin: 80px; } .m-a90 { margin: 90px; } .m-a100 { margin: 100px; } .m-a110 { margin: 110px; } .m-a120 { margin: 120px; } .m-a130 { margin: 130px; } .m-a140 { margin: 140px; } .m-a150 { margin: 150px; } /*------------------------------------- 2.2 marging (top) -------------------------------------*/ .m-t0 { margin-top: 0; } .m-t5 { margin-top: 5px; } .m-t10 { margin-top: 10px; } .m-t15 { margin-top: 15px; } .m-t20 { margin-top: 20px; } .m-t30 { margin-top: 30px; } .m-t40 { margin-top: 40px; } .m-t50 { margin-top: 50px; } .m-t60 { margin-top: 60px; } .m-t70 { margin-top: 70px; } .m-t80 { margin-top: 80px; } .m-t90 { margin-top: 90px; } .m-t100 { margin-top: 100px; } .m-t110 { margin-top: 110px; } .m-t120 { margin-top: 120px; } .m-t130 { margin-top: 130px; } .m-t140 { margin-top: 140px; } .m-t150 { margin-top: 150px; } /*------------------------------------- 2.3 marging (bottom) -------------------------------------*/ .m-b0 { margin-bottom: 0; } .m-b5 { margin-bottom: 5px; } .m-b10 { margin-bottom: 10px; } .m-b15 { margin-bottom: 15px; } .m-b20 { margin-bottom: 20px; } .m-b30 { margin-bottom: 30px; } .m-b40 { margin-bottom: 40px; } .m-b50 { margin-bottom: 50px; } .m-b60 { margin-bottom: 60px; } .m-b70 { margin-bottom: 70px; } .m-b80 { margin-bottom: 80px; } .m-b90 { margin-bottom: 90px; } .m-b100 { margin-bottom: 100px; } .m-b110 { margin-bottom: 110px; } .m-b120 { margin-bottom: 120px; } .m-b130 { margin-bottom: 130px; } .m-b140 { margin-bottom: 140px; } .m-b150 { margin-bottom: 150px; } /*------------------------------------- 2.4 marging (left) -------------------------------------*/ .m-l0 { margin-left: 0; } .m-l5 { margin-left: 5px; } .m-l10 { margin-left: 10px; } .m-l15 { margin-left: 15px; } .m-l20 { margin-left: 20px; } .m-l30 { margin-left: 30px; } .m-l40 { margin-left: 40px; } .m-l50 { margin-left: 50px; } .m-l60 { margin-left: 60px; } .m-l70 { margin-left: 70px; } .m-l80 { margin-left: 80px; } .m-l90 { margin-left: 90px; } .m-l100 { margin-left: 100px; } .m-l110 { margin-left: 110px; } .m-l120 { margin-left: 120px; } .m-l130 { margin-left: 130px; } .m-l140 { margin-left: 140px; } .m-l150 { margin-left: 150px; } /*------------------------------------- 2.5 marging (right) -------------------------------------*/ .m-r0 { margin-right: 0; } .m-r5 { margin-right: 5px; } .m-r10 { margin-right: 10px; } .m-r15 { margin-right: 15px; } .m-r20 { margin-right: 20px; } .m-r30 { margin-right: 30px; } .m-r40 { margin-right: 40px; } .m-r50 { margin-right: 50px; } .m-r60 { margin-right: 60px; } .m-r70 { margin-right: 70px; } .m-r80 { margin-right: 80px; } .m-r90 { margin-right: 90px; } .m-r100 { margin-right: 100px; } .m-r110 { margin-right: 110px; } .m-r120 { margin-right: 120px; } .m-r130 { margin-right: 130px; } .m-r140 { margin-right: 140px; } .m-r150 { margin-right: 150px; } /*------------------------------------- 2.6 marging (left right) -------------------------------------*/ .m-lr0 { margin-left: 0; margin-right: 0; } .m-lr5 { margin-left: 5px; margin-right: 5px; } .m-lr10 { margin-left: 10px; margin-right: 10px; } .m-lr15 { margin-left: 15px; margin-right: 15px; } .m-lr20 { margin-left: 20px; margin-right: 20px; } .m-lr30 { margin-left: 30px; margin-right: 30px; } .m-lr40 { margin-left: 40px; margin-right: 40px; } .m-lr50 { margin-left: 50px; margin-right: 50px; } .m-lr60 { margin-left: 60px; margin-right: 60px; } .m-lr70 { margin-left: 70px; margin-right: 70px; } .m-lr80 { margin-left: 80px; margin-right: 80px; } .m-lr90 { margin-left: 90px; margin-right: 90px; } .m-lr100 { margin-left: 100px; margin-right: 100px; } .m-lr120 { margin-left: 120px; margin-right: 120px; } .m-lr150 { margin-left: 150px; margin-right: 150px; } /*------------------------------------- 2.7 marging (top bottom) -------------------------------------*/ .m-tb0 { margin-bottom: 0; margin-top: 0; } .m-tb5 { margin-bottom: 5px; margin-top: 5px; } .m-tb10 { margin-bottom: 10px; margin-top: 10px; } .m-tb15 { margin-bottom: 15px; margin-top: 15px; } .m-tb20 { margin-bottom: 20px; margin-top: 20px; } .m-tb30 { margin-bottom: 30px; margin-top: 30px; } .m-tb40 { margin-bottom: 40px; margin-top: 40px; } .m-tb50 { margin-bottom: 50px; margin-top: 50px; } .m-tb60 { margin-bottom: 60px; margin-top: 60px; } .m-tb70 { margin-bottom: 70px; margin-top: 70px; } .m-tb80 { margin-bottom: 80px; margin-top: 80px; } .m-tb90 { margin-bottom: 90px; margin-top: 90px; } .m-tb100 { margin-bottom: 100px; margin-top: 100px; } .m-tb120 { margin-bottom: 120px; margin-top: 120px; } .m-tb150 { margin-bottom: 150px; margin-top: 150px; } /*------------------------------------- 2.8 colum gap less -------------------------------------*/ .no-col-gap [class*="col-xs-"], .no-col-gap [class*="col-sm-"], .no-col-gap [class*="col-md-"], .no-col-gap [class*="col-lg-"] { padding-left: 0; padding-right: 0; } /*====================================== 6. POSITIONS ( absolute , relative , statice & z-index) ======================================*/ /*------------------------------------- 1. position -------------------------------------*/ /*1.1 relative*/ .relative { position: relative; } /*1.2 absolute*/ .absolute { position: absolute; } /*1.3 static*/ .static { position: static; } /*------------------------------------- 2. z-index -------------------------------------*/ .z-index1 { z-index: 1; } .z-index2 { z-index: 2; } .z-index3 { z-index: 3; } .z-index4 { z-index: 4; } .z-index5 { z-index: 5; } .z-index6 { z-index: 6; } .z-index7 { z-index: 7; } .z-index8 { z-index: 8; } .z-index9 { z-index: 9; } .z-index10 { z-index: 10; } .z-index100 { z-index: 100; } .z-index999 { z-index: 999; } /*====================================== 7. COLOR ======================================*/ /*------------------------------------- 1. text -------------------------------------*/ .text-white { color: #fff; } .site-text-primary { color: #FFBC13; } .text-secondry { color: #1a1a1a; } .text-black { color: #000; } .text-gray { color: #f5f6f6; } .text-gray-dark { color: #b1b1b1; } .text-red { color: #99090A; } .text-green { color: #557131; } .text-yellow { color: #99910A; } .text-light-blue { color: #004F83; } /*------------------------------------- 2. background color -------------------------------------*/ .bg-transparent { background-color: transparent; } .site-bg-primary { background-color: #ec5598; } .bg-secondry { background-color: #171f2c; } .bg-white { background-color: #FFF; } .bg-black { background-color: #000; } .bg-black-light { background-color: #212121; } .bg-gray { background-color: #f5f6f6; } .bg-gray-light { background-color: #f1f1f1; } .bg-gray-dark { background-color: #d3d3d3; } .bg-red { background-color: #fb5455; } .bg-green { background-color: #a5de5c; } .bg-yellow { background-color: #fff000; } .bg-dark-blue { background-color: #161b23; } .bg-light-blue { background-color: #3097db; } /*------------------------------------- 3. background image -------------------------------------*/ .bg-parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } @media only screen and (max-width:768px) { .bg-parallax { background-attachment: fixed !important; background-position: center !important; background-repeat: no-repeat; background-size: cover; } } /*====================================== 8. OVERLAY ( transparient box style ) ======================================*/ .overlay-wraper { position: relative; } .overlay-main { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .opacity-01 { opacity: 0.1; } .opacity-02 { opacity: 0.2; } .opacity-03 { opacity: 0.3; } .opacity-04 { opacity: 0.4; } .opacity-05 { opacity: 0.5; } .opacity-06 { opacity: 0.6; } .opacity-07 { opacity: 0.7; } .opacity-08 { opacity: 0.8; } .opacity-09 { opacity: 0.9; } .overlay-light .overlay-main { opacity: 0.3; } .overlay-dark .overlay-main { opacity: 0.9; } .overlay-wraper>.container, .overlay-wraper>.container-fluid, .overlay-wraper>.wt-icon-box-wraper, .overlay-wraper>.wt-left-part, .overlay-wraper>.wt-right-part { position: relative; z-index: 1; } /*left right part css*/ .wt-left-part, .wt-right-part { width: 560px; } .wt-left-part { float: right; } @media only screen and (max-width:1200px) { .wt-left-part, .wt-right-part { width: 100%; } .wt-left-part { clear: both; float: none; padding-left: 30px; } .wt-right-part { padding-right: 30px; } } /*use for box*/ .overlay-bx { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; text-align: center; z-index: 1; opacity: 0; visibility: hidden; } .overlay-icon { list-style: none; width: 160px; height: 40px; position: absolute; left: 50%; top: 50%; margin: -20px -75px; z-index: 1 !important; } .overlay-icon a { display: inline-block; padding: 0; margin: 0 2px; border: 1px solid #fff; color: #fff; } .overlay-icon .wt-icon-box-xs { line-height: 40px; } .overlay-icon a:hover { color: #fff; background-color: #ffbc13; border: 1px solid transparent; } .overlay-bx:hover a>i, .wt-thum-bx:hover .overlay-bx a>i, .wt-box:hover .overlay-bx a>i { opacity: 1; visibility: visible; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .overlay-bx:hover, .wt-thum-bx:hover .overlay-bx, .wt-box:hover .overlay-bx, .ow-img:hover .overlay-bx, .ow-portfolio-img:hover .overlay-bx { opacity: 1; visibility: visible; } /*------------------------------------- 1. show for text -------------------------------------*/ .overlay-text { width: 100%; position: absolute; padding: 20px; color: #FFF; left: 0; bottom: 20px; } .wt-address-bx { display: table; text-align: left; padding: 20px 20px 20px 25px; width: 100%; height: 100%; position: relative; font-size: 14px; vertical-align: middle; font-weight: 600; } .wt-address-bx .fa { position: absolute; top: 22px; left: 0; font-size: 22px; } .col-md-3 .overlay-text { padding: 5px; } .col-md-4 .overlay-text { padding: 20px; } .wt-address2-bx { display: table; background: #eaeaea; padding: 5px 10px; margin-bottom: 10px } /*====================================== 9. BOXES CSS ======================================*/ .rounded-bx, .wt-box, .wt-icon-box, .wt-icon-box-small, .wt-thum-bx, .wt-post-thum { position: relative; } /*------------------------------------- 1. box content -------------------------------------*/ .wt-box { position: relative; } .wt-box.no-margin { margin-bottom: 0; } /*------------------------------------- 2. For icons with box -------------------------------------*/ .wt-icon-box-xld, .wt-icon-box-xl, .wt-icon-box-lg, .wt-icon-box-md, .wt-icon-box-sm, .wt-icon-box-xs { display: inline-block; text-align: center; } .wt-icon-box-xld { width: 180px; height: 180px; } .wt-icon-box-xl { width: 150px; height: 150px; } .wt-icon-box-lg { width: 120px; height: 120px; } .wt-icon-box-md { width: 100px; height: 100px; } .wt-icon-box-sm { width: 80px; height: 80px; } .wt-icon-box-xs { width: 40px; height: 40px; } .wt-icon-box-xld.radius, .wt-icon-box-xl.radius, .wt-icon-box-lg.radius, .wt-icon-box-md.radius, .wt-icon-box-sm.radius, .wt-icon-box-xs.radius { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .wt-icon-box-xld i, .wt-icon-box-xl i, .wt-icon-box-lg i, .wt-icon-box-md i, .wt-icon-box-sm i, .wt-icon-box-xs i { vertical-align: middle; } .wt-icon-box-xld i { font-size: 100px; } .wt-icon-box-xl i { font-size: 80px; } .wt-icon-box-lg i { font-size: 60px; } .wt-icon-box-md i { font-size: 45px; } .wt-icon-box-sm i { font-size: 30px; } .wt-icon-box-xs i { font-size: 20px; } .wt-icon-box-xld img, .wt-icon-box-xl img, .wt-icon-box-lg img, .wt-icon-box-md img, .wt-icon-box-sm img, .wt-icon-box-xs img { vertical-align: middle; max-width: 100%; width: auto; } .wt-icon-box-xld img { height: 90px; } .wt-icon-box-xl img { height: 80px; } .wt-icon-box-lg img { height: 55px; } .wt-icon-box-md img { height: 40px; } .wt-icon-box-sm img { height: 30px; } .wt-icon-box-xs img { height: 20px; } /*------------------------------------- 3. Border -------------------------------------*/ .bdr-white { border-color: #ffffff; } .bdr-black { border-color: #000000; } .bdr-primary { border-color: #ec5598; } .bdr-gray { border-color: #dddddd; } .bdr-gray-light { border-color: #eeeeee; } .bdr-gray-dark { border-color: #333333; } .bdr-1, .bdr-2, .bdr-3, .bdr-4, .bdr-5 { border-style: solid; } .bdr-dot-1, .bdr-dot-2, .bdr-dot-3, .bdr-dot-4, .bdr-dot-5 { border-style: dotted; } .bdr-dash-1, .bdr-dash-2, .bdr-dash-3, .bdr-dash-4, .bdr-dash-5 { border-style: dashed; } .bdr-1 { border-width: 1px; } .bdr-2 { border-width: 2px; } .bdr-3 { border-width: 3px; } .bdr-4 { border-width: 4px; } .bdr-5 { border-width: 5px; } /*------------------------------------- 4. For only icons -------------------------------------*/ .icon-xld, .icon-xl, .icon-lg, .icon-md, .icon-sm, .icon-xs { display: inline-block; text-align: center; } .icon-xld i, .icon-xld [class*="flaticon-"]::before, .icon-xld [class*="flaticon-"]::after { font-size: 100px; } .icon-xl i, .icon-xl [class*="flaticon-"]::before, .icon-xl [class*="flaticon-"]::after { font-size: 80px; } .icon-lg i, .icon-lg [class*="flaticon-"]::before, .icon-lg [class*="flaticon-"]::after { font-size: 60px; } .icon-md i, .icon-md [class*="flaticon-"]::before, .icon-md [class*="flaticon-"]::after { font-size: 45px; } .icon-sm i, .icon-sm [class*="flaticon-"]::before, .icon-sm [class*="flaticon-"]::after { font-size: 30px; } .icon-xs i, .icon-xs [class*="flaticon-"]::before, .icon-xs [class*="flaticon-"]::after { font-size: 20px; } .icon-xld i, .icon-xl i, .icon-lg i, .icon-md i, .icon-sm i, .icon-xs i { vertical-align: middle; } .icon-xld { width: 120px; } .icon-xld i { font-size: 100px; } .icon-xl { width: 100px; } .icon-xl i { font-size: 80px; } .icon-lg { width: 80px; } .icon-lg i { font-size: 60px; } .icon-md { width: 60px; } .icon-md i { font-size: 45px; } .icon-sm { width: 40px; } .icon-sm i { font-size: 30px; } .icon-xs { width: 30px; } .icon-xs i { font-size: 20px; } .icon-xld img, .icon-xl img, .icon-lg img, .icon-md img, .icon-sm img, .icon-xs img { vertical-align: middle; max-width: 100%; width: auto; } .icon-xld img { height: 90px; } .icon-xl img { height: 80px; } .icon-lg img { height: 70px; } .icon-md img { height: 50px; } .icon-sm img { height: 30px; } .icon-xs img { height: 20px; } /*------------------------------------- 5. place icon with box -------------------------------------*/ .about-types .wt-icon-box-wraper { border-width: 0px 0px 0px 3px; } .wt-icon-box-wraper { position: relative; } .wt-icon-box-wraper .wt-tilte { margin-top: 0; } .wt-icon-box-wraper .after-titile-line { margin-bottom: 10px; } .wt-icon-box-wraper p:last-child { margin: 0px; } .icon-content { overflow: hidden; } .wt-icon-box-xld, .wt-icon-box-xl, .wt-icon-box-lg, .wt-icon-box-md, .wt-icon-box-sm, .wt-icon-box-xs { display: table; } .wt-icon-box-xld .icon-cell, .wt-icon-box-xl .icon-cell, .wt-icon-box-lg .icon-cell, .wt-icon-box-md .icon-cell, .wt-icon-box-sm .icon-cell, .wt-icon-box-xs .icon-cell { display: table-cell; vertical-align: middle; } /*------------------------------------- 6. icon box left align -------------------------------------*/ .wt-icon-box-wraper.left .wt-icon-box-xld, .wt-icon-box-wraper.left .wt-icon-box-xl, .wt-icon-box-wraper.left .wt-icon-box-lg, .wt-icon-box-wraper.left .wt-icon-box-md, .wt-icon-box-wraper.left .wt-icon-box-sm, .wt-icon-box-wraper.left .wt-icon-box-xs { float: left; margin-right: 20px; } .wt-icon-box-wraper.left .icon-xld, .wt-icon-box-wraper.left .icon-xl, .wt-icon-box-wraper.left .icon-lg, .wt-icon-box-wraper.left .icon-md, .wt-icon-box-wraper.left .icon-sm, .wt-icon-box-wraper.left .icon-xs { float: left; margin-right: 10px; } /*------------------------------------- 7. icon box right align -------------------------------------*/ .wt-icon-box-wraper.right { text-align: right; } .wt-icon-box-wraper.right .wt-icon-box-xld, .wt-icon-box-wraper.right .wt-icon-box-xl, .wt-icon-box-wraper.right .wt-icon-box-lg, .wt-icon-box-wraper.right .wt-icon-box-md, .wt-icon-box-wraper.right .wt-icon-box-sm, .wt-icon-box-wraper.right .wt-icon-box-xs { float: right; display: table; margin-left: 20px; } .wt-icon-box-wraper.right .icon-xld, .wt-icon-box-wraper.right .icon-xl, .wt-icon-box-wraper.right .icon-lg, .wt-icon-box-wraper.right .icon-md, .wt-icon-box-wraper.right .icon-sm, .wt-icon-box-wraper.right .icon-xs { float: right; margin-left: 10px; } /*------------------------------------- 8. icon box center align -------------------------------------*/ .wt-icon-box-wraper.center { text-align: center; } .wt-icon-box-wraper.center .wt-icon-box-xld, .wt-icon-box-wraper.center .wt-icon-box-xl, .wt-icon-box-wraper.center .wt-icon-box-lg, .wt-icon-box-wraper.center .wt-icon-box-md, .wt-icon-box-wraper.center .wt-icon-box-sm, .wt-icon-box-wraper.center .wt-icon-box-xs { margin-left: auto; margin-right: auto; } .wt-icon-box-wraper.bx-style-1, .wt-icon-box-wraper.bx-style-2 { border-width: 1px; border-style: solid; border-color: #ededed; } .wt-icon-box-wraper.bx-style-2.center [class*="wt-icon-box-"], .wt-icon-box-wraper.bx-style-2.left [class*="wt-icon-box-"], .wt-icon-box-wraper.bx-style-2.right [class*="wt-icon-box-"] { position: absolute; } .wt-icon-box-wraper.bx-style-2.center [class*="wt-icon-box-"] { position: absolute; top: 0; left: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .wt-icon-box-wraper.bx-style-2.center .wt-icon-box-xl { margin-left: -75px; } .wt-icon-box-wraper.bx-style-2.center .wt-icon-box-lg { margin-left: -60px; } .wt-icon-box-wraper.bx-style-2.center .wt-icon-box-md { margin-left: -50px; } .wt-icon-box-wraper.bx-style-2.center .wt-icon-box-sm { margin-left: -40px; } .wt-icon-box-wraper.bx-style-2.center .wt-icon-box-xs { margin-left: -20px; } .wt-icon-box-wraper.bx-style-2.left [class*="wt-icon-box-"] { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); } .wt-icon-box-wraper.bx-style-2.right [class*="wt-icon-box-"] { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); } /*------------------------------------- 9. media with content box css -------------------------------------*/ .wt-box, .wt-info, .wt-tilte, .wt-tilte-inner { position: relative; } .wt-tilte-inner { display: inline-block; } .wt-tilte-inner.skew-title:after { content: ""; position: absolute; right: -15px; top: 0; width: 50px; height: 100%; z-index: -1; -moz-transform: skewX(20deg); -webkit-transform: skewX(20deg); -o-transform: skewX(20deg); -ms-transform: skewX(20deg); transform: skewX(20deg); } .wt-box[class*="border-"], .wt-info[class*="border-"], .wt-icon-box-wraper[class*="border-"] { border-color: #eee; } .wt-info.border-1, .wt-info.border-2, .wt-info.border-3, .wt-info.border-4, .wt-info.border-5 { border-top: none; } /*------------------------------------- 10. before & after for line css -------------------------------------*/ .left-border, .right-border { position: relative; } .left-border:before, .right-border:before { content: ""; position: absolute; top: 5px; width: 1px; height: 90%; background: #CCC; } .right-border:before { right: 0; } /*------------------------------------- 11. for images -------------------------------------*/ .wt-thum-bx, .wt-post-thum { background-color: #000; } .wt-thum-bx img, .wt-post-thum img { width: 100%; height: auto; } /*====================================== 10. IMAGES OVERLAY EFFECTS (overly animation on images) ======================================*/ .wt-img-overlay1, .wt-img-overlay2, .wt-img-overlay3, .wt-img-overlay4, .wt-img-overlay5, .wt-img-overlay6, .wt-img-overlay7, .wt-img-overlay8, .wt-img-overlay9 .wt-img-overlay10 { position: relative; } .wt-img-overlay1:before, .wt-img-overlay1:after, .wt-img-overlay2:before, .wt-img-overlay2:after, .wt-img-overlay3:before, .wt-img-overlay3:after, .wt-img-overlay4:before, .wt-img-overlay4:after, .wt-img-overlay5:before, .wt-img-overlay5:after, .wt-img-overlay6:before, .wt-img-overlay6:after, .wt-img-overlay7:before, .wt-img-overlay7:after, .wt-img-overlay8:before, .wt-img-overlay8:after, .wt-img-overlay9:before, .wt-img-overlay9:after { content: ""; background: #000; position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0.4; z-index: 1; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } /*------------------------------------- 1. effect 1 -------------------------------------*/ .wt-img-overlay1:before { width: 100%; height: 100%; opacity: 0; } .wt-img-overlay1:hover:before, .wt-box:hover .wt-img-overlay1:before { opacity: 0.5; } /*------------------------------------- 2. effect 2 -------------------------------------*/ .wt-img-overlay2:before { width: 100%; height: 100%; opacity: 0; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );*/ /* IE6-9 */ } .wt-img-overlay2:hover:before, .wt-box:hover .wt-img-overlay2:before { opacity: 0.9; } /*------------------------------------- 3. effect 3 -------------------------------------*/ .wt-img-overlay3:before { left: 50%; top: 50%; } .wt-img-overlay3:hover:before, .wt-box:hover .wt-img-overlay3:before { width: 100%; height: 100%; top: 0; left: 0; } /*------------------------------------- 4. effect 4 -------------------------------------*/ .wt-img-overlay4:before { left: 50%; top: 0; height: 100%; } .wt-img-overlay4:hover:before, .wt-box:hover .wt-img-overlay4:before { width: 100%; left: 0; } /*------------------------------------- 5. effect 5 -------------------------------------*/ .wt-img-overlay5:before { left: 0; top: 50%; width: 100%; } .wt-img-overlay5:hover:before, .wt-box:hover .wt-img-overlay5:before { height: 100%; top: 0; } /*------------------------------------- 6. effect 6 -------------------------------------*/ .wt-img-overlay6:before { left: 0; top: auto; bottom: 0; width: 100%; } .wt-img-overlay6:hover:before, .wt-box:hover .wt-img-overlay6:before { height: 100%; } /*------------------------------------- 7. effect 7 -------------------------------------*/ .wt-img-overlay7:before, .wt-img-overlay7:after { height: 100%; } .wt-img-overlay7:after { left: auto; right: 0; } .wt-img-overlay7:hover:before, .wt-img-overlay7:hover:after, .wt-box:hover .wt-img-overlay7:before, .wt-box:hover .wt-img-overlay7:after { width: 50%; } /*------------------------------------- 8. effect 8 -------------------------------------*/ .wt-img-overlay8:before, .wt-img-overlay8:after { height: 100%; } .wt-img-overlay8:after { left: auto; right: 0; } .wt-img-overlay8:hover:before, .wt-img-overlay8:hover:after, .wt-box:hover .wt-img-overlay8:before, .wt-box:hover .wt-img-overlay8:after { width: 100%; opacity: 0.3; } /*------------------------------------- 9. effect 9 -------------------------------------*/ .wt-img-overlay9:before, .wt-img-overlay9:after {} .wt-img-overlay9:after { left: auto; right: 0; top: auto; bottom: 0; } .wt-img-overlay9:hover:before, .wt-img-overlay9:hover:after, .wt-box:hover .wt-img-overlay9:before, .wt-box:hover .wt-img-overlay9:after { width: 100%; height: 100%; opacity: 0.3; } /*------------------------------------- 10. effect 10 -------------------------------------*/ .wt-img-overlay10:before, .wt-img-overlay10:after { width: 100%; height: 100%; opacity: 0; } .wt-img-overlay10:hover:before, .wt-box:hover .wt-img-overlay10:before { opacity: 0.5; } .wt-img-overlay10:hover:after, .wt-box:hover .wt-img-overlay10:after { width: 90%; height: 80%; left: 5%; top: 10%; opacity: 0.5; background: none; border: 1px dashed #FFFFFF; } /*------------------------------------- 10. effect 11 -------------------------------------*/ .wt-img-overlay11:hover .wt-img-overlay11-content { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .wt-img-overlay11-content { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .wt-img-overlay11-content .overlay-11-detail { display: table; height: 100%; } .wt-img-overlay11-content .overlay-11-detail .overlay-11-info { display: table-cell; vertical-align: middle; text-align: center; } .wt-img-overlay11-content .overlay-11-detail .overlay-11-info h4 a { color: #fff; } @media only screen and ( max-width:991px) { .wt-img-overlay11-content .overlay-11-detail p { font-size: 13px; line-height: 18px; } } .wt-img-overlay11-content .bg-color { width: 100%; height: 100%; position: absolute; z-index: -1; left: 0px; top: 0px; } /*====================================== 11. shortcodeS ======================================*/ /*------------------------------------- 1. Buttons --------------------------------------- */ /* 1.1 theme default button */ .btn { padding-top: 9px; padding-bottom: 9px; } .site-button, .site-button-secondry { color: #fff; padding: 10px 20px; display: inline-block; font-size: 14px; outline: none; cursor: pointer; outline: none; border-width: 0; border-style: solid; border-color: transparent; line-height: 1.42857; margin-left: -1px; text-decoration: none !important; } .site-button { background-color: #ec5598; } .site-button:active, .site-button:hover, .site-button:focus, .active>.site-button { background-color: #e4a101; color: #fff; } .site-button-secondry { background-color: #171f2c; } .site-button-secondry:active, .site-button-secondry:hover, .site-button-secondry:focus, .active>.site-button-secondry { background-color: #192639; color: #fff; } a:focus.video-play-btn { color: #fff; } .video-play-btn { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; line-height: 54px; border: 2px solid #fff; text-align: center; margin: -25px; color: #fff; display: block; z-index: 10; font-size: 24px; -webkit-border-radius: 50%; border-radius: 50%; } .video-play-btn i { margin-right: -5px; } /* 1.2 button text uppercase */ .site-button.text-uppercase { text-transform: uppercase; } /* 1.3 button size */ .button-sm { padding: 5px 10px; font-size: 12px; } .button-lg { padding: 20px 35px; font-size: 16px; } .button-xl { padding: 30px 50px; font-size: 24px; } /* 1.4 button rounded */ .radius-no { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .radius-sm { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .radius-xl { border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } .radius-bx { border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; } /* 1.5 button colors */ /* 1.6 white */ .site-button.white { background-color: #fff; color: #222; } .site-button.white:hover, .site-button.white:active, .site-button.white:focus { background-color: #F4F4F4; color: #555; } /* 1.7 black */ .site-button.black { background-color: #171717; color: #fff; } .site-button.black:hover, .site-button.black:active, .site-button.black:focus { background-color: #000; color: #fff; } /* 1.8 Gray */ .site-button.gray { background-color: #666666; color: #fff; } .site-button.gray:hover, .site-button.gray:active, .site-button.gray:focus { background-color: #555555; color: #fff; } /* 1.9 pink */ .site-button.pink { background-color: #e63f75; color: #fff; } .site-button.pink:hover, .site-button.pink:active, .site-button.pink:focus { background-color: #d22b61; color: #fff; } /* 1.10 Blue */ .site-button.blue { background-color: #42B8D4; color: #fff; } .site-button.blue:hover, .site-button.blue:active, .site-button.blue:focus { background-color: #2ca2be; color: #fff; } /* 1.11 Green */ .site-button.green { background-color: #35B494; color: #fff; } .site-button.green:hover, .site-button.green:active, .site-button.green:focus { background-color: #26a585; color: #fff; } /* 1.12 Orange */ .site-button.orange { background-color: #E56713; color: #fff; } .site-button.orange:hover, .site-button.orange:active, .site-button.orange:focus { background-color: #d55703; color: #fff; } /* 1.13 Red */ .site-button.red { background-color: #D93223; color: #fff; } .site-button.red:hover, .site-button.red:active, .site-button.red:focus { background-color: #c51e0f; color: #fff; } /*1.14 Brown */ .site-button.brown { background-color: #69441F; color: #fff; } .site-button.brown:hover, .site-button.brown:active, .site-button.brown:focus { background-color: #5f3a15; color: #fff; } /* 1.15 Yellow */ .site-button.yellow { background-color: #ecc731; color: #fff; } .site-button.yellow:hover, .site-button.yellow:active, .site-button.yellow:focus { background-color: #d4af19; color: #fff; } /* 1.16 purple */ .site-button.purple { background-color: #AE1AF7; color: #fff; } .site-button.purple:hover, .site-button.purple:active, .site-button.purple:focus { background-color: #9804e1; color: #fff; } /* 1.17 Graphical */ .site-button.graphical { color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 3px -1px rgba(45, 60, 72, 0.5); -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 3px -1px rgba(45, 60, 72, 0.5); -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 3px -1px rgba(45, 60, 72, 0.5); border: 1px solid rgba(0, 0, 0, 0.15); } .site-button.graphical:active { box-shadow: 0 2px 2px rgba(0, 0, 0, .25) inset; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .25) inset; -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .25) inset; } /* 1.18 3D */ .site-button.button-3d { color: #fff; border-bottom: 4px solid rgba(0, 0, 0, 0.2); border-left: none; border-right: none; border-top: none; } /* 1.19 Outline */ .site-button.outline { color: #888; background: none; border-width: 2px; border-style: solid; border-color: #eee; } /* 1.20 Outline white */ .site-button.outline.white { color: #e7e7e7; border-color: #e7e7e7; } .site-button.outline.white:hover { color: #666666; } /* 1.21 Outline black */ .site-button.outline.black { color: #171717; border-color: #171717; } /* 1.22 Outline gray */ .site-button.outline.gray { color: #666666; border-color: #666666; } /* 1.23 Outline pink */ .site-button.outline.pink { color: #e63f75; border-color: #e63f75; } /* 1.24 Outline blue */ .site-button.outline.blue { color: #42b8d4; border-color: #42b8d4; } /* 1.25 Outline green */ .site-button.outline.green { color: #35b494; border-color: #35b494; } /* 1.26 Outline orange */ .site-button.outline.orange { color: #e56713; border-color: #e56713; } /* 1.27 Outline red */ .site-button.outline.red { color: #d93223; border-color: #d93223; } /* 1.28 Outline brown */ .site-button.outline.brown { color: #69441f; border-color: #69441f; } /* 1.29 Outline yellow */ .site-button.outline.yellow { color: #ec5598; border-color: #ec5598; } /* 1.30 Outline purple */ .site-button.outline.purple { color: #ae1af7; border-color: #ae1af7; } /* 1.31 Outline hover */ .site-button.outline:hover { border-color: rgba(0, 0, 0, 0); color: #fff; } /* 1.32 button text link */ .site-button-link { display: inline-block; font-weight: 600; } /* 1.33 text link white */ .site-button-link.white { color: #e7e7e7; } .site-button-link.white:hover, .site-button-link.white:active, .site-button-link.white:focus { color: #CCC; } /* 1.34 text link black */ .site-button-link.black { color: #171717; } .site-button-link.black:hover, .site-button-link.black:active, .site-button-link.black:focus { color: #000; } /* 1.35 text link Gray */ .site-button-link.gray { color: #666666; } .site-button-link.gray:hover, .site-button-link.gray:active, .site-button-link.gray:focus { color: #555555; } /* 1.36 text link pink */ .site-button-link.pink { color: #e63f75; } .site-button-link.pink:hover, .site-button-link.pink:active, .site-button-link.pink:focus { color: #2ca2be; } /* 1.37 text link Blue */ .site-button-link.blue { color: #42B8D4; } .site-button-link.blue:hover, .site-button-link.blue:active, .site-button-link.blue:focus { color: #2ca2be; } /* 1.38 text link Green */ .site-button-link.green { color: #35B494; } .site-button-link.green:hover, .site-button-link.green:active, .site-button-link.green:focus { color: #26a585; } /* 1.39 text link Orange */ .site-button-link.orange { color: #E56713; } .site-button-link.orange:hover, .site-button-link.orange:active, .site-button-link.orange:focus { color: #d55703; } /* 1.40 text link Red */ .site-button-link.red { color: #D93223; } .site-button-link.red:hover, .site-button-link.red:active, .site-button-link.red:focus { color: #c51e0f; } /* 1.41 text link Brown */ .site-button-link.brown { color: #69441F; } .site-button-link.brown:hover, .site-button-link.brown:active, .site-button-link.brown:focus { color: #5f3a15; } /* 1.42 text link Yellow */ .site-button-link.yellow { color: #ecc731; } .site-button-link.yellow:hover, .site-button-link.yellow:active, .site-button-link.yellow:focus { color: #d4af19; } /* 1.43 text link purple */ .site-button-link.purple { color: #ae1af7; } .site-button-link.purple:hover, .site-button-link.purple:active, .site-button-link.purple:focus { color: #9804e1; } /* 1.44 app strore */ .site-button.button-app { text-align: left; padding: 15px 25px; } .site-button.button-app i { display: inline-block; font-size: 45px; float: left; margin-right: 15px; } .site-button.button-app strong { display: block; font-size: 16px; } /* 1.45 filter buttons css */ .filter-wrap {} .masonry-filter { display: table; margin-bottom: 0; } .masonry-filter>li { display: inline-block; margin-right: 30px; position: relative; } .masonry-filter>li a { color: #666666; font-size: 14px; } .masonry-filter>li.active a, .masonry-filter>li a:hover, .masonry-filter>li a:active, .masonry-filter>li a:focus { color: #f7c20a; } @media only screen and (max-width: 600px) { .masonry-filter>li { margin-bottom: 10px; } .masonry-filter>li a { font-size: 14px !important; } } /* 1.45(1) Masonry filter alignment [Left-Right-Center] */ .filter-wrap.right>.masonry-filter { float: right; } @media only screen and (max-width:991px) { .filter-wrap.right>.masonry-filter { float: none; } } .filter-wrap.center>.masonry-filter { margin-left: auto; margin-right: auto; } /* 1.45(2) Masonry filter link style */ .masonry-filter.link-style>li a { font-size: 15px; font-weight: 600; } .masonry-filter.link-style>li:after { content: "/"; position: relative; right: -18px; opacity: 0.3; } .masonry-filter.link-style.white>li:after { color: #fff; } .masonry-filter.link-style>li:last-child:after { display: none; } .masonry-filter.link-style.white>li.active a, .masonry-filter.link-style.white>li a:hover, .masonry-filter.link-style.white>li a:active, .masonry-filter.link-style.white>li a:focus { color: #f7c20a; } .masonry-filter.has-bg>li a { color: #fff; } .masonry-filter.link-style.has-bg>li.active a, .masonry-filter.link-style.has-bg>li:hover a, .masonry-filter.link-style.has-bg>li:active a, .masonry-filter.link-style.has-bg>li:focus a { color: #ec5598; } /* 1.45(3) Masonry filter button style */ .masonry-filter.button-style>li { margin-right: 10px; margin-bottom: 10px; } @media only screen and (max-width: 767px) { .masonry-filter.button-style>li { margin-bottom: 10px; } } .masonry-filter.button-style>li a { background-color: #666666; color: #fff; padding: 10px 20px; font-weight: 600; display: inline-block; } .masonry-filter.button-style>li.active a, .masonry-filter.button-style>li a:hover, .masonry-filter.button-style>li a:active, .masonry-filter.button-style>li a:focus { background-color: #ec5598; color: #fff; } .masonry-filter.button-style.has-bg>li a { background-color: #fff; color: #666; } .masonry-filter.button-style.has-bg>li.active a, .masonry-filter.button-style.has-bg>li a:hover, .masonry-filter.button-style.has-bg>li a:active, .masonry-filter.button-style.has-bg>li a:focus { background-color: #ec5598; color: #fff; } /* 1.45(4) Masonry filter button outline style */ .masonry-filter.outline-style>li { margin-right: 10px; } .masonry-filter.outline-style>li a { border-width: 2px; border-style: solid; border-color: #666666; color: #666666; padding: 10px 20px; font-weight: 600; display: inline-block; } .masonry-filter.outline-style.rounded-corner>li a { border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } .masonry-filter.outline-style>li.active a, .masonry-filter.outline-style>li a:hover, .masonry-filter.outline-style>li a:active, .masonry-filter.outline-style>li a:focus { border-color: #ec5598; color: #ec5598; } .masonry-filter.outline-style.has-bg>li a { border-color: #fff; color: #fff; } .masonry-filter.outline-style.has-bg>li.active a, .masonry-filter.outline-style.has-bg>li a:hover, .masonry-filter.outline-style.has-bg>li a:active, .masonry-filter.outline-style.has-bg>li a:focus { border-color: #ec5598; color: #ec5598; } @media only screen and (max-width:768px) { .masonry-item { width: 100%; } } /* 1.46 Top slider buttons css */ .slider-btn-left { padding: 15px 40px; font-size: 15px; font-weight: 500; } .slider-btn-right { padding: 15px 40px; font-size: 15px; font-weight: 500; } /*------------------------------------- 2. Title separators -------------------------------------*/ .wt-title-subline { display: block; letter-spacing: 6px; } .wt-separator-outer { overflow: hidden; } /*Separator defualt*/ .wt-separator { display: inline-block; height: 3px; width: 50px; position: relative; } .wt-separator .separator-left, .wt-separator .separator-right { position: absolute; top: 50%; width: 70px; height: 2px; margin-top: -1px; } .wt-separator .separator-left { left: -80px; } .wt-separator .separator-right { right: -80px; } /*Separator liner*/ .wt-separator.style-liner { width: 20px; height: 4px; } /*Separator square*/ .wt-separator.style-square { width: 10px; height: 10px; background-color: transparent; border-width: 3px; border-style: solid; border-color: #2d3239; } .wt-separator.style-square .separator-left, .wt-separator.style-square .separator-right { height: 3px; } .wt-separator.style-square.has-bg { border-color: #fff; } /*Separator icon*/ .wt-separator.style-icon { width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 18px; } /*------------------------------------- 3. Deviders -------------------------------------*/ .wt-divider { height: 1px; position: relative; margin: 30px 0; } .wt-divider.divider-2px { height: 2px; } .wt-divider.divider-3px { height: 3px; } .wt-divider.divider-4px { height: 4px; } .wt-divider i { position: absolute; width: 30px; height: 30px; text-align: center; line-height: 30px; display: block; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .wt-divider.icon-left { margin-left: 40px; } .wt-divider.icon-left i { left: -40px; } .wt-divider.icon-right { margin-right: 40px; } .wt-divider.icon-right i { left: auto; right: -40px; } .wt-divider.icon-center i { left: 50%; margin-left: -5px; } /*------------------------------------- 4. TABS -------------------------------------*/ .wt-tabs:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } @media only screen and (max-width: 767px) { .wt-tabs .nav-tabs>li { float: none; } } .wt-tabs p:last-child { margin-bottom: 0; } /*4.1 tabs style 1 [ default ] */ .wt-tabs .tab-pane { padding: 20px 0; } .wt-tabs .nav-tabs>li>a { color: #1a1a1a; font-weight: 600; font-size: 13px; border-radius: 0px; padding: 15px; } .wt-tabs .nav-tabs>li>a.active, .wt-tabs .nav-tabs>li>a.active:focus, .wt-tabs .nav-tabs>li>a.active:hover { background-color: #fff; border-color: #ddd; border-bottom: 1px solid #FFF; color: #1a1a1a; } .wt-tabs .nav>li>a:focus, .wt-tabs .nav>li>a:hover { background-color: transparent; } .wt-tabs .nav li a:hover { border: 1px solid transparent; } .wt-tabs .nav-tabs>li>a i { margin-right: 5px; } .wt-tabs.tabs-default.has-bg .nav-tabs>li>a { color: #fff; } .wt-tabs.tabs-default.has-bg .nav-tabs>li>a.active, .wt-tabs.tabs-default.has-bg .nav-tabs>li>a.active:focus, .wt-tabs.tabs-default.has-bg .nav-tabs>li>a.active:hover { color: #1a1a1a; border-color: #ddd #ddd #fff; } .wt-tabs.tabs-default.has-bg .tab-pane { color: #fff; } /* tabs nav center */ .wt-tabs.nav-center>.nav-tabs { display: table; margin-left: auto; margin-right: auto; } /*4.2 tabs bg [ tabs background ] */ .wt-tabs.bg-tabs .nav-tabs>li>a { background-color: #f0f0f0; border: 1px solid #ddd; margin-right: -1px; } .wt-tabs.bg-tabs .nav-tabs>li>a.active { border-bottom: 1px solid transparent; background-color: #fff; } .wt-tabs.bg-tabs.has-bg .tab-pane { color: #fff; } /*4.3 tabs bg [ tabs background ] */ .wt-tabs.vertical.bg-tabs .nav-tabs>li>a { border: 1px solid #ddd; } .wt-tabs.vertical.bg-tabs .nav-tabs>li>a.active { border-right: 1px solid transparent; } .wt-tabs.vertical.right.bg-tabs .nav-tabs>li>a { border: 1px solid #ddd; } .wt-tabs.vertical.right.bg-tabs .nav-tabs>li>a.active { border-left: 1px solid transparent; } .wt-tabs.border-top { border-top: 0px !important; } /*4.4 tabs bg & top border [ tabs background & top border in active ] */ .wt-tabs.border-top .nav-tabs>li>a.active { color: #1a1a1a; position: relative; } .wt-tabs.border-top.border.bg-tabs .nav-tabs { border: 0px; } .wt-tabs.border-top .nav-tabs>li>a.active:after { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 3px; background-color: #FFBC13; } .wt-tabs.border-top.vertical .nav-tabs>li>a.active:after { top: 0px; left: -1px; width: 3px; height: 100%; } /*4.4 tabs style 2 [ content with border outer ] */ .wt-tabs.border { border: none !important; } .wt-tabs.border .tab-pane { padding: 10px; border: 1px solid #ddd; margin-top: -1px; } /*4.5 tabs style 3 [ left-nav ] */ .wt-tabs.vertical.tabs-default.border .nav-tabs { border-right: 0px; } .wt-tabs.vertical .nav-tabs { float: left; width: 170px; border-bottom: none; border-right: 1px solid #DDD; } .wt-tabs.border-top.vertical.bg-tabs .nav-tabs { border-right: 0px; } @media only screen and ( max-width:720px) { .wt-tabs.vertical .nav-tabs { width: 100%; float: none; border-right: 0px; } .wt-tabs.vertical .tab-content { width: 100%; margin-left: 0px !important; } } .wt-tabs.vertical .tab-pane { padding: 10px 0 10px 20px; } .wt-tabs.vertical .nav-tabs li { float: none; margin-right: 0px; width: 100%; } .wt-tabs.vertical .nav-tabs li a { margin-right: -1px; border-right: none; border-radius: 0px; color: #1a1a1a; } .wt-tabs.border-top.vertical.border.bg-tabs .nav-tabs li a { margin-right: -2px; } .wt-tabs.vertical .nav-tabs li a.active { border-bottom: 1px solid #ddd; background-color: #fff; } .wt-tabs.vertical .tab-content { border-left: 1px solid #DDD; margin-left: 169px; } /*4.6 tabs style 4 [ left-nav & content with border ] */ .wt-tabs.vertical.border .tab-pane { padding: 20px; margin-left: -1px; } /*4.7 tabs style 5 [ right-nav ] */ .wt-tabs.vertical.right .nav-tabs { /* border-left: 1px solid #ddd; */ border-right: none; float: right; } .wt-tabs.vertical.right .nav-tabs li { margin-right: 0; margin-left: -1px; } .wt-tabs.vertical.right .nav-tabs li a { border-right: 1px solid transparent; border-left: none; } .wt-tabs.vertical.right .nav-tabs li a.active { border-right: 1px solid #ddd; border-left: none; } .wt-tabs.vertical.right .tab-content { border-left: none; border-right: 1px solid #ddd; margin-right: 169px; margin-left: 0; } .wt-tabs.vertical.right .tab-pane { padding: 10px 20px 10px 0; } /*4.8 tabs style 6 [ right-nav & content with border ]*/ .wt-tabs.vertical.right.border .tab-pane { padding: 20px; margin-right: -1px; } @media only screen and (max-width:720px) { .wt-tabs.tabs-default .nav.nav-tabs { display: block; } .wt-tabs.tabs-default .nav.nav-tabs li a.active { border: 1px solid #ddd; margin-right: 0px; } .pricing-tab-content-block .wt-tabs.vertical .tab-content { border: 0px solid #ddd; } .wt-tabs.vertical .tab-content { border: 1px solid #DDD; } .wt-tabs.vertical.right .nav-tabs { float: none; border-left: 0px; } .wt-tabs.vertical.right .tab-content { border: 1px solid #DDD; } .wt-tabs.vertical.right .tab-pane { padding: 10px; } .wt-tabs.vertical.tabs-default.border .tab-content { border: 0px; } .wt-tabs.bg-tabs ul { display: block; } .wt-tabs.vertical.bg-tabs .nav-tabs>li>a { margin-right: 0px; } .wt-tabs.vertical.bg-tabs .nav-tabs>li>a.active { border-right: 1px solid #ddd; } /* .wt-tabs.border .tab-pane{border: 0px;} */ .wt-tabs.vertical.right.tabs-default.has-bg .nav-link.active { margin-right: -1px; } .wt-tabs.vertical.right.bg-tabs.has-bg .nav-link { margin-right: -1px; } } /*------------------------------------- 4. TABS -------------------------------------*/ .wt-tabs:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } @media only screen and (max-width: 767px) { .wt-tabs .nav-tabs>li { float: none; } } .wt-tabs p:last-child { margin-bottom: 0; } /*4.1 tabs style 1 [ default ] */ .wt-tabs .tab-pane { padding: 20px 0; } .wt-tabs .nav-tabs>li>a { color: #1a1a1a; font-weight: 600; font-size: 13px; border-radius: 0px; padding: 15px; } .wt-tabs .nav-tabs>li>a.active, .wt-tabs .nav-tabs>li>a.active:focus, .wt-tabs .nav-tabs>li>a.active:hover { background-color: #fff; border-color: #ddd; border-bottom: 1px solid #FFF; color: #1a1a1a; } .wt-tabs .nav>li>a:focus, .wt-tabs .nav>li>a:hover { background-color: transparent; } .wt-tabs .nav li a:hover { border: 1px solid transparent; } .wt-tabs .nav-tabs>li>a i { margin-right: 5px; } .wt-tabs.tabs-default.has-bg .nav-tabs>li>a { color: #fff; } .wt-tabs.tabs-default.has-bg .nav-tabs>li>a.active, .wt-tabs.tabs-default.has-bg .nav-tabs>li>a.active:focus, .wt-tabs.tabs-default.has-bg .nav-tabs>li>a.active:hover { color: #1a1a1a; border-color: #ddd #ddd #fff; } .wt-tabs.tabs-default.has-bg .tab-pane { color: #fff; } /* tabs nav center */ .wt-tabs.nav-center>.nav-tabs { display: table; margin-left: auto; margin-right: auto; } /*4.2 tabs bg [ tabs background ] */ .wt-tabs.bg-tabs .nav-tabs>li>a { background-color: #f0f0f0; border: 1px solid #ddd; margin-right: -1px; } .wt-tabs.bg-tabs .nav-tabs>li>a.active { border-bottom: 1px solid transparent; background-color: #fff; } .wt-tabs.bg-tabs.has-bg .tab-pane { color: #fff; } /*4.3 tabs bg [ tabs background ] */ .wt-tabs.vertical.bg-tabs .nav-tabs>li>a { border: 1px solid #ddd; } .wt-tabs.vertical.bg-tabs .nav-tabs>li>a.active { border-right: 1px solid transparent; } .wt-tabs.vertical.right.bg-tabs .nav-tabs>li>a { border: 1px solid #ddd; } .wt-tabs.vertical.right.bg-tabs .nav-tabs>li>a.active { border-left: 1px solid transparent; } .wt-tabs.border-top { border-top: 0px !important; } /*4.4 tabs bg & top border [ tabs background & top border in active ] */ .wt-tabs.border-top .nav-tabs>li>a.active { color: #1a1a1a; position: relative; } .wt-tabs.border-top.border.bg-tabs .nav-tabs { border: 0px; } .wt-tabs.border-top .nav-tabs>li>a.active:after { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 3px; background-color: #FFBC13; } .wt-tabs.border-top.vertical .nav-tabs>li>a.active:after { top: 0px; left: -1px; width: 3px; height: 100%; } /*4.4 tabs style 2 [ content with border outer ] */ .wt-tabs.border { border: none !important; } .wt-tabs.border .tab-pane { padding: 10px; border: 1px solid #ddd; margin-top: -1px; } /*4.5 tabs style 3 [ left-nav ] */ .wt-tabs.vertical.tabs-default.border .nav-tabs { border-right: 0px; } .wt-tabs.vertical .nav-tabs { float: left; width: 170px; border-bottom: none; border-right: 1px solid #DDD; } .wt-tabs.border-top.vertical.bg-tabs .nav-tabs { border-right: 0px; } @media only screen and ( max-width:720px) { .wt-tabs.vertical .nav-tabs { width: 100%; float: none; border-right: 0px; } .wt-tabs.vertical .tab-content { width: 100%; margin-left: 0px !important; } } .wt-tabs.vertical .tab-pane { padding: 10px 0 10px 20px; } .wt-tabs.vertical .nav-tabs li { float: none; margin-right: 0px; width: 100%; } .wt-tabs.vertical .nav-tabs li a { margin-right: -1px; border-right: none; border-radius: 0px; color: #1a1a1a; } .wt-tabs.border-top.vertical.border.bg-tabs .nav-tabs li a { margin-right: -2px; } .wt-tabs.vertical .nav-tabs li a.active { border-bottom: 1px solid #ddd; background-color: #fff; } .wt-tabs.vertical .tab-content { border-left: 1px solid #DDD; margin-left: 169px; } /*4.6 tabs style 4 [ left-nav & content with border ] */ .wt-tabs.vertical.border .tab-pane { padding: 20px; margin-left: -1px; } /*4.7 tabs style 5 [ right-nav ] */ .wt-tabs.vertical.right .nav-tabs { /* border-left: 1px solid #ddd; */ border-right: none; float: right; } .wt-tabs.vertical.right .nav-tabs li { margin-right: 0; margin-left: -1px; } .wt-tabs.vertical.right .nav-tabs li a { border-right: 1px solid transparent; border-left: none; } .wt-tabs.vertical.right .nav-tabs li a.active { border-right: 1px solid #ddd; border-left: none; } .wt-tabs.vertical.right .tab-content { border-left: none; border-right: 1px solid #ddd; margin-right: 169px; margin-left: 0; } .wt-tabs.vertical.right .tab-pane { padding: 10px 20px 10px 0; } /*4.8 tabs style 6 [ right-nav & content with border ]*/ .wt-tabs.vertical.right.border .tab-pane { padding: 20px; margin-right: -1px; } @media only screen and (max-width:720px) { .wt-tabs.tabs-default .nav.nav-tabs { display: block; } .wt-tabs.tabs-default .nav.nav-tabs li a.active { border: 1px solid #ddd; margin-right: 0px; } .pricing-tab-content-block .wt-tabs.vertical .tab-content { border: 0px solid #ddd; } .wt-tabs.vertical .tab-content { border: 1px solid #DDD; } .wt-tabs.vertical.right .nav-tabs { float: none; border-left: 0px; } .wt-tabs.vertical.right .tab-content { border: 1px solid #DDD; } .wt-tabs.vertical.right .tab-pane { padding: 10px; } .wt-tabs.vertical.tabs-default.border .tab-content { border: 0px; } .wt-tabs.bg-tabs ul { display: block; } .wt-tabs.vertical.bg-tabs .nav-tabs>li>a { margin-right: 0px; } .wt-tabs.vertical.bg-tabs .nav-tabs>li>a.active { border-right: 1px solid #ddd; } /* .wt-tabs.border .tab-pane{border: 0px;} */ .wt-tabs.vertical.right.tabs-default.has-bg .nav-link.active { margin-right: -1px; } .wt-tabs.vertical.right.bg-tabs.has-bg .nav-link { margin-right: -1px; } } /*------------------------------------- 5. Accordians -------------------------------------*/ .wt-accordion .wt-panel { background-color: transparent; border: none; margin-bottom: 10px; border-radius: 0; -webkit-border-radius: 0px; -moz-border-radius: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } .acod-head { position: relative; } .acod-title { margin-top: 0; margin-bottom: 0; } .acod-title a { position: relative; z-index: 1; overflow: hidden; font-size: 18px; } @media only screen and (max-width:767px) { .acod-title a { position: relative; z-index: 1; overflow: hidden; font-size: 16px; } } .acod-head .fa { margin-right: 5px; } .acod-head a { display: block; padding: 15px 40px 15px 15px; } .acod-head a, .acod-head a:hover, .acod-head a:active, .acod-head a:focus { color: #3d474a; } .acod-body { color: #777; } /*Accodian open close indicator css*/ .acod-head .indicator { padding: 15px; color: #ababab; position: absolute; right: 0; top: 0; } .acod-head .indicator .fa, .acod-head.acc-actives .indicator .fa { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .acod-head.acc-actives .indicator .fa, .acod-head [aria-expanded="true"] .indicator .fa { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* 1. Accordion defult */ .acc-default .acod-title a { padding: 5px 0; } .acc-default .acod-head .indicator { padding: 0; } .acc-default.acc-has-bg .acod-head a, .acc-default.acc-has-bg .acod-head a:hover, .acc-default.acc-has-bg .acod-head a:active, .acc-default.acc-has-bg .acod-head a:focus, .acc-default.acc-has-bg .acod-head .indicator, .acc-default.acc-has-bg .acod-body { color: #fff; } /* 2. Accordion outline */ .acc-outline .acod-title a { border: 1px solid #ddd; } .acc-outline.acc-has-bg .acod-head a, .acc-outline.acc-has-bg .acod-head a:hover, .acc-outline.acc-has-bg .acod-head a:active, .acc-outline.acc-has-bg .acod-head a:focus, .acc-outline.acc-has-bg .acod-head .indicator, .acc-outline.acc-has-bg .acod-body { color: #fff; } /* 3. Accordion bg gray */ .acc-bg-gray a { background-color: #F5F5F5; } .acc-bg-gray .acod-head .indicator { color: #777; } .acc-bg-gray.acc-has-bg .acod-body { color: #fff; } /* 4. Accordion bg primary */ .acc-site-bg-primary a { background-color: #ec5598; } .acc-site-bg-primary .acod-head a, .acc-site-bg-primary .acod-head a:hover, .acc-site-bg-primary .acod-head a:active, .acc-site-bg-primary .acod-head a:focus { color: #fff; } .acc-site-bg-primary .acod-head .indicator { color: #fff; } .acc-site-bg-primary.acc-has-bg .acod-body { color: #fff; } /* 5. Accordion bg dark */ .acc-bg-dark a { background-color: #212427; } .acc-bg-dark .acod-head a, .acc-bg-dark .acod-head a:hover, .acc-bg-dark .acod-head a:active, .acc-bg-dark .acod-head a:focus { color: #fff; } .acc-bg-dark .acod-head .indicator { color: #fff; } .acc-bg-dark.acc-has-bg .acod-body { color: #fff; } /*------------------------------------- 6. Carousels -------------------------------------*/ /* 6.1 Default Carousel */ .owl-imgbx, .ow-portfolio-img { position: relative; } .ow-entry-content { border-width: 0 1px 1px 1px; border-style: solid; border-color: #eee; background-color: #fff; padding: 20px; margin-bottom: 5px; } .ow-entry-title { font-size: 16px; font-weight: 600; padding: 5px 0; } .ow-entry-title, .ow-entry-title a { color: #3d474a; } .ow-entry-text p:last-child { margin: 0; } /* 6.2 Blog carousel */ .ow-post-title .post-title { margin: 0 0 10px; } .ow-post-text { margin-bottom: 10px; } .ow-post-text p:last-child { margin: 0; } .ow-post-readmore { margin-bottom: 10px; } .ow-post-readmore a { font-family: 'Crete Round', serif; font-size: 16px; font-style: italic; text-decoration: underline; } .ow-post-meta { margin-bottom: 10px; font-family: 'Crete Round', serif; font-style: italic; } .ow-post-meta ul { margin: 0 -4px; list-style: none; } .ow-post-meta ul li { padding: 0; display: inline-block; font-weight: bold; } .ow-post-meta li:after { content: "/"; display: inline-block; font-weight: normal; margin-left: 5px; opacity: 0.5; } .ow-post-meta li:last-child:after { display: none; } .ow-post-meta a { color: #a9a9a9; } .ow-post-meta li i { color: #7b7b7b; margin: 0 5px; } .ow-post-tags { border-top: 1px solid #E9E9E9; padding-top: 10px; } .ow-post-tags .post-comment { float: left; font-weight: bold; text-transform: uppercase; } .ow-post-tags .post-comment a { color: #a9a9a9; } .ow-post-tags .post-tags { margin: 0 -3px; list-style: none; } .ow-post-tags .post-tags a { border: 1px solid #ebebeb; padding: 2px 8px 1px; color: #777; margin: 0 3px; display: inline-block; text-transform: uppercase; font-size: 11px; } .ow-post-tags .post-tags a:hover, .ow-post-tags .post-tags a:active, .ow-post-tags .post-tags a:focus { background-color: #ec5598; color: #fff; } .date-style-3 .ow-post-info { position: relative; } .date-style-3 .ow-post-media { border-bottom: 3px solid #ec5598; } /* empty media */ .no-image-blog.date-style-2 .ow-post-info { padding-top: 70px; } /* 6.3 Event carousel */ .ow-event-title .event-title { margin: 0 0 10px; } .ow-event-text { margin-bottom: 10px; } .ow-event-text p:last-child { margin: 0; } .ow-event-readmore { margin-bottom: 10px; } .ow-event-readmore a { font-family: 'Crete Round', serif; font-size: 16px; font-style: italic; text-decoration: underline; } .ow-event-meta ul { margin: 0; } .ow-event-meta ul li { padding: 0; display: inline-block; font-style: italic; font-size: 14px; font-family: 'Crete Round', serif; } .ow-event-meta ul li i { color: #7b7b7b; margin-right: 3px; } /* empty media */ .no-image-event.date-style-2 .ow-post-info { padding-top: 70px; } /* 6.4 Client carousel 1*/ .home-logo-carousel .ow-client-logo { background-color: inherit; } .ow-client-logo { background-color: #fff; display: table; width: 100%; } .client-logo { display: table-cell; text-align: center; vertical-align: middle; padding: 10px; } .owl-carousel .ow-client-logo img { max-height: 100%; width: auto; display: inline-block; } .client-logo-media img { max-width: 100% !important; margin: 0px auto !important; width: auto !important; } /*------------------------------------- 7. Testimonials -------------------------------------*/ .testimonial-pic { background: #FFF; width: 100px; height: 100px; position: relative; display: inline-block; border: 5px solid #FFF; } .testimonial-pic.radius { border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; } .testimonial-pic.radius img { width: 100%; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; } .testimonial-pic.shadow { -webkit-box-shadow: 2px 3px 6px -3px rgba(0, 0, 0, 0.35); -moz-box-shadow: 2px 3px 6px -3px rgba(0, 0, 0, 0.35); box-shadow: 2px 3px 6px -3px rgba(0, 0, 0, 0.35); } .quote-left, .quote-right { position: relative; } .quote-left:before, .quote-right:after { font-family: "FontAwesome"; position: absolute; z-index: 10; top: 15px; } .quote-left:before { content: "\f10d"; left: 0; } .quote-right:after { content: "\f10e"; left: auto; right: 0; } .testimonial-text { padding: 15px; position: relative; } .testimonial-text p:last-child { margin: 0; } .testimonial-detail { padding: 5px; } .testimonial-name, .testimonial-position { display: block; } .testimonial-position { font-style: italic; } .testimonial-text p { margin: 0; } /*7.1 testimonial with background image*/ .testimonial-bg { color: #fff; } /*7.2 testimonial 1*/ .testimonial-1, .testimonial-grid-1 { text-align: center; } .testimonial-1 .testimonial-position, .testimonial-grid-1 .testimonial-position { color: #ec5598; } .testimonial-1 .testimonial-name, .testimonial-1 .testimonial-position, .testimonial-grid-1 .testimonial-name, .testimonial-grid-1 .testimonial-position { display: block; } .testimonial-1 .quote-left:before, .testimonial-grid-1 .quote-left:before { width: 36px; height: 36px; line-height: 36px; font-size: 16px; background-color: #ec5598; color: #FFF; text-align: center; left: 0; top: 65px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; } /*7.3 testimonial 2*/ .testimonial-2 .testimonial-text, .testimonial-grid-2 .testimonial-text { background-color: #F4F5F7; padding: 25px 30px 25px 50px; } .testimonial-2 .testimonial-text:after, .testimonial-grid-2 .testimonial-text:after { content: ""; position: absolute; bottom: -15px; left: 50px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #F4F5F7; } .testimonial-2 .testimonial-text .fa-quote-left, .testimonial-grid-2 .testimonial-text .fa-quote-left { position: absolute; left: 15px; top: 30px; font-size: 24px; color: #ec5598; } .testimonial-2 .testimonial-detail, .testimonial-grid-2 .testimonial-detail { padding: 25px 0 20px 20px; background-color: #ff9800; } .testimonial-2 .testimonial-pic, .testimonial-grid-2 .testimonial-pic { float: left; margin-right: 15px; width: 80px; height: 80px; } .testimonial-2 .testimonial-name, .testimonial-2 .testimonial-position, .testimonial-grid-2 .testimonial-name, .testimonial-grid-2 .testimonial-position { padding: 2px 0; } .testimonial-2 .testimonial-name, .testimonial-grid-2 .testimonial-name { padding-top: 20px; color: #000; } .testimonial-2 .testimonial-position, .testimonial-grid-2 .testimonial-position { color: #000; } .testimonial-2 .quote-left:before, .testimonial-grid-2 .quote-left:before { top: 50px; } /*7.4 testimonial 2 with background image*/ .testimonial-2.testimonial-bg .testimonial-text, .testimonial-grid-2.testimonial-bg .testimonial-text { color: #777; background-color: rgba(255, 255, 255, 1); } .testimonial-2.testimonial-bg .testimonial-text:after, .testimonial-grid-2.testimonial-bg .testimonial-text:after { border-top-color: rgba(255, 255, 255, 1); } /*7.5 testimonial 3*/ .testimonial-3, .testimonial-grid-3 { text-align: center; } .testimonial-3 .quote-left:before, .testimonial-grid-3 .quote-left:before { position: static; font-size: 40px; color: #ec5598; } .testimonial-3 .testimonial-position, .testimonial-grid-3 .testimonial-position { color: #ec5598; } .testimonial-3 .testimonial-name, .testimonial-3 .testimonial-position, .testimonial-grid-3 .testimonial-name, .testimonial-grid-3 .testimonial-position { display: inline-block; } /*7.6 testimonial 4*/ .testimonial-4 .testimonial-text, .testimonial-grid-4 .testimonial-text { background-color: #171f2c; color: #fff; padding: 40px 30px; } .testimonial-4 .testimonial-pic, .testimonial-grid-4 .testimonial-pic { float: left; border: 3px solid #ec5598; width: 90px; height: 90px; position: relative; z-index: 2; } .testimonial-4 .testimonial-pic:after, .testimonial-grid-4 .testimonial-pic:after { border-right: 3px solid #ec5598; height: 150%; content: ""; position: absolute; left: 36px; top: -21px; -webkit-transform: skew(25deg); -moz-transform: skew(25deg); -o-transform: skew(25deg); -ms-transform: skew(25deg); transform: skew(25deg); z-index: -1; } @media only screen and (max-width:400px) { .testimonial-4 .testimonial-pic, .testimonial-grid-4 .testimonial-pic { width: 60px; height: 60px; float: none; margin-bottom: 24px; } .testimonial-4 .testimonial-pic:after, .testimonial-grid-4 .testimonial-pic:after { height: 140%; left: 24px; position: absolute; top: -11px; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); -ms-transform: skew(30deg); transform: skew(30deg); } } .testimonial-4 .testimonial-paragraph, .testimonial-grid-4 .testimonial-paragraph { overflow: hidden; padding-left: 20px; } .testimonial-4 .testimonial-detail, .testimonial-grid-4 .testimonial-detail { background-color: #ec5598; color: #fff; padding: 15px 20px 15px 70px; display: inline-block; position: relative; z-index: 0; } @media only screen and (max-width:400px) { .testimonial-4 .testimonial-detail, .testimonial-grid-4 .testimonial-detail { min-width: 220px; } .testimonial-4 .testimonial-paragraph, .testimonial-grid-4 .testimonial-paragraph { padding-left: 0px; } } .testimonial-4 .testimonial-detail .testimonial-name, .testimonial-grid-4 .testimonial-detail .testimonial-name, .testimonial-4 .testimonial-detail .testimonial-position, .testimonial-grid-4 .testimonial-detail .testimonial-position { display: inline-block; margin: 0px 5px; position: relative; } .testimonial-4 .testimonial-detail .testimonial-position, .testimonial-grid-4 .testimonial-detail .testimonial-position { color: #000; margin: 0px 10px; } @media only screen and (max-width:400px) { .testimonial-4 .testimonial-detail .testimonial-name, .testimonial-grid-4 .testimonial-detail .testimonial-name, .testimonial-4 .testimonial-detail .testimonial-position, .testimonial-grid-4 .testimonial-detail .testimonial-position { display: block; margin: 0; } } .testimonial-4 .testimonial-detail .testimonial-position:after, .testimonial-grid-4 .testimonial-detail .testimonial-position:after { border: 1px solid #000; height: 50%; content: ""; position: absolute; left: -10px; top: 5px; -webkit-transform: skew(-25deg); -moz-transform: skew(-25deg); -o-transform: skew(-25deg); -ms-transform: skew(-25deg); transform: skew(-25deg); } @media only screen and (max-width:400px) { .testimonial-4 .testimonial-detail .testimonial-position:after, .testimonial-grid-4 .testimonial-detail .testimonial-position:after { display: none; } } .testimonial-4 .testimonial-detail .fa-quote-left, .testimonial-grid-4 .testimonial-detail .fa-quote-left { background-color: #171f2c; color: #ec5598; position: absolute; left: 0; top: 0; font-size: 30px; width: 55px; line-height: 55px; height: 100%; text-align: center; } /*7.6 testimonial 5*/ .testimonial-5, .testimonial-grid-5 { margin-left: 85px; position: relative; } .testimonial-5 .testimonial-pic-block, .testimonial-grid-5 .testimonial-pic-block { left: -13%; position: absolute; top: 20%; } .testimonial-5 .testimonial-text, .testimonial-grid-5 .testimonial-text { padding: 40px 30px 40px 110px; } .testimonial-5 .testimonial-pic, .testimonial-grid-5 .testimonial-pic { float: left; width: 130px; height: 130px; position: relative; z-index: 2; border: none; } .testimonial-5 .testimonial-pic-block.radius-bx .testimonial-pic:after, .testimonial-grid-5 .testimonial-pic-block.radius-bx .testimonial-pic:after { content: ""; border-radius: 100%; position: absolute; background-color: #ffbc13; width: 110%; height: 110%; left: -2%; top: -2%; z-index: -1; } .testimonial-5 .testimonial-name, .testimonial-grid-5 .testimonial-name, .testimonial-5 .testimonial-position, .testimonial-grid-5 .testimonial-position { display: block; } .testimonial-5 .fa-quote-left, .testimonial-grid-5 .fa-quote-left { font-size: 36px; } .testimonial-5 .testimonial-paragraph p, .testimonial-grid-5 .testimonial-paragraph p { padding: 5px 0px; } .testimonial-5 .testimonial-name, .testimonial-grid-5 .testimonial-name { color: #2a2a2a; text-transform: uppercase; font-size: 15px; } .testimonial-5 .testimonial-position, .testimonial-grid-5 .testimonial-position { font-style: normal; } .testimonial-5 .testimonial-detail, .testimonial-grid-5 .testimonial-detail { padding-left: 0px; padding-right: 0px; } @media only screen and (max-width:480px) { .testimonial-5, .testimonial-grid-5 { margin-left: 0%; position: relative; } .testimonial-5 .testimonial-pic-block, .testimonial-grid-5 .testimonial-pic-block { left: inherit; position: inherit; text-align: center; top: inherit; padding-top: 30px; } .testimonial-5 .testimonial-text, .testimonial-grid-5 .testimonial-text { padding: 40px; } .testimonial-5 .testimonial-pic, .testimonial-grid-5 .testimonial-pic { float: none; } } /*------------------------------------- 8. Pricing table -------------------------------------*/ /*8.1 Pricing table*/ .pricingtable-5 [class*="col-"] { width: 20%; } @media only screen and (max-width:1199px) { .pricingtable-5 [class*="col-"] { width: 33.33%; } } @media only screen and (max-width:991px) { .pricingtable-5 [class*="col-"] { width: 50%; } } .pricingtable-inner { text-align: center; } .pricingtable-price { padding: 10px; background-color: #ec5598; } .pricingtable-bx { font-size: 44px; font-family: Arial; color: #666666; color: #171f2c; } .pricingtable-type { font-size: 20px; text-transform: uppercase; font-size: 24px; color: #fff; } .pricingtable-type:before { content: "/"; margin-right: 3px; } .pricingtable-title { background-color: #171f2c; padding: 20px; text-transform: uppercase; } .pricingtable-title * { margin: 0; color: #fff; font-size: 20px; } .pricingtable-features { margin: 0; padding: 0; list-style: none; border: 1px solid #E9E9E9; } .pricingtable-features li { padding: 10px; border-bottom: 1px solid #E9E9E9; } .pricingtable-features li i { margin: 0 3px; } .pricingtable-features li:nth-child(even) { background-color: #F4F7F8; } .pricingtable-features li:last-child { border-bottom: none; } .pricingtable-footer { margin-top: -1px; padding: 20px; background-color: #171f2c; } .pricingtable-highlight { margin: -20px 0; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2); position: relative; z-index: 99; } .pricingtable-highlight .pricingtable-price { padding: 20px 10px; } .pricingtable-highlight .pricingtable-footer { padding: 30px 20px; } .no-col-gap .pricingtable-wrapper { margin-left: -1px; } /*8.2 pricing table style 2*/ .pricing-table-style-2 .pricingtable-price { position: relative; z-index: 0; overflow: hidden; } .pricing-table-style-2 .pricingtable-price:after { position: absolute; height: 90%; width: 96%; content: ""; top: 0px; left: -40px; background-color: #171f2c; z-index: -1; } .pricing-table-style-2 .pricingtable-price .pricingtable-bx { color: #fff; font-size: 48px; } .pricing-table-style-2 .pricingtable-title { background-color: #ec5598; } .pricing-table-style-2 .pricingtable-title * { color: #000; } @media only screen and (max-width:1200px) { .pricing-table-style-2 .pricingtable-price .pricingtable-bx { font-size: 36px; } } @media only screen and (max-width:991px) { .pricing-table-style-2 .pricingtable-price .pricingtable-bx { font-size: 20px; } .pricing-table-style-2 .pricingtable-price .pricingtable-type { font-size: 14px; } } @media only screen and (max-width:766px) { .pricing-table-style-2 .pricingtable-price .pricingtable-bx { font-size: 70px; } .pricing-table-style-2 .pricingtable-price .pricingtable-type { font-size: 24px; } } @media only screen and (max-width:420px) { .pricing-table-style-2 .pricingtable-price .pricingtable-bx { font-size: 40px; } .pricing-table-style-2 .pricingtable-price .pricingtable-type { font-size: 18px; } .pricingtable-bx { font-size: 40px; } .pricingtable-type { font-size: 18px; } } /*8.2 pricing table style 3*/ .pricing-table-style-3 .pricingtable-inner { position: relative; z-index: 1; overflow: hidden; } .pricing-table-style-3 .pricingtable-inner.radius { border-radius: 40px 40px 40px 40px; } .pricing-table-style-3 .pricingtable-inner.pricingtable-highlight { z-index: 2; } .pricing-table-style-3 .pricingtable-type { color: #171f2c; } .pricing-table-style-3 .pricingtable-title { background-color: inherit; padding: 10px 0px 10px 0px; width: 190px; margin: 0px auto; } .pricing-table-style-3 .pricingtable-title * { color: #171f2c; font-size: 18px; font-weight: 600; } .pricing-table-style-3 .pricingtable-price { background-color: inherit; } .pricing-table-style-3 .pricingtable-features li:nth-child(2n) { background-color: inherit; } .pricing-table-style-3 .pricingtable-footer { background-color: inherit; } .pricing-table-style-3 .pricingtable-features { border: none; } .pricing-table-style-3 .pricingtable-features li { border-bottom: 0px; font-weight: 600; font-size: 18px; } .pricing-table-style-3 .overlay-main { z-index: -1; } /*8.2 pricing table style 4*/ .pricing-table-style-4 .pricingtable-inner { position: relative; overflow: hidden; border-bottom: 4px solid #EC5598; } .pricing-table-style-4 .pricingtable-inner.radius { border-radius: 40px 40px 40px 40px; } .pricing-table-style-4 .pricingtable-type { color: #fff; } .pricing-table-style-4 .pricingtable-inner-overlay { position: relative; z-index: 1; } .pricing-table-style-4 .pricingtable-inner-overlay .overlay-main { z-index: -1; } .pricing-table-style-4 .pricingtable-title { background-color: inherit; color: #fff; padding: 60px 0px 0px 0px; } .pricing-table-style-4 .pricingtable-title * { color: #fff; } .pricing-table-style-4 .pricingtable-bx { color: #fff; } .pricing-table-style-4 .pricingtable-price { padding: 20px 10px; } .pricing-table-style-4 .pricingtable-highlight .pricingtable-price { padding: 30px 10px; } .pricing-table-style-4 .pricingtable-price { background-color: inherit; } .pricing-table-style-4 .pricingtable-features li:nth-child(2n) { background-color: inherit; } .pricing-table-style-4 .pricingtable-footer { background-color: inherit; } .pricing-table-style-4 .pricingtable-features { border: none; padding-top: 20px; } .pricing-table-style-4 .pricingtable-features li { border-bottom: 0px; } /*------------------------------------- 9. Alert box -------------------------------------*/ .alert.alert-sm { padding: 5px 15px; font-size: 12px; } .alert.alert-lg { padding: 25px 15px; font-size: 16px; } .alert.alert-xl { padding: 35px 15px; font-size: 18px; } .alert[class*="alert-"] i { margin-right: 8px; } .alert.no-radius { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .alert.no-bg { background-color: transparent; border-width: 2px; } .alert[class*="alert-"] ul { padding-left: 25px; margin-top: 10px; } .alert[class*="alert-"] ul li:before { color: #a94442; } /*------------------------------------- 10. Image effects -------------------------------------*/ .wt-img-effect { position: relative; overflow: hidden; display: block; } .wt-img-effect img { display: block; margin: 0; width: 100%; height: auto; box-shadow: 0 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: all 0.25s; -moz-transition: all 0.25s; -webkit-transition: all 0.25s; -o-transition: all 0.25s; } /* 10.1 image-opacity */ .wt-img-effect.opacity img:hover { opacity: 0.8; -moz-opacity: 0.8; -webkit-opacity: 0.8; } /*10.2 image-zoom */ .wt-img-effect.zoom-slow img { transition: all 10s; -moz-transition: all 10s; -webkit-transition: all 10s; -o-transition: all 10s; } .wt-img-effect.zoom-slow:hover img { -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } /*10.3 image-zoom-slow */ .wt-img-effect.zoom:hover img { -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } /*10.4 image-shrink */ .wt-img-effect.shrink:hover img { transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); } /*10.5 image-side-pan */ .wt-img-effect.side-pan:hover img { margin-left: -9%; transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } /*10.6 image-vertical-pan */ .wt-img-effect.vertical-pan:hover img { margin-top: -10%; transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } /*10.7 image-fade-in */ .wt-img-effect.fade-in { background: #000 } .wt-img-effect.fade-in img { opacity: 0.65; -moz-opacity: 0.65; -webkit-opacity: 0.65; } .wt-img-effect.fade-in:hover img { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; } /*10.8 image-fade-out */ .wt-img-effect.fade-out { background: #000 } .wt-img-effect.fade-out:hover img { opacity: 0.7; -moz-opacity: 0.7; -webkit-opacity: 0.7; } /*10.9 image-rotate */ .wt-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); } /*10.10 image-sepia */ .wt-img-effect.sepia img { -webkit-filter: sepia(100%); filter: sepia(100%); } .algo-image-hover.sepia:hover img { -webkit-filter: sepia(0); filter: sepia(0); } /*10.11 image-blurr */ .wt-img-effect.blurr img { transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; } .wt-img-effect.blurr:hover img { filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); } /*10.12 image-blurr-invert */ .wt-img-effect.blurr-invert img { transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; } .wt-img-effect.blurr-invert img { filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); } .wt-img-effect.blurr-invert:hover img { filter: blur(0px); -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); } /*10.13 image off color */ .wt-img-effect.off-color img { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); } .wt-img-effect.off-color:hover img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); } /*10.14 image on color */ .wt-img-effect.on-color img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); } .wt-img-effect.on-color:hover img { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); } /*------------------------------------- 11. Modal pop -------------------------------------*/ .modal-xlg { width: 1000px; } .provider_registration .bootstrap-select div.dropdown-menu ul li a { font-weight: 600; } .provider_registration .bootstrap-select div.dropdown-menu ul li a span.childcat { font-weight: 400; color: #7c7c7c; } @media only screen and (max-width: 1024px) { .modal-xlg { width: auto; margin-left: 15px; margin-right: 15px; } } /*------------------------------------- 12. Social icons -------------------------------------*/ .social-icons { list-style: none; margin-left: -3px; margin-right: 0px; font-size: 12px; } .social-icons li { display: inline-block; text-align: center; } .social-icons li a { display: block; padding: 3px; } .social-icons.social-md { font-size: 18px; } .social-icons.social-lg li a { font-size: 24px; } .social-icons.has-bg li a:hover { color: #fff; } .social-icons.social-light a { color: #fff; } .social-icons.social-light.has-bg li a:hover { color: #ec5598; } .social-icons.social-dark a { color: #777; } .social-icons.social-dark.has-bg li a:hover { color: #ec5598; } .social-icons.social-square a, .social-icons.social-radius a { border: 1px solid rgba(0, 0, 0, 0.2); width: 24px; height: 24px; line-height: 24px; padding: 0; } .social-icons.social-square.social-md a, .social-icons.social-radius.social-md a { width: 36px; height: 36px; line-height: 36px; padding: 0; } .social-icons.social-square.social-lg a, .social-icons.social-radius.social-lg a { width: 40px; height: 40px; line-height: 40px; padding: 0; } .social-icons.social-square.social-primary a, .social-icons.social-radius.social-primary a { background-color: #ec5598; color: #FFF; border: 1px solid rgba(0, 0, 0, 0.1); } .social-icons.social-square.social-primary a:hover, .social-icons.social-radius.social-primary a:hover { background-color: #171f2c; } .social-icons.social-square.social-primary.has-bg a:hover, .social-icons.social-radius.social-primary.has-bg a:hover { border: 1px solid rgba(255, 255, 255, 1); } .social-icons.social-square.social-dark a, .social-icons.social-radius.social-dark a { background-color: #fff; } .social-icons.social-square.social-dark a:hover, .social-icons.social-radius.social-dark a:hover { background-color: #171f2c; color: #fff; } .social-icons.social-square.social-dark.has-bg a:hover, .social-icons.social-radius.social-dark.has-bg a:hover { border: 1px solid #ec5598; } .social-icons.social-square.social-darkest a, .social-icons.social-radius.social-darkest a { border: 1px solid #4a4c4c; } .social-icons.social-darkest a { color: #454747; } .social-icons.social-square.social-darkest a:hover, .social-icons.social-radius.social-darkest a:hover { background-color: #ec5598; color: #4a4c4c; } .social-icons.social-radius a { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .social-icons.social-square.social-dark.white-border a, .social-icons.social-radius.social-dark.white-border a { background: none; color: #fff; border: 1px solid rgba(255, 255, 255, 1); } /*12.1 social icon default */ .wt-social-icon { display: inline-block; margin: 0 -3px; padding: 0; } .wt-social-icon li { display: inline-block; padding: 0; font-size: 12px; } .wt-social-icon li a { display: inline-block; width: 24px; height: 24px; padding: 4px; } .wt-social-icon li .fa { vertical-align: middle; } /*12.2 social icon with border */ .wt-social-icon.border li { padding: 0 3px; } .wt-social-icon.border li a { border: 1px solid #efeded; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } /*12.3 social icon dark */ .wt-social-links.dark li { padding: 0 3px; } .wt-social-icon.dark li a { border: 1px solid #777777; color: #777777; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } /*12.4 social share icon style 1 */ .wt-share-icon li { border: none; width: 36px; display: block; float: left; white-space: nowrap; overflow: hidden; margin-right: 0; } .wt-share-icon li a { color: #FFF; } .wt-share-icon li i { border-right: none; font-size: 14px; color: #FFF; width: 36px; height: 34px; line-height: 34px; padding: 0; text-align: center; } .wt-share-icon li.fb { background: #354d89; } .wt-share-icon li.fb i { background: #3a5799; } .wt-share-icon li.gp { background: #d34b2b; } .wt-share-icon li.gp i { background: #e35736; } .wt-share-icon li.tw { background: #029fdf; } .wt-share-icon li.tw i { background: #00abf0; } .wt-share-icon li.dig { background: #1d61aa; } .wt-share-icon li.dig i { background: #2B6FB8; } .wt-share-icon li.lin { background: #0176be; } .wt-share-icon li.lin i { background: #0082CA; } .wt-share-icon li.pin { background: #ac0104; } .wt-share-icon li.pin i { background: #BD0E15; } .wt-share-icon li:hover { width: 90px; } /*------------------------------------- 13. Breadcrumb -------------------------------------*/ /*13.1 breadcrumb-row-1*/ .wt-breadcrumb { margin: 0; list-style: none; } .wt-breadcrumb li { padding: 0; margin-right: 3px; color: #333333; position: relative; display: inline-block; } .wt-breadcrumb li a { color: #ec5598; } .wt-breadcrumb li:last-child { color: #676767; } .wt-breadcrumb li:last-child:after { display: none; } /*13.2 Breadcrumb-1*/ .breadcrumb-style-1 li:after { content: "/"; margin-left: 7px; } /*13.3 Breadcrumb-2*/ .breadcrumb-style-2 li:after { content: "\f101"; margin-left: 7px; font-family: 'FontAwesome'; } /*13.4 breadcrumb-3*/ .breadcrumb-style-3 li { padding: 20px 15px 20px 20px; } .breadcrumb-style-3 li:after, .breadcrumb-style-3 li:before { content: ""; position: absolute; height: 50%; width: 1px; background-color: #e8e9e9; border-right: 1px solid #ccc; right: 0px; } .breadcrumb-style-3 li:after { top: 0px; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); -ms-transform: skew(30deg); transform: skew(30deg); } .breadcrumb-style-3 li:before { bottom: 0px; -webkit-transform: skew(-30deg); -moz-transform: skew(-30deg); -o-transform: skew(-30deg); -ms-transform: skew(-30deg); transform: skew(-30deg); } .breadcrumb-style-3 li:last-child:before { display: none; } /*------------------------------------- 14. Google map -------------------------------------*/ .google-map { width: 100%; } .google-map iframe { width: 100%; height: 300px; } .google-map-gray iframe { width: 100%; border: 0px; filter: grayscale(100%); } .contact-left-part .google-map iframe { height: 100%; } /*------------------------------------- 15. Progress Bar -------------------------------------*/ .progress .tooltip { position: relative; float: right; margin-top: 5px; } .progress .tooltip>.tooltip-inner { background-color: #212121; padding: 3px 10px; color: #fff; font-weight: bold; font-size: 12px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .progress .popOver+.tooltip>.tooltip-arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #212121; } .progress { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; overflow: visible; } .progress-bar { -webkit-transition: width 1.5s ease-in-out; transition: width 1.5s ease-in-out; } .wt-probar-1 { height: 4px; } .with-overlay.progress .tooltip>.tooltip-inner { background-color: #fff; color: #000; } .with-overlay.progress .popOver+.tooltip>.tooltip-arrow { border-top: 5px solid #fff; } /*------------------------------------- 16. Countdown clock -------------------------------------*/ .count-row { background: #333; } #countdown-clock { display: table; text-align: center; width: 80%; margin-left: -15px; border: 1px solid #3f3f3f; margin: 17px 0; } #countdown-clock span { display: table-cell; width: 1%; color: #FFF; padding: 5px 15px; text-transform: uppercase; font-weight: 600; color: #999; border-right: 1px solid #3f3f3f; } #countdown-clock span:last-child { border-right: none; } #countdown-clock span b { display: block; font-size: 25px; font-weight: 900; color: #FFF; } @media only screen and (max-width:991px) { #countdown-clock { width: 100%; } } /*------------------------------------- 17. Form elements -------------------------------------*/ label { font-weight: 600; margin-bottom: 10px; } .panel-default, .panel-default>.panel-heading { border-color: #e7ecf1; color: inherit; } .panel-default>.panel-heading+.panel-collapse>.panel-body { border-top-color: #e7ecf1; } .form-group { margin-bottom: 25px; } .form-control { border-color: #e1e6eb; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: 40px; font-size: 13px; line-height: 20px; padding: 9px 12px; } .form-control:focus { border-color: #e1e1e1; outline: 0; } .form-control:focus, .has-error .form-control:focus { -moz-box-shadow: none; -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; } /* 17.1 input group */ .input-group { width: 100%; } .input-group .form-control, .input-group-addon, .input-group-btn { display: table-cell; } .input-group-addon { background: #f1f1f1; border-color: #e1e1e1; font-size: 16px; width: 50px; line-height: 40px; text-align: center; display: inline-block; } .input-group-addon.font-size-20 { font-size: 20px; } .input-group-addon.fixed-w { text-align: center; padding: 6px 0; width: 40px; } .input-group-addon.v-align-t { line-height: 40px; } /* 17.2 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; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; outline: 0px !important; } .bootstrap-select:active, .bootstrap-select:focus { border: 0px !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; outline: 0px !important; } .bootstrap-select.open { box-shadow: none !important; outline: 0px !important; } .bootstrap-select.open .dropdown-toggle { box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; outline: 0px !important; } .bootstrap-select div.dropdown-menu { border: 1px solid #e9e9e9; border-radius: 0; -webkit-border-radius: 0; -moz-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%; -moz-border-radius: 100%; margin-right: 5px; } .bootstrap-select .bs-searchbox .form-control { padding: 5px 10px; height: 30px; } /* 17.3 radio & checkbox */ input[type=checkbox], input[type=radio] { opacity: 0; margin-left: 1px !important; } input[type=checkbox]+label, input[type=radio]+label { display: block; padding-left: 20px !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: #fff; border: 2px solid #b6b7b8; border-radius: 0px; content: ""; display: inline-block; height: 16px; line-height: 1; margin-left: -20px; position: absolute; top: 2px; transition: all linear 0.1s; 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; } input[type=checkbox]:checked+label:before { border-width: 7px; border-color: #3396d1; } input[type=checkbox]:checked+label:after { font-size: 10px; left: 2px; top: 2px; } input[type=radio]+label:before { border-radius: 50%; -webkit-border-radius: 50%; -moz-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; } /*17.4 Browse Button css */ .btn-file { overflow: hidden; position: relative; } .btn-file input[type="file"] { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; cursor: inherit; display: block; min-height: 100%; min-width: 100%; opacity: 0; position: absolute; right: 0; text-align: right; top: 0; } /*17.5 touchspin input type number */ .bootstrap-touchspin .input-group-btn-vertical { position: relative; white-space: nowrap; vertical-align: middle; display: table-cell; } .bootstrap-touchspin .input-group-btn-vertical>.btn { display: block; float: none; width: 100%; max-width: 100%; padding: 0px 10px 0px; margin-left: -1px; position: relative; background: #151414; height: 21px; line-height: 20px; border: 1px solid #ddd; } .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up { border-radius: 0; border-top-right-radius: 0; } .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { margin-top: -2px; border-radius: 0; border-bottom-right-radius: 0; } .bootstrap-touchspin .input-group-btn-vertical i { position: absolute; top: 4px; left: 5px; font-size: 9px; font-weight: normal; color: #9fa0a1; } /*17.6 rating star */ .input-rating input[type=radio] { display: none; } .input-rating input[type=radio]+label { display: inline-block; margin-left: -4px; padding-left: 0px !important; padding-right: 0px; width: 24px; } .input-rating input[type=radio]+label:first-of-type { margin-left: 0px; } .input-rating input[type=radio]+label:before { background-color: transparent; border: none; color: #ffd925; content: "\f006"; display: inline-block; font-family: FontAwesome; font-size: 20px; -webkit-font-smoothing: antialiased; height: 14px; line-height: 1; margin-left: 0px; position: static; text-align: center; top: 2px; transition: none; width: 14px; } .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"; } .input-rating input[type=radio]+label.hovered:before { content: "\f006"; } /*17.7 simple rating list */ .rating-bx { color: #ffd925; font-size: 14px; } .rating-bx i { margin: 0 2px; } .rating-container .rating-stars::before { text-shadow: none; } .rating-container { color: #c8c8c8; } .rating-container .rating-stars { color: #3396d1; } /*17.8 validation symbol */ .has-feedback label~.form-control-feedback { top: 31px; } /*17.9 error for select box */ .has-error .bootstrap-select .dropdown-toggle, .has-error .bootstrap-select .dropdown-toggle:hover, .has-error .bootstrap-select .dropdown-toggle:focus { border-color: #a94442 !important; } /*17.10 succes for select box */ .has-success .bootstrap-select .dropdown-toggle, .has-success .bootstrap-select .dropdown-toggle:hover, .has-success .bootstrap-select .dropdown-toggle:focus { border-color: #3c763d !important; } /*17.11 textarea */ /*17.11(1) resize-vertical*/ .resize-vertical { resize: vertical; } /*17.11(2) resize-horizontal*/ .resize-horizontal { resize: horizontal } /*17.11(3) resize-none*/ .resize-none { resize: none } /*------------------------------------- 18. Loading -------------------------------------*/ /*18.1 loading - 1*/ .loading-area { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9999; overflow: hidden; } .loading-box { width: 100%; height: 100%; background-color: #FFF; position: absolute; left: 0; top: 0; opacity: 1; z-index: 9999; } .loading-pic { width: 100%; position: absolute; top: 50%; z-index: 99999; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /*18.2 loading - 2*/ .loading-cover, .loading-srh-bar, .loading-map { background: rgba(255, 255, 255, 0.8); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .loading-cover .fa-spinner, .loading-srh-bar .fa-spinner, .loading-map .fa-spinner { position: absolute; left: 50%; top: 50%; margin: -10px; font-size: 25px; color: #333; } .wt-banner-outer { margin-bottom: 0; } .wt-success-top, .wt-error-top { margin-bottom: 0; } .alert-bx.alert-info { padding: 15px; border: 1px solid #bce8f1; } /*------------------------------------- 19. Widgets -------------------------------------*/ .widget { margin-bottom: 40px; } .widget-title { margin: 0 0 25px; } .widget-title, .widget-title-two, .widget-title-three { padding-bottom: 15px; position: relative; margin-bottom: 30px; } .widget-title-two:after, .widget-title-two:before, .widget-title-three:after, .widget-title-three:before { content: ""; position: absolute; margin: 10px 0; } .widget-title:after { content: ""; position: absolute; bottom: -10px; left: 0px; height: 3px; margin: 0 0 0; width: 70px; margin: 10px 0; background-color: #ec5598; } .widget-title:before { content: ""; position: absolute; bottom: -14px; left: 0; display: inline-block; width: 10px; height: 10px; border: 3px solid #2d3239; margin-bottom: 10px; display: none } .widget .widget-title, .widget .widget-title-two, .widget .post-title { text-transform: none; } .recent-posts-entry ul, .category-entry ul { margin: 0; list-style: none; padding: 0; } /* 19.1 widget listing*/ .widget_categories ul, .widget_archive ul, .widget_meta ul, .widget_pages ul, .widget_recent_comments ul, .widget_nav_menu ul, .widget_rss ul, .widget_recent_entries ul, .widget_getintuch ul, .widget_services ul { list-style: none; padding-left: 0; margin-bottom: 0; } .widget_categories ul li, .widget_archive ul li, .widget_meta ul li, .widget_pages ul li, .widget_recent_comments ul li, .widget_nav_menu li, .widget_recent_entries ul li, .widget_services ul li { padding-bottom: 18px; margin-bottom: 13px; border-bottom: 1px solid #e1e1e1; position: relative; padding: 10px 10px 10px 15px; margin-bottom: 0; line-height: 20px; } .widget_archive ul li span.badge { padding: 4px 7px; background-color: #ffbc13; margin: 0px 5px; } .widget_categories ul li a, .widget_archive ul li a, .widget_meta ul li a, .widget_pages ul li a, .widget_recent_comments ul li a, .widget_nav_menu li a, .widget_recent_entries ul li a, .widget_services ul li a { color: #767676; } .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_meta ul li a:hover, .widget_pages ul li a:hover, .widget_recent_comments ul li a:hover, .widget_nav_menu li a:hover, .widget_recent_entries ul li a:hover, .widget_services ul li a:hover { color: #ec5598; } .widget_categories ul li:before, .widget_archive ul li:before, .widget_meta ul li:before, .widget_pages ul li:before, .widget_recent_comments ul li:before, .widget_nav_menu ul li:before, .widget_useful_links ul li:before, .widget_recent_entries ul li:before, .widget_services ul li:before { content: "\f105"; position: absolute; left: 0; top: 10px; display: block; font-family: "FontAwesome"; } .widget_categories ul li li, .widget_archive ul li li, .widget_meta ul li li, .widget_pages ul li li, .widget_recent_comments ul li li, .widget_nav_menu li li, .widget_services li li { border-bottom: none; padding-left: 10px; padding-right: 5px; padding-top: 0; padding-bottom: 0; line-height: 28px; } .widget_categories ul li li:before, .widget_archive ul li li:before, .widget_meta ul li li:before, .widget_pages ul li li:before, .widget_recent_comments ul li li:before, .widget_nav_menu li li:before, .widget_services li li:before { top: 0; left: -8px; } /*19.2 widget search custom*/ .search-bx .btn { border-left-color: #FFF; padding: 9px 10px; color: #3396d1; } /*19.3 widget search wp-default*/ .widget_search .screen-reader-text { display: block; } .searchform { position: relative; } .searchform input[type="text"] { width: 100%; height: 40px; padding: 10px 90px 10px 15px; border: 1px solid #CCCCCC; } .searchform input[type="submit"] { height: 40px; padding: 10px 15px; background-color: #ec5598; position: absolute; right: 0; bottom: 0; color: #ffffff; border-left: none; border-right: none; border-top: none; border-bottom: none; } .searchform input[type="submit"]:hover, .searchform input[type="submit"]:focus, .searchform input[type="submit"]:active { background-color: #6ab33e; color: #ffffff !important; border-bottom-color: #5a9e2f; } /*19.4 widget recent-posts*/ .recent-posts-entry .post-date, .tweets-feed-entry .tweet-date { color: #3396d1; font-style: normal; } .widget .post-title { font-size: 13px; line-height: 16px; margin-bottom: 8px; } .recent-posts-entry .widget-post { margin-bottom: 5px; padding: 5px; } .recent-posts-entry .widget-post-bx:last-child { border-bottom: none; } .recent-posts-entry .wt-post-media { float: left; width: 65px; } .recent-posts-entry .wt-post-info { background: transparent; padding: 0; margin-left: 80px; border: none; } .recent-posts-entry .post-meta span { margin-right: 10px; } /*19.5 widget recent-comment*/ .widget_recent_comments ul li:before { content: "\f0e6"; } .widget_recent_comments ul li { padding-left: 20px; color: #999; } /*19.6 widget meta*/ .widget_meta ul li a abbr[title] { color: #333; border-bottom: none; } /*19.7 widget calender*/ .widget_calendar caption::after { color: #707070; content: ">"; font-family: "FontAwesome"; margin: 0 0 0 5px; } .widget_calendar table { border-collapse: separate; border-spacing: 2px; width: 100%; } .widget_calendar caption { background-color: #E0E0E0; padding: 8px 10px; color: #1a1a1a; text-transform: uppercase; font-weight: 600; } .widget_calendar thead { background-color: #E63F75; } .widget_calendar tfoot tr td { border: none; padding: 0px } .widget_calendar tfoot tr td a { background-color: #fff; padding: 4px 10px } .widget_calendar table thead tr th { font-size: 11px; padding: 5px; text-align: center; border: none; color: #fff; } .widget_calendar table tbody td { font-size: 13px; padding: 6px 5px; text-align: center; background-color: #f9f9f9; border: none; color: #444; } .widget_calendar table tbody td#today { background-color: #FFBC13; color: #FFF; } .widget_calendar table tbody td#today a { color: #FFF; } /*19.8 widget tags-list*/ .widget_tag_cloud a { padding: 12px 14px; background-color: #f6f7f8; font-size: 14px; display: inline-block; margin: 0 0 5px; color: #333; -webkit-border-radius: 20px; border-radius: 20px; } .side-bar .widget_tag_cloud a:hover { background-color: #CCCCCC; } /*19.9 widget archive*/ .widget_archive select { width: 100%; padding: 5px; border: 1px solid #CCC; } /*19.10 widget text*/ .widget_text select { width: 100%; padding: 5px; border: 1px solid #CCC; } .widget_text select option { width: 100%; } /*19.11 widget categories*/ .widget_categories li { text-align: right; } .widget_categories li a { float: left; } .widget_categories li span.badge { padding: 4px 7px; background-color: #ffbc13; } .widget_categories .dropdown-menu li:before { left: 5px; top: 5px; } .widget_categories li a:hover { color: #ec5598; } /*19.12 widget RSS*/ .widget_rss ul { margin: 0; line-height: 20px; } .widget_rss ul li { line-height: 20px; margin-bottom: 15px; } .widget_rss ul .rsswidget { color: #333; } .widget_rss ul .rss-date { color: #999999; font-style: italic; } .widget_rss ul .rssSummary { padding: 5px 0; } .widget_rss ul cite { color: #333; font-weight: 600; } /* 19.13 widget get in tuch */ .widget_getintuch { padding-top: 10px; } .widget_getintuch li { margin-bottom: 20px; position: relative; padding-left: 40px; } .widget_getintuch b, .widget_getintuch strong { display: block; text-transform: uppercase; } .widget_getintuch i { color: #fff; position: absolute; left: 0; top: 5px; text-align: center; font-size: 14px; width: 30px; height: 30px; line-height: 30px; background-color: #EC5598; } /* 19.14 widget gallery */ .widget_gallery ul { padding-left: 0; } .widget_gallery li { display: inline-block; margin-bottom: 5px; width: 23.8%; background-color: #000; } .widget_gallery li a { position: relative; } .widget_gallery li a:after { content: "\f00e "; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; font-size: 16px; color: #fff; margin: -10px; opacity: 0; } .widget_gallery li:hover img { margin-bottom: 0; opacity: 0.6; } .widget_gallery li:hover a:after { opacity: 1; } .widget_gallery a { display: block; } @media only screen and (max-width:991px) { .widget_gallery li { width: 24.333%; } } @media only screen and (max-width:480px) { .widget_gallery li { width: 32.1%; } } /* 19.15 widget Categories Dropdown */ .widget_categories .dropdown-menu ul li::before { display: none; } .widget_categories .dropdown-menu ul li { border: none; text-align: left; } .widget_categories .dropdown-menu ul li a { float: none; } /* 19.16 widget Form */ .widget-quick-form .form-group { margin-bottom: 10px; } .widget-quick-form input, .widget-quick-form button, .widget-quick-form textarea { -webkit-border-radius: 20px; border-radius: 20px; padding: 10px 20px; resize: none; border: none; } .widget-quick-form input, .widget-quick-form textarea { background-color: #f6f7f8; } .widget-quick-form .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #1a1a1a; font-weight: bold; } .widget-quick-form .form-control::-moz-placeholder { /* Firefox 19+ */ color: #1a1a1a; font-weight: bold; } .widget-quick-form .form-control:-ms-input-placeholder { /* IE 10+ */ color: #1a1a1a; font-weight: bold; } .widget-quick-form .form-control:-moz-placeholder { /* Firefox 18- */ color: #1a1a1a; font-weight: bold; } .widget_newsletter-2 .newsletter-bx { background-color: #f6f7f8; position: relative; z-index: 9; overflow: hidden; } .widget_newsletter-2 .newsletter-bx .newsletter-icon { position: absolute; right: 5px; top: -5px; } .widget_newsletter-2 .newsletter-bx .newsletter-icon i { font-size: 75px; z-index: 0; color: rgba(0, 0, 0, 0.05); } /* 19.18 widget client slider */ .widget-client { background-color: #f6f7f8; } .widget-client .ow-client-logo { background-color: #f6f7f8; } /* 19.19 widget_twitter */ .widget_twitter {} .widget_twitter ul { margin-left: 15px; margin-bottom: 0px; list-style: none; } .widget_twitter ul li { position: relative; padding-bottom: 15px; } .widget_twitter ul li .twitter-w-icon { position: absolute; left: -24px; font-size: 18px; top: 2px; } .widget_twitter a.site-button.outline.black { padding: 6px 14px; border-color: #E6E6E6; } /*------------------------------------- 20. Table -------------------------------------*/ .table-behavior { display: table; } .table-behavior .table-cell-behavior { display: table-cell; float: none; } table.table-bordered { border-color: #ddd !important; } /* 20.1 Full-responsive */ .wt-responsive-table td, .wt-responsive-table th { padding: 12px !important; } @media only screen and (max-width: 800px) { #no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th, #no-more-tables td, #no-more-tables tr { display: block; } #no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; display: none; } #no-more-tables tr { border: 1px solid #ccc; } #no-more-tables td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50% !important; white-space: normal; text-align: left; } #no-more-tables td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; } #no-more-tables td:before { content: attr(data-title); } } /*------------------------------------- 21. Video -------------------------------------*/ .yt-thum-box img { margin: -9.5% 0%; } /*------------------------------------- 22. Icons -------------------------------------*/ .bs-glyphicons-wrap [class*="col-"], .fa-icon-wrap [class*="col-"], .outline-fonts-wrap [class*="col-"] { display: block; min-height: 100px; padding: 10px; } .outline-fonts-wrap [class*="col-"] { min-height: 120px; } .bs-glyphicons-wrap [class*="col-"] a, .fa-icon-wrap [class*="col-"] a, .outline-fonts-wrap [class*="col-"] a { display: grid; } .bs-glyphicons-wrap [class*="col-"] span, .fa-icon-wrap [class*="col-"] span, .outline-fonts-wrap [class*="col-"] span { display: block; text-align: center; color: #767676; } .bs-glyphicons-wrap [class*="col-"] span.glyphicon, .fa-icon-wrap [class*="col-"] span.fa { display: table; padding: 5px; font-size: 24px; margin: 0px auto; } .bs-glyphicons-wrap [class*="col-"] span.glyphicon-class, .fa-icon-wrap [class*="col-"] span.fa-icon-info, .outline-fonts-wrap [class*="col-"] span.flaticon-info { font-size: 13px; } .bs-glyphicons-wrap [class*="col-"]:hover, .fa-icon-wrap [class*="col-"]:hover, .outline-fonts-wrap [class*="col-"]:hover { background-color: #171f2c; color: #fff; } .bs-glyphicons-wrap [class*="col-"]:hover span, .fa-icon-wrap [class*="col-"]:hover span, .outline-fonts-wrap [class*="col-"]:hover span { color: #fff; } /*------------------------------------- 23. Call to action -------------------------------------*/ .call-to-action-wrap { display: flex; align-items: center; padding: 30px 0px; } .call-to-action-left { color: #fff; max-width: 750px; } .call-to-action-left h1, .call-to-action-left h2, .call-to-action-left h3, .call-to-action-left h4, .call-to-action-left h5, .call-to-action-left h6, .call-to-action-left p { color: #fff; } .call-to-action-left p:last-child { margin-bottom: 0; } .call-to-action-right { text-align: right; } @media only screen and (max-width:767px) { .call-to-action-right { text-align: left; } } .call-to-action-skew .call-to-action-left { position: relative; } @media only screen and (max-width:991px) { .call-to-action-wrap { justify-content: start; } .call-to-action-right { text-align: left; padding-top: 30px; } } @media only screen and (max-width:767px) { .call-to-action-skew .call-to-action-left::after { right: -15px; border-right: none; } .call-to-action-skew .call-to-action-left.p-r50 { padding-right: 0; } .call-to-action-skew .call-to-action-right { padding-top: 45px; } } .call-to-action-skew .call-to-action-left>* { position: relative; z-index: 2; } /*====================================== 12. WP DEFAULT ======================================*/ .alignnone { margin: 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 15px; } .alignright { float: right; margin: 5px 0 25px 25px; } .alignleft { float: left; margin: 5px 25px 25px 0; } a img.alignright { float: right; margin: 5px 0 25px 25px; } a img.alignnone { margin: 5px 0 25px 0; } a img.alignleft { float: left; margin: 5px 25px 25px 0; } a img.aligncenter { display: block; margin: 5px auto 15px; } .wp-caption { max-width: 100%; text-align: center; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0; } .wp-caption.alignnone { margin: 5px 0 25px 0; } .wp-caption.alignleft { margin: 5px 25px 25px 0; } .wp-caption.alignright { margin: 5px 0 25px 25px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 100%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { color: #9d9d9d; font-size: 13px; line-height: 18px; margin: 0; padding: 10px 0; text-align: left; } blockquote { padding: 30px 20px 30px 80px; font-size: 18px; font-style: italic; color: #555555; margin: 40px 0; line-height: 30px; position: relative; background: #f6f6f6; clear: both; border: none; font-family: 'Crete Round', serif; } blockquote p { font-size: 14px; color: #555555; line-height: 30px; margin-bottom: 0px; } blockquote:before { content: '\f10d'; font-family: "FontAwesome"; color: #555555; font-size: 35px; position: absolute; left: 20px; top: 38px; font-style: normal; } @media only screen and (max-width:640px) { blockquote { padding: 80px 20px 20px 20px; } } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } /*====================================== 13. BLOG ======================================*/ .date-style-3 .wt-post-media { border-bottom: 3px solid #ec5598; } .blog-post { position: relative; margin-bottom: 40px; } .wt-post-title { margin-bottom: 10px; } .wt-post-title .post-title { margin: 0; font-weight: normal; } .wt-post-meta { margin-bottom: 10px; } .wt-post-meta ul { margin: 0 -4px; list-style: none; } .wt-post-meta li { padding: 0; display: inline-block; font-style: italic; font-size: 14px; font-family: 'Crete Round', serif; } .wt-post-meta a { color: #a9a9a9; } .wt-post-meta i { color: #7b7b7b; margin: 0 5px; } .wt-post-meta li:after { content: "/"; display: inline-block; font-weight: normal; margin-left: 5px; opacity: 0.5; } .wt-post-meta li:last-child:after { display: none; } .wt-post-text { margin-bottom: 15px; } .wt-post-text p:last-child { margin: 0; } .wt-post-readmore { margin-bottom: 0px; } .wt-post-readmore a { font-family: 'Crete Round', serif; font-size: 16px; font-style: italic; text-decoration: underline; } .wt-post-tags { padding-top: 10px; } .wt-post-tags .post-tags { margin: 0 -3px; list-style: none; } .wt-post-tags .post-tags a { border: 1px solid #ddd; padding: 2px 8px; color: #a9a9a9; margin: 0 3px 5px 3px; display: inline-block; text-transform: uppercase; font-size: 10px; font-weight: 600; } .wt-post-tags .post-tags a:hover { background-color: #ec5598; color: #fff; } /*------------------------------------- 1. post date syle css -------------------------------------*/ .date-style-2 .post-date { color: #fff; position: absolute; left: 20px; top: 0; width: 50px; text-align: center; text-transform: uppercase; background-color: #ec5598; z-index: 1; } .date-style-2 .post-date strong, .date-style-2 .post-date span { display: block; padding: 10px 5px; } .date-style-2 .post-date strong { font-size: 10px; padding: 10px 5px 5px; position: relative; background-color: #171f2c; } .date-style-2 .post-date span { font-size: 16px; padding: 5px 5px 10px; } .date-style-2 .post-date:after, .date-style-2 .post-date .fa, .date-style-3 .post-date:after { display: none; } .date-style-3 .wt-post-info { position: relative; } .date-style-3 .post-date { background-color: #171f2c; text-transform: uppercase; position: absolute; padding: 8px 15px; color: #fff; top: -39px; left: 0; height: 36px; z-index: 1; } .date-style-3 .post-date i { position: relative; background: #ec5598; color: #fff; display: inline-block; text-align: center; width: 40px; height: 36px; line-height: 36px; margin-top: -8px; margin-left: -15px; margin-right: 15px; } .date-style-3 .post-date strong { color: #ec5598; margin-right: 2px; } .date-style-3.date-skew .post-date i { margin-right: 35px; } .date-style-3.date-skew .post-date i::after { background-color: #ec5598; content: ""; height: 100%; position: absolute; right: -12px; width: 25px; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); -ms-transform: skew(30deg); transform: skew(30deg); } .date-style-3.date-skew .post-date:before { content: ""; position: absolute; background-color: #171f2c; right: -12px; top: 0px; height: 100%; width: 25px; z-index: 1; display: block; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); -ms-transform: skew(30deg); transform: skew(30deg); } .recent-posts-entry-date .widget-post:last-child { border: none; } .recent-posts-entry-date .wt-post-date { background-color: #0e0e0e; width: 50px; height: 60px; float: left; } .recent-posts-entry-date .wt-post-date strong { display: block; font-size: 24px; } .recent-posts-entry-date .wt-post-date span { display: block; font-size: 11px; text-transform: uppercase; font-weight: 600; } .recent-posts-entry-date .wt-post-info { margin-left: 70px; } .recent-posts-entry-date .wt-post-info .wt-post-meta ul li { font-weight: normal; font-size: 12px; } .recent-posts-entry-date .wt-post-info .post-title { font-weight: bold; margin-top: 0px; } /*------------------------------------- 2. post without media -------------------------------------*/ .no-image-blog.date-style-2 .algo-post-info { padding-top: 70px; } .no-image-blog.date-style-2 .post-date { top: 0; left: 20px; } /*if no image with blog post*/ .blog-post.no-img-post .post-date { position: static; float: left; } /*------------------------------------- 3. if no image with blog post -------------------------------------*/ .blog-md .wt-post-media { width: 350px; float: left; margin-right: 30px; } .blog-md .wt-post-info { border: none; } .blog-md .wt-post-tags { border: none; display: inline-block; padding: 0; } @media only screen and (max-width:767px) { .blog-md.blog-post .wt-post-media { float: none; margin: 0 0 20px; width: auto; } } /*------------------------------------- 4. blog post half image -------------------------------------*/ .nav-links:after { clear: both; content: ""; display: table; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } .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; } /*------------------------------------- 5. Blog paging Next & Prev css -------------------------------------*/ .nav-links .nav-previous a, .nav-links .nav-next a { display: inline-block; color: #3396d1; font-weight: 600; margin-bottom: 20px; outline: none !important; } .nav-links .nav-previous a:hover, .nav-links .nav-next a:hover { color: #0099CC; } .nav-links .nav-previous a:after, .nav-links .nav-next a:after { content: "\f105"; font-family: "FontAwesome"; vertical-align: middle; margin-left: 2px; color: #333; } /*------------------------------------- 6. Post navigation -------------------------------------*/ .post-navigation { background-color: #fff; padding: 30px; border-bottom: 2px solid #e3e3e3; } .post-navigation .screen-reader-text { margin-top: 0; } .post-navigation .nav-previous, .post-navigation .nav-next { display: inline-block; width: 50%; } .post-navigation .nav-next { text-align: right; } .post-navigation .nav-previous a:after, .post-navigation .nav-next a:after { display: none; } .post-navigation .nav-previous .post-title, .post-navigation .nav-next .post-title { display: block; font-size: 15px; color: #777777; margin-top: 10px; } /*------------------------------------- 7. post pagination -------------------------------------*/ .wt-link-pages { padding: 20px 0 30px; } .wt-link-pages a { color: #fff; padding: 2px 6px; font-size: 12px; font-weight: 600; background-color: #CCC; margin: 0 2px; } /*7.1 Sticky Post*/ .sticky-post { position: absolute; right: 0; top: 0; background: #77c04b; color: #FFF; padding: 10px 15px; text-transform: uppercase; font-weight: 600; } /*------------------------------------- 8. Post password form -------------------------------------*/ .post-password-form { position: relative; clear: both; } .post-password-form input[type="password"] { width: 100%; border: 1px solid #ddd; padding: 10px 100px 10px 15px; height: 40px; } .post-password-form label { display: block; } .post-password-form input[type="submit"] { position: absolute; bottom: 0; right: 0; padding: 10px 20px; background-color: #333; color: #FFF; border: none; height: 40px; text-transform: uppercase; font-weight: 600; } /*------------------------------------- 9. 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; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-icon img { margin: 0 auto; } .gallery-caption { color: #707070; color: rgba(51, 51, 51, 0.7); display: block; font-size: 12px; font-size: 1.2rem; line-height: 1.5; padding: 0.5em 0; } .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /*------------------------------------- 10. side bar -------------------------------------*/ .side-bar .widget { margin-bottom: 30px; } @media only screen and (max-width: 991px) { .side-bar { margin-bottom: 40px; } } /*------------------------------------- 11. Blog single -------------------------------------*/ .blog-detail .wt-post-media { margin-bottom: 30px; } /*------------------------------------- 12. comment list -------------------------------------*/ .comments-area { padding: 0; } .comments-area .comments-title { text-transform: uppercase; font-size: 20px; } ol.comment-list { list-style: none; margin-bottom: 0; padding-left: 0; } ol.comment-list li.comment { position: relative; padding: 0; } ol.comment-list li.comment .comment-body { position: relative; padding: 20px 30px 20px 60px; margin-bottom: 40px; margin-left: 40px; position: relative; border: 1px solid #f2f2f2; border-left: 5px solid #f2f2f2; } ol.comment-list li.comment .comment-author { display: block; margin-bottom: 10px; } ol.comment-list li.comment .comment-author .avatar { position: absolute; top: 20px; left: -50px; width: 90px; height: 90px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border: 2px solid #F2F2F2; padding: 5px; background-color: #fff; } ol.comment-list li.comment .comment-author .fn { display: inline-block; color: #555555; font-size: 14px; text-transform: uppercase; 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; margin-bottom: 15px; font-family: 'Crete Round', serif; font-size: 16px; } ol.comment-list li.comment .comment-meta a { color: #8d8d8d; } ol.comment-list li.comment .comment-meta a { color: #8d8d8d; } ol.comment-list li.comment .comment-meta:before, ol.comment-list li.comment .reply a:before { font-family: "FontAwesome"; font-size: 16px; vertical-align: top; } ol.comment-list li.comment .comment-meta:before { content: "\f133"; } ol.comment-list li.comment .reply a:before { content: "\f112"; font-weight: normal; color: #555555; margin-right: 5px; vertical-align: middle; } ol.comment-list li.comment p { line-height: 18px; margin: 0 0 5px; } ol.comment-list li.comment .reply a { position: absolute; top: 50px; right: 30px; margin-top: -5px; color: #ffbc13; font-weight: 600; } 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; margin-left: 30px; } ol.comment-list li.comment .comment-author .avatar { left: -35px; height: 70px; width: 70px; } 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-body { margin-left: 26px; } ol.comment-list li.comment .comment-author .avatar { left: -30px; top: 12px; width: 60px; height: 60px; } ol.comment-list li.comment .comment-body { padding-left: 40px; } } /*------------------------------------- 13. comment form -------------------------------------*/ .comment-respond {} .comment-respond .comment-reply-title { text-transform: uppercase; font-size: 20px; } .comment-respond .comment-reply-title { font-size: 16px; font-weight: 600; } .comments-area .comment-form { margin: 0 -15px; } .comments-area .comment-form .comment-notes { display: none; } .comments-area .comment-form p { width: 33.333%; float: left; padding: 0 15px; margin-bottom: 30px; position: relative; font-weight: 600; } .comments-area .comment-form p.form-allowed-tags { width: 100%; } ol.comment-list li.comment .comment-respond .comment-form p { padding: 0 15px !important; } .comments-area .comment-form p label { display: none; line-height: 18px; margin-bottom: 10px; } .comments-area p::before { font-family: "FontAwesome"; display: inline-block; position: absolute; left: 15px; top: 0px; font-size: 16px; color: #8f8f8f; width: 40px; height: 40px; line-height: 40px; border: none; text-align: center; } .comments-area p.comment-form-author:before { content: "\f007"; } .comments-area p.comment-form-email:before { content: "\f0e0"; } .comments-area p.comment-form-url:before { content: "\f0ac"; } .comments-area p.comment-form-comment:before { content: "\f040"; } .comments-area .comment-form p input[type="text"], .comments-area .comment-form p textarea { width: 100%; height: 40px; padding: 10px 10px 10px 50px; border: none; background-color: #f3f3f3; } .comments-area .comment-form p.comment-form-comment { width: 100%; display: block; clear: both; } .comments-area .comment-form p textarea { height: 120px; resize: none; } .comments-area .comment-form p.form-submit { clear: both; float: none; width: 100%; margin: 0; } .comments-area .comment-form p input[type="submit"] { background-color: #77c04b; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-width: 0; color: #fff; display: inline-block; font-weight: 600; padding: 10px 20px; text-transform: uppercase; } .comments-area .comment-form p input[type="submit"]:hover, .comments-area .comment-form p input[type="submit"]:focus, .comments-area .comment-form p input[type="submit"]:active { background-color: #6ab33e; border-color: #6ab33e; color: #fff; } .comment-respond .form-submit .site-button { width: 100%; font-weight: 700; padding: 15px 20px; } @media only screen and (max-width: 767px) { .comments-area .comment-form p { width: 100%; float: none; margin-bottom: 20px; } .comment-respond { padding: 20px 0px; } } /*------------------------------------- 14. blog block style-1 -------------------------------------*/ .blog-post-demo-one [class*="col-"]:nth-child(even) .wt-post-media { display: table-footer-group; } .blog-post-demo-one [class*="col-"]:nth-child(even) .wt-post-media a { display: block; overflow: hidden; } .blog-post-demo-one [class*="col-"]:nth-child(even) .wt-post-info { display: table-header-group; } .blog-post-demo-one [class*="col-"]:nth-child(even) .date-style-3 .wt-post-info, .blog-post-demo-one [class*="col-"]:nth-child(even) .date-style-2 .wt-post-info { position: static; } .blog-post-demo-one [class*="col-"]:nth-child(even) .date-style-3 .post-date, .blog-post-demo-one [class*="col-"]:nth-child(even) .date-style-2 .post-date { bottom: 0px; top: auto; } .blog-block-img { background-position: center center; background-size: cover; display: block; height: 250px; width: 100%; } .wt-post-info-inner { padding: 50px; height: 250px; } .blog-post-demo-one { margin-bottom: 30px; } .blog-post-demo-one .wt-post-media { position: relative; } .wt-blog-post-direction { text-align: center; position: absolute; width: 100%; bottom: -20px; color: #F5F6F6; } .wt-blog-post-direction span { display: inline-block; font-size: 40px; } .blog-post-demo-one .wt-post-media:after { position: absolute; content: ""; bottom: 0px; left: 50%; margin-left: -8px; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid #ffffff; } .blog-post-demo-one .blog-post { margin-bottom: 0px; } .blog-post-demo-one [class*="col-"] { display: flex; } .blog-post-demo-one [class*="col-"]:nth-child(even) .wt-post-media:after { top: 0px; bottom: auto; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid #F5F6F6; border-bottom: none; } @media only screen and (max-width:1280px) { .wt-post-info-inner { padding: 20px; } } @media only screen and (max-width:767px) { .wt-post-info-inner { height: auto; } .blog-post-demo-one .blog-post { margin-bottom: 30px; } } /*------------------------------------- 15. blog grid-post -------------------------------------*/ .blog-post .grid-post {} .blog-post .grid-post li { float: left; width: 50%; border-right: 4px solid #fff; border-bottom: 4px solid #fff; list-style: none; } .blog-post .grid-post li .portfolio-item { width: 100%; } .portfolio-item { width: 100%; position: relative; overflow: hidden; color: #fff; width: 100%; border: 0; position: relative; } .blog-post .grid-post li img { width: 100%; } /*------------------------------------- 16. if no image with blog post Latest-blog-3 -------------------------------------*/ .latest-blog-3.post-overlay .wt-post-info { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: table; } .latest-blog-3.post-overlay { height: 512px; } .latest-blog-3.post-overlay .wt-post-info .post-overlay-position { display: table-cell; vertical-align: bottom; } .latest-blog-3.post-overlay .wt-post-meta a { color: #fff; } .latest-blog-3.post-overlay .wt-post-meta i { color: #FF9800; } .latest-blog-3.post-overlay.date-style-3 .post-date { top: 0px; } .latest-blog-3.post-overlay.date-style-3 .wt-post-meta .post-date i { color: #fff; } .latest-blog-3.blog-md .wt-post-media { width: 230px; float: left; margin-right: 30px; } .latest-blog-3.blog-md .wt-post-info { border: none; overflow: hidden; } @media only screen and (max-width:640px) { .latest-blog-3.blog-md .wt-post-info { overflow: visible; } } .latest-blog-3.blog-md .wt-post-tags { border: none; display: inline-block; padding: 0; } .latest-blog-3.blog-md .wt-post-meta i { color: #FF9800; } .latest-blog-3.blog-md.date-style-3 .post-date { bottom: -10px; top: auto; } .latest-blog-3.blog-md.date-style-3 .wt-post-meta .post-date i { color: #fff; } @media only screen and (max-width:991px) { .latest-blog-3.post-overlay { height: 360px; } } @media only screen and (max-width:640px) { .latest-blog-3.blog-md .wt-post-media { width: 100%; } } /*====================================== 14. HEADER (top part of page) ======================================*/ .site-header { position: relative; z-index: 996; } @media only screen and (max-width:1200px) { .site-header .container { width: auto; } } .site-header ul, .site-header ol { margin-bottom: 0; } /*------------------------------------- 1. header full screen -------------------------------------*/ .nav-wide .container { width: 100%; } /*------------------------------------- 2. without top bar -------------------------------------*/ .extra-nav { float: right; padding: 23px 0; position: relative; z-index: 9; } .extra-nav .extra-cell { display: inline-block; margin-left: 10px; } @media only screen and (max-width:480px) { .extra-nav { width: 100%; clear: both; margin: 0; text-align: right; } } /*------------------------------------- 3. map page header -------------------------------------*/ #header-part.fix-map-header { height: 90px; } #header-part.fix-map-header .main-bar { position: fixed; top: 0; left: 0; z-index: 1; } @media only screen and (max-width:480px) { #header-part.fix-map-header { height: 160px; } } /*====================================== 15. PAGE TOP BAR (left & right content) ======================================*/ .top-bar { color: #ffffff; padding: 10px 0; } .top-bar .fa { vertical-align: middle; background-color: rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.01); padding: 3px; width: 22px; height: 22px; text-align: center; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; } .wt-topbar-left:after, .wt-topbar-right:after, .wt-topbar-center:after { content: ""; display: table; clear: both; } .wt-topbar-center { padding-left: 15px; padding-right: 15px; } .wt-topbar-left { float: left; padding-right: 15px; } .wt-topbar-right { float: right; padding-left: 15px; } .wt-topbar-center { text-align: center; } @media only screen and (max-width: 767px) { .wt-topbar-left, .wt-topbar-right { float: none; padding-top: 5px; padding-bottom: 5px; } .wt-topbar-left { text-align: right; } .wt-topbar-left .pull-left { float: none !important; } .wt-topbar-left { padding-right: 0px; } } /*------------------------------------- 1. eamil-phone (left) -------------------------------------*/ .e-p-bx li { display: inline; font-size: 12px; padding-right: 10px; } .e-p-bx li a { color: #FFF; } .e-p-bx li i { margin-right: 5px; vertical-align: middle; } @media only screen and (max-width: 767px) { .e-p-bx li { padding-right: 0; padding-left: 10px; } .e-p-bx li i { margin-right: 0; } } /*------------------------------------- 2. social-links (right) -------------------------------------*/ .social-bx, .login-bx { margin: 0 0 0 15px; float: right; } @media only screen and (max-width: 480px) { .social-bx, .e-p-bx, .login-bx { margin-top: 5px; margin-bottom: 5px !important; } } .social-bx li, .login-bx li { font-size: 12px; margin: 0; position: relative; } .social-bx li { padding-left: 2px; padding-right: 2px; } .social-bx li a, .login-bx li a { color: #ffffff; } .social-bx li i, .login-bx li i { vertical-align: baseline; margin: 0 5px 0 0; } .social-bx li span, .login-bx li span { vertical-align: baseline; margin: 0 2px 0; font-size: 8px; } .login-bx li ul { top: 25px; left: auto; right: 0; border: none; padding: 0; } .login-bx li ul li { border-bottom: 1px solid #F7F7F7; } .login-bx li ul li a { color: #767676; padding: 9px 15px; } .arrow-up-border:before, .arrow-up:after { position: absolute; display: inline-block; content: ''; } .arrow-up-border:before { top: -7px; right: 19px; border-right: 7px solid transparent; border-bottom: 7px solid #F00; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); } .arrow-up:after { top: -6px; right: 20px; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; } .arrow-left:before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .arrow-left:after { position: absolute; top: -6px; left: 10px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } /*------------------------------------- 3. language-list () -------------------------------------*/ .language-bx li { display: inline; margin: 0 10px; } /*====================================== 16. LOGO ( company identify symbol ) ======================================*/ /*------------------------------------- 1. logo for header -------------------------------------*/ .logo-header { display: table; float: left; vertical-align: middle; padding: 0; font-size: 36px; color: #1bbce8; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; width: 220px; height: 90px; position: relative; z-index: 9; } @media only screen and (max-width:991px) { .logo-header { width: 180px; } .header-skew::before, .header-skew::after { bottom: -10px; height: 127%; } } @media only screen and (max-width:480px) { .logo-header { width: 100px; } .header-skew::before, .header-skew::after { bottom: -9px; height: 120%; } } .logo-footer { display: table; vertical-align: middle; padding: 0; font-size: 36px; color: #1bbce8; margin-top: 15px; margin-bottom: 15px; margin-left: 0; margin-right: 0; max-width: 200px; height: 60px; } .logo-header>a, .logo-footer>a { display: table-cell; vertical-align: middle; } .logo-header.center-block { margin-left: auto; margin-right: auto; float: none; } .logo-header img, .logo-footer img { max-width: 100%; width: auto; height: 100px; vertical-align: middle; } .logo-header span, .logo-footer span { font-size: 20px; color: #1bbce8; letter-spacing: 20px; } /*------------------------------------- 2. when header is sticky -------------------------------------*/ .is-fixed .logo-header { height: 70px; } /*====================================== 17. MAIN BAR ( place logo & main-navigation ) ======================================*/ .main-bar { position: relative; width: 100%; } .main-bar::after, .main-bar::after { clear: both; content: ""; display: table; } /*main bar with box view*/ .boxed .is-fixed .main-bar { max-width: 1200px; margin: 0 -600px; left: 50%; } @media only screen and (max-width: 1200px) { .boxed .is-fixed .main-bar { margin: 0; left: 0; } } .boxed .site-header .container { width: auto; } @media only screen and (max-width: 991px) { .sticky-wrapper { height: auto !important; } } /*header info css*/ .header-info { float: right; padding: 10px 0; } .header-info>ul { list-style: none; display: table; } .header-info>ul li { display: table-cell; padding: 15px 10px; vertical-align: middle; } .header-info>ul li .icon-sm { float: left; margin-right: 15px; } .header-info>ul li strong { display: block; font-size: 16px; text-transform: uppercase; color: #273447; } @media only screen and (max-width: 991px) { .header-info>ul li { display: none; } .header-info>ul li.btn-col-last { display: block; padding-left: 0; padding-right: 0; } } @media only screen and (max-width:767px) { .header-info>ul li.btn-col-last, .header-info { display: none; } } .header-botton { background-color: #171f2c; } .header-botton .header-nav .nav { float: none; } .header-botton .header-nav .nav>li>a { padding: 20px 12px; color: #fff; } .header-botton .extra-nav { padding: 13px 0; } .header-botton .extra-nav .site-search-btn { color: #fff; padding: 7px 15px; } .header-botton .extra-nav .wt-cart .woo-cart-count { border: 2px solid #fff; color: #fff; min-width: 36px; padding: 5px 5px 5px; } .header-botton .extra-nav .wt-cart .woo-cart-count::before { border-color: #fff; } @media only screen and (max-width:991px) { .header-botton .navbar-toggle { float: left; margin: 9px 0; } .header-botton .navbar-toggle span { background-color: #fff; } .header-botton .header-nav .nav>li>a { padding: 12px 12px; color: #777; } } @media only screen and (max-width:767px) { .header-middle .logo-header { float: none; margin: 9px auto; } } /*------------------------------------- 1. Top Part Search Bar -------------------------------------*/ .site-search-btn { background: none; padding: 10px 15px; border: none; outline: none; color: #555; } #search { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); transition: all 0.5s ease-in-out; transform: translate(0px, -100%) scale(0, 0); opacity: 0; display: none; } #search.open { transform: translate(0px, 0px) scale(1, 1); opacity: 1; z-index: 999; display: block; } #search form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 20px); max-width: 760px; color: #fff; border: 1px solid #464646; font-size: 40px; font-weight: 300; text-align: left; outline: none; padding: 10px; border-radius: 50px; } #search input[type="search"] { width: 100%; background: none; border: none; padding: 0px 12px; outline: none; color: #f5f5f5; font-size: 32px; } #search input[type="search"]:focus { box-shadow: none; } #search .input-group { display: flex; flex-wrap: nowrap; } #search .search-btn { border: none; background: none; padding: 0px 30px; outline: none; color: #5d5d5d; } #search .search-btn i { font-size: 36px; } #search .close { position: fixed; top: 15px; right: 15px; opacity: 1; font-size: 27px; color: #fff; width: 30px; height: 30px; } #search .close:after, #search .close:before { content: ""; position: absolute; width: 2px; height: 32px; background-color: #f5f5f5; right: 20px; top: 0px; } #search .close:after { /* IE 9 */ /* Safari */ transform: rotate(45deg); } #search .close:before { /* IE 9 */ /* Safari */ transform: rotate(-45deg); } #search .close:hover:after, #search .close:hover:before { cursor: pointer; } @media only screen and ( max-width:768px) { #search form { font-size: 26px; } #search input[type="search"] { padding: 0px 0px 0px 30px; } #search .search-btn { padding: 0px 15px; } #search .search-btn i { font-size: 24px; } } @media only screen and ( max-width:400px) { #search form { font-size: 16px; } #search input[type="search"] { padding: 0px 0px 0px 10px; } #search .search-btn { padding: 0px 15px; } #search .search-btn i { font-size: 18px } } .wt-quik-search .form-control::-moz-placeholder { color: #fff; } .wt-quik-search .form-control:-moz-placeholder { color: #fff; } .wt-quik-search .form-control:-ms-input-placeholder { color: #fff; } .wt-quik-search .form-control::-webkit-input-placeholder { color: #fff; } @media only screen and (max-width:767px) { .site-search { width: 100%; } .site-search .site-button { padding: 0; } .site-search form { padding-left: 0; } } /*====================================== 18. NAVIGATIONS ======================================*/ /*------------------------------------- 1. mena-menu -------------------------------------*/ .navbar-toggle { border: none; margin-top: 24px; margin-bottom: 24px; margin-left: 15px; margin-right: -10px; padding: 12px 10px; } .navbar-toggle .icon-bar { background: #555; height: 3px; border-radius: 0; -webkit-border-radius: 0; } @media only screen and (max-width:480px) { .navbar-toggle { margin-left: 10px; } .extra-nav .extra-cell { margin-left: 0; } } .is-fixed .navbar-toggle { margin-top: 14px; margin-bottom: 14px; } .header-nav { position: relative; padding: 0; } .header-nav .nav { float: right; } .header-nav .nav i { font-size: 9px; margin-left: 3px; margin-top: -3px; vertical-align: middle; opacity: 0.7; } .header-nav .nav>li { margin: 0px; font-weight: 400; text-transform: uppercase; position: relative; } .header-nav .nav>li>a { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; color: #555; font-size: 14px; font-weight: 600; padding: 35px 12px; cursor: pointer; } .header-nav .nav>li>a:hover { background-color: transparent; color: #212427; } .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: #ec5598; } .header-nav .nav>li:hover>a { color: #ec5598; } .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.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-nav .nav>li .sub-menu { background-color: #ffffff; display: block; left: 0; list-style: none; margin: 20px 0 0; opacity: 0; padding: 0px; position: absolute; visibility: hidden; width: 220px; z-index: 10; } .header-nav .nav>li .sub-menu li { border-bottom: 1px solid #f4f4f4; position: relative; } .header-nav .nav>li .sub-menu li a { color: #474747; display: block; font-size: 13px; padding: 10px 20px; text-transform: none; } .header-nav .nav>li .sub-menu li a:hover { color: #1BBCE8; text-decoration: none; } .header-nav .nav>li .sub-menu li:hover>a { color: #1BBCE8; } .header-nav .nav>li .sub-menu li:last-child { border-bottom: 0px; } .header-nav .nav>li .sub-menu li .fa { color: #363636; display: block; float: right; position: absolute; right: 10px; top: 12px; } .header-nav .nav>li .sub-menu li>.sub-menu { left: 220px; margin: 0 0 0 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-nav .nav>li .sub-menu li:hover>.sub-menu { left: 220px; margin: 0px; opacity: 1; top: 0px; 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 li a>i { font-size: 13px; margin-right: 5px; min-width: 20px; } .header-nav .nav>li .mega-menu { background-color: #ffffff; border: 1px solid #e9e9e9; display: table; left: 0px; list-style: none; opacity: 0; position: absolute; right: 0px; visibility: hidden; width: 100%; margin-top: 20px; z-index: 10; } .header-nav .nav>li .mega-menu>li { display: table-cell; padding: 10px 0; position: relative; vertical-align: top; width: 25%; } .header-nav .nav>li .mega-menu>li:after { content: ""; background-color: rgba(204, 204, 204, 0.4); position: absolute; right: 0px; top: 0px; display: block; width: 1px; height: 100%; } .header-nav .nav>li .mega-menu>li:last-child:after { display: none; } .header-nav .nav>li .mega-menu>li>a { color: #555555; display: block; font-size: 14px; padding: 0 20px; } .header-nav .nav>li .mega-menu>li ul { list-style: none; margin: 10px 0px 0px 0px; padding: 0px; } .header-nav .nav>li .mega-menu>li ul a { color: #474747; display: block; font-size: 13px; line-height: 34px; padding: 2px 20px; text-transform: none; } .header-nav .nav>li .mega-menu>li ul a:hover { color: #1BBCE8; background-color: transparent; } .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; } /*-- Submenu direction---*/ .header-nav .nav>li.submenu-direction .sub-menu { left: auto; right: 0; } .header-nav .nav>li.submenu-direction .sub-menu li>.sub-menu { left: auto; right: 220px; margin: 0 20px 0 0; } .header-nav .nav>li.submenu-direction .sub-menu li:hover>.sub-menu { left: auto; right: 219px; margin: 0 0 0 0; } .has-child .submenu-toogle { position: absolute; right: 10px; top: 10px; color: #fff; background-color: #171f2c; z-index: 998; cursor: pointer; padding: 7px; font-size: 10px; display: none; } .has-child li .submenu-toogle { opacity: 0.9; } .has-child.nav-active>a+.submenu-toogle.glyphicon-plus:before { content: "\2212"; } /*.header-nav .nav > li:last-child{display:none;}*/ @media only screen and (max-width: 991px) { header .logo { display: block; padding: 4px 0; } .header-nav .nav i { margin-top: 6px; } .header-nav .nav li.has-child.nav-active>a { color: #ec5598; } } @media only screen and (max-width: 991px) { /* responsive strat when media screen [991px] css START*/ .navbar-header { float: none; } .navbar-toggle { display: block; } /* Responsive strat when medai screen [991px] css END*/ .header-nav { clear: both; border-bottom: 1px solid #E9E9E9; } .header-nav .nav { float: none; margin: 0; background: #fff; } .header-nav .nav li { float: none; } .header-nav .nav>li .sub-menu>li, .header-nav .nav>li .mega-menu>li { float: none; display: block; width: auto; } .header-nav .nav li .sub-menu>li a { padding-left: 30px; } .header-nav .nav>li>a { padding: 12px 15px; border-top: 1px solid #E9E9E9; color: #777; } .header-nav .nav>li.active>a, .header-nav .nav>li.current-menu-item>a { color: #ec5598; } .header-nav .nav i { float: right; } .header-nav .nav>li>a:hover, .header-nav .nav>li>a:active, .header-nav .nav>li>a:focus { background-color: #f0f0f0; text-decoration: none; } .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: #f9f9f9; } .header-nav .nav>li ul.mega-menu ul { display: block; } .header-nav .nav>li .mega-menu>li { padding: 0px; } .header-nav .nav>li ul.mega-menu li:hover ul { display: block; } .header-nav .nav li.has-child { position: relative; } .header-nav .nav li .sub-menu, .header-nav .nav li .mega-menu { opacity: 1; margin: 0 !important; } .has-child .submenu-toogle { display: block; } } /*------------------------------------- 2. nav dark version -------------------------------------*/ .nav-dark.header-nav .nav>li .sub-menu, .nav-dark.header-nav .nav>li .mega-menu { background-color: #171f2c; border: 1px solid rgba(0, 0, 0, 0.2); } .nav-dark.header-nav .nav>li .sub-menu li { border-bottom: 1px solid #23282f; } .nav-dark.header-nav .nav>li .sub-menu li a, .nav-dark.header-nav .nav>li .mega-menu>li ul a, .nav-dark.header-nav .nav>li .mega-menu>li>a { color: #CCCCCC; } .nav-dark.header-nav .nav>li .sub-menu li a:hover { background-color: #23282f; } .nav-dark.header-nav .nav>li .mega-menu>li ul a:hover { background-color: #23282f; color: #ec5598; } .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 { border-bottom: 1px solid rgba(0, 0, 0, 0.8); } .nav-dark.header-nav .nav { background-color: #2D3239; } .nav-dark.header-nav .nav>li>a { border-top: 1px solid rgba(0, 0, 0, 0.2); } .nav-dark.header-nav .nav>li>a { color: #999; } .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: #23282F; color: #ec5598; } .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: #23282F; } } /*------------------------------------- 3. when header is sticky -------------------------------------*/ .sticky-no .main-bar { position: static !important; } /*------------------------------------- 4. when header is sticky -------------------------------------*/ .is-fixed .main-bar { position: fixed; top: 0; left: 0; } .is-fixed .header-nav .nav>li>a { padding: 25px 12px; } .is-fixed .extra-nav { padding: 13px 0; } @media only screen and (max-width: 991px) { .is-fixed .header-nav .nav>li>a { padding: 12px 15px; } } @media only screen and (max-width: 991px) { .is-fixed .header-nav .nav { overflow: auto; height: 275px; } .is-fixed .header-nav .nav>li>a { padding: 12px 15px; } .is-fixed#header-part .navbar-toggle { margin: 15px 0; } } /*------------------------------------- 5. header full width -------------------------------------*/ #header-part.full-width .top-bar .container, #header-part.full-width .main-bar .container { width: auto; } /*------------------------------------- 6. header with bg primary color 1 -------------------------------------*/ .site-bg-primary .header-nav .nav>li>a { color: #fff; } .site-bg-primary .header-nav .nav>li:hover>a, .site-bg-primary .header-nav .nav>li.active>a, .site-bg-primary .header-nav .nav>li.current-menu-item>a { color: #171f2c; } .site-bg-primary .wt-cart .woo-cart-total, .site-bg-primary .wt-cart .woo-cart-count { color: #fff; } .site-bg-primary .wt-cart .woo-cart-count, .site-bg-primary .wt-cart .woo-cart-count::before { border-color: #fff; } .site-bg-primary .navbar-toggle .icon-bar { background-color: #fff; } @media only screen and (max-width:991px) { .site-bg-primary .header-nav .nav>li>a { color: #777; } .site-bg-primary .header-nav .nav>li:hover>a, .site-bg-primary .header-nav .nav>li.active>a, .site-bg-primary .header-nav .nav>li.current-menu-item>a { color: #ec5598; } } /*-------------------------------------- Header Style 1 --------------------------------------*/ .header-style-1 .wt-topbar-right { display: flex; justify-content: space-between; } .header-style-1.twm-nav-transparent .main-bar.bg-white { background-color: rgba(255, 255, 255, 0.6) !important; position: absolute; } .header-style-1 .header-nav .nav { float: right; display: flex; justify-content: flex-end; flex-direction: inherit; } .header-style-1 .wt-topbar-right { display: flex; justify-content: space-between; } @media only screen and (max-width:767px) { .header-style-1 .wt-topbar-right { display: block; } .header-style-1 .wt-topbar-right .social-bx { float: none; margin: 10px 0px 0px 0px; } } .header-style-1 .social-bx li { padding-left: 2px; padding-right: 2px; display: inline-block; } .header-style-1 .social-bx li a { background-color: rgba(0, 0, 0, 0.08); } .header-style-1 .main-bar .container { display: flex; justify-content: space-between; position: relative; } .header-style-1 .top-bar .row { display: flex; justify-content: space-between; } .header-style-1 .header-nav .nav { float: right; display: flex; justify-content: flex-end; flex-direction: inherit; } .header-style-1 .header-nav .nav>li>a { display: block; } .header-style-1 .header-middle .container { display: flex; align-items: center; justify-content: space-between; } .header-style-1 .navbar-toggler .icon-bar { background: #010e2a; height: 3px; border-radius: 0; display: block; width: 22px; } .header-style-1 .navbar-toggler .icon-bar+.icon-bar { margin-top: 4px; } .header-style-1 .header-nav .has-child.nav-active>a+.submenu-toogle.fa.fa-angle-right:before { content: "\f107"; } .header-style-1 .has-child .submenu-toogle { color: #000; font-size: 14px; } .header-style-1 .extra-nav { display: flex; align-items: center; position: relative; z-index: 9; padding: 0px; } .header-style-1 .extra-nav .extra-cell { display: block; margin: 0px 5px; } .header-style-1 .extra-nav .extra-cell:last-child { margin-right: 0px; } .header-style-1 .extra-nav .extra-cell .link-inner { display: flex; } .header-style-1 .navbar-toggler { display: none; } .header-style-1 .header-nav .nav>li .sub-menu li .fa { background-color: transparent; padding: 0px 10px 0px 0px; z-index: -1; } .header-style-1 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: -1; } .header-style-1 .wt-cart.dropdown-toggle::after { display: none; } .header-style-1 .cart-dropdown-item-wraper { top: 17px !important; } .header-style-1 .site-search-btn { display: block; } /*Mobile Navigation*/ /*Header style 1 mobile navigation*/ @media only screen and (max-width: 991px) { .header-style-1 .header-nav .nav>li .sub-menu li .fa { z-index: 1; top: 4px; width: 100%; padding: 10px; text-align: right; } .header-style-1 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: 0; } .header-style-1 .navbar-toggler { display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; } .header-style-1.twm-nav-transparent .navbar-toggler { right: -33px; } .header-style-1 .extra-nav { margin-right: 40px; } .has-child .submenu-toogle { background: none; } .header-style-1 .header-nav .nav { float: none; margin: 0px; background: #fff; background-color: rgb(255, 255, 255); width: 100%; display: block; height: 100%; } .header-style-1 .header-nav .nav>li>a .fa { display: none; } .header-nav .nav>li .sub-menu li .fa { top: 1px; } .header-nav .nav>li .sub-menu li>.sub-menu { transition: none !important; } .header-style-1.mobile-sider-drawer-menu .header-nav { position: fixed; width: 250px !important; z-index: 999; height: 100vh !important; overflow-y: inherit !important; left: -250px; top: 0px; transition: all 0.5s linear; background-color: #fff; } .header-style-1.mobile-sider-drawer-menu .header-nav .nav>li:hover>.sub-menu { transition: none; } .header-style-1.mobile-sider-drawer-menu .header-nav .nav>li .sub-menu li:hover>.sub-menu { transition: none; } .header-style-1.mobile-sider-drawer-menu.active .header-nav { left: 0%; } .header-style-1.mobile-sider-drawer-menu .icon-bar { transition: all 0.5s linear; position: relative; } #mobile-side-drawer:focus { box-shadow: none; } .header-style-1.mobile-sider-drawer-menu.active .icon-bar.icon-bar-first { transform: rotate(45deg) translateX(3px) translateY(2px); } .header-style-1.mobile-sider-drawer-menu.active .icon-bar.icon-bar-three { transform: rotate(-45deg) translateX(3px) translateY(-2px); } .header-style-1.mobile-sider-drawer-menu .icon-bar.icon-bar-two { position: relative; right: 0%; } .header-style-1.mobile-sider-drawer-menu.active .icon-bar.icon-bar-two { position: absolute; right: 100px; opacity: 0; } .header-style-1.mobile-sider-drawer-menu .is-fixed .header-nav .nav { overflow: auto; max-height: 100%; } .header-style-1.mobile-sider-drawer-menu .header-fixed .header-nav .nav { overflow: auto; max-height: 100%; } } /*------------------------------------- 7. header style 2 (center content) -------------------------------------*/ .header-style-2 .wt-topbar-right { display: flex; justify-content: space-between; } .header-style-2 .social-bx li { padding-left: 2px; padding-right: 2px; display: inline-block; } .header-style-2 .social-bx li a { background-color: rgba(0, 0, 0, 0.08); } @media only screen and (max-width:767px) { .header-style-2 .wt-topbar-right { display: block; } .header-style-2 .wt-topbar-right .social-bx { float: none; margin: 10px 0px 0px 0px; } } .header-style-2 .logo-header { margin-left: auto; margin-right: auto; margin-bottom: 0; float: none; } .header-style-2 .nav-outer { display: table; } .header-style-2 .cart-dropdown-item-wraper { top: 18px !important; } .header-style-2 .main-bar-inr { display: table; margin: auto; } .header-style-2 .header-nav { display: table-cell !important; } .header-style-2 .header-nav .nav { float: none; } .header-style-2 .header-nav .nav { display: flex; justify-content: space-between; flex-direction: inherit; } .header-style-2 .extra-nav { display: flex; align-items: center; position: relative; z-index: 9; padding: 0px; float: none; } .header-style-2 .extra-nav .extra-cell { display: block; margin: 0px 5px; } .header-style-2 .extra-nav .extra-cell:last-child { margin-right: 0px; } .header-style-2 .extra-nav .extra-cell .link-inner { display: flex; } .header-style-2 .navbar-toggler { display: none; } .header-style-2 .header-nav .nav>li>a { display: block; } @media only screen and (max-width:991px) { .header-style-2 .main-bar-inr { display: block; position: relative; padding-bottom: 10px; } .header-style-2 .header-nav { display: block; float: none; } } @media only screen and (max-width: 767px) { .header-style-2 .navbar-toggle { float: left; } .header-style-2 .nav-outer { display: block; padding: 22px 0 0; } } @media only screen and (max-width:480px) { .extra-nav { clear: none; width: auto; } } .header-style-2 .header-nav .nav>li .sub-menu li .fa { background-color: transparent; padding: 0px 10px 0px 0px; z-index: -1; } .header-style-2 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: -1; } .header-style-2 .navbar-toggler .icon-bar { background: #2a2a2a; height: 3px; border-radius: 0; display: block; width: 22px; } .header-style-2 .navbar-toggler .icon-bar+.icon-bar { margin-top: 4px; } .header-style-2 .header-nav .has-child.nav-active>a+.submenu-toogle.fa.fa-angle-right:before { content: "\f107"; } .header-style-2 .navbar-toggler { display: none; } .header-style-2 .header-nav .nav>li>a { display: block; } .header-style-2 .wt-cart.dropdown-toggle::after { display: none; } /*Header style 2 mobile navigation*/ @media only screen and (max-width: 991px) { .header-style-2 .navbar-toggler { display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; } .header-style-2 .extra-nav { margin-right: 40px; } .header-style-2 .header-nav .nav>li .sub-menu li .fa { z-index: 1; top: 4px; width: 100%; padding: 10px; text-align: right; } .header-style-2 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: 0; } .header-style-2 .has-child .submenu-toogle { background-color: transparent; color: #000; font-size: 14px; width: 100%; text-align: right; } .header-style-2 .is-fixed .header-nav .nav>li>a { padding: 12px 15px; } .header-style-2 .extra-nav .extra-cell { padding-left: 0px; margin-left: 0px; } .has-child .submenu-toogle { background: none; } .header-style-2.mobile-sider-drawer-menu .header-nav { position: fixed; width: 250px !important; z-index: 999; height: 100vh !important; overflow-y: inherit !important; left: -250px; top: 0px; transition: all 0.5s linear; background-color: #fff; } .header-style-2 .header-nav .nav { float: none; margin: 0px; background: #fff; background-color: rgb(255, 255, 255); width: 100%; display: block; height: 100%; } .header-style-2.mobile-sider-drawer-menu .header-nav .nav>li:hover>.sub-menu { transition: none; } .header-style-2.mobile-sider-drawer-menu .header-nav .nav>li .sub-menu li:hover>.sub-menu { transition: none; } .header-style-2.mobile-sider-drawer-menu.active .header-nav { left: 0%; align-items: normal; } .header-style-2.mobile-sider-drawer-menu .icon-bar { transition: all 0.5s linear; position: relative; } #mobile-side-drawer:focus { box-shadow: none; } .header-style-2.mobile-sider-drawer-menu.active .icon-bar.icon-bar-first { transform: rotate(45deg) translateX(3px) translateY(2px); } .header-style-2.mobile-sider-drawer-menu.active .icon-bar.icon-bar-three { transform: rotate(-45deg) translateX(3px) translateY(-2px); } .header-style-2.mobile-sider-drawer-menu .icon-bar.icon-bar-two { position: relative; right: 0%; } .header-style-2.mobile-sider-drawer-menu.active .icon-bar.icon-bar-two { position: absolute; right: 100px; opacity: 0; } .header-style-2.mobile-sider-drawer-menu .is-fixed .header-nav .nav { overflow: auto; max-height: 100%; display: block; width: 100%; } .header-style-2.mobile-sider-drawer-menu .header-fixed .header-nav .nav { overflow: auto; max-height: 100%; } .header-style-2 .header-nav .nav li { float: none; display: block; width: 100%; } .header-style-2 .header-nav .nav>li>a .fa { display: none; } } /*------------------------------------- 8. header style 3 (header transperent) -------------------------------------*/ .header-style-3 .main-bar { position: absolute; background: none; } .header-style-3 .header-nav .nav>li>a { color: #fff; } @media only screen and (max-width:991px) { .header-style-3 .header-nav .nav>li>a { color: #777777; } } .header-style-3 .navbar-toggle .icon-bar { background: #FFF; } .header-style-3 .site-search-btn, .header-style-3 .wt-cart .woo-cart-total, .header-style-3 .wt-cart .woo-cart-count { color: #fff; } .header-style-3 .wt-cart .woo-cart-count, .header-style-3 .wt-cart .woo-cart-count::before { border-color: #fff; } /* header 3 fixed */ .header-style-3 .is-fixed .main-bar { position: fixed; } .header-style-3 .is-fixed.color-fill .main-bar { background: #000; } /* header 3 topbar Transparent */ .header-style-3.topbar-transparent { position: absolute; width: 100%; top: 0px; left: 0px; } .header-style-3.topbar-transparent .top-bar { /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */ height: 30px; } @media only screen and (max-width:767px) { .header-style-3.topbar-transparent { position: relative; background-color: #000; } .header-style-3.topbar-transparent .main-bar { position: static; } .header-style-3.topbar-transparent .is-fixed .main-bar { position: fixed; } } /*------------------------------------- 9. header style 4 (header white overlay) -------------------------------------*/ .header-style-4 .main-bar { background-color: rgba(255, 255, 255, 0.6); position: absolute; } /* header 4 fixed */ .header-style-4 .is-fixed .main-bar { position: fixed; background: #fff; } /*------------------------------------- 11. header style 5 (header black overlay) -------------------------------------*/ .header-style-5 .main-bar { position: absolute; background-color: rgba(0, 0, 0, 0.6); } .header-style-5 .header-nav .nav>li>a { color: #fff; } @media only screen and (max-width:991px) { .header-style-5 .header-nav .nav>li>a { color: #777777; } } .header-style-5 .navbar-toggle .icon-bar { background: #FFF; } .header-style-5 .site-search-btn, .header-style-5 .wt-cart .woo-cart-total, .header-style-5 .wt-cart .woo-cart-count { color: #fff; } .header-style-5 .wt-cart .woo-cart-count, .header-style-5 .wt-cart .woo-cart-count::before { border-color: #fff; } /* header 5 fixed */ .header-style-5 .is-fixed .main-bar { position: fixed; background-color: rgba(0, 0, 0, 0.9); } .header-style-5 .header-nav .nav { float: right; display: flex; justify-content: flex-end; flex-direction: inherit; } .header-style-5 .wt-topbar-right { display: flex; justify-content: end; } @media only screen and (max-width:575px) { .header-style-5 .wt-topbar-right { display: block; } .header-style-5 .wt-topbar-right .social-bx { float: none; margin-left: 0px; } } .header-style-5 .social-bx li { padding-left: 2px; padding-right: 2px; display: inline-block; } .header-style-5 .social-bx li a { background-color: rgba(0, 0, 0, 0.08); } .header-style-5 .main-bar .container { display: flex; justify-content: space-between; position: relative; } .header-style-5 .top-bar .row { display: flex; justify-content: space-between; } .header-style-5 .header-nav .nav { float: right; display: flex; justify-content: flex-end; flex-direction: inherit; } .header-style-5 .header-nav .nav>li>a { display: block; } .header-style-5 .header-middle .container { display: flex; align-items: center; justify-content: space-between; } .header-style-5 .navbar-toggler .icon-bar { background: #fff; height: 3px; border-radius: 0; display: block; width: 22px; } .header-style-5 .navbar-toggler .icon-bar+.icon-bar { margin-top: 4px; } .header-style-5 .header-nav .has-child.nav-active>a+.submenu-toogle.fa.fa-angle-right:before { content: "\f107"; } .header-style-5 .has-child .submenu-toogle { color: #000; font-size: 14px; } .header-style-5 .extra-nav { display: flex; align-items: center; position: relative; z-index: 9; padding: 0px; } .header-style-5 .extra-nav .extra-cell { display: block; margin: 0px 5px; } .header-style-5 .extra-nav .extra-cell:last-child { margin-right: 0px; } .header-style-5 .extra-nav .extra-cell .link-inner { display: flex; } .header-style-5 .navbar-toggler { display: none; } .header-style-5 .header-nav .nav>li .sub-menu li .fa { background-color: transparent; padding: 0px 10px 0px 0px; z-index: -1; } .header-style-5 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: -1; } .header-style-5 .wt-cart.dropdown-toggle::after { display: none; } .header-style-5 .cart-dropdown-item-wraper { top: 17px !important; } .header-style-5 .site-search-btn { display: block; } /*Mobile Navigation*/ /*Header style 1 mobile navigation*/ @media only screen and (max-width: 991px) { .header-style-5 .navbar-toggler { display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; } .header-style-5 .extra-nav { margin-right: 40px; } .header-style-5 .header-nav .nav>li .sub-menu li .fa { z-index: 1; top: 4px; width: 100%; padding: 10px; text-align: right; } .header-style-5 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: 0; } .has-child .submenu-toogle { background: none; } .header-style-5 .header-nav .nav { float: none; margin: 0px; background: #fff; background-color: rgb(255, 255, 255); width: 100%; display: block; height: 100%; } .header-style-5 .header-nav .nav>li>a .fa { display: none; } .header-nav .nav>li .sub-menu li .fa { top: 1px; } .header-nav .nav>li .sub-menu li>.sub-menu { transition: none !important; } .header-style-5.mobile-sider-drawer-menu .header-nav { position: fixed; width: 250px !important; z-index: 999; height: 100vh !important; overflow-y: inherit !important; left: -250px; top: 0px; transition: all 0.5s linear; background-color: #fff; } .header-style-5.mobile-sider-drawer-menu .header-nav .nav>li:hover>.sub-menu { transition: none; } .header-style-5.mobile-sider-drawer-menu .header-nav .nav>li .sub-menu li:hover>.sub-menu { transition: none; } .header-style-5.mobile-sider-drawer-menu.active .header-nav { left: 0%; } .header-style-5.mobile-sider-drawer-menu .icon-bar { transition: all 0.5s linear; position: relative; } #mobile-side-drawer:focus { box-shadow: none; } .header-style-5.mobile-sider-drawer-menu.active .icon-bar.icon-bar-first { transform: rotate(45deg) translateX(3px) translateY(2px); } .header-style-5.mobile-sider-drawer-menu.active .icon-bar.icon-bar-three { transform: rotate(-45deg) translateX(3px) translateY(-2px); } .header-style-5.mobile-sider-drawer-menu .icon-bar.icon-bar-two { position: relative; right: 0%; } .header-style-5.mobile-sider-drawer-menu.active .icon-bar.icon-bar-two { position: absolute; right: 100px; opacity: 0; } .header-style-5.mobile-sider-drawer-menu .is-fixed .header-nav .nav { overflow: auto; max-height: 100%; } .header-style-5.mobile-sider-drawer-menu .header-fixed .header-nav .nav { overflow: auto; max-height: 100%; } } /*------------------------------------- 12. header style 6 -------------------------------------*/ .header-style-6 .is-fixed .header-nav .nav>li>a { padding: 20px 12px; } .header-style-6 .is-fixed .navbar-toggle { margin-top: 10px; margin-bottom: 10px; } /*------------------------------------- 13. header style 7 -------------------------------------*/ .header-style-7 .top-bar .container { display: flex; justify-content: space-between; } @media only screen and (max-width:575px) { .header-style-7 .top-bar .container { display: block; } .header-style-7 .top-bar .container .social-bx { float: none; margin-left: 0px; } } .header-style-7 .social-bx li { padding-left: 2px; padding-right: 2px; display: inline-block; } .header-style-7 .header-nav .nav>li .sub-menu { top: 60px; } .header-style-7 .header-nav .nav>li .mega-menu { top: 60px; } .header-style-7 .header-info>ul li { padding: 15px 0px 15px 10px; } .header-style-7 .has-child .submenu-toogle { background-color: transparent; } .header-style-7 .header-nav .nav>li .sub-menu .fa { z-index: -1; font-size: 14px; top: 6px; } .header-style-7 .has-child .submenu-toogle { background-color: transparent; } .header-style-7 .header-middle .container { display: flex; justify-content: space-between; } .header-style-7 .header-nav { justify-content: inherit; flex-basis: inherit; } .header-style-7.header-info>ul li { padding-right: 0px; } .header-style-7 .wt-cart.dropdown-toggle::after { display: none; } .header-style-7 .header-botton .header-nav .nav { display: flex; justify-content: space-between; flex-direction: inherit; } .header-style-7 .main-bar { max-width: 1140px; margin: auto; } .header-style-7 .is-fixed .header-nav .nav>li>a { padding: 20px 12px; } .header-style-7 .is-fixed .navbar-toggle { margin-top: 10px; margin-bottom: 10px; flex-direction: row-reverse; } .header-style-7 .header-botton .extra-nav { padding: 8px 0; display: flex; align-items: center; } .header-style-7 .main-bar .container { display: flex; justify-content: space-between; position: relative; } .header-style-7 .is-fixed .main-bar { margin: 0px -573px; left: 50%; } .header-style-7 .cart-dropdown-item-wraper { top: 14px !important; } .header-style-7 .navbar-toggler .icon-bar { background: #fff; height: 3px; border-radius: 0; display: block; width: 22px; } .header-style-7 .navbar-toggler .icon-bar+.icon-bar { margin-top: 4px; } .header-style-7 .header-nav .has-child.nav-active>a+.submenu-toogle.fa.fa-angle-right:before { content: "\f107"; } .header-style-7 .navbar-toggler { display: none; } .header-style-7 .header-nav .nav>li>a { display: block; } @media only screen and (max-width:1200px) { .header-style-7 .main-bar, .header-style-7 .is-fixed .main-bar { max-width: 100%; margin: 0; left: 0; } } /*Header style 7 mobile navigation*/ @media only screen and (max-width: 991px) { .header-style-7 .navbar-toggler { display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; } .header-style-7 .extra-nav { margin-right: 0px; } .header-style-7 .header-nav .nav>li .sub-menu li .fa { z-index: 1; top: 4px; width: 100%; padding: 10px; text-align: right; } .header-style-7 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: 0; } .header-style-7 .has-child .submenu-toogle { background-color: transparent; color: #000; font-size: 14px; width: 100%; text-align: right; } .header-style-7 .is-fixed .header-nav .nav>li>a { padding: 12px 12px; } .header-style-7 .extra-nav .extra-cell { padding-left: 0px; margin-left: 0px; } .header-style-7 .header-botton .extra-nav .site-search-btn { color: #fff; padding: 7px 15px 7px 0px; } .has-child .submenu-toogle { background: none; } .header-style-7 .header-botton .header-nav .nav { float: none; margin: 0px; background: #fff; background-color: rgb(255, 255, 255); width: 100%; display: block; height: 100%; } .header-style-7 .header-botton .header-nav .nav>li>a .fa { display: none; } .header-style-7 .header-botton .header-nav .nav>li .sub-menu li .fa { top: 1px; } .header-style-7 .header-botton .header-nav .nav>li .sub-menu li>.sub-menu { transition: none !important; } .header-style-7.mobile-sider-drawer-menu .header-nav { position: fixed; width: 250px !important; z-index: 999; height: 100vh !important; overflow-y: inherit !important; left: -250px; top: 0px; transition: all 0.5s linear; background-color: #fff; } .header-style-7.mobile-sider-drawer-menu .header-nav .nav>li:hover>.sub-menu { transition: none; } .header-style-7.mobile-sider-drawer-menu .header-nav .nav>li .sub-menu li:hover>.sub-menu { transition: none; } .header-style-7.mobile-sider-drawer-menu.active .header-nav { left: 0%; } .header-style-7.mobile-sider-drawer-menu .icon-bar { transition: all 0.5s linear; position: relative; } #mobile-side-drawer:focus { box-shadow: none; } .header-style-7.mobile-sider-drawer-menu.active .icon-bar.icon-bar-first { transform: rotate(45deg) translateX(3px) translateY(2px); } .header-style-7.mobile-sider-drawer-menu.active .icon-bar.icon-bar-three { transform: rotate(-45deg) translateX(3px) translateY(-2px); } .header-style-7.mobile-sider-drawer-menu .icon-bar.icon-bar-two { position: relative; right: 0%; } .header-style-7.mobile-sider-drawer-menu.active .icon-bar.icon-bar-two { position: absolute; right: 100px; opacity: 0; } .header-style-7.mobile-sider-drawer-menu .is-fixed .header-nav .nav { overflow: auto; max-height: 100%; } .header-style-7.mobile-sider-drawer-menu .header-fixed .header-nav .nav { overflow: auto; max-height: 100%; } } @media only screen and (max-width:480px) { .header-style-7 .logo-header { width: 100px; height: auto; } } /*------------------------------------- 13. header style -------------------------------------*/ .header-style-8 .main-bar { max-width: 1130px; margin: 0 auto -60px; } .header-style-8 .is-fixed .header-nav .nav>li>a { padding: 20px 12px; } .header-style-8 .is-fixed .navbar-toggle { margin-top: 10px; margin-bottom: 10px; } .header-style-8 .main-bar .container { width: 100%; max-width: 100%; } .header-style-8 .is-fixed .main-bar { margin: 0 -565px; left: 50%; } @media only screen and (max-width:1200px) { .header-style-8 .main-bar, .header-style-8 .is-fixed .main-bar { max-width: 100%; margin: 0; left: 0; } } .header-style-8 .top-bar .container { display: flex; justify-content: space-between; } .header-style-8 .cart-dropdown-item-wraper { top: 15px !important; } @media only screen and (max-width:575px) { .header-style-8 .top-bar .container { display: block; } .header-style-8 .top-bar .container .social-bx { float: none; margin-left: 0px; } } .header-style-8 .social-bx li { padding-left: 2px; padding-right: 2px; display: inline-block; } .header-style-8 .header-nav .nav>li .sub-menu { top: 60px; } .header-style-8 .header-nav .nav>li .mega-menu { top: 60px; } .header-style-8 .header-info>ul li { padding: 15px 0px 15px 10px; } .header-style-8 .has-child .submenu-toogle { background-color: transparent; } .header-style-8 .header-nav .nav>li .sub-menu .fa { z-index: -1; font-size: 14px; top: 6px; } .header-style-8 .has-child .submenu-toogle { background-color: transparent; } .header-style-8 .header-middle .container { display: flex; justify-content: space-between; } .header-style-8 .header-nav { justify-content: inherit; flex-basis: inherit; } .header-style-8.header-info>ul li { padding-right: 0px; } .header-style-8 .wt-cart.dropdown-toggle::after { display: none; } .header-style-8 .header-botton .header-nav .nav { display: flex; justify-content: space-between; flex-direction: inherit; } .header-style-8 .main-bar { max-width: 1140px; margin: 0 auto -60px; } .header-style-8 .is-fixed .header-nav .nav>li>a { padding: 20px 12px; } .header-style-8 .is-fixed .navbar-toggle { margin-top: 10px; margin-bottom: 10px; flex-direction: row-reverse; } .header-style-8 .header-botton .extra-nav { padding: 8px 0; display: flex; align-items: center; } .header-style-8 .main-bar .container { display: flex; justify-content: space-between; position: relative; } .header-style-8 .is-fixed .main-bar { margin: 0px -573px; left: 50%; } .header-style-8 .navbar-toggler .icon-bar { background: #fff; height: 3px; border-radius: 0; display: block; width: 22px; } .header-style-8 .navbar-toggler .icon-bar+.icon-bar { margin-top: 4px; } .header-style-8 .header-nav .has-child.nav-active>a+.submenu-toogle.fa.fa-angle-right:before { content: "\f107"; } .header-style-8 .navbar-toggler { display: none; } .header-style-8 .header-nav .nav>li>a { display: block; } @media only screen and (max-width:1200px) { .header-style-8 .main-bar, .header-style-8 .is-fixed .main-bar { max-width: 100%; margin: 0; left: 0; } } /*Header style 8 mobile navigation*/ @media only screen and (max-width: 991px) { .header-style-8 .navbar-toggler { display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; } .header-style-8 .extra-nav { margin-right: 0px; } .header-style-8 .header-nav .nav>li .sub-menu li .fa { z-index: 1; top: 4px; width: 100%; padding: 10px; text-align: right; } .header-style-8 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: 0; } .header-style-8 .has-child .submenu-toogle { background-color: transparent; color: #000; font-size: 14px; width: 100%; text-align: right; } .header-style-8 .is-fixed .header-nav .nav>li>a { padding: 12px 12px; } .header-style-8 .extra-nav .extra-cell { padding-left: 0px; margin-left: 0px; } .header-style-8 .header-botton .extra-nav .site-search-btn { color: #fff; padding: 7px 15px 7px 0px; } .has-child .submenu-toogle { background: none; } .header-style-8 .header-botton .header-nav .nav { float: none; margin: 0px; background: #fff; background-color: rgb(255, 255, 255); width: 100%; display: block; height: 100%; } .header-style-8 .header-botton .header-nav .nav>li>a .fa { display: none; } .header-style-8 .header-botton .header-nav .nav>li .sub-menu li .fa { top: 1px; } .header-style-8 .header-botton .header-nav .nav>li .sub-menu li>.sub-menu { transition: none !important; } .header-style-8.mobile-sider-drawer-menu .header-nav { position: fixed; width: 250px !important; z-index: 999; height: 100vh !important; overflow-y: inherit !important; left: -250px; top: 0px; transition: all 0.5s linear; background-color: #fff; } .header-style-8.mobile-sider-drawer-menu .header-nav .nav>li:hover>.sub-menu { transition: none; } .header-style-8.mobile-sider-drawer-menu .header-nav .nav>li .sub-menu li:hover>.sub-menu { transition: none; } .header-style-8.mobile-sider-drawer-menu.active .header-nav { left: 0%; } .header-style-8.mobile-sider-drawer-menu .icon-bar { transition: all 0.5s linear; position: relative; } #mobile-side-drawer:focus { box-shadow: none; } .header-style-8.mobile-sider-drawer-menu.active .icon-bar.icon-bar-first { transform: rotate(45deg) translateX(3px) translateY(2px); } .header-style-8.mobile-sider-drawer-menu.active .icon-bar.icon-bar-three { transform: rotate(-45deg) translateX(3px) translateY(-2px); } .header-style-8.mobile-sider-drawer-menu .icon-bar.icon-bar-two { position: relative; right: 0%; } .header-style-8.mobile-sider-drawer-menu.active .icon-bar.icon-bar-two { position: absolute; right: 100px; opacity: 0; } .header-style-8.mobile-sider-drawer-menu .is-fixed .header-nav .nav { overflow: auto; max-height: 100%; } .header-style-8.mobile-sider-drawer-menu .header-fixed .header-nav .nav { overflow: auto; max-height: 100%; } } @media only screen and (max-width:480px) { .header-style-8 .logo-header { width: 100px; height: auto; } } /*====================================== 19. BANNER ======================================*/ .wt-banner-row, .wt-banner-outer { position: relative; } .wt-bnr-pic { width: 100%; overflow: hidden; } .wt-bnr-pic img { width: 100%; height: auto; display: block; } .wt-bnr-text { position: absolute; left: 0; top: 35%; width: 100%; margin: 0; color: #FFFFFF; } .wt-bnr-text-has { max-width: 600px; } .wt-bnr-text strong, .wt-bnr-text span { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) } .wt-bnr-text strong { display: block; font-size: 60px; font-weight: 700; line-height: 70px; margin: 0 0 25px; color: #FFFFFF; } .wt-bnr-text span { font-size: 20px; line-height: 30px; font-weight: 600; display: block; margin-bottom: 30px; } .wt-bnr-text .btn { margin-right: 30px; } @media only screen and (max-width:1200px) { .wt-bnr-text strong { font-size: 60px; line-height: 60px; margin: 0 0 15px; } .wt-bnr-text span { font-size: 20px; line-height: 24px; } } @media only screen and (max-width:991px) { .wt-bnr-text strong { font-size: 50px; line-height: 50px; margin: 0 0 10px; } } @media only screen and (max-width:767px) { .wt-bnr-text strong { font-size: 40px; line-height: 40px; margin: 0 0 0; } } @media only screen and (max-width:680px) { .wt-bnr-text strong { font-size: 30px; line-height: 30px; margin: 0 0 0; } .wt-bnr-text span { font-size: 14px; line-height: 18px; } } @media only screen and (max-width:480px) { .wt-bnr-text strong { font-size: 20px; line-height: 20px; } .wt-bnr-text span { font-size: 12px; line-height: 16px; } } /*------------------------------------- 1. inner page banner -------------------------------------*/ .wt-bnr-inr { height: 300px; background-size: cover; background-position: center center; display: table; width: 100%; } .wt-bnr-inr .container { display: table; height: 100%; } .wt-bnr-inr-entry { display: table-cell; vertical-align: middle; } .banner-inner-row h1, .banner-inner-row h2, .banner-inner-row h3, .banner-inner-row h4, .banner-inner-row h5, .banner-inner-row h6 { color: #FFF; } /*====================================== 20. SLIDER ======================================*/ /*------------------------------------- 1. owl slider -------------------------------------*/ /*------------------------------------- 1.1 next pre btn -------------------------------------*/ .owl-carousel .owl-nav { margin-top: 40px; text-align: center; } .owl-carousel .owl-nav .disabled { opacity: .5; cursor: default } /*------------------------------------- 1.2 owl dots button -------------------------------------*/ .owl-carousel .owl-dots { text-align: center; margin-top: 20px; } .owl-carousel .owl-dots .owl-dot { display: inline-block; } .owl-carousel .owl-dots .owl-dot span { width: 12px; height: 12px; margin: 5px 7px; background: #171f2c; border: 1px solid #fff; 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-carousel .owl-dots .owl-dot.active span, .owl-carousel .owl-dots .owl-dot:hover span { background: #ec5598 } /*------------------------------------- 1.3 owl button top to center -------------------------------------*/ .owl-btn-top-center .owl-nav, .owl-btn-top-left .owl-nav, .owl-btn-top-right .owl-nav { position: absolute; top: 0; left: 0; width: 100%; margin: 0; } .owl-btn-top-center .owl-stage-outer, .owl-btn-top-left .owl-stage-outer, .owl-btn-top-right .owl-stage-outer { padding-top: 60px; } .owl-btn-top-center .owl-nav { text-align: center; } /*------------------------------------- 1.4 owl button top to left -------------------------------------*/ .owl-btn-top-left .owl-nav { text-align: left; } /*------------------------------------- 1.5 owl button top to right -------------------------------------*/ .owl-btn-top-right .owl-nav { text-align: right; } /*------------------------------------- 1.6 owl button bottom to center [it is default position ] -------------------------------------*/ .owl-btn-bottom-center .owl-nav { text-align: center; } /*------------------------------------- 1.7 owl button bottom to left -------------------------------------*/ .owl-btn-bottom-left .owl-nav { text-align: left; } /*------------------------------------- 1.8 owl button bottom to right -------------------------------------*/ .owl-btn-bottom-right .owl-nav { text-align: right; } /*------------------------------------- 1.9 owl button vertical to center -------------------------------------*/ .owl-btn-vertical-center .owl-nav { margin: 0px; } .owl-btn-vertical-center .owl-nav .owl-prev, .owl-btn-vertical-center .owl-nav .owl-next { position: absolute; top: 50%; margin: -15px 0; } .owl-btn-vertical-center .owl-nav .owl-prev { left: 0; } .owl-btn-vertical-center .owl-nav .owl-next { right: 0; } /*------------------------------------- 1.10 owl button show on hover -------------------------------------*/ .owl-btn-hover .owl-nav { opacity: 0; } .owl-btn-hover:hover .owl-nav { opacity: 1; } .owl-carousel .owl-item img { transform-style: inherit; } /*------------------------------------- 1.11 owl slider button -------------------------------------*/ /*------------------------------------- 1.11 owl slider button -------------------------------------*/ .owl-prev, .owl-next { background-color: #000 !important; color: #ffffff !important; padding: 8px 10px; width: 28px; height: 35px; text-align: center; font-size: 13px; display: inline-block; cursor: pointer; } .owl-carousel .owl-nav { margin-top: 30px; text-align: center; } .owl-carousel .owl-nav .disabled { opacity: .5; cursor: default } .owl-prev, .owl-next { background-color: #212121; border-color: #212121; color: #ffffff; padding: 8px 10px; font-size: 13px; display: inline-block; cursor: pointer; border-width: 1px; border-style: solid; border-radius: 0; opacity: 0.5; } .owl-prev { margin-right: 5px; } .owl-next { margin-left: 5px; } .owl-prev:hover, .owl-prev:active, .owl-prev:focus, .owl-next:hover, .owl-next:active, .owl-next:focus { background-color: #212121; border-color: #212121; color: #ffffff; opacity: 0.9; } /*------------------------------------- 1.12 owl dots nav position -------------------------------------*/ .owl-dots-bottom-left .owl-dots, .owl-dots-bottom-right .owl-dots, .owl-dots-bottom-center .owl-dots { bottom: 0px; padding: 15px 20px; position: absolute; width: 100%; } .owl-dots-bottom-left .owl-dots { text-align: left; } .owl-dots-bottom-right .owl-dots { text-align: right; } /*====================================== 21. PAGINATION ======================================*/ /*1. pagination style-1 */ .pagination-bx .pagination-1, .cvf-universal-pagination .pagination-1 { margin: 0; } .pagination-1 { padding: 10px 0; display: flex; } .pagination-1>li { list-style: none; } .pagination-1>li:first-child>a, .pagination-1>li:first-child>span { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: 0; } .pagination-1>li:last-child>a, .pagination-1>li:last-child>span { border-bottom-right-radius: 0; border-top-right-radius: 0; } .pagination-1>li>a, .pagination-1>li>span { background-color: #fff; border: 1px solid #e0e0e0; color: #767676; font-weight: 600; font-size: 12px; display: block; padding: 8px 12px; text-align: center; } .pagination-1>li>a:hover, .pagination-1>li>span:hover, .pagination-1>li>a:focus, .pagination-1>li>span:focus { background-color: #FF9800; border-color: transparent; color: #fff; } .pagination-1>.active>a, .pagination-1>.active>span, .pagination-1>.active>a:hover, .pagination-1>.active>span:hover, .pagination-1>.active>a:focus, .pagination-1>.active>span:focus { background-color: #FF9800; border-color: transparent; color: #fff; } .pagination-1>.previous>a, .pagination-1>.next>a { font-size: 12px; } /*2. pagination style-2 */ .custom-pagination.pagination-1 { padding: 10px 0; } @media only screen and (max-width:991px) { .custom-pagination.pagination-1 { margin-bottom: 30px; padding: 0px; } } .custom-pagination.pagination-1>li:first-child>a, .custom-pagination.pagination-1>li:first-child>span { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: 0; } .custom-pagination.pagination-1>li:last-child>a, .custom-pagination.pagination-1>li:last-child>span { border-bottom-right-radius: 0; border-top-right-radius: 0; } .custom-pagination.pagination-1>li>a, .custom-pagination.pagination-1>li>span { background-color: #171f2c; border: 1px solid #171f2c; color: #fff; font-weight: 600; font-size: 12px; } .custom-pagination.pagination-1>li>a:hover, .custom-pagination.pagination-1>li>span:hover, .custom-pagination.pagination-1>li>a:focus, .custom-pagination.pagination-1>li>span:focus { background-color: #FF9800; border-color: transparent; color: #fff; } .custom-pagination.pagination-1>.active>a, .custom-pagination.pagination-1>.active>span, .custom-pagination.pagination-1>.active>a:hover, .custom-pagination.pagination-1>.active>span:hover, .custom-pagination.pagination-1>.active>a:focus, .custom-pagination.pagination-1>.active>span:focus { background-color: #FF9800; border-color: transparent; } .custom-pagination.pagination-1>.previous>a, .custom-pagination.pagination-1>.next>a { padding: 8px 14px; font-size: 12px; } /*3. Pager */ .pager .disabled>a, .pager .disabled>a:focus, .pager .disabled>a:hover, .pager .disabled>span { color: #777; cursor: not-allowed; background-color: #fff; } .pager li>a, .pager li>span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; border-radius: 15px; } .pager { display: block; margin: 20px 0px; } .pager li { list-style: none; display: inline-block; } .pager.d-flex.justify-content-center li { margin: 0px 2px; } .custom-page.pager li a { background-color: #171f2c; border: none; color: #fff; } .custom-page.pager li>a:focus, .custom-page.pager li>a:hover { background-color: #ffbc13; text-decoration: none; } .custom-page.pager { margin: 20px 0px; } .custom-page.pager li { list-style: none; } .custom-page.pager li a { padding: 10px; } .pagination-1.pagination-lg>li>a, .pagination-1.pagination-lg>li>span { padding: 10px 15px; font-size: 18px; line-height: 1.3333333 } .pagination-1.pagination-sm>li>a, .pagination-1.pagination-sm>li>span { padding: 5px 10px; font-size: 12px; line-height: 1.5 } .pagination-1.pagination-sm>li:first-child>a, .pagination-1.pagination-sm>li:first-child>span { border-top-left-radius: 3px; border-bottom-left-radius: 3px } .pagination-1.pagination-sm>li:last-child>a, .pagination-1.pagination-sm>li:last-child>span { border-top-right-radius: 3px; border-bottom-right-radius: 3px } .pagination-1>.disabled>a, .pagination-1>.disabled>a:focus, .pagination-1>.disabled>a:hover, .pagination-1>.disabled>span, .pagination-1>.disabled>span:focus, .pagination-1>.disabled>span:hover { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; } /*====================================== 22. FOOTER ======================================*/ /*------------------------------------- 1. footer fixed on bottom css -------------------------------------*/ /*1.1 footer fixed with fullscreen view*/ .footer-fixed .site-footer { position: fixed; width: 100%; bottom: 0; z-index: 0; } .footer-fixed .page-content { position: relative; z-index: 1; background-color: #fff; } @media only screen and (max-width:1200px) { .footer-fixed .site-footer { position: static; } .footer-fixed .page-wraper { padding-bottom: 0 !important; } } /*1.2 footer fixed with boxed view*/ .footer-fixed.boxed .site-footer { margin: 0 -600px; left: 50%; max-width: 1200px; } .footer-fixed.boxed .wt-footer-callout-wrap { overflow: hidden; } /*1.3 Constrot strip line*/ .constrot-strip { height: 1px; width: 100%; background-color: #252525; } .site-footer .widget>.widget-title { letter-spacing: 2px; } .site-footer p, .site-footer li { font-size: 13px; line-height: 20px; } .site-footer { background-position: center; background-size: cover; } .site-footer p { line-height: 20px; } .site-footer .widget ul { list-style: none; margin-top: 5px; } .footer-top { padding: 50px 0; } .footer-bottom { padding: 0px 0px 30px 0px; color: #787878; font-size: 13px; } .footer-bottom .copyrights-text { color: #787878; } .footer-bottom .copyrights-nav { list-style: none; display: inline-block; } .footer-bottom .copyrights-nav li { display: inline-block; margin-left: 8px; margin-right: 8px; } .footer-bottom .copyrights-nav li:first-child { margin-left: 0; } .footer-bottom .copyrights-nav li:last-child { margin-right: 0; } .footer-bottom .copyrights-nav li:last-child:after { display: none; } .footer-bottom .copyrights-nav li:after { content: "/"; position: relative; right: -8px; } .footer-bottom .copyrights-nav li a { color: #787878; } .footer-bottom .copyrights-nav li a:hover, .footer-bottom .copyrights-nav li a:active, .footer-bottom .copyrights-nav li a:focus, .footer-bottom .copyrights-nav li.active a { color: #fff; } /*------------------------------------- 2. Footer dark version css -------------------------------------*/ /*.footer-dark .footer-top { background-color:#1b1b1b; } .footer-dark .footer-bottom { background-color:#1B1B1B; }*/ .footer-dark .footer-top h1, .footer-dark .footer-top h2, .footer-dark .footer-top h3, .footer-dark .footer-top h4, .footer-dark .footer-top h5, .footer-dark .footer-top h6, .footer-dark .footer-top h1 a, .footer-dark .footer-top h2 a, .footer-dark .footer-top h3 a, .footer-dark .footer-top h4 a, .footer-dark .footer-top h5 a, .footer-dark .footer-top h6 a { color: #fff; } .footer-dark .footer-top .widget-title::before { border-color: #fff; } .footer-dark .footer-top p, .footer-dark .footer-top strong, .footer-dark .footer-top b, .footer-dark .footer-top, .footer-dark .widget_categories ul li a, .footer-dark .widget_archive ul li a, .footer-dark .widget_meta ul li a, .footer-dark .widget_pages ul li a, .footer-dark .widget_recent_comments ul li a, .footer-dark .widget_nav_menu li a, .footer-dark .widget_recent_entries ul li a, .footer-dark .widget_services ul li a { color: #999; } .footer-dark .footer-top a:active, .footer-dark .footer-top a:focus, .footer-dark .footer-top a:hover { color: #ec5598; } .footer-dark .footer-top p a { color: #3396d1; } .footer-dark .footer-top .widget_newsletter .form-control { background-color: #0e0e0e; border-color: #2d2d2d; } .footer-light .footer-top { background-color: #eee; } .footer-light .footer-bottom { background-color: #eee; } /*------------------------------------- 3. Footer light version css -------------------------------------*/ /*------------------------------------- 4. widget li in footer -------------------------------------*/ footer .widget_categories ul li, footer .widget_archive ul li, footer .widget_meta ul li, footer .widget_pages ul li, footer .widget_recent_comments ul li, footer .widget_nav_menu li, footer .widget_recent_entries ul li, footer .widget_services ul li { border-bottom: 1px dashed rgba(102, 102, 102, 0.3); } footer .widget_categories ul li:last-child, footer .widget_archive ul li:last-child, footer .widget_meta ul li:last-child, footer .widget_pages ul li:last-child, footer .widget_recent_comments ul li, footer .widget_nav_menu li:last-child, footer .widget_recent_entries ul li:last-child, footer .widget_services ul li:last-child { border-bottom: none; } /*------------------------------------- 5. widget Getintuch -------------------------------------*/ footer .widget_getintuch i { background-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.30); } .footer-bottom ul { margin: 0; } .wt-footer-bot-left, .wt-footer-bot-right, .wt-footer-bot-center { padding-left: 15px; padding-right: 15px; } .wt-footer-bot-left { float: left; } .wt-footer-bot-right { float: right; } .wt-footer-bot-center { float: right; } @media only screen and (max-width:991px) { footer .container { width: 100%; } .col-md-3.col-sm-6.footer-col-4:nth-child(3) { clear: both; } .wt-footer-bot-left, .wt-footer-bot-right { float: none; text-align: center; padding-top: 5px; padding-bottom: 5px; } .wt-footer-bot-right .copyrights-nav { float: none !important; } } @media only screen and (max-width: 767px) { .footer-clear { display: block !important; clear: both; } #footer .footer-4-col { width: 100%; } .footer-bottom [class*="clo-"] { width: 100%; } } /*------------------------------------- 6. scroll top btn css -------------------------------------*/ /*------------------------------------- 6. scroll top btn css -------------------------------------*/ button.scroltop { height: 55px; width: 55px; background: #161616; border: 3px solid; position: fixed; right: 15px; bottom: 15px; font-size: 11px; line-height: 16px; font-weight: bold; text-transform: uppercase; margin: 0; padding: 0; cursor: pointer; display: none; text-align: center; z-index: 999; -webkit-border-radius: 50%; border-radius: 50%; } button.scroltop span { display: block; font-size: 24px; line-height: 24px; } .string { position: relative; } #btn-vibrate { animation: vibrate 2s linear 0s infinite; -moz-animation: vibrate 2s linear 0s infinite; /* Firefox */ -webkit-animation: vibrate 2s linear 0s infinite; /* Safari and Chrome */ -o-animation: vibrate 2s linear 0s infinite; /* Opera */ } @keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } /* Firefox */ @-moz-keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } /* Safari and Chrome */ @-webkit-keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } /* Opera */ @-o-keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } @media only screen and (max-width:480px) { button.scroltop { font-size: 7px; height: 30px; width: 30px; line-height: 16px; } button.scroltop span { font-size: 10px; line-height: 10px; } } /*====================================== 23. PAGE-CONTENT ======================================*/ #bg { background-attachment: fixed; background-size: cover; } .boxed .page-wraper { max-width: 1200px; margin: 0 auto; position: relative; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .boxed .tp-banner-container, .boxed .rev_slider_wrapper { left: 0 !important; width: 100% !important; } .boxed .tp-rightarrow { right: 0 !important; } .boxed .tp-leftarrow { left: 0 !important; } /*====================================== 23. PAGE-CONTENT ======================================*/ .page-wraper { background: #fff; } .page-content { position: relative; } .section-full { position: relative; } /*------------------------------------- 1. Section Head Part -------------------------------------*/ .section-head { margin-bottom: 50px; } .section-head.no-margin { margin-bottom: 0; } .section-head h1, .section-head h2, .section-head h3 { margin-top: 0; } .title-small { display: block; color: #6f6f6f; margin-bottom: 15px; } .section-head p { padding-top: 10px; font-size: 14px; } .section-head p:last-child { margin-bottom: 0; } .text-center.section-head p { max-width: 800px; margin-left: auto; margin-right: auto; } .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; } /*------------------------------------- 2. Section Content Part -------------------------------------*/ @media only screen and (max-width:1024px) { .section-full { background-attachment: scroll !important; } } /*====================================== 24. AFTER-LOGIN-CONTENT ======================================*/ /*------------------------------------- 1. calender css -------------------------------------*/ .zabuto_calendar, .zabuto_calendar th, .zabuto_calendar td, .zabuto_calendar .calendar-month-navigation { text-align: center; cursor: pointer; } /*------------------------------------- 2. Contact us page -------------------------------------*/ .banner-contact-row { height: 300px; background-size: cover; background-position: center; } .banner-contact-row * { color: #FFF; } .banner-contact-row .container { display: table; height: 100%; } .banner-contact-row h1 { display: table-cell; vertical-align: middle; } ul.contact-info li { padding: 0 0 15px 25px; margin-bottom: 15px; border-bottom: 1px solid #e1e1e1; position: relative; line-height: 20px; } ul.contact-info li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } ul.contact-info li h4 ul.contact-info li h5, ul.contact-info li h6 { margin: 0 0 10px; } ul.contact-info li p { line-height: 20px; margin: 0; } ul.contact-info li .fa { position: absolute; left: 0; top: 2px; color: #3396d1; font-size: 16px; } /*------------------------------------- 3.page not found -------------------------------------*/ .page-notfound-left { margin: 60px 0px; } .page-notfound-left [class^="flaticon-"]::before, .page-notfound-left [class^="flaticon-"]::after { display: block; font-size: 200px !important; } .page-notfound { padding: 60px 0; } .page-notfound strong { font-size: 70px; font-weight: 900; line-height: 100px; display: block; } .page-notfound strong i { font-size: 70px; margin: 0 10px; } .page-notfound .searchform { position: relative; text-align: left; max-width: 420px; margin: 30px auto; } .page-notfound span { font-size: 36px; display: block; color: #333; font-weight: 600; text-transform: uppercase; margin-bottom: 30px; } @media only screen and (max-width:991px) { .page-notfound strong { font-size: 40px; line-height: 50px; } .page-notfound strong i { font-size: 40px; } .page-notfound span { font-size: 20px; } } @media only screen and (max-width:575px) { .page-notfound { padding-bottom: 0px; } } @media only screen and (max-width: 420px) { .page-notfound { padding: 0px; } .page-notfound strong, .page-notfound strong i { font-size: 32px; line-height: 40px; } .page-notfound strong i { margin: 0px 2px; } .page-notfound-left [class^="flaticon-"]::before, .page-notfound-left [class^="flaticon-"]::after { font-size: 120px !important; } } /*====================================== 25. THEMEFOREST REQUIRED CLASSES ======================================*/ .sticky { clear: both; } .gallery-caption { clear: both; } .bypostauthor { clear: both; } /*------------------------------------- 1. Text meant only for screen readers -------------------------------------*/ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /*====================================== 26. HOME PAGE VERSION-1 ======================================*/ /*====================================== 27. BOX MAX-WIDTH css ( ) ======================================*/ .max-w100 { max-width: 100px; } .max-w200 { max-width: 200px; } .max-w300 { max-width: 300px; } .max-w400 { max-width: 400px; } .max-w500 { max-width: 500px; } .max-w600 { max-width: 600px; } .max-w700 { max-width: 700px; } .max-w800 { max-width: 800px; } .max-w900 { max-width: 900px; } .max-w1000 { max-width: 1000px; } /*====================================== 28. SHOP & PRODUCT DETAIL (Woocommerce) ======================================*/ /*------------------------------------- 1. Product Box -------------------------------------*/ .wt-product-box .price { margin-bottom: 10px; } .wt-product-box .price del { font-size: 16px; color: #999999; margin: 4px 4px; font-weight: 600; } .wt-product-box .price ins { font-size: 16px; color: #111111; text-decoration: none; margin: 4px 4px; font-weight: 600; } .wt-product-box .rating-bx { padding-top: 10px; color: #ffa000; } .wt-product-gallery a img { width: 100%; } /*------------------------------------- 2. Product Detail -------------------------------------*/ .btn-quantity { width: 150px; } .product-description.dex-tabs.border-top .nav-tabs>li.active>a { border-top: 2px solid #efbb20; } .product-description.dex-tabs .nav-tabs>li>a i { color: #efbb20; } .dex-tabs.bg-tabs .nav-tabs>li>a { background-color: #fcfcfc; } /*------------------------------------- 3. Product Review -------------------------------------*/ ol.commentlist { list-style: none; margin: 0; } ol.commentlist li { position: relative; padding: 0; margin-bottom: 20px; background: #F7F8FA; padding: 20px; border: 1px dashed #EEEEEE; } ol.commentlist li img { float: left; border: 5px solid #FFF; width: 80px; height: auto; } ol.commentlist li .comment-text { padding-left: 100px; } ol.commentlist li .meta { margin-bottom: 5px; } ol.commentlist li .meta strong { font-size: 16px; } ol.commentlist li .meta .time { color: #999; display: block; font-size: 14px; } ol.commentlist li .description p { margin: 0; } ol.commentlist li .star-rating { position: absolute; top: 20px; right: 20px; } @media only screen and (max-width: 767px) { ol.commentlist li .star-rating { position: inherit; } } .comment-reply-title { margin-top: 0; } .comment-form [class*="comment-form"] { width: 50%; } @media only screen and (max-width: 767px) { .comment-form [class*="comment-form"] { width: 100%; } } @media only screen and (max-width: 420px) { ol.commentlist li img { float: none; } ol.commentlist li .comment-text { padding-left: 0px; padding-top: 10px; } } .comment-form [class*="-form-author"], .comment-form [class*="-form-email"] { float: left; } .comment-form [class*="-form-comment"] { width: 100%; } .comment-form label { display: block; } .star-Rating-input i { font-size: 18px; } .star-Rating-input .fa-star { color: #FF9800; } .star-Rating-input i:hover { color: #000; } .comment-form [class*="comment-form"] input, .comment-form [class*="comment-form"] textarea { border: 1px solid #CCC; padding: 8px 10px; width: 100%; } .comment-form { margin: 0 -15px; } .comment-form [class*="comment-form"], .comment-form .form-submit { margin-bottom: 20px; padding: 0 15px; } .comment-form .form-submit input:active, .comment-form .form-submit input:focus, .comment-form .form-submit input:hover { background: #037a85; } /*====================================== 29. content show on image box () ======================================*/ /* info box show */ .wt-info-has { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; padding: 30px 40px 40px; opacity: 0; margin-bottom: -100px; z-index: 2; } .wt-info-has.p-a15 { padding: 15px; } .wt-info-has.p-a20 { padding: 20px; } .wt-info-has.site-bg-primary { background-color: rgba(27, 188, 232, 0.9); } .wt-info-has.bg-green { background-color: rgba(106, 179, 62, 0.9); } .wt-info-has.bg-black { background-color: rgba(0, 0, 0, 0.6); } .wt-info-has.bg-white { background-color: rgba(255, 255, 255, 0.8); } .wt-info-has.bg-white h1, .wt-info-has.bg-white h2, .wt-info-has.bg-white h3, .wt-info-has.bg-white h4, .wt-info-has.bg-white h5, .wt-info-has.bg-white h6 { color: #3d474a; } .wt-info-has.bg-white h1 a, .wt-info-has.bg-white h2 a, .wt-info-has.bg-white h3 a, .wt-info-has.bg-white h4 a, .wt-info-has.bg-white h5 a, .wt-info-has.bg-white h6 a { color: #3d474a; } .wt-info-has.bg-white .wt-info-has-text, .wt-info-has.bg-white p { color: #585858; } .wt-info-has h1, .wt-info-has h2, .wt-info-has h3, .wt-info-has h4, .wt-info-has h5, .wt-info-has h6, .wt-info-has p, .wt-info-has-text { color: #fff; } .wt-info-has .wt-info-has-text { margin-bottom: 20px; line-height: 24px; } .wt-box:hover .wt-info-has, .wt-thum-bx:hover .wt-info-has { opacity: 1; width: 100%; margin-bottom: 0; } .wt-info-has.no-hover { opacity: 1; width: 100%; margin-bottom: 0; } @media only screen and (max-width:768px) { .wt-media>img, .wt-media a>img { width: 100%; } } /*====================================== 30. Customize Grouping css ======================================*/ /*------------------------------------- 1.set-radius -------------------------------------*/ .btn, .panel, .form-control, .img-thumbnail, .panel-head ing, .dropdown-menu, .panel-group .panel, .nav-tabs>li>a, .modal-content, .navbar-toggle, .nav-pills>li>a, .pager li>a, .pager li>span, .well, .alert, .list-group-item:first-child, .list-group-item:last-child, .input-group-addon, .btn-group-divides>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group-divides>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child), .wt-booking-form .wt-extra-services li .wt-icon-box-lg, .wt-booking-form .wt-extra-services li.active .wt-icon-box-lg:after, .searchform input[type="text"], .searchform input[type="submit"], ol.comment-list li.comment .comment-body { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } /*------------------------------------- 2. transition -------------------------------------*/ a, .btn, .form-control, .overlay-bx, .overlay-icon li a i, .wt-icon-box-xld, .wt-icon-box-xl, .wt-icon-box-lg, .wt-icon-box-md, .wt-icon-box-sm, .wt-icon-box-xs, .share-social-bx li, .indicator, .profile-menu ul li, .staff-member .member-done, .how-wt-work .wt-box .shadow-bx img, .how-wt-work .wt-box .step-no-bx, .wt-info-has, .wt-we-find .wt-box, .navbar-toggle, .logo-header, .header-nav .nav>li>a, .extra-nav, .acod-head .indicator .fa { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .animate-slow { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .animate-mid { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .animate-fast { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } /*------------------------------------- 3. float-clearfix -------------------------------------*/ .clearfix::after, .filter-wrap::after, .filter-wrap::after, .wt-icon-box-wraper::after, ol.commentlist li::after { content: ""; display: table; clear: both; } /*====================================== 32. Inner pages ======================================*/ /*------------------------------------- 1. Contact us -------------------------------------*/ .cons-contact-form { border: 1px solid #ededed; padding: 30px; background-color: #fff; } .cons-contact-form .form-control { height: 42px; border-color: #f1f1f1; } @media only screen and (max-width:420px) { .cons-contact-form { padding: 20px; } } /*1.1 Contact us 1 */ .wt-contact-wrap { position: relative; margin: 0px; } .contact-left-part { width: 50%; float: left; height: 100%; } .contact-left-part .google-map { width: 100%; height: 100%; } .contact-left-part .gmap-outline { padding: 0px; height: 100%; } .contact-right-part { width: 50%; float: right; } @media only screen and (max-width: 767px) { .contact-left-part, .contact-right-part { width: 100%; float: none; } .contact-left-part .gmap-outline { height: 280px; } .contact-right-part { margin-bottom: 30px; } } /*------------------------------------- 2. Out Team -------------------------------------*/ /*2.1. Out Team one*/ .wt-team-one { position: relative; } .wt-team-one .wt-team-info p { margin-bottom: 20px; } /*2.2. Out Team two*/ .wt-team-two { position: relative; padding: 10px; } .wt-team-two .wt-team-media { overflow: hidden; border: 5px solid #fff; } .wt-team-two .wt-team-info { margin-bottom: 10px; } /*2.3. Out Team three*/ .wt-team-three .wt-team-info p { margin-bottom: 10px; } /*2.4. Out Team four*/ .wt-team-four { position: relative; background-color: #f2f2f2; } .wt-team-four .wt-team-media a img { width: 100% } .wt-team-four .wt-team-skew-block { background-color: #171f2c; } .wt-team-four .wt-team-skew-block { top: 0px; left: 0px; } .wt-team-four .wt-team-skew-block .social-icons-outer { margin-right: 70px; position: relative; z-index: 1; } .wt-team-four .wt-team-info { position: relative; } .wt-team-four .wt-team-info .wt-team-title { margin: 0px 0px 5px 0px; } .wt-team-four .wt-team-info p { margin-bottom: 0px; } .wt-team-four:hover .wt-team-media { position: relative; } .wt-team-four:hover .wt-team-media:after { content: ""; display: block; height: 100%; position: absolute; right: 0px; top: 0px; width: 100%; z-index: 1; border: 3px solid #171f2c; } /*2.5. Out Team five*/ .wt-team-five-warper { margin-left: 60px; margin-right: 60px; display: table; text-align: center; } .wt-team-five-warper .wt-col-5 { position: relative; z-index: 2; width: 20%; display: table-cell; vertical-align: bottom; } .wt-team-five-warper .wt-col-5:last-child { z-index: 1; } .wt-team-five-warper .wt-col-5:last-child:hover { z-index: 2; } .wt-team-five .wt-team-media img { max-width: 160%; margin-left: -30%; margin-right: -30%; } .wt-team-five-warper .wt-team-active { z-index: 5; } .wt-team-five-warper .wt-team-active .wt-team-media img { min-width: 180%; margin-left: -40%; margin-right: -40%; } .wt-team-five .wt-team-info { position: absolute; width: 100%; bottom: 50px; left: 0; opacity: 0; -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; } .wt-team-five .wt-arrow-up { position: relative; z-index: 2; } .wt-team-five .wt-arrow-up:before { border-bottom: 8px solid #000000; border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; height: 0; position: absolute; right: 50%; top: -8px; margin: 0 -4px; width: 0; } .wt-team-five .wt-team-info .wt-team-title, .wt-team-five .wt-team-info .wt-team-title a { color: #fff; } .wt-team-five .wt-team-info .wt-team-title a:hover { color: #000000; } .wt-col-5:hover { z-index: 10; } .wt-team-five:hover .wt-team-info { opacity: 1; bottom: 20px; } @media only screen and (max-width:767px) { .wt-team-five-warper { display: block; } .wt-team-five-warper .wt-col-5 { width: auto; display: block; margin-bottom: 30px; padding: 20px 20px 0; border: 3px solid #ec5598; } .wt-team-five .wt-team-media img { margin-left: 0; margin-right: 0; max-width: 100%; } .wt-team-five-warper .wt-team-active .wt-team-media img { margin-left: 0; margin-right: 0; min-width: inherit; max-width: 100%; } .wt-team-five:hover .wt-team-info { opacity: 1; bottom: 0; left: 0; width: 100%; } } @media only screen and (max-width:460px) { .wt-team-five-warper { margin: 0; } } /*------------------------------------- 3. Social-new block -------------------------------------*/ .wt-social-block { position: absolute; bottom: 0px; background: #171f2c; padding-top: 10px; width: 100%; } /*------------------------------------- 4. portfolio block -------------------------------------*/ .product-block {} .product-block p { margin-bottom: 0px; } /*------------------------------------- 5. services -------------------------------------*/ .bg-service-team { background-image: url(file:///G|/uploading-item/bitinvest-html-template/html/images/our-services/crane-left.jpg); background-repeat: no-repeat; background-position: -200px bottom; } /*------------------------------------- 6. latest project -------------------------------------*/ .latest-project-block { background-image: url(file:///G|/uploading-item/bitinvest-html-template/html/images/main-page-pic/btn-wrap-bg-dark.jpg); background-repeat: no-repeat; background-position: center center; } .masonry-filter.outline-style.customize>li a { border-color: #505b69; color: #7c8590; } .masonry-filter.outline-style.customize>li.active a, .masonry-filter.outline-style.customize>li:hover a { background-color: #ec5598; border-color: #ec5598; color: #fff; } /*====================================== 33. Box-corner ======================================*/ /* corner-sm */ /*====================================== 34. Menu list block ======================================*/ .wt-nav-block { border: 1px solid #ddd; } .wt-nav { list-style: none; margin: 0px; } .wt-nav-pills li { display: block; border-bottom: 1px solid #ddd; } .wt-nav-pills li:last-child { border: 0px; } .wt-nav-pills li a { color: #777777; padding: 10px; display: block; } .wt-nav-pills li:hover a { background-color: #ec5598; color: #fff; } .wt-nav-title { margin: 0px; padding: 10px; border-bottom: 1px solid #ddd; background: #f8f9f9; } /*====================================== 35. Company Detail skew ======================================*/ .company-detail-skew { position: relative; } .company-detail-skew:after { border-right: 12px solid #1e1c1c; content: ""; display: block; height: 115%; width: 1920px; position: absolute; right: 100%; top: -20px; z-index: 1; background-color: #FF9800; background-image: url(file:///G|/uploading-item/bitinvest-html-template/html/images/background/bg7.png); background-repeat: repeat; } @media only screen and (max-width: 991px) { .company-detail-skew:after { margin-right: -50px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); -ms-transform: skew(20deg); transform: skew(20deg); } } @media only screen and (max-width: 767px) { .company-detail-skew:after { margin-right: -70px; } } @media only screen and (max-width: 600px) { .company-detail-skew:after { display: none; } } .company-status { padding-left: 100px; } @media only screen and (max-width: 1200px) { .company-status { padding-left: 140px; } } @media only screen and (max-width:991px) { .company-status { padding-left: 120px; } } @media only screen and (max-width:600px) { .company-status { padding-left: 0; } } @media only screen and (max-width:470px) { .company-status .col-xs-6 { width: 100%; margin-bottom: 10px; } } .rocket-pic { position: relative; z-index: 2; text-align: center; } .rocket-pic .rocket-animation { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .rocket-pic .rocket-animation { position: absolute; top: -100px; } .rocket-pic .rocket-fire { position: absolute; bottom: -20px; left: 0px; z-index: -1; width: 100%; } @media only screen and (max-width:991px) { .rocket-pic { width: 50%; margin: 0px auto; } .rocket-pic .rocket-animation { position: inherit; top: auto; } } @media only screen and (max-width:420px) { .rocket-animation img { width: 50%; } .rocket-animation .rocket-fire img { width: 20%; } } .status-sign { background: #fff; height: 60px; width: 96px; position: relative; float: left; } .status-sign i { color: #171f2c; float: left; font-size: 38px; padding-top: 10px; padding-left: 30px; } .status-value span { display: inline; overflow: hidden; font-size: 36px; height: 60px; height: 60px; color: #ec5598; font-weight: bold; } /*====================================== 36. Clients ======================================*/ .client-grid { overflow: hidden; } .client-grid [class*="col-"] { position: relative; z-index: 1; } .client-grid [class*="col-"] a { display: block; } .client-grid [class*="col-"]:after { content: ""; position: absolute; border-bottom: 1px dashed #dcdcdc; border-left: 1px dashed #dcdcdc; position: absolute; left: -1px; bottom: -1px; height: 100%; width: 100%; z-index: -1; } .grid-5 [class*="col-"] { width: 20%; } .grid-4 [class*="col-"] { width: 25%; } .grid-3 [class*="col-"] { width: 33.33%; } .grid-2 [class*="col-"] { width: 50%; } @media only screen and (max-width: 991px) { .grid-5 [class*="col-"] { width: 25%; } } @media only screen and (max-width: 767px) { .grid-5 [class*="col-"], .grid-4 [class*="col-"], .grid-3 [class*="col-"] { width: 50%; } } @media only screen and (max-width: 360px) { .grid-5 [class*="col-"], .grid-4 [class*="col-"], .grid-3 [class*="col-"] { width: 100%; } } /*====================================== 37. FAQ ======================================*/ .faq-block { margin: 5px 0px; } .faq-block .faq-que { padding: 4px 10px 11px 40px; position: relative; margin-bottom: 0px; } .faq-block .faq-ans { padding: 4px 10px 11px 40px; position: relative; } .faq-block .faq-que:after, .faq-block .faq-ans:after { color: #000; background: none !important; position: absolute; left: 0px; top: 0px; display: block; font-size: 20px; font-weight: 600; text-align: center; } .faq-block .faq-que:after { content: "Q"; } .faq-block .faq-ans:after { content: "A"; } @media only screen and (max-width: 767px) { .faq-block h2 { font-size: 18px; } } @media only screen and (max-width: 320px) { .faq-block h2 { font-size: 16px; } } /*====================================== 38. Cart ======================================*/ .wt-cart .woo-cart-total { display: inline-block; font-weight: 600; color: #555; } .wt-cart .woo-cart-count { border: 2px solid #555; color: #555; display: inline-block; font-weight: 800; min-width: 34px; padding: 5px 5px 5px; position: relative; text-align: center; } .wt-cart .woo-cart-count:before { content: ""; border: 2px solid #555; width: 22px; height: 10px; border-bottom: none; position: absolute; top: -8px; left: 50%; margin: 0 -11px; } .cart-dropdown-item-wraper { top: 110%; right: 0px; position: absolute; z-index: 999; background-color: #fff; padding: 2px; border: 3px solid #eaeaea; width: 280px; display: none; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); text-align: left; } .nav-cart-items { position: relative; } .nav-cart-title { border-bottom: 1px solid #eee; } .nav-cart-title h4 { font-size: 15px; font-weight: 700; letter-spacing: 1px; margin: 0px; text-transform: uppercase; } .nav-cart-item { border-top: 1px solid #f5f5f5; margin-top: 15px; padding-top: 15px; } .nav-cart-item:first-child { border-top: 0 none; margin-top: 0; padding-top: 0; } .nav-cart-item-image { border: 2px solid #eee; float: left; height: 48px; margin-right: 15px; transition: border-color 0.2s linear 0s; width: 48px; } .nav-cart-item-image a, .nav-cart-item-image img { display: block; height: 44px; width: 44px; } .nav-cart-item-image:hover { border-color: #243447; } .nav-cart-item-desc { overflow: hidden; position: relative; } .nav-cart-item-desc a { font-size: 13px; font-weight: 600; height: auto; text-align: left; width: auto; } .nav-cart-item-desc a:hover { color: #243447; } .nav-cart-item-desc span.nav-cart-item-price { color: #999; display: block; font-size: 12px; line-height: 20px; } .nav-cart-item-desc a.nav-cart-item-quantity { color: #444; display: block; font-size: 12px; position: absolute; right: 0; top: 2px; padding: 0px 5px 2px 5px; } .nav-cart-item-desc a:hover.nav-cart-item-quantity { background-color: #000; color: #fff; } .nav-cart-action { border-top: 1px solid #eee; } /*====================================== 39. Product ======================================*/ .pro-banner { position: relative; background-color: #fff; overflow: hidden; background-size: cover; background-position: right; } .pro-banner-disc { background-color: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; } .pro-banner-disc h2, .pro-banner-disc h3 { font-weight: 700; } .pro-banner-disc h3 { color: #ffbc13; } .pro-banner-disc a { position: inherit; right: 0px; bottom: 0px; } @media only screen and (max-width: 991px) { .pro-banner img { width: 100%; } } @media only screen and (max-width: 420px) { .pro-banner-disc { padding: 10px !important } .pro-banner-disc h2 { font-size: 15px; } .pro-banner-disc h3 { font-size: 14px; } .pro-banner-disc h4 { font-size: 13px; } .pro-banner-disc h5 { font-size: 12px; } .pro-banner-disc h2, .pro-banner-disc h3, .pro-banner-disc h4, .pro-banner-disc h5 { margin-bottom: 0px !important; } } /*====================================== 40. Glass reflection ======================================*/ .img-reflection { background-position: left top; position: relative; overflow: hidden; background-size: 100% auto; background-repeat: no-repeat; } .img-reflection:after { content: ""; background-color: rgba(255, 255, 255, 0.2); position: absolute; width: 35%; height: 200%; left: -100%; top: -50%; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -moz-transform: rotate(40deg); -webkit-transform: rotate(40deg); -o-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } .img-reflection:hover:after { left: 150%; } /*====================================== 41. About company ======================================*/ .about-com-pic { position: relative; z-index: 1; } .about-com-pic:after { content: ""; position: absolute; width: 100%; height: 100%; top: 10px; left: -10px; background-color: #ec5598; z-index: -1; } .about-com-pic img { width: 100%; } @media only screen and (max-width:991px) { .about-com-pic { margin-bottom: 40px; } } /*====================================== 42. Flip ======================================*/ /* simple */ .flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -ms-transform: perspective(1000px); -moz-transform: perspective(1000px); /*-moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; */ } /* START: Accommodating for IE */ .flip-container:hover .wt-info { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .flip-container:hover .wt-thum-bx { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } /* END: Accommodating for IE */ .flip-container, .flip-container .wt-thum-bx, .flip-container .wt-info { width: 100%; height: 100%; } .flip-container .wt-box { -webkit-transition: 0.6s; -ms-transition: 0.6s; -moz-transition: 0.6s; -moz-transform: perspective(1000px); transition: 0.6s; position: relative; } .flip-container .wt-thum-bx, .flip-container .wt-info { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform: rotateY(0deg); -moz-transition: 0.6s; -moz-transform: rotateY(0deg); -o-transition: 0.6s; -o-transform: rotateY(0deg); -ms-transition: 0.6s; -ms-transform: rotateY(0deg); transition: 0.6s; transform: rotateY(0deg); top: 0; left: 0; } .flip-container .wt-info { position: absolute; } .flip-container .wt-info .wt-info-text { bottom: 0px; left: 0px; width: 100%; position: absolute; } @media only screen and ( max-width:320px) { .flip-container .wt-info .wt-info-text { padding: 15px; } } .flip-container .wt-info .wt-info-media-zoom { right: 0px; top: 0px; position: absolute; z-index: 10; } .flip-container .wt-thum-bx { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; } .flip-container .wt-thum-bx img { transform-style: flat; } .flip-container .wt-info { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } /* vertical */ .vertical.flip-container { position: relative; } .vertical.flip-container .wt-info { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); } .vertical.flip-container .wt-box { -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin: 100% 213.5px; transform-origin: 100% 213.5px; } /* START: Accommodating for IE */ .vertical.flip-container:hover .wt-info { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } .vertical.flip-container:hover .wt-thum-bx { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } /*====================================== 43. Animate line ======================================*/ .animate_line { position: relative; z-index: 0; } .animate_line:after, .animate_line:before { content: ""; height: 4px; width: 0px; position: absolute; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; z-index: -1; } .animate_line:after { left: 12px; bottom: 0; } .animate_line:before { right: 12px; top: 0; } .animate_line:hover:after, .animate_line:hover:before { width: calc(100% - 24px); height: 100%; background: #ec5598; } @media only screen and ( max-width:768px) { .animate_line:after { bottom: -5px; } .animate_line:before { top: -5px; } } /*====================================== 44. Timeline Section ======================================*/ /*---- timeline 1 ----*/ .timeline { position: relative; } .timeline::before { background-color: #d8d9df; bottom: 0; content: ""; left: 50%; position: absolute; top: 30px; width: 1px; z-index: 0; } .timeline .timeline-item { width: 50%; position: relative; } .timeline .timeline-item:nth-child(odd) { text-align: right; padding-right: 60px; } .timeline .timeline-item:nth-child(even) { text-align: left; margin-left: 50%; padding-left: 60px; } .timeline .timeline-icon { position: absolute; } .timeline .timeline-item:nth-child(odd) .timeline-icon { right: -40px; } .timeline .timeline-item:nth-child(even) .timeline-icon { left: -40px; } @media only screen and (max-width:480px) { .timeline::before { left: 10%; right: auto; } .timeline .timeline-item { width: 100%; } .timeline .timeline-item:nth-child(2n+1) { padding-left: 100px; padding-right: 0px; text-align: left; } .timeline .timeline-item:nth-child(2n) { margin-left: 0%; padding-left: 100px; text-align: left; } .timeline .timeline-item:nth-child(2n+1) .timeline-icon { left: 5px; right: auto; } .timeline .timeline-item:nth-child(2n) .timeline-icon { left: 5px; } } /*====================================== 45. Our value Section ======================================*/ @media only screen and (max-width:768px) { .our-value { margin-bottom: 40px; } .our-value .our-value-right { padding: 20px 40px; } } /*====================================== 46. Summary counter ======================================*/ .summary-counter .icon-content div span.counter, .summary-counter .icon-content div b { font-size: 36px; font-family: Arial, Helvetica, sans-serif; font-weight: 700; } .summary-counter .icon-content span { font-weight: 700; font-size: 18px; } /*====================================== 47. Circle Effect ======================================*/ .circle-effect-1 { margin: 0 auto; position: relative; width: 94%; z-index: 2; } .radius-bx.circle-effect-1:after, .radius-bx.circle-effect-1:before { content: ""; border-radius: 100%; position: absolute; } .circle-effect-1:after { background-color: #ec5598; width: 110%; height: 110%; left: -5%; top: -5%; z-index: -2; } .circle-effect-1:before { background-color: #fff; width: 105%; height: 105%; left: -4%; top: -4%; z-index: -1; } .circle-effect-1:after, .circle-effect-1:before { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .circle-effect-1:hover:after { left: -5%; top: -5%; } .circle-effect-1:hover:before { left: -1%; top: -1%; } .circle-effect-1+.wt-info p { font-size: 16px; } .circle-effect-2 { margin: 0 auto; position: relative; width: 94%; z-index: 2; } .circle-effect-2+.wt-info p { font-size: 16px; } .price-tag-3 { position: absolute; top: 0px; left: 30px; z-index: 5; } .price-tag { position: absolute; top: 0px; left: 0px; z-index: 5; } .price-circle, .pricing-circle-2 { width: 60px; height: 60px; } .price-circle { display: table; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); -o-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); } .pricing-circle-2 { display: table; } .price-circle span, .pricing-circle-2 span { display: table-cell; vertical-align: middle; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } /*====================================== 48. Special Offer ======================================*/ .special-offer-outer { position: relative; z-index: 1; } .special-offer-outer:after { content: ""; position: absolute; right: -25%; top: 0px; height: 100%; width: 50%; background-color: #ec5598; border-right: 10px solid #fff; } .radius.special-offer-outer:after { -webkit-border-radius: 0 50% 50% 0; border-radius: 0 50% 50% 0; } .special-offer { background-color: rgba(255, 255, 255, 0.2); position: relative; z-index: 1; margin-right: 20% } .special-offer:after { content: ""; position: absolute; right: -45%; top: 0px; height: 100%; width: 45%; background-color: rgba(255, 255, 255, 0.2); } .radius.special-offer:after { -webkit-border-radius: 0 50% 50% 0; border-radius: 0 50% 50% 0; } .special-offer-in { position: relative; margin-right: -24%; } .special-offer .wt-left-part h1 { font-size: 52px; } .special-offer .wt-left-part p { font-size: 16px; } .special-offer-outer-square.special-offer-outer:after { right: -8%; } .special-offer-outer-square.special-offer-outer .special-offer:after { width: 0%; } .special-offer-outer-square.special-offer-outer .special-offer { margin-right: 0%; } .special-offer-outer-square.special-offer-outer .special-offer-in { margin-right: 0%; } @media only screen and ( max-width:1200px) { .special-offer-in { margin-right: 0%; } .special-offer .special-offer-in .wt-box { padding-right: 0px; } .special-offer::after { right: -40%; width: 40%; } .special-offer-outer::after { right: -40%; } .special-offer { margin-right: 10%; } } @media only screen and ( max-width:991px) { .special-offer-block { background-image: none !important; text-align: center; } .special-offer::after, .special-offer-outer::after { display: none; } .special-offer { border-radius: 50%; margin: 0 10%; padding: 10%; } /* .testimonial-5 { margin-left: 13%; position: relative; } */ .special-offer { border-radius: 20% 20%; } } @media only screen and ( max-width:600px) { .special-offer .wt-left-part { padding-left: 0px; } .special-offer .wt-left-part h1 { font-size: 32px; } .special-offer .wt-left-part h2 { font-size: 18px; } .special-offer .wt-left-part p { font-size: 14px; } } @media only screen and ( max-width:420px) { .testimonial-5 { margin-left: 0%; position: relative; } .testimonial-5 .testimonial-pic-block { left: inherit; position: inherit; text-align: center; top: inherit; padding-top: 30px; } .testimonial-5 .testimonial-text { padding: 40px 20px 20px 20px; } .testimonial-5 .testimonial-pic { float: none; } .special-offer { padding: 4%; margin: 0 3%; } } /*====================================== 49. Special Offer ======================================*/ .wt-subscribe-left .icon-content p { font-size: 18px; } .wt-subscribe-left .icon-content span { font-size: 24px; font-weight: 700; } /*====================================== 50. Opening Hours ======================================*/ .Opening-hours ul { margin-bottom: 0px; } .Opening-hours ul li { padding-bottom: 5px; } .Opening-hours h3 { margin-bottom: 10px; } .Opening-hours ul li span { display: inline-block; font-weight: 700; } /*====================================== 51. pricing-tab-content-block ======================================*/ /*.our-pricing-carousel.owl-carousel.owl-drag .owl-item{ background:#000 !important; } */ .our-pricing-carousel.owl-carousel .owl-stage-outer { padding-bottom: 10px; } .our-pricing-carousel.nav-tabs { border-bottom: none; } .our-pricing-carousel .item .wt-icon-box-wraper { background-color: #fff; } .our-pricing-carousel .item.active-arrow .wt-icon-box-wraper { background: none; color: #fff; } .our-pricing-carousel .item .tab-block { cursor: pointer; } .our-pricing-carousel .item.active-arrow { position: relative; background-color: #EC5598; } .our-pricing-carousel .item.active-arrow:after { position: absolute; content: ""; bottom: -24px; margin-left: -15px; left: 50%; width: 30px; height: 30px; border-top: 18px solid #EC5598; border-left: 18px solid transparent; border-right: 18px solid transparent; } .our-pricing-carousel .item.active-arrow .wt-icon-box-wraper .icon-cell i:before { color: #fff; } @media only screen and ( max-width:360px) { .our-pricing-carousel .item .wt-icon-box-wraper .icon-cell i { line-height: 36px; } .our-pricing-carousel .item .wt-icon-box-wraper .icon-cell i:before { font-size: 32px; } .our-pricing-carousel .item .wt-icon-box-wraper .wt-tilte { font-size: 12px; } } .our-pricing-carousel .item.active-arrow .our-pricing-tab { border-style: hidden; } .pricing-tab-content-block { display: none; } .pricing-tab-content-block.active-arrow { display: inherit; } .pricing-tab-content-block .tab-pane { padding: 0px 0px 0px 20px !important; } .our-services-index .item { margin: 0px 20px; } .our-services-index .owl-carousel .owl-dots .owl-dot span { width: 18px; height: 18px; border-radius: 50%; border: none; } .pricing-tab-content-block .wt-tabs.vertical .nav-tabs { border-bottom: medium none; border-right: 1px solid #ddd; float: left; width: 275px; } .pricing-tab-content-block .wt-tabs.vertical .tab-content { border-left: 0px; margin-left: 275px; } .pricing-tab-content-block .wt-tabs .nav-tabs>li>a { color: #171f2c; font-size: 15px; font-weight: 500; padding: 21px 20px 21px 30px; } @media only screen and ( max-width:400px) { .pricing-tab-content-block .wt-tabs .nav-tabs>li>a { padding: 10px; font-size: 12px; } } .pricing-tab-content-block .wt-tabs.bg-tabs .nav-tabs>li>a { background-color: #fff; border: 1px solid #ddd; margin-right: -1px; } .pricing-tab-content-block .wt-tabs.bg-tabs .nav-tabs>li:hover>a { background-color: #ec5598; color: #fff; } .pricing-tab-content-block .wt-tabs.vertical .nav-tabs li.active a { background-color: #ec5598; color: #fff; position: relative; } .pricing-tab-content-block .wt-tabs.vertical .nav-tabs li.active a:before { content: "ï„…"; font-family: "FontAwesome"; font-size: 24px; position: absolute; right: 20px; top: 13px; } @media only screen and (max-width:400px) { .pricing-tab-content-block .wt-tabs.vertical .nav-tabs li.active a:before { font-size: 18px; right: 15px; top: 6px; -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ transform: rotate(90deg); } } @media only screen and ( max-width:991px) { .pricing-tab-content-block .wt-tabs.vertical .tab-content { padding-left: 0px; } } @media only screen and ( max-width:768px) { .wt-tabs.vertical .tab-pane { padding: 0px 0 10px 20px; } } @media only screen and ( max-width:720px) { .pricing-tab-content-block .section-content { padding-top: 10px; } .pricing-tab-content-block .wt-tabs.vertical .tab-pane { padding: 0px; } .pricing-tab-content-block .wt-tabs.vertical .tab-content { padding-left: 0px; } .pricing-tab-content-block .wt-tabs.vertical .nav-tabs { float: none; width: 100%; margin-bottom: 15px; } .pricing-tab-content-block .wt-tabs.vertical .nav-tabs li { width: 50%; float: left; } } /*====================================== 52.CIRCLE EFFECT ======================================*/ .circle-line-effect { position: relative; z-index: 1 } .circle-line-effect:after, .circle-line-effect:before { position: absolute; content: ""; z-index: -1; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .radius.circle-line-effect:after, .radius.circle-line-effect:before { border-radius: 100%; } .circle-line-effect:after { border: 4px solid rgba(0, 0, 0, 0.0); width: 130%; height: 130%; left: -15%; top: -15%; } .circle-line-effect:before { border: 2px solid rgba(0, 0, 0, 0.0); width: 150%; height: 150%; left: -25%; top: -25%; } .circle-line-effect:after, .circle-line-effect:before { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .wt-icon-box-wraper:hover .circle-line-effect:after { border: 3px solid #4B3941; width: 120%; height: 120%; left: -10%; top: -10%; opacity: 0.2; } .wt-icon-box-wraper:hover .circle-line-effect:before { border: 2px solid #4B3941; width: 140%; height: 140%; left: -20%; top: -20%; opacity: 0.1; } /*====================================== 53. Background Effects ======================================*/ .bg-center { background-position: center; } .bg-top-left { background-position: top left; } .bg-top-right { background-position: top right; } .bg-top-center { background-position: top center; } .bg-bottom-left { background-position: bottom left; } .bg-bottom-right { background-position: bottom right; } .bg-bottom-center { background-position: bottom center; } .bg-left-center { background-position: left; } .bg-right-center { background-position: right; } .bg-auto { background-size: auto; } .bg-contain { background-size: contain; } .bg-cover { background-size: cover; } .bg-full-width { background-size: 100% auto; } .bg-full-height { background-size: auto 100%; } .bg-repeat { background-repeat: repeat; } .bg-no-repeat { background-repeat: no-repeat; } .bg-repeat-x { background-repeat: repeat-x; } .bg-repeat-y { background-repeat: repeat-y; } .bg-fixed { background-attachment: fixed; } .bg-scroll { background-attachment: scroll; } /*====================================== 54. shopping-table ======================================*/ .shopping-table .cf th { padding: 15px 10px !important; color: #fff; } /*====================================== 55. shopping-table ======================================*/ .your-order-list ul { list-style: none; } .your-order-list ul li { padding: 25px 10px; clear: both; border-bottom: 1px solid #eee; } /*====================================== 47. ON SHOW SLIDER ======================================*/ /*.on-show-slider{ position:relative; cursor:pointer; } .on-show-slider #sync2{ position:absolute; bottom:0px; background-color:#fff; margin:1%; width:98%; } .on-show-slider #sync2 .owl-item img{ padding:5px; } .on-show-slider #sync1 .owl-nav, .on-show-slider #sync2{ opacity:1; } .on-show-slider:hover #sync1 .owl-nav, .on-show-slider:hover #sync2{ opacity:1; }*/ .on-show-slider { cursor: pointer; } .on-show-slider #sync2 .owl-item {} .on-show-slider #sync2 .owl-item.current { position: relative; z-index: 1; } .on-show-slider #sync2 .owl-item.current:after { position: absolute; content: ""; left: 0px; top: 0px; width: 100%; height: 100%; border: 2px solid #cccccc; z-index: 2; } /*====================================== 48. HOW iT WORK ======================================*/ .step-number-block { -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; } .step-number-block:hover { z-index: 1; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .step-number { position: absolute; right: 24px; top: 0px; font-size: 72px; font-weight: 800; color: #e2e2e2; } .step-number.active { color: #3a4452; } /*====================================== 49. ANY QUERY ======================================*/ .any-query, .any-query-contact { position: relative } .any-query img { position: absolute; top: -80px; left: 50%; margin-left: -60px; } .any-query-contact img { position: absolute; top: -90px; left: 50%; margin-left: -60px; } .any-query img, .any-query-contact img { opacity: 0.1; } /*====================================== 50. GRAPH PART ======================================*/ .graph-part-right { padding-left: 20px; } .graph-tabing .acod-content { padding: 15px; background-color: rgba(0, 0, 0, 0.5) } .graph-part-right .title-first { font-size: 42px; letter-spacing: 2px; } .graph-part-right .title-second { font-size: 30px; } @media only screen and (max-width:991px) { .graph-part-right { padding-left: 0px; } } @media only screen and (max-width:768px) { .graph-part-right .title-first { font-size: 36px; } .graph-part-right .title-second { font-size: 26px; } } @media only screen and (max-width:540px) { .graph-part-right .title-first { font-size: 28px; } .graph-part-right .title-second { font-size: 18px; } } @media only screen and (max-width:420px) { .graph-part-right .title-first { font-size: 20px; } } /*------------------------------------- 51. Revolution slider -------------------------------------*/ /*------------------------------------- 51.1 Spinner -------------------------------------*/ .spin-city { -webkit-animation: fa-spin 25s infinite linear; animation: fa-spin 25s infinite linear } @-webkit-keyframes spin-city { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @keyframes spin-city { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } /*------------------------------------- 51.2 Floating Rocket -------------------------------------*/ .floating { animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /*------------------------------------- 51.3 Floating Coin -------------------------------------*/ .floating-coin { top: 0px !important; animation-name: floating; -webkit-animation-name: floating; animation-duration: 5s; -webkit-animation-duration: 5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating-coin { 0% { transform: translateY(-300%); } 25% { transform: translateY(-150%); } 50% { transform: translateY(0%); } 75% { transform: translateY(150%); } 100% { transform: translateY(300%); } } @-webkit-keyframes floating-coin { 0% { -webkit-transform: translateY(-300%); } 25% { -webkit-transform: translateY(-150%); } 50% { -webkit-transform: translateY(0%); } 75% { -webkit-transform: translateY(150%); } 100% { -webkit-transform: translateY(300%); } } /*====================================== 52. home page form ======================================*/ .contact-home-right { position: absolute; right: 0px; bottom: 0px; max-width: 350px; } .contact-home-right .st-1 { width: 100% } .coin-slide-rotate { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media only screen and (max-width:991px) { .contact-home-right { max-width: 320px; } } @media only screen and (max-width:767px) { .contact-home-right { display: none; } } /*====================================== 53. Wt Our Team ======================================*/ .wt-our-team .wt-team-media img { width: 100%; } /*====================================== 54. Language Select ======================================*/ .language-select .dropdown .btn { background-color: transparent; padding: 0px; font-size: 12px; color: #fff; border: none !important; outline: none !important; } .language-select .dropdown .btn:focus, .language-select .dropdown .btn:hover { color: #fff; border: none !important; outline: none !important; } .language-select .dropdown .btn:active, .language-select .dropdown .btn:visited { border: none !important; outline: none !important; } .language-select .dropdown-menu { min-width: 130px; margin-right: -1px; } .language-select .dropdown-menu li a { padding: 3px 10px; } .language-select .dropdown-menu li a img { width: 16px; height: 16px; margin-right: 10px; } @media only screen and (max-width:480px) { .language-select { margin: 5px 0 5px 10px; } } @media only screen and (max-width:1199px) { .status-marks .text-right { text-align: left; } } @media only screen and (max-width:768px) { .animate_line .wt-icon-box-wraper { margin: 0px 5px; } } @media only screen and (max-width:991px) { .home-about-section { background-image: none !important; } .home-about-section .wt-right-part { margin-top: 30px; padding-right: 0px; text-align: center; } .home-about-section .wt-box.text-right, .home-about-section .wt-right-part .section-head.text-left { text-align: center; } .home-about-section .wt-box.text-right>img { max-width: 90%; } .awesome-counter.text-right { text-align: center; } .status-marks .text-right { text-align: left; } } @media only screen and (max-width:991px) { .awesome-counter .font-24 { margin: 0px; } .awesome-counter .font-60 { font-size: 38px; line-height: normal; margin: 0px; } } /* ============btc clc=========*/ .cryptonatorwidget { border: 0px; } .cryptonatorwidget input, .cryptonatorwidget select { height: 46px !important; font-size: 16px; color: #777777; border-radius: 5px; -webkit-border-radius: 5px; } .cryptonatorwidget.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #777777; } .cryptonatorwidget .form-control::-moz-placeholder { /* Firefox 19+ */ color: #777777; } .cryptonatorwidget .form-control:-ms-input-placeholder { /* IE 10+ */ color: #777777; } .cryptonatorwidget .form-control:-moz-placeholder { /* Firefox 18- */ color: #777777; } .select-box { position: relative; } .select-box:after { content: ""; position: absolute; right: 13px; top: 20px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #999; } .select-box select { border: 1px solid #ddd; padding: 8px 10px; width: 100%; height: 40px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 5px; -webkit-border-radius: 5px; } /* =======Make it a marquee========== */ .TickerNews { width: 100%; height: 50px; line-height: 48px; } .ti_wrapper { width: 100%; position: relative; overflow: hidden; } .ti_slide { width: 30000px; position: relative; left: 0; top: 0; } .ti_content { width: 8000px; position: relative; float: left; } .ti_news { float: left; } .ti_news a { display: block; margin-right: 10px; text-decoration: none; } .ti_news a span:nth-child(2) { color: #fff; } .ti_news a img { padding: 0px 10px; } .ti_news a:hover { animation-play-state: paused } /*====================================== 55. content hover show div ======================================*/ .hover-block-outer .wt-icon-box-wraper { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; border: 2px solid #fff; } .hover-block-outer .wt-icon-box-wraper:hover { background-color: #fff; cursor: pointer; -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .hover-block-outer .wt-icon-box-wraper:hover .icon-content h4, .hover-block-outer .wt-icon-box-wraper:hover .icon-content p { color: #000; } .hover-block-outer .nav-link { color: #767676; } @media only screen and ( max-width:991px) { .hover-block-outer .wt-icon-box-wraper.right { float: none; text-align: center; } .hover-block-outer .wt-icon-box-wraper.right [class*="icon-"] { float: none; text-align: center; } .hover-block-outer .wt-icon-box-wraper.left { float: none; text-align: center; } .hover-block-outer .wt-icon-box-wraper.left [class*="icon-"] { float: none; text-align: center; } .hover-block-outer .wt-icon-box-wraper.left.m-l30 { margin-left: 0px; } .hover-block-outer .wt-icon-box-wraper.right.m-r30 { margin-right: 0px; } .hover-block-outer .circle-content-pic { width: 50%; margin: 0px auto; } .contact-home4-right .text-right { text-align: center; } .hover-block-outer .circle-content-pic { display: none; } } /*====================================== 56. Bitcoin graph ======================================*/ .btcwdgt-chart.btcwdgt { box-shadow: none !important; -webkit-box-shadow: none !important; } .rev-hide-timer .tp-bannertimer { display: none; } .cpr-ftr-section { display: flex; justify-content: space-between; } @media only screen and (max-width:991px) { .cpr-ftr-section { display: block; } .cpr-ftr-section .wt-footer-bot-left { padding: 0px 0px 3px 0px; } .cpr-ftr-section .wt-footer-bot-right { padding: 0px; } } /*Update Css Start---------------------------------------------------------------------------------------------------*/ .tw-lt-blog-1 .latest-blog-3 .wt-post-text { margin-bottom: 0px; } @media only screen and (max-width:767px) { .tw-lt-blog-1 .latest-blog-3:last-child { margin-bottom: 0px; } } .header-nav { position: relative; padding: 0px; z-index: 7; display: flex !important; justify-content: center; } .header-nav .nav { float: right; display: flex; justify-content: flex-end; flex-direction: inherit; } /*Header style 3*/ .header-style-3 .main-bar .container { display: flex; justify-content: space-between; position: relative; } .header-style-3 .top-bar .row { display: flex; justify-content: space-between; } .header-style-3 .header-nav .nav { float: right; display: flex; justify-content: flex-end; flex-direction: inherit; } .header-style-3 .header-nav .nav>li>a { display: block; } .header-style-3 .header-middle .container { display: flex; align-items: center; justify-content: space-between; } .header-style-3 .navbar-toggler .icon-bar { background: #fff; height: 3px; border-radius: 0; display: block; width: 22px; } .header-style-3 .navbar-toggler .icon-bar+.icon-bar { margin-top: 4px; } .header-style-3 .header-nav .has-child.nav-active>a+.submenu-toogle.fa.fa-angle-right:before { content: "\f107"; } .header-style-3 .has-child .submenu-toogle { color: #000; font-size: 14px; } .header-style-3 .extra-nav { display: flex; align-items: center; position: relative; z-index: 9; padding: 0px; } .header-style-3 .extra-nav .extra-cell { display: block; margin: 0px 5px; } .header-style-3 .extra-nav .extra-cell:last-child { margin-right: 0px; } .header-style-3 .extra-nav .extra-cell .link-inner { display: flex; } .header-style-3 .navbar-toggler { display: none; } .header-style-3 .header-nav .nav>li .sub-menu li .fa { background-color: transparent; padding: 0px 10px 0px 0px; z-index: -1; } .header-style-3 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: -1; } .header-style-3 .wt-cart.dropdown-toggle::after { display: none; } .header-style-3 .cart-dropdown-item-wraper { top: 17px !important; } .header-style-3 .site-search-btn { display: block; } /*Mobile Navigation*/ /*Header style 3 mobile navigation*/ @media only screen and (max-width: 991px) { .header-style-3 .header-nav .nav>li .sub-menu li .fa { z-index: 1; top: 4px; width: 100%; padding: 10px; text-align: right; } .header-style-3 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: 0; } .header-style-3 .navbar-toggler { display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; } .header-style-3.twm-nav-transparent .navbar-toggler { right: -33px; } .header-style-3 .extra-nav { margin-right: 40px; } .has-child .submenu-toogle { background: none; } .header-style-3 .header-nav .nav { float: none; margin: 0px; background: #fff; background-color: rgb(255, 255, 255); width: 100%; display: block; height: 100%; } .header-style-3 .header-nav .nav>li>a .fa { display: none; } .header-nav .nav>li .sub-menu li .fa { top: 1px; } .header-nav .nav>li .sub-menu li>.sub-menu { transition: none !important; } .header-style-3.mobile-sider-drawer-menu .header-nav { position: fixed; width: 250px !important; z-index: 999; height: 100vh !important; overflow-y: inherit !important; left: -250px; top: 0px; transition: all 0.5s linear; background-color: #fff; } .header-style-3.mobile-sider-drawer-menu .header-nav .nav>li:hover>.sub-menu { transition: none; } .header-style-3.mobile-sider-drawer-menu .header-nav .nav>li .sub-menu li:hover>.sub-menu { transition: none; } .header-style-3.mobile-sider-drawer-menu.active .header-nav { left: 0%; } .header-style-3.mobile-sider-drawer-menu .icon-bar { transition: all 0.5s linear; position: relative; } #mobile-side-drawer:focus { box-shadow: none; } .header-style-3.mobile-sider-drawer-menu.active .icon-bar.icon-bar-first { transform: rotate(45deg) translateX(3px) translateY(2px); } .header-style-3.mobile-sider-drawer-menu.active .icon-bar.icon-bar-three { transform: rotate(-45deg) translateX(3px) translateY(-2px); } .header-style-3.mobile-sider-drawer-menu .icon-bar.icon-bar-two { position: relative; right: 0%; } .header-style-3.mobile-sider-drawer-menu.active .icon-bar.icon-bar-two { position: absolute; right: 100px; opacity: 0; } .header-style-3.mobile-sider-drawer-menu .is-fixed .header-nav .nav { overflow: auto; max-height: 100%; } .header-style-3.mobile-sider-drawer-menu .header-fixed .header-nav .nav { overflow: auto; max-height: 100%; } } /*Header style 6 mobile navigation*/ .header-style-6 .main-bar { min-height: 60px; display: flex; align-items: center; } .header-style-6 .main-bar .container { display: flex; justify-content: space-between; position: relative; width: 100%; } .header-style-6 .top-bar .row { display: flex; justify-content: space-between; } .header-style-6 .header-nav .nav { float: right; display: flex; justify-content: flex-end; flex-direction: inherit; } .header-style-6 .header-nav .nav>li>a { display: block; } .header-style-6 .header-middle .container { display: flex; align-items: center; justify-content: space-between; } .header-style-6 .navbar-toggler .icon-bar { background: #fff; height: 3px; border-radius: 0; display: block; width: 22px; } .header-style-6 .navbar-toggler .icon-bar+.icon-bar { margin-top: 4px; } .header-style-6 .header-nav .has-child.nav-active>a+.submenu-toogle.fa.fa-angle-right:before { content: "\f107"; } .header-style-6 .header-nav { justify-content: inherit; } .header-style-6 .has-child .submenu-toogle { color: #000; font-size: 14px; } .header-style-6 .extra-nav { display: flex; align-items: center; position: relative; z-index: 9; padding: 0px; } .header-style-6 .extra-nav .extra-cell { display: block; margin: 0px 5px; } .header-style-6 .extra-nav .extra-cell:last-child { margin-right: 0px; } .header-style-6 .extra-nav .extra-cell .link-inner { display: flex; } .header-style-6 .navbar-toggler { display: none; } .header-style-6 .header-nav .nav>li .sub-menu li .fa { background-color: transparent; padding: 0px 10px 0px 0px; z-index: -1; } .header-style-6 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: -1; } .header-style-6 .wt-cart.dropdown-toggle::after { display: none; } .header-style-6 .cart-dropdown-item-wraper { top: 17px !important; } .header-style-6 .site-search-btn { display: block; } /*Header style 6 mobile navigation*/ @media only screen and (max-width: 991px) { .header-style-6 .header-nav .nav>li .sub-menu li .fa { z-index: 1; top: 4px; width: 100%; padding: 10px; text-align: right; } .header-style-6 .header-nav .nav>li .sub-menu li>a:hover+.fa { z-index: 0; } .header-style-6 .navbar-toggler { display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; } .header-style-6.twm-nav-transparent .navbar-toggler { right: -33px; } .header-style-6 .extra-nav { margin-right: 40px; } .has-child .submenu-toogle { background: none; } .header-style-6 .header-nav .nav { float: none; margin: 0px; background: #fff; background-color: rgb(255, 255, 255); width: 100%; display: block; height: 100%; } .header-style-6 .header-nav .nav>li>a .fa { display: none; } .header-nav .nav>li .sub-menu li .fa { top: 1px; } .header-nav .nav>li .sub-menu li>.sub-menu { transition: none !important; } .header-style-6.mobile-sider-drawer-menu .header-nav { position: fixed; width: 250px !important; z-index: 999; height: 100vh !important; overflow-y: inherit !important; left: -250px; top: 0px; transition: all 0.5s linear; background-color: #fff; } .header-style-6.mobile-sider-drawer-menu .header-nav .nav>li:hover>.sub-menu { transition: none; } .header-style-6.mobile-sider-drawer-menu .header-nav .nav>li .sub-menu li:hover>.sub-menu { transition: none; } .header-style-6.mobile-sider-drawer-menu.active .header-nav { left: 0%; } .header-style-6.mobile-sider-drawer-menu .icon-bar { transition: all 0.5s linear; position: relative; } .header-style-6.mobile-sider-drawer-menu.active .icon-bar.icon-bar-first { transform: rotate(45deg) translateX(3px) translateY(2px); } .header-style-6.mobile-sider-drawer-menu.mobile-sider-drawer-menu.active .icon-bar.icon-bar-three { transform: rotate(-45deg) translateX(3px) translateY(-2px); } .header-style-6.mobile-sider-drawer-menu .icon-bar.icon-bar-two { position: relative; right: 0%; } .header-style-6.mobile-sider-drawer-menu.active .icon-bar.icon-bar-two { position: absolute; right: 100px; opacity: 0; } .header-style-6.mobile-sider-drawer-menu .is-fixed .header-nav .nav { overflow: auto; max-height: 100%; } .header-style-6.mobile-sider-drawer-menu .header-fixed .header-nav .nav { overflow: auto; max-height: 100%; } } @media only screen and (max-width:991px) { .section-full.p-t80 { padding-top: 40px; } .section-full.p-b50 { padding-bottom: 10px; } .pricingtable-highlight { margin: 0px; } .pricingtable-highlight .pricingtable-price { padding: 10px 10px; } .pricingtable-highlight .pricingtable-footer { padding: 20px 20px; } .pricing-table-style-4 .pricingtable-highlight .pricingtable-price { padding: 20px 10px; } .block-reverse { display: flex; flex-direction: column-reverse; } .block-reverse-wrap .row.m-b50 { margin-bottom: 0px; } .counter.font-70 { font-size: 44px; } } .tw-con-with-img { padding-top: 20px } @media only screen and (max-width:767px) { .tw-con-with-img { padding-top: 0px } } .contact-caption { height: 100%; position: relative; } @media only screen and (max-width:640px) { h2.wt-title, h2 { font-size: 26px; } } .twm-ser-detail { padding-left: 20px; } .twm-ser-detail .wt-box .wt-media img { width: 100%; } @media only screen and (max-width:991px) { .twm-ser-detail { padding-left: 0px; } } .animate_line .wt-icon-box-wraper { height: calc(100% - 10px); } @media only screen and (max-width:767px) { .animate_line .wt-icon-box-wraper { height: auto } } .wt-mid-page { position: relative; max-width: 770px; margin: 0px auto; } .alert-dismissible .btn-close { background: none; font-size: 24px; line-height: 24px; padding: 15px; text-align: center; } /*New Css*/ .embed-responsive { position: relative; display: block; height: 0; padding: 0; padding-bottom: 0px; overflow: hidden; } .embed-responsive-16by9 { padding-bottom: 56.25%; } .embed-responsive .ytp-impression-link { opacity: 0; } .ytp-impression-link { opacity: 0; } .embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } /*Model Popup Close Btn*/ .button-model button.close { min-width: inherit; background: transparent; border: none; font-size: 26px; line-height: 26px; color: #fff; } .button-model .modal-header { border-radius: 0px; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .modal.fade button.close { min-width: inherit; background: transparent; border: none; font-size: 26px; line-height: 26px; color: #fff; } .modal.fade .modal-header { border-radius: 0px; display: flex; flex-direction: row-reverse; } .card.shadow { background-color: #111111 !important; } .nav-wide .container { max-width: 100%; } .project_row { background-color: var(--white); background-image: url(../../assets/img/shape/35.png); background-position: center; padding: 30px 15px; border-radius: 10px; box-shadow: 0 5px 30px 0 rgb(214 215 216 / 57%); position: relative; z-index: 1; margin-bottom: 50px; } .back { background-image: url(../../assets/img/TonBigBull-log.png); width: 380px; height: 403px; background-size: cover; } .list-style-three span { min-width: 90px; font-size: 60px; position: relative; top: -5px; overflow: inherit; font-weight: 900; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: cover; background-position: center; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4); line-height: 1; } .list-style-three p { margin: 0; font-weight: bold; font-size: 24px; } @import url("https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap"); :root { --font-default: 'Yantramanav', sans-serif; --fontawesome: "Font Awesome 5 Pro"; --black: #000000; --dark: #03112d; --dark-secondary: #001d4c; --dark-optional: #3e00a7; --white: #ffffff; --color-primary: #0c5adb; --color-secondary: #3f1399; --color-optional: rgb(255, 30, 126); --color-heading: #04000b; --color-paragraph: #787878; --box-shadow-primary: -1px 3px 10px 0 rgba(0, 0, 0, 0.6); --box-shadow-secondary: 0 10px 30px 0 rgba(44, 130, 237, 0.4); --box-shadow-regular: 0px 2px 12px 0px #e7e7e7; --bg-gray: #f3f7fd; --bg-gradient: linear-gradient(30deg, var(--color-secondary) 20%, var(--color-primary) 80%); } * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body, html { height: 100%; } html { margin: 0; padding: 0; width: 100%; height: 100%; scroll-behavior: smooth; } html, body, div, span, img, ol, ul, li, a, p, h1, h2, h3, h4, h5, h6, option, legend, label, table, th, td, tr, article, aside, caption, figure, footer, header, hgroup, mark, nav, section, time, audio, video { margin: 0; padding: 0; border: 0; outline: 0; } .wrapper { height: 100%; } img { border: none; outline: none; max-width: 100%; } label { display: inline-block; font-weight: normal; margin-bottom: 5px; max-width: 100%; } a { outline: none; text-decoration: none; color: var(--color-heading); } a img { border: none; } a:active { outline: none; text-decoration: none; color: var(--color-heading); opacity: 1; } a:focus { outline: none; text-decoration: none; color: var(--color-heading); } a:hover { outline: none; text-decoration: none; color: var(--color-primary); opacity: 1; } button { outline: medium none; } iframe { border: none; } hr { margin-top: 0; margin-bottom: 0; border: 0; border-top: 1px solid #eeeeee; } pre { display: block; margin: 0 0 30px; padding: 9.5px; word-wrap: break-word; word-break: break-all; color: #333333; border: 1px solid #ededed; border-radius: inherit; background-color: #f9f9f9; font-size: 13px; line-height: 1.42857143; } input { border: 1px solid #e7e7e7; border-radius: inherit; -webkit-box-shadow: inherit; box-shadow: inherit; min-height: 50px; } input:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } textarea:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } select:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } ul { list-style-type: none; } ul, li { margin: 0; padding: 0; list-style: none; } b { font-weight: 900; } strong { font-weight: 900; } .row { --bs-gutter-x: 30px; } body { font-family: var(--font-default); font-size: 16px; font-weight: 400; line-height: 28px; overflow-x: hidden; background-color: var(--white); color: var(--color-paragraph); } h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-weight: normal; line-height: 1.2; font-family: var(--font-default); letter-spacing: 0; margin: 0; margin-bottom: 15px; } h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 27px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 14px; } a, .btn, button { -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; outline: medium none; text-decoration: none; font-weight: 600; } p { color: var(--color-paragraph); margin: 0 0 15px; text-transform: none; font-weight: 400; font-family: var(--font-default); line-height: 1.7; } @media (min-width: 1250px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1250px; } } .container-full { padding: 0 15px; margin: auto; max-width: 1400px; } @media (min-width: 576px) { .container-full { max-width: 540px; width: 100%; } } @media (min-width: 768px) { .container-full { max-width: 720px; width: 100%; } } @media (min-width: 992px) { .container-full { max-width: 960px; width: 100%; } } @media (min-width: 1200px) { .container-full { max-width: 95%; width: 95%; } } .container-fill { padding: 0 15px; margin: auto; max-width: 100%; } @media (min-width: 576px) { .container-fill { max-width: 540px; width: 100%; } } @media (min-width: 768px) { .container-fill { max-width: 720px; width: 100%; } } @media (min-width: 992px) { .container-fill { max-width: 960px; width: 100%; } } @media (min-width: 1200px) { .container-fill { width: 100%; max-width: 100%; } } @media (max-width: 1199px) { .container-fill { padding: 0 15px; width: 100%; } } @media only screen and (min-width: 1367px) { .container-stage { margin-left: calc((100% - 1320px)/ 2); width: auto; min-width: auto; max-width: inherit; padding-right: 0; } } @media only screen and (max-width: 767px) { .row { --bs-gutter-x: 1.5rem; } } .bg-cover { background-position: center center !important; background-size: cover !important; } .bg-fixed { background-attachment: fixed !important; background-position: center center !important; background-size: cover !important; } .bg-fit { background-size: 100% 100% !important; background-position: center !important; } .bg-gray { background: var(--bg-gray); } .bg-gray-mixed { background: rgba(0, 0, 0, 0) linear-gradient(to bottom, var(--white) 0%, var(--bg-gray) 100%) repeat scroll 0 0; } .bg-light { background-color: var(--white); } .bg-dark { background-color: var(--dark) !important; } .bg-theme { background-color: var(--color-primary); } .bg-gradient { background-color: var(--color-primary); background: var(--bg-gradient) !important; background-size: 220% 150% !important; } .text-light { color: var(--white); } .text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6, .text-light p, .text-light span, .text-light a { color: var(--white); } .shadow { -webkit-box-shadow: inherit !important; box-shadow: inherit !important; } .shadow.dark { position: relative; z-index: 1; } .shadow.dark:after { background: var(--dark); content: ""; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .shadow.dark-hard { position: relative; z-index: 1; } .shadow.dark-hard:after { background: rgba(0, 4, 30, 0) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.65; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .shadow.theme { position: relative; z-index: 1; } .shadow.theme:after { background: var(--color-primary) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.7; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .shadow.light { position: relative; z-index: 1; } .shadow.light:after { background: var(--white) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.6; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .default-padding, .default-padding-top, .default-padding-bottom, .default-padding-mx { position: relative; } .default-padding { padding-top: 120px; padding-bottom: 120px; } @media only screen and (max-width: 767px) { .default-padding { padding-top: 50px; padding-bottom: 50px; } } .default-padding-big { padding: 250px 0; } @media only screen and (max-width: 767px) { .default-padding-big { padding: 50px 0; } } .default-padding-top { /* padding-top: 120px; */ /* padding-bottom: 120px; */ } @media only screen and (max-width: 767px) { .default-padding-top { padding-top: 50px; } } .default-padding-bottom { padding-bottom: 120px; } @media only screen and (max-width: 767px) { .default-padding-bottom { padding-bottom: 50px; } } .default-padding.bottom-less { padding-top: 120px; padding-bottom: 90px; } @media only screen and (max-width: 767px) { .default-padding.bottom-less { padding-top: 50px; padding-bottom: 20px; } } .default-padding-bottom.bottom-less { margin-bottom: -30px; } @media only screen and (max-width: 767px) { .default-padding-bottom.bottom-less { margin-bottom: 0; } } .default-padding-top.bottom-less { /* margin-bottom: -30px; */ } @media only screen and (max-width: 767px) { .default-padding-top.bottom-less { margin-bottom: -20px; } } @media only screen and (min-width: 1200px) { .align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .relative { position: relative; } .overflow-hidden { overflow: hidden; } .border-top { border-top: 1px solid #e7e7e7; } .border-bottom { border-bottom: 1px solid #e7e7e7; } .border-left { border-left: 1px solid #e7e7e7; } .border-right { border-right: 1px solid #e7e7e7; } .heading { font-weight: 600; margin-bottom: 25px; margin-top: -5px; font-size: 50px; line-height: 1.1; } .heading span { font-weight: 400; } .site-heading { margin-bottom: 60px; } .title { font-weight: 600; font-size: 50px; line-height: 1.1; } .site-heading .title { margin-bottom: 0; } .sub-title { text-transform: uppercase; color: #000; font-weight: 500; background: var(--bg-gradient); -webkit-background-clip: text; display: inline-block; position: relative; z-index: 1; } .bg-gradient .sub-title, .bg-theme .sub-title { color: var(--white); -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; background: transparent; } .site-heading p { margin-bottom: 0; margin-top: 25px; padding: 0 10%; } .site-heading .devider { display: inline-block; width: 50px; height: 2px; background: var(--color-primary); position: relative; z-index: 1; left: 10px; } .site-heading.light .devider, .bg-theme .site-heading .devider, .bg-gradient .site-heading .devider, .shadow .site-heading .devider, .bg-dark .site-heading .devider { background: var(--white); } .site-heading .devider:before { position: absolute; left: -15px; top: 0; content: ""; height: 2px; width: 10px; background: var(--color-primary); } .site-heading.light .devider:before, .bg-theme .site-heading .devider:before, .bg-gradient .site-heading .devider:before, .shadow .site-heading .devider:before, .bg-dark .site-heading .devider:before { background: var(--white); } @media (max-width: 767px) { .site-heading p { padding: 0; } } @media only screen and (max-width: 767px) { .site-heading { margin-bottom: 30px; } .token-mar { margin-bottom: 30px !important; } } .heading-left { position: relative; z-index: 1; margin-bottom: 60px; } .heading-left .heading { font-weight: 600; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .heading-left .heading { margin-bottom: 30px; } } @media only screen and (max-width: 767px) { .heading-left .heading { margin-bottom: 15px; } } .heading-left p { margin-bottom: 0; font-size: 18px; } .heading-left .btn { margin-top: 30px; } @media only screen and (max-width: 767px) { .heading-left { margin-bottom: 30px; } } .bg-dark .heading-left p { opacity: 0.8; } .heading-left .content-left { border-right: 1px solid #e7e7e7; padding-right: 35px; } @media only screen and (max-width: 991px) { .heading-left .content-left { border: none; padding: 0; margin-bottom: 30px; } } .sub-heading { text-transform: uppercase; color: var(--color-primary); font-weight: 500; background: var(--bg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 280% 150%; display: inline-block; position: relative; z-index: 1; margin-bottom: 20px; } .bg-gradient .sub-heading { color: var(--white); background: transparent; -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; opacity: 0.9; } .video-play-button { display: inline-block; background: var(--color-primary); height: 60px; width: 60px; line-height: 60px; text-align: center; border-radius: 50%; color: var(--color-heading); position: relative; } .video-play-button i { font-weight: 400; font-size: 20px; position: relative; left: 3px; top: 2px; } .video-play-button .effect { position: absolute; width: 100px; height: 100px; background: var(--color-primary); opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; } .video-play-button .effect::after { position: absolute; content: ""; width: 70px; height: 70px; background: var(--color-primary); opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; -webkit-animation-delay: 2s; animation-delay: 2s; } .video-play-button .effect::before { position: absolute; content: ""; width: 60px; height: 60px; background: var(--color-secondary); opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; -webkit-animation-delay: 3s; animation-delay: 3s; } .video-play-button.with-text { width: auto; background: transparent; } .video-play-button.with-text span { position: relative; z-index: 1; } .video-play-button.with-text span i { margin-left: 25px; margin-right: 30px; color: var(--white); left: -1px; } .video-play-button.with-text .effect { height: 60px; width: 60px; left: 0; -webkit-animation: inherit; animation: inherit; background: var(--color-primary); top: 0; opacity: 1; z-index: 1; } .video-play-button.with-text .effect::before { display: none; } .video-play-button.with-text .effect::after { background: var(--color-primary); height: 100%; width: 100%; z-index: inherit; -webkit-animation-delay: 0s; animation-delay: 0s; } .video-play-button.with-text.optional .effect { background: var(--white); } .video-play-button.with-text.optional .effect::after { background: var(--white); } .video-play-button.with-text.optional span i { color: var(--color-primary); } @-webkit-keyframes video-play { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes video-play { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } .zoom-animation { -webkit-animation: zoom 2000ms ease-out infinite; animation: zoom 2000ms ease-out infinite; } @-webkit-keyframes zoom { from { -webkit-transform: scale(1, 1); } to { -webkit-transform: scale(1.2, 1.2); } } @keyframes zoom { from { -webkit-transform: scale(1, 1); transform: scale(1, 1); } to { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } .spiner-animation { -webkit-animation: spinner 20s infinite linear; animation: spinner 20s infinite linear; } @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } .spiner-reverse-animation { -webkit-animation: spinnerReverse 20s infinite linear; animation: spinnerReverse 20s infinite linear; } @-webkit-keyframes spinnerReverse { to { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); } } @keyframes spinnerReverse { to { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); } } @keyframes UpDown { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } .updown-animation { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); -webkit-animation-name: UpDown; animation-name: UpDown; -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes UpDown { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } .leftRight-animation { -webkit-animation: fadeLeftRight 10s ease-out infinite; animation: fadeLeftRight 10s ease-out infinite; } @keyframes fadeLeftRight { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(100px); transform: translateX(100px); } } @-webkit-keyframes fadeLeftRight { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(100px); transform: translateX(100px); } } .rightLeft-animation { -webkit-animation: fadeRightLeft 10s ease-out infinite; animation: fadeRightLeft 10s ease-out infinite; } @keyframes fadeRightLeft { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } @-webkit-keyframes fadeRightLeft { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } .zoomUpDown-animation { -webkit-animation: zoomUpDown 10s ease-out infinite; animation: zoomUpDown 10s ease-out infinite; } @keyframes zoomUpDown { 0%, 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } 50% { -webkit-transform: scale(0.7); transform: scale(0.7); } } @-webkit-keyframes zoomUpDown { 0%, 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } } .moving-animation { -webkit-animation: moving 10s ease-out infinite; animation: moving 10s ease-out infinite; } @-webkit-keyframes moving { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); } 50% { -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); } 70% { -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes moving { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); } 50% { -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); } 70% { -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes infinite-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes infinite-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes open { 0% { width: 0; height: 0; } 50% { width: 100px; height: 0; } 100% { width: 100px; height: 55px; } } @keyframes open { 0% { width: 0; height: 0; } 50% { width: 100px; height: 0; } 100% { width: 100px; height: 55px; } } @-webkit-keyframes openB { 0% { width: 0px; } 100% { width: 100px; } } @keyframes openB { 0% { width: 0px; } 100% { width: 100px; } } @-webkit-keyframes shine { 0% { background-position: 0; } 60% { background-position: 180px; } 100% { background-position: 180px; } } @keyframes shine { 0% { background-position: 0; } 60% { background-position: 180px; } 100% { background-position: 180px; } } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.1, 0.1); opacity: 0.0; } 50% { opacity: 1.0; } 100% { -webkit-transform: scale(1.2, 1.2); opacity: 0.0; } } .btn { display: inline-block; font-weight: 500; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 8px; border: 2px solid transparent; -webkit-box-shadow: none; box-shadow: none; font-size: 16px; letter-spacing: 0; padding: 13px 30px; background: #E7EDF8; position: relative; z-index: 1; } .btn:focus, .btn.active { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; -webkit-box-shadow: inherit; box-shadow: inherit; border: 2px solid transparent; } .btn:hover { background-color: var(--color-primary); color: var(--white); } .btn.radius { border-radius: 6px; } .btn.btn-border { border: 2px solid #e7e7e7; background: transparent; } .btn.btn-border:hover { background: var(--color-primary); border-color: var(--color-primary); } .btn.btn-border.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: #e7e7e7; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border.animation:hover { border-color: #e7e7e7; color: var(--dark); } .btn.btn-border.animation:hover::after { width: 100%; } .btn.btn-border-dark { border: 2px solid var(--dark); background: transparent; } .btn.btn-border-dark:hover { background: var(--dark); border-color: var(--dark); } .btn.btn-border-dark.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border-dark.animation:hover { border-color: var(--dark); color: var(--white); } .btn.btn-border-dark.animation:hover::after { width: 100%; } .btn.btn-border-theme { border: 2px solid var(--color-primary); background: transparent; } .btn.btn-border-theme:hover { background: var(--color-primary); border-color: var(--color-primary); } .btn.btn-border-theme.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--color-primary); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border-theme.animation:hover { border-color: var(--color-primary); color: var(--white); } .btn.btn-border-theme.animation:hover::after { width: 100%; } .btn.btn-border-light { border: 2px solid var(--white); background: transparent; color: var(--white); } .btn.btn-border-light:hover { background: var(--white); border-color: var(--white); color: var(--dark); } .btn.btn-border-light.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border-light.animation:hover { border-color: var(--white); color: var(--dark); } .btn.btn-border-light.animation:hover::after { width: 100%; } .btn.btn-gradient { border: none; color: var(--white); } .btn.btn-gradient::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 100%; z-index: -1; background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-primary) ); background-size: 220% 150%; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-gradient:hover::after { background-position: -70% 0; } .btn.btn-gradient.active { background-position: -70% 0; } .btn.btn-theme { color: var(--white); /* font-size: 20px; */ border: none; background: var(--color-primary); } .btn.btn-theme::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .btn.btn-theme:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-theme.secondary { color: var(--white); border: none; background: linear-gradient(90deg, var(--color-optional) 0%, rgb(255, 100, 92) 100%); } .btn.btn-theme.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .text-light .btn.btn-theme.secondary::after { background-color: var(--white); } .text-light .btn.btn-theme.secondary:hover { color: var(--color-heading); } .btn.btn-theme.secondary:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-theme.hover-light::after { background-color: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-theme.hover-light:hover { color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-theme.hover-light:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-light { color: var(--color-heading); border: none; background: var(--white); border: 2px solid transparent; } .btn.btn-light.btn-md { padding: 13px 52px; } .btn.btn-light:hover { color: var(--white); background: transparent; border: 2px solid var(--white); } .btn.btn-dark { color: var(--white); background: var(--dark); border: none; } .btn.btn-dark::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background-color: var(--color-primary); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .shadow .btn.btn-dark::after { background-color: var(--white); } .shadow .btn.btn-dark:hover { color: var(--color-heading) !important; } .btn.btn-dark:hover::after { width: 100%; } .btn.btn-dark.secondary { color: var(--white); border: none; background: var(--dark-optional); } .btn.btn-dark.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .btn.btn-dark.secondary:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-dark.secondary:hover { color: var(--color-heading); } .btn i { position: relative; top: 1px; margin-left: 5px; } .btn.text-slide { min-width: 150px; height: 55px; line-height: 55px; } .btn.text-slide span { position: absolute; height: 100%; width: 100%; top: 0; left: 0; text-align: center; } .btn.animate-border { overflow: inherit; z-index: inherit; width: 200px; height: 55px; line-height: 55px; padding: 0; } .btn.animate-border:hover { background: transparent; color: var(--dark); } .btn.animate-border:hover .hover-border::after, .btn.animate-border:hover .hover-border::before { opacity: 1; -webkit-animation: open 0.4s; animation: open 0.4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-animation-direction: normal; animation-direction: normal; } .btn.animate-border:hover .hover-border-bottom::after, .btn.animate-border:hover .hover-border-bottom::before { opacity: 1; -webkit-animation: openB 0.4s; animation: openB 0.4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-animation-direction: normal; animation-direction: normal; } .btn.animate-border .hover-border { position: absolute; left: 0; top: -1px; height: 100%; width: 100%; } .btn.animate-border .hover-border::before { position: absolute; content: ""; height: 0; width: 0; display: block; opacity: 0; border-top: solid 2px var(--color-primary); border-left: solid 2px var(--color-primary); right: 98px; top: -1px; } .btn.animate-border .hover-border::after { position: absolute; content: ""; height: 0; width: 0; display: block; opacity: 0; border-top: solid 2px var(--color-primary); border-right: solid 2px var(--color-primary); left: 98px; top: -1px; } .btn.animate-border .hover-border-bottom { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1; } .btn.animate-border .hover-border-bottom::before { position: absolute; content: ""; width: 0; display: block; opacity: 0; height: 55px; border-bottom: solid 2px var(--color-primary); right: -1px; bottom: -2px; } .btn.animate-border .hover-border-bottom::after { position: absolute; content: ""; width: 0; display: block; opacity: 0; height: 100%; border-bottom: solid 2px var(--color-primary); left: 0; bottom: -2px; } .btn.animated-arrow { border: none; background: transparent; min-width: 14rem; height: auto; padding: 0; } .btn.animated-arrow .circle { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3.5rem; height: 3.5rem; background: var(--color-primary); border-radius: 2rem; } .btn.animated-arrow .circle .icon { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 15px; width: 1.125rem; height: 0.125rem; background: none; position: absolute; top: 0; bottom: 0; margin: auto; } .btn.animated-arrow .circle .icon::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid var(--white); border-right: 0.125rem solid var(--white); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .btn.animated-arrow .button-text { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 15px 0; margin: 0 0 0 70px; color: var(--dark); line-height: 2; text-align: left; width: 100%; font-size: 14px; } .btn.animated-arrow:hover { color: var(--white); } .btn.animated-arrow:hover .circle { width: 100%; } .btn.animated-arrow:hover .circle .icon.arrow { background: var(--white); -webkit-transform: translate(1.5rem, 0); transform: translate(1.5rem, 0); } .btn.animated-arrow:hover .button-text { color: var(--white); } .btn.circle { border-radius: 30px !important; } .btn-simple { line-height: 1; text-transform: uppercase; display: inline-block; color: var(--color-paragraph); } .btn-simple i { transform: rotate(-45deg); display: inline-block; margin-left: 2px; } .btn-simple:hover { color: var(--color-primary); } .video-btn i { display: inline-block; height: 55px; width: 55px; text-align: center; line-height: 55px; background: var(--color-primary); border-radius: 50%; position: relative; margin-right: 20px; color: var(--white); } .text-light .video-btn i { background: var(--white); color: var(--color-primary); } .video-btn i::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 60px; height: 60px; background: var(--color-primary) repeat scroll 0 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; z-index: -1; } .text-light .video-btn i::after { background: var(--white) repeat scroll 0 0; } .text-shine { background: linear-gradient(to right, var(--dark) 0, var(--white) 10%, var(--color-primary) 20%); background-position: 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: shine 3s infinite linear; animation: shine 3s infinite linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-text-size-adjust: none; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; padding: 12px 48px; } .animate-inout { background: -webkit-gradient(linear, left top, right top, from(#8A6552), to(#472d20)); background: linear-gradient(90deg, #8A6552 0%, #472d20 100%); color: var(--white); font-size: 12px; text-transform: capitalize; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; overflow: hidden; border: solid 2px var(--color-primary); cursor: pointer; } .btn-icon { position: relative; padding-left: 20px; } .btn-icon:hover { color: var(--color-primary); } .btn-icon::after { position: absolute; right: 10px; top: 50%; content: ""; height: 2px; left: 0; background: var(--color-heading); transform: translateY(-50%); margin-top: -1px; transition: all 0.35s ease-in-out; } .btn-icon:hover::after { background: var(--color-primary); } .btn-icon i { font-weight: 500; } .btn-icon:hover { padding-left: 40px; } .animate-inout span { z-index: 1; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; line-height: 20px; } .animate-inout::before, .animate-inout::after { width: 0%; height: 0%; position: absolute; content: ""; border-radius: 100%; } .animate-inout:after { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; background-color: var(--white); } .animate-inout:before { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: var(--color-primary); } .animate-inout.animate-inout-borde { background: transparent; color: var(--dark); } .animate-inout.animate-inout-borde::after { background: -webkit-gradient(linear, left top, right top, from(#8A6552), to(#472d20)); background: linear-gradient(90deg, #8A6552 0%, #472d20 100%); } .animate-inout.animate-inout-borde:hover { color: var(--white); } .animate-inout.animate-inout-borde:hover::before { -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .animate-inout.animate-inout-borde:hover::after { -webkit-transition: all 0.7s ease-in; transition: all 0.7s ease-in; } .animate-inout:hover { color: var(--dark); } .animate-inout:hover::before, .animate-inout:hover::after { width: 200px; height: 200px; border-radius: 4px; } .animate-inout:hover::before { -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .animate-inout:hover::after { -webkit-transition: all 0.7s ease-in; transition: all 0.7s ease-in; } .btn-md { padding: 14px 35px; font-size: 20px; } .btn-sm { padding: 16px 50px; font-size: 14px; } .nice-select { -webkit-tap-highlight-color: transparent; background-color: var(--white); border: solid 1px #e8e8e8; -webkit-box-sizing: border-box; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 16px; font-weight: normal; height: 50px; line-height: 50px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: 100%; margin-bottom: 15px; } .nice-select:hover { border-color: #dbdbdb; } .nice-select:active, .nice-select.open, .nice-select:focus { border-color: #999999; } .nice-select::after { border-bottom: 2px solid #999999; border-right: 2px solid #999999; content: ''; display: block; height: 5px; margin-top: -6px; pointer-events: none; position: absolute; right: 12px; top: 50%; -webkit-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; width: 5px; } .nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); overflow-y: auto !important; height: auto; } .nice-select.open ::after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .nice-select.disabled { border-color: #ededed; color: #999999; pointer-events: none; } .nice-select.disabled::after { border-color: #96aac1; } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0 !important; right: 0 !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small::after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { background-color: var(--white); border-radius: 5px; -webkit-box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; width: 100%; } .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #f6f6f6; } .nice-select .option.selected { font-weight: 600; } .nice-select .option.disabled { background-color: transparent; color: #999999; cursor: default; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; } .breadcrumb-area { padding: 150px 0; word-break: break-word; padding-top: 180px; background-color: #d1eeec; overflow: hidden; background-color: #d1eeec; background-size: 30%, contain; background-repeat: no-repeat; background-position: top center; } .breadcrumb-area.thumb-less { padding-top: 180px; } .breadcrumb-area .breadcrumb { background: transparent none repeat scroll 0 0; border: none; display: inline-block; margin: 0; position: relative; z-index: 1; padding: 0; text-align: center; margin-top: 15px; } .breadcrumb-area h1 { display: block; font-weight: 600; margin-top: -10px; margin-bottom: 0; } .breadcrumb > li + li::before { content: "\f105"; font-family: "Font Awesome 5 Pro"; font-weight: 600; padding: 0 5px; color: #ffffff; display: none !important; } .breadcrumb-item + .breadcrumb-item::before { display: none; } .breadcrumb-area .breadcrumb li i { margin-right: 5px; font-weight: 100; } .breadcrumb-area .breadcrumb li { padding: 0 15px; position: relative; display: inline-block; z-index: 1; font-weight: 600; } .breadcrumb-area .breadcrumb li::after { content: "\f105"; font-family: "Font Awesome 5 Pro"; font-weight: 500; right: -5px; position: absolute; font-size: 18px; line-height: 0; top: 50%; margin-top: -1px; } .breadcrumb-area .breadcrumb li:last-child::after { display: none; } .breadcrumb-area .breadcrumb a, .breadcrumb-area .breadcrumb li { font-weight: 500; color: var(--color-heading); } @media only screen and (min-width: 768px) and (max-width: 1023px) { .breadcrumb-area { padding-top: 150px; } } @media only screen and (max-width: 767px) { .breadcrumb-area { padding: 80px 0 !important; } .breadcrumb-area h1 { font-size: 36px; } } nav.woocommerce-breadcrumb a { font-weight: 500; } .breadcrumb-area.thumb-less::after { display: none; } .breadcrumb-area.thumb-less { background: #d1eeec; position: relative; z-index: 1; overflow: hidden; } .breadcrumb-area.thumb-less::before { position: absolute; left: 50%; top: 50%; content: ""; height: 600px; width: 600px; background: var(--color-primary); z-index: -1; margin-left: -300px; border-radius: 50%; opacity: 0.06; transform: translateY(-50%); } .banner-area { height: 100%; width: 100%; position: relative; } @media (max-width: 1023px) { .banner-area { height: auto; } } .banner-area div { height: 100%; } .banner-area div.swiper-slide .row div { height: auto; } .banner-area.top-pad-80 .content { padding-top: 80px; } @media (max-width: 1023px) { .banner-area.top-pad-80 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-80 .content { padding-top: 140px; } } .banner-area.top-pad-90 .content { padding-top: 90px; } @media (max-width: 1023px) { .banner-area.top-pad-90 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-90 .content { padding-top: 140px; } } .banner-area.top-pad-100 .content { padding-top: 100px; } @media (max-width: 1023px) { .banner-area.top-pad-100 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-100 .content { padding-top: 140px; } } .banner-area.top-pad-110 .content { padding-top: 110px; } @media (max-width: 1023px) { .banner-area.top-pad-110 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-110 .content { padding-top: 140px; } } .banner-area.top-pad-120 .content { padding-top: 120px; } @media (max-width: 1023px) { .banner-area.top-pad-120 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-120 .content { padding-top: 140px; } } .banner-area.top-pad-130 .content { padding-top: 130px; } @media (max-width: 1023px) { .banner-area.top-pad-130 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-130 .content { padding-top: 140px; } } .banner-area.top-pad-150 .content { padding-top: 150px; } @media (max-width: 1023px) { .banner-area.top-pad-150 .content { padding-top: 200px; } } @media only screen and (max-width: 767px) { .banner-area.top-pad-150 .content { padding-top: 140px; } } .banner-area.auto-height { height: auto; } .banner-area.auto-height div { height: auto; } .banner-area.auto-height .content { padding: 200px 0; } @media only screen and (max-width: 767px) { .banner-area.auto-height .content { padding: 60px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.auto-height .content { padding: 120px 0; } } .banner-area.auto-height .content .thumb { padding-left: 35px; } @media (max-width: 991px) { .banner-area.auto-height .content .thumb { padding-left: 0; margin-top: 50px; } } .banner-area.auto-height.inc-header-transparent .content { padding-top: 250px; } @media only screen and (max-width: 767px) { .banner-area.auto-height.inc-header-transparent .content { padding-top: 140px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.auto-height.inc-header-transparent .content { padding-top: 220px; } } .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .info { padding-top: 80px; } .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 250px; } @media only screen and (max-width: 767px) { .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 50px; } } .banner-area .content { position: relative; z-index: 9; -webkit-transition: all 500ms ease; transition: all 500ms ease; } @media (max-width: 1023px) { .banner-area .content { padding: 120px 0; } } @media only screen and (max-width: 767px) { .banner-area .content { padding: 60px 0; } } .banner-area h4 { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translate3d(-15%, 0, 0); transform: translate3d(-15%, 0, 0); opacity: 0; visibility: hidden; } .banner-area h2 { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; visibility: hidden; } .banner-area p { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; padding-right: 25%; margin: 0; visibility: hidden; } @media (max-width: 1023px) { .banner-area p { padding-right: 0; } } .banner-area.text-center p { padding-left: 13%; padding-right: 13%; } @media (max-width: 1023px) { .banner-area.text-center p { padding: 0; } } .banner-area .thumb { -webkit-transition: all 500ms ease; transition: all 500ms ease; opacity: 0; visibility: hidden; } .banner-area .button { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; visibility: hidden; margin-top: 30px; } .banner-area .banner-slide h4 { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area .banner-slide h2 { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area .banner-slide p { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area .banner-slide .button { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area .banner-slide .swiper-slide.swiper-slide-active h4 { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .banner-area .banner-slide .swiper-slide.swiper-slide-active h2 { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } .banner-area .banner-slide .swiper-slide.swiper-slide-active p { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1600ms; transition-delay: 1600ms; } .banner-area .banner-slide .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1800ms; transition-delay: 1800ms; } .banner-area.double-items .thumb { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area.double-items .swiper-slide.swiper-slide-active .thumb { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 500ms; transition-delay: 500ms; visibility: visible; opacity: 1; } .banner-area.double-items.bottom-thumb .content { padding: 0; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 120px; } @media only screen and (max-width: 767px) { .banner-area.double-items.bottom-thumb .content { padding: 50px 0; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.double-items.bottom-thumb .content { padding: 120px 0; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 50px; } } .banner-area.zoom-effect .banner-thumb { -webkit-transition: 10s ease-out; transition: 10s ease-out; -webkit-transform: scale(1.1); transform: scale(1.1); position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; } .banner-area.zoom-effect .swiper-slide.swiper-slide-active .banner-thumb { -webkit-transform: scale(1); transform: scale(1); } .banner-area .swiper-notification { display: none; } .banner-area .swiper-slide.swiper-slide-active h4 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; -webkit-transition-delay: 800ms; transition-delay: 800ms; } .banner-area .swiper-slide.swiper-slide-active h2 { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 1600ms; transition-delay: 1600ms; } .banner-area .swiper-slide.swiper-slide-active p { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } .banner-area .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 3200ms; transition-delay: 3200ms; } .banner-area.banner-style-one .swiper-slide.swiper-slide-active .button { -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } .banner-area .banner-items { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .banner-area:hover .swiper-button-prev, .banner-area:hover .swiper-button-next { opacity: 1; } .banner-area:hover .swiper-button-prev { left: 30px; right: auto; } .banner-area:hover .swiper-button-next { right: 30px; left: auto; } .banner-area .swiper-button-prev, .banner-area .swiper-button-next { height: auto; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; opacity: 0; } .banner-area .swiper-button-prev::after, .banner-area .swiper-button-next::after { font-size: 28px; color: var(--white); } .banner-area.navigation-circle .swiper-button-prev, .banner-area.navigation-circle .swiper-button-next { height: 60px; width: 60px; line-height: 60px; background: rgba(0, 0, 0, 0.5); border-radius: 50%; } .banner-area.navigation-circle .swiper-button-prev::after, .banner-area.navigation-circle .swiper-button-next::after { font-size: 18px; } .banner-area.navigation-right-bottom .swiper-button-prev, .banner-area.navigation-right-bottom .swiper-button-next { left: auto; right: 30px; opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; bottom: 50px; border-radius: inherit; } .banner-area.navigation-right-bottom .swiper-button-prev { right: 92px; } .banner-area.navigation-between-bottom .content { padding-bottom: 105px; } @media only screen and (min-width: 829px) and (max-width: 1023px) { .banner-area.navigation-between-bottom .content { padding-bottom: 220px; } } .banner-area.navigation-between-bottom .swiper-button-prev, .banner-area.navigation-between-bottom .swiper-button-next { left: auto; right: 30px; opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; bottom: 30px; border-radius: inherit; } .banner-area.navigation-between-bottom .swiper-button-prev { left: 30px; right: auto; } @media only screen and (max-width: 830px) { .banner-area .swiper-button-prev, .banner-area .swiper-button-next { display: none; } } .banner-area.navigation-custom .swiper-button-prev::after { font-family: 'ElegantIcons'; content: "\23"; font-size: 22px; } .banner-area.navigation-custom .swiper-button-next::after { font-family: 'ElegantIcons'; content: "\24"; font-size: 22px; } .banner-area.navigation-text .swiper-button-prev, .banner-area.navigation-text .swiper-button-next { opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; left: auto; right: 0; bottom: 0; display: inline-block; width: 150px; background: rgba(0, 0, 0, 0.2); text-align: center; height: 100px; line-height: 100px; } @media only screen and (max-width: 830px) { .banner-area.navigation-text .swiper-button-prev, .banner-area.navigation-text .swiper-button-next { display: none; } } .banner-area.navigation-text .swiper-button-prev { right: 151px; } .banner-area.navigation-text .swiper-button-prev::after { font-family: var(--font-default); content: "Prev"; text-transform: uppercase !important; font-size: 16px; font-weight: 600; letter-spacing: 0.6px; } .banner-area.navigation-text .swiper-button-next::after { font-family: var(--font-default); content: "Next"; text-transform: uppercase !important; font-size: 16px; font-weight: 600; letter-spacing: 0.6px; } .banner-area.navigation-icon-solid .swiper-button-prev::after, .banner-area.navigation-icon-solid .swiper-button-next::after { font-size: 30px; } .banner-area.navigation-custom-large .swiper-button-prev, .banner-area.navigation-custom-large .swiper-button-next { min-width: 65px; height: 30px; margin: 0; } .banner-area.navigation-custom-large .swiper-button-prev::after { font-family: "Font Awesome 5 Pro"; content: "\f104"; font-weight: 100; font-size: 30px; position: absolute; left: 8px; } .banner-area.navigation-custom-large .swiper-button-prev::before { position: absolute; top: 50%; right: inherit; bottom: inherit; left: 12px; content: ""; height: 2px; width: 50px; z-index: -1; background-color: var(--white); margin-top: -1px; } .banner-area.navigation-custom-large .swiper-button-next::after { font-family: "Font Awesome 5 Pro"; content: "\f105"; font-weight: 100; font-size: 30px; position: absolute; right: 8px; } .banner-area.navigation-custom-large .swiper-button-next::before { position: absolute; top: 50%; right: 12px; bottom: inherit; left: inherit; content: ""; height: 2px; width: 50px; z-index: -1; background-color: var(--white); margin-top: -1px; } .banner-area.navigation-right-botom .swiper-button-prev, .banner-area.navigation-right-botom .swiper-button-next { position: absolute; left: auto; right: 30px; top: auto; bottom: 40px; opacity: 1; -webkit-transform: inherit; transform: inherit; } .banner-area.navigation-right-botom .swiper-button-prev { right: 60px; } .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev, .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-next { bottom: 30px; } .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev { right: 100px; } .banner-area .swiper-pagination { height: auto; bottom: 35px; } .banner-area .swiper-pagination span.swiper-pagination-bullet { height: 4px; width: 50px; background: rgba(255, 255, 255, 0.5); opacity: 1; border-radius: inherit; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .banner-area .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: white; height: 7px; } @media only screen and (max-width: 767px) { .banner-area.include-pagination .content { padding-bottom: 100px; } } .banner-area .swiper-pagination-fraction span { -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .banner-area .swiper-pagination-fraction span.swiper-pagination-current { font-size: 30px; font-family: var(--font-default); font-weight: 600; } .banner-style-one-area { overflow: hidden; position: relative; z-index: 1; } .shape-bottom-center { position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background-size: contain; background-position: center bottom; background-repeat: no-repeat; z-index: 0; } .shape-top-right { position: absolute; right: 0; top: 0; height: 600px; width: 600px; background-size: contain; background-repeat: no-repeat; background-position: right top; z-index: -1; } .shape-left-top { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; z-index: -1; background-position: top left; } .banner-style-one-area .shape-left-top { opacity: 0.9; } .banner-style-one .content { padding-top: 200px; padding-bottom: 50px; } .banner-style-one .content .info { padding-bottom: 150px; } .banner-style-one .content .thumb img { /* max-width: 120%; */ height: 450px; position: relative; z-index: 1; } .banner-style-one .content .thumb { /* margin-bottom: -20px; */ text-align: center; } /* COIN ANIMATION CSS */ .coin-animation { position: absolute; bottom: 55PX; left: 0; right: 0; } .wptb-slider { position: relative; } .animation-box { position: absolute; bottom: 70px; left: 0; right: 0; } .coin-animation .coin { background: url('..//img/TonBigBull-log.png'); background-repeat: no-repeat; background-position: center center; position: absolute; width: 55px; height: 55px; transition: all 600ms; opacity: 1; bottom: -55px; z-index: 1 ; } .coin-animation .coin-1 { animation: coinanimation 5s linear 0s infinite; background-size: 33px 33px; left: 20px; } .coin-animation .coin-2 { animation: coinanimationtwo 8s linear 0s infinite; background-size: 44px 44px; right: 0; left: 80%; margin: auto; } .coin-animation .coin-3 { animation: coinanimation 6s linear 0s infinite; background-size: 37px 37px; left: 30%; } .coin-animation .coin-4 { animation: coinanimationtwo 9s linear 0s infinite; background-size: 25px 25px; left: 45%; bottom: -15%; } .coin-animation .coin-5 { animation: coinanimationtwo 7s linear 0s infinite; background-size: 30px 30px; left: 65%; } .coin-animation .coin-6 { animation: coinanimationtwo 4s linear 0s infinite; background-size: 35px 35px; left: 20%; } .coin-animation .coin-7 { animation: coinanimation 4.2s linear 0s infinite; background-size: 45px 45px; left: 60%; } .coin-animation .coin-8 { animation: coinanimationtwo 5.5s linear 0s infinite; background-size: 42px 42px; left: 0px; } .coin-animation .coin-9 { animation: coinanimation 9s linear 0s infinite; background-size: 47px 47px; left: 50%; } .coin-animation .coin-10 { animation: coinanimationtwo 5s linear 0s infinite; background-size: 22px 22px; left: 84%; } .coin-animation .coin-11 { animation: coinanimationtwo 4.5s linear 0s infinite; background-size: 47px 47px; left: 37%; } .coin-animation .coin-12 { animation: coinanimation 6.5s linear 0s infinite; background-size: 17px 17px; left: 35%; } .coin-animation .coin-13 { animation: coinanimation 7.6s linear 0s infinite; background-size: 55px 55px; left: 25%; } /*keyfram*/ @-webkit-keyframes coinanimation { 0% { -webkit-transform: translateY(0%) rotate(0deg); } 100% { -webkit-transform: translateY(-1700%) rotate(720deg); } } @-webkit-keyframes coinanimationtwo { 0% { -webkit-transform: translateY(0%) rotate(0deg); } 100% { -webkit-transform: translateY(-1700%) rotate(-720deg); } } /* animation box */ .banner-style-one a { margin-right: 25px; display: inline-block; } .banner-style-one .button { margin-top: 35px; } .btn-regular { border-bottom: 1px solid; line-height: 1; } .banner-style-one h4 { text-transform: uppercase; font-weight: 500; margin-bottom: 20px; } .banner-style-one h2 { font-weight: 500; font-size: 60px; line-height: 1; margin-bottom: 30px; } .banner-style-two-area { position: relative; height: 100%; z-index: 1; } .banner-style-two h4 { text-transform: uppercase; font-weight: 300; margin-bottom: 20px; display: inline-block; } .banner-style-two-area .shape-bottom-center { width: 100%; background-size: cover; height: 100%; } .banner-style-area div { height: 100%; } .banner-style-two-area .row > div { height: auto; } .banner-style-two-area div { height: 100%; } .banner-style-two .thumb { max-width: 110%; float: right; margin-top: 90px; position: relative; z-index: 1; height: auto; } .banner-style-two .thumb img { max-width: 120%; } .banner-style-two { position: relative; z-index: 1; } .round-animation { position: absolute; top: 0; left: -100px; margin-top: -50px; z-index: -1; background: transparent; width: 200px; height: 200px !important; border: 8px solid rgba(98, 34, 204, 0.06); border-radius: 100%; text-align: center; display: inline-block; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out; transition-property: all; -webkit-transition-property: color, background, border-color; transition-property: color, background, border-color; } .round-animation::after, .round-animation::before { content: ''; border: 10px solid; border-color: inherit; width: 270%; height: 270%; -webkit-border-radius: 100%; border-radius: 100%; position: absolute; left: -100%; top: -100%; opacity: 1; -webkit-animation: 2s videomodule-anim linear infinite; animation: 2s videomodule-anim linear infinite; animation-delay: 0s; } .round-animation::before { -webkit-animation-delay: .5s; animation-delay: .5s; } @-webkit-keyframes videomodule-anim { 0% { -webkit-transform: scale(0.68); transform: scale(0.68); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } } @keyframes videomodule-anim { 0% { -webkit-transform: scale(0.68); transform: scale(0.68); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } } .banner-style-two .thumb .social { position: absolute; left: -40px; bottom: 0; max-width: 250px; height: auto !important; } .banner-style-two .thumb .social img { border-radius: inherit; } .banner-style-two h2 { font-size: 64px; font-weight: 600; margin-bottom: 35px; line-height: 1; } .banner-style-two p { font-size: 16px; line-height: 1.7; } .banner-style-two .button { margin-top: 30px; } .shape-text { position: relative; z-index: 1; display: inline-block; } .shape-text .shape { position: absolute; left: 0; bottom: -25px; z-index: -1; } .banner-style-two strong { position: relative; z-index: 1; display: inline-block; font-weight: 600; } .banner-style-two strong::after { position: absolute; left: 0; bottom: 0px; content: ""; height: 100%; width: 100%; background: url(../img/shape/14.png); z-index: -1; background-repeat: no-repeat; background-position: center; background-size: contain; } @media (min-width: 1200px) { .banner-style-two p { padding-right: 10%; } } .banner-style-two .shape-top-right { width: 35%; top: 20%; } .banner-style-three-area { background-position: bottom center !important; position: relative; } .banner-style-three .content { padding-top: 180px; } .banner-style-three .thumb { margin-top: 60px; position: relative; z-index: 1; } .banner-style-three-area .animate-shape img:first-child { position: absolute; left: 50px; top: 160px; height: 100px; animation: moving 25s ease-out infinite; } .banner-style-three-area .animate-shape img:nth-child(2) { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .banner-style-three .banner-slide { overflow: hidden; } .banner-style-three h4 { display: inline-block; background: #ffffff; color: var(--color-primary); padding: 5px 20px; text-transform: uppercase; line-height: 1; border-radius: 30px; font-weight: 500; font-size: 18px; padding-top: 8px; margin-bottom: 25px; } .banner-style-three h2 { font-size: 80px; line-height: 1; font-weight: 600; margin-bottom: 30px; } .banner-style-three p { padding: 0 15%; margin: 0; font-size: 20px; line-height: 1.8; } .banner-style-four-area .row div { height: auto; } .banner-style-four-area .shape { position: absolute; left: 0; bottom: -6px; z-index: -1; } .banner-style-four-area .shape-text svg { stroke-width: 18px; stroke: var(--color-optional); height: 90px; width: 100%; } .banner-style-four .thumb { position: relative; z-index: 1; margin-bottom: 170px; } .banner-style-four .thumb .thumb-sub { position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; } .banner-style-four .thumb .thumb-sub img:first-child { position: absolute; left: -50px; top: 200px; box-shadow: 0 25px 70px rgb(0 0 0 / 7%); background: #ffffff; padding: 15px; height: 250px; border-radius: 15px; z-index: 1; } .banner-style-four .thumb .thumb-sub img:nth-child(2) { position: absolute; right: 0; bottom: -120px; } .banner-style-four .thumb .thumb-sub img:nth-child(3) { position: absolute; left: 80px; bottom: -149px; } .banner-style-four .thumb::after { position: absolute; left: 50%; top: 72%; content: ""; height: 400px; width: 400px; transform: translate(-50%, -50%); background: var(--bg-gradient); z-index: -1; border-radius: 50%; } .banner-style-four .thumb::before { position: absolute; left: 50%; top: 72%; content: ""; height: 600px; width: 600px; transform: translate(-50%, -50%); background: var(--color-primary); z-index: -1; border-radius: 50%; opacity: 0.04; } .banner-style-four { padding-top: 150px; padding-bottom: 150px; } .banner-style-four h4 { text-transform: uppercase; color: var(--color-primary); font-weight: 500; background: var(--bg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; z-index: 1; } .banner-style-four h2 { font-size: 80px; line-height: 70px; font-weight: 600; margin-bottom: 40px; } .banner-style-four p { font-size: 20px; line-height: 1.8; padding-right: 10%; margin: 0; } .banner-style-four strong { position: relative; z-index: 1; display: inline-block; font-weight: 600; } .banner-style-four strong::after { position: absolute; left: 0; bottom: -3px; content: ""; height: 100%; width: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='90' viewBox='0 0 500 150' stroke-width='18' stroke='%23FF5621' fill='none'%3E%3Cpath d='M15.2,133.3L15.2,133.3c121.9-7.6,244-9.9,366.1-6.8c34.6,0.9,69.1,2.3,103.7,4' fill='%23a1cdca'%3E%3C/path%3E%3C/svg%3E"); z-index: -1; background-repeat: no-repeat; background-position: left bottom; } .banner-style-five-thumb img { max-width: 45%; border-radius: 10px; } .banner-style-five .content { padding-top: 200px; padding-bottom: 150px; } .banner-style-five-thumb img:first-child { z-index: -1; position: relative; } .banner-style-five-thumb img:nth-child(2) { float: right; margin-top: 80px; } .banner-style-five-thumb img:nth-child(3) { margin-top: 50px; } .banner-style-five-thumb { position: relative; z-index: 1; } .banner-style-five-thumb .shape { position: absolute; right: 35%; top: -25px; z-index: -1; text-align: right; height: 120%; } .banner-style-five-thumb .shape img { border-radius: inherit; max-width: inherit; height: 100%; } .banner-style-five h2 { font-size: 75px; line-height: 1; font-weight: 600; margin-bottom: 25px; } .banner-style-five h2 strong { display: inline-block; font-weight: 600; position: relative; z-index: 1; } .banner-style-five h2 strong::after { position: absolute; left: 0; bottom: 0px; content: ""; height: 100%; width: 100%; background: url(../img/shape/19.png); z-index: -1; background-repeat: no-repeat; background-position: center; background-size: contain; } .banner-style-five p { font-size: 20px; padding-right: 10%; } @media only screen and (max-width: 767px) { .banner-style-three-area { overflow: hidden; } .banner-style-three .content { padding-top: 60px; } .banner-style-three h2 { font-size: 36px; line-height: 1.2; } .banner-style-three .thumb { max-width: 80%; margin: 50px auto auto; } .banner-style-four-area { background: var(--bg-gray); } .banner-style-four h2 { font-size: 36px; line-height: 1.2; margin-bottom: 15px; } .banner-style-four p { padding: 0; font-size: 16px; line-height: 26px; } .banner-style-four .thumb .thumb-sub img:first-child { display: none; } .banner-style-four .thumb::before { height: 100%; width: 100%; display: none; } .banner-style-four .thumb { margin-bottom: 50px; margin-top: 50px; } .banner-style-four .thumb::after { height: 300px; width: 300px; } .banner-style-four-area .info { text-align: center; } .banner-style-four .thumb .thumb-sub img:nth-child(3) { display: none; } .banner-style-four .thumb .thumb-sub img:nth-child(2) { display: none; } .banner-style-four { padding-bottom: 90px; padding-top: 130px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-style-three-area { overflow: hidden; } .banner-style-three .content { padding-top: 120px; } .banner-style-three .thumb { max-width: 80%; margin: 60px auto auto; } .banner-style-four .thumb .thumb-sub img:first-child { display: none; } .banner-style-four-area { background: var(--bg-gray); } .banner-style-four { text-align: center; padding-top: 200px; padding-bottom: 120px; } .banner-style-four .thumb { margin-top: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .heading, .title { font-size: 36px; margin-top: 0; line-height: 1.2; } .banner-style-four-area { overflow: hidden; } .banner-style-four .thumb::before { height: 500px; width: 500px; } .banner-style-four .thumb .thumb-sub img:first-child { top: 120px; height: 200px; } .banner-style-four { padding-top: 250px; } .banner-style-four .thumb .thumb-sub img:nth-child(3) { left: -30px; max-width: 120px; } .banner-style-four .thumb .thumb-sub img:nth-child(2) { bottom: -180px; max-width: 170px; } .banner-style-four .thumb > img { position: relative; top: -90px; } .banner-style-two .align-center { align-items: center; } .banner-style-two-area .info { padding-top: 120px; } .about-style-four .thumb img:nth-child(4) { display: none; } } .shape-left-center { background-repeat: no-repeat; background-size: contain; background-position: bottom left; } .shape-left-bottom { position: absolute; left: 0; top: 400px; height: 500px; width: 100%; background-size: contain; background-repeat: no-repeat; z-index: -1; } .feature-style-one { margin-bottom: 30px; } .feature-style-one p { margin: 0; color: #000; } .feature-style-one i { display: inline-block; font-size: 45px; margin-bottom: 30px; height: 90px; width: 90px; text-align: center; line-height: 90px; position: relative; z-index: 1; color: var(--color-primary); transition: all 0.35s ease-in-out; } .feature-style-one i img{ height: 55px; } .feature-style-one i::before { line-height: inherit; } .feature-style-one i::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--color-primary); z-index: -1; border-radius: 48% 52% 41% 59% / 52% 49% 51% 48%; opacity: 0.1; transition: all 0.35s ease-in-out; } .feature-style-one:first-child i::after, .feature-style-one:hover i::after { opacity: 1; } .feature-style-one:nth-child(2) i { /* color: var(--color-optional); */ } .feature-style-one:nth-child(2) i::after { /* background: var(--color-optional); */ border-radius: 36% 64% 57% 43% / 50% 50% 50% 50%; } .feature-style-one:nth-child(3) i { /* color: #26C6DA; */ } .feature-style-one:nth-child(3) i::after { /* background: #26C6DA; */ border-radius: 48% 52% 40% 60% / 45% 41% 59% 55%; } .feature-style-one:first-child i, .feature-style-one:hover i { color: var(--white) !important; } .feature-style-one:hover i svg{ fill: #fff; /* color: var(--white) !important; */ } .feature-style-one .item { padding: 60px 40px; border-radius: 10px; position: relative; z-index: 1; transition: all 0.35s ease-in-out; box-shadow: 0 25px 70px rgb(0 0 0 / 7%); background: var(--white); } .feature-style-one .item::after { position: absolute; left: 0; top: 0; content: ""; height: 140px; width: 100%; background: url(../img/shape/16.png); background-size: contain; background-repeat: no-repeat; background-position: left top; transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; border-radius: 10px 0 0 10px; } .feature-style-one:first-child .item::after, .feature-style-one .item:hover::after { opacity: 1; visibility: visible; } .feature-style-one:first-child .item, .feature-style-one .item:hover { background: var(--white); box-shadow: inherit; } .feature-style-one a:hover { color: var(--color-heading); } .feature-style-one .item h4 { font-size: 30px; font-weight: bold; } .feature-style-one .item .bg { transition: all 0.25s ease-in-out; background-size: cover !important; position: absolute; left: 0; top: 0; height: 100%; width: 80%; z-index: -1; border-radius: 10px; opacity: 0; visibility: hidden; } .feature-style-one:first-child .item .bg, .feature-style-one .item:hover .bg { width: 100%; opacity: 1; visibility: visible; } .feature-style-three { margin-bottom: 30px; } .project_row::before{ content: ''; position: absolute; background: var(--color-primary); width: 57%; height: 5px; left: 0; right: 0; top: -27px; margin: auto; } .first_project_row::before{ background: transparent; } .feature-style-three .item { padding: 60px 37px; background: #ffffff; box-shadow: 0px 25px 70px 0px rgb(0 0 0 / 7%); overflow: hidden; position: relative; z-index: 1; } .feature-style-three .item::after { position: absolute; left: 0; top: 0; content: ""; height: 80%; width: 100%; z-index: -1; background: var(--bg-gradient); opacity: 0; visibility: hidden; transition: all 0.35s ease-in-out; } .feature-style-three:nth-child(2n) .item::after, .feature-style-three .item:hover::after, .feature-style-three .item.active::after { visibility: visible; opacity: 1; height: 100%; } .feature-style-three .item i, .feature-style-three .item p, .feature-style-three .item h4 { transition: all 0.35s ease-in-out; } .feature-style-three .item h4 { font-size: 22px; } .feature-style-three .item p { margin: 0; } .feature-style-three .item i { display: inline-block; font-size: 70px; margin-bottom: 30px; background: linear-gradient(90deg, #00b5ca 0%, #d900ff 100%); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .feature-style-three .item:hover i, .feature-style-three .item:hover p, .feature-style-three .item:hover h4, .feature-style-three .item:hover a, .feature-style-three .item:hover span, .feature-style-three .item.active i, .feature-style-three .item.active p, .feature-style-three .item.active h4, .feature-style-three .item.active a, .feature-style-three .item.active span, .feature-style-three:nth-child(2) .item i, .feature-style-three:nth-child(2) .item p, .feature-style-three:nth-child(2) .item a, .feature-style-three:nth-child(2) .item span, .feature-style-three:nth-child(2) .item h4 { color: var(--white); } .feature-style-three .item:hover i, .feature-style-three .item.active i, .feature-style-three:nth-child(2) .item i { background: transparent; -webkit-background-clip: inherit; -moz-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; } .feature-style-three .item:hover p, .feature-style-three .item.active p, .feature-style-three:nth-child(2) .item p { opacity: 0.9; } .feature-style-three .bottom { border-top: 1px solid #e7e7e7; margin-top: 20px; padding-top: 25px; transition: all 0.35s ease-in-out; } .feature-style-three:hover .item .bottom, .feature-style-three:nth-child(2) .item .bottom { border-top: 1px solid rgba(255, 255, 255, 0.3); } .feature-style-three .bottom span { text-transform: uppercase; font-weight: 400; font-size: 14px; display: block; margin-bottom: 3px; transition: all 0.35s ease-in-out; } .bottom-dark-120 { position: relative; z-index: 1; } .bottom-dark-120::after { position: absolute; left: 0; bottom: 0; content: ""; height: 120px; width: 100%; background: var(--dark); z-index: -1; } .shape-arrow { position: absolute; left: 100%; top: -75px; margin-left: -60px; height: 300px; width: 100%; } @media only screen and (max-width: 991px) { .shape-arrow { display: none; } } .shape-left-top-less-opacity { position: absolute; left: -50px; top: 0; height: 400px; width: 400px; background-size: contain; background-repeat: no-repeat; z-index: -1; background-position: top left; opacity: 0.5; } .about-style-one .thumb img { background: var(--white); padding: 30px; box-shadow: 0 0 50px #e7ecf3; border-radius: 10px; } .about-style-one .thumb img:first-child { float: right; background: var(--bg-gradient); box-shadow: inherit; } .about-style-one .thumb img:nth-child(2) { position: absolute; left: -26%; top: 80px; max-width: 250px; z-index: 9; } .about-style-one .thumb { position: relative; } .about-style-one .thumb img:nth-child(3) { float: right; max-width: 50%; position: relative; z-index: 9; top: -80px; margin-bottom: -80px; margin-right: 50px; } .shape-right-center { position: absolute; right: 0; top: 0; height: 700px; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: right top; z-index: -1; opacity: 0.5; } .author-info { display: flex; align-items: center; margin-top: 20px; position: relative; } .author-info img { height: 70px; width: 70px; border-radius: 50%; border: 2px solid #f9f9f9; padding: 3px; margin-right: 15px; } .author-info h4 { font-weight: 600; margin-bottom: 5px; } .author-info span { color: violet; color: var(--color-primary); } .about-style-one blockquote { padding: 0; margin: 0; font-size: 20px; line-height: 1.5; color: var(--color-heading); border: none; margin-top: 25px; font-style: italic; } .about-style-one .btn { margin-top: 30px; } .about-style-one .video-play-button { margin-top: 40px; } .about-style-two .thumb { position: relative; z-index: 1; margin-bottom: 50px; } .about-style-two .thumb .sub-item img:nth-child(2) { position: absolute; right: -70px; top: 40px; max-width: 300px; border: 1px solid #e7e7e7; border-radius: 10px; } .about-style-two .thumb .sub-item img:first-child { position: absolute; left: -50px; bottom: -50px; padding: 15px; max-width: 250px; background: #ffffff; border: 1px solid #e7e7e7; border-radius: 10px; } .about-style-two .thumb img { border-radius: 10px; } .item-increase h2 { font-weight: 600; font-size: 50px; display: flex; align-items: center; line-height: 1; margin-bottom: 10px; } .item-increase h2 i { font-size: 25px; font-weight: 400; margin-left: 10px; color: var(--color-paragraph); } .item-increase h4 { font-weight: 600; } .about-style-three-area { background-position: right bottom; background-repeat: no-repeat; } .about-style-three .thumb { position: relative; z-index: 1; bottom: -240px; margin-top: -240px; padding-right: 50px; } .about-style-three .thumb > img { max-width: 80%; position: relative; z-index: 1; } .about-style-three .thumb::after { position: absolute; left: -20%; top: -5%; content: ""; height: 120%; width: 120%; background: url(../img/shape/46.png); background-repeat: no-repeat; z-index: -1; background-size: contain; background-position: center; } .about-style-three .thumb .sub-thumb { position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; } .about-style-three .thumb .sub-thumb img { position: absolute; right: -15px; top: 0; border-radius: 10px; height: 260px; } .grow-business { display: inline-block; text-align: center; height: 220px; width: 220px; background: var(--bg-gradient); border-radius: 50%; position: absolute; left: 0; top: 120px; } .grow-business h2 { margin: 0; font-weight: 700; font-size: 42px; line-height: 1; } .grow-business::after { position: absolute; left: -10%; top: -10%; content: ""; height: 120%; width: 120%; background: var(--bg-gradient); border-radius: 50%; z-index: -1; opacity: 0.3; } .about-style-three span { display: inline-block; position: relative; z-index: 1; overflow: hidden; top: 11px; } .about-style-three span .border-shape { position: absolute; left: 0; bottom: 6px; content: ""; height: 10px; width: 100%; background: var(--bg-gradient); z-index: -1; } .about-style-three h2 { font-weight: 600; margin-bottom: 30px; font-size: 55px; line-height: 1.1; color: #fff; position: relative; margin-top: -10px; } .list-style-three { display: flex; margin-top: 30px; padding-top: 30px; transition: all 0.35s ease-in-out; border-top: 1px solid rgba(255, 255, 255, 0.15); } .list-style-three span { min-width: 90px; font-size: 60px; position: relative; top: -5px; overflow: inherit; font-weight: 900; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: cover; background-position: center; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4); line-height: 1; } .list-style-three h4 { opacity: 0.8; margin: 0; } .list-style-three p { margin: 0; font-weight: bold; font-size: 24px; } .list-style-three:first-child { border: none; margin-top: 0; padding-top: 0; } .about-style-three p.large { font-size: 18px; line-height: 1.8; opacity: 0.9; margin: 0; } .about-style-four .thumb { position: relative; margin-top: 55px; } .about-style-four .thumb img:first-child { max-width: 320px; box-shadow: 0 5px 30px 0 rgba(214, 215, 216, 0.88); background: var(--white); padding: 30px; border-radius: 4px; } .about-style-four .thumb img:nth-child(2) { background: #f9f9f9; padding: 40px; border-radius: 10px; border: 1px solid #e1dfe8; position: absolute; right: 0; top: 95px; max-width: 60%; z-index: -1; } .about-style-four .thumb .icon { display: inline-block; height: 120px; width: 120px; background: var(--white); text-align: center; box-shadow: 0 5px 30px 0 rgba(214, 215, 216, 0.57); position: absolute; margin-left: -50px; z-index: -1; top: -57px; border-radius: 4px; } .about-style-four .thumb i { display: inline-block; background: #cdfbe1; text-align: center; font-size: 30px; font-weight: 600; color: #6de898; border-radius: 15px; border: 2px solid #6de898; position: relative; top: 50%; transform: translateY(-50%); height: 70px; width: 70px; line-height: 70px; } .about-style-four .thumb img:nth-child(3) { background: var(--white); padding: 20px; box-shadow: 0 5px 30px 0 rgba(214, 215, 216, 0.57); position: absolute; left: -70px; top: 15%; height: 100px; border-radius: 4px; } .about-style-four .thumb .shape img { box-shadow: none; padding: 0; height: auto; width: 150px; background: transparent; border-radius: inherit; } .about-style-four .thumb .shape { position: absolute; top: -50px; left: -30px; z-index: -1; } .about-style-four .thumb img:nth-child(4) { background: var(--white); padding: 30px; height: 120px; box-shadow: 0 5px 30px 0 rgba(214, 215, 216, 0.57); border-radius: 4px; position: absolute; bottom: 0; right: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-style-three .thumb .sub-thumb img:nth-child(2) { right: 0; top: 130px; } .about-style-three .thumb { margin: 0; bottom: 0; margin-bottom: 10px; display: none; } } @media only screen and (max-width: 767px) { .about-style-three .thumb .sub-thumb img:nth-child(2) { display: none; } .about-style-three .thumb { bottom: 0; margin: 0; display: none; } .about-style-three .thumb .sub-thumb { display: none; } .about-style-three .thumb > img { padding: 0; } .about-style-three h2 { font-size: 42px; } .list-style-three { display: block; text-align: center; } .list-style-three span { margin: 0; margin-bottom: 30px; } .about-style-three { text-align: center; } } .fun-fact { text-align: center; } .fun-fact .counter { position: relative; } .fun-fact .counter { position: relative; display: flex; align-items: center; justify-content: center; font-size: 45px; font-weight: 600; color: var(--color-heading); line-height: 1; margin-bottom: 5px; font-family: var(--font-default); } .text-light .fun-fact .counter { color: var(--white); } .fun-fact .medium { font-weight: 600; } .text-light .fun-fact .medium { color: #e2e1e1; } .fun-factor-style-one .fun-fact { background: rgba(0, 0, 0, 0.06); padding: 35px; border-radius: 10px; position: relative; z-index: 1; } .brand-area { position: relative; } .curve-top { overflow: hidden; position: absolute; left: 0; width: 100%; line-height: 0; top: -1px; } .curve-top svg { width: calc(100% + 1.3px); height: 30px; display: block; width: calc(100% + 1.3px); position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .curve-top.angle svg { height: 100px; display: block; width: calc(100% + 100px); position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .brand-items img { width: auto; margin: auto; padding: 0 25px; } .brand3col { text-align: center; } .brand-items h2 { font-weight: 600; } .brand-items h4 { margin: 0; font-weight: 500; } .brand-items strong { font-size: 30px; position: relative; z-index: 1; font-weight: 700; } .brand-heading h4 strong { font-size: 30px; text-decoration: underline; color: var(--color-primary); font-weight: 600; } .brand3col .swiper-wrapper { align-items: center; } .shape-left-bottom-center { position: absolute; left: 0; bottom: 0; } .color-heading { font-weight: 600; margin-bottom: 30px; font-size: 70px; line-height: 1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: cover; background-position: center; margin-top: -15px; } .clients-map { display: inline-block; margin: auto; position: relative; } .clients-map li { position: absolute; z-index: 1; } .clients-map li:first-child { top: 90px; left: 50px; } .clients-map li:nth-child(2) { top: 200px; left: 200px; } .clients-map li:nth-child(3) { top: 80px; right: 200px; } .clients-map li:nth-child(4) { top: 160px; right: 320px; } .clients-map li:nth-child(5) { bottom: 140px; left: 50%; margin-left: 15px; } .clients-map li::after { position: absolute; left: 50%; bottom: 0; content: ""; height: 20px; width: 20px; transform: translateX(-50%); background: var(--bg-gradient); z-index: -1; border-radius: 50%; } .clients-map li::before { position: absolute; left: 50%; bottom: -5px; content: ""; height: 30px; width: 30px; background: var(--color-primary); z-index: -1; border-radius: 50%; animation: pulsate 1s ease-out; animation-iteration-count: infinite; margin-left: -15px; } .clients-map li:nth-child(2):before { position: absolute; left: 50%; bottom: -5px; content: ""; height: 30px; width: 30px; background: var(--color-primary); z-index: -1; border-radius: 50%; animation: pulsate 1.2s ease-out; animation-iteration-count: infinite; margin-left: -15px; } .clients-map li:nth-child(3):before { position: absolute; left: 50%; bottom: -5px; content: ""; height: 30px; width: 30px; background: var(--color-primary); z-index: -1; border-radius: 50%; animation: pulsate 1.3s ease-out; animation-iteration-count: infinite; margin-left: -15px; } .clients-map li:nth-child(4):before { position: absolute; left: 50%; bottom: -5px; content: ""; height: 30px; width: 30px; background: var(--color-primary); z-index: -1; border-radius: 50%; animation: pulsate 1.4s ease-out; animation-iteration-count: infinite; margin-left: -15px; } .clients-map li:nth-child(5):before { position: absolute; left: 50%; bottom: -5px; content: ""; height: 30px; width: 30px; background: var(--color-primary); z-index: -1; border-radius: 50%; animation: pulsate 1.5s ease-out; animation-iteration-count: infinite; margin-left: -15px; } .clients-map li a { position: relative; left: 0; top: -40px; display: inline-block; background: var(--white); padding: 2px 10px; border-radius: 5px; box-shadow: 0 5px 3px rgb(3 27 78 / 8%); } .clients-map li a { position: relative; left: 0; top: -40px; display: inline-block; background: var(--dark); padding: 1px 15px; border-radius: 5px; box-shadow: 0 5px 3px rgb(3 27 78 / 8%); color: var(--white); } .clients-map li a::after { position: absolute; left: 50%; bottom: -8px; content: ""; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid var(--dark); transform: translateX(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px) { .clients-map li:nth-child(2) { left: 160px; } .clients-map li:nth-child(3) { right: 100px; top: 45px; } .clients-map li:nth-child(4) { top: 100px; } .clients-map li:nth-child(5) { left: auto; right: 70px; bottom: 90px; } } @media only screen and (max-width: 767px) { .color-heading { font-size: 40px; margin-top: -5px; } .clients-worldwide { background: var(--bg-gray); padding-bottom: 50px; } .clients-map li:nth-child(2) { top: auto; bottom: 10%; left: 50%; } .clients-map li:nth-child(5) { display: none; } .clients-map li:nth-child(4) { display: none; } .clients-map li:nth-child(3) { top: 0; right: 30px; } .clients-map li:first-child { top: 50px; } } .services-tab-navs .nav-tabs { display: block; background: var(--white); padding: 55px 50px; position: relative; padding-bottom: 75px; border: none; margin-bottom: -50px; border-radius: 8px; box-shadow: 0 5px 3px rgba(3,27,78,.08); } .services-tab-navs .nav-tabs .nav-link { margin: 0; padding: 15px 0; width: 100%; text-align: left; border: none; border-bottom: 1px solid #f1f1f1; color: var(--color-heading); font-size: 20px; font-weight: 600; transition: all 0.35s ease-in-out; position: relative; display: flex; align-items: center; position: relative; } .services-tab-navs .nav-tabs .nav-link.active { border-color: #dddddd; } .services-tab-navs .nav-tabs .nav-link::after { position: absolute; right: -50px; bottom: -1px; content: ""; height: 1px; width: 0; background: #dddddd; transition: all 0.45s ease-in-out; } .services-tab-navs .nav-tabs .nav-link.active::after { width: 60%; } .services-tab-navs .nav-tabs .nav-link::before { position: absolute; content: ""; top: 20px; right: -90px; height: 40px; width: 40px; border-left: solid var(--white); border-top: solid transparent; border-bottom: solid transparent; border-width: 20px; -webkit-filter: drop-shadow(3px 0 0 rgba(3,27,78,.03)); filter: drop-shadow(3px 0 0 rgba(3,27,78,.03)); transition: all .4s ease; visibility: hidden; opacity: 0; } .services-tab-navs .nav-tabs .nav-link.active::before { opacity: 1; visibility: visible; } .services-tab-navs .nav-tabs .nav-link:first-child { margin-top: 0; } .services-tab-navs .nav-tabs .nav-link.active i { color: var(--color-primary); } .services-tab-navs .nav-tabs .nav-link i { display: block; font-size: 55px; margin-right: 20px; position: relative; top: 5px; } .services-tab-navs .nav-tabs .nav-link b { text-transform: uppercase; font-size: 14px; font-weight: 500; color: var(--color-paragraph); letter-spacing: 0.6px; display: block; margin-bottom: 0; } .services-style-one .info .title { font-weight: 700; } ul.list-standard { margin: 0; padding: 0; list-style: none; } .list-standard li { position: relative; font-size: 17px; padding-left: 30px; line-height: 2; font-weight: 500; } .list-standard li::after { position: absolute; left: 0; top: 7px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-size: 11px; font-weight: 500; height: 20px; width: 20px; text-align: center; line-height: 18px; color: var(--color-heading); border-radius: 5px; border: 1px solid #c1b4b4; } .btn-regular.large { border-bottom: 2px solid; line-height: 1; display: inline-block; font-size: 20px; color: var(--color-primary); overflow: inherit; padding-bottom: 3px; font-weight: 500; } .btn-regular i { font-size: 15px; position: relative; margin-left: 2px; font-weight: 600; transform: rotate(-55deg); } .services-style-one .info { position: relative; z-index: 1; } .services-style-one .info h2 { font-weight: 600; margin-bottom: 25px; } .services-style-one .thumb { position: relative; z-index: 1; } .services-style-one .thumb::after { position: absolute; right: -100px; top: -70px; content: ""; height: 300px; width: 300px; background: linear-gradient(20deg, transparent, rgba(255, 255, 255, 1)); z-index: -1; border-radius: 50%; } .services-style-one .info { position: relative; z-index: 1; } .shape-animation-up-down { position: absolute; right: 50px; top: -70px; max-width: 150px; } .services-style-two { margin-bottom: 30px; } .services-style-two .item > i { display: inline-block; font-size: 45px; margin-bottom: 30px; position: relative; z-index: 1; height: 90px; width: 90px; line-height: 90px; background: -webkit-linear-gradient(top left, #1BAAA0, #11EBDB); border-radius: 48% 52% 41% 59% / 52% 49% 51% 48%; text-align: center; color: var(--white); box-shadow: 0px 10px 30px 0px rgb(44 130 237 / 40%); font-weight: 600; } .services-style-two .item > i::before { line-height: inherit; } .services-style-two .item { padding: 60px 30px; box-shadow: 0px 0px 200px 0px rgb(0 0 0 / 5%); border-radius: 10px; background: var(--white); position: relative; z-index: 1; transition: all 0.35s ease-in-out; padding-bottom: 40px; overflow: hidden; } .services-style-two .item .shape { position: absolute; right: -50px; transition: all 0.35s ease-in-out; z-index: -1; opacity: 0; visibility: hidden; } .services-style-two:first-child .item .shape, .services-style-two .item:hover .shape, .services-style-two .item.active .shape { right: 0; opacity: 1; visibility: visible; } .services-style-two .item:hover, .services-style-two .item.active, .services-style-two:first-child .item { padding-bottom: 75px; } .services-style-two:nth-child(2) .item > i { background: linear-gradient(to bottom right, #4154F1, #6C7CFF); } .services-style-two:nth-child(3) .item > i { background: linear-gradient(to bottom right, #F84E77, #FFA3B9); } .services-style-two:nth-child(4) .item > i { background: linear-gradient(to bottom right, #63BC6F, #A0F8AC); } .services-style-two .btn-icon { bottom: 10px; position: absolute; opacity: 0; visibility: hidden; left: 10px; } .services-style-two .btn-icon::after { margin-top: -2px; display: none; } .services-style-two .item .btn-icon { padding-left: 35px; text-transform: uppercase; border-bottom: 1px solid; color: var(--color-paragraph); } .services-style-two .item:hover .btn-icon, .services-style-two .item.active .btn-icon, .services-style-two:first-child .item .btn-icon { opacity: 1; visibility: visible; bottom: 45px; left: 30px; } .services-style-two .item .btn-icon:hover, .services-style-two .item .btn-icon.active { color: var(--color-primary); } .services-style-two .item .btn-icon i { transform: rotate(-45deg); margin-left: 4px; font-weight: 500; } .services-style-four-area { background-size: 40%, contain; background-repeat: no-repeat; background-position: center left; } .services-style-four { margin-bottom: 30px; } .services-style-four .item > i { display: inline-block; font-size: 70px; margin-bottom: 30px; background: linear-gradient(90deg, #00b5ca 0%, #d900ff 100%); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .services-style-four p { margin: 0; } .services-style-four .item { padding: 60px 50px; box-shadow: 0px 25px 70px 0px rgb(0 0 0 / 7%); overflow: hidden; position: relative; z-index: 1; background: rgba(255, 255, 255, 0.6); display: flex; transition: all 0.35s ease-in-out; } .services-style-four .item::after { background: var(--bg-gradient); position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 90%; z-index: -1; transition: all 0.25s ease-in-out; opacity: 0; visibility: hidden; } .services-style-four .item:hover::after, .services-style-four .item.active::after, .services-style-four:first-child .item::after { opacity: 1; visibility: visible; width: 100%; } .services-style-four .item .thumb { max-width: 80px; min-width: 80px; margin-right: 30px; } .services-style-four ul { list-style: none; margin: 0; padding: 0; margin-top: 19px; } .services-style-four li { position: relative; z-index: 1; padding-left: 30px; font-weight: 500; margin-top: 9px; } .services-style-four li::after { position: absolute; left: 0; top: 2px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; height: 20px; width: 20px; line-height: 20px; border: 1px solid #ccbebe; text-align: center; border-radius: 5px; color: var(--color-heading); font-size: 11px; } .services-style-four p, .services-style-four li, .services-style-four a { transition: all 0.35s ease-in-out; } .services-style-four .item:hover p, .services-style-four .item:hover li, .services-style-four .item:hover a, .services-style-four .item.active p, .services-style-four .item.active li, .services-style-four .item.active a, .services-style-four:first-child .item p, .services-style-four:first-child li, .services-style-four:first-child a { color: var(--white); } .services-style-four .item:hover li::after, .services-style-four .item.active li::after, .services-style-four:first-child .item li::after { background: var(--white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-style-four-area .align-center { align-items: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .services-style-four .item { display: block; } .services-style-four .item .thumb { margin: 0; margin-bottom: 30px; } .services-style-four-area .align-center { align-items: center; } } @media only screen and (max-width: 767px) { .services-style-four .btn { margin-bottom: 20px; } .services-style-four .item { display: block; } .services-style-four .item .thumb { margin: 0; margin-bottom: 30px; } } .services-details-area .thumb img { margin-bottom: 40px; border-radius: 10px; } .services-details-area h1, .services-details-area h2, .services-details-area h3, .services-details-area h4, .services-details-area h5, .services-details-area h6 { font-weight: 600; } .feature-list-item { margin: 0; padding: 0; list-style: none; } .feature-list-item li { position: relative; z-index: 1; padding-left: 32px; margin-top: 8px; font-weight: 500; } .feature-list-item li::after { position: absolute; left: 0; top: 3px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; color: var(--color-primary); font-weight: 500; height: 20px; width: 20px; line-height: 20px; border: 1px solid #dddddd; border-radius: 5px; font-size: 12px; text-align: center; } .quick-contact-widget { padding: 60px 37px; text-align: center; background-size: cover; background-position: center; position: relative; z-index: 1; border-radius: 7px; } .quick-contact-widget h2 { font-size: 30px; font-weight: 600; margin-bottom: 10px; margin-top: 25px; } .quick-contact-widget h4 a { font-weight: 400; border-bottom: 2px solid; } .quick-contact-widget i { display: inline-block; height: 60px; width: 60px; line-height: 60px; font-weight: 100; background: #ffffff; color: var(--color-primary); font-size: 22px; border-radius: 50%; margin-bottom: 40px; position: relative; } .quick-contact-widget i::after { position: absolute; left: -10px; top: -10px; content: ""; height: 80px; width: 80px; background: #ffffff; z-index: -1; border-radius: 50%; opacity: 0.8; } .quick-contact-widget::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--dark); z-index: -1; opacity: 0.6; border-radius: 7px; } .quick-contact-widget .btn-sm { font-size: 16px; } .services-sidebar .single-widget { margin-top: 50px; } .services-sidebar .single-widget .widget-title { display: block; font-weight: 600; margin-bottom: 30px; margin-top: -5px; position: relative; text-transform: capitalize; z-index: 1; display: inline-block; padding-bottom: 15px; } .services-sidebar .single-widget .widget-title::after { position: absolute; left: 0; bottom: 0; content: ""; height: 2px; width: 50px; border-bottom: 2px solid var(--color-primary); } .services-sidebar .single-widget h4.widget-title { font-size: 22px; } .services-sidebar .single-widget:first-child { margin-top: 0; } .widget-brochure ul { padding-left: 0; list-style: none; } .widget-brochure ul li a { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 15px; background: #ffffff; padding: 20px 25px; border-radius: 5px; border: 2px solid #cddff7; color: var(--color-heading); } .widget-brochure ul li a:hover { color: var(--color-primary); } .widget-brochure ul li:first-child a { margin-top: 0; } .widget-brochure ul li:first-child a, .widget-brochure ul li a:hover { background: var(--color-primary); border-color: transparent; color: var(--white); } .widget-brochure ul li i { font-size: 35px; font-weight: 100; margin-right: 16px; display: inline-block; text-align: center; border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .widget-brochure ul li:hover i, .widget-brochure ul li:first-child i { color: var(--white); } .services-list-widget ul { list-style: none; overflow: hidden; margin: 0; padding: 0; } .services-list-widget ul li { display: block; } .services-list-widget ul li a { display: block; padding: 18px 25px; border-bottom: 1px solid #c8e0ff; position: relative; z-index: 1; overflow: hidden; color: var(--color-heading); background: #f1f4f8; } .services-list-widget ul li a::before { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 0; background: var(--color-primary); background-size: 220% 150%; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; z-index: -1; } .services-list-widget ul li a:hover { color: #ffffff; } .services-list-widget ul li a:hover::before { width: 100%; } .services-list-widget ul li.current-item a { color: #ffffff; } .services-list-widget ul li.current-item a::after { position: absolute; right: 20px; top: 50%; content: "\f061"; border-radius: 50%; font-family: "Font Awesome 5 Pro"; font-weight: 500; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 17px; } .services-list-widget ul li.current-item a::before { width: 100%; } @media only screen and (max-width: 767px) { .services-more .row { margin-top: -20px; } } .services-more .item { padding: 35px; background: var(--bg-gray); margin-top: 15px; border-radius: 10px; } @media only screen and (max-width: 767px) { .services-more .item { margin-top: 30px; text-align: center; } } .services-more .item i::before { line-height: inherit; } .services-more .item i { display: inline-block; font-size: 40px; margin-bottom: 30px; background: var(--color-primary); color: var(--white); height: 70px; width: 70px; text-align: center; line-height: 70px; border-radius: 50%; } .services-more .item a { color: var(--color-heading); } .services-more .item a:hover { color: var(--color-primary); } .services-more .item p { margin: 0; } .boosting-items { padding: 120px 80px; border: 2px solid; border-radius: 10px; position: relative; background: var(--white); } .boosting-items::after { position: absolute; left: -30px; bottom: -30px; content: ""; height: 100%; width: 100%; background: var(--bg-gradient); z-index: -1; border-radius: 10px; opacity: 0.1; } ul.list-icon { margin: 0; padding: 0; } ul.list-icon li { display: flex; margin-top: 30px; border-top: 1px solid #e7e7e7; padding-top: 30px; } ul.list-icon li:first-child { border: none; padding-top: 0; } ul.list-icon li .icon { margin-right: 30px; } ul.list-icon li i { display: inline-block; font-size: 60px; color: var(--color-primary); text-align: center; background: linear-gradient(90deg, #00b5ca 0%, #d900ff 100%); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0 5px; line-height: 1; } ul.list-icon li p { margin: 0; } ul.list-icon li h4 { font-weight: 600; } ul.list-icon li i::before { line-height: inherit; } .half-bg-gray-bottom { position: relative; z-index: 1; } .half-bg-gray-bottom::after { position: absolute; left: 0; bottom: 0; content: ""; height: 384px; width: 100%; background: var(--bg-gray); z-index: -1; } .project-style-one { background: #ffffff; border-radius: 10px; box-shadow: 0 25px 70px rgb(0 0 0 / 7%); overflow: hidden; margin-bottom: 30px; position: relative; } .swiper-slide .project-style-one { box-shadow: 0 5px 3px rgb(3 27 78 / 8%); } .project-style-one .content { padding: 20px 30px; position: relative; } .project-style-one ul { margin: 0; padding: 0; list-style: none; } .project-style-one li { display: inline-block; margin-right: 13px; position: relative; z-index: 1; } .project-style-one li::after { position: absolute; right: -11px; top: 11px; content: ""; height: 5px; width: 5px; background: #b3a7a7; z-index: -1; border-radius: 50%; } .project-style-one li:last-child { margin: 0; } .project-style-one li:last-child::after { display: none; } .project-style-one h4 { margin-bottom: 5px; } .project-more-info h2 { font-weight: 600; } .project-more-info .btn { float: right; } @media (min-width: 992px) { .project-more-info h2, .project-more-info p { margin: 0; } } .project-style-one .button { position: absolute; right: 0; top: -24px; display: inline-block; height: 48px; width: 48px; line-height: 45px; background: var(--bg-gradient); border-radius: 50%; text-align: center; border: 3px solid var(--white); color: var(--white); opacity: 0; visibility: hidden; } .project-style-one:hover .button, .single-item:first-child .project-style-one .button { right: 30px; opacity: 1; visibility: visible; } .project-style-one .thumb { overflow: hidden; } .project-style-one .thumb img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .project-style-one:hover .thumb img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .shape-right-top { height: 30%; position: absolute; right: 0; top: -100px; width: 550px; background-size: contain; background-repeat: no-repeat; background-position: right top; } .project-carousel { padding-bottom: 50px; } .swiper-control { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); min-width: 220px; } .project-carousel .swiper-button-prev::before { position: absolute; top: 50%; right: inherit; bottom: inherit; left: 12px; content: ""; height: 2px; width: 50px; z-index: -1; background-color: var(--color-primary); margin-top: -1px; } .project-carousel .swiper-button-prev::after { font-family: "Font Awesome 5 Pro"; content: "\f104"; font-weight: 100; font-size: 30px; position: absolute; left: 8px; color: var(--color-primary); } .project-carousel .swiper-button-next::before { position: absolute; top: 50%; right: 12px; bottom: inherit; left: inherit; content: ""; height: 2px; width: 50px; z-index: -1; background-color: var(--color-primary); margin-top: -1px; } .project-carousel .swiper-button-next::after { font-family: "Font Awesome 5 Pro"; content: "\f105"; font-weight: 100; font-size: 30px; position: absolute; right: 8px; color: var(--color-primary); } .project-carousel .swiper-control .swiper-pagination { bottom: -14px; font-weight: 500; font-family: var(--font-default); font-size: 24px; letter-spacing: -1.6px; color: var(--color-heading); } .project-carousel .swiper-control .swiper-pagination span { font-family: var(--font-default); } .project-carousel .swiper-button-next, .project-carousel .swiper-button-prev { width: 60px; } .project-details-area .top-info { position: relative; margin-top: 50px; } .project-details-area .top-info .left-info { padding-right: 35px; } .project-details-area .top-info p:last-child { margin-bottom: 0; } .project-details-area .main-content h2, .project-details-area .main-content h3, .project-details-area .main-content h4, .project-details-area .main-content h5 { font-weight: 600; margin-bottom: 25px; } .project-details-area .main-content .row img { margin-top: 30px; } .project-details-area .top-info h2 { font-weight: 600; margin-bottom: 20px; } .project-thumb { position: relative; z-index: 1; } .project-thumb img { border-radius: 10px; } .project-info { background: var(--white); position: absolute; right: 50px; bottom: -50px; max-width: 450px; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgb(0 0 0 / 10%); } .project-info .content { padding: 50px; padding-top: 40px; padding-bottom: 45px; } .project-info .title { background: var(--dark); color: var(--white); padding: 15px 50px; font-weight: 500; margin: 0; font-size: 27px; } .project-info .project-basic-info { padding-left: 0; list-style: none; margin: 0; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 15px; } .project-info .project-basic-info li { font-weight: 600; color: var(--color-heading); } .project-info .project-basic-info li span { font-weight: 400; position: relative; display: block; font-family: var(--font-default); color: var(--color-paragraph); } .project-info ul.social { margin-top: 25px; border-top: 1px solid #e7e7e7; padding-top: 25px; } .project-info ul.social li { display: inline-block; margin: 0; margin-right: 5px; margin-top: 5px; } .project-info ul.social li a { display: inline-block; border-radius: 50%; font-size: 14px; font-weight: 100; height: 38px; width: 38px; text-align: center; line-height: 40px; background: var(--color-primary); color: var(--white); } .project-info ul.social li:last-child { margin-right: 0; } .project-info ul.social h4 { margin: 0; display: inline-block; text-transform: capitalize; font-weight: 600; margin-right: 10px; } .project-details-area .check-list { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 30px; } .project-details-area .check-list h4 { font-weight: 600; position: relative; z-index: 1; padding-left: 45px; font-size: 27px; } .project-details-area .check-list h4::after { position: absolute; left: 0; top: 0; content: "\f00c"; font-family: "Font Awesome 5 Pro"; height: 30px; width: 30px; text-align: center; background: #f9f9f9; line-height: 30px; font-size: 12px; border-radius: 5px; border: 1px solid; } .project-details-area .check-list p { margin: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .project-details-area .top-info { margin-top: 100px; } } .choose-us-area { background-size: 350px, contain; background-repeat: no-repeat; background-position: right bottom; } .animate-illustration { position: relative; z-index: 1; } .animate-illustration .sub-item img { position: absolute; } .animate-illustration .sub-item img:first-child { right: 50px; top: -50px; height: 250px; } .animate-illustration .sub-item img:nth-child(2) { right: 0; bottom: 50px; } .animate-illustration .sub-item img:nth-child(3) { top: 0; left: 40px; } .animate-illustration .sub-item img:nth-child(4) { left: 50%; margin-left: -76px; bottom: -20px; } .animate-illustration .sub-item img:nth-child(5) { left: 0; bottom: 40px; } .animate-illustration .sub-item img:nth-child(6) { left: 50%; bottom: 50%; transform: translate(-50%, -50%); margin-bottom: -60px; margin-left: -50px; } .choose-us-style-one ul { display: grid; grid-template-columns: 1fr 1.3fr; margin-top: 35px; grid-column-gap: 30px; } .list-item h5 { margin-bottom: 5px; font-weight: 600; font-size: 20px; } .list-item .item { margin-top: 17px; position: relative; z-index: 1; padding-left: 35px; } .list-item .item:first-child { margin-top: 0; } .list-item .item::after { position: absolute; left: 0; top: 2px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; height: 22px; width: 22px; background: var(--bg-gradient); text-align: center; line-height: 22px; color: var(--white); border-radius: 50%; font-size: 11px; font-weight: 500; } .progressbar .circle, .progressbar-hard .circle { display: inline-block; position: relative; } .progressbar .circle strong, .progressbar-hard .circle strong { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 600; color: var(--color-heading); font-size: 25px; margin-top: -2px; margin-left: 2px; } .choose-us-style-one .progressbar { text-align: center; display: inline-block; background: var(--white); padding: 30px; border-radius: 5px; box-shadow: 0 25px 70px rgb(0 0 0 / 7%); } .choose-us-style-one .progressbar h4 { margin: 0; font-weight: 600; margin-top: 3px; } .choose-us-style-three .thumb { text-align: center; position: relative; z-index: 1; margin-bottom: 30px; } .experience-box { position: absolute; right: -50px; bottom: -30px; height: 300px; width: 300px; text-align: center; background: var(--bg-gradient); border-radius: 50%; box-shadow: 0px 4px 60px 30px rgba(0, 0, 0, 0.05); } .choose-us-style-three .thumb .thumb-inner img { width: 70%; } .choose-us-style-three .thumb .thumb-inner { margin: auto; border-radius: 0 0 480px 485px; overflow: hidden; text-align: center; } .choose-us-style-three .thumb::after { position: absolute; left: 50%; bottom: 0; content: ""; height: 600px; width: 600px; background: #e9edff; z-index: -1; transform: translateX(-50%); border-radius: 50%; } .shape-combo { position: absolute; left: 0; top: -50px; height: 100%; width: 100%; z-index: -1; } .shape-combo img { position: absolute; height: 200px; right: 50px; top: 200px; } .choose-us-style-three .thumb .shape img { position: absolute; height: 150px; left: -25px; top: 140px; z-index: 1; transform: rotate(20deg); } .circle-progress-items { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; margin-top: 40px; } .circle-progress-item h4 { margin: 0; font-weight: 600; margin-top: 10px; } .circle-progress-item { border-right: 1px solid #e7e7e7e7; } .circle-progress-item:last-child { border: none; } .experience-box strong { display: block; font-size: 100px; font-weight: 600; line-height: 1; } .experience-box h2 { font-size: 22px; font-weight: 400; margin: 0; color: var(--white); } .experience-box .item-inner { position: relative; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .choose-us-style-three-area .align-center { align-items: center; } .choose-us-style-three .thumb::after { height: 500px; width: 500px; } .choose-us-style-three .thumb .thumb-inner { border-radius: 0 0 422px 412px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .choose-us-style-three-area { padding-top: 50px; } .choose-us-style-three .thumb { margin-bottom: 70px; } .choose-us-style-three .thumb .thumb-inner img { max-width: 400px; } .experience-box { right: 0; } } @media only screen and (max-width: 767px) { .choose-us-style-three .thumb { display: none; } .shape-combo { display: none; } .circle-progress-items { display: block; } .circle-progress-item { border: none; margin-top: 40px; } } .process-area { position: relative; z-index: 1; } .process-area::after { position: absolute; left: 5%; top: 120px; content: ""; height: 100px; width: 100px; background: var(--white); clip-path: polygon( 45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975% ); opacity: 0.1; } .process-area::before { position: absolute; left: 12%; top: 220px; content: ""; height: 50px; width: 50px; background: var(--white); opacity: 0.1; border-radius: 50%; } @media (max-width: 1250px) { .process-area::before { left: 14%; } } .center-sahpe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: -1; } .process-area .center-sahpe { top: 90px; } .process-style-one .icon { display: inline-block; height: 150px; width: 150px; text-align: center; line-height: 150px; background: var(--white); border-radius: 50%; color: var(--color-primary); font-size: 60px; margin-bottom: 30px; } .process-style-one .icon img { height: 60px; } .process-style-one i::before { line-height: inherit; } .process-style-one h4 { font-weight: 600; text-transform: capitalize; margin: 0; } .process-style-one .icon { display: inline-block; position: relative; z-index: 1; } .process-style-one .icon span { position: absolute; bottom: 15px; right: -5px; background: var(--color-primary); height: 45px; width: 45px; line-height: 43px; border-radius: 50%; border: 2px solid var(--white); font-weight: 800; font-size: 16px; } .process-style-one:nth-child(2n) .icon span { bottom: auto; top: 15px; right: -15px; } .process-style-two-area { position: relative; z-index: 1; background-size: contain; background-repeat: no-repeat; } .process-style-two-thumb { margin-top: -45px; position: relative; z-index: 1; } .process-style-two-thumb img { width: 100%; } .process-style-two-list { position: relative; z-index: 1; text-align: center; height: 500px; width: 500px; margin-top: 35px; } .process-style-two-list .border-shape { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; border: 2px dashed #dddddd; border-radius: 50%; animation: spinnerReverse 40s infinite linear; } .process-style-two-list li { height: 150px; width: 150px; text-align: center; background: var(--white); border-radius: 50%; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); top: -80px; z-index: 1; } .process-style-two-list h4 { margin: 0; font-weight: 600; text-transform: capitalize; } .process-style-two-list::after { position: absolute; left: 10%; top: 10%; content: ""; height: 80%; width: 80%; border: 2px dashed #eeeeee; border-radius: 50%; animation: spinner 30s infinite linear; } .process-style-two-list::before { position: absolute; left: 20%; top: 20%; content: ""; height: 60%; width: 60%; background: var(--color-primary); border-radius: 50%; z-index: -1; } .process-style-two-list li:nth-child(2) { right: -40px; bottom: 35px; left: auto; transform: inherit; top: auto; } .process-style-two-list li:nth-child(3) { transform: inherit; top: auto; bottom: 35px; right: auto; left: -40px; } .process-style-two-list li:nth-child(4) { transform: translate(-50%, -50%); left: 50%; top: 50%; right: auto; background: var(--white); height: 180px; width: 180px; } .process-style-two-list li .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .process-style-two-list li .content span { font-weight: 900; font-size: 40px; color: var(--color-primary); text-shadow: -3px 3px 0px #eceefe; } .process-style-two-list i { font-size: 50px; color: var(--color-heading); margin-bottom: 12px; display: inline-block; } .proces-style-two-list h4 { font-weight: 600; position: relative; z-index: 1; } .proces-style-two-list h4::after { position: absolute; left: -55px; top: 15px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-size: 17px; font-weight: 100; height: 35px; width: 35px; line-height: 37px; background: var(--color-primary); text-align: center; border-radius: 50%; margin-top: -20px; color: var(--white); } .process-list-box { border-left: 1px solid #dddddd; padding-left: 38px; margin-left: 17px; } .proces-style-two-list { margin-bottom: 20px; } .proces-style-two-list:last-child { margin-bottom: 0; } .proces-style-two-list p { margin: 0; } .process-style-two .heading { margin-bottom: 50px; } .team-style-one-area { background-size: 100%, contain; background-repeat: no-repeat; background-position: bottom; } .team-style-one-item .thumb { position: relative; z-index: 1; } .team-style-one-item .thumb img { border-radius: 50%; padding: 5px; } .team-style-one-item h4 { margin-bottom: 3px; } .team-grid { margin-top: 60px; } .team-grid:last-child { margin-top: 0; } .team-style-one-item { margin-bottom: 30px; text-align: center; padding: 40px 50px; background: var(--white); border-radius: 15px; box-shadow: 0 20px 50px rgb(0 0 0 / 10%); overflow: hidden; position: relative; z-index: 1; } .team-grid .team-style-one-item:first-child { margin-top: 0; } .team-style-one-item .thumb::after { position: absolute; right: -4px; bottom: -5px; content: ""; height: 105%; width: 105%; background: var(--bg-gradient); z-index: -1; border-radius: 48% 52% 41% 59% / 52% 49% 51% 48%; display: none; } .team-style-one-item .thumb::before { position: absolute; left: -5px; top: -5px; content: ""; height: 101%; width: 102%; border: 1px solid #cccccc; border-radius: 50%; z-index: -1; transition: all 0.35s ease-in-out; } .team-style-one-item:hover .thumb::before { left: 0; top: 3px; } .team-style-one-item .info { margin-top: 20px; } .team-style-one-item .thumb .social li { display: inline-block; margin: 0 1px; } .team-style-one-item .thumb .social li a { display: inline-block; height: 40px; width: 40px; background: var(--color-primary); line-height: 45px; border-radius: 50%; color: var(--white); position: relative; bottom: -30px; opacity: 0; visibility: hidden; } i::before { line-height: inherit; } .team-style-one-item .social { margin: 0; padding: 0; list-style: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; } .team-style-one-item .thumb .social li:last-child a { transition: all 0.55s ease-in-out; } .team-style-one-item:hover .thumb .social li a { bottom: 0; opacity: 1; visibility: visible; } .team-style-one-item .social li.facebook a { background: #3B5998; } .team-style-one-item .social li.twitter a { background: #1DA1F2; } @media only screen and (max-width: 767px) { .team-style-one:first-child .team-style-one-item { margin-top: 0; } } .team-single-area .team-content-top { bottom: -50px; margin-top: -50px; position: relative; z-index: 1; } .team-single-area .team-content-top .right-info { padding-left: 35px; padding-right: 50px; margin-bottom: 50px; } .team-single-area .team-content-top .right-info h2 { font-weight: 600; } .team-single-area .team-content-top .right-info span { display: block; text-transform: uppercase; color: var(--color-primary); font-weight: 600; margin-bottom: 25px; } .team-single-area .right-info ul { margin-top: 25px; border-top: 1px solid #e7e7e7; padding-top: 17px; } .team-single-area .right-info ul li { margin-top: 10px; color: var(--color-heading); } .team-single-area .right-info ul li strong { font-weight: 600; } .team-single-area .right-info ul li a { font-weight: 400; } .team-single-area .right-info ul li a:hover { color: var(--color-primary); } .team-single-area .right-info .social { display: flex; margin-top: 25px; font-weight: 600; align-items: center; } .team-single-area .right-info .social h4 { font-weight: 600; margin-bottom: 0; margin-right: 25px; } .team-single-area .right-info .social ul { margin: 0; padding: 0; border: none; } .team-single-area .right-info .social .share-link { position: relative; z-index: 1; margin-left: 15px; padding-right: 20px; } .team-single-area .right-info .social .share-link > i { display: inline-block; height: 45px; background: var(--white); box-shadow: 0 0 10px #cccccc; line-height: 45px; width: 45px; text-align: center; border-radius: 50%; cursor: pointer; color: var(--color-primary); } .team-single-area .right-info .social ul { display: flex; list-style-type: none; grid-gap: 10px; padding: 0; margin: 0; position: absolute; left: 0; top: 0; z-index: 0; opacity: 0; pointer-events: none; transition: all 0.3s ease-in-out 0s; } .team-single-area .right-info .social .share-link:hover ul { left: 58px; opacity: 1; pointer-events: auto; } .team-single-area .right-info .social ul li { display: inline-block; margin: 0; } .team-single-area .right-info .social ul li a { display: inline-block; height: 45px; width: 45px; line-height: 47px; background: #f1f1f1; text-align: center; border-radius: 50%; } .team-single-area .bottom-info h2 { font-weight: 600; margin-bottom: 25px; } .team-single-area .bottom-info p:last-child { margin-bottom: 0; } .team-single-area .bottom-info .skill-items { padding-left: 35px; } .skill-items .progress-box { margin-bottom: 20px; } .team-single-area .team-content-top img { border-radius: 30px; } .skill-items .progress-box:last-child { margin-bottom: 0; } .skill-items .progress-box h5 { font-weight: 500; margin-bottom: 0; text-align: left; position: relative; z-index: 1; font-size: 18px; } .skill-items .progress-box h5 span { position: absolute; font-size: 50px; line-height: 1; top: -21px; left: 0; z-index: -1; opacity: 0.05; font-weight: 600; } .skill-items .skill-items { margin-top: 40px; } .skill-items .progress-box .progress { background: transparent; border-bottom: none; box-shadow: inherit; border-radius: inherit; overflow: inherit; } .skill-items .progress-box .progress .progress-bar { height: 9px; border-radius: 30px; background: var(--color-primary); top: 12px; position: relative; overflow: inherit; } .skill-items .progress-box .progress .progress-bar span { position: absolute; right: 0; top: -36px; display: block; font-size: 18px; color: #ffffff; font-weight: 500; } .seo-expert-item { position: absolute; } .seo-expert-item img { width: 120px; height: 120px; border-radius: 50%; margin-bottom: 10px; border: 1px solid #e7e7e7; padding: 3px; background: var(--white); } .seo-expert-item .rating { display: flex; align-items: center; justify-content: center; } .seo-expert-item .rating h5 { margin: 0; line-height: 1; font-weight: 600; margin-right: 15px; } .seo-expert-item h4 { font-weight: 600; margin-bottom: 3px; } .seo-expert-item span { display: block; } .seo-expert-item .rating i { font-size: 14px; color: #FFCA40; } .seo-expert-items { position: relative; height: 400px; width: 400px; margin: auto; background: #e5e0ec; border-radius: 50%; left: 55px; margin-top: 120px; margin-bottom: 150px; } .seo-expert-items::after { position: absolute; left: -15%; top: -15%; content: ""; height: 130%; width: 130%; background: #efecf5; z-index: -1; border-radius: 50%; } .seo-expert-items::before { position: absolute; left: -30%; top: -30%; content: ""; height: 160%; width: 160%; background: #f9f9f9; z-index: -1; border-radius: 50%; } .seo-expert-item:first-child { left: 50%; top: -85px; margin-left: -50px; } .seo-expert-item:nth-child(2) { left: -70px; top: 90px; } .seo-expert-item:nth-child(3) { bottom: -150px; left: 50%; margin-left: -50px; } .seo-expert-item .content { background: var(--white); padding: 15px 30px; padding-bottom: 10px; display: inline-block; border-radius: 10px; position: relative; z-index: 1; border: 1px solid #faf0f0; } .seo-expert-item .content::after { position: absolute; content: ""; top: -18px; left: 19px; border-left: solid var(--white); border-top: solid transparent; border-bottom: solid transparent; border-width: 13px; -webkit-filter: drop-shadow(3px 0 0 rgba(3,27,78,.03)); filter: drop-shadow(3px 0 0 rgba(3,27,78,.03)); transition: all .4s ease; transform: rotate(-90deg); } .expert-fun-fact .fun-fact { display: inline-block; margin-right: 50px; margin-top: 40px; } .expert-fun-fact .fun-fact:last-child { margin-right: 0; } .expert-fun-fact .fun-fact .counter { justify-content: inherit; } .shape-left-bottom-less-opacity { position: absolute; left: -100px; top: 80px; z-index: -1; } .shape-left-bottom-less-opacity img { height: 200px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .seo-expert-area .align-center { align-items: center; } .shape-left-bottom-less-opacity { top: 50px; left: 0; } .shape-left-bottom-less-opacity img { height: 100px; } } @media only screen and (max-width: 767px) { .shape-left-bottom-less-opacity { display: none; } } .seo-score-area .seo-score { padding: 80px 30px; border-radius: 10px; background: var(--white); box-shadow: 0 5px 30px 0 rgb(214 215 216 / 57%); position: relative; z-index: 1; } .rocket-animation { position: absolute; right: 50px; top: -50px; animation: UpDown 2s linear infinite; } .seo-score form { border: 1px solid #e7e7e7; border-radius: 30px; position: relative; z-index: 1; padding: 0 20px; background: var(--white); } .seo-score form .col-lg-6 { padding: 0; } .seo-score form input, .seo-score form input:focus { border: none; border-radius: 30px; box-shadow: inherit; outline: inherit; min-height: 60px; padding: 15px 30px; } .seo-score form button { top: 5px; position: absolute; right: 5px; } .seo-score form .input-group.stylish-input-group { border-radius: 30px; border: none; } .seo-score form button { position: absolute; top: 5px; right: 5px; padding: 11px 50px; border-radius: 30px; color: #ffffff; font-weight: 700; border: none; background: transparent; z-index: 1; } .seo-score button::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 100%; z-index: -1; background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-primary) ); background-size: 220% 150%; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; border-radius: 30px; } .seo-score button:hover::after { background-position: -70% 0; } .rocket-animation img { height: 300px; } .seo-score form input[type="url"] { border-right: 1px solid #e7e7e7; border-top-right-radius: inherit; border-bottom-right-radius: inherit; } .seo-score h2 { font-weight: 600; font-size: 50px; line-height: 1.1; } .seo-score h2 strong { display: inline-block; font-weight: 600; color: var(--color-primary); } .seo-score h2 .text-border-shape { position: absolute; left: 0; bottom: 0; height: 10px; width: 100%; background: #d1d8f9; z-index: -1; } .half-bg-gray { position: relative; z-index: 1; } .half-bg-gray::after { position: absolute; left: 0; bottom: 0; content: ""; height: 120px; width: 100%; background: var(--bg-gray); } @media only screen and (min-width: 768px) and (max-width: 991px) { .shape-left-bottom-less-opacity { left: 50px; } .seo-expert-area { text-align: center; } .shape-left-bottom-less-opacity img { height: 100px; } .seo-expert-items { left: 0; margin-top: 180px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .rocket-animation img { height: 200px; } .rocket-animation { right: 30px; } } @media only screen and (max-width: 767px) { .rocket-animation { display: none; } .seo-score form { border: none; } .seo-score form input { border: 1px solid #e7e7e7; border-radius: 30px !important; margin-bottom: 15px; } .seo-score form button { position: inherit; width: 100%; min-height: 60px; } .seo-score form .col-lg-6 { padding: 0 15px; } .seo-expert-items { height: 100%; width: 100%; background: transparent; position: inherit; left: 0; margin: 0; margin-top: 50px; } .seo-expert-items::before, .seo-expert-items::after { display: none; } .seo-expert-item { position: inherit; left: 0 !important; right: 0 !important; top: auto !important; bottom: auto; transform: inherit; margin: 0 !important; text-align: center; margin-top: 50px !important; } .seo-expert-area { text-align: center; } .expert-fun-fact .fun-fact { margin-left: 20px; margin-right: 20px; } .expert-fun-fact .fun-fact .counter { justify-content: center; } .seo-expert-item .content::after { left: 50%; margin-left: -10px; } .seo-expert-item img { margin-bottom: 20px; width: 300px; height: auto; } .seo-expert-item .content { width: 100%; padding: 25px 30px; padding-top: 30px; } } .faq-area { position: relative; z-index: 1; } .faq-sahpe img { position: absolute; left: 0; bottom: 0; z-index: -1; } .faq-sahpe img:first-child { left: auto; right: 20px; bottom: -50px; animation: fadeRightLeft 5s ease-out infinite; } .faq-sahpe img:nth-child(2) { max-width: 200px; } .faq-style-one button.accordion-button { color: var(--color-heading); border: none; box-shadow: inherit; font-size: 18px; font-weight: 600; padding: 20px 0; background: transparent; border-radius: inherit !important; padding-right: 60px !important; position: relative; border-bottom: 2px solid !important; } .faq-style-one button.accordion-button::after { background: transparent; content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: 100; font-size: 25px; position: absolute; top: 20px; right: 25px; } .faq-style-one button.accordion-button:not(.collapsed)::after { -webkit-transform: inherit; transform: inherit; content: "\f106"; } .faq-style-one button.accordion-button:focus { background: transparent; color: var(--color-heading); border: none; -webkit-box-shadow: inherit; box-shadow: inherit; padding-left: 0; font-weight: 600; } .faq-style-one .accordion-item { background: transparent; border: none; } .faq-style-one .accordion-item h2 { margin: 0; } .faq-style-one .accordion-body { padding: 0; position: relative; z-index: 1; padding-top: 15px; padding-bottom: 10px; } .faq-style-one .accordion-body::before { position: absolute; left: 30px; right: 30px; content: ""; height: 2px; display: block !important; top: 0; } .faq-style-one .accordion-body p { margin: 0; } .faq-style-one button.accordion-button strong { display: inline-block; height: 35px; width: 35px; line-height: 34px; text-align: center; border-radius: 50%; margin-right: 12px; border: 1px solid #e7e7e7; } .quick-contact-frame { z-index: 1; padding: 50px; border-radius: 10px; position: relative; overflow: hidden; } .quick-contact-frame img { position: absolute; z-index: -1; left: -10px; top: -15px; } .quick-contact-frame h2 { font-weight: 600; } .quick-contact-frame h4 { font-weight: 600; margin-bottom: 30px; display: inline-block; } .quick-contact-frame p { margin: 0; padding: 0 15%; opacity: 0.9; } .faq-style-one { margin-top: -8px; } .testimonials-area, .testimonial-style-two-area { position: relative; } .rating-provider { display: flex; align-items: center; margin-top: 30px; } .rating-provider .thumb { padding-left: 20px; margin-right: 20px; } .rating-provider img { height: 55px; width: 55px; border-radius: 50%; box-shadow: 0px 2px 12px 0px #e7e7e7; float: left; margin-left: -22px; border: 3px solid #ffffff; } .rating-provider .ratings i { display: inline-block; font-size: 13px; letter-spacing: 2px; color: #FFCA40; } .rating-icon { display: flex; align-items: center; } .rating-icon h4 { margin: 0; font-weight: 600; margin-left: 5px; } .rating-provider span { display: block; margin-top: 3px; } .testimonial-style-one-carousel { padding: 15px; margin: -15px; padding-top: 20px; } .testimonial-style-one-item { padding: 50px 37px; border-radius: 12px; border: 1px solid #e7e7e7; position: relative; z-index: 1; background: var(--white); } .testimonial-style-one-item .provider { display: flex; align-items: center; margin-bottom: 20px; } .testimonial-style-one-item .provider .info { position: relative; top: 4px; } .testimonial-style-one-item .provider img { height: 60px; width: 60px; min-width: 60px; margin-right: 20px; border-radius: 50%; } .testimonial-style-one-item .provider h4 { font-weight: 600; margin-bottom: 5px; } .testimonial-style-one-item .quote-icon img { height: 40px; position: absolute; z-index: -1; top: -20px; right: 37px; } .testimonial-style-one-item p { font-size: 18px; line-height: 1.7; margin-bottom: 0; font-weight: 400; } .testimonial-style-one-item .provider span strong { color: var(--color-primary); } .testimonial-style-one-item .shape { position: absolute; height: 50%; width: 50%; z-index: -1; top: 0; left: 0; opacity: 0.15; } .testimonial-style-one { position: relative; z-index: 1; } .shape-right-bottom { position: absolute; bottom: -40px; right: -30px; z-index: -1; opacity: 0.7; } .testimonials-area .shape-right-bottom, .testimonial-style-two-area .shape-right-bottom { animation: UpDown 4s linear infinite; } .shape-right-bottom img { height: 100px; } .shape-animation { position: absolute; left: 50px; top: 80px; z-index: -1; animation: zoomUpDown 3s linear infinite; } .shape-animation img { max-width: 60px; } .testimonial-style-two { position: relative; z-index: 1; } .testimonial-style-two-item { padding: 50px 30px; background: var(--white); border-radius: 5px; } .testimonial-style-two-item p { font-size: 18px; line-height: 1.7; } .testimonial-style-two-item .provider { display: flex; align-items: center; margin-top: 25px; } .testimonial-style-two-item .provider img { height: 70px; width: 70px; min-width: 70px; margin-right: 21px; border-radius: 50%; } .testimonial-style-two-item .provider h4 { margin-bottom: 3px; font-weight: 600; } .testimonial-style-two .rating-provider { margin-left: 0; } .testimonial-style-two .rating-provider .ratings { margin: 0; } .testimonial-style-two-item .provider .thumb { position: relative; z-index: 1; } .testimonial-style-two-item .provider .thumb::after { position: absolute; right: 12px; top: 10px; content: ""; height: 30px; width: 30px; background-image: url(../img/shape/quote.png); background-color: var(--color-primary); border-radius: 50%; background-repeat: no-repeat; background-position: center; } .testimonial-style-two-item .provider strong { font-weight: 600; color: var(--color-primary); } .testimonial-style-two-area .shape-animation { z-index: inherit; } .pricing-style-one-item { padding: 50px; position: relative; z-index: 1; background: var(--white); border-radius: 10px; box-shadow: 0 5px 30px 0 rgba(214, 215, 216, 0.57); border: 2px solid transparent; } .pricing-style-one i::before { line-height: inherit; } .pricing-style-one.active .pricing-style-one-item { border: 2px solid var(--color-primary); margin-top: 21px; padding-top: 70px; } .pricing-style-one-item > img { position: absolute; right: 50px; height: 100px; } .pricing-style-one-item > i { display: inline-block; position: absolute; z-index: 1; right: 50px; height: 80px; width: 80px; text-align: center; line-height: 90px; font-size: 40px; color: var(--white); font-weight: 100; } .pricing-style-one-item > i.fa-crown::before { position: relative; top: -6px; } .pricing-style-one-item > i::after { position: absolute; left: -18px; top: 0; content: ""; height: 100px; width: 100px; background: url(../img/shape/29.png); background-size: contain; background-repeat: no-repeat; z-index: -1; } .pricing-style-one-item .badge { position: absolute; top: -23px; background: var(--color-primary); color: var(--white); display: inline-block; margin: 0; padding: 17px 20px; font-size: 16px; font-weight: 600; text-transform: capitalize; border-radius: 5px; border-top-right-radius: 0; } .pricing-style-one-item .badge::after { position: absolute; right: -15px; top: 0; content: ""; border-right: 15px solid transparent; border-bottom: 23px solid var(--color-primary); z-index: -1; opacity: 0.8; } .pricing-style-one-item h4 { font-weight: 600; margin-bottom: 10px; font-size: 24px; } .pricing-style-one-item span { display: block; margin-bottom: 10px; } .pricing-style-one-item h2 { font-size: 60px; font-weight: 700; } .pricing-style-one-item h2 sub { font-size: 16px; left: -10px; font-weight: 400; } .pricing-style-one-item .price { border-bottom: 1px dashed #dddddd; margin-bottom: 25px; } .pricing-style-one-item h2 sup { top: -18px; font-size: 30px; } .pricing-style-one-item li { line-height: 1.5; color: var(--color-heading); font-size: 18px; font-weight: 400; margin-top: 10px; display: flex; } .pricing-style-one-item li i { font-weight: 400; margin-right: 8px; color: #36CC72; font-size: 15px; width: 15px; position: relative; top: 5px; } .pricing-style-one-item li i.fa-times { color: red; } .curve-bottom { position: absolute; left: 0; bottom: 0; } .pricing-area { background-size: contain; background-repeat: no-repeat; background-position: center; } .pricing-style-three-box { border: 1px solid #e7e7e7; overflow: hidden; border-radius: 8px; } .pricing-style-three { padding: 40px 50px; position: relative; overflow: hidden; background: #fbfbfb; } .pricing-style-three .row > div { position: relative; z-index: 1; padding-left: 30px; } .pricing-style-three .row > div:first-child { padding-left: 0; display: flex; justify-content: center; } .pricing-style-three .row > div::after { position: absolute; right: 0; top: -200px; content: ""; height: 500px; width: 1px; background: #e7e7e7; } .pricing-style-three .row > div:last-child::after { display: none; } .pricing-style-three:nth-child(2) .row > div::after { background: rgba(255, 255, 255, 0.2); } .pricing-style-three:nth-child(2n) .btn::after { background: var(--white); } .pricing-style-three:nth-child(2n) .btn { color: var(--color-heading); } .pricing-style-three .button { display: flex; justify-content: center; } .pricing-style-three span { display: block; margin-bottom: 10px; } .pricing-style-three h2 { font-size: 50px; font-weight: 700; } .pricing-style-three h2 sub { font-size: 15px; left: -10px; font-weight: 400; } .pricing-style-three h2 sup { top: -18px; font-size: 30px; } .pricing-style-three li { line-height: 35px; color: var(--color-heading); font-size: 16px; font-weight: 400; } .pricing-style-three li i { font-weight: 400; margin-right: 5px; color: #36CC72; font-size: 15px; } .pricing-style-three li i.fa-times { color: red; } .pricing-style-three img { height: 100px; } .pricing-style-three .title h2 { font-size: 24px; margin: 0; } .pricing-style-three .title span { display: inline-block; background: var(--bg-gradient); color: var(--white); font-size: 16px; padding: 0px 20px; margin-bottom: 15px; position: absolute; left: 0; transform: rotate(-90deg) translateY(25%); opacity: 1; zoom: 1.009; will-change: transform; top: 38px; } .pricing-style-three:nth-child(2n), .pricing-style-three.active { background: var(--bg-gradient); } .pricing-style-three:nth-child(2n) h2, .pricing-style-three.active h2 { color: var(--white); } .pricing-style-three:nth-child(2n) li, .pricing-style-three.active li { color: var(--white); opacity: 0.9; } .pricing-style-three:nth-child(2n) li i, .pricing-style-three.active li i { color: var(--white); } .pricing-style-three.active .btn.btn-dark, .pricing-style-three:nth-child(2n) .btn.btn-dark { color: var(--color-primary); background: var(--white); border: none; } .pricing-style-three.active .btn.btn-dark::after, .pricing-style-three:nth-child(2n) .btn.btn-dark::after { background-color: var(--white); } .pricing-style-three.active .btn.btn-dark:hover::after, .pricing-style-three:nth-child(2n) .btn.btn-dark:hover::after { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-three img { max-width: 100px; } .pricing-style-three .align-center { align-items: center; } .pricing-style-three .title h2 { font-size: 24px; } .pricing-style-three .btn { padding: 13px 34px; } .pricing-style-three h2 sub { font-size: 14px; display: block; } .pricing-style-three h2 sup { font-size: 22px; } .pricing-style-three .price { text-align: center; padding-left: 15px !important; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-one-item .btn { padding: 16px 42px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pricing-style-three { text-align: center; margin-top: 30px; border: 1px solid #e7e7e7; } .pricing-style-three .row > div::after { display: none; } .pricing-style-three img { max-width: 250px; margin-bottom: 30px; } .pricing-style-three .title h2 { margin-bottom: 30px; } .pricing-style-three .details ul { display: inline-block; text-align: left; margin-bottom: 20px; } .pricing-style-three .button { text-align: center !important; margin-top: 15px; } .pricing-style-three:first-child { margin-top: 0; } .pricing-style-three-box { border: none; } .pricing-style-three .title span { zoom: normal; } } @media only screen and (max-width: 767px) { .pricing-style-three { text-align: center; margin-top: 30px; border: 1px solid #e7e7e7; } .pricing-style-three .row > div::after { display: none; } .pricing-style-three img { max-width: 250px; margin-bottom: 30px; } .pricing-style-three .title h2 { margin-bottom: 30px; } .pricing-style-three .details ul { display: inline-block; text-align: left; margin-bottom: 20px; } .pricing-style-three .button { text-align: center !important; margin-top: 15px; } .pricing-style-three:first-child { margin-top: 0; } .pricing-style-three-box { border: none; } .pricing-style-three .title span { transform: inherit; left: 50%; top: 0; transform: translateX(-50%); border-radius: 0 0 10px 10px; } .pricing-style-three .row > div { padding-left: 12px; } } .seo-heading { position: relative; z-index: 1; } .seo-heading::after { position: absolute; right: 0; top: -200%; content: ""; height: 600%; width: 300%; background: var(--dark); z-index: -1; } .why-seo-style-one i { display: inline-block; font-size: 60px; margin-bottom: 30px; } .why-seo-style-one img { height: 80px; margin-bottom: 30px; } .why-seo-style-one h4 { font-weight: 600; } .why-seo-style-one p { margin: 0; opacity: 0.9; } .shape-right-bottom-last { position: absolute; right: -200px; top: 120px; height: 100%; background-size: contain; background-position: bottom right; background-repeat: no-repeat; } .shape-right-bottom-last img { height: 100%; } .seo-heading .sub-title { color: var(--color-primary); } .seo-heading h2 { font-weight: 600; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-right: 35px; padding-bottom: 29px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .seo-heading::after { display: none; } .seo-heading .sub-title { color: var(--white); opacity: 0.8; } .seo-heading h2 { margin: 0; } .seo-carousel { padding-top: 35px; } } @media only screen and (max-width: 767px) { .why-seo-area { text-align: center; } .seo-heading::after { display: none; } .why-seo-box .sub-title { color: var(--white); opacity: 0.9; } .seo-carousel { padding-top: 30px; } .seo-heading h2 { margin-right: 0; } } .blog-area { background-repeat: no-repeat; background-position: right top; } .blog-area.blog-grid .thumb-less .item { box-shadow: none; border: 1px solid #e7e7e7; position: relative; z-index: 1; background-size: cover; background-position: center; transition: all 0.35s ease-in-out; border-radius: inherit; overflow: hidden; border-radius: 7px; } .blog-area.blog-grid .thumb-less .item:hover { background-position: right; } .blog-area.blog-grid .thumb-less .item .tags { margin-bottom: 20px; } .blog-area.blog-grid .thumb-less .btn-simple { margin-top: 20px; } .blog-area.blog-grid .thumb-less .btn-simple:hover { color: var(--white); } .blog-area.blog-grid .thumb-less .button { border-top: 1px solid rgba(255, 255, 255, 0.4); margin-top: 25px; } .blog-area.blog-grid .thumb-less .item::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--dark-secondary); z-index: -1; opacity: 0.65; } .blog-area.blog-grid .thumb-less .item p { opacity: 0.9; transition: all 0.325s ease-in-out; transform: translateX(30px); opacity: 0; visibility: hidden; } .blog-area.blog-grid .thumb-less .item:hover p { visibility: visible; opacity: 0.9; transform: translateX(0); } .blog-area.blog-grid .thumb-less .author-meta { border-color: rgba(255, 255, 255, 0.4); padding-top: 22px; margin-top: 100px; } a.button-regular { margin-top: 20px; display: flex; align-items: center; color: var(--color-paragraph); font-size: 18px; font-weight: 500; } a.button-regular i { margin-left: 5px; font-size: 13px; position: relative; top: 2px; } a.button-regular:hover { color: var(--color-primary); } .contact-style-one-info li a { display: flex; margin-top: 10px; align-items: center; } .contact-style-one-info li i { display: inline-block; height: 60px; width: 60px; text-align: center; line-height: 60px; background: linear-gradient(180deg, #316ff642 0%, #4787FA00 100%); border-radius: 5px; color: #316FF6; font-size: 25px; margin-right: 20px; } .contact-style-one-info li i svg { fill: #316FF6; width: 25px; } .contact-style-one-info li:nth-child(2) i { /* background: linear-gradient(180deg, #e1306c47 0%, #4787FA00 100%); */ /* color: #E1306C; */ } .contact-style-one-info li:nth-child(3) i { /* background: linear-gradient(180deg, #003ac347 0%, #4787FA00 100%); */ /* color: #003ac3; */ } .contact-style-one-info li p { margin: 0; } .contact-style-one-info li h4 { font-weight: 600; margin-bottom: 5px; font-size: 20px; } .contact-style-one-info li a { font-weight: 400; } .contact-style-one-info h2 { font-size: 36px; font-weight: 600; margin-bottom: 15px; line-height: 1; } .contact-style-one-info ul { margin: 0; padding: 0; list-style: none; margin-top: 50px; } .contact-form-style-one { box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); padding: 60px 80px; border-radius: 10px; position: relative; background: var(--white); } .contact-form-style-one .illustration { position: absolute; left: -130px; bottom: -60px; z-index: -1; } .contact-form-style-one .sub-heading { margin-bottom: 15px; } .contact-form-style-one .heading { margin-bottom: 30px; font-size: 36px; } .contact-form-style-one input, .contact-form-style-one textarea { margin-bottom: 15px; padding: 15px 20px; border: none; background: #f8f8f8; } .contact-form-style-one textarea { min-height: 180px; } .contact-form-style-one button { display: inline-block; font-weight: 500; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 3px; -webkit-box-shadow: inherit; box-shadow: inherit; font-size: 17px; letter-spacing: 0; position: relative; z-index: 1; color: var(--white); border: none; background: var(--color-primary); padding: 16px 52px; } .contact-form-style-one button::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .contact-form-style-one button:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } img.loader { margin-left: 8px; } .maps-area iframe { min-height: 550px; margin-bottom: -10px; left: 0; top: 0; height: 100%; width: 100%; } .error-box h1 { font-size: 200px; font-weight: 900; line-height: 150px; } .error-box h2 { font-weight: 600; margin-bottom: 25px; } footer { overflow: hidden; } footer .f-items { padding-top: 70px; padding-bottom: 70px; } .footer-item { /* margin-top: 50px; */ } .footer-item .widget-title { font-weight: 600; margin-bottom: 30px; font-size: 22px; } .footer-item .logo { height: 130px; margin-bottom: 30px; } .quick-contact { margin-top: 25px; } .quick-contact li { margin-top: 10px; position: relative; } .quick-contact li::after { position: absolute; right: -18px; top: 10px; content: ""; height: 6px; width: 6px; background: #e7e7e7; z-index: -1; border-radius: 50%; } .quick-contact li:last-child::after { display: none; } .quick-contact li i { font-weight: 100; margin-right: 3px; } .quick-contact li:last-child { margin-right: 0; } .quick-contact li a { font-weight: 400; } .bg-dark .quick-contact li a, .bg-theme .quick-contact li a, .bg-gradient .quick-contact li a, .shadow .quick-contact li a { color: #cccccc; } .bg-dark .quick-contact li a:hover, .bg-theme .quick-contact li a:hover, .bg-gradient .quick-contact li a:hover, .shadow .quick-contact li a:hover { color: var(--white); } .footer-bottom li { display: inline-block; } .footer-bottom li a { color: var(--color-paragraph); } .footer-bottom li a:hover { color: var(--color-primary); } .bg-dark .footer-bottom li a, .bg-theme .footer-bottom li a, .bg-gradient .footer-bottom li a, .shadow .footer-bottom li a { color: #cccccc; } .bg-dark .footer-bottom li a:hover, .bg-theme .footer-bottom li a:hover, .bg-gradient .footer-bottom li a:hover, .shadow .footer-bottom li a:hover { color: var(--white); } .footer-bottom a { font-weight: 500; } .footer-bottom .text-end li { margin-left: 20px; } .footer-bottom p { margin: 0; font-size: 20px; } .bg-dark .footer-bottom p, .bg-theme .footer-bottom p, .bg-gradient .footer-bottom p, .shadow .footer-bottom p { color: #cccccc; } .footer-bottom { padding: 0px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 1; overflow: hidden; background: var(--dark); } .footer-bottom a:hover { color: var(--color-primary); } .bg-dark .footer-bottom a:hover, .bg-theme .footer-bottom a:hover, .bg-gradient .footer-bottom a:hover, .shadow .footer-bottom a:hover { color: var(--white); } .footer-item .link li { margin-top: 12px; } .footer-item .link li:first-child { margin-top: 0; } .footer-item .link li a { font-weight: 400; color: var(--color-paragraph); } .bg-dark .footer-item .link li a, .bg-theme .footer-item .link li a, .bg-gradient .footer-item .link li a, .shadow .footer-item .link li a { color: #cccccc; } .footer-item .link li a:hover { color: var(--color-primary); margin-left: 8px; } .bg-dark .footer-item .link li a:hover, .bg-theme .footer-item .link li a:hover, .bg-gradient .footer-item .link li a:hover, .shadow .footer-item .link li a:hover { opacity: 1; color: var(--white); } footer .footer-item p { color: var(--color-paragraph); } footer.bg-dark .footer-item p, footer.bg-theme .footer-item p, footer.bg-gradient .footer-item p, footer.shadow .footer-item p { color: #cccccc; } footer .footer-social { margin-top: 30px; } footer .footer-social li { display: inline-block; margin-right: 10px; } footer .footer-social li a { display: inline-block; height: 40px; width: 40px; line-height: 43px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; font-size: 14px; } footer .footer-social li a:hover { background: var(--color-primary); } footer .address { padding-right: 35px; } footer .address li { margin-top: 20px; display: flex; color: #cccccc; } footer .address li a { font-weight: 400; color: #cccccc; } footer .address li a:hover { color: var(--white); } footer .address li strong { color: #ffffff; display: block; font-weight: 500; text-transform: uppercase; } footer .address li i { font-size: 30px; color: #ffffff; margin-right: 15px; position: relative; top: 5px; } footer .address li i.fal.fa-clock { font-size: 26px; } footer .newsletter { position: relative; } footer .newsletter form { margin-top: 30px; } footer .newsletter input, footer .newsletter input:focus { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; } footer .newsletter input::-webkit-input-placeholder, footer .newsletter input:focus::-webkit-input-placeholder { color: #cccccc; font-size: 15px; font-weight: 300; } footer .newsletter input::-moz-placeholder, footer .newsletter input:focus::-moz-placeholder { color: #cccccc; font-size: 15px; font-weight: 300; } footer .newsletter input:-ms-input-placeholder, footer .newsletter input:focus:-ms-input-placeholder { color: #cccccc; font-size: 15px; font-weight: 300; } footer .newsletter input:-moz-placeholder, footer .newsletter input:focus:-moz-placeholder { color: #cccccc; font-size: 15px; font-weight: 300; } footer .newsletter button { border: none; padding: 11px; width: 100%; border-radius: 5px; margin-top: 15px; font-weight: 500; background: transparent; position: relative; z-index: 1; color: #ffffff; } footer .newsletter button i { font-weight: 100; } footer .newsletter button::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--color-primary); z-index: -1; border-radius: 5px; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; background-size: 220% 150%; } footer .about { position: relative; z-index: 1; padding-right: 30px; } /* footer .about::after { position: absolute; right: 0; top: -300px; content: ""; height: 400%; width: 500%; background: var(--color-primary); z-index: -1; opacity: 0.1; } */ .footer-top-shape { background: #1f1f1f; display: inline-block; -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 100%, 50px 100%); padding: 10px 60px; margin-bottom: -20px; } .copyright-text { background: #f19200; display: inline-block; -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 35px) 100%, 35px 100%); padding: 15px 81px; position: relative; /* top: 0px; */ margin-bottom: -0px; color: #FFF; COLOR: #fff !IMPORTANT; } .footer-top-shape .logo{ height: 130px; } .social-menu { display: flex; /* justify-content: center; */ gap: 10px; } .social-btn { list-style: none; width: 40px !important; height: 40px; background: var(--color-primary); /* margin: 8px; */ border-radius: 30%; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: 0 10px 10px -5px rgb(255,255,255,0.1); transition: all 0.3s; z-index: 10px; } .social-menu li a { color: #fff; text-transform: capitalize; } .social-menu li a i { font-size: 20px; color: #000; text-align: center; line-height: 1.6; /* margin: auto; */ display: block; } .svg-shape svg.gray { fill: var(--bg-gray); } .svg-shape svg.white { fill: var(--white); } .svg-shape svg.dark { fill: var(--dark); } .svg-shape svg.theme { fill: var(--color-primary); } @media only screen and (min-width: 1200px) { .team-left-info { margin-top: -100px; } } @media only screen and (max-width: 1200px) { .team-style-one-item { background-image: none !important; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-style-two h2 { font-size: 50px; } .banner-style-two p { font-size: 18px; } .services-style-one .thumb { display: none; } .brand-items strong::after { display: none; } .brand-items strong { font-size: 20px; } .brand-items .align-center { align-items: center; } .team-single-area .team-content-top { bottom: 0; margin: 0; padding-bottom: 120px; } .team-single-area .team-content-top .right-info { margin: 0; } .blog-item-box.pl-50 { padding-left: 15px; margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .heading, .title { font-size: 36px; margin-top: 0; line-height: 1.2; } .own-title::before { left: 0 !important; border-radius:10px !important; } .frame-wrapper::after, .frame-wrapper::before { background: transparent !important; } .project_row::before { background: transparent !important; } .banner-style-one .content .thumb img { max-width: 100%; height: auto; } .banner-style-one .content .thumb { margin: 0; margin-top: 50px; } .banner-style-one .content .info { padding-bottom: 0; } .banner-style-one .content { padding-bottom: 120px; padding-top: 120px; } .banner-style-two-area { height: auto; } .banner-style-two-area div { height: auto; } .banner-style-two-area .content { padding-top: 120px; } .banner-style-two .thumb { float: none; text-align: center; margin: 50px auto auto; margin-bottom: 30px; position: relative; } .banner-style-two { text-align: center; } .banner-style-two .thumb img { max-width: 80%; } .banner-style-five .content { padding-top: 120px; padding-bottom: 120px; } .about-style-two .sub-item { display: none; } .about-style-one .thumb img:nth-child(2) { display: none; } .about-style-one .thumb img:nth-child(3) { margin-right: 30px; display: none; } .about-style-one .thumb img { margin-bottom: 40px; } .about-area.circle-shape-right-bottom { background: transparent !important; } .about-style-four .thumb img:nth-child(3) { display: none; } .about-style-four .thumb { margin-bottom: 50px; } .feature-style-one .item { background: var(--white); } .brand-area { text-align: center; } .fun-factor-style-one .item { margin-top: 30px; } .brand3col { margin-top: 30px; } .brand-items img { padding: 0 15px; } .brand-items .shape-text svg { opacity: 0.3; } .fun-factor-style-one { margin-top: 20px; } .feature-style-one .item { text-align: center; } .animate-illustration .sub-item img:first-child { right: 50px; top: 0; } .animate-illustration .sub-item img:nth-child(2) { right: 50px; bottom: 50px; } .animate-illustration .sub-item img:nth-child(3) { top: 0; left: 40px; } .animate-illustration .sub-item img:nth-child(4) { margin-left: -76px; bottom: 0; } .animate-illustration .sub-item img:nth-child(5) { left: 30px; bottom: 60px; } .animate-illustration .sub-item img:nth-child(6) { margin-bottom: -60px; margin-left: -50px; } .choose-us-style-one .animate-illustration { margin-bottom: 50px; } .team-single-area .team-content-top .right-info { padding: 0 15px; margin-top: 30px; margin-bottom: 120px; } .team-single-area .team-content-top { margin: 0; bottom: 0; } .team-single-area .bottom-info .skill-items { padding-left: 0; margin-top: 30px; } .pricing-style-one { margin-top: 30px; } .pricing-style-one-box { margin-top: -30px; } .faq-sahpe { display: none; } .process-style-one-box { margin-top: -50px; } .process-style-one:first-child { margin-top: 50px; } .process-style-one .icon { margin-bottom: 20px; } .process-style-one:nth-child(2n) { position: relative; } .process-style-one:nth-child(2n) .icon { height: 150px; width: 150px; line-height: 150px; margin-bottom: 45px; } .process-style-one:nth-child(2n) .icon img { height: 60px; } .process-style-one:nth-child(2n) h4 { margin: 0; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .process-style-one { margin-top: 50px; } .process-style-one:nth-child(3) { margin-top: 50px; } .process-style-one:nth-child(2n) .icon span { top: auto; bottom: 15px; right: -5px; } .process-style-two-list { height: auto; width: auto; margin-bottom: 40px; display: none; } .process-style-two-thumb { margin-bottom: 50px; } .services-tab-navs .nav-tabs .nav-link::after { background: var(--color-primary); right: 0; } .services-tab-navs .nav-tabs .nav-link.active::after { width: 100%; } .services-style-one .tab-content .thumb img { margin: auto; } .services-style-one .tab-content .thumb { margin-bottom: 50px; } .services-style-one-area .default-padding-top { padding-top: 50px; } .services-tab-navs .nav-tabs .nav-link::before { display: none; } .services-tab-navs .nav-tabs .nav-link { padding: 25px; border-bottom: 1px solid #dddddd; } .services-tab-navs .nav-tabs { padding-top: 40px; padding-bottom: 60px; } .services-style-two .item { text-align: center; padding-bottom: 75px; } .services-style-two .item .btn-icon { left: 50%; transform: translateX(-50%); padding-left: 0; border: none; opacity: 1; visibility: visible; bottom: 45px; } .services-style-two .item:hover .btn-icon, .services-style-two:first-child .item .btn-icon { left: 50%; transform: translateX(-50%); } .services-style-one .thumb::after { top: 0; right: auto; left: 50%; transform: translateX(-50%); } .shape-animation { left: auto; right: 50px; } .rating-provider { margin-bottom: 50px; } .project-more-info .btn { float: left; margin-top: 20px; } .project-info { position: inherit; transform: inherit; left: inherit; right: inherit; top: 0; bottom: inherit; max-width: 100%; } .seo-score h2 { font-size: 36px; line-height: 1.2; } .team-grid:last-child { margin-top: 60px; } .contact-form-style-one { margin-top: 50px; } .contact-style-one-info { text-align: center; } .contact-style-one-info ul { display: grid; grid-column-gap: 30px; grid-row-gap: 30px; } .contact-style-one-info li { display: block; margin: 0; } .contact-style-one-info li i { margin: 0; margin-bottom: 25px; } .maps-area iframe { min-height: 450px; } .footer-bottom .text-end { text-align: center !important; margin-top: 10px; } .footer-bottom { text-align: center; } } @media only screen and (max-width: 767px) { .title { font-size: 36px; line-height: 1.2; } .heading { font-size: 36px; margin-top: 0; line-height: 1.2; } .banner-style-one .content { padding-top: 60px; padding-bottom: 60px; text-align: center; } .banner-style-one h2 { font-size: 36px; line-height: 1.2; } .banner-style-one .content .thumb img { max-width: 100%; margin: auto; height: auto; } .own-title::before { left: 0 !important; border-radius: 10px 10px 10px 10px !important; } .right-project .text-wrapper { text-align: left !important; } .right-project .section__header__title { text-align: left !important; } .right-project{ flex-direction: column-reverse; } .frame-wrapper img { height: auto !important; } .frame-wrapper { height: auto !important; } .frame-wrapper::after, .frame-wrapper::before { content: ''; position: absolute; background: transparent !important; width: 5px; height: 62px; left: 0; right: 0; margin: auto; } .project_row::before { content: ''; position: absolute; background: transparent !important; width: 57%; height: 5px; left: 0; right: 0; top: -27px; margin: auto; } .banner-style-one .content .thumb { margin: 0; margin-top: 30px; } .banner-style-one .content .info { padding: 0; } .banner-style-one a { margin: 0; } .banner-style-one a.btn-regular { display: none; } .banner-style-two-area { height: auto; } .banner-style-two-area div { height: auto; } .banner-style-two-area .content { padding-top: 60px; text-align: center; } .banner-style-two h2 { font-size: 36px; line-height: 1.2; margin-bottom: 20px; font-weight: 600; } .banner-style-two strong::after { background-size: contain; bottom: -10px; display: none; } .banner-style-two .thumb .social img { display: none; } .banner-style-two .thumb { max-width: 80%; margin: 50px auto auto; float: none; } .banner-style-two .thumb::after { left: 0; bottom: 0; top: -20px; left: -15px; display: none; } .shape-text .shape { display: none; } .shape-left-bottom { display: none; } .banner-style-five h2 { font-size: 36px; line-height: 1.2; margin-top: 0; } .banner-style-five .content { padding-top: 60px; padding-bottom: 60px; } .banner-style-five-thumb img:nth-child(2) { display: none; } .banner-style-five-thumb img:nth-child(3) { display: none; } .banner-style-five-thumb img:first-child { width: 100%; max-width: 100%; z-index: 1; margin-top: 50px; } .banner-style-five-thumb .shape { display: none; } .about-style-two .sub-item { display: none; } .about-style-one .thumb img:first-child { float: none; } .about-style-one .thumb img:nth-child(2) { display: none; } .about-style-one .thumb img:nth-child(3) { margin-right: 30px; display: none; } .about-area.circle-shape-right-bottom { background: transparent !important; } .about-style-one .thumb { margin-bottom: 30px; } .about-style-four .thumb img:first-child { max-width: 100%; } .about-style-four .thumb img:nth-child(2) { display: none; } .about-style-four .thumb .icon { right: 0; z-index: 1; top: -30px; display: none; } .about-style-four .thumb { padding: 0; margin-bottom: 40px; text-align: center; margin-top: 0; max-width: 100%; } .about-style-four .thumb img:nth-child(3) { left: 0; display: none; } .about-style-four .thumb img:nth-child(4) { right: 0; display: none; } .brand-area { text-align: center; } .brand-items strong { font-size: 20px; } .brand-items strong::after { display: none; } .fun-factor-style-one .item { margin-top: 30px; } .fun-factor-style-one .item:first-child { margin-top: 0; } .brand3col { margin-top: 30px; } .brand-items img { padding: 0 15px; } .feature-style-one .item { text-align: center; } .services-tab-navs .nav-tabs .nav-link::after { background: var(--color-primary); right: 0; } .services-tab-navs .nav-tabs .nav-link.active::after { width: 100%; } .services-tab-navs .nav-tabs .nav-link i { position: relative; margin: 0; margin-bottom: 25px; top: 15px; } .services-style-one .tab-content .thumb img { margin: auto; } .services-style-one .thumb::after { right: auto; left: 50%; transform: translateX(-50%); top: 100px; } .services-style-one .tab-content .thumb { margin-bottom: 30px; } .services-tab-navs .nav-tabs .nav-link::before { display: none; } .services-tab-navs .nav-tabs .nav-link { display: block; text-align: center; padding: 25px; border-bottom: 1px solid #dddddd; } .services-tab-navs .nav-tabs .nav-link b { display: none; } .services-tab-navs .nav-tabs { padding-top: 40px; padding-bottom: 60px; } .services-style-two .item { text-align: center; padding-bottom: 75px; } .services-style-two .item .btn-icon { left: 50%; transform: translateX(-50%); padding-left: 0; border: none; opacity: 1; visibility: visible; bottom: 45px; } .services-style-two .item:hover .btn-icon, .services-style-two:first-child .item .btn-icon { left: 50%; transform: translateX(-50%); } .shape-animation-up-down { display: none; } .services-style-two-area { padding-top: 100px !important; } .pricing-style-one-item > i { display: none; } .seo-score h2 { font-size: 36px; line-height: 1.2; } .seo-score-area .seo-score { padding: 50px 30px; } .faq-sahpe { display: none; } .project-more-info .btn { float: left; margin-top: 15px; } .project-info { position: inherit; transform: inherit; left: inherit; right: inherit; top: 0; bottom: inherit; max-width: 100%; } .project-details-area .check-list { grid-template-columns: 2fr; } .shape-right-top { z-index: -1; opacity: 0.3; } .project-details-area .check-list h4 { font-size: 20px; padding-left: 40px; } .project-details-area .check-list h4::after { height: 25px; width: 25px; line-height: 25px; } .animate-illustration .sub-item img:nth-child(2) { display: none; } .animate-illustration .sub-item img:nth-child(4) { margin-left: 45px; bottom: 20px; } .animate-illustration .sub-item img:first-child { top: 0; right: 0; } .animate-illustration .sub-item img:nth-child(6) { display: none; } .choose-us-style-one ul li:nth-child(2) { display: none; } .choose-us-style-one ul { display: block; } .choose-us-area { background-image: none !important; } .process-style-one:first-child { margin-top: 0; } .process-style-one .icon { margin-bottom: 20px; } .process-style-one:nth-child(2n) { position: relative; } .process-style-one:nth-child(2n) .icon { height: 150px; width: 150px; line-height: 150px; margin-bottom: 45px; } .process-style-one:nth-child(2n) .icon img { height: 60px; } .process-style-one:nth-child(2n) h4 { margin: 0; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .process-style-one { margin-top: 50px; } .process-style-one:nth-child(3) { margin-top: 50px; } .process-style-one:nth-child(2n) .icon span { top: auto; bottom: 15px; right: -5px; } .process-style-two-list { height: auto; width: auto; margin-bottom: 40px; display: none; } .process-style-two-thumb { margin: 0; margin-bottom: 50px; } .boosting-style-one { text-align: center; } ul.list-icon li { display: block; text-align: center; } ul.list-icon li .icon { margin: 0; margin-bottom: 15px; } .boosting-items { padding: 50px; } .boosting-items::after { display: none; } .team-grid:last-child { margin-top: 30px; } .team-single-area .team-content-top .right-info { padding: 0 15px; margin-top: 30px; margin-bottom: 50px; } .team-single-area .team-content-top { margin: 0; bottom: 0; } .team-single-area .bottom-info .skill-items { padding-left: 0; margin-top: 30px; } .pricing-style-one { margin-top: 30px; } .pricing-style-one:first-child { margin-top: 0; } .testimonial-style-two-area { overflow: hidden; } .shape-animation { left: auto; right: 20px; top: 20px; } .rating-provider { margin-bottom: 40px; } .testimonial-style-two .rating-provider .ratings { margin: 0; margin-bottom: 25px; } .contact-form-style-one { margin-top: 50px; } .contact-style-one-info { text-align: center; } .contact-style-one-info li { display: block; } .contact-style-one-info li i { margin: 0; margin-bottom: 0; margin-right: 20px; } .maps-area iframe { min-height: 300px; } footer .f-items { padding-top: 0; } .footer-bottom .text-end { text-align: center !important; margin-top: 10px; } .footer-bottom { text-align: center; } footer .about::after { display: none; } } @media only screen and (min-width: 600px) and (max-width: 767px) { .gallery-items.colums-2 .pf-item, .gallery-items.colums-3 .pf-item { width: 50%; } } @media only screen and (min-width: 600px) and (max-width: 1200px) { .gallery-items.colums-4 .pf-item { width: 50%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { } @media screen and (max-width: 991px) { .order-last { order: 0; } .footer-bottom .text-end li { margin: 0 10px; } .pricing-style-three .row > div { padding-left: 12px; } } @media (max-width: 450px) { .animate-illustration .sub-item img:nth-child(2) { display: none; } .animate-illustration .sub-item img:nth-child(4) { margin-left: -20px; bottom: 13px; display: none; } .animate-illustration .sub-item img:first-child { top: 0; right: 0; } .animate-illustration .sub-item img:nth-child(6) { display: none; } .animate-illustration .sub-item img:nth-child(3) { display: none; } .team-single-area .right-info .social .share-link { display: none; } .pricing-style-one-item { padding: 50px 30px; } .rating-provider { display: block; } .rating-provider .ratings { display: block; float: left; width: 100%; margin: 0; margin-top: 25px; margin-bottom: 30px; } .project-info .project-basic-info { grid-template-columns: 2fr; } .project-info ul.social li:nth-child(4) { display: none; } .error-page-area .error-box h1 { font-size: 150px; letter-spacing: 0; line-height: 120px; } .contact-form-style-one { padding: 50px 30px; } } .ambrox-preloader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: default; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 9000; } .ambrox-preloader .animation-preloader { z-index: 1000; } .ambrox-preloader .animation-preloader .spinner { -webkit-animation: spinner 1s infinite linear; animation: spinner 1s infinite linear; border-radius: 50%; border: 3px solid rgba(2, 109, 255, 0.2); border-top-color: var(--color-primary); height: 110px; margin: 0 auto 30px auto; width: 110px; } .ambrox-preloader .animation-preloader .txt-loading { font: bold 4em 'Yantramanav', sans-serif; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ambrox-preloader .animation-preloader .txt-loading .letters-loading { color: rgba(0, 0, 0, 0.2); position: relative; } .ambrox-preloader .animation-preloader .txt-loading .letters-loading:before { -webkit-animation: letters-loading 4s infinite; animation: letters-loading 4s infinite; color: #000000; content: attr(data-text-preloader); left: 0; opacity: 0; font-family: 'Yantramanav', sans-serif; position: absolute; top: -3px; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } .ambrox-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .ambrox-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .ambrox-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .ambrox-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .ambrox-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { -webkit-animation-delay: 1s; animation-delay: 1s; } .ambrox-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .ambrox-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .ambrox-preloader.dark .animation-preloader .spinner { border-color: rgba(255, 255, 255, 0.2); border-top-color: #fff; } .ambrox-preloader.dark .animation-preloader .txt-loading .letters-loading { color: rgba(255, 255, 255, 0.2); } .ambrox-preloader.dark .animation-preloader .txt-loading .letters-loading:before { color: #fff; } .ambrox-preloader p { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 8px; color: #3b3b3b; } .ambrox-preloader .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; z-index: 1; pointer-events: none; } .ambrox-preloader .loader .row { height: 100%; } .ambrox-preloader .loader .loader-section { padding: 0px; } .ambrox-preloader .loader .loader-section .bg { background-color: #ffffff; height: 100%; left: 0; width: 100%; -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); } .ambrox-preloader .loader.dark_bg .loader-section .bg { background: #111339; } .ambrox-preloader.loaded .animation-preloader { opacity: 0; -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .ambrox-preloader.loaded .loader-section .bg { width: 0; -webkit-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); -o-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); } @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @media screen and (max-width: 767px) { .ambrox-preloader .animation-preloader .spinner { height: 8em; width: 8em; } .ambrox-preloader .animation-preloader .txt-loading { font: bold 3.5em 'Yantramanav', sans-serif; } } @media screen and (max-width: 500px) { .ambrox-preloader .animation-preloader .spinner { height: 7em; width: 7em; } .ambrox-preloader .animation-preloader .txt-loading { font: bold 2em 'Yantramanav', sans-serif; } } @media (min-width: 1200px) { .brand-style-bg .container-fill { padding-left: 0; padding-right: 50px; } .brand-style-bg a.navbar-brand { padding: 0 50px; } .navbar.brand-style-bg .navbar-header::before, .navbar.brand-style-bg .navbar-header::after { display: none; } .top-bar .container-fill { padding: 0 50px; } .navbar.brand-style-bg .navbar-header { padding: 0; top: inherit; margin: 0; } } .navbar .active { color: var(--color-primary) !important; } .top-bar .social li { display: inline-block; } .top-bar .text-end .social li { margin-left: 30px; margin-right: 0; } .top-bar { position: relative; z-index: 1; overflow: hidden; padding: 10px 0; } ul.topbar-list { display: inline-block; position: relative; z-index: 1; } ul.topbar-list::after { position: absolute; right: -30px; top: -15px; content: ""; bottom: -15px; background: var(--color-primary); width: 500%; z-index: -1; transform: skewX(-15deg); } .topbar-list li { display: inline-block; margin-right: 30px; border-right: 1px solid rgba(255, 255, 255, 0.6); padding-right: 30px; } .topbar-list li:last-child { margin-right: 0; padding-right: 0; border: none; } .banner-shape-bg { position: absolute; left: 50%; bottom: 0; width: 100%; z-index: 1; transform: translateX(-50%); } .banner-shape-bg img { height: 100%; width: auto; } .banner-style-business h4 { text-transform: uppercase; font-size: 24px; } .banner-style-business h2 { font-size: 80px; line-height: 1; font-weight: 600; margin-bottom: 30px; } .banner-style-business h2 strong { display: block; font-weight: 200; } .banner-style-business p { font-size: 18px; font-weight: 400; } .banner-area.banner-business .swiper-slide.swiper-slide-active .button { -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } .banner-style-business .button { margin-top: 40px; } .about-style-five .fun-fact .counter { justify-content: left; font-size: 120px; color: transparent; -webkit-text-stroke: 1px var(--color-primary); line-height: 100px; margin-bottom: 15px; } .about-style-five .fun-fact { text-align: left; } .about-style-five .fun-fact span.medium { font-size: 30px; color: var(--color-heading); padding-right: 30%; display: block; line-height: 1.2; } ul.financial-step { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 30px; margin-top: 30px; } ul.financial-step li { display: flex; } ul.financial-step li span { display: inline-block; font-size: 60px; font-weight: 700; min-width: 80px; color: var(--color-primary); line-height: 45px; } ul.financial-step li h4 { margin: 0; font-size: 18px; } .about-style-five .title strong { font-weight: 600; position: relative; z-index: 1; display: inline-block; } .about-style-five .title strong::after { position: absolute; left: 0; bottom: 0; content: ""; height: 100%; width: 100%; background: url(../img/shape/b1.png); background-repeat: no-repeat; background-position: bottom center; z-index: -1; } .about-style-five.right-border { padding-left: 80px; border-left: 2px solid; } @media only screen and (min-width: 1200px) { .services-style-five-area { max-width: 90%; margin: auto; border-radius: 10px; } } .services-style-five-area { overflow: hidden; } .services-style-five { padding: 60px 30px; background: var(--white); border-radius: 10px; padding-bottom: 0; transition: all 0.35s ease-in-out; } .services-style-five img { height: 80px; margin-bottom: 30px; } .services-style-five > a { display: inline-block; background: var(--bg-gradient); padding: 7px 45px; padding-top: 9px; border-radius: 30px; font-weight: 500; margin-top: 15px; color: var(--white); } .services-style-five p { opacity: 0.9; } .services-style-five > a { opacity: 0; transform: translateY(-30px); } .services-style-five.active > a, .services-style-five:hover > a { transform: translateY(0); opacity: 1; } .services-style-five.active, .services-style-five:hover { padding-bottom: 60px; } .business-progress-thumb img { margin-left: -10%; max-width: 110%; } .list-grid-info { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 30px; margin-top: 30px; } .list-grid-info h4 { font-weight: 600; } .list-grid-info li { position: relative; z-index: 1; padding-left: 25px; } .list-grid-info li::after { position: absolute; left: 0; top: 0; content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 100; } .list-grid-info li:first-child::after { display: none; } .list-grid-info li:first-child { padding-left: 0; } .business-progress-info h2 strong { display: inline-block; font-weight: 600; position: relative; z-index: 1; } .business-progress-info h2 strong::after { position: absolute; left: 50%; top: 50%; content: ""; height: 110%; width: 110%; background: url(../img/shape/19.png); z-index: -1; background-repeat: no-repeat; background-position: center; background-size: contain; transform: translate(-50%, -50%); } .business-progress-thumb { position: relative; } .business-progress-thumb .fun-fact { height: 200px; width: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--color-primary); border-radius: 50%; position: absolute; right: 0; top: 50px; animation: UpDown 5s linear infinite; } .business-progress-thumb .fun-fact .counter { color: var(--white); margin: 0; } .business-progress-thumb .fun-fact .medium { color: var(--white); font-weight: 400; } .business-progress-thumb .fun-fact::after { position: absolute; left: 27%; bottom: -15px; content: ""; border-left: 3px solid transparent; border-right: 30px solid transparent; border-top: 25px solid var(--color-primary); transform: rotate(7deg); } .skill-items.style-two .progress-box .progress { background: #919191; border-radius: 30px; margin-top: 15px; height: 15px; border: 1px solid #b7c9e1; } .skill-items.style-two .progress-box .progress .progress-bar { top: 0; height: 15px; left: 0; } .skill-items.style-two .progress-box .progress .progress-bar span { top: -10px; background: var(--color-primary); z-index: 1; border-radius: 50%; width: 30px; height: 30px; display: grid; place-content: center; font-size: 15px; } .portfolio-items.colums-2 .pf-item { float: left; width: 50%; } .portfolio-items { margin: -15px; } .portfolio-items .pf-item { padding: 15px; } .mix-item-menu button { float: left; padding: 14px 40px; background: rgba(255, 255, 255, 0.6); border-radius: 30px; margin-right: 10px; margin-top: 10px; border: 1px solid #c3cbe8; transition: all 0.35s ease-in-out; } .mix-item-menu button.active { background: var(--color-primary); color: var(--white); } .pf-item .thumb { position: relative; z-index: 1; overflow: hidden; } .pf-item .thumb a { display: inline-block; height: 50px; width: 50px; background: var(--white); color: var(--color-primary); font-weight: 100; text-align: center; line-height: 55px; border-radius: 50%; position: absolute; left: 60px; bottom: 30px; font-size: 20px; z-index: 1; opacity: 0; visibility: hidden; } .pf-item .thumb a i { font-weight: 400; } .pf-item .thumb::after { position: absolute; left: -50px; bottom: -100px; content: ""; height: 200px; width: 200px; background: var(--bg-gradient); border-radius: 50%; transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; } .pf-item:hover .thumb::after { bottom: -50px; opacity: 1; visibility: visible; } .pf-item:hover .thumb a { left: 30px; opacity: 1; visibility: visible; } .pf-item .thumb img { transition: all 0.35s ease-in-out; } .pf-item:hover .thumb img { transform: scale(1.2); } .pf-item .info { margin-top: 15px; } .pf-item .info h4 { margin-bottom: 3px; } .pf-item .info .cat span { display: inline-block; color: var(--color-primary); position: relative; z-index: 1; margin-right: 15px; } .pf-item .info .cat span::after { position: absolute; right: -12px; top: 50%; content: ""; height: 5px; width: 5px; background: var(--color-primary); border-radius: 50%; margin-top: -2px; } .pf-item .info .cat span:last-child::after { display: none; } .team-style-two .info ul li { display: inline-block; } .team-style-two .info li a { display: inline-block; height: 45px; width: 45px; line-height: 50px; text-align: center; background: var(--color-primary); border-radius: 50%; color: var(--white); margin-right: 7px; } .team-style-two .info h4 { margin: 0; } .team-style-two .info { margin-top: 20px; } .team-style-two .thumb { position: relative; } .team-style-two .thumb a { display: inline-block; height: 50px; width: 50px; line-height: 50px; background: var(--color-primary); text-align: center; color: var(--white); position: absolute; right: 30px; bottom: 0; opacity: 0; visibility: hidden; } .team-style-two .thumb a:nth-child(2) { bottom: 65px; background: var(--dark); } .team-style-two:hover .thumb a { opacity: 1; visibility: visible; bottom: 30px; } .team-style-two:hover .thumb a:nth-child(2) { bottom: 85px; } .faq-style-two-items { padding: 120px 0; padding-right: 100px; position: relative; z-index: 1; } .faq-style-two-area { overflow: hidden; background: var(--dark); } .faq-style-two-items::after { position: absolute; left: 0; top: 0; /* content: ""; */ height: 100%; width: 500%; z-index: -1; } .text-light .faq-style-one button.accordion-button { color: var(--white); border-color: rgba(255, 255, 255, 0.5) !important; border-width: 1px !important; } .text-light .faq-style-one .accordion-body p { opacity: 0.9; } a.btn-chat { display: inline-block; height: 80px; width: 80px; line-height: 85px; text-align: center; background: var(--bg-gradient); border-radius: 50%; font-weight: 100; font-size: 30px; margin-top: 15px; } .faq-style-two-items p { opacity: 0.9; } .chat-badge img { width: 40px; transform: rotate(100deg); } .chat-badge { position: absolute; left: 100px; margin-top: -50px; } .chat-badge span { margin-left: 5px; } @media (min-width: 1024px) { .navbar.no-background.dark .attr-nav .side-menu span { background-color: var(--color-heading); } } @media (min-width: 1200px) { nav.navbar-border { width: 90% !important; left: 5%; } nav.navbar-border .container-fill { padding: 0; } .banner-area.double-items.bottom-thumb .content { margin-top: -110px; } } .banner-style-six-area { overflow: hidden; } .banner-style-six h4 { text-transform: uppercase; font-size: 24px; color: var(--color-primary); font-weight: 500; background: var(--bg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .banner-style-six h2 { font-size: 80px; line-height: 1; font-weight: 600; margin-bottom: 30px; } .banner-style-six h2 strong { display: block; font-weight: 200; } .banner-style-six p { font-size: 18px; font-weight: 400; } .banner-area.banner-style-six-area .swiper-slide.swiper-slide-active .button { -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } .banner-style-six .button { margin-top: 40px; } .banner-style-six-area { padding-top: 160px; } .banner-shape-six { position: absolute; left: 0; top: 0; height: 100% !important; width: 100%; background-size: cover; background-position: center; } .banner-area.banner-style-six-area .swiper-button-prev::after, .banner-area.banner-style-six-area .swiper-button-next::after { color: var(--color-heading); font-size: 16px; } .banner-area.banner-style-six-area.navigation-circle .swiper-button-prev, .banner-area.banner-style-six-area.navigation-circle .swiper-button-next { background: var(--white); height: 55px; width: 55px; line-height: 55px; box-shadow: 0 0 10px #cccccc; } .service-six-item { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; position: relative; margin-top: 50px; } .service-six-item i { display: inline-block; height: 80px; width: 80px; line-height: 80px; background: var(--dark); text-align: center; color: var(--white); font-size: 40px; border-radius: 10px; margin-bottom: 30px; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); } .service-six-item i::before { line-height: inherit; } .service-six-item p { margin: 0; } .service-six-heading { height: 100%; padding: 50px; display: flex; flex-direction: column; justify-content: center; background-size: cover; background-position: center; margin-right: 30px; position: relative; z-index: 1; } .service-six-heading .sub-title { background: transparent; -webkit-text-fill-color: var(--white); } .service-six-heading .heading { font-size: 42px; margin: 0; font-weight: 500; } .service-six-heading img { position: absolute; z-index: -1; left: -100px; top: 100px; width: 200px; } .about-style-six-area { background-size: cover; background-position: right !important; } .about-style-six { padding: 120px; background-size: 60%; background-repeat: no-repeat; background-position: right bottom; } .about-style-six h2 { font-weight: 600; } .about-style-six-counter { height: 100%; display: flex; flex-direction: column; justify-content: end; } ul.counter-list { display: flex; align-items: center; justify-content: end; } ul.counter-list li { background: var(--color-primary); padding: 50px; } ul.counter-list li:first-child { background: #008cff; } .about-style-six-counter { position: relative; right: -80px; margin-left: -100px; } ul.counter-list li .counter { color: var(--white); } ul.counter-list li .medium { color: var(--white); } .about-style-six .sub-title { font-weight: 900; } .text-light .list-standard li::after { color: var(--white); border-color: rgba(255, 255, 255, 0.5); font-weight: 100; } ul.shor-contact li { display: flex; border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 20px; padding-top: 20px; } ul.shor-contact li i { min-width: 75px; font-size: 50px; color: var(--color-primary); } ul.shor-contact { margin-top: 35px; } ul.shor-contact li span { display: block; font-weight: 600; text-transform: uppercase; } ul.shor-contact li:first-child { margin: 0; padding: 0; border: none; } .about-style-six.bg-dark p { opacity: 0.85; } .about-style-six .title { margin-bottom: 30px; } .expertise-area .skill-items .progress-box { margin-bottom: 30px; } .skill-items.style-two .progress-box .progress { height: 7px; border: none; } .skill-items.style-two .progress-box .progress .progress-bar { height: 10px; top: -2px; } .skill-items.style-two .progress-box .progress .progress-bar::after { position: absolute; right: 0; top: -5px; content: ""; height: 20px; width: 20px; background: var(--white); border-radius: 50%; border: 3px solid var(--color-primary); } .expertise-item { border: 1px solid #e7e7e7; border-radius: 10px; overflow: hidden; } .expertise-item h4 { font-weight: 600; font-size: 22px; } .expertise-item .content { padding: 37px; } .expertise-item .bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e7e7e7; padding-left: 37px; } .expertise-item .bottom a { display: inline-block; height: 85px; width: 70px; text-align: center; line-height: 85px; border-left: 1px solid #e7e7e7; } .expertise-item .bottom > i { display: inline-block; font-size: 50px; color: var(--color-heading); font-weight: 100; } .expertise-item p { margin: 0; } @media only screen and (min-width: 1250px) { .container-stage { margin-left: calc((100% - 1250px)/ 2); width: auto; min-width: auto; max-width: inherit; padding-right: 0; } } .project-style-two-area { position: relative; z-index: 1; } .project-style-two-area::after { position: absolute; left: -10%; top: 0; content: ""; height: 50%; width: 70%; background: var(--color-primary); z-index: -1; transform: skewX(-10deg); } .text-light .sub-title { background: transparent; -webkit-text-fill-color: var(--white); opacity: 0.9; } .project-two-swiper-nav { position: relative; width: 100%; top: 0; } .project-two-swiper-nav .swiper-pagination { position: absolute; left: auto; right: 0; width: auto; bottom: 60px; } .project-two-swiper-nav .swiper-pagination span { height: 24px; width: 24px; background: transparent; border: 2px solid var(--color-primary); position: relative; } .project-two-swiper-nav .swiper-pagination span.swiper-pagination-bullet-active::after { position: absolute; left: 50%; top: 50%; content: ""; height: 8px; width: 8px; background: var(--color-primary); transform: translate(-50%, -50%); border-radius: 50%; } .project-style-two { overflow: hidden; position: relative; z-index: 1; } .project-style-two .content { position: absolute; z-index: 1; display: inline-block; left: 45px; bottom: 30px; right: 45px; padding-top: 25px; } .project-style-two .content::after { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--white); content: ""; opacity: 0; visibility: hidden; transition: all 0.35s ease-in-out; } .project-style-two:hover .content::after { width: 100%; opacity: 1; visibility: visible; transition-delay: 0.4s; } .project-style-two .content h4 a { color: var(--white); position: relative; left: -30px; opacity: 0; visibility: hidden; } .project-style-two .content h4 { margin-bottom: 5px; transition: all 0.35s ease-in-out; } .project-style-two .content span { text-transform: uppercase; color: var(--white); font-size: 13px; transition: all 0.35s ease-in-out; position: relative; right: -30px; opacity: 0; visibility: hidden; } .project-style-two::after { position: absolute; left: 50%; top: 50%; content: ""; height: 0; width: 0; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 70%) repeat scroll 0 0; opacity: 0; transition: all 0.45s ease-in-out; visibility: hidden; transform: translate(-50%, -50%); border-radius: 50%; } .project-style-two:hover::after { width: 800px; height: 800px; opacity: 0.7; visibility: visible; } .project-style-two:hover .content h4 a { left: 0; transition-delay: 0.3s; opacity: 1; visibility: visible; } .project-style-two:hover .content span { right: 0; opacity: 1; visibility: visible; transition-delay: 0.4s; } .project-style-two img { transition: all 0.35s ease-in-out; } .project-style-two:hover img { transform: scale(1.2); } .process-style-one .icon span { color: var(--white); } .process-style-one-box.style-two { position: relative; z-index: 1; } .process-style-one-box.style-two::after { position: absolute; left: 0; top: 25px; content: ""; height: 100%; width: 100%; background: url(../img/shape/process.png); background-repeat: no-repeat; z-index: -1; background-size: contain; transform: rotate(-5deg); } .process-style-one.active .icon { height: 200px; width: 200px; line-height: 200px; } .process-style-one.active .icon img { height: 80px; } .process-style-one.active:nth-child(2n) .icon span { height: 55px; width: 55px; line-height: 55px; font-size: 20px; top: 20px; right: -10px; } .process-style-one-box.style-two .icon { box-shadow: 0 5px 30px 0 rgba(214, 215, 216, 0.57); } .pricing-style-two .pricing-header { padding: 30px 60px; padding-top: 40px; text-align: center; position: relative; z-index: 1; } .pricing-style-two.active .pricing-header::after { background: var(--color-primary); } .pricing-style-two .pricing-header h4 { color: var(--white); margin-bottom: 0; } .pricing-style-two .pricing-header p { color: var(--white); } .pricing-style-two { border-radius: 30px; overflow: hidden; box-shadow: 0 5px 30px 0 rgba(214, 215, 216, 0.57); background: var(--white); } .pricing-style-two .pricing-content { padding: 60px; padding-top: 70px; } .pricing-style-two .pricing-header h4 { text-transform: uppercase; font-weight: 600; } .pricing-style-two .pricing-header p { margin: 0; opacity: 0.9; } .pricing-style-two .pricing-header::after { position: absolute; right: -10%; top: -20%; content: ""; height: 125%; width: 110%; background: var(--dark); z-index: -1; transform: skewY(-6deg); } .pricing-style-two .pricing-header::before { position: absolute; right: 0; bottom: 0; content: ""; height: 50px; width: 100%; background: var(--dark); z-index: -1; transform: skewY(7deg); opacity: 0.1; } .pricing-style-two.active .pricing-header::before { background: var(--color-primary); } .pricing-style-two h2 { font-size: 50px; font-weight: 700; margin-bottom: 25px; } .pricing-style-two h2 sub { font-size: 16px; font-weight: 500; margin-left: -5px; } .pricing-style-two h2 sup { font-size: 30px; top: -18px; font-weight: 500; } .pricing-style-two h2 strong { font-weight: 600; } .pricing-style-two li { margin-top: 7px; font-size: 18px; } .pricing-style-two li i { font-size: 14px; margin-right: 5px; position: relative; font-weight: 100; } .pricing-style-two .pricing-header i { display: inline-block; color: var(--white); font-size: 50px; margin-bottom: 20px; font-weight: 100; } .pricing-style-two .pricing-content .price h2 { margin: 0; margin-top: 20px; } .btn-md.btn-border-dark { padding: 13px 52px; } @media only screen and (max-width: 1199px) { .faq-style-two-items::after { right: -100%; } .faq-style-two-items { padding-right: 0; } .services-style-five > a { transform: translateY(0); opacity: 1; } .services-style-five { padding-bottom: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { } @media only screen and (max-width: 991px) { .expertise-area .right-info { margin-top: 20px; } .process-style-one-box.style-two::after { display: none; } .process-style-one.active:nth-child(2n) .icon span { height: 45px; width: 45px; line-height: 45px; right: -15px; } .process-style-one.active .icon img { height: 60px; } .process-style-one.active .icon { height: 150px; width: 150px; line-height: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .top-bar .text-end { display: none; } ul.topbar-list { display: block; text-align: center; } ul.financial-step { grid-column-gap: 50px; } .banner-style-six-area { padding-top: 0; } .banner-area.double-items.bottom-thumb .content { padding-bottom: 50px; } .banner-style-six { text-align: center; } .banner-area.double-items .thumb img { max-width: 50%; } .about-style-six-counter { margin: 0; right: 0; } ul.counter-list { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 50px; } .about-style-six-area { background-image: none !important; padding-bottom: 120px; } .about-style-five.right-border { padding: 0; border: none; margin-top: 40px; } .business-progress-thumb img { max-width: 100%; margin-left: -15%; margin-bottom: 45px; } .portfolio-left-heading { float: left; width: 100%; margin-bottom: 50px; } .portfolio-left-heading { float: left; width: 100%; margin-bottom: 50px; } .faq-style-two-items .accordion { margin-top: 40px; } } @media only screen and (max-width: 767px) { .top-bar { display: none; } .banner-style-business h2 { font-size: 36px; } .banner-shape-bg { display: none; } .banner-business .banner-thumb { z-index: 1; } .banner-business .banner-thumb::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--black); z-index: -1; opacity: 0.5; } .banner-style-six-area { padding-top: 10px; } .banner-style-six h2 { font-size: 36px; } .banner-style-six { text-align: center; } .banner-area.double-items .thumb img { max-width: 50%; } ul.financial-step { grid-template-columns: 1fr; } .about-style-five .fun-fact span.medium { padding-right: 0; } .about-style-five .fun-fact .counter { font-size: 100px; } .about-style-five.right-border { padding: 0; border: none; margin-top: 40px; } ul.financial-step li { align-items: center; } .business-progress-thumb img { margin-left: -15%; margin-bottom: 40px; } .business-progress-thumb .fun-fact { display: none; } .about-style-six-area { background-image: none !important; } ul.counter-list { display: grid; grid-template-columns: 1fr; justify-content: center; grid-row-gap: 30px; } .about-style-six-counter { margin: 0; right: 0; } .about-style-six { padding: 50px 30px; margin-top: 30px; } .portfolio-left-heading { margin-bottom: 50px; float: left; width: 100%; } .portfolio-items.colums-2 .pf-item { width: 100%; } .faq-style-two-items { padding: 50px 0; } .faq-style-two-items .accordion { margin-top: 30px; } .project-style-two-area::after { transform: inherit; left: 0; right: 0; width: 100%; } .project-two-swiper-nav { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); right: auto; } .project-style-two-area { padding-bottom: 100px; } .project-two-swiper-nav .swiper-pagination { width: 100%; } .services-style-six-area { text-align: center; } .service-six-heading img { display: none; } .service-six-heading { margin: 0; padding: 50px 30px; } } @media (max-width: 450px) { .list-grid-info { grid-template-columns: 1fr; } } .team-style-three { overflow: hidden; border-radius: 10px; position: relative; } .team-style-three .info { position: absolute; left: 30px; bottom: 70px; background: var(--color-primary); right: 30px; padding: 20px 30px; text-align: center; border-radius: 10px; transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; } .team-style-three .info span { color: var(--white); } .team-style-three .info a { color: var(--white); } .team-style-three .social a { display: inline-block; height: 40px; width: 40px; line-height: 40px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; margin: 0 2px; } .team-style-three:hover .info { bottom: 30px; visibility: visible; opacity: 1; } .team-style-three .info h4 { margin-bottom: 5px; } .team-style-three .info span { display: block; opacity: 0.9; margin-bottom: 10px; } /* ROADMAP CSS STRAT */ /* .timeline { white-space: nowrap; overflow-x: hidden; } .timeline ol { font-size: 0; width: 100vw; padding: 250px 0; transition: all 1s; } .timeline ol li { position: relative; display: inline-block; list-style-type: none; width: 160px; height: 3px; background: #03112d; } .timeline ol li:last-child { width: 280px; } .timeline ol li:not(:first-child) { margin-left: 14px; } .timeline ol li:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: calc(100% + 1px); bottom: 0; width: 12px; height: 12px; transform: translateY(-50%); border-radius: 50%; background: #f45b69; } .timeline ol li div { position: absolute; left: calc(100% + 7px); width: 280px; padding: 15px; font-size: 1rem; white-space: normal; color: #fff; background: #03112d; } .timeline ol li div::before { content: ""; position: absolute; top: 100%; left: 0; width: 0; height: 0; border-style: solid; } .timeline ol li:nth-child(odd) div { top: -16px; transform: translateY(-100%); } .timeline ol li:nth-child(odd) div::before { top: 100%; border-width: 8px 8px 0 0; border-color: white transparent transparent transparent; } .timeline ol li:nth-child(even) div { top: calc(100% + 16px); } .timeline ol li:nth-child(even) div::before { top: -8px; border-width: 8px 0 0 8px; border-color: transparent transparent transparent white; } .timeline time { display: block; font-size: 1.2rem; font-weight: bold; margin-bottom: 8px; } .timeline .arrows { display: flex; justify-content: center; margin-bottom: 20px; } .timeline .arrows .arrow__prev { margin-right: 20px; } .timeline .disabled { opacity: 0.5; } .timeline .arrows img { width: 45px; height: 45px; } @media screen and (max-width: 599px) { .timeline ol, .timeline ol li { width: auto; } .timeline ol { padding: 0; transform: none !important; } .timeline ol li { display: block; height: auto; background: transparent; } .timeline ol li:first-child { margin-top: 25px; } .timeline ol li:not(:first-child) { margin-left: auto; } .timeline ol li div { position: static; width: 94%; height: auto !important; margin: 0 auto 25px; } .timeline ol li:nth-child(odd) div { transform: none; } .timeline ol li:nth-child(odd) div::before, .timeline ol li:nth-child(even) div::before { left: 50%; top: 100%; transform: translateX(-50%); border: none; border-left: 1px solid white; height: 25px; } .timeline ol li:last-child, .timeline ol li:nth-last-child(2) div::before, .timeline ol li:not(:last-child)::after, .timeline .arrows { display: none; } } */ /*===================================* 07. TIMELINE SECTION *===================================*/ .roadmap-sec { position: relative; display: block; padding: 50px 0px 50px; background: var(--bg-gray); } .roadmap_box { margin-top: 80px; position: relative; text-align: center; } .roadmap.gradient_box { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; } .roadmap::before { background-color: #f19200; content: ""; height: 3px; left: 0; position: absolute; top: 15px; width: 100%; } .roadmap_icon { background-color: rgba(0, 0, 0, 0); height: 31px; left: 0; margin: 0 auto; overflow: hidden; position: absolute; right: 0; top: -80px; transform: rotate(-60deg) skewY(30deg); width: 27px; } .roadmap_icon.icon_gradient_box::before { background: var(--color-primary); background: var(--color-primary); } .roadmap_icon::before { background-color: var(--color-primary); color: #ffffff; content: ""; display: block; font-size: 28px; font-weight: 700; height: inherit; transform: skewY(-30deg) rotate(60deg) translate(0%); width: inherit; } .rd_complete .roadmap_icon::before { content: ""; font-family: ionicons; font-size: 16px; font-weight: normal; } .roadmap_inner::before { background-color: #f19200; content: ""; height: 94px; left: 0; margin: 0 auto; position: absolute; right: 0; top: -100px; width: 3px; } .roadmap_inner::after { background: #f19200 none repeat scroll 0 0; border: 2px solid #ffffff; border-radius: 100%; content: ""; height: 15px; left: 0; margin: 0 auto; position: absolute; right: 0; top: -6px; width: 15px; z-index: -1; } .roadmap_inner { /* background-color: #f19200; */ border-radius: 10px; border: 4px solid #f19200; color: #000; padding:20px; } .roadmap_box h6 { color: #000; font-size: 25px; font-weight: 700; margin-bottom: 0px; } .roadmap_box p { color: #000; font-size: 19px; line-height: 25px; font-weight: 400; margin: 0; } .roadmap .owl-prev, .roadmap .owl-next { position: absolute; top: 0; } .roadmap .owl-prev { left: -33px; } .roadmap .owl-next { right: -33px; } .roadmap .owl-nav{ display: inline } .roadmap .owl-nav i { background: var(--color-primary); border-radius: 100%; color: #ffffff; display: block; font-size: 26px; height: 33px; line-height: 37px; text-align:center; width: 33px; } .roadmap .owl-prev i { padding-right: 3px; } .roadmap .owl-next i { padding-left: 3px; } .roadmap .owl-nav { cursor: default; } .roadmap .owl-nav i { background: var(--color-primary); color: #FFF; font-size: 18px; line-height: 2; } .customPrevBtn{ position: absolute; left: 8%; top: 11%; border-radius: 50%; padding: 10px; z-index: 1; border: none; background: #fff; } .customNextBtn{ position: absolute; right: 8%; top: 11%; border-radius: 50%; padding: 10px; z-index: 1; border: none; background: #fff; } .social-menu li a i svg { width: 20px; } /************************ my css start ******************* */ @media only screen and (min-width: 320px) and (max-width: 414px) { .btn-md { padding: 10px 20px; font-size: 17px; } .roadmap .owl-prev { left: 0px; } .roadmap .owl-next { right: 0px; } .footer-item .widget-title { margin: 20px 0px; } .animation-box { bottom: 0; } a.navbar-brand { left: 45%; } .copyright-text { padding: 15px 38px !important; } #euro { height: 266px !important; width: 250px !important; } .front { height: 266px !important; width: 250px !important; } .middle { height: 266px !important; width: 250px !important; } .back { height: 266px !important; width: 250px !important; } } .token-distribution { background-image: url(../../assets/img/bg.jpg); background-size: cover; position: relative; z-index: 1; }