/* ========================== Author: Thewebmax team ========================== */ /*======================================= || 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 left right part css ====================================== 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. for images ------------------------------------- ====================================== 10. IMAGES OVERLAY EFFECTS (overly animation on images) ====================================== ------------------------------------- 1. effect 1 ------------------------------------- 2. Gradient-black ------------------------------------- 3. Gradient-white ------------------------------------- ====================================== 11. shortcodeS ====================================== ------------------------------------- 1. Buttons ------------------------------------- 1.1 theme default button 1.2 button text uppercase 1.3 button size 1.4 button rounded 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.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 Client carousel 1 ------------------------------------- 7. Testimonials ------------------------------------- 7.1 testimonial with background image 7.2 testimonial 6 ------------------------------------- 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 ------------------------------------- 14. Google map ------------------------------------- 16. Countdown clock ------------------------------------- 17. Form elements ------------------------------------- 17.1 input group 17.3 radio & checkbox 17.4 Browse Button css 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.8 widget tags-list 19.14 widget gallery 19.18 widget client slider ------------------------------------- 20. Table ------------------------------------- 21. Video ------------------------------------- ====================================== 12. WP DEFAULT ====================================== ====================================== 13. BLOG ====================================== ------------------------------------- 3. if no image with 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 ------------------------------------- ====================================== 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 id Fixed ------------------------------------- 6. header with bg primary color 1 ------------------------------------- ====================================== 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 ====================================== 22. FOOTER ====================================== ------------------------------------- 1. footer fixed on bottom css ------------------------------------- 1.1 footer fixed with fullscreen view 1.2 footer fixed with boxed view ------------------------------------- 5. widget Getintuch ------------------------------------- 6. scroll top btn css ------------------------------------- ====================================== 23. PAGE-CONTENT ====================================== ------------------------------------- 1. Section Head Part ------------------------------------- 2. Section Content Part ------------------------------------- ====================================== 24. AFTER-LOGIN-CONTENT ====================================== ------------------------------------- 2. Contact us page ------------------------------------- ====================================== 25. THEMEFOREST REQUIRED CLASSES ====================================== ------------------------------------- 1. Text meant only for screen readers ------------------------------------- ====================================== 27. BOX MAX-WIDTH css ( ) ====================================== ====================================== 28. SHOP & PRODUCT DETAIL (Woocommerce) ====================================== ------------------------------------- 1. Product Box ------------------------------------- ====================================== 29. content show on image box () ====================================== info box show ====================================== 30. Customize Grouping css ====================================== ------------------------------------- 1.set-radius ------------------------------------- 2. transition ------------------------------------- 3. float-clearfix ------------------------------------- ====================================== 32. Inner pages ====================================== ------------------------------------- 2. Out Team ------------------------------------- 2.6. Out Team six ------------------------------------- 4. product block ------------------------------------- ====================================== 33. Background Effects ====================================== ====================================== 34. Home Page ====================================== ====================================== 35. Carousel overlay content ====================================== ====================================== 36. Overlay Box 2 ====================================== ====================================== 37. line-amiation-block ====================================== ====================================== 38. latest-blog-dark ====================================== ====================================== 39. background Square block ====================================== ====================================== 40. About us ====================================== ====================================== 41. Our Services ====================================== ====================================== 42. Contact Us ====================================== ====================================== 43. Work carousal ====================================== ====================================== 44. Work Masonry ====================================== ====================================== 45. our-story ====================================== */ /*====================================== 1. GENERAL ======================================*/ body { background-color: #FFF; font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 400; color: #000; padding: 0; margin: 0; overflow-x: hidden; } a { color: #262423; outline: 0 none; text-decoration: none; } a:hover, a:focus { text-decoration: none; outline: 0 none; } a:active, a:hover, a:focus { color: #d5dd02; } 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; } address { font-style: italic; } table { background-color: transparent; width: 100%; } table thead th { color: #000; padding: 12px 8px !important; background-color: #ddd; } table td { padding: 15px 10px !important; } @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: #484848; color: #fff; } ::-moz-selection { background: #484848; color: #fff; } ::-webkit-selection { background: #484848; 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; font-family: 'Oswald', sans-serif; text-transform: uppercase; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #d5dd02; } h1 { font-weight: normal; font-size: 52px; line-height: 56px; color: #000; } h2 { font-weight: normal; font-size: 30px; line-height: 52px; color: #000; font-weight: 400; } h3 { font-weight: normal; font-size: 28px; line-height: 40px; color: #000; margin-bottom: 20px; } h4 { font-weight: normal; font-size: 20px; line-height: 26px; color: #000; margin-bottom: 15px; } h5 { font-weight: normal; font-size: 16px; line-height: 22px; color: #000; margin-bottom: 10px; } h6 { font-weight: normal; font-size: 14px; line-height: 20px; color: #000; margin-bottom: 10px; } .display-inline { display: inline; } .display-inline-block { display: inline-block; } .display-block { display: block; } /*====================================== 3. TEXT & PARAGRAPH ======================================*/ p { line-height: 24px; margin-bottom: 24px; letter-spacing: 1px; font-weight: 400; } 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-28 { font-size: 28px; line-height: 34px; } .font-30 { font-size: 30px; line-height: 36px; } .font-32 { font-size: 32px; line-height: 38px; } .font-34 { font-size: 34px; line-height: 40px; } .font-36 { font-size: 36px; line-height: 42px; } .font-38 { font-size: 38px; line-height: 44px; } .font-40 { font-size: 40px; line-height: 46px; } .font-45 { font-size: 46px; line-height: 52px; } .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: 80px; line-height: 86px; } .font-90 { font-size: 90px; line-height: 96px; } .font-100 { font-size: 100px; line-height: 106px; } .font-120 { font-size: 120px; line-height: 126px; } .font-140 { font-size: 140px; line-height: 146px; } .font-160 { font-size: 160px; line-height: 166px; } .font-180 { font-size: 180px; line-height: 186px; } /*------------------------------------- 6. text bold ------------------------------------ */ .font-weight-100 { font-weight: 100; } .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; } /*------------------------------------- 7. Letter Spacing ------------------------------------ */ .letter-spacing-2 { letter-spacing: 2px; } .letter-spacing-3 { letter-spacing: 3px; } .letter-spacing-4 { letter-spacing: 4px; } .letter-spacing-5 { letter-spacing: 5px; } /*====================================== 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:last-child { margin-bottom: 0px; } .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: 3px; display: block; font-size: 15px; color: #262423; } .list-circle li:before { top: 6px; 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: #262423; } 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; } 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: #262423; font-weight: bold; text-align: center; font-size: 12px; } 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 #262423; background-color: transparent; color: #262423; } ol.list-num-count.list-outline-none>li:before { background-color: transparent; color: #262423; } /*====================================== 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-t25 { padding-top: 25px; } .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-b25 { padding-bottom: 25px; } .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-l25 { padding-left: 25px; } .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-r25 { padding-right: 25px; } .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-lr25 { padding-left: 25px; padding-right: 25px; } .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-tb25 { padding-bottom: 25px; padding-top: 25px; } .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: #d5dd02; } .text-secondry { color: #d5dd02; } .text-black { color: #262423; } .text-gray { color: #f5f6f6; } .text-gray-dark { color: #d3d3d3; } .text-red { color: #99090A; } .text-green { color: #557131; } .text-yellow { color: #D5DD02; } .text-light-blue { color: #004F83; } .text-black p { color: #7c7c7c; } /*------------------------------------- 2. background color -------------------------------------*/ .bg-transparent { background-color: transparent; } .site-bg-primary { background-color: #d5dd02; } .bg-secondry { background-color: #141b1f; } .bg-white { background-color: #FFF; } .bg-black { background-color: #000; } .bg-black-light { background-color: #212121; } .bg-gray { background-color: #f6f7f8; } .bg-gray-light { background-color: #f1f1f1; } .bg-gray-dark { background-color: #d3d3d3; } .bg-red { background-color: #fb5455; } .bg-green { background-color: #d5dd02; } .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: 0.5; color: white; } .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: 555px; } .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; } } @media only screen and (max-width:991px) { .wt-left-part { padding-left: 0px; } .wt-right-part { padding-right: 0px; } } /*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; position: absolute; left: 50%; top: 50%; width: 100%; z-index: 1 !important; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); } .overlay-icon a { display: inline-block; padding: 0; margin: 0 2px; } .overlay-icon .wt-icon-box-xs { line-height: 40px; } .overlay-icon a:hover { color: #fff; } .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; } /*====================================== 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: #262423000; } .bdr-primary { border-color: #d5dd02; } .bdr-gray { border-color: #dddddd; } .bdr-gray-light { border-color: #eeeeee; } .bdr-gray-dark { border-color: #333333; } .bdr-solid { border-style: solid; } .bdr-dot { border-style: dotted; } .bdr-dash { 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; } .bdr-l-1 { border-width: 0px 0px 0px 1px } .bdr-r-1 { border-width: 0px 1px 0px 0px; } .bdr-t-1 { border-width: 1px 0px 0px 0px } .bdr-b-1 { border-width: 0px 0px 1px 0px } .bdr-l-2 { border-width: 0px 0px 0px 2px } .bdr-r-2 { border-width: 0px 2px 0px 0px; } .bdr-t-2 { border-width: 2px 0px 0px 0px } .bdr-b-2 { border-width: 0px 0px 2px 0px } .bdr-l-3 { border-width: 0px 0px 0px 3px } .bdr-r-3 { border-width: 0px 3px 0px 0px; } .bdr-t-3 { border-width: 3px 0px 0px 0px } .bdr-b-3 { border-width: 0px 0px 3px 0px } .bdr-l-4 { border-width: 0px 0px 0px 4px } .bdr-r-4 { border-width: 0px 4px 0px 0px; } .bdr-t-4 { border-width: 4px 0px 0px 0px } .bdr-b-4 { border-width: 0px 0px 4px 0px } .bdr-l-5 { border-width: 0px 0px 0px 5px } .bdr-r-5 { border-width: 0px 5px 0px 0px; } .bdr-t-5 { border-width: 5px 0px 0px 0px } .bdr-b-5 { border-width: 0px 0px 5px 0px } .bdr-l-6 { border-width: 0px 0px 0px 6px } .bdr-r-6 { border-width: 0px 6px 0px 0px; } .bdr-t-6 { border-width: 6px 0px 0px 0px } .bdr-b-6 { border-width: 0px 0px 6px 0px } .bdr-l-7 { border-width: 0px 0px 0px 7px } .bdr-r-7 { border-width: 0px 7px 0px 0px; } .bdr-t-7 { border-width: 7px 0px 0px 0px } .bdr-b-7 { border-width: 0px 0px 7px 0px } .bdr-l-8 { border-width: 0px 0px 0px 8px } .bdr-r-8 { border-width: 0px 7px 0px 0px; } .bdr-t-8 { border-width: 8px 0px 0px 0px } .bdr-b-8 { border-width: 0px 0px 8px 0px } .bdr-l-9 { border-width: 0px 0px 0px 9px } .bdr-r-9 { border-width: 0px 9px 0px 0px; } .bdr-t-9 { border-width: 9px 0px 0px 0px } .bdr-b-9 { border-width: 0px 0px 9px 0px } .bdr-l-10 { border-width: 0px 0px 0px 10px } .bdr-r-10 { border-width: 0px 10px 0px 0px; } .bdr-t-10 { border-width: 10px 0px 0px 0px } .bdr-b-10 { border-width: 0px 0px 10px 0px } /*------------------------------------- 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-xl i, .icon-lg i, .icon-md i, .icon-sm i, .icon-xs i { vertical-align: middle; } .icon-xld { width: 120px; line-height: 120px; } .icon-xld i { font-size: 100px; line-height: 100px; } .icon-xld.inline-icon { width: auto; } .icon-xl { width: 100px; line-height: 100px; } .icon-xl i { font-size: 80px; line-height: 80px; } .icon-xl.inline-icon { width: auto; } .icon-lg { width: 80px; line-height: 80px; } .icon-lg i { font-size: 60px; line-height: 60px; } .icon-lg.inline-icon { width: auto; } .icon-md { width: 60px; line-height: 60px; } .icon-md i { font-size: 45px; line-height: 45px; } .icon-md.inline-icon { width: auto; } .icon-sm { width: 40px; line-height: 40px; } .icon-sm i { font-size: 30px; line-height: 30px; } .icon-sm.inline-icon { width: auto; } .icon-xs { width: 30px; line-height: 30px; } .icon-xs i { font-size: 20px; line-height: 20px; } .icon-xs.inline-icon { width: auto; } .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; } .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; } .wt-icon-box-wraper.left .icon-content { overflow: hidden; } /*------------------------------------- 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; } .wt-icon-box-wraper.right .icon-content { overflow: hidden; } /*------------------------------------- 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: #ddd; } .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: auto; left: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .wt-icon-box-wraper.bx-style-2.right [class*="wt-icon-box-"] { position: absolute; top: auto; right: 0; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(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. for images -------------------------------------*/ .wt-thum-bx, .wt-post-thum { background-color: #262423; } .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 { position: relative; } .wt-img-overlay1:before, .wt-img-overlay1:after, .wt-img-overlay2:before, .wt-img-overlay2:after { content: ""; background: #262423; position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0.4; z-index: 0; -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; } .gradi-black:before, .gradi-black:after, .gradi-white:before, .gradi-white:after { content: ""; background: #262423; 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='#26242300000', endColorstr='#a6000000',GradientType=0 );*/ /* IE6-9 */ } .wt-img-overlay2:hover:before, .wt-box:hover .wt-img-overlay2:before { opacity: 0.9; } /*------------------------------------- 2. Gradient-black -------------------------------------*/ .gradi-black:before { width: 100%; height: 100%; opacity: 1; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#26242300000', endColorstr='#262423000', GradientType=0); /* IE6-9 */ } /*------------------------------------- 3. Gradient-white -------------------------------------*/ .gradi-white:before { width: 100%; height: 100%; opacity: 1; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.9) 90%, rgba(255, 255, 255, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.9) 90%, rgba(255, 255, 255, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.9) 90%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#26242300000', endColorstr='#ffffff', GradientType=0); /* IE6-9 */ } /*====================================== 11. shortcodeS ======================================*/ /*------------------------------------- 1. Buttons --------------------------------------- */ /* 1.1 theme default button */ .btn { padding-top: 9px; padding-bottom: 9px; } .site-button, .site-button-secondry { 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:#d5dd02; color: #262423; } .site-button:active, .site-button:hover, .site-button:focus, .active>.site-button { background-color: #d5dd02; color: #262423; } .site-button:hover { background-color: #262423; color: #fff; } .mfp-video.video-play-btn { position: absolute; top: 50%; left: 50%; width: 60px; height: 40px; line-height: 40px; text-align: center; margin: -25px; color: #fff; display: block; z-index: 10; font-size: 14px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .mfp-video.video-play-btn:hover { background-color: #262423; color: #fff; border: 1px solid transparent; } .mfp-video.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: 15px 30px; 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.6 white */ .site-button.white { background-color: #fff; color: #777; } .site-button.white:hover, .site-button.white:active, .site-button.white:focus { background-color: #F4F4F4; color: #333; } /* 1.7 black */ .site-button.black { background-color: #262423; color: #fff; } .site-button.black:hover, .site-button.black:active, .site-button.black:focus { background-color: #171717 !important; color: #fff !important; } /* 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: #333555; 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.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: #ffbc13; border-color: #ffbc13; } /* 1.30 Outline purple */ .site-button.outline.purple { color: #ae1af7; border-color: #ae1af7; } /* 1.31 Outline hover */ .site-button.outline.black:hover { border-color: rgba(0, 0, 0, 0); color: #fff } /* 1.32 button text link */ .site-button-link { display: inline-block; font-weight: 600; text-transform: uppercase; } /* 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: #262423; } /* 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: #333555; } /* 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 */ .masonry-filter { display: table; margin-bottom: 0; } .masonry-filter>li { display: inline-block; margin-right: 30px; position: relative; } .masonry-filter>li a { color: #262423; font-size: 14px; font-weight: 500; } .masonry-filter>li.active a, .masonry-filter>li a:hover, .masonry-filter>li a:active, .masonry-filter>li a:focus { color: #a0a0a0; } @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; } .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: #FFBC13; } /* 1.45(3) Masonry filter button style */ .masonry-filter.button-style>li { margin-right: 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: #262423; 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: #262423; 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: #262423; color: #262423; } .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: #262423; color: #262423; } @media only screen and (max-width:768px) { .masonry-item { width: 100%; } } /* 1.45(5) half effect button outline style */ .btn-half { cursor: pointer; background-color: #d5dd02; z-index: 0; display: inline-block; position: relative; } .btn-half span { color: #fff; display: block; padding-left: 0%; padding-right: 25px; text-transform: uppercase; font-weight: 600; transform: scaleX(0.9); transform-origin: center left; transition: color 0.3s ease; position: relative; z-index: 1; } .btn-half em { position: absolute; height: 1px; background: #fff; width: 15%; right: 23px; top: 50%; transform: scaleX(0.25); transform-origin: center right; transition: all 0.3s ease; z-index: 1; } .btn-half:before, .btn-half:after { content: ''; background-color: rgba(255, 255, 255, 0.2); height: 50%; width: 0; position: absolute; transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .btn-half:before { top: 0; left: 0; right: auto; } .btn-half:after { bottom: 0; right: 0; left: auto; } .btn-half.site-button:hover { background-color: #262423; } .btn-half:hover:before { width: 100%; right: 0; left: auto; } .btn-half:hover:after { width: 100%; left: 0; right: auto; } .btn-half:hover span { color: #fff; } .btn-half:hover em { background: #fff; transform: scaleX(1); } .site-button-secondry:active, .site-button-secondry:hover, .site-button-secondry:focus, .active>.site-button-secondry { background-color: #262423; color: #fff; } .btn-half.site-button-secondry { background-color: #262423; } .btn-half.site-button-secondry span { color: #fff; display: block; padding-left: 0%; padding-right: 25px; text-transform: uppercase; font-weight: 600; transform: scaleX(0.9); transform-origin: center left; transition: color 0.3s ease; position: relative; z-index: 1; } .btn-half.site-button-secondry em { position: absolute; height: 1px; background: #fff; width: 15%; right: 23px; top: 50%; transform: scaleX(0.25); transform-origin: center right; transition: all 0.3s ease; z-index: 1; } .btn-half.site-button:hover { background-color: #262423; } .btn-half.site-button-secondry:hover { background-color: #d5dd02; } .btn-half:hover:before { width: 100%; right: 0; left: auto; } .btn-half:hover:after { width: 100%; left: 0; right: auto; } .btn-half:hover span { color: #fff; } .btn-half:hover em { background: #fff; transform: scaleX(1); } /*------------------------------------- 2. Title separators -------------------------------------*/ .wt-separator-outer { overflow: hidden; } /*Separator defualt*/ .wt-separator { display: inline-block; height: 3px; width: 80px; 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: #262423; font-size: 12px; padding: 15px; letter-spacing: 1px; text-transform: uppercase; border: 0px; position: relative; } .wt-tabs .nav-tabs>li:after { content: ''; position: absolute; left: 100%; bottom: 0px; width: 0px; height: 4px; background-color: #d5dd02; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .wt-tabs .nav-tabs>li.active:after { width: 100%; left: 0; -webkit-transition: width 0.3s ease; transition: width 0.3s ease; } /*.wt-tabs .nav-tabs > li.active > a, .wt-tabs .nav-tabs > li.active > a:focus, .wt-tabs .nav-tabs > li.active > a:hover{background-color:#fff; border-bottom:5px solid #d5dd02; color:#262423;}*/ .wt-tabs .nav>li>a:focus, .wt-tabs .nav>li>a:hover { background-color: transparent; border: 0px; } .wt-tabs .nav li a:hover { border: 1px; } .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.active>a, .wt-tabs.tabs-default.has-bg .nav-tabs>li.active>a:focus, .wt-tabs.tabs-default.has-bg .nav-tabs>li.active>a:hover { color: #262423; 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 { border: 0px; margin-right: -1px; } .wt-tabs.bg-tabs .nav-tabs>li:after { content: ''; position: absolute; left: 100%; bottom: 0px; top: 0px; height: 100%; width: 0px; background-color: #262423; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .wt-tabs.bg-tabs .nav-tabs>li.active:after { width: 100%; left: 0; -webkit-transition: width 0.3s ease; transition: width 0.3s ease; z-index: 0; } .wt-tabs.bg-tabs .nav-tabs>li.active>a { border-bottom: 0px; color: #d5dd02; position: relative; z-index: 1; border-bottom: 0px; background-color: transparent; } .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: 0px; } .wt-tabs.vertical.bg-tabs .nav-tabs>li.active>a { background-color: #262423; color: #d5dd02; border: 0px; } .wt-tabs.vertical.right.bg-tabs .nav-tabs>li>a { border: 1px solid #ddd; } .wt-tabs.vertical.right.bg-tabs .nav-tabs>li.active>a { border-left: 1px solid transparent; } /*4.4 tabs bg & top border [ tabs background & top border in active ] */ .wt-tabs.border-top .nav-tabs>li.active>a { color: #1a1a1a; } .wt-tabs.border-top .nav-tabs>li.active>a:after { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 3px; background-color: #262423; } .wt-tabs.border-top.vertical .nav-tabs>li.active>a:after { top: 0px; left: -1px; width: 3px; height: 100%; } /*4.4 tabs style 2 [ content with border outer ] */ .wt-tabs.border .tab-pane { padding: 10px; border: 1px solid #ddd; margin-top: -1px; } /*4.5 tabs style 3 [ left-nav ] */ .wt-tabs.vertical .nav-tabs { float: left; width: 170px; border-bottom: none; 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; } .wt-tabs.vertical .nav-tabs li a { margin-right: 0; border-right: none; -webkit-border-radius: 0px; -moz-border-radius: 0; border-radius: 0px; color: #262423; border-bottom: 1px solid transparent; } .wt-tabs.vertical .nav-tabs li.active a { border-bottom: 1px solid #d5dd02; background-color: #fff; } .wt-tabs.vertical .tab-content { border-left: 0px; 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.active a { 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; } /*------------------------------------- 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; } .acod-head .fa { margin-right: 5px; } .acod-head a { display: block; padding: 15px 40px 15px 15px; font-size: 14px; font-weight: 500; } .acod-head a, .acod-head a:hover, .acod-head a:active, .acod-head a:focus { color: #262423; } .acod-body { color: #262423; padding-left: 30px; border-left: 2px solid #d5dd02; margin: 10px 0px 10px 20px; } /*Accodian open close indicator css*/ .acod-head .indicator { padding: 15px; color: #262423; position: absolute; right: 0; top: 0; } .acod-head .indicator .fa { position: relative; } /*.acod-head .indicator .fa:after, .acod-head .indicator .fa:before{ position:absolute; content:""; right:0px; top:-4px; height:1px; width:13px; background-color:#262423;}*/ .acc-bg-dark .acod-head .indicator .fa:after, .acc-bg-dark .acod-head .indicator .fa:before { color: #d5dd02; } .acod-head.acc-actives .indicator .fa:before, .acod-head [aria-expanded="false"] .indicator .fa:before { content: "\f067"; font-family: 'FontAwesome'; } .acod-head.acc-actives .indicator .fa:before, .acod-head [aria-expanded="true"] .indicator .fa:before { font-family: 'FontAwesome'; content: "\f068" } .acod-head .collapsed .indicator .fa:before, .acod-head .collapsed [aria-expanded="false"] .indicator .fa:before { content: "\f067"; font-family: 'FontAwesome'; } .acod-head .indicator .fa:before, .acod-head [aria-expanded="true"] .indicator .fa:before { font-family: 'FontAwesome'; content: "\f068" } /* 1. Accordion defult */ .acc-default .acod-title a { padding: 5px 0; border-bottom: 1px solid #ececec; } .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: #262423; } .acc-bg-gray.acc-has-bg .acod-body { color: #fff; } /* 4. Accordion bg primary */ .acc-bg-primary a { background-color: #262423; } .acc-bg-primary .acod-head a, .acc-bg-primary .acod-head a:hover, .acc-bg-primary .acod-head a:active, .acc-bg-primary .acod-head a:focus { color: #fff; } .acc-bg-primary .acod-head .indicator { color: #fff; } .acc-bg-primary.acc-has-bg .acod-body { color: #fff; } /* 5. Accordion bg dark */ .acc-bg-dark a { background-color: #262423; } .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: #262423; } .acc-bg-dark .acod-head .fa { color: #d5dd02; } .acc-bg-dark.acc-has-bg .acod-body { color: #fff; } /*------------------------------------- 6. Carousels -------------------------------------*/ /* 6.1 Client carousel 1*/ .ow-client-logo { display: table; width: 100%; } .client-logo { display: table-cell; text-align: center; vertical-align: middle; } .owl-carousel .ow-client-logo img { max-height: 100%; width: auto; display: inline-block; } .client-logo-media { margin-bottom: 30px; padding: 20px; position: relative; z-index: 1; } .client-logo-media:after, .client-logo-media:before { content: ''; position: absolute; width: 0px; height: 0px; background-color: transparent; border: none; opacity: 0; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .client-logo-media:before { left: 10px; top: 10px; border-top: 4px solid #d5dd02; border-left: 4px solid #d5dd02; } .client-logo-media:after { right: 10px; bottom: 10px; border-bottom: 4px solid #d5dd02; border-right: 4px solid #d5dd02; } .client-logo-media:hover:after, .client-logo-media:hover:before { width: 30px; height: 30px; opacity: 1; } .client-logo-media img { max-width: 100% !important; margin: 0px auto !important; width: auto !important; } .client-logo-media:hover { background-color: #141b1f; } .client-logo-border { border-top: 1px dashed #c5c5c5; border-right: 1px dashed #c5c5c5; } .client-logo-border .client-logo-media { margin-bottom: 0px; border-left: 1px dashed #c5c5c5; border-bottom: 1px dashed #c5c5c5; } /*------------------------------------- 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 { margin: 45px 50px 43px 0px; display: table; vertical-align: middle; } .testimonial-1.testimonial-1-no-img { margin: 45px 0px 43px 0px; } .testimonial-1 .testimonial-text { padding: 0px 80px 120px 0px; text-align: right; overflow: hidden; display: table-cell; vertical-align: bottom } .testimonial-1.testimonial-1-no-img .testimonial-text { padding: 80px 0px 120px 0px; text-align: center; } .testimonial-1.testimonial-1-no-img .testimonial-paragraph { padding-left: 0px; } .testimonial-1 .testimonial-pic-block { display: table-cell } .testimonial-1 .testimonial-pic { width: 360px; height: auto; position: relative; z-index: 1; border: 0px; } .testimonial-1 .testimonial-pic img { border: 8px solid #e7e7e7; } .testimonial-1 .testimonial-pic:after { content: ""; position: absolute; width: 80%; height: 80%; right: -50px; top: -50px; z-index: -1; background-image: url(../images/background/bg-5.png); } .testimonial-1 .testimonial-pic:before { content: ""; position: absolute; width: 80%; height: 80%; left: -50px; bottom: -50px; z-index: -1; background-image: url(../images/background/bg-5.png); } .testimonial-1 .testimonial-name, .testimonial-1 .testimonial-position { display: block; } .testimonial-1 .fa-quote-left, .testimonial-grid-6 .fa-quote-left { font-size: 18px; } .testimonial-1 .testimonial-paragraph p { padding: 0px 0px 15px 0px; font-size: 18px; font-style: italic; } .testimonial-1 .testimonial-name { text-transform: uppercase; } .testimonial-1 .testimonial-position { font-style: normal; text-transform: uppercase; font-size: 12px; letter-spacing: 4px; font-family: 'Roboto', sans-serif; font-weight: 500; } .testimonial-1 .testimonial-position { display: inline-block; position: relative; } .testimonial-1 .testimonial-position:after { content: ""; position: absolute; width: 30px; height: 1px; left: -40px; top: 10px; background-color: #000; } .testimonial-1 .testimonial-detail { padding-left: 0px; padding-right: 0px; } .testimonial-1-thumb { max-width: 240px; position: relative; top: 0px; margin-top: -116px; } .testimonial-1-thumb.center { margin: -116px auto 0px; } .testimonial-1-thumb .owl-item.current:after { position: absolute; content: ""; left: 0px; top: 0px; width: 100%; height: 100%; border: 2px solid #141b1f; z-index: 2; } /*nav*/ .testimonial-1-thumb.owl-carousel .owl-nav { margin-top: 10px; height: 23px; } .testimonial-1-thumb.owl-carousel .owl-nav .owl-prev, .testimonial-1-thumb.owl-carousel .owl-nav .owl-next { color: #000; background: none; } .testimonial-1 .testimonial-paragraph { padding-left: 100px; } .testimonial-1.testimonial-1-no-img .quote-left:before { left: 50%; top: -80px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .testimonial-1 .quote-left:before { font-size: 70px; color: #d5dd02; position: absolute; left: -100px; line-height: 70px; top: 0px; } .testimonial-slider-outer { overflow: hidden; } .testimonial-slider-outer .container { position: relative; } .testimonial-slider-content .test-sli-con-left { float: left; width: 65%; } .testimonial-slider-content .test-sli-con-right { float: left; width: 35%; } @media only screen and (max-width:991px) { .testimonial-1 { margin: 0px; display: block; } .testimonial-1 .testimonial-pic:after { display: none; } .testimonial-1 .testimonial-pic:before { display: none; } .testimonial-1 .testimonial-pic { width: 260px; } .testimonial-slider-outer .container:after { right: auto; left: -50%; } .testimonial-1 .testimonial-pic-block { display: table-caption; text-align: center; } .testimonial-1 .testimonial-text { padding: 40px 0px 15px 0px; text-align: center; display: table-cell; } .testimonial-1 .quote-left:before { font-size: 30px; color: #d5dd02; position: absolute; left: 50%; line-height: 32px; top: -20px; margin-left: -15px; } .testimonial-1 .testimonial-paragraph { padding-left: 0px; } .testimonial-1 .testimonial-paragraph p { padding: 30px 0px 15px 0px; } .testimonial-1-thumb { max-width: 240px; position: relative; top: 0px; margin-top: -90px; margin: 0px auto; } .testimonial-1.testimonial-1-no-img .quote-left::before { left: 50%; top: -11px; } .testimonial-1.testimonial-1-no-img .testimonial-text { padding: 10px 0px 120px 0px; } } @media only screen and (max-width:640px) { .testimonial-1 .testimonial-paragraph p { font-size: 14px; } } /*testimonial-2*/ .testimonial-slider-two { margin-top: 50px; } .testimonial-2 { padding: 0px 2px; text-align: center; margin-bottom: -30px; } .testimonial-2 .testimonial-text { background-color: #fff; padding: 50px; position: relative; } .testimonial-2 .testimonial-text p { margin-bottom: 20px; } .testimonial-2 .testimonial-pic-block { position: relative; width: 100%; left: 0; bottom: 35px; right: 0px; } .testimonial-2 .testimonial-pic { border: 0px; } .testimonial-2 .testimonial-paragraph { position: relative; } .testimonial-2 .quote-left::before, .testimonial-2 .quote-right::after { font-family: "FontAwesome"; position: absolute; z-index: 10; font-size: 36px; opacity: 0.2; } .testimonial-2 .quote-left::before { content: "\f10d"; left: -30px; top: -40px; } .testimonial-2 .quote-right::after { content: "\f10e"; left: auto; right: -30px; top: auto; bottom: 0px; } @media only screen and (max-width:480px) { .testimonial-2 { padding: 0px 0px; } .testimonial-2 .testimonial-text.shadow-lg { box-shadow: none !important; } } /*------------------------------------- 8. Pricing table -------------------------------------*/ .pricingtable-inner { text-align: center; } .pricingtable-price { padding: 10px; background-color: #ffbc13; } .pricingtable-bx { font-size: 70px; font-family: Arial; color: #666666; color: #1a1a1a; } .pricingtable-type { font-size: 20px; text-transform: uppercase; font-size: 24px; color: #fff; } .pricingtable-type:before { content: "/"; margin-right: 3px; } .pricingtable-title { background-color: #1a1a1a; padding: 20px; text-transform: uppercase; } .pricingtable-title * { margin: 0; color: #fff; } .pricingtable-features { margin: 0; padding: 0; list-style: none; border: 1px solid #E9E9E9; } .pricingtable-features li { padding: 12px; 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: #1a1a1a; } .pricingtable-highlight { margin: -20px 0; -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2); 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; } @media only screen and (max-width:420px) { .pricingtable-bx { font-size: 40px; } .pricingtable-type { font-size: 18px; } } /*8.2 pricing table style 4*/ .pricing-table-style-4 .pricingtable-inner { position: relative; overflow: hidden; } .pricing-table-style-4 .pricingtable-inner.radius { -webkit-border-radius: 40px 40px 40px 40px; border-radius: 40px 40px 40px 40px; } .pricing-table-style-4 .pricingtable-bx { font-size: 50px; } .pricing-table-style-4 .pricingtable-type { font-size: 14px; font-style: italic; color: #fff; font-family: 'Crete Round', serif; text-transform: none; } .pricing-table-style-4 .pricingtable-type:before { content: ""; } .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: 20px 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: 10px 10px; } .pricing-table-style-4 .pricingtable-highlight .pricingtable-price { padding: 20px 10px; } .pricing-table-style-4 .pricingtable-price { background-color: inherit; } .pricing-table-style-4 .pricingtable-price span { display: block; } .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; 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: #262423 } .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: #262423 } .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); } /* 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%; } /*------------------------------------- 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: -3px; font-size: 12px; margin: 0px; } .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: #777; } .social-icons.social-dark a { color: #262423000; } .social-icons.social-dark a:hover { color: #fff; } .social-icons.social-dark.has-bg li a:hover { color: #777; } .social-icons.social-square a, .social-icons.social-radius a { 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: #262423; color: #FFF; } .social-icons.social-square.social-primary a:hover, .social-icons.social-radius.social-primary a:hover { background-color: #1a1a1a; } .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: #1a1a1a; 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 #777; } .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: #262423; color: #fff; } .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: #fff; position: relative; display: inline-block; font-size: 12px; } .wt-breadcrumb li a { color: #fff; } .wt-breadcrumb li a:hover { color: #d5dd02; } .wt-breadcrumb li:last-child { color: #fff; } .wt-breadcrumb li:first-child a i { font-size: 18px; vertical-align: text-top; } .wt-breadcrumb li:last-child:after { display: none; } /*13.2 Breadcrumb-1*/ .breadcrumb-style-2 li:after { content: "\f101"; margin-left: 7px; font-family: 'FontAwesome'; color: #fff; font-size: 16px; font-weight: normal; } /*------------------------------------- 14. Google map -------------------------------------*/ .google-map { width: 100%; height: 460px; } /*------------------------------------- 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 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: #fff; border-color: #e1e1e1; padding: 6px 14px; font-size: 16px; } .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: 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.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; } /*------------------------------------- 19. Widgets -------------------------------------*/ .widget { margin-bottom: 40px; } .widget-title { margin: 0 0 25px; text-align: left; } .widget-title { margin-bottom: 20px; } .recent-posts-entry ul { margin: 0; list-style: none; padding: 0; } /* 19.1 widget listing*/ .widget_services ul { list-style: none; padding-left: 0; margin-bottom: 0; } .widget_services ul li { padding-bottom: 18px; margin-bottom: 13px; border-bottom: 1px solid #e1e1e1; position: relative; padding: 15px 10px 15px 0px; margin-bottom: 0; line-height: 20px; } .widget_services ul li:last-child { border-bottom: 0px; padding-bottom: 0px; } .widget_services ul li { font-size: 14px; font-weight: 600; } .widget_services ul li a { color: #000; } .widget_services ul li a:hover { color: #ababab; } .widget_services ul li span { float: right; } /*.widget_services ul li:before { content:"\f101"; position: absolute; left: 0; top:10px; display: block; font-family: "FontAwesome";}*/ .widget_services li li { border-bottom: none; padding-left: 25px; padding-right: 5px; padding-top: 0; padding-bottom: 0; line-height: 28px; } .widget_services li li:before { top: 0; left: 1px; } .widget_services.inline-links li { display: block; border-bottom: none; } /*19.2 widget search custom*/ .search-bx .site-button { border-left-color: #FFF; padding: 9px 15px; color: #262423; background-color: #fff; border: 1px solid #e1e6eb; } .search-bx .input-group .form-control { border-right: 1px solid transparent; } /*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: #ffbc13; 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: 14px; margin-bottom: 0px; margin-top: 0px; line-height: 16px; } .recent-posts-entry .widget-post { margin-bottom: 5px; padding: 5px 0px 5px 0px; } .recent-posts-entry .widget-post-bx:last-child { border-bottom: none; } .recent-posts-entry .widget-post:last-child { margin-bottom: 0px; } .recent-posts-entry .wt-post-media { float: left; width: 90px; } .recent-posts-entry .wt-post-info { background: transparent; padding: 0; margin-left: 105px; border: none; } .recent-posts-entry .post-meta span { margin-right: 10px; } /*19.8 widget tags-list*/ .widget_tag_cloud a { padding: 8px 14px; font-size: 12px; display: inline-block; margin: 0 0 5px; text-transform: uppercase; font-weight: 600; color: #262423; position: relative; background-color: #f4f4f4; } .widget_tag_cloud a:hover { color: #a2a2a2; } /* 19.14 widget gallery */ .widget_gallery .wt-post-thum { background-color: #262423; } .widget_gallery .wt-post-thum a { position: relative; display: block; } .widget_gallery .wt-post-thum:hover a { cursor: crosshair; } .widget_gallery .wt-post-thum:hover img { margin-bottom: 0; opacity: 0.3; } .widget_gallery .wt-post-thum:hover a:after { opacity: 1; } .widget_newsletter-2 .newsletter-bx { background-color: #f6f7f8; text-align: center; } .widget_newsletter-2 .newsletter-bx .newsletter-icon { background-color: #262423; display: block; width: 70px; height: 70px; margin: 0px auto; margin-bottom: 15px; ; border-radius: 50%; text-align: center; } .widget_newsletter-2 .newsletter-bx .newsletter-icon i { font-size: 32px; color: #fff; line-height: 70px; } /* 19.18 widget client slider */ .widget-client { background-color: #f6f7f8; } /*-------widget service-------*/ .widget_address li { margin-bottom: 20px; color: #7e878c; position: relative; } .footer-light .widget_address li { margin-bottom: 20px; color: #262423; position: relative; } .widget_address li i { position: absolute; left: 0px; top: 5px; font-size: 14px; } .widget_address_outer .social-icons li { padding-right: 10px; } /*-------widget newsletter-------*/ .widget_newsletter .newsletter-bx .form-control { background-color: #262423; border: 0px; color: #fff; } /*====footer news letter====*/ .news-letter-footer {} .newsletter-f-left { border-right: 1px solid #ddd; margin-bottom: 30px; } .newsletter-f-left p { margin-bottom: 0px; } .newsletter-f-right { margin-bottom: 30px; } .newsletter-f-right .form-control { padding: 13px; width: 345px; border-radius: 0; border: 1px solid #eee; height: 53px; float: right; margin-right: 20px; } .newsletter-f-right .input-group-btn .site-button { padding: 15px 30px; } @media only screen and (max-width: 1200px) { .newsletter-f-right .form-control { width: 100%; } } @media only screen and (max-width: 991px) { .newsletter-f-left { border-right: 0px; } .newsletter-f-right .form-control { float: none; ; } } /*------------------------------------- 20. Table -------------------------------------*/ /* 20.1 Full-responsive */ .wt-responsive-table td, .wt-responsive-table th { padding: 8px !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; margin: 15px 0px; } #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%; } /*====================================== 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 100px; color: #262423; margin: 0px 0px 30px 0px; position: relative; clear: both; border: none; } blockquote .fa-quote-left { position: absolute; left: 25px; top: 25px; font-size: 50px; color: #d9d9d9; } blockquote p { font-size: 24px; line-height: 32px; } blockquote strong { font-size: 18px; display: block; } blockquote span { font-size: 12px; color: #262423; line-height: 30px; margin-bottom: 0px; font-style: normal; text-transform: uppercase; } @media only screen and (max-width:640px) { blockquote p, blockquote { font-size: 16px; line-height: 22px; } } @media only screen and (max-width:420px) { blockquote { padding: 80px 20px 30px 30px; } } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } /*====================================== 13. BLOG ======================================*/ .blog-post { position: relative; margin-bottom: 30px; } .wt-post-title { margin-bottom: 15px; } .wt-post-title .post-title { margin: 0; } .wt-post-meta { margin-bottom: 10px; } .wt-post-meta ul { margin: 0px; list-style: none; } .wt-post-meta li { padding: 0; display: inline-block; font-size: 13px; font-weight: 400; font-family: 'Poppins', sans-serif; text-transform: uppercase; } .wt-post-meta i { margin: 0 5px; } .wt-post-text { margin-bottom: 15px; } .wt-post-text p a { text-transform: uppercase; font-weight: 600; display: inline-block; } .wt-post-text p:last-child { margin: 0; } .blog-detail .wt-post-text { margin-bottom: 0px; } @media only screen and (max-width:420px) { .masonry-item .wt-post-info { padding-bottom: 0px; } .masonry-item .wt-post-title h2.post-title { line-height: 14px; } .masonry-item .wt-post-title h2.post-title a { font-size: 14px; line-height: none; } .news-grid .wt-post-text { display: none; } } /*post blog*/ .blog-post.blog-md .wt-post-info { padding-left: 120px; } .blog-post.blog-md.blog-no-gap .wt-post-info { padding-left: 90px; padding-right: 0px; padding-bottom: 0px; } .blog-post.blog-md .wt-post-info .wt-post-title { border-bottom: 1px solid #eee; padding-bottom: 15px; } .blog-post.blog-md .wt-post-info .wt-post-meta { position: relative; margin-bottom: 10px; } .blog-post.blog-md .wt-post-info .wt-post-meta .post-date { position: absolute; left: -90px; } .blog-post.blog-md .wt-post-info .wt-post-meta .post-date strong { font-size: 60px; line-height: 50px; font-family: 'Oswald', sans-serif; opacity: 0.3; color: #fff; -webkit-text-fill-color: rgba(0, 0, 0, 0); -ms-text-fill-color: rgba(0, 0, 0, 0); -moz-text-fill-color: rgba(0, 0, 0, 0); -o-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke-width: 2px; -ms-text-stroke-width: 2px; -moz-text-stroke-width: 2px; -o-text-stroke-width: 2px; -webkit-text-stroke-color: #000; -ms-text-stroke-color: #000; -moz-text-stroke-color: #000; -o-text-stroke-color: #000; } .blog-post.blog-md .wt-post-info .wt-post-meta .post-date span { display: block; font-weight: 600; } @media only screen and (max-width:420px) { .blog-post.blog-md .wt-post-info { padding-left: 30px; padding-top: 30px; } .blog-post.blog-md .wt-post-info .wt-post-meta .post-date { position: inherit; left: 30px; } .blog-post.blog-md .wt-post-info .wt-post-meta .post-date strong { padding-bottom: 15px; display: block; line-height: 60px; } } /*------------------------------------- 10. side bar -------------------------------------*/ .side-bar .widget { margin-bottom: 30px; } .widget .widget-post img { width: 100%; } .widget.widget-team p { padding-bottom: 0px; margin-bottom: 0px; } @media only screen and (max-width: 991px) { .side-bar { margin-bottom: 40px; } } /*------------------------------------- 12. comment list -------------------------------------*/ .comments-area { padding: 0; } .comments-area .comments-title { text-transform: uppercase; font-size: 20px; } ol.comment-list { list-style: none; } ol.comment-list li.comment { position: relative; padding: 0; } ol.comment-list li.comment .comment-body { position: relative; padding: 20px 30px 20px 100px; margin-left: 0px; color: #262423; position: relative; border-bottom: 1px solid #e9e9e9; } 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: 0px; width: 80px; height: 80px; background-color: #fff; } ol.comment-list li.comment .comment-author .fn { display: inline-block; color: #262423; font-size: 15px; 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 { margin-bottom: 5px; font-size: 12px; } ol.comment-list li.comment .comment-meta a { color: #262423; } 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 p { margin: 0 0 5px; font-weight: 400; font-size: 14px; } ol.comment-list li.comment .reply { text-align: right; } ol.comment-list li.comment .reply a { font-size: 12px; color: #262423; text-transform: uppercase; font-weight: 600; } ol.comment-list li .children { list-style: none; margin-left: 20px; } ol.comment-list li .children li { padding: 0; } @media only screen and (max-width: 767px) { .comments-area .padding-30 { padding: 15px; } ol.comment-list li.comment .comment-body { margin-bottom: 30px; } ol.comment-list li.comment .comment-author .avatar { left: 0px; 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: -20px; top: 12px; width: 60px; height: 60px; } ol.comment-list li.comment .comment-body { padding-left: 55px; } } @media only screen and (max-width: 380px) { ol.comment-list li.comment .comment-body { padding: 30px 0px; margin: 0px; } ol.comment-list li.comment .comment-author .avatar { position: inherit; left: inherit; right: inherit; margin: 10px 0px 10px 0px; display: block; } } /*------------------------------------- 13. comment form -------------------------------------*/ .comment-respond .comment-reply-title { text-transform: uppercase; font-size: 20px; } .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 .comment-form p input[type="text"], .comments-area .comment-form p textarea { width: 100%; height: 40px; padding: 10px 0px; border: none; background-color: transparent; border-bottom: 1px solid #cccccc; } .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 { padding: 15px 30px; } .comment-form .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #262423; font-size: 12px; text-transform: uppercase; } .comment-form .form-control::-moz-placeholder { /* Firefox 19+ */ color: #262423; font-size: 12px; text-transform: uppercase; } .comment-form .form-control:-ms-input-placeholder { /* IE 10+ */ color: #262423; font-size: 12px; text-transform: uppercase; } .comment-form .form-control:-moz-placeholder { /* Firefox 18- */ color: #262423; font-size: 12px; text-transform: uppercase; } @media only screen and (max-width: 767px) { .comments-area .comment-form p { width: 100%; float: none; margin-bottom: 20px; } } @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; } } /*------------------------------------- 15. blog grid-post -------------------------------------*/ .blog-post .grid-post {} .blog-post .grid-post li { float: left; width: 33.33%; border-right: 4px solid #fff; border-bottom: 4px solid #fff; list-style: none; } .blog-post .grid-post li:first-child { width: 100%; } .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 -------------------------------------*/ .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; } /*------------------------------------- 16. if no image with blog post Latest-blog-2 -------------------------------------*/ .latest-blog-2 { position: relative; z-index: 1; } .latest-blog-2:after { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; z-index: -1; border: 4px solid #d5dd02; -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; } .latest-blog-2:hover:after { opacity: 1; } .mid-size-date .post-date { font-family: 'Oswald', sans-serif; display: block; margin-bottom: 15px; } .latest-blog-2.mid-size-date .wt-post-title { margin-top: 15px; } .latest-blog-2.mid-size-date .post-date strong { font-size: 40px; line-height: 30px; font-weight: 400; } .latest-blog-2.mid-size-date .post-date span { text-transform: uppercase; font-size: 17px; } .latest-blog-2 .wt-post-meta li:after { display: none; } .latest-blog-2 .wt-post-text { margin-bottom: 0px; } /*------------------------------------- 16. Latest-blog-3 -------------------------------------*/ .latest-blog-3-pattern { position: relative; margin-top: 30px; margin-left: 30px; z-index: 1; } .latest-blog-3-pattern:after { position: absolute; content: ""; background-image: url(../images/background/bg-5.png); background-repeat: repeat; left: -30px; top: -30px; width: 80%; height: 80%; z-index: -1; } .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: 520px; } .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: #fff; } .latest-blog-3.large-date .post-date { position: absolute; top: 22px; left: 30px; font-family: 'Oswald', sans-serif; } .latest-blog-3.large-date .post-date strong { font-size: 70px; line-height: 70px; display: block; font-family: 'Oswald', sans-serif; font-weight: 900; opacity: 1; color: #fff; -webkit-text-fill-color: rgba(0, 0, 0, 0); -ms-text-fill-color: rgba(0, 0, 0, 0); -moz-text-fill-color: rgba(0, 0, 0, 0); -o-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke-width: 2px; -ms-text-stroke-width: 2px; -moz-text-stroke-width: 2px; -o-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; -ms-text-stroke-color: #fff; -moz-text-stroke-color: #fff; -o-text-stroke-color: #fff; } .latest-blog-3.large-date .post-date span { text-transform: uppercase; font-size: 19px; display: block; } .latest-blog-3 .wt-post-meta li:after { display: none; } @media only screen and (max-width:991px) { .latest-blog-3.post-overlay { height: 360px; } } @media only screen and (max-width:420px) { .latest-blog-3.large-date .post-date strong { font-size: 50px; line-height: 54px; } .latest-blog-3.large-date .post-date span { font-size: 13px; } .latest-blog-3.post-overlay { height: 400px; } .latest-blog-3.post-overlay .wt-post-info { padding: 20px; } .post-content-outer { padding-right: 0px; } .latest-blog-3.large-date .post-date { top: 20px; left: 20px; } } .blog-social-icon { position: absolute; right: 23px; top: 23px; } .blog-social-icon ul li { display: block; } .blog-social-icon ul li a { display: block; color: #fff; font-size: 16px; ; text-align: center; width: 30px; height: 30px; line-height: 30px; } .blog-social-icon ul li a:hover { color: #d5dd02; } /*====================================== 14. HEADER (top part of page) ======================================*/ .site-header { position: relative; z-index: 999; } @media only screen and (max-width:1200px) { .site-header .container { width: auto; } } .site-header ul, .site-header ol { margin-bottom: 0; } @media only screen and (max-width:991px) { .sticky-wrapper { height: auto !important; } } /*------------------------------------- 1. header full screen -------------------------------------*/ .nav-wide .container { width: 100%; max-width: 100%; } /*------------------------------------- 2. without top bar -------------------------------------*/ .extra-nav { display: table; float: right; height: 70px; position: relative; z-index: 9; } .extra-nav .extra-cell { display: table-cell; padding-left: 20px; vertical-align: middle; } /*------------------------------------- 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; } } /*====================================== 16. LOGO ( company identify symbol ) ======================================*/ /*------------------------------------- 1. logo for header -------------------------------------*/ .logo-header { display: table; float: left; width: 210px; height: 70px; vertical-align: middle; padding: 0; font-size: 36px; color: #1bbce8; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; position: relative; z-index: 11; } .logo-header-inner { display: table-cell; vertical-align: middle; height: 100%; } .logo-header-inner img { max-width: 100%; max-height: 100%; } @media only screen and (max-width:991px) { .logo-header { width: 120px; } } @media only screen and (max-width:480px) { .logo-header { width: 100px; } } .logo-footer { display: table; width: 170px; height: 70px; vertical-align: middle; padding: 0; font-size: 36px; color: #1bbce8; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; position: relative; z-index: 9; } .logo-footer-inner { display: table-cell; vertical-align: middle; height: 100%; } .logo-footer-inner img { max-width: 100%; max-height: 100%; } /*------------------------------------- 2. when header is sticky -------------------------------------*/ .header-fixed .logo-header { height: 70px; } .header-fixed.site-header { position: fixed; width: 100%; border: none; z-index: 990; } .header-fixed .page-content { position: relative; z-index: 1; background-color: #fff; } .header-fixed .main-bar { position: absolute; background: none; } .header-fixed .color-fill.main-bar { background: #141b1f; } /*====================================== 17. MAIN BAR ( place logo & main-navigation ) ======================================*/ .top-bar { color: #262423; padding: 0px; /*background-color:#212427;*/ } .top-bar .fa { vertical-align: middle; 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, .wt-topbar-right, .wt-topbar-center { padding-left: 15px; padding-right: 15px; } .wt-topbar-left { float: left; } .wt-topbar-right { float: right; } .wt-topbar-center { text-align: center; } @media only screen and (max-width: 991px) { .wt-topbar-left, .wt-topbar-right { float: none; padding-top: 5px; padding-bottom: 5px; } } /*------------------------------------- 1. eamil-phone (left) -------------------------------------*/ .e-p-bx li { display: inline; font-size: 14px; padding-right: 10px; } .e-p-bx li a { color: #FFF; } .e-p-bx li i { margin-right: 5px; vertical-align: middle; } /*------------------------------------- 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: #262423; font-size: 14px; } .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: ''; } /*------------- top share icon block ----------------------*/ .share-icon-btn { display: block; } .share-icon-btn .dropdown-menu { padding: 0px 20px; min-width: 60px; top: 53px; left: -10px; } .share-icon-btn .social-bx { clear: both; float: none; margin-left: 0px; } .share-icon-btn .social-bx.list-inline>li { display: block; margin: 10px 0px 15px 0px; } .share-icon-btn2 { display: block; } .share-icon-btn2 .dropdown-menu { padding: 0px 20px; min-width: 60px; top: 53px; left: -10px; } .share-icon-btn2 .social-bx { clear: both; float: none; margin-left: 0px; } .share-icon-btn2 .social-bx.list-inline>li { display: block; margin: 10px 0px; } @media only screen and (max-width: 991px) { .e-p-bx { display: none; } .header-top-info .wt-topbar-right { padding-left: 0px; padding-right: 0px; } .header-top-info .social-bx { margin-left: 0px; } } @media only screen and (max-width:480px) { .header-top-info { display: none; } } /*-----------------------------------*/ .main-bar { position: relative; width: 100%; padding: 10px 25px; -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; } .main-bar::after, .main-bar::after { clear: both; content: ""; display: table; } /*main bar with box view*/ @media only screen and (max-width: 480px) { .main-bar { padding-left: 0px; padding-right: 0px; } } /*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: #1a1a1a; } @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: #1a1a1a; } .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-toggler { float: left; margin: 9px 0; } .header-botton .navbar-toggler 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; } } /*====================================== 18. NAVIGATIONS ======================================*/ /*------------------------------------- 1. mega-menu -------------------------------------*/ .navbar-toggler { border: none; margin-top: 14px; margin-bottom: 14px; margin-left: 15px; margin-right: -10px; padding: 12px 10px; } .navbar-toggler .icon-bar { background: #fff; height: 3px; border-radius: 0; -webkit-border-radius: 0; width: 22px; height: 3px; display: block; } .navbar-toggler .icon-bar+.icon-bar { margin-top: 4px; } @media only screen and (max-width:480px) { .navbar-toggler { margin-left: 10px; } .extra-nav .extra-cell { margin-left: 0; } } .header-nav { position: relative; padding: 0px; z-index: 7; right: 0px; } .header-nav .nav { float: right; display: flex; justify-content: flex-end; flex-direction: inherit; } .header-nav .nav i { font-size: 9px; margin-left: 3px; margin-top: -3px; vertical-align: middle; opacity: 0.7; } .header-nav .nav>li { font-weight: 500; position: relative; text-transform: uppercase; padding: 25px 0; } .header-nav .nav>li>a { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; color: #fff; font-size: 13px; padding: 35px 12px; cursor: pointer; letter-spacing: 2px; margin: -10px 0; font-weight: 800; } .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: #d5dd02; } .header-nav .nav>li:hover>a { color: #d5dd02; } .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: #fff; display: block; left: 0; top: 100%; list-style: none; margin: 8px 0px 0px 0px !important; opacity: 0; padding: 0px; position: absolute; visibility: hidden; width: 220px; z-index: 10; } .header-nav .nav>li .sub-menu li { position: relative; text-transform: none; } .header-nav .nav>li .sub-menu li a { color: #262423; display: block; font-size: 14px; font-weight: 700; padding: 10px 20px; } .header-nav .nav>li .sub-menu li a:hover { color: #262423; text-decoration: none; } .header-nav .nav>li .sub-menu li:hover>a { color: #fff; background-color: #141b1f; } .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; top: 0px; 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: -1px; visibility: visible; } .header-nav .nav>li .sub-menu li:hover>.sub-menu:before { background-color: transparent; bottom: 0px; content: ''; display: block; height: 100%; left: -6px; position: absolute; top: 0px; width: 6px; } .header-nav .nav>li.has-mega-menu { position: inherit; } .header-nav .nav>li .mega-menu 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%; text-transform: none; } .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: #333555; 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; } .header-nav .nav>li .mega-menu>li ul a:hover { color: #1BBCE8; background-color: #F2F2F2; } .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: 220px; margin: 0 0 0 0; } .has-child .submenu-toogle { position: absolute; right: 4px; top: 4px; color: #262423; background-color: transparent; z-index: 900; cursor: pointer; padding: 10px; font-size: 14px; display: none; } .header-nav .has-child li .submenu-toogle { opacity: 0.9; } .header-nav .has-child.nav-active>a+.submenu-toogle.glyphicon-chevron-right:before { content: "\e114"; } /*.header-nav .nav > li:last-child{display:none;}*/ .navbar-toggler { display: block; position: relative; z-index: 10; float: right; outline: none !important } @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: #262423; } } @media only screen and (max-width: 991px) { /* responsive strat when media screen [991px] css START*/ .header-fixed .header-nav .nav { overflow: auto; height: 200px; width: 100% } .navbar-header { float: none; } .navbar-collapse.collapse { display: none !important; } .navbar-collapse.collapse.show { display: block !important; } /* Responsive strat when medai screen [991px] css END*/ .header-nav { clear: both; margin: 0 -15px; border-bottom: 1px solid #E9E9E9; } .header-nav .nav { float: none; margin: 0; background: #fff; display: block; } .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: #262423; } .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; } .header-nav .has-child.nav-active>a+.submenu-toogle.fa-plus:before { content: "\f068"; } } .right-nav-header { display: table-header-group; vertical-align: top; } .right-nav-header .r-nav-h-content { vertical-align: middle; display: table-cell; } .right-nav-footer { display: table-footer-group; } .right-nav-footer .r-nav-f-content { vertical-align: bottom; display: table-cell; } .social-rounded li a { font-size: 14px; color: black; width: 40px; height: 40px; line-height: 40px; border: 1px solid #262423; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; text-align: center; } .social-rounded li a:hover { background-color: #262423; color: #fff; } @media only screen and (max-width: 360px) { .social-rounded.list-inline>li { padding-right: 0px; } } .vertical-content-wrap .right-nav-header, .vertical-content-wrap .vertical-content-area, .vertical-content-wrap .right-nav-footer { position: relative; top: 20px; opacity: 0; } .vertical-content-wrap .right-nav-header { -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .vertical-content-wrap .vertical-content-area { -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .vertical-content-wrap .right-nav-footer { -webkit-transition: all 1.5s ease-in; -moz-transition: all 1.5s ease-in; -ms-transition: all 1.5s ease-in; -o-transition: all 1.5s ease-in; transition: all 1.5s ease-in; } .nav-sidebar.open-sidebar .vertical-content-wrap .right-nav-header, .nav-sidebar.open-sidebar .vertical-content-wrap .vertical-content-area, .nav-sidebar.open-sidebar .vertical-content-wrap .right-nav-footer { opacity: 1; top: 0px; } /*------------------------------------- 2. nav dark version -------------------------------------*/ .nav-dark.header-nav .nav>li .sub-menu, .nav-dark.header-nav .nav>li .mega-menu { background-color: #262423; 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:last-child { border-bottom: 0px; } .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: #222; } .nav-dark.header-nav .nav>li .mega-menu>li ul a:hover { background-color: #23282f; color: #FFBC13; } .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: #FFBC13; } .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; } } /*Nav bar animation*/ #mobile-side-drawer { border: none; background: none; margin-top: 14px; margin-bottom: 14px; margin-left: 15px; margin-right: -6px; padding: 12px 10px; float: right; } #mobile-side-drawer .icon-bar { display: block; width: 22px; background: #fff; height: 3px; border-radius: 0; -webkit-border-radius: 0; } #mobile-side-drawer .icon-bar+.icon-bar { margin-top: 4px; } .mobile-sider-drawer-menu .header-nav { display: none; } .mobile-sider-drawer-menu.active .header-nav { display: block; } .mobile-sider-drawer-menu .icon-bar { -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } #mobile-side-drawer { height: 41px; width: 41px; outline: none; } .mobile-sider-drawer-menu .icon-bar.bar-two { position: relative; right: 0%; } .mobile-sider-drawer-menu.active .icon-bar.bar-two { position: absolute; right: 100px; opacity: 0; } .mobile-sider-drawer-menu.active .icon-bar.bar-one { transform: rotate(45deg) translateX(3px) translateY(2px); } .mobile-sider-drawer-menu.active .icon-bar.bar-three { transform: rotate(-45deg) translateX(3px) translateY(-2px); } /*====Mobile Side =======*/ @media only screen and (max-width: 991px) { .mobile-sider-drawer-menu .header-nav { position: fixed; width: 250px !important; z-index: 999; height: 100vh !important; overflow-y: inherit !important; left: -250px; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .mobile-sider-drawer-menu.active .header-nav { left: 15px; } .mobile-sider-drawer-menu .header-nav .nav { height: 100vh !important; width: 100%; overflow: auto; } .mobile-sider-drawer-menu .header-nav .nav>li>a { padding: 12px 15px !important; } .header-nav .nav>li .sub-menu { border: none; } } /*header style 2*/ .header-style-2 .main-bar { background-color: #fff; } .header-style-2 .header-nav .nav>li>a { color: #000; } .header-style-2 .extra-cell a { color: #000 !important; } .header-fixed.header-style-2 .color-fill.main-bar { background: #fff; } /*------------------------------------- 3. when header is sticky -------------------------------------*/ .sticky-no .main-bar { position: static !important; } @media only screen and (max-width:767px) { .main-bar { padding: 0px; } } /*------------------------------------- 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: #1a1a1a; } .site-bg-primary .site-search-btn, .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-toggler .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: #FFBC13; } .header-nav .nav>li { margin: 0; padding: 0; } .header-nav .nav>li>a { margin: 0; padding: 10px 12px; font-weight: 600; display: block; } } /*====================================== 19. BANNER ======================================*/ /*------------------------------------- 1. inner page banner -------------------------------------*/ .wt-bnr-inr { height: 500px; 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; text-align: center; } .wt-bnr-inr-entry .banner-title-outer { position: relative; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name { display: inline-block; position: relative; padding: 40px 0px; margin-bottom: 20px; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name:before, .wt-bnr-inr-entry .banner-title-outer .banner-title-name:after { content: ''; position: absolute; left: 0px; width: 100%; padding: 30px; border: 10px solid #d5dd02 } .wt-bnr-inr-entry .banner-title-outer .banner-title-name:before { border-bottom: 0px; top: 0px; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name:after { border-top: 0px; bottom: 0px; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2 { position: relative; padding: 0px 70px; font-size: 80px; line-height: 90px; margin-bottom: 5px; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2:after, .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2:before { position: absolute; content: ''; width: 60px; height: 2px; background-color: #fff; transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); } .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2:before { left: -25px; top: 50%; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2:after { right: -25px; top: 50%; } @media only screen and (max-width: 1024px) { .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2 { position: relative; padding: 0px 35px; font-size: 46px; line-height: 50px; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name { padding: 40px 0px; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2:after, .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2:before { width: 40px; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2::before { left: -15px; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2::after { right: -15px; } .wt-bnr-inr { height: 330px; padding-bottom: 30px; padding-top: 120px; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name:before, .wt-bnr-inr-entry .banner-title-outer .banner-title-name:after { padding: 20px; } } @media only screen and (max-width: 540px) { .wt-bnr-inr-entry .banner-title-name h1, .wt-bnr-inr-entry .banner-title-name h2, .wt-bnr-inr-entry .banner-title-name h3 { font-size: 32px; line-height: normal; } } @media only screen and (max-width: 480px) { .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2 { font-size: 24px; line-height: 30px; margin: 0px; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name:before, .wt-bnr-inr-entry .banner-title-outer .banner-title-name:after { padding: 15px; } } .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 ======================================*/ /*Slider Social links*/ .slider-section { position: relative; } .slider-social-right { position: absolute; top: 90px; right: 0px; bottom: 90px; width: 90px; } .slider-social-right ul { position: absolute; left: 50%; top: 50%; min-width: 75vh; text-align: center; -webkit-transform: rotate(-90deg) translateX(-50%) translateY(-50%); -ms-transform: rotate(-90deg) translateX(-50%) translateY(-50%); transform: rotate(-90deg) translateX(-50%) translateY(-50%); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .slider-social-right ul li { display: inline-block; padding-right: 50px; } .slider-social-right ul li:last-child { padding-right: 0px; } .slider-social-right ul li a { color: #fff; display: block; font-size: 14px; font-weight: 600; position: relative; } .slider-social-right ul li a span { font-size: 32px; opacity: 0; left: 50%; top: 50%; position: absolute; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -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; } .slider-social-right ul li a:hover span { top: -100%; opacity: 1; } @media only screen and (max-width: 1024px) { .slider-social-right { position: absolute; top: 70px; right: 20px; bottom: 70px; width: 50px; } .slider-social-right ul { margin-bottom: 0px; } .slider-social-right ul li { display: inline-block; padding-right: 6px; } .slider-social-right ul li a { font-size: 12px; } } @media only screen and (max-width: 767px) { .slider-social-right { position: absolute; top: 70px; right: 0px; bottom: 70px; width: 50px; } } /*------------------------------------- 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: #1a1a1a; 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: #979797; } /*------------------------------------- 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: 40px; } .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 -------------------------------------*/ .owl-prev, .owl-next { background-color: #262423; color: #ffffff; padding: 8px 10px; width: 35px; height: 35px; text-align: center; font-size: 13px; display: inline-block; cursor: pointer; } .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 { padding: 0px; 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, .cvf-universal-pagination .pagination { margin: 0; } .pagination { padding: 10px 0; } .pagination>li:first-child>a, .pagination>li:first-child>span { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: 0; } .pagination>li:last-child>a, .pagination>li:last-child>span { border-bottom-right-radius: 0; border-top-right-radius: 0; } .pagination>li>a, .pagination>li>span { background-color: #fff; border: 1px solid #e0e0e0; color: #767676; font-weight: 600; font-size: 12px; } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { background-color: #262423; border-color: transparent; color: #fff; } .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus { background-color: #262423; border-color: transparent; } .pagination>.previous>a, .pagination>.next>a { font-size: 12px; } /*====================================== 22. FOOTER ======================================*/ /*------------------------------------- 0. footer Large css -------------------------------------*/ .footer-large .container-fluid { padding: 0px 42px; } .footer-large .footer-bottom { padding: 35px 27px; border-top: 1px solid #1e292f; } .footer-logo-bar { display: table; width: 100%; } .footer-logo-bar a, .footer-logo-bar span { display: table-cell; } .footer-logo-bar a { text-align: left; } .footer-logo-bar span { text-align: right; } .footer-social-section { border-bottom: 1px solid #1e292f; } .footer-social-content ul { display: table; width: 100%; margin: 0px; } .footer-social-content ul li { display: table-cell; border-left: 1px solid #1e292f; text-align: center; } .footer-social-content ul li:last-child { border-right: 1px solid #1e292f; } .footer-social-content ul li a { display: block; padding: 30px; color: #d5dd02; font-size: 28px; opacity: 0.3; } .footer-social-content ul li:hover a { opacity: 1; } @media only screen and (max-width: 768px) { .footer-large .container-fluid { padding: 0px 15px; } .footer-large .footer-bottom { padding: 35px 0px; } .footer-logo-bar a { width: 20%; } } @media only screen and (max-width: 480px) { .footer-logo-bar a { display: none; } .footer-logo-bar span { text-align: center; } } @media only screen and (max-width: 540px) { .footer-social-content ul li a { padding: 15px; font-size: 18px; } } /*------------------------------------- 1. footer fixed on bottom css -------------------------------------*/ /*1.1 footer fixed with fullscreen view*/ .footer-fixed .site-footer { position: fixed; width: 100%; bottom: 0; border: none; 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*/ .site-footer .widget>.widget-title { text-transform: uppercase; } .site-footer p, .site-footer li { line-height: 20px; color: white; } .site-footer { background-position: center; background-size: cover; border-top: 1px solid #dadada; } .site-footer p { line-height: 20px; color: white; } .site-footer .widget ul { list-style: none; margin-top: 0px; } .footer-dark .footer-bottom .copyrights-text { color: white; text-align: center; } .footer-dark .footer-bottom .copyrights-nav { list-style: none; display: inline-block; margin-bottom: 0px; } .footer-dark .footer-bottom .copyrights-nav li { display: inline-block; margin-left: 8px; margin-right: 8px; } .footer-dark .footer-bottom .copyrights-nav li:first-child { margin-left: 0; } .footer-dark .footer-bottom .copyrights-nav li:last-child { margin-right: 0; } .footer-dark .footer-bottom .copyrights-nav li:last-child:after { display: none; } .footer-dark .footer-bottom .copyrights-nav li:after { content: "/"; position: relative; right: -8px; } .footer-dark .footer-bottom .copyrights-nav li a { color: #b7b7b7; } .footer-dark .footer-bottom .copyrights-nav li a:hover, .footer-dark .footer-bottom .copyrights-nav li a:active, .footer-dark .footer-bottom .copyrights-nav li a:focus, .footer-dark .footer-bottom .copyrights-nav li.active a { color: #fff; } .footer-dark .widget_services ul li a { color: #7e878c; } .site-footer .widget_services ul li { display: table; width: 100%; padding: 4px 0px; } .site-footer .widget_services ul li a { display: table-cell; width: 50%; font-weight: 400; color: white; } .footer-bottom { padding: 30px 0px; color: #787878; font-size: 13px; } .footer-bottom .copyrights-text { color: #262423; } .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: #262423; } .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: #333333; } @media only screen and (max-width:1200px) { .site-footer .row [class*="col-"]:nth-child(3) { clear: both; } } @media only screen and (max-width:991px) { .site-footer { padding: 0px; } .copyright-block { padding-top: 5px; } } .footer-bottom .container { width: 100%; max-width: 100%; } .footer-bottom.f-bottom-mid .container { max-width: 1140px; } /*------------------------------------- 2. Footer dark version css -------------------------------------*/ .footer-dark.site-footer { border-top: 0px solid #150e07; } .footer-dark .footer-top { background-color: #141b1f; } .footer-dark .footer-bottom { background-color: #141b1f; } .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 { color: white; } .footer-dark .footer-top a:active, .footer-dark .footer-top a:focus, .footer-dark .footer-top a:hover { color: #d5dd02; } .footer-dark .footer-top p a { color: #fff; } .footer-dark .footer-top .widget_newsletter .form-control { background-color: #fff; border-color: #fff; color: white; } .footer-light .footer-top { background-color: #eee; } .footer-light .footer-bottom { background-color: #eee; } .footer-top { padding: 50px 0px 10px 0px; } .footer-wide .container-fluid { width: 100%; max-width: 1170; } .site-footer.footer-dark .recent-posts-entry .wt-post-meta li { color: #fff; } .site-footer.footer-dark .recent-posts-entry .wt-post-header .post-title { color: #7e878c; text-transform: capitalize; font-weight: 400; font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 16px; } .footer-dark .social-icons { margin-top: 50px; } .footer-dark .social-icons li a { color: #262423; color: #d5dd02; font-size: 16px; padding: 6px; } .footer-light .social-icons { margin-top: 50px; } .footer-light .social-icons li a { color: #262423; color: #d5dd02; font-size: 16px; padding: 6px; } .footer-light .footer-social-section { background-color: #eee; border-bottom: 1px solid #dfdfdf; } .footer-light .footer-social-content ul li { border-left: 1px solid #dfdfdf; } .footer-light .footer-social-content ul li:last-child { border-right: 1px solid #dfdfdf; } .footer-light .footer-social-content ul li a { color: #1e292f; } .footer-light.footer-large .footer-bottom { border-top: 1px solid #dfdfdf; } .footer-light .widget_newsletter .newsletter-bx { text-align: left; } .footer-light .widget_newsletter .newsletter-bx .form-control { height: 46px; background-color: #fff; color: #000; } .footer-light .widget_newsletter .newsletter-bx input { padding: 10px; } .footer-light .widget_newsletter .newsletter-bx button { background-color: #1e282e; color: #fff; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; height: 46px; } .footer-light .widget_services ul li a:hover { color: #d5dd02; } .footer-dark .widget_newsletter .newsletter-bx { text-align: left; } .footer-dark .widget_newsletter .newsletter-bx .form-control { height: 46px; } .footer-dark .widget_newsletter .newsletter-bx input { padding: 10px; } .footer-dark .widget_newsletter .newsletter-bx button { background-color: #1e282e; color: #fff; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; height: 46px; } @media only screen and (max-width:1366px) { .footer-wide .container-fluid { width: 100%; max-width: 1170; } } @media only screen and (max-width:991px) { .footer-wide .container-fluid { padding: 0px 80px; } } @media only screen and (max-width:800px) { .footer-wide .container-fluid { padding: 0px 15px; } } /*------------------------------------- 5. widget Getintuch -------------------------------------*/ .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 { text-align: center; } @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 -------------------------------------*/ button.scroltop { height: 40px; width: 40px; background: #262423; border: none; position: fixed; right: 15px; bottom: 15px; text-transform: uppercase; margin: 0; padding: 0; cursor: pointer; display: none; text-align: center; z-index: 999; color: #fff; box-shadow: 0 4px 6px rgba(213, 221, 2, 0.7); /* Box shadow in #d5dd02 color */ } 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; } .page-wraper { background: #fff; } .page-content { position: relative; } .section-full { position: relative; } /*------------------------------------- 1. Section Head Part -------------------------------------*/ .section-head { margin-bottom: 30px; position: relative; z-index: 1; } .section-head h1:after, .section-head h2:after, .section-head h3:after { position: absolute; content: attr(data-title); font-family: 'Oswald', sans-serif; opacity: 0.1; color: #fff; font-weight: 900; font-size: 100px; text-transform: uppercase; top: -50px; left: 50%; width: 100%; z-index: -1; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-text-fill-color: rgba(0, 0, 0, 0); -ms-text-fill-color: rgba(0, 0, 0, 0); -moz-text-fill-color: rgba(0, 0, 0, 0); -o-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke-width: 1px; -ms-text-stroke-width: 1px; -moz-text-stroke-width: 1px; -o-text-stroke-width: 1px; -webkit-text-stroke-color: #000; -ms-text-stroke-color: #000; -moz-text-stroke-color: #000; -o-text-stroke-color: #000; } .section-head.ouline-lite-title h1:after, .section-head.ouline-lite-title h2:after, .section-head.ouline-lite-title h3:after { -webkit-text-stroke-color: #fff; -ms-text-stroke-color: #fff; -moz-text-stroke-color: #fff; -o-text-stroke-color: #fff; } .section-head.no-margin { margin-bottom: 0; } .section-head h1, .section-head h2, .section-head h3 { margin-top: 0; } .wt-small-title { font-size: 22px; text-transform: uppercase; font-family: 'Oswald', sans-serif; color:#d5dd02; } .wt-tilte-main { float: left; padding-right: 50px; } .title-right-detail { padding-left: 50px; overflow: hidden } .title-right-detail p { margin-bottom: 0px; color: #000000; } @media only screen and (max-width:1200px) { .section-head h1:after, .section-head h2:after, .section-head h3:after { font-size: 60px; } } @media only screen and (max-width:991px) { .wt-tilte-main { float: none; padding-right: 0px; border: none; } .title-right-detail { padding-left: 0px; } } @media only screen and (max-width:767px) { .section-head h1:after, .section-head h2:after, .section-head h3:after { display: none; } } .section-head p { padding-top: 10px; font-size: 15px; } .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; } .section-full { padding-top: 40px; padding-bottom: 40px; } .section-full.p-b50 { padding-bottom: 10px; } } @media only screen and (max-width:480px) { .section-head h1, .section-head h2, .section-head h3 { font-size: 22px; } h1, h2, h3, .wt-post-title h1, .wt-post-title h2, .wt-post-title h3 { font-size: 22px; line-height: 28px; } .wt-small-title { font-size: 16px; } } /*====================================== 24. AFTER-LOGIN-CONTENT ======================================*/ /*------------------------------------- 2. Contact us page -------------------------------------*/ 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; } /*====================================== 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; } /*====================================== 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; } .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%; } } .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: #FFBC13; } .star-Rating-input i:hover { color: #FFBC13; } .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 () ======================================*/ @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-toggler, .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-toggler, .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 ======================================*/ /*------------------------------------- 2. Out Team -------------------------------------*/ /*------------------------------------- 4. Product block -------------------------------------*/ .project-detail-containt .wt-media img { width: 100%; } .project-detail-pic img { width: 100%; } .product-block-detail { border-top: 1px solid #ddd; padding-top: 20px; } .product-block-detail ul { list-style: none } .product-block-detail ul li { display: inline-block; padding-right: 50px; color: #000; } .product-block-detail ul li p { color: #000; } @media only screen and (max-width:540px) { .product-block-detail ul li { display: block; padding-right: 0px; } } /*====================================== 33. 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: left; } .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; } /*====================================== 42. Contact Us ======================================*/ .contact-one { position: relative; } .contact-one .form-control { border: 0px; } .contact-one .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #262423; font-size: 12px; text-transform: uppercase; font-weight: 900; } .contact-one .form-control::-moz-placeholder { /* Firefox 19+ */ color: #262423; font-size: 12px; text-transform: uppercase; font-weight: 900; } .contact-one .form-control:-ms-input-placeholder { /* IE 10+ */ color: #262423; font-size: 12px; text-transform: uppercase; font-weight: 900; } .contact-one .form-control:-moz-placeholder { /* Firefox 18- */ color: #262423; font-size: 12px; text-transform: uppercase; font-weight: 900; } .contact-info .icon-content p { word-break: normal; color: #000; } .icon-content a :hover { color:#d5dd02; text-decoration: underline; } .contact-form { position: relative; z-index: 1; margin-bottom: 70px; } @media only screen and (max-width:991px) { .contact-info { margin-bottom: 0px; margin-top: 40px; } .contact-info [class*="col-"]:last-child .wt-icon-box-wraper { margin-bottom: 0px; } } @media only screen and (max-width:767px) { .contact-info { margin-top: 30px; } } /*====================================== 43. Work carousal ======================================*/ /*====preview inner pages ====*/ .work-carousel .owl-item { background-color: #fff; } .work-carousel .owl-item>.item { opacity: 0.6; } .work-carousel .owl-item.active.center>.item { opacity: 1; } .work-carousel .owl-item.active.center { opacity: 1; } .work-carousel { position: relative; z-index: 1; } .work-carousel .wt-img-effect { position: relative; height: 600px; } .work-carousel .wt-img-effect .wt-info { position: absolute; bottom: 50px; width: 50%; left: 50px; padding: 30px; z-index: 2; color: #fff; background-color: rgba(0, 0, 0, 0.5); border: 6px solid #d5dd02; opacity: 0; } .wt-title { color:#d5dd02; } .work-carousel .owl-item.active.center .wt-img-effect .wt-info { opacity: 1; } .work-carousel .wt-img-effect .wt-info .wt-title a { color: #fff; } .work-carousel .wt-img-effect .wt-info a { color: #fff; } @media only screen and (max-width:1136px) { .work-carousel .wt-img-effect .wt-info { padding: 15px; } .work-carousel .wt-img-effect .wt-info h3 { font-size: 16px; line-height: 20px; } } @media only screen and (max-width:991px) { .work-carousel .owl-item.active.center { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @media only screen and (max-width:540px) { .work-carousel .wt-img-effect img { float: none; width: 100%; clear: both; } .work-carousel .wt-img-effect .wt-info { width: auto; left: 30px; right: 30px; bottom: 30px; } } @media only screen and (max-width:420px) { .work-carousel .wt-img-effect .wt-info { left: 15px; right: 15px; bottom: 15px; } } /*========================= 45. awards-win =========================*/ .awards-win-section-left, .awards-win-section-right { padding: 0px; } .awards-win-left-content { float: right; padding-top: 80px; } .awards-win-right-content { float: left; } .awards-win-left-content, .awards-win-right-content { max-width: 555px; width: 100%; } .awards-win { padding: 50px 30px; background-color: #fff; } .awards-win ul { list-style: none; position: relative; padding: 40px 0px; z-index: 1; } .awards-win ul:before { content: ''; position: absolute; left: -80px; top: 0px; width: 120px; height: 100%; border: 10px solid #000; border-right: 0px; z-index: -1; } .awards-win ul:after { content: ''; position: absolute; left: 30px; top: 0px; bottom: 0px; width: 10px; border-top: 40px solid #000; z-index: -1px; border-bottom: 40px solid #000; } .awards-win ul li { position: relative; padding-left: 150px; margin-bottom: 30px; } .awards-win ul li:last-child { margin-bottom: 0px; } .awards-win ul li p { margin-bottom: 0px; } .awards-win ul li .title-year { position: absolute; left: 0px; top: 0px; } @media only screen and (max-width:1199px) { .awards-win-left-content, .awards-win-right-content { max-width: 465px; } } @media only screen and (max-width:991px) { .awards-win-section-left { min-height: 360px; } .awards-win-right-content { max-width: 100%; float: none; } .awards-win-section { display: block; width: 100%; padding: 0px 15px; margin: 0px; ; } .awards-win { margin-left: 0px; padding: 40px 0px; } .awards-win ul::before { left: 0px; width: 90px; } .awards-win ul::after { left: 80px; } .awards-win ul { padding-left: 50px; margin-bottom: 0px; } .awards-win ul li .title-year { margin: 0px; } } @media only screen and (max-width:480px) { .awards-win ul li { position: relative; padding-left: 55px; margin-bottom: 30px; } } /* ===============Team==================*/ .wt-team-arc .wt-media { width: 100%; height: 100%; } .index_card3 { color: #000; } .wt-team-arc .wt-info { position: relative; height: 100%; } .wt-team-arc .wt-info .team-detail { position: relative; z-index: 10; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .wt-team-arc .wt-info .social-icons { font-size: 14px; margin-bottom: 0px; text-align: center; position: absolute; bottom: 20px; width: 100%; } .our-team-two { position: relative; } .our-team-two:after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 40%; background-color: #141b1f; } @media only screen and (max-width:991px) { .our-team-two:after { display: none; } } .wt-team-arc2 { padding: 20px; margin-bottom: 30px; position: relative; z-index: 1 } .wt-team-arc2:after { content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 3px solid #2f3b42; 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; } .wt-team-arc2:hover:after { width: 50%; border: 3px solid #d5dd02; } .wt-team-arc2 .wt-media { position: relative; overflow: hidden; } .wt-team-arc2 .team-social-center { position: absolute; left: -100%; top: 0px; z-index: 2; -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; background-color: #141b1f; height: 100%; } .wt-team-arc2:hover .team-social-center { left: 0%; } .wt-team-arc2 .team-social-icon { list-style: none; margin-bottom: 0px; position: relative; left: 0%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .wt-team-arc2 .team-social-icon li { display: block; margin: 0px 10px; } .wt-team-arc2 .team-social-icon li a { color: #fff; font-size: 14px; width: 30px; height: 30px; line-height: 26px; text-align: center; } .wt-team-arc2 .team-social-icon li a:hover { color: #d5dd02; } .wt-team-arc2 .wt-info { -webkit-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1); } .wt-team-arc2 .wt-info p { font-weight: 400; margin-bottom: 0px; } .wt-team-arc2.team-style2 { margin-top: 100px; } .wt-team-arc2:hover.team-style2 .team-social-center { bottom: -40px; } .wt-team-arc2.team-style2 .wt-media:after { display: none; } .wt-team-arc2.team-style2 .wt-media { padding: 0px; } .wt-team-arc2.wt-team-arc2-no-border { padding: 0px; } .wt-team-arc2.wt-team-arc2-no-border .wt-info { box-shadow: none; padding-bottom: 0px; } .wt-team-arc2.wt-team-arc2-no-border:after { display: none; } /* =============== Project Detail ==================*/ .project-detail-outer .project-detail-pic .wt-media img { width: 100%; } /*=============================================== Modal =============================================== */ .button-model { display: inline-block; } .button-model button { min-width: 200px; text-align: center !important; text-transform: uppercase } .modal-footer button { min-width: inherit; } .button-model button.close { min-width: inherit; color: #fff; opacity: 1; } @media only screen and (max-width:640px) { h2.font-45 { font-size: 32px; line-height: 38px; } h2 a.font-45 { font-size: 32px; line-height: 38px; } } @media only screen and (max-width:360px) { h2.font-45 { font-size: 22px; line-height: 28px; } h2 a.font-45 { font-size: 22px; line-height: 28px; } } /*=============================================== Responsive container =============================================== */ @media only screen and (max-width:420px) { .testimonial-1 { text-align: center; } .testimonial-1 .testimonial-pic-block { float: none; margin-bottom: 20px; } .testimonial-1 .testimonial-text { padding-left: 0px; } } /*------------------------------------- 1. Top Part Search Bar -------------------------------------*/ #search { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -moz-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); -o-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0; display: none; } #search.open { -webkit-transform: translate(0px, 0px) scale(1, 1); -moz-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); -o-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; z-index: 999; display: block; } #search form { position: absolute; top: 50%; left: 0; margin-top: -51px; width: 60%; margin-left: 20%; color: #262423; border: 1px solid rgb(205, 205, 205); font-size: 40px; font-weight: 300; text-align: left; outline: none; padding: 10px; border-radius: 50px; } #search input[type="search"] { background: none; border: none; padding: 0px 30px; font-size: 36px; height: auto; } #search .search-btn { border: none; background: none; padding: 0px 30px; } #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: #262423; right: 20px; top: 0px; } #search .close:after { -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg); } #search .close:before { -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari */ transform: rotate(-45deg); } #search .close:hover:after, #search .close:hover:before { cursor: pointer; } @media only screen and (max-width:768px) { #search form { width: 90%; margin-left: 5%; font-size: 26px; } #search input[type="search"] { padding: 0px 0px 0px 30px; font-size: 24px; } #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 } } /*------------------------------------- 7. extra cell position -------------------------------------*/ /*=============contact Popup =================*/ .contact-slide-hide { position: fixed; right: -100%; top: 0px; height: 100%; width: 100%; background: #fff; color: #262423; z-index: 12; overflow-x: hidden; border-left: 1px solid #ddd; } .contact-nav { display: table; width: 100%; height: 100%; max-width: 800px; margin: 0px auto; } .contact-nav .contact-nav-form { padding-top: 60px; display: table-cell; vertical-align: middle; } .contact-nav .contact_close { position: absolute; right: 20px; top: 20px; width: 100%; border: none; text-align: right; font-size: 36px; } .contact-nav-form .form-control { padding-left: 30px; } .contact-nav-form .wt-inputicon-box { position: relative; } .contact-nav-form .fs-input-icon { position: absolute; left: 0; top: 0; width: 30px; height: 40px; z-index: 5; line-height: 40px; text-align: left; font-size: 16px; } .contact-info ul { list-style: none; } .contact-info ul li { float: left; width: 33.33%; } @media only screen and (max-width:800px) { .contact-info ul li { float: none; width: 100%; } } @media only screen and (max-width:540px) { .contact-slide-hide { right: -100%; width: 100%; } } /*================ Social css=======*/ .social-tooltip:after, .social-tooltip:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; } .social-tooltip:after { border-left-color: #d5dd02; border-width: 6px; margin-top: -6px; } .social-tooltip:before { border-left-color: #d5dd02; border-width: 6px; margin-top: -6px; } .side-social-nav a:hover.socialicon_close { color: #d5dd02; background-color: transparent; border: none; } .side-social-nav a:hover { color: #d5dd02; } .side-social-nav .closebtn { position: absolute; top: 0; right: 0px; font-size: 36px; width: 100%; text-align: right; padding-right: 20px; } @media screen and (max-height: 450px) { .side-social-nav a { font-size: 18px; } .side-social-nav { padding-top: 60px; } } /*====revolution slider link button=======*/ .rev-slider-custom-btn { font-size: 16px; font-weight: 600; color: #d5dd02; margin-left: 80px; } .rev-slider-custom-btn2 { font-size: 16px; font-weight: 600; color: #d5dd02; } /*====our ability counter=======*/ .our-ability [class*="col-"] .wt-icon-box-wraper { position: relative; } .our-ability [class*="col-"] .wt-icon-box-wraper:after { content: ""; position: absolute; height: 50px; width: 1px; top: 0px; right: -15px; background-color: #262423; -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); } .our-ability [class*="col-"]:last-child .wt-icon-box-wraper:after { display: none; } @media only screen and (max-width:991px) { .our-ability [class*="col-"] .wt-icon-box-wraper:after { display: none; } } .wt-team-arc2 .wt-media img { width: 100%; } /*=========== Flat Icons ============*/ .icon-font-block { display: inline-block; width: 9em; margin: 1em; text-align: center; vertical-align: top; background: #FFF; } .icon-font-block .flat-icon { padding: 10px; display: block; font-size: 64px; line-height: 1; } /*=========== bg-change-section ============*/ .bg-change-section { position: relative; } .bg-change-section .overlay-main { z-index: 1; } .bg-changer { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .section-bg { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: -1; } .bg-changer .section-bg:first-child { opacity: 1; } .bg-changer .section-bg { opacity: 0; will-change: opacity, transform; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; -o-transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; } .bg-changer .section-bg.active { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } @media only screen and (max-width:767px) { .bg-change-section .no-col-gap { margin: 0px; } } /*====================================== Clients logo grid ======================================*/ .client-grid { overflow: hidden; } .client-grid [class*="col-"] { position: relative; z-index: 1; } .client-grid [class*="col-"] a { display: block; padding: 10px 20px; text-align: center; } .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; } .client-logo-media+.tooltip { bottom: auto !important; top: 50px !important; z-index: 10; } .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%; } } /*check in check out div*/ .clickable { cursor: pointer; } /*Select bar*/ .select-box { position: relative; } .select-box:after { content: ""; position: absolute; right: 13px; top: 18px; 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; } /*========== Hover box effect =============*/ .hover-box-effect { -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; } .hover-box-effect:hover { background-color: #d5dd02; color: #fff; background-image: url(../images/background/bg-5.png); background-repeat: repeat; } .hover-box-effect:hover .wt-tilte { color: #fff; } .hover-box-effect:hover p { color: #fff; } /*========== Icon Verticle Animation =============*/ .v-icon { display: block; cursor: pointer; text-align: center; position: relative; z-index: 1; overflow: hidden; } .v-icon:before { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; } /* Effect 5 */ .v-icon-effect:hover .v-icon:before { -webkit-animation: toTopFromBottom 0.3s forwards; -moz-animation: toTopFromBottom 0.3s forwards; animation: toTopFromBottom 0.3s forwards; } @-webkit-keyframes toTopFromBottom { 49% { -webkit-transform: translateY(-100%); } 50% { opacity: 0; -webkit-transform: translateY(100%); } 51% { opacity: 1; } } @-moz-keyframes toTopFromBottom { 49% { -moz-transform: translateY(-100%); } 50% { opacity: 0; -moz-transform: translateY(100%); } 51% { opacity: 1; } } @keyframes toTopFromBottom { 49% { transform: translateY(-100%); } 50% { opacity: 0; transform: translateY(100%); } 51% { opacity: 1; } } .slider-text-outline { opacity: 0.3; color: #fff; -webkit-text-fill-color: rgba(0, 0, 0, 0); -ms-text-fill-color: rgba(0, 0, 0, 0); -moz-text-fill-color: rgba(0, 0, 0, 0); -o-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke-width: 2px; -ms-text-stroke-width: 2px; -moz-text-stroke-width: 2px; -o-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; -ms-text-stroke-color: #fff; -moz-text-stroke-color: #fff; -o-text-stroke-color: #fff; } /*====rev-slider====*/ .tp-thumbs-inner-wrapper .tp-thumb.selected:after { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 5px solid #d5dd02; } /*Simple Icon*/ .sl-icons-demo i, .sl-icons-demo span { display: block; text-align: center; margin-bottom: 30px; } .sl-icons-demo i { font-size: 54px; background-color: #f2f2f2; padding: 20px 0px; } /*social-tooltip*/ .social-tooltips-outer li { position: relative; } .social-tooltips-outer a .social-tooltips { padding: 0px 15px; position: absolute; right: 110%; top: 5px; background-color: #d5dd02; color: #262423; display: block; width: auto; text-align: right; display: none; font-family: 'Roboto', sans-serif; font-size: 12px; white-space: nowrap; line-height: 20px; } .social-tooltips-outer a:hover .social-tooltips { display: block; } .social-tooltips-outer .social-tooltips:before { right: -12px; bottom: -6px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; } .social-tooltips-outer .social-tooltips:before { border-left-color: #d5dd02; border-width: 6px; margin-bottom: 10px; } /*arc-home-about-left */ .arc-home-about-left { position: relative; z-index: 1; } .arc-home-about-left:before, .arc-home-about-left:after { content: ''; position: absolute; z-index: -1; height: 80%; width: 80%; background-image: url(../images/background/bg-5.png); background-repeat: repeat; -webkit-animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse; animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse; } .arc-home-about-left:before { -webkit-animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse; animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse; } .arc-home-about-left:after { -webkit-animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse; animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse; } /*animation slide-top*/ @-webkit-keyframes slide-top { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes slide-top { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } /*animation slide-bottom*/ @-webkit-keyframes slide-bottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(10px); transform: translateY(10px); } } @keyframes slide-bottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(10px); transform: translateY(10px); } } .arc-home-about-left:before { left: -2px; bottom: -50px; } .arc-home-about-left:after { right: -2px; top: -50px; } .arc-home-left-content { padding: 40px 30px; margin: 50px 40px; } .arc-home-left-content p { color: #000000; } .wt-tilte-light { font-weight: 300; font-family: 'Raleway', sans-serif; letter-spacing: 2px; text-transform: capitalize; } .arc-home-about-right .row [class*="col-"] { padding-left: 20px; padding-right: 0px; } .arc-home-about-right span.title-small { font-weight: 600; display: block; } .arc-about-year-pic { position: relative; background-color: #fff; } .arc-about-year-pic img { widows: 100%; opacity: 0.1 } .arc-about-year-info { position: absolute; top: 0px; right: 0px; padding: 20px; ; } @media only screen and (max-width:991px) { .arc-home-about-right { margin: 30px -10px -20px -10px; } .arc-home-about-right .row [class*="col-"] { padding: 0px 10px; } } @media only screen and (max-width:768px) { .arc-home-about-left:before { left: 0px; bottom: -50px; } .arc-home-about-left:after { right: 0px; top: -50px; } .arc-about-year { text-align: right; } .arc-home-about-right .row [class*="col-"].masonry-item { width: 50%; } .arc-home-about-right .row [class*="col-"] { padding: 0px 10px; } } @media only screen and (max-width:480px) { .arc-home-about-right .row [class*="col-"].masonry-item { width: 100%; } .arc-home-left-content { margin: 30px 15px; } .arc-home-about-left:after { right: -3px; top: -25px; } .arc-home-about-left:before { bottom: -25px; left: -3px; } .arc-home-about-left:before, .arc-home-about-left:after { height: 79%; } } .text-outline { font-family: 'Oswald', sans-serif; font-size: 90px; line-height: 88px; font-weight: 900; opacity: 0.3; color: #fff; -webkit-text-fill-color: rgba(0, 0, 0, 0); -ms-text-fill-color: rgba(0, 0, 0, 0); -moz-text-fill-color: rgba(0, 0, 0, 0); -o-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke-width: 2px; -ms-text-stroke-width: 2px; -moz-text-stroke-width: 2px; -o-text-stroke-width: 2px; -webkit-text-stroke-color: #000; -ms-text-stroke-color: #000; -moz-text-stroke-color: #000; -o-text-stroke-color: #000; } .data-title-large { position: relative; overflow: hidden; } .data-title-large .wt-tilte-large:after { font-family: 'Poppins', sans-serif; position: absolute; content: attr(data-title); opacity: 0.1; color: #000; font-weight: 700; font-size: 360px; line-height: 360px; text-transform: uppercase; bottom: -90px; right: -40px; z-index: 2; -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; -webkit-text-fill-color: rgba(0, 0, 0, 0); -ms-text-fill-color: rgba(0, 0, 0, 0); -moz-text-fill-color: rgba(0, 0, 0, 0); -o-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke-width: 1px; -ms-text-stroke-width: 1px; -moz-text-stroke-width: 1px; -o-text-stroke-width: 1px; -webkit-text-stroke-color: #000; -ms-text-stroke-color: #000; -moz-text-stroke-color: #000; -o-text-stroke-color: #000; } .data-title-large p { margin-bottom: 15px; } @media only screen and (max-width:1200px) { .text-outline { font-size: 80px; line-height: 75px; display: block; } .arc-about-year-info .wt-title { font-size: 24px; line-height: 28px; } } @media only screen and (max-width:991px) { .text-outline { font-size: 100px; line-height: 100px; display: block; } .arc-about-year-info .wt-title { font-size: 46px; line-height: 56px; } .arc-about-year-info { right: 10px; } } @media only screen and (max-width:768px) { .text-outline { font-size: 80px; line-height: 80px; display: block; } .arc-about-year-info .wt-title { font-size: 24px; line-height: 28px; } } @media only screen and (max-width:480px) { .text-outline { font-size: 100px; line-height: 100px; } } .box-shadow { -webkit-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1); } .data-title-large:hover .wt-tilte-large:after { opacity: 0.5; } /*custom-block-outer*/ .custom-block-outer { display: block; width: 100% } .custom-left-part, .custom-right-part { display: block; float: left; } .custom-left-part { width: 50%; } .custom-right-part { width: 50%; } .custom-right-part-content { padding-left: 30px; } /*verticle slider*/ .verticle-center-slider-block-outer { margin: 0px 30px 0px 0px; max-width: 525px; float: right; } .verticle-center-slider-block { margin: 50px 0px; } .verticle-center-slider-block .wt-box { position: relative; width: 100%; background-color: #fff; } .verticle-center-slider-block .wt-box img { width: 100%; opacity: 0.6 } .slick-slide.slick-current .verticle-center-slider-block .wt-box img { width: 100%; opacity: 1 } .verticle-center-slider-block .wt-box a { position: absolute; background-color: rgba(0, 0, 0, 0.4); color: #fff; padding: 15px; text-align: center; font-weight: 600; right: 15px; left: 15px; bottom: 15px; display: none; } .slick-slide.slick-current .verticle-center-slider-block .wt-box a { display: block; } .slick-slide.slick-current .verticle-center-slider-block .wt-box a.mfp-link { position: absolute; right: 10px; top: 10px; width: 50px; height: 50px; left: auto; background-color: rgba(0, 0, 0, 0.7); } .slick-slide.slick-current .verticle-center-slider-block .wt-box a.mfp-link i { font-size: 22px; } .vertical-center-slider .slick-list { padding: 155px 0px !important } /*video section*/ .video-section-outer { max-width: 520px; } .video-section { position: relative; } /*Slick Verticle Navigation*/ .slick-vertical .slick-next { top: 14px; left: 50%; right: auto; } .slick-vertical .slick-prev { bottom: -14px; top: auto; left: 50%; } .slick-vertical .slick-next, .slick-vertical .slick-prev { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; width: auto; padding: 4px 20px; background-color: #000; height: auto; } .slick-vertical .slick-next:before { content: '\f077'; font-family: 'FontAwesome'; } .slick-vertical .slick-prev:before { content: '\f078'; font-family: 'FontAwesome'; } /*Slick default Navigation*/ .slick-next { top: 50%; right: -12px; } .slick-prev { top: 50%; left: 11px; } .slick-next, .slick-prev { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; width: auto; padding: 20px 4px; background-color: #000; height: auto; } .slick-next:before { content: '\f054'; font-family: 'FontAwesome'; } .slick-prev:before { content: '\f053'; font-family: 'FontAwesome'; } @media only screen and (max-width:1199px) { .verticle-center-slider-block { margin: 80px 0px; } .vertical-center-slider .slick-list { padding: 160px 0px !important } .verticle-center-slider-block-outer { padding: 0px 15px 0px 15px; float: none; margin: 0px; max-width: 960px; margin: 0px auto; } .video-section-outer { max-width: 100%; margin: 0px 15px; } .custom-right-part-content { padding-left: 0px; } .custom-right-part-content .section-head .wt-tilte-main { margin-top: 0px; } .custom-left-part { float: none; width: 100%; } .custom-right-part { float: none; width: 100%; max-width: 960px; margin: 0px auto; } .video-section img { width: 100%; } .vertical-center-slider .slick-list { padding: 0px 0px !important } .our-ability { margin: 80px 0px 45px 0px; } } @media only screen and (max-width:1136px) { .video-section-outer .our-ability .counter { font-size: 32px; line-height: 38px; margin-top: 0px; } .video-section-outer .our-ability .wt-icon-box-wraper .wt-tilte { font-size: 18px; line-height: 24px; } } @media only screen and (max-width:1024px) { .our-ability { margin: 40px 0px 5px 0px; } } @media only screen and (max-width:991px) { .verticle-center-slider-block-outer { max-width: 720px; } .custom-right-part { width: 100%; max-width: 690px; } .video-section img { width: 100%; } .custom-block-outer { display: block; } .video-section-outer { max-width: 100%; margin: 0px; } .our-ability { margin-bottom: 15px; } .custom-right-part-content { padding-top: 40px; } } @media only screen and (max-width:767px) { .custom-right-part-content { padding-top: 40px; } .custom-right-part-content .wt-tilte-main { margin-top: 0px; } .verticle-center-slider-block-outer { max-width: 540px; } .custom-right-part { width: 100%; max-width: 510px; } } @media only screen and (max-width:576px) { .verticle-center-slider-block-outer { max-width: 100%; margin: 0px auto; } .custom-right-part { width: 100%; max-width: 100%; padding: 0px 15px; } } /*====================================== animated play btn ======================================*/ .play-now .icon { position: absolute; left: 50%; top: 50%; height: 65px; width: 65px; text-align: center; line-height: 65px; background-color: #ffffff; color: #333333; z-index: 1; font-size: 20px; padding-left: 5px; display: block; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform-origin: center; transform-origin: center center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 5px 10px 0 rgba(255, 255, 255, .1); -moz-box-shadow: 0 5px 10px 0 rgba(255, 255, 255, .1); -ms-box-shadow: 0 5px 10px 0 rgba(255, 255, 255, .1); -o-box-shadow: 0 5px 10px 0 rgba(255, 255, 255, .1); box-shadow: 0 5px 10px 0 rgba(255, 255, 255, .1); } .play-now .ripple, .play-now .ripple:before, .play-now .ripple:after { position: absolute; top: 50%; left: 50%; height: 65px; width: 65px; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform-origin: center; transform-origin: center center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .3); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .3); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .3); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .3); box-shadow: 0 0 0 0 rgba(255, 255, 255, .3); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .play-now .ripple:before { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -ms-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; content: ""; position: absolute; } .play-now .ripple:after { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; content: ""; position: absolute; } @-webkit-keyframes ripple { 70% { box-shadow: 0 0 0 70px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes ripple { 70% { box-shadow: 0 0 0 70px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .slider-play-icon .play-now { right: 30%; left: auto; top: 45%; } /*verticle align text*/ .v-title-outer { position: relative; } .v-title-outer .v-title { position: absolute; z-index: 1; left: 40px; bottom: 0px; top: 0px; } .v-title-outer .v-title span { position: absolute; font-family: 'Oswald', sans-serif; color: #fff; font-weight: 900; font-size: 100px; line-height: 100px; text-transform: uppercase; top: 50%; left: 0%; opacity: 0.4; display: block; z-index: 2; -webkit-transform: rotate(-90deg) translateX(-50%); -ms-transform: rotate(-90deg) translateX(-50%); transform: rotate(-90deg) translateX(-50%); -webkit-text-fill-color: rgba(0, 0, 0, 0); -ms-text-fill-color: rgba(0, 0, 0, 0); -moz-text-fill-color: rgba(0, 0, 0, 0); -o-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke-width: 1px; -ms-text-stroke-width: 1px; -moz-text-stroke-width: 1px; -o-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; -ms-text-stroke-color: #fff; -moz-text-stroke-color: #fff; -o-text-stroke-color: #fff; -webkit-transform-origin: 0 top; -ms-transform-origin: 0 top; transform-origin: 0 top; } @media only screen and (max-width:1440px) { .v-title-outer .v-title { left: 10px; } .v-title-outer .v-title span { font-size: 50px; line-height: 50px; } } @media only screen and (max-width:1280px) { .v-title-outer .v-title span { display: none; } } /*projects image effects*/ .project-img-effect-1 { position: relative; overflow: hidden; width: 100%; color: #fff; text-align: center; background-color: #000000; line-height: 1.5em; } .project-img-effect-1 *, .project-img-effect-1 *:before, .project-img-effect-1 *:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; } .project-img-effect-1 img { width: calc(120%); backface-visibility: hidden; vertical-align: top; max-width: none; } .project-img-effect-1 .wt-info { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-25%); transform: translateY(-25%); padding: 5px 40px; opacity: 0; } .project-img-effect-1 i { position: absolute; height: 55px; width: 55px; bottom: 0; right: 0; background-color: #d5dd02; -webkit-transform: translateX(55px); transform: translateX(55px); } .project-img-effect-1 i:after { position: absolute; content: ''; left: 22px; top: 28px; width: 14px; height: 2px; background-color: #000; } .project-img-effect-1 i:before { position: absolute; content: ''; left: 50%; top: 22px; width: 2px; height: 14px; background-color: #000; } .project-img-effect-1 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .project-img-effect-1:hover img { zoom: 1; filter: alpha(opacity=30); -webkit-opacity: 0.3; opacity: 0.3; -webkit-transform: translateX(-40px); transform: translateX(-40px); } .project-img-effect-1:hover .wt-info { -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; } .project-img-effect-1:hover i { -webkit-transform: translateX(0); transform: translateX(0); } .projects-two-info { border: 1px solid rgba(255, 255, 255, 0.1); padding: 155px 30px 30px 30px; /* margin-right: 70px; */ position: relative; z-index: 1; } .projects-two-info:after { content: ''; position: absolute; left: 100%; bottom: 0px; top: 0px; height: 100%; width: 0px; z-index: -1; background-color: #1d262c; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .projects-two-info:hover:after { width: 100%; left: 0; -webkit-transition: width 0.3s ease; transition: width 0.3s ease; z-index: -1; } .projects-two-info.bg-white:hover .wt-tilte a, .projects-two-info.bg-white:hover p { color: #fff; } .projects-two-info.bg-white:hover .wt-tilte a:hover { color: #d5dd02; } .projects-two-info .wt-media { margin-top: 30px; margin-right: -100px; } .projects-two-info .wt-tilte { position: relative; z-index: 1; } .projects-two-info .wt-tilte:after { font-family: 'Poppins', sans-serif; position: absolute; content: attr(data-title); opacity: 0.3; color: #000; font-weight: 700; font-size: 100px; line-height: 110px; text-transform: uppercase; bottom: 50px; left: 0px; z-index: -1; -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; -webkit-text-fill-color: rgba(0, 0, 0, 0); -ms-text-fill-color: rgba(0, 0, 0, 0); -moz-text-fill-color: rgba(0, 0, 0, 0); -o-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke-width: 1px; -ms-text-stroke-width: 1px; -moz-text-stroke-width: 1px; -o-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; -ms-text-stroke-color: #fff; -moz-text-stroke-color: #fff; -o-text-stroke-color: #fff; } .projects-two-info.bg-white .wt-tilte:after { -webkit-text-stroke-color: #000; -ms-text-stroke-color: #000; -moz-text-stroke-color: #000; -o-text-stroke-color: #000; } .projects-two-info.bg-white:hover .wt-tilte:after { -webkit-text-stroke-color: #fff; -ms-text-stroke-color: #fff; -moz-text-stroke-color: #fff; -o-text-stroke-color: #fff; } /*hover block section*/ .block-bg-hover { position: relative; z-index: 1; } .block-bg-hover:after { content: ''; position: absolute; left: 100%; bottom: 0px; top: 0px; height: 100%; width: 0px; z-index: -1; background-color: #1d262c; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .block-bg-hover:hover:after { width: 100%; left: 0; -webkit-transition: width 0.3s ease; transition: width 0.3s ease; z-index: -1; } .block-bg-hover:hover, .block-bg-hover:hover .wt-tilte-large, .block-bg-hover:hover a { color: #fff; } /* .block-bg-hover:hover a:hover { color: #d5dd02; } */ /* .wt-icon-box-wraper p:hover{ color: white; } */ .block-bg-hover:hover p:hover{ color:white; } .block-bg-hover:hover .wt-tilte-large::after { -webkit-text-stroke-color: #f6f7f8; -ms-text-stroke-color: #f6f7f8; -moz-text-stroke-color: #f6f7f8; -o-text-stroke-color: #f6f7f8; } /*home-2-about*/ .home-2-about-left { position: relative; z-index: 1; padding-top: 50px; } .home-2-about-left:after { position: absolute; content: ''; border: 20px solid #d8d8d8; right: -50px; top: 0px; bottom: 50px; width: 100%; z-index: -1; } .home-2-about-left-outer { position: relative; z-index: 1 } .home-2-about-slider-outer { margin-left: -100px; position: relative; z-index: 0; } .home-2-about-slider { margin: 0px; } @media only screen and (max-width:991px) { .home-2-about-left { margin-bottom: 40px; padding-top: 0px; } .home-2-about-slider-outer { margin-left: 0px; } .home-2-about-left:after { display: none; } } @media only screen and (max-width:480px) { .home-2-about-left-content { padding: 20px; } } /*------------------------------------- 1.2 owl dots button -------------------------------------*/ .number-dot.owl-carousel .owl-dots { counter-reset: owl-dot; position: absolute; left: 50%; margin: 30px 0px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .number-dot.owl-carousel .owl-dots .owl-dot { position: relative; list-style: none; display: block; height: 20px; line-height: 20px; text-align: center; } .number-dot.owl-carousel .owl-dots .owl-dot:before { content: counter(owl-dot, decimal); counter-increment: owl-dot; position: absolute; color: #141b1f; font-size: 16px; left: 5px; top: 0px; font-weight: 600; } .number-dot.owl-carousel .owl-dots .owl-dot span { background: none; border: none; margin: 0px; } .number-dot.owl-carousel .owl-dots .owl-dot { position: relative; overflow: hidden; display: inline-block } .number-dot.owl-carousel .owl-dots .owl-dot span { position: relative; left: 15px; top: 9px; height: 2px; border-radius: 0px; min-width: 10px; margin: 0px 2px; background: #d5dd02; 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; -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; } .number-dot.owl-carousel .owl-dots .owl-dot.active span { min-width: 50px; } .number-dot .owl-dots .owl-dot.active:before { color: #262423; } .number-dot .owl-dots .owl-dot:hover:before { color: #262423; } /* Main wrapper */ .main-wrapper { text-align: center; padding: 50px 20px; } /* Page heading */ .page-heading { font-size: 36px; color:#d5dd02; margin-bottom: 40px; } /* Content Wrapper */ .content-wrapper { display: flex; flex-direction: column; gap: 40px; /* Add space between sections */ } /* Content left and right styles */ .content-left, .content-right { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .content-left .content-image, .content-right .content-image { width: 630px; height:270px; object-fit: cover; } .content-left .content-text, .content-right .content-text { max-width: 50%; padding: 20px; } /* Text Styles */ .content-text h3 { font-size: 28px; color:#d5dd02; margin-bottom: 10px; } .content-text p { font-size: 16px; color: #000; text-align: left; } /* Flexbox Layout - Content Left and Right */ .content-left { flex-direction: row; /* Image on the right, text on the left */ } .content-right { flex-direction: row-reverse; /* Image on the left, text on the right */ } /* Responsiveness for small screens */ @media screen and (max-width: 768px) { /* Stack content sections vertically on smaller screens */ .content-left, .content-right { flex-direction: column; align-items: center; justify-content: center; } /* Full-width images on small screens */ .content-image { width: 100%; height: auto; } /* Full width text section */ /* Adjust heading size for smaller screens */ .page-heading { font-size: 28px; } /* Adjust text size for smaller screens */ .content-text h3 { font-size: 24px; } .content-text p { font-size: 16px; } } .container1 { display: flex; justify-content: space-between; /* Space between the divs */ gap: 20px; /* Space between each section */ padding-top: 50px; } .mission-section, .vision-section, .team-section { width: 30%; /* Each section takes up 30% of the container's width */ text-align: left; border: 1px solid #ddd; padding: 20px; box-sizing: border-box; height: 300px; } .mission-section p, .vision-section p, .team-section p { color: #000; } .mission-logo, .vision-logo, .team-logo { margin-bottom: 10px; } .mission-logo img, .vision-logo img, .team-logo img { width: 50px; height: 50px; } .mission-heading { font-size: 1.5em; color:#d5dd02; /* Example color for 'Mission' */ margin-bottom: 10px; } .vision-heading { font-size: 1.5em; color:#d5dd02; /* Example color for 'Vision' */ margin-bottom: 10px; } .team-heading { font-size: 1.5em; color:#d5dd02; /* Example color for 'Core Team' */ margin-bottom: 10px; } p { font-size: 1em; color: #555; } .cards-heading { text-align: center; font-size: 2em; color: #d5dd02; margin-bottom: 30px; } /* Cards container styling */ .cards-container { display: flex; flex-direction: column; align-items: center; padding: 20px; } /* Row for cards */ .cards-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; width: 100%; margin: 0 auto; max-width: 1200px; /* Optional, restricts maximum width of row */ } /* Individual card styling */ .card { flex: 1 1 30%; /* Flexbox: Each card will take 30% of the width by default */ box-sizing: border-box; background-color: #f7f7f7; border-radius: 10px; margin-bottom: 20px; padding: 20px; height: auto; display: flex; flex-direction: column; justify-content: space-between; transition: box-shadow 0.3s ease; } /* Card logo styling */ .card-logo img { width: 60px; height: 60px; margin-bottom: 15px; } /* Card heading styling */ .card-heading { font-size: 1.5em; color: #d5dd02; margin-bottom: 10px; } /* Card content styling */ .card-content { font-size: 1em; color: #000; margin-bottom: 10px; } /* Hover effect for card shadow */ .card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } /* Media Queries for responsiveness */ /* Tablets and below (screen width < 1024px) */ @media (max-width: 1024px) { .card { flex: 1 1 45%; /* Two cards per row */ margin-bottom: 20px; } } /* Mobile screens (screen width < 768px) */ @media (max-width: 768px) { .card { flex: 1 1 100%; /* One card per row */ margin-bottom: 20px; } } /* General container for alignment */ /* Card with background image */ .architect-container { display: flex; justify-content: center; align-items: center; padding: 20px; background-color: #f9f9f9; /* Light background */ } .architect-content { display: flex; max-width: 1200px; width: 100%; gap: 20px; /* Adds spacing between text and image */ background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; } /* Text Section */ .architect-text { flex: 1; padding: 20px; box-sizing: border-box; } .architect-text p { color: #000000; font-size: 15px; } .architect-card-title { font-size: 24px; margin-bottom: 15px; color:#d5dd02; text-align: left; } .rchitect-card-title p { text-align: left; } /* Image Section */ .architect-image { flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; } .architect-image img { width: 600px; height: 450px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* Responsive Styles */ @media (max-width: 768px) { .architect-content { flex-direction: column; /* Stacks text and image vertically */ } .architect-text, .architect-image { flex: none; width: 100%; padding: 15px; } .architect-card-title { font-size: 20px; text-align: center; /* Centers title on small screens */ } .architect-card-list { text-align: center; /* Centers list on small screens */ } } @media (max-width: 480px) { .architect-card-title { font-size: 18px; } .architect-card-list li { font-size: 14px; } } /* Full-width section styling */ /* Full-width section styling */ .fullwidth-section { width: 100%; background-color: #f9f9f9; padding: 22px 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; } /* Container for the heading and list */ .content-container { max-width: 1200px; /* Restrict the width for readability */ width: 100%; /* Ensures it uses full width up to max-width */ padding: 0 0px; /* Add padding to ensure spacing on both sides */ text-align: center; box-sizing: border-box; /* Ensure padding does not affect width */ } /* Section Heading */ .section-heading { font-size: 2.5em; /* font-weight: bold; */ color:#d5dd02; margin-bottom: 30px; text-align: center; } .section-heading1 { font-size: 2.5em; /* font-weight: bold; */ color:#d5dd02; margin-bottom: 30px; text-align: center; background-color: #f8f9fa; } /* Row for columns */ .content-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; /* Space between columns */ } /* Column styling */ .col-6 { flex: 1 1 calc(50% - 20px); /* 50% width minus the gap */ max-width: calc(50% - 20px); /* Ensure column stays responsive */ text-align: left; } /* Content List */ .content-list { list-style-type: disc; margin: 0; padding: 0; font-size: 15px; line-height: 24px; color: #000000; } /* List items */ .content-list li { margin-bottom: 15px; } /* Responsive Adjustments */ /* For small screens (mobile) */ @media (max-width: 768px) { .col-6 { flex: 1 1 100%; /* Full-width for mobile */ max-width: 100%; } .content-list { padding: 0; } } /* Centering text and paragraphs in the container */ .content-container-para { text-align: center; color: #000; /* Add left padding */ padding-right: 30px; /* Add right padding */ font-size: 15px; } @media (max-width: 768px) { .section-heading { font-size: 28px; } .content-container-para { font-size: 16px; } .content-row { flex-direction: column; } .col-6 { width: 100%; } } @media (max-width: 480px) { .section-heading { font-size: 24px; } .content-container-para { font-size: 15px; text-align: left; } .content-list li { font-size: 14px; } } .team { color:#d5dd02; } .alert-success { color: #d5dd02; background-color: white; border-color: #badbcc; margin-top: 15px; padding: 15px; text-align: center; } /* Style for the radio buttons container */ .form-group p { font-weight: bold; margin-bottom: 10px; } /* Group the radio buttons horizontally */ .radio-group { display: flex; gap: 20px; /* Space between the radio buttons */ align-items: center; /* Vertically align the radio buttons */ } /* Style for each radio button label */ label { font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; position: relative; /* Allow absolute positioning of the checkmark */ } /* Hide the default radio button */ input[type="radio"] { display: none; /* Hide the default radio button */ } /* Custom radio button styles */ label::before { content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; border: 2px solid #007bff; /* Border color for the circle */ background-color: #fff; /* Background color for the unselected radio button */ transition: background-color 0.3s, border 0.3s; } /* Checked radio button appearance */ input[type="radio"]:checked+label::before { background-color: #007bff; /* Blue color when selected */ border-color: #007bff; /* Blue border when selected */ } /* Add a tick icon inside the checked radio button */ input[type="radio"]:checked+label::after { content: ''; /* Unicode checkmark character */ color: white; position: absolute; font-size: 14px; top: 2px; left: 6px; } /* Hover effect for radio labels */ label:hover::before { border-color: #0056b3; /* Darker blue border on hover */ } /* Focus effect to make the radio button stand out */ input[type="radio"]:focus+label::before { border: 2px solid #0056b3; } /* Optional: Adding a focus effect to improve accessibility */ input[type="radio"]:focus { outline: none; } /* #phone_number { width: 333px; height: 40px; } */ .captcha-container { display: flex; align-items: center; gap: 10px; margin: 10px 0; } .captcha-box { display: flex; align-items: center; justify-content: center; width: 300px; /* Fixed width */ height: 45px; /* Fixed height */ background-color: #f1f1f1; font-size: 24px; /* Consistent font size */ font-weight: bold; font-family: "Courier New", Courier, monospace; /* Monospaced font for consistent appearance */ color: #333; text-align: center; border: 1px solid #ccc; border-radius: 5px; transition: opacity 0.3s ease-in-out; /* Smooth transition for fade effects */ margin-left: 15px; margin-bottom: 20px; } .refresh-button { display: flex; align-items: center; justify-content: center; width: 80px; /* Fixed width */ height: 41px; /* Fixed height */ background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; margin-bottom: 20px; } .refresh-button i { font-size: 18px; /* Adjust icon size */ color: #555; } .refresh-button:hover { background-color: #e9e9e9; color: #000; } .captcha-input { flex: 1; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; height: 40px; /* Match the height of the CAPTCHA box */ margin-bottom: 20px; width: 300px; } /* Main section styling */ .privacy-section { background-color: #f5f5f5; /* Light gray background */ padding: 80px 0 50px; /* Top and bottom padding */ } /* Container for central alignment */ .privacy-container { max-width: 1200px; /* Limit the width of the content */ margin: 0 auto; /* Center horizontally */ padding: 0 20px; /* Add side padding for smaller screens */ } /* Individual section styling */ .privacy-item { margin-bottom: 40px; /* Space between sections */ } /* Heading styling */ .privacy-heading { font-size: 24px; font-weight: bold; color: #333; /* Dark text color */ margin-bottom: 10px; /* Space below heading */ } /* Paragraph styling */ .privacy-text { font-size: 15px; line-height: 1.6; /* Improve readability */ color: #000; /* Medium gray for text */ margin-bottom: 20px; /* Space below paragraph */ } .privacy-text a:hover { color:#d5dd02; text-decoration: underline; } /* Horizontal divider styling */ /* Horizontal divider styling */ .privacy-divider { border: 1px solid #000; height: 1px; background-color: #000; /* Black color */ margin: 20px 0; /* Space above and below the divider */ } .widget_address { list-style: none; /* Remove default list styling */ padding-right: 20px; margin: 0; } .widget_address li { display: flex; /* Use flexbox for alignment */ align-items: flex-start; /* Align items to the top for multi-line text */ margin-bottom: 15px; /* Add spacing between each list item */ } .widget_address li .icon { flex-shrink: 0; /* Prevent icon from shrinking */ width: 25px; /* Set a fixed width for icons */ height: 25px; display: flex; align-items: center; justify-content: center; margin-right: 15px; /* Space between icon and text */ } .widget_address li .icon i { font-size: 18px; /* Adjust icon size */ color: #ffffff; /* White color */ margin-left: 0px; } .widget_address li .one i { margin-left: 35px; } .widget_address li span { line-height: 1.5; /* Adjust line height for better spacing */ color: #ddd; /* Text color */ word-break: break-word; /* Prevent text overflow */ } .widget_address li a { color: #ddd; /* Text color */ text-decoration: none; white-space: nowrap; /* Prevent email from wrapping */ overflow: hidden; /* Ensure no overflow */ text-overflow: ellipsis; /* Add ellipsis if text overflows */ } .widget_address li a:hover { color:#d5dd02; /* Hover effect for links */ text-decoration: underline; } .widget.widget_services.inline-links, .widget.widget_about, .widget.widget_address_outer { text-align: left; } .widget.widget_address_outer{ margin-left: 20px; width: 100%; } .widget.widget_services.inline-links a:hover { text-decoration: underline; } /* Change p text color on hover */ .wt-icon-box-wraper:hover a{ color: #d5dd02; /* White text color */ } /* Optional: Change background to make white text readable */ .wt-icon-box-wraper:hover { /* background-color: #007bff; */ /* Example hover background color */ transition: background-color 0.3s ease, color 0.3s ease; } /* Optional: Smooth transition for p tag */ .wt-icon-box-wraper p { transition: color 0.3s ease; } #preloader { position: fixed; width: 100%; height: 100%; background: #fff; z-index: 9999; display: flex; justify-content: center; align-items: center; } .loader { border: 8px solid #000000; /* Black */ border-top: 8px solid #000000; /* Black */ border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .read { color: white; } @media screen and (max-width: 768px) { .content-left .content-text { max-width: 100% !important; } } .iti{ width:100%; } /* Base Styles (for larger screens) */ .captcha-container { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .captcha-box { padding: 10px; font-size: 1.5em; border: 1px solid #ccc; border-radius: 4px; background-color: #f9f9f9; } .refresh-button { background-color: #007bff; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer; } .captcha-input { flex: 1; padding: 10px; font-size: 1em; border: 1px solid #ccc; border-radius: 4px; } /* Responsive Styles */ @media (max-width: 768px) { .captcha-container { flex-direction: column; align-items: stretch; gap: 15px; } .captcha-box { text-align: center; width: 100%; } .refresh-button { width: 100%; } .captcha-input { width: 100%; } } @media (max-width: 576px) { .captcha-box { font-size: 1.2em; } .captcha-input { font-size: 0.9em; padding: 8px; margin-left: 20px; } .refresh-button { padding: 10px; margin-left: 20px; background-color: #d5dd02; } .refresh-button:hover{ background-color:#d5dd02; } } .man{ color: #262423 !important; font-size: 12px !important; text-transform: uppercase !important; font-weight: 900 !important; } .link{ padding-left: 45px; } /* .custom-container { padding-left: 1.5rem; padding-right: 1.5rem; max-width: 1200px; margin: 0 auto; } .section { margin: 0 auto; } .content { display: flex; align-items: center; } */ /* General Styles */ .custom-container { padding-left: 15px; padding-right: 15px; } .img-fluid { max-width: 100%; height: auto; object-fit: cover; /* Ensures images scale properly */ } /* Apply black color to

tags and custom color to

tags */ .about-para { color: black; /* Set text color to black */ } h2 { color: #d5dd02; /* Set color for h2 to #d5dd02 */ } /* Media Query for screens 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) { .col-12.col-md-6 { /* Ensure columns take equal space and do not collapse */ flex: 0 0 50%; max-width: 50%; } /* Ensure image height and content height are balanced */ .row { display: flex; flex-wrap: nowrap; align-items: stretch; /* Ensure both columns take equal height */ } .col-12.col-md-6.d-flex.align-items-center { display: flex; flex-direction: column; justify-content: center; height: 100%; /* Ensure content takes full height */ } .col-12.col-md-6 img { height: 100%; /* Ensure the image fills the column */ object-fit: cover; /* Keep the image scaled properly */ } .row img { width: 100%; height: auto; } /* Optional: Adjust spacing between columns */ .col-12.col-md-6.d-flex.align-items-center { padding-left: 15px; padding-right: 15px; } .row.mb-4 { margin-bottom: 30px; } } /* Media Query for screens 768px or smaller */ @media (max-width: 768px) { .row img { max-height: 300px; object-fit: cover; } .col-12.col-md-6 { flex: 0 0 100%; /* Ensure columns take full width */ max-width: 100%; } .col-12.col-md-6.d-flex.align-items-center { padding-left: 10px; padding-right: 10px; } .row.mb-4 { margin-bottom: 30px; } } .section-container { padding: 20px; } .card-row { display: flex; flex-wrap: wrap; gap: 20px; /* Adds space between cards */ justify-content: space-between; } .card-column { box-sizing: border-box; padding: 15px; flex: 1 1 30%; /* Flexbox: each card takes 30% of the row */ display: flex; flex-direction: column; justify-content: space-between; } .card-box { background-color: #f8f8f8; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 15px; min-height: 250px; /* Set a minimum height for the cards */ display: flex; flex-direction: column; justify-content: space-between; } .card-title { font-size: 1.5em; color: #d5dd02; /* Color for headings */ margin-bottom: 10px; } .card-text { font-size: 1em; color: black; /* Text color */ line-height: 1.6; flex-grow: 1; /* Allow text to take up remaining space */ } /* Responsive: For small screens (phones, up to 480px wide) */ @media (max-width: 480px) { .card-row { flex-direction: column; /* Stack cards vertically */ } .card-column { flex: 1 1 100%; /* Each card takes full width */ margin-bottom: 20px; /* Space between cards */ } .card-box { padding: 10px; /* Reduce padding for small screens */ min-height: 200px; /* Reduce height for small screens */ } } /* Responsive: For medium screens (tablets, 481px to 768px) */ @media (min-width: 481px) and (max-width: 768px) { .card-row { flex-direction: column; /* Stack cards vertically */ } .card-column { flex: 1 1 100%; /* Each card takes full width */ margin-bottom: 20px; /* Space between cards */ } .card-box { padding: 12px; /* Slightly reduced padding */ min-height: 220px; /* Adjust height for tablets */ } } @media(min-width:769px)and(max-width:782px){ .card1{ padding-bottom: 20px !important; } } /* Responsive: For screens 769px to 800px (adjusted specific range) */ @media (min-width: 769px) and (max-width: 800px) { .card-row { flex-direction: row; /* Keep cards in a row */ justify-content: space-between; /* Adjust spacing */ } .card-column { flex: 1 1 45%; /* Each card takes approximately 45% of the row */ margin-bottom: 20px; /* Space between cards */ } .card-box { padding: 15px; /* Regular padding for this screen size */ min-height: 240px; /* Slightly larger height for this range */ } } /* Responsive: For larger screens (768px to 1024px) */ @media (min-width: 768px) and (max-width: 1024px) { .card-row { flex-direction: row; /* Keep cards in a row */ } .card-column { flex: 1 1 48%; /* Each card takes approximately 48% of the row */ margin-bottom: 20px; /* Space between cards */ } .card-box { padding: 15px; /* Regular padding for medium screens */ min-height: 250px; /* Regular height for medium screens */ } } /* Responsive: For large screens (1025px and above) */ @media (min-width: 1025px) { .card-row { flex-direction: row; /* Keep cards in a row */ } .card-column { flex: 1 1 30%; /* Each card takes 30% of the row */ margin-bottom: 20px; /* Space between cards */ } .card-box { padding: 20px; /* Increased padding for larger screens */ min-height: 300px; /* Increased height for larger screens */ } } .about-align{ text-align: center; } /* Base styles for all devices */ .projects-slider-two .item { display: flex; flex-direction: column; justify-content: space-between; /* Distribute content evenly */ align-items: center; text-align: center; padding: 20px; /* Equal padding around the content */ height: auto; /* Allow height to adjust dynamically based on content */ min-height: 400px; /* Minimum height to accommodate longer content */ max-width: 300px; /* Max width for smaller devices */ margin: 0 auto; /* Center alignment */ background-color: #141b1f; /* Example background */ border-radius: 8px; overflow: hidden; box-sizing: border-box; /* Ensures padding doesn't affect dimensions */ } /* Ensure space between the header and text content */ .projects-slider-two .item h4 { font-size: 20px; margin-bottom: 15px; /* Space below the title */ } .projects-slider-two .item p { font-size: 14px; line-height: 1.6; margin: 0; } /* Desktop (default) */ @media (min-width: 1200px) { .projects-slider-two .projects-carousel-two .owl-carousel .item { max-width: 25%; margin: 0 15px; } } /* Tablet devices */ @media (max-width: 1199px) and (min-width: 768px) { .projects-slider-two .projects-carousel-two .owl-carousel .item { max-width: 45%; margin: 15px auto; } } /* Mobile devices */ @media (max-width: 767px) { .projects-slider-two .projects-carousel-two .owl-carousel .item { max-width: 90%; margin: 15px auto; } } .title1{ padding-left: 10px; } /* @media (max-width: 768px) { .widget.widget_services.inline-links { padding-left: 40px; } } */ .link_{ padding-left: 45px; } /* Default (normal screen) */ .service-links { padding-left: 70px; /* Keep padding for larger screens */ } /* Mobile View - Remove padding */ @media (max-width: 768px) { .service-links { padding-left: 45px; /* Remove padding for mobile view */ text-align: left; /* Ensure alignment */ } }