/* ========================== Template: Intoria - Interior & Architecture HTML Template Author: thewebmax team Version: 1.0 ========================== */ /*====================================== || CSS TABLE CONTENT || ======================================= ======================================= 1. GENERAL ======================================= ======================================= 2. HEADING & TITLE ======================================= ======================================= 3. TEXT & PARAGRAPH ======================================= ------------------------------------- 1. text align ------------------------------------- 2. text vertical align ------------------------------------- 3. text no line brack ------------------------------------- 4. text transform ------------------------------------- 5. text size ------------------------------------- 6. text bold ====================================== 4. LISTING STYLES ====================================== ------------------------------------- 1. listing before icon color css ------------------------------------- 2. listing before numbers ------------------------------------- ====================================== 5. BOX SPACING (Padding & Margin) ====================================== ------------------------------------- 1.1 padding (around) ------------------------------------- 1.2 Padding (top) ------------------------------------- 1.3 Padding (bottom) ------------------------------------- 1.4 Padding (left) ------------------------------------- 1.5 Padding (right) ------------------------------------- 1.6 Padding (left right) ------------------------------------- 1.7 Padding (top bottom) ------------------------------------- 2.1 margin (around) ------------------------------------- 2.2 marging (top) ------------------------------------- 2.3 marging (bottom) ------------------------------------- 2.4 marging (left) ------------------------------------- 2.5 marging (right) ------------------------------------- 2.6 marging (left right) ------------------------------------- 2.7 marging (top bottom) ------------------------------------- 2.8 colum gap less ------------------------------------- ====================================== 6. POSITIONS ( absolute , relative , statice & z-index) ====================================== ------------------------------------- 1. position ------------------------------------- 1.1 relative 1.2 absolute 1.3 static ------------------------------------- 2. z-index ------------------------------------- ====================================== 7. COLOR ====================================== ------------------------------------- 1. text ------------------------------------- 2. background color ------------------------------------- 3. background image ------------------------------------- ====================================== 8. OVERLAY ( transparient box style ) ====================================== use for box 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: 'Poppins', sans-serif; font-size:14px; font-weight:400; color:#576566; padding:0; margin:0; overflow-x: hidden;} a {color: #000; outline: 0 none; text-decoration:none;} a:hover, a:focus { text-decoration:none; outline: 0 none; } a:active, a:hover, a:focus{ color: #50aab2; } 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: #fff; padding: 12px 8px !important; background-color: #000; } 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; } 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:#50aab2; } h1 {font-size: 56px; line-height:46px; color:#203334;font-family: 'Martel', serif;} h2 {font-size: 48px; line-height:58px; color:#203334; font-family: 'Martel', serif; font-weight:700;} h3 {font-size: 36px; line-height:42px;font-family: 'Martel', serif; font-weight:700;} h4 {font-size: 18px; line-height:24px; color:#203334; margin-bottom:15px;font-family: 'Martel', serif; font-weight:700;} h5 {font-weight:normal; font-size: 16px; line-height:22px; color:#203334; } h6 {font-weight:normal; font-size: 14px; line-height:20px; color:#203334; 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;} 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 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:#000; } .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:#000;} ul.white li:before {color:#fff;} ul.orange li:before {color:#FF6600;} ul.green li:before {color:#00CC00;} ul.red li:before {color:#FF3737;} dl.no-margin, ul.no-margin, ol.no-margin { margin:0px !important; list-style:none;} /*------------------------------------- 2. listing before numbers -------------------------------------*/ ol.list-num-count {counter-reset:li; padding-left:0;} ol.list-num-count > li {position:relative; margin:0 0 6px 30px; padding:4px 8px; list-style:none;} ol.list-num-count > li:before { content:counter(li , decimal); counter-increment:li; position:absolute; top:0; left:-28px; width:28px; height:28px; padding:5px; color:#fff; background:#000; 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 #000;background-color:transparent;color:#000;} ol.list-num-count.list-outline-none > li:before {background-color:transparent; color:#000;} /*====================================== 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-l30 {padding-left:30px;} .p-l40 {padding-left:40px;} .p-l50 {padding-left:50px;} .p-l60 {padding-left:60px;} .p-l70 {padding-left:70px;} .p-l80 {padding-left:80px;} .p-l90 {padding-left:90px;} .p-l100 {padding-left:100px;} .p-l110 {padding-left:110px;} .p-l120 {padding-left:120px;} .p-l130 {padding-left:130px;} .p-l140 {padding-left:140px;} .p-l150 {padding-left:150px;} /*------------------------------------- 1.5 Padding (right) -------------------------------------*/ .p-r0 {padding-right:0;} .p-r5 {padding-right:5px;} .p-r10 {padding-right:10px;} .p-r15 {padding-right:15px;} .p-r20 {padding-right:20px;} .p-r30 {padding-right:30px;} .p-r40 {padding-right:40px;} .p-r50 {padding-right:50px;} .p-r60 {padding-right:60px;} .p-r70 {padding-right:70px;} .p-r80 {padding-right:80px;} .p-r90 {padding-right:90px;} .p-r100 {padding-right:100px;} .p-r110 {padding-right:110px;} .p-r120 {padding-right:120px;} .p-r130 {padding-right:130px;} .p-r140 {padding-right:140px;} .p-r150 {padding-right:150px;} /*------------------------------------- 1.6 Padding (left right) -------------------------------------*/ .p-lr0 {padding-left:0; padding-right:0; } .p-lr5 {padding-left:5px; padding-right:5px;} .p-lr10 {padding-left:10px; padding-right:10px;} .p-lr15 {padding-left:15px; padding-right:15px;} .p-lr20 {padding-left:20px; padding-right:20px;} .p-lr30 {padding-left:30px; padding-right:30px;} .p-lr40 {padding-left:40px; padding-right:40px;} .p-lr50 {padding-left:50px; padding-right:50px;} .p-lr60 {padding-left:60px; padding-right:60px;} .p-lr70 {padding-left:70px; padding-right:70px;} .p-lr80 {padding-left:80px; padding-right:80px;} .p-lr90 {padding-left:90px; padding-right:90px;} .p-lr100 {padding-left:100px; padding-right:100px;} .p-lr120 {padding-left:120px; padding-right:120px;} .p-lr150 {padding-left:150px; padding-right:150px;} /*------------------------------------- 1.7 Padding (top bottom) -------------------------------------*/ .p-tb0 {padding-bottom:0; padding-top:0; } .p-tb5 {padding-bottom:5px; padding-top:5px;} .p-tb10 {padding-bottom:10px; padding-top:10px;} .p-tb15 {padding-bottom:15px; padding-top:15px;} .p-tb20 {padding-bottom:20px; padding-top:20px;} .p-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-t25 {margin-top:25px;} .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-b25 {margin-bottom:25px;} .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;} .text-primary{color:#50aab2;} .text-secondry{color:#50aab2;} .text-black{color:#000;} .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;} /*------------------------------------- 2. background color -------------------------------------*/ .bg-transparent{background-color:transparent;} .bg-primary{background-color:#50aab2;} .bg-secondry{background-color:#1f3334;} .bg-dark{background-color:#1e1e20;} .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:#a5de5c;} .bg-yellow{background-color:#fff000;} .bg-dark-blue{background-color:#161b23;} .bg-light-blue{background-color:#3097db;} /*------------------------------------- 3. background image -------------------------------------*/ .bg-parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } @media only screen and (max-width:768px) { .bg-parallax { background-attachment: fixed !important; background-position: center !important; background-repeat: no-repeat; background-size: cover; } } /*====================================== 8. OVERLAY ( transparient box style ) ======================================*/ .overlay-wraper {position:relative ;} .overlay-main {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.5;} .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:0px; font-size:28px;} .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:#000000;} .bdr-primary{border-color:#ffbc13;} .bdr-gray{border-color:#dddddd;} .bdr-gray-light{border-color:#eeeeee;} .bdr-gray-dark{border-color:#333333;} .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-tb-1{border-width:1px 0px 1px 0px;} .bdr-tb-2{border-width:2px 0px 2px 0px;} .bdr-tb-3{border-width:3px 0px 3px 0px;} .bdr-tb-4{border-width:4px 0px 4px 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-solid{ border-style:solid; } .bdr-dot{ border-style:dotted; } .bdr-dash{ border-style:dashed; } /*------------------------------------- 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;} .icon-xld i { font-size:100px;} .icon-xld.inline-icon { width:auto;} .icon-xl { width:100px;} .icon-xl i { font-size:80px;} .icon-lg.inline-icon { width:auto;} .icon-lg { width:80px;} .icon-lg i { font-size:60px;} .icon-lg.inline-icon { width:auto;} .icon-md { width:60px;} .icon-md i { font-size:45px;} .icon-md.inline-icon { width:auto;} .icon-sm { width:40px;} .icon-sm i { font-size:30px;} .icon-sm.inline-icon { width:auto;} .icon-xs { width:30px;} .icon-xs i { font-size: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;} /*=========== 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; } /*------------------------------------- 5. place icon with box -------------------------------------*/ .about-types .wt-icon-box-wraper{ border-width:0px 0px 0px 3px; } .wt-icon-box-wraper {position:relative;} .wt-icon-box-wraper .wt-tilte{ margin-top:0;} .wt-icon-box-wraper .after-titile-line{margin-bottom:10px;} .wt-icon-box-wraper p:last-child {margin:0px;} .icon-content { overflow:hidden;} /*.icon-content p{word-break:break-all;}*/ .wt-icon-box-xld, .wt-icon-box-xl, .wt-icon-box-lg, .wt-icon-box-md, .wt-icon-box-sm, .wt-icon-box-xs { display:table; } .wt-icon-box-xld .icon-cell, .wt-icon-box-xl .icon-cell, .wt-icon-box-lg .icon-cell, .wt-icon-box-md .icon-cell, .wt-icon-box-sm .icon-cell, .wt-icon-box-xs .icon-cell { display:table-cell; vertical-align:middle; } /*------------------------------------- 6. icon box left align -------------------------------------*/ .wt-icon-box-wraper.left .wt-icon-box-xld, .wt-icon-box-wraper.left .wt-icon-box-xl, .wt-icon-box-wraper.left .wt-icon-box-lg, .wt-icon-box-wraper.left .wt-icon-box-md, .wt-icon-box-wraper.left .wt-icon-box-sm, .wt-icon-box-wraper.left .wt-icon-box-xs { float:left; margin-right:20px; } .wt-icon-box-wraper.left .icon-xld, .wt-icon-box-wraper.left .icon-xl, .wt-icon-box-wraper.left .icon-lg, .wt-icon-box-wraper.left .icon-md, .wt-icon-box-wraper.left .icon-sm, .wt-icon-box-wraper.left .icon-xs { float:left; margin-right:10px; } /*------------------------------------- 7. icon box right align -------------------------------------*/ .wt-icon-box-wraper.right { text-align:right;} .wt-icon-box-wraper.right .wt-icon-box-xld, .wt-icon-box-wraper.right .wt-icon-box-xl, .wt-icon-box-wraper.right .wt-icon-box-lg, .wt-icon-box-wraper.right .wt-icon-box-md, .wt-icon-box-wraper.right .wt-icon-box-sm, .wt-icon-box-wraper.right .wt-icon-box-xs { float:right; display:table; margin-left:20px; } .wt-icon-box-wraper.right .icon-xld, .wt-icon-box-wraper.right .icon-xl, .wt-icon-box-wraper.right .icon-lg, .wt-icon-box-wraper.right .icon-md, .wt-icon-box-wraper.right .icon-sm, .wt-icon-box-wraper.right .icon-xs { float:right; margin-left:10px; } /*------------------------------------- 8. icon box center align -------------------------------------*/ .wt-icon-box-wraper.center { text-align:center; } .wt-icon-box-wraper.center .wt-icon-box-xld, .wt-icon-box-wraper.center .wt-icon-box-xl, .wt-icon-box-wraper.center .wt-icon-box-lg, .wt-icon-box-wraper.center .wt-icon-box-md, .wt-icon-box-wraper.center .wt-icon-box-sm, .wt-icon-box-wraper.center .wt-icon-box-xs { margin-left:auto; margin-right:auto; } .wt-icon-box-wraper.bx-style-1, .wt-icon-box-wraper.bx-style-2 { border-width:1px; border-style:solid; border-color:#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:#000; } .wt-thum-bx img, .wt-post-thum img { width:100%; height:auto; } /*====================================== 10. IMAGES OVERLAY EFFECTS (overly animation on images) ======================================*/ .wt-img-overlay1, .wt-img-overlay2{ position:relative; } .wt-img-overlay1:before, .wt-img-overlay1:after, .wt-img-overlay2:before, .wt-img-overlay2:after{ content:""; background:#000; 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:#000; position:absolute; left:0; top:0; width:0; height:0; opacity:0.4; z-index:1; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -ms-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } /*------------------------------------- 1. effect 1 -------------------------------------*/ .wt-img-overlay1:before { width:100%; height:100%; opacity:0;} .wt-img-overlay1:hover:before, .wt-box:hover .wt-img-overlay1:before { opacity:0.5; } /*------------------------------------- 2. effect 2 -------------------------------------*/ .wt-img-overlay2:before { width:100%; height:100%; opacity:0; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );*/ /* IE6-9 */ } .wt-img-overlay2:hover:before, .wt-box:hover .wt-img-overlay2:before { opacity:0.9; } /*------------------------------------- 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='#00000000', endColorstr='#000000',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='#00000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } /*====================================== 11. shortcodeS ======================================*/ /*------------------------------------- 1. Buttons --------------------------------------- */ /* 1.1 theme default button */ .btn { padding-top:9px; padding-bottom:9px;} .site-button {background-color:#50aab2; color:#fff; outline:none;} .site-button:active, .site-button:hover, .site-button:focus, .site-button:visited, .active > .site-button {background-color: #50aab2;color: #fff;} .site-button:hover{ background-color: #000; color: #fff;} .site-button-secondry {background-color:#1f3334; color:#fff; outline:none;} .site-button-secondry:active, .site-button-secondry:hover, .site-button-secondry:focus, .active > .site-button-secondry {background-color:#50aab2; color: #fff; } /*====site-buttom====*/ .site-button{ color: #fff; padding: 10px 30px; text-transform: uppercase; letter-spacing: 1px; position: relative; /* overflow: hidden;*/ cursor: pointer; display:inline-block; background-color:#50aab2; border:none; font-size:13px; } .site-button:before, .site-button:after { border-color: transparent; -webkit-transition: all 0.25s; transition: all 0.25s; border-style: solid; border-width: 0; content: ""; height: 24px; position: absolute; width: 24px; } .site-button:before { border-color: #50aab2; border-top-width: 2px; left: 0px; top: -5px; } .site-button:after { border-bottom-width: 2px; border-color: #50aab2; bottom: -5px; right: 0px; } .site-button:hover, .site-button.hover { background-color: #1f3334; } .site-button:hover:before, .site-button.hover:before, .site-button:hover:after, .site-button.hover:after { height: 100%; width: 100%; border-color: #1f3334; } /*====site-buttom secondry====*/ .site-button-secondry{ color: #fff; padding: 10px 30px; text-transform: uppercase; letter-spacing: 1px; position: relative; /* overflow: hidden;*/ cursor: pointer; display:inline-block; background-color:#1f3334; border:none; font-size:13px; } .site-button-secondry:before, .site-button-secondry:after { border-color: transparent; -webkit-transition: all 0.25s; transition: all 0.25s; border-style: solid; border-width: 0; content: ""; height: 24px; position: absolute; width: 24px; } .site-button-secondry:before { border-color: #1f3334; border-top-width: 2px; left: 0px; top: -5px; } .site-button-secondry:after { border-bottom-width: 2px; border-color: #1f3334; bottom: -5px; right: 0px; } .site-button-secondry:hover, .site-button-secondry.hover { background-color: #1f3334; } .site-button-secondry:hover:before, .site-button-secondry.hover:before, .site-button-secondry:hover:after, .site-button-secondry.hover:after { height: 100%; width: 100%; border-color: #1f3334; } .mfp-video.video-play-btn{ position:absolute; top:50%; left:50%; width:60px; height:40px; line-height:38px; text-align:center; margin:-25px; color:#fff; display:block; z-index:10; font-size:14px; border: 2px solid #fff; } .mfp-video.video-play-btn:hover{background-color:#000; 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:#555;} /* 1.7 black */ .site-button.black {background-color:#000; 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:#555555;color:#fff;} /* 1.9 pink */ .site-button.pink {background-color:#e63f75; color:#fff;} .site-button.pink:hover, .site-button.pink:active, .site-button.pink:focus { background-color:#d22b61; color:#fff; } /* 1.10 Blue */ .site-button.blue {background-color:#42B8D4; color:#fff;} .site-button.blue:hover, .site-button.blue:active, .site-button.blue:focus {background-color:#2ca2be; color:#fff;} /* 1.11 Green */ .site-button.green {background-color:#35B494; color:#fff;} .site-button.green:hover, .site-button.green:active, .site-button.green:focus { background-color:#26a585; color:#fff; } /* 1.12 Orange */ .site-button.orange {background-color:#E56713; color:#fff;} .site-button.orange:hover, .site-button.orange:active, .site-button.orange:focus { background-color:#d55703; color:#fff;} /* 1.13 Red */ .site-button.red { background-color:#D93223; color:#fff;} .site-button.red:hover, .site-button.red:active, .site-button.red:focus {background-color:#c51e0f; color:#fff;} /*1.14 Brown */ .site-button.brown { background-color:#69441F; color:#fff;} .site-button.brown:hover, .site-button.brown:active, .site-button.brown:focus { background-color:#5f3a15; color:#fff;} /* 1.15 Yellow */ .site-button.yellow { background-color:#ecc731; color:#fff;} .site-button.yellow:hover, .site-button.yellow:active, .site-button.yellow:focus {background-color:#d4af19; color:#fff;} /* 1.16 purple */ .site-button.purple { background-color:#AE1AF7; color:#fff;} .site-button.purple:hover, .site-button.purple:active, .site-button.purple:focus {background-color:#9804e1; color:#fff;} /* 1.17 Graphical */ .site-button.graphical { color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px -1px rgba(45,60,72,0.5); -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px -1px rgba(45,60,72,0.5); -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 3px -1px rgba(45,60,72,0.5); border: 1px solid rgba(0,0,0,0.15); } .site-button.graphical:active { box-shadow: 0 2px 2px rgba(0,0,0,.25) inset; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.25) inset; -moz-box-shadow: 0 2px 2px rgba(0,0,0,.25) inset; } /* 1.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; position:relative; padding: 0px 0px 8px 0px; color: #000; letter-spacing: 1px; text-decoration: none; } .site-button-link:before, .site-button-link:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .site-button-link:before { bottom: 0; display: block; height: 2px; width: 0%; content: ""; background-color: #50aab2; } .site-button-link:after { left: 0; top: 0; padding: 0px 0px 8px 0px; position: absolute; content: attr(data-hover); color: #50aab2; white-space: nowrap; max-width: 0%; overflow: hidden; } .site-button-link:hover:before { opacity: 1; width: 100%; } .site-button-link:hover:after{ max-width: 100%; } /* 1.33 text link white */ .site-button-link.white {color:#e7e7e7;} .site-button-link.white:hover, .site-button-link.white:active, .site-button-link.white:focus {color:#CCC;} /* 1.34 text link black */ .site-button-link.black { color:#171717;} .site-button-link.black:hover, .site-button-link.black:active, .site-button-link.black:focus { color:#000;} /* 1.35 text link Gray */ .site-button-link.gray { color:#666666;} .site-button-link.gray:hover, .site-button-link.gray:active, .site-button-link.gray:focus {color:#555555;} /* 1.36 text link pink */ .site-button-link.pink {color:#e63f75;} .site-button-link.pink:hover, .site-button-link.pink:active, .site-button-link.pink:focus {color:#2ca2be;} /* 1.37 text link Blue */ .site-button-link.blue {color:#42B8D4;} .site-button-link.blue:hover, .site-button-link.blue:active, .site-button-link.blue:focus {color:#2ca2be;} /* 1.38 text link Green */ .site-button-link.green { color:#35B494;} .site-button-link.green:hover, .site-button-link.green:active, .site-button-link.green:focus { color:#26a585;} /* 1.39 text link Orange */ .site-button-link.orange {color:#E56713;} .site-button-link.orange:hover, .site-button-link.orange:active, .site-button-link.orange:focus {color:#d55703;} /* 1.40 text link Red */ .site-button-link.red {color:#D93223;} .site-button-link.red:hover, .site-button-link.red:active, .site-button-link.red:focus {color:#c51e0f;} /* 1.41 text link Brown */ .site-button-link.brown {color:#69441F;} .site-button-link.brown:hover, .site-button-link.brown:active, .site-button-link.brown:focus {color:#5f3a15;} /* 1.42 text link Yellow */ .site-button-link.yellow {color:#ecc731;} .site-button-link.yellow:hover, .site-button-link.yellow:active, .site-button-link.yellow:focus {color:#d4af19;} /* 1.43 text link purple */ .site-button-link.purple {color:#ae1af7;} .site-button-link.purple:hover, .site-button-link.purple:active, .site-button-link.purple:focus {color:#9804e1;} /* 1.44 app strore */ .site-button.button-app {text-align:left; padding:15px 25px;} .site-button.button-app i { display:inline-block; font-size:45px; float:left;margin-right:15px;} .site-button.button-app strong {display:block; font-size:16px;} /* 1.45 filter buttons css */ .masonry-filter > li.active a, .masonry-filter > li a:hover, .masonry-filter > li a:active, .masonry-filter > li a:focus {color: #50aab2;} /*====Filter Hover Navigation====*/ .filter-navigation{ text-transform: uppercase; margin-bottom:0px; } .filter-navigation * { box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .filter-navigation li { display: inline-block; list-style: outside none none; margin: 0px 20px 0px 0px; overflow: hidden; } .filter-navigation li:first-child { padding-left:0px; margin-left:0px; } .filter-navigation a { padding: 4px 0px; color: #000; position: relative; display: inline-block; letter-spacing: 1px; margin: 0px; text-decoration: none; font-weight:600; } .filter-navigation a:before, .filter-navigation a:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .filter-navigation a:before { bottom: 100%; display: block; height: 3px; width: 100%; content: ""; background-color: #50aab2; } .filter-navigation a:after { padding: 0.3em 0; position: absolute; bottom: 100%; left: 0; content: attr(data-hover); color: #000; white-space: nowrap; } .filter-navigation li:hover a{ transform: translateY(100%); } /* 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.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:#000; 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:#000; 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:#000; color:#000;} .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:#000; color:#000;} @media only screen and (max-width:768px){ .masonry-item{width:100%;} } /*------------------------------------- 2. Title separators -------------------------------------*/ .wt-separator-outer { overflow:hidden;} /*Separator defualt*/ .wt-separator-outer.separator-left{text-align:left;} .wt-separator-outer.separator-right{text-align:right;} .wt-separator-outer.separator-center{text-align:center} .wt-separator{ display:inline-block; margin-top:0px; font-family: 'Poppins', sans-serif; font-weight:500; font-size:18px; margin-bottom:30px; -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; } .wt-separator:hover{ letter-spacing:1px; } .wt-separator,.sep-line-one,.sep-line-two{ position:relative; } .wt-separator:after, .sep-line-one:after, .wt-separator:before, .sep-line-one:before{ -moz-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; -webkit-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; } .wt-separator:after, .sep-line-one:after{ position: absolute; content: ''; background-color: #50aab2; height: 1px;} .wt-separator:after{ width: 50px; right: -60px; top: 12px;} .sep-line-one:after{ width: 30px; right: -40px; top: 18px;} /*.sep-line-two:after{ width: 30px; right: -40px; top: 8px;}*/ .wt-separator:before, .sep-line-one:before{ position: absolute; content: ''; background-color: #50aab2; height: 1px;} .wt-separator:before{ width: 50px; left: -60px; top: 12px;} .sep-line-one:before{ width: 30px; left: -40px; top: 18px;} /*.sep-line-two:before{ width: 30px; left: -40px; top: 8px;}*/ /*------------------------------------- 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:#000; font-size:12px; padding:20px; letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid transparent; border:0px; font-weight: 600;} .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:0px solid #50aab2; color:#000;} .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:#000;border-color: #ddd #ddd #fff;} .wt-tabs.tabs-default.has-bg .tab-pane {color:#fff;} /* tabs nav center */ .wt-tabs.nav-center > .nav-tabs{display:table; margin-left:auto; margin-right:auto;} /*4.2 tabs bg [ tabs background ] */ .wt-tabs.bg-tabs .nav-tabs > li > a {background-color: #f0f0f0; border: 0px; margin-right:-1px; border-bottom: 4px solid transparent;} .wt-tabs.bg-tabs .nav-tabs > li.active > a {border-bottom: 0px; background-color: #000; color: #50aab2; border-bottom: 4px solid #50aab2;} .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-bottom: 4px solid transparent;} .wt-tabs.vertical.bg-tabs .nav-tabs > li.active > a {border-bottom:1px solid transparent; background-color: #000; color: #50aab2; border-bottom: 4px solid #50aab2;} .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:#000;} .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:20px ;margin-top:-1px; background-color:#fff;} /*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:#000; border-bottom: 1px solid transparent;} .wt-tabs.vertical .nav-tabs li.active a {border-bottom:1px solid #50aab2; 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: 16px; font-weight: 500;text-transform: uppercase;} .acod-head a, .acod-head a:hover, .acod-head a:active, .acod-head a:focus { color:#000; } .acod-body {color:#000;} /*Accodian open close indicator css*/ .acod-head .indicator {padding:15px; color:#000; position:absolute; right:0; top:0;} .acod-head .indicator .fa{position:relative;} .acc-bg-dark .acod-head .indicator .fa:after, .acc-bg-dark .acod-head .indicator .fa:before{color:#000;} .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:#fff; background-color:#000;} .acc-bg-gray.acc-has-bg .acod-body{color:#fff;} .acc-bg-white a {background-color:#fff;} .acc-bg-white .acod-head .indicator { color:#000;} .acc-bg-white.acc-has-bg .acod-body{color:#fff;} /* 4. Accordion bg primary */ .acc-bg-primary a {background-color:#000;} .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:#000;} .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:#000; background-color:#50aab2;} .acc-bg-dark .acod-head .fa {color:#50aab2;} .acc-bg-dark.acc-has-bg .acod-body{color:#fff;} /*------------------------------------- 6. Carousels -------------------------------------*/ /* 6.1 Client carousel 1*/ .ow-client-logo {display:table; width:100%;position:relative;} .client-logo {display:table-cell; text-align:center; vertical-align:middle; padding:10px;} .owl-carousel .ow-client-logo img { max-height:100%; width:auto; display:inline-block;} .client-logo-media img{max-width:100% !important; margin:0px auto !important; width:auto !important;} @media only screen and ( max-width:720px ){ .ow-client-logo {margin:0px 1px;} } /*------------------------------------- 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; font-size:16px;} .testimonial-position {font-style:italic;} .testimonial-text p {margin:0;} /*7.1 testimonial with background image*/ .testimonial-bg {color:#fff;} /*7.6 testimonial 5*/ .testimonial-5{ position: relative; margin-top: 60px; } .testimonial-5 .testimonial-pic-block{ float: right; } .testimonial-5 .testimonial-text{ padding:0px; } .testimonial-5 .testimonial-pic{ width:500px; height:500px; position:relative; z-index:2; border:none; margin-top: 0px; } .testimonial-5 .testimonial-name{ display: block; font-family: 'Martel', serif; } .testimonial-5 .testimonial-position{ display: block; } .testimonial-5 .testimonial-paragraph{ position:relative; } .testimonial-5 .testimonial-paragraph .fa-quote-left{ position: absolute; left: 0px; top: -30px; font-size: 80px; color: #50aab2; z-index: -1; opacity: 0.3; } .testimonial-5 .testimonial-paragraph p{ padding: 0px 0px 30px 0px; font-size: 18px; } .testimonial-5 .testimonial-name{ font-size:18px; } .testimonial-5 .testimonial-position{ font-style:normal; } .testimonial-5 .testimonial-detail{ float: left; padding-top: 25px; } @media only screen and (max-width:480px) { .testimonial-5, .testimonial-grid-5{ margin-left: 0%; position: relative; } .testimonial-5 .testimonial-pic-block, .testimonial-grid-5 .testimonial-pic-block{ left: inherit; position: inherit; text-align: center; top: inherit; padding-top:30px; } .testimonial-5 .testimonial-text, .testimonial-grid-5 .testimonial-text{ padding:0px; } .testimonial-5 .testimonial-pic, .testimonial-grid-5 .testimonial-pic{ float:none; } } /*7.2 testimonial 6*/ .testimonial-6{ margin:20px 80px; } .testimonial-6{ padding:4px 4px 4px 4px;} .testimonial-6 .testimonial-text{ padding:0px 0px 0px 40px; overflow:hidden; -webkit-box-shadow: 3px 3px 5px rgb(0,0,0,0.1) ; box-shadow: 3px 3px 5px 0 rgb(0,0,0,0.1); } .testimonial-6 .testimonial-pic-block{ float:left; } .testimonial-6 .testimonial-pic{ width:125px; height:125px; position:relative; border:0px; } .testimonial-6 .testimonial-pic:after, .testimonial-6 .testimonial-pic:before{ content:""; position:absolute; background-color:#50aab2; } .testimonial-6 .testimonial-pic:after{ left:-12px; bottom:-12px; width:2px; height:35px; } .testimonial-6 .testimonial-pic:before{ left:-12px; bottom:-12px; width:35px; height:2px; } .testimonial-6 .testimonial-name, .testimonial-6 .testimonial-position{ display: block; } .testimonial-6 .fa-quote-left, .testimonial-grid-6 .fa-quote-left{ font-size:18px; } .testimonial-6 .testimonial-paragraph p{ padding:0px 0px 15px 0px; } .testimonial-6 .testimonial-name{ text-transform:uppercase; font-size:20px; font-weight:300; } .testimonial-6 .testimonial-position{ font-style: normal; text-transform: uppercase; font-size: 12px; letter-spacing: 4px; font-family: 'Martel', serif; font-weight: 500; } .testimonial-6 .testimonial-position:after{ } .testimonial-6 .testimonial-position{ display:inline-block; position:relative; } .testimonial-6 .testimonial-position:after{ content:""; position:absolute; width:30px; height:1px; right:-40px; top:10px; background-color:#fff; } .testimonial-6 .testimonial-detail{ padding-left:0px; padding-right:0px; } .testimonial-home .owl-prev, .testimonial-home .owl-next{ padding: 4px 0px; text-align: center; display: inline-block; cursor: pointer; } .testimonial-home .owl-prev i, .testimonial-home .owl-next i{ font-size: 28px; font-weight:800; } /*------------------------------------- 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; box-shadow: 0 0 0 rgba(0,0,0,0); -webkit-box-shadow: 0 0 0 rgba(0,0,0,0); -moz-box-shadow: 0 0 0 rgba(0,0,0,0); transition: all 0.25s; -moz-transition: all 0.25s; -webkit-transition: all 0.25s; -o-transition: all 0.25s; } /* 10.1 image-opacity */ .wt-img-effect.opacity img:hover {opacity: 0.8; -moz-opacity: 0.8; -webkit-opacity: 0.8;} /*10.2 image-zoom */ .wt-img-effect.zoom-slow img {transition: all 10s; -moz-transition: all 10s; -webkit-transition: all 10s; -o-transition: all 10s;} .wt-img-effect.zoom-slow:hover img {-moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); transform: scale(2);} /*10.3 image-zoom-slow */ .wt-img-effect.zoom:hover img { -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } /*10.4 image-shrink */ .wt-img-effect.shrink:hover img { transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); } /*10.5 image-side-pan */ .wt-img-effect.side-pan:hover img { margin-left: -9%; transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } /*10.6 image-vertical-pan */ .wt-img-effect.vertical-pan:hover img { margin-top: -10%; transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } /*10.7 image-fade-in */ .wt-img-effect.fade-in { background: #000} .wt-img-effect.fade-in img { opacity: 0.65; -moz-opacity: 0.65; -webkit-opacity: 0.65;} .wt-img-effect.fade-in:hover img { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1;} /*10.8 image-fade-out */ .wt-img-effect.fade-out { background: #000} .wt-img-effect.fade-out:hover img { opacity: 0.7; -moz-opacity: 0.7; -webkit-opacity: 0.7;} /*10.9 image-rotate */ .wt-img-effect.rotate:hover img { -moz-transform: scale(1.5) rotate(-20deg); -webkit-transform: scale(1.5) rotate(-20deg); -o-transform: scale(1.5) rotate(-20deg); -ms-transform: scale(1.5) rotate(-20deg); transform: scale(1.5) rotate(-20deg); } /*10.10 image-sepia */ .wt-img-effect.sepia img {-webkit-filter: sepia(100%); filter: sepia(100%);} .algo-image-hover.sepia:hover img {-webkit-filter: sepia(0); filter: sepia(0);} /*10.11 image-blurr */ .wt-img-effect.blurr img {transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;} .wt-img-effect.blurr:hover img {filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px);} /*10.12 image-blurr-invert */ .wt-img-effect.blurr-invert img {transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;} .wt-img-effect.blurr-invert img {filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px);} .wt-img-effect.blurr-invert:hover img {filter: blur(0px); -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px);} /*10.13 image off color */ .wt-img-effect.off-color img {filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0);} .wt-img-effect.off-color:hover img {filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1);} /*10.14 image on color */ .wt-img-effect.on-color img {filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1);} .wt-img-effect.on-color:hover img {filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0);} /*------------------------------------- 11. Modal pop -------------------------------------*/ .modal-xlg { width:1000px; } .provider_registration .bootstrap-select div.dropdown-menu ul li a {font-weight:600;} .provider_registration .bootstrap-select div.dropdown-menu ul li a span.childcat{font-weight:400; color:#7c7c7c; } @media only screen and (max-width: 1024px) { .modal-xlg {width:auto; margin-left:15px; margin-right:15px;} } /*------------------------------------- 12. Social icons -------------------------------------*/ .social-icons {list-style:none; margin-left:-3px; margin-right:-3px; font-size:12px; margin:0px;} .social-icons li {display:inline-block; text-align:center;} .project-detail-containt .social-icons li {border:1px solid #ddd;} .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:#000000;} .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:#000; 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: #000; } .social-icons.social-square.social-darkest a:hover, .social-icons.social-radius.social-darkest a:hover{ background-color:#000; 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:#50aab2; } .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 10px ;} .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;} .widget-title{margin-bottom:20px;} .recent-posts-entry ul{margin:0; list-style:none; padding:0;} /* 19.1 widget listing*/ .site-footer .widget_services ul { list-style:none; padding-left:0; margin-bottom:0;} .site-footer .widget_services ul li {margin-bottom:13px; border-bottom:1px solid #e1e1e1; position:relative; padding:5px 10px 5px 15px; margin-bottom:0; line-height:26px;} .site-footer .widget_services ul li {font-size: 14px;font-weight: normal;text-transform: none;} .site-footer .widget_services ul li a {color:#000;} .site-footer .widget_services ul li a:hover {color:#50aab2;} .site-footer .widget_services li {border-bottom:none; line-height:28px;} .site-footer .widget_services li:before { top:0; left:1px;} .site-footer .widget_services.inline-links li{ display: block; border-bottom: none; position: relative; border-bottom: 1px dashed #ddd; } .site-footer .widget_services.inline-links li:last-child{ border-bottom:0px; } .site-footer .widget_services.inline-links li:before{ content: "\f101"; position: absolute; left: 0px; top: 3px; display: block; font-family: "FontAwesome"; } /* 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:10px 10px 10px 0px; margin-bottom:0; line-height:20px;} .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;} /*19.2 widget search custom*/ .search-bx .site-button { border-left-color: #FFF !important; padding: 9px 15px; color: #000; background-color: #fff; border: 1px solid #e1e6eb; border-left-color: rgb(225, 230, 235); height: 40px; } .search-bx .input-group{ position:relative; z-index:1 } .search-bx .input-group .input-group-btn{ position: absolute; right: 0px; top: 0px; width: 40px; z-index: 10; } .search-bx .input-group .input-group-btn button{ width:40px; height:40px; background:none; border:none; } .search-bx .input-group .input-group-btn button i{ color:#000; font-size:18px; } /*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; line-height: 16px; margin-bottom: 10px; margin-top: 0px; } .recent-posts-entry .widget-post{ margin-bottom: 5px;} .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:70px; border:none;} .recent-posts-entry .post-meta span{margin-right:10px;} .widget-post-bx .wt-post-date { background-color: #12151a; width: 50px; height: 60px; float: left; } .widget-post-bx .wt-post-date strong { display: block; font-size: 24px; } .widget-post-bx .wt-post-date span { display: block; font-size: 11px; text-transform: uppercase; font-weight: 600; } .widget-post-bx .wt-post-meta { margin-bottom: 5px; } /*19.8 widget tags-list*/ .widget_tag_cloud a { padding: 4px 0px; font-size: 14px; display: inline-block; margin: 0 0 5px; font-weight: 600; color: #000; position: relative; margin-right:25px; } .widget_tag_cloud a:hover{color:#a2a2a2;} .widget_tag_cloud a:hover:after{ -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); width:10px; right:-5px; } /* 19.14 widget gallery */ .widget_gallery ul {padding-left:0;} .widget_gallery li {display: inline-block; margin-bottom:5px; width: 24%; background-color:#000;} .widget_gallery li a {position:relative;} .widget_gallery li a:hover { cursor:crosshair;} .widget_gallery li:hover img{margin-bottom: 0; opacity:0.3;} .widget_gallery li:hover a:after{ opacity:1;} .widget_gallery a{display:block;} @media only screen and (max-width:991px) { .widget_gallery li {width:24.333%;} } @media only screen and (max-width:480px) { .widget_gallery li {width:32.1%;} } .widget_newsletter-2 .newsletter-bx{background-color:#f6f7f8; text-align:center;} .widget_newsletter-2 .newsletter-bx .newsletter-icon{ background-color: #000; 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 Section-------*/ .site-footer .widget-section > ul > li{ font-size:16px; } .site-footer .widget-section > ul > li a{ color:#576566; } .site-footer .widget-section > ul > li a:hover{ color:#50aab2; } /*-------- footer link----------*/ .footer-link{ text-align:center; margin-bottom:60px; } .footer-link ul{ margin:0px auto; list-style:none; } .footer-link ul li{ display:inline-block; padding: 0px 15px; } .footer-link ul li a{ color:#1f3334; text-transform:uppercase; padding: 0px; position: relative; display:block; line-height: 20px; } .footer-link ul li a:before, .footer-link ul li a:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .footer-link ul li a:before { bottom: 0; display: block; height: 2px; width: 0%; content: ""; background-color: #50aab2; } .footer-link ul li a:after { left: 0; top: 0px; padding: 0px; position: absolute; content: attr(data-hover); color: #50aab2; white-space: nowrap; max-width: 0%; overflow: hidden; } .footer-link ul li a:hover:before{ opacity: 1; width: 100%; } .footer-link ul li a:hover:after{ max-width: 100%; } /*-------widget newsletter-------*/ .widget_newsletter .newsletter-bx .form-control{ background-color:#fff; border:0px; border-right:1px solid rgba(255,255,255,0.3); color:#fff; } /*------------------------------------- 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; } #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: 80px; color: #000; position: relative; clear: both; border: none; font-family: 'Martel', serif; background-color: #f5f5f5;} blockquote p {font-size:24px;line-height:32px;} blockquote strong{font-size:18px;display:block;} blockquote span{ font-size: 12px; color: #000; line-height: 30px; margin-bottom: 0px; font-style: normal; text-transform: uppercase; } blockquote .fa-quote-left { position: absolute; font-size: 80px; left: 30px; top: 30px; opacity: 0.1; } @media only screen and (max-width:640px){ blockquote {padding: 30px 20px 30px 30px;} blockquote p {font-size:16px;line-height:22px;} } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {max-width: 100%; height: auto;} /*====================================== 13. BLOG ======================================*/ .blog-post { position:relative; margin-bottom:40px;} .wt-post-title{margin-bottom:20px;} .wt-post-title .post-title{ margin:0;} .wt-post-meta {margin-bottom:20px;} .wt-post-meta ul {margin:0px; list-style:none;} .wt-post-meta li { padding: 0; display: inline-block; font-size: 12px; font-weight: 600; color:#000;} .wt-post-meta i {margin:0 5px;} .wt-post-meta li:after { content: "/"; display: inline-block; font-weight: normal; margin-left: 5px; opacity: 0.5;} .wt-post-meta li:last-child:after { display:none;} .wt-post-text { margin-bottom:25px;} .wt-post-text p a{text-transform:uppercase;font-weight:600; display:inline-block;} .wt-post-text p:last-child { margin:0;} .wt-post-bottom{padding: 20px 0px 0px 0px; margin-top: 30px;} .wt-post-bottom ul {margin:0px; list-style:none;} .wt-post-bottom li { padding: 0; display: inline-block; font-size: 12px; font-weight: 600; color:#000;} .wt-post-bottom i {margin:0 5px;} .wt-post-bottom li:after { content: "/"; display: inline-block; font-weight: normal; margin-left: 5px; opacity: 0.5;} .wt-post-bottom li:last-child:after { display:none;} .wt-post-readmore { font-weight: 500; margin-bottom: 15px; } .wt-post-readmore a { display: inline-block; } .wt-post-readmore a { padding: 8px 0px; color: #fff; position: relative; letter-spacing: 1px; text-decoration: none; } .wt-post-readmore a:before, .wt-post-readmore a:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .wt-post-readmore a:before { bottom: 0; display: block; height: 2px; width: 0%; content: ""; background-color: #50aab2; } .wt-post-readmore a:after { left: 0; top: 0; padding: 0.5em 0; position: absolute; content: attr(data-hover); color: #50aab2; white-space: nowrap; max-width: 0%; overflow: hidden; } .wt-post-readmore a:hover:before{ opacity: 1; width: 100%; } .wt-post-readmore a:hover:after{ max-width: 100%; } .latest-blog-1{ position:relative;} .latest-blog-1 .wt-post-info{ padding: 40px 0px 0px 40px; } .latest-blog-1 .wt-post-meta ul{ display:table; width:100%; } .latest-blog-1 .wt-post-info{ position:relative; } .latest-blog-1 .wt-post-meta{ border-top:1px solid #edeeef; padding:20px 0px 0px 0px; } .latest-blog-1 .wt-post-info .post-date{ position: absolute; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; left: 0px; letter-spacing: 1px; right: 0; top: 134px; text-transform:uppercase; white-space: nowrap; color:#50aab2; } .latest-blog-1 .wt-post-info .post-date:after{ content: ''; width: 30px; height: 1px; position: absolute; right: 102%; top: 10px; background-color: #50aab2; } .latest-blog-1 .wt-post-meta ul li:first-child{ text-align:left; width:auto; } .latest-blog-1 .wt-post-meta ul li{ margin:0px 5px; display:table-cell; vertical-align:middle; text-align:right; width:50px; } .latest-blog-1 .wt-post-meta li::after { display:none; } .latest-blog-1 .wt-post-meta .post-author img{ width:45px; height:45px; margin-right:10px; -webkit-border-radius: 50%; border-radius: 50%; } .blog-post.blog-grid-1{ margin-bottom:50px; } .blog-grid-1 .wt-post-info{ position:relative; margin:0px; z-index:1; } .blog-list-1 .wt-post-info{ position:relative; z-index:1; padding: 20px 0px; } .post-author-pic a{ display:table; } .post-author-pic a span{ display:table-cell; vertical-align:middle; text-align:left; } .post-author-pic a span:first-child{ width: 55px; padding-right: 10px; } @media only screen and (max-width:420px) { .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;} } /*------------------------------------- 10. side bar -------------------------------------*/ .side-bar .widget{margin-bottom:30px;} .widget .widget-post img {width: 100%;} @media only screen and (max-width: 991px) { .side-bar {margin-bottom:40px;} .wt-post-title .post-title { font-size: 20px; line-height: 26px; } .latest-blog-1 .wt-post-media{ margin-right:0px; } .latest-blog-1 .wt-post-info { padding: 20px 30px 20px 45px; } } @media only screen and (max-width:768px) { .latest-blog-1 .wt-post-info .post-date{ position:static; transform:none; padding-bottom: 25px; padding-left:40px; } .latest-blog-1 .wt-post-info { padding: 30px 0px 20px 0px; } .latest-blog-1 .wt-post-info .post-date:after{ right: auto; top: 40px; left:0px; } } /*------------------------------------- 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;color: #000;position: relative;margin-bottom: 30px;border-left: 4px solid #50aab2; background-color:#f7f7f7;} 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: 20px;width: 65px;height: 65px;background-color: #fff;padding: 5px;} ol.comment-list li.comment .comment-author .fn {display: inline-block; color: #000; 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: #000;} 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; } ol.comment-list li.comment .reply{text-align:right;} ol.comment-list li.comment .reply a {display:inline-block; font-weight:600; position:relative; padding: 8px 0px; color: #000; letter-spacing: 1px; text-decoration: none;} ol.comment-list li.comment .reply a:before, ol.comment-list li.comment .reply a:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } ol.comment-list li.comment .reply a:before { bottom: 0; display: block; height: 2px; width: 0%; content: ""; background-color: #50aab2; } ol.comment-list li.comment .reply a:after { left: 0; top: 0; padding: 8px 0px; position: absolute; content: attr(data-hover); color: #50aab2; white-space: nowrap; max-width: 0%; overflow: hidden; } ol.comment-list li.comment .reply a:hover:before { opacity: 1; width: 100%; } ol.comment-list li.comment .reply a:hover:after{ max-width: 100%; } ol.comment-list li .children {list-style: none; margin-left:80px;} ol.comment-list li .children li { padding: 0;} @media only screen and (max-width: 767px) { .comments-area .padding-30{ padding:15px;} ol.comment-list li.comment .comment-body { margin-bottom: 30px; margin-left: 30px; padding-left: 60px;} ol.comment-list li.comment .comment-author .avatar { left:-35px; height: 70px; width: 70px;} ol.comment-list li .children {margin-left: 20px;} } @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: -15px; 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:20px;margin-bottom:20px;margin-left:0px;} ol.comment-list li.comment .comment-author .avatar { position:inherit; left:inherit; right:inherit; margin:0px auto 20px; width:100%; height:100%; padding:0px; } } /*------------------------------------- 13. comment form -------------------------------------*/ .comment-respond .comment-reply-title {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; border:none; background-color: #fff; border: 1px solid #e3e3e3;} .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{ font-weight: 300; padding: 10px 30px;} .comment-form .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #000; font-size:12px; text-transform:uppercase; } .comment-form .form-control::-moz-placeholder { /* Firefox 19+ */ color: #000; font-size:12px; text-transform:uppercase; } .comment-form .form-control:-ms-input-placeholder { /* IE 10+ */ color: #000; font-size:12px; text-transform:uppercase; } .comment-form .form-control:-moz-placeholder { /* Firefox 18- */ color: #000; 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 -------------------------------------*/ .date-style-2 .post-date { color:#fff; position:absolute; left:20px; top:20px; text-align:center; text-transform:uppercase; background-color:#000; z-index:1; padding:20px 30px; } .date-style-2 .post-date strong, .date-style-2 .post-date span { display:block; padding:10px 5px; } .date-style-2 .post-date strong { font-size:60px; line-height:56px; padding:0px; position:relative; font-family: 'Martel', serif; } .date-style-2 .post-date span { font-size:12px; font-weight:500; padding:0px; } .date-style-2 .post-date:after, .date-style-2 .post-date .fa, .date-style-outline .post-date:after, .date-style-outline2 .post-date:after{ display:none; } @media only screen and (max-width: 380px) { .date-style-2 .post-date strong { font-size:22px; line-height:26px; } } /*========date style outline========*/ .date-style-outline{ padding:40px 40px 40px 110px; margin-bottom:30px; } .date-style-outline .post-date { color: #fff; position: absolute; left: 30px; top: 40px; text-align: center; text-transform: uppercase; background-color: #000; z-index: 1; padding: 10px 15px; border:5px solid #fff; } .date-style-outline .post-date strong { font-size: 32px; line-height: 28px; padding: 0px; position: relative; font-family: 'Martel', serif; } .date-style-outline .post-date i{ display:none; } .date-style-outline .post-date span { font-size: 12px; font-weight: 500; padding: 0px; display:block; } .date-style-outline .wt-post-meta a { color: #fff; } .date-style-outline2{ padding:0px 0px 0px 90px; margin-bottom:60px; } .date-style-outline2 .post-date { color: #000; position: absolute; left: 0px; top: 0px; text-align: center; text-transform: uppercase; background-color: #f1f1f1; z-index: 1; padding: 10px 15px; } .date-style-outline2 .post-date strong { font-size: 32px; line-height: 28px; padding: 0px; position: relative; font-family: 'Martel', serif; } .date-style-outline2 .post-date i{ display:none; } .date-style-outline2 .post-date span { font-size: 12px; font-weight: 500; padding: 0px; display:block; } .date-style-outline2 .wt-post-meta a { color: #000; } .date-style-outline2 .readmore-line a:after{ content:""; position:absolute; width:30px; height:1px; right:-40px; top:10px; background-color:#000; } @media only screen and (max-width:360px){ .date-style-outline{ padding:20px; padding-top:100px; } .date-style-outline .post-date span{ display:inline; } .date-style-outline .post-date{ left:20px; top:20px; } } /*========date style outline End========*/ .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-3 -------------------------------------*/ .latest-blog-3.post-overlay .wt-post-info{ position:absolute; top:0px; left:0px; width:100%; height:100%; display:table; } .latest-blog-3.post-overlay{ height:488px; } .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.blog-md .wt-post-media { width:230px; float:left; margin-right:30px; } .latest-blog-3.blog-md .wt-post-info { border:none; } .latest-blog-3.blog-md .wt-post-tags { border:none; display:inline-block; padding:0; } .latest-blog-3.blog-md .wt-post-meta i{ color:#222222; } @media only screen and (max-width:991px) { .latest-blog-3.post-overlay{ height:360px; } } @media only screen and (max-width:640px) { .latest-blog-3.blog-md .wt-post-media { width:100%; } } /*=====================================*/ .latest-blog-4.post-overlay .wt-post-info{ position:absolute; top:0px; left:0px; width:100%; height:100%; display:table; } .latest-blog-4.post-overlay{ height:360px; } .latest-blog-4.post-overlay .wt-post-info .post-overlay-position{ display:table-cell; vertical-align:bottom; } .latest-blog-4.post-overlay .wt-post-meta a{ color:#fff; } .latest-blog-4.post-overlay .wt-post-meta i{ color:#fff; } .latest-blog-4.blog-md .wt-post-media { width:230px; float:left; margin-right:30px; } .latest-blog-4.blog-md .wt-post-info { border:none; } .latest-blog-4.blog-md .wt-post-tags { border:none; display:inline-block; padding:0; } .latest-blog-4.blog-md .wt-post-meta i{ color:#222222; } @media only screen and (max-width:991px) { .latest-blog-4.post-overlay{ height:360px; } } @media only screen and (max-width:640px) { .latest-blog-4.blog-md .wt-post-media { width:100%; } } .black-gradient{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+50,000000+50&0+50,0.65+92 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0,0,0) 92%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 40%,rgba(0,0,0) 92%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 40%,rgba(0,0,0) 92%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } /*====================================== 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%; } .nav-wide .container{padding: 0px 0px 0px 15px;} .nav-full-banner .container{ max-width:1440px; width:100%; padding:0px !important; } @media only screen and (max-width:991px) { .nav-wide .container{padding:0px 70px;} .nav-full-banner .container{ padding:0px 15px !important; } } @media only screen and (max-width:768px) { .nav-wide .container{padding:0px 15px;} } /*------------------------------------- 2. without top bar -------------------------------------*/ .extra-nav { display:table; float:right; position:relative; padding-left: 20px; margin-left: 20px;z-index:13;} .extra-nav .extra-cell{ display:table-cell; vertical-align:middle;} @media only screen and (max-width:480px) { .extra-nav.header-2-nav{ padding-left:0px; } .extra-nav.header-2-nav::after{ display:none; } .extra-nav.header-2-nav .extra-cell{ padding-left:0px; } .extra-nav.header-2-nav .site-menu-share{ font-size:0px; } .extra-nav.header-2-nav .site-search-btn{ font-size:0px; padding: 0px; } .extra-nav.header-2-nav .fa { font-size:16px; margin-left:0px; } } /*------------------------------------- 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: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: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:48px; vertical-align:middle; padding:0; font-size:20px; color:#1bbce8; margin-top:2px; 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%;} /*====header center====*/ .header-center{ display:table; width:100%; } .header-center .wt-header-left .e-p-bx{ position: relative; z-index: 9; } .header-center .wt-header-left .e-p-bx li{ padding-right:20px; padding-left:20px; font-size:16px; font-weight:600; color:#000; position:relative; } .header-center .wt-header-left .e-p-bx li:first-child{ padding-left:0px; } .header-center .wt-header-left .e-p-bx li:after{ content: ''; width: 1px; height: 40px; position: absolute; right: 0px; top: -6px; background-color: rgba(0,0,0,0.2); } .header-center .wt-header-left .e-p-bx li:last-child:after{ visibility:hidden; } .header-center .wt-header-left .e-p-bx li i{ font-size:18px; } .header-center .wt-header-right .extra-nav{ display:inline-block; height:auto; float:none; padding:22px 15px; margin-left:0px; } .header-center .wt-header-right .extra-nav::after { top: -6px; } .header-center .wt-header-right .extra-nav .extra-cell { display: inline-block; } .header-center .wt-header-left{ display:table-cell; vertical-align:middle; text-align:left; width:200px; } .header-center .wt-header-right{ display:table-cell; vertical-align:middle; text-align:right; width:200px; } .header-center .wt-header-right-child{ float: right; padding-left: 15px; } .header-center .wt-header-center{ display:table-cell; vertical-align:middle; text-align:center; } .header-center .wt-header-center .header-nav .nav{ float: none; margin: 0px auto; width: auto; display: inline-block; } @media only screen and (max-width:1270px) { .nav-wide .container { padding: 0px 0px 0px 15px; } .header-center{ padding:10px 0px; } } @media only screen and (max-width:991px) { .header-center .wt-header-right { width: auto; padding-right: 50px; } .header-center .wt-header-left { width: 140px; } .header-center .wt-header-center{ position: absolute; right: 0px; top: 0px; width: 100%; text-align: left ; padding: 0px 0px; } .header-center .wt-header-center .header-nav .nav { display: block; padding: 0px 15px; } .header-center .wt-header-center .header-nav .nav > li > a{ display: block; } .nav-line-animation > li > a:before, .nav-line-animation > li > a:after{ visibility:hidden; } .header-center .wt-header-center .header-nav{ padding:0px; } .header-center .wt-header-right .extra-nav { padding:18px 0px; } .is-fixed .header-center .navbar-toggle{ margin: 0px; height: 70px; padding:0px 15px; } .is-fixed .header-center .navbar-toggle .icon-bar { background:#50aab2; } .header-center .wt-header-right-child{ float: right; padding-left: 0px; background:none; } } @media only screen and (max-width:640px) { .header-center .wt-header-right{ width:auto; } .header-center .extra-nav { padding-left: 0px; margin-left: 0px; } .header-center .extra-nav .extra-cell{ padding: 0px 0px; } .header-center .extra-nav::after { visibility:hidden; } } @media only screen and (max-width:480px) { .header-center .extra-nav .site-search-btn{ font-size:14px; } .header-center .extra-nav .site-menu-share{ font-size:14px; } .header-center .wt-header-left { width: auto; } } @media only screen and (max-width:400px) { .header-center .wt-header-center{ width:100%; display:block; } .header-center .wt-header-right{ width:100%; text-align:center; display:block; } .header-center .wt-header-right .extra-nav { padding: 18px 0px; } } .site-menu-share{ background: none; border: none; outline: none; color: #000; font-size: 16px; display: inline-block; font-weight:600; text-align: center; } /*====Nav Animation ====*/ .nav-line-animation{ -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .nav-line-animation > li > a { padding: 0.3em 0; color: rgba(255, 255, 255, 0.5); position: relative; text-decoration: none; display: inline-block; } .nav-line-animation > li > a:before, .nav-line-animation > li > a:after { height: 1px; position: absolute; content: ''; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; background-color: #50aab2; width: 0; } .nav-line-animation > li > a:before { top:20px; left: 0; } .nav-line-animation > li > a:after { bottom:15px; right: 0; } .nav-line-animation > li > a:hover, .nav-line-animation > li.current > a { color: #ffffff; } .nav-line-animation > li > a:hover:before, .nav-line-animation > li.current > a:before, .nav-line-animation > li > a:hover:after, .nav-line-animation > li.current > a:after { width: 100%; } /*------------------------------------- 2. when header is sticky -------------------------------------*/ /*.is-fixed .logo-header { height:70px; }*/ /*====================================== 17. MAIN BAR ( place logo & main-navigation ) ======================================*/ .top-bar{ color:#000; 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:#000; 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;} .site-search-btn span.v-share{ position: relative; bottom: -20px; display:block; font-size:11px; text-transform:uppercase; letter-spacing:5px; font-weight:600; font-family: 'Martel', serif; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } @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:0px 0px; -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-toggle {float:left; margin:9px 0;} .header-botton .navbar-toggle span {background-color:#fff;} .header-botton .header-nav .nav > li > a {padding:12px 12px; color:#777;} } @media only screen and (max-width:767px) { .header-middle .logo-header {float:none; margin:9px auto;} } /*====================================== 18. NAVIGATIONS ======================================*/ /*------------------------------------- 1. mega-menu -------------------------------------*/ .navbar-toggle { border:none; margin-top:24px; margin-bottom:24px; margin-left:15px; margin-right:-10px; padding: 12px 10px;} .navbar-toggle .icon-bar { background:#000; height:3px; border-radius:0; -webkit-border-radius:0;} @media only screen and (max-width:480px) { .navbar-toggle { margin-left:10px;} .extra-nav .extra-cell {margin-left:0;} } .is-fixed .navbar-toggle { margin-top:14px; margin-bottom:14px;} .header-nav { position:relative; padding:0px; z-index:10;} .header-nav .nav {float:right;} .header-nav .nav i {font-size:9px; margin-left:3px; margin-top:-3px; vertical-align:middle; opacity:0.7;} .header-nav .nav > li { font-weight:500; position:relative; text-transform:uppercase; margin:0px 0px; padding:17px 0px; margin:-10px 0px;} .header-nav .nav > li > a { border-radius: 0; -webkit-border-radius:0; -moz-border-radius:0; color: #000; font-size: 12px; padding:33px 12px 25px; cursor:pointer; letter-spacing:2px; margin:-10px 0;} .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: #50aab2;} .header-nav .nav > li:hover > a {color: #50aab2;} .header-nav .nav > li:hover > .sub-menu, .header-nav .nav > li:hover > .mega-menu { opacity: 1; visibility: visible; margin-top:0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-nav .nav > li .sub-menu {background-color: #ffffff; border: 1px solid #f4f4f4; display: block; left: 0; top:100%; list-style: none; margin:20px 0 0; opacity: 0; padding: 0px; position: absolute; visibility: hidden; width: 220px; z-index: 10; text-align:left;} .header-nav .nav > li .sub-menu li { border-bottom: 1px solid #f4f4f4; position: relative; text-transform:none;} .header-nav .nav > li .sub-menu li a {color: #000; display: block; font-size: 12px; padding: 14px 20px;} /*.header-nav .nav > li .sub-menu li a:hover {background-color:#F2F2F2; color: #000; text-decoration: none;}*/ .header-nav .nav > li .sub-menu li:hover > a {color: #000;} .header-nav .nav > li .sub-menu li:last-child {border-bottom: 0px;} .header-nav .nav > li .sub-menu li .fa { color: #363636; display: block; float: right; position: absolute; right: 10px; top: 12px;} .header-nav .nav > li .sub-menu li > .sub-menu { left:220px; margin:0 0 0 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-nav .nav > li .sub-menu li:hover > .sub-menu {left:220px; margin:0px; opacity:1; top: -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: #555555; display: block; font-size: 14px; padding:0 20px;} .header-nav .nav > li .mega-menu > li ul {list-style: none; margin: 10px 0px 0px 0px; padding: 0px;} .header-nav .nav > li .mega-menu > li ul a { color:#474747; display: block; font-size: 13px; line-height: 34px; padding:2px 20px;} .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:#50aab2; 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-plus:before { content:"\2212";} /*.header-nav .nav > li:last-child{display:none;}*/ @media only screen and (max-width: 991px) { header .logo{ display:block; padding:4px 0;} .header-nav .nav i { margin-top:6px;} .header-nav .nav li.has-child.nav-active > a{ color:#50aab2;} } @media only screen and (max-width: 991px) { /* responsive strat when media screen [991px] css START*/ .navbar-header { float: none;} .navbar-toggle { display: block;} .navbar-collapse.collapse { display: none!important;} .navbar-collapse.collapse.in { display: block!important; border-top:0px;} /* 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;} .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: #000;} .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;} } @media only screen and (max-width: 991px) { .is-fixed .header-nav .nav{ overflow:auto; height:275px; } .is-fixed .header-nav .nav > li > a { padding:12px 15px; } .is-fixed#header-part .navbar-toggle{ margin:15px 0; } } @media only screen and (max-width:768px) { .is-fixed .extra-nav { padding: 13px 7px; } } @media only screen and (max-width:767px) { .is-fixed .extra-nav { padding: 13px 0px; } } /* Vertical Nav */ .nav-sidebar{ } /*--vertcal navigation start--*/ .vertical-content-wrap{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow:auto; } .vertical-centered{display: table;width: 100%;height: 100%; text-align:center;} .vertical-nav {font-family: 'Martel', serif; vertical-align:middle; display:table-cell; } .vertical-nav .navbar-nav{margin:0px;} .vertical-nav ul {list-style:none; float:none;} .vertical-nav ul li { float:none;} .vertical-nav ul li a > i {font-size:18px; margin-right:25px; } .vertical-nav ul > li > a {padding: 20px 0px; color: #999; display:inline-block; font-size: 24px; font-weight: 600; text-transform: uppercase;} .vertical-nav ul li a > i {font-size:18px; margin-right:20px; } .vertical-nav ul > li.active > a{ color: #000;} .vertical-nav ul > li > a:hover, .vertical-nav ul > li > a:active, .vertical-nav ul > li > a:focus { background:none; text-decoration: none; color: #000;} .vertical-nav ul > li .mega-menu > li:after{ display:none;} .vertical-nav ul li .sub-menu > li a {font-size: 14px;padding: 10px 30px; text-transform: capitalize;position:relative} .vertical-nav ul li .sub-menu > li a:before, .vertical-nav ul li .sub-menu > li a:after{ top: 8px; position: absolute; color:#000; opacity:0; -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; } .vertical-nav ul li .sub-menu > li a:after{ content: "]"; right: 20%; position: absolute; } .vertical-nav ul li .sub-menu > li a:before{ content: "["; left: 20%; position: absolute; } .vertical-nav ul li .sub-menu > li a:hover:after{ right: 0%; opacity:1; } .vertical-nav ul li .sub-menu > li a:hover:before{ left: 0%; opacity:1; } .vertical-nav ul li .sub-menu > li a > i {font-size:20px; } .vertical-nav ul > li ul, .vertical-nav ul > li .sub-menu {display: none; position: static; visibility: visible; width:auto;} .vertical-nav ul li.has-child { position:relative;} .vertical-nav ul li .sub-menu { opacity: 1; margin: 0 !important; padding:10px 0px; } .vertical-nav .has-child .submenu-toogle {display: inline-block; position: inherit; top: -3px;} .vertical-nav .has-child .submenu-toogle:hover{text-shadow: 0px 0px 8px rgb(0,0,0,0.5);} .nav-transparent-area{ position: absolute; width: 100%; height: 100vh; background-color: rgba(255,255,255,0.8); left: 0; top: 0; display:none; cursor:pointer; z-index:998; } .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 #000; border-radius: 100%; -webkit-border-radius:100%; -moz-border-radius:100%; text-align:center; } .social-rounded li a:hover{ background-color:#000; color:#fff; } @media only screen and (max-width: 360px) { .social-rounded.list-inline > li{ padding-right:0px; } } /*------------------------------------- 2. nav dark version -------------------------------------*/ .nav-dark.header-nav .nav > li .sub-menu, .nav-dark.header-nav .nav > li .mega-menu { background-color: #1f3334; 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{ position:relative; overflow:hidden; z-index:1; } .nav-dark.header-nav .nav > li .sub-menu li a:after{ content:''; position:absolute; right:100%; top:0px; height:100%; width:100%; background-color: #000; opacity:0.2; -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; z-index:-1; } .nav-dark.header-nav .nav > li .sub-menu li a:hover:after{ right:0%; } .nav-dark.header-nav .nav > li .sub-menu li a:hover{ color: #50aab2; } /*.nav-dark.header-nav .nav > li .mega-menu > li ul a:hover { 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: #23282f; } .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: rgba(0,0,0,0.2); color: #50aab2; } .nav-dark.header-nav .nav > li ul, .nav-dark.header-nav .nav > li .sub-menu, .nav-dark.header-nav .nav > li .mega-menu { background-color: #23282F; } } /*------------------------------------- 3. when header is sticky -------------------------------------*/ .sticky-no .main-bar {position:static !important;} /*------------------------------------- 4. when header is sticky -------------------------------------*/ .is-fixed .main-bar {position:fixed; top:0; left:0;} /*------------------------------------- 5. header id Fixed -------------------------------------*/ /*.is-fixed.color-fill .main-bar { padding:0px 64px;}*/ /*.is-fixed.color-fill .header-nav .nav > li { margin:0; padding:0;} .is-fixed.color-fill .header-nav .nav > li > a { margin:0; padding:25px 12px;}*/ .is-fixed.color-fill .nav-line-animation > li > a::before { top: 15px; } .is-fixed.color-fill .nav-line-animation > li > a::after { bottom: 15px; } @media only screen and (max-width:767px){ .main-bar, .is-fixed .main-bar, .is-fixed.color-fill .main-bar { padding: 0px;} } /*------------------------------------- 6. header with bg primary color 1 -------------------------------------*/ .bg-primary .header-nav .nav > li > a { color:#fff;} .bg-primary .header-nav .nav > li:hover > a, .bg-primary .header-nav .nav > li.active > a, .bg-primary .header-nav .nav > li.current-menu-item > a {color:#1a1a1a;} .bg-primary .site-search-btn, .bg-primary .wt-cart .woo-cart-total, .bg-primary .wt-cart .woo-cart-count {color:#fff;} .bg-primary .wt-cart .woo-cart-count, .bg-primary .wt-cart .woo-cart-count::before {border-color:#fff;} .bg-primary .navbar-toggle .icon-bar {background-color:#fff;} @media only screen and (max-width:991px) { .bg-primary .header-nav .nav > li > a { color:#777;} .bg-primary .header-nav .nav > li:hover > a, .bg-primary .header-nav .nav > li.active > a, .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;} .is-fixed.color-fill .header-nav .nav > li { margin:0; padding:0;} .is-fixed.color-fill .header-nav .nav > li > a { margin:0; padding:10px 12px;} .bg-primary .site-search-btn, .bg-primary .wt-cart .woo-cart-total, .bg-primary .wt-cart .woo-cart-count {color:#50aab2;} .contact-slide-show.text-white{color:#50aab2;} } /*====================================== 38. Cart ======================================*/ .wt-cart .woo-cart-total { display:inline-block; font-weight:600; color:#555; } .wt-cart .woo-cart-count{ color: #555; font-weight:800; display: inline-block; min-width: 40px; padding: 9px 5px 10px; position: relative; text-align: center; } .wt-cart .woo-cart-count{ position:relative; } .wt-cart .woo-cart-count i{ font-size:16px; } .wt-cart .woo-cart-count .shopping-bag.wcmenucart-count { background-color: #fff; color: #000; border-radius: 100%; width: 20px; height: 20px; display: inline-block; font-weight: 400; font-size: 12px; line-height: 20px; position: relative; top: -10px; } .cart-dropdown-item-wraper { top:110%; right:0px; position:absolute; z-index:999; background-color:#fff; padding:2px; border:3px solid #eaeaea; width:300px; display:none; -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.16); box-shadow: 0 0 10px 0 rgba(0,0,0,0.16); text-align:left; } .nav-cart-items { position: relative; } .nav-cart-items:before { border-bottom: 8px solid #dcdcdc; border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; height: 0; position: absolute; right: 35px; top: -12px; width: 0; } .nav-cart-title { border-bottom: 1px solid #eee; } .nav-cart-title h4 { font-size: 16px; font-weight: 700; letter-spacing: 1px; margin: 0px; } .nav-cart-item { margin-top: 10px; padding:10px; background-color: #f8f8f8; } .nav-cart-item:first-child { border-top: 0 none; margin-top: 0; } .nav-cart-item-image { border: 2px solid #eee; float: left; height: 60px; margin-right: 15px; transition: border-color 0.2s linear 0s; width: 60px; } .nav-cart-item-image a, .nav-cart-item-image img { display: block; height: 60px; width: 60px; } .nav-cart-item-image:hover { border-color: #243447; } .nav-cart-item-desc { position: relative; padding-right: 15px; } .nav-cart-item-desc a { font-size: 13px; font-weight: 600; height: auto; text-align: left; width: auto; } .nav-cart-item-desc a:hover { color: #243447; } .nav-cart-item-desc span.nav-cart-item-price { color: #000; display: block; font-size: 12px; line-height: 20px; } .nav-cart-item-desc a.nav-cart-item-quantity { color: #50aab2; font-size: 10px; right: -5px; top: 2px; padding: 0px 6px 0px 6px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .nav-cart-item-desc a:hover.nav-cart-item-quantity { background-color: #ddd; color: #000; } .nav-cart-action { border-top: 1px solid #eee; } .nav-cart-action button{ padding:10px 20px; } @media only screen and (max-width: 480px) { .cart-dropdown-item-wraper { right:-115px; } .nav-cart-items::before { left: 120px; right:auto; } } @media only screen and (max-width: 400px) { .nav-cart-items::before { left: 130px; right:auto; } } /*====================================== 19. BANNER ======================================*/ /*------------------------------------- 1. inner page banner -------------------------------------*/ .wt-bnr-inr {height:250px; 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;} @media only screen and (max-width: 991px) { .wt-bnr-inr {height: 330px; padding-top: 120px;} } @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;} } .banner-inner-row h1, .banner-inner-row h2, .banner-inner-row h3, .banner-inner-row h4, .banner-inner-row h5, .banner-inner-row h6{ color:#FFF; } /*====================================== 20. SLIDER ======================================*/ /*------------------------------------- 1. owl slider -------------------------------------*/ /*------------------------------------- 1.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:8px; margin:5px; background: #50aab2; 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; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .owl-carousel .owl-dots .owl-dot.active span {background: #50aab2;width:20px;} .owl-carousel .owl-dots .owl-dot:hover span {background: #50aab2;} /*------------------------------------- 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-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next{color: #000;padding: 2px 10px;text-align: center;display: inline-block;cursor: pointer;font-weight: bold; outline:none; outline:none;} .owl-prev {margin-right:5px;} .owl-next {margin-left:5px;} .owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-prev:active, .owl-carousel .owl-nav button.owl-prev:focus, .owl-carousel .owl-nav button.owl-nextt:hover, .owl-carousel .owl-nav button.owl-next:active, .owl-carousel .owl-nav button.owl-next:focus { color: #50aab2; } /*------------------------------------- 1.12 owl dots nav position -------------------------------------*/ .owl-dots-bottom-left .owl-dots, .owl-dots-bottom-right .owl-dots , .owl-dots-bottom-center .owl-dots{ bottom:0px; padding:15px 20px; position: absolute; width:100%; } .owl-dots-bottom-left .owl-dots { text-align: left;} .owl-dots-bottom-right .owl-dots { text-align: right;} /*====================================== 21. PAGINATION ======================================*/ /*1. pagination style-1 */ .pagination-bx .pagination, .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; padding:12px 16px; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { background-color: #50aab2; 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: #50aab2; border-color:transparent; } .pagination > .previous > a, .pagination > .next > a { font-size:12px; } /*====================================== 22. FOOTER ======================================*/ /*------------------------------------- 0. footer Large css -------------------------------------*/ .footer-large .footer-bottom{ padding: 20px 0px; color: #787878; font-size: 13px; } /*------------------------------------- 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:26px;} .site-footer { background-position:center; background-size:cover; border-top: 1px solid #dadada;} .site-footer p { line-height:26px;} .site-footer .widget ul{ list-style:none; margin-top:0px;} .footer-dark .footer-bottom .copyrights-text { color:#b7b7b7; } .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: #999; } .footer-bottom {padding:100px 0px; color:#787878; font-size:13px;} .footer-bottom .copyrights-text { color:#1f3334; text-transform:uppercase;} .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:#000; } .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:991px) { .site-footer{padding:0px;} .copyright-block{padding-top:5px;} } .footer-bottom .container{width:100%;} /*------------------------------------- 2. Footer dark version css -------------------------------------*/ .footer-dark.site-footer {border-top: 0px solid #212121;} .footer-dark .footer-top {background-color:#000;} .footer-dark .footer-bottom {background-color:#0e0e0e;} .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:#999;} .footer-dark .site-button{background-color:#0e0e0e;} .footer-dark .site-button:hover{background-color:#fff;color:#000;} .footer-dark .social-icons li a{color: #fff;} .footer-dark .footer-top a:active, .footer-dark .footer-top a:focus, .footer-dark .footer-top a:hover {color: #ffbc13;} .footer-dark .footer-top p a{color: #fff;} .footer-dark .footer-top .widget_newsletter .form-control { background-color:#0e0e0e; border-color:#2d2d2d;} .footer-light .footer-top {background-color:#eee;} .footer-light .footer-bottom { background-color:#e6e6e6; } .footer-top { padding: 60px 0px 0px 0px; } .footer-wide .container-fluid{ width:100%; max-width:1170; } @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:#ebebeb; 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; -webkit-border-radius:50%; border-radius:50%; } button.scroltop span{display: block; font-size: 24px; line-height: 24px;} .string {position:relative;} #btn-vibrate{ animation:vibrate 2s linear 0s infinite; -moz-animation: vibrate 2s linear 0s infinite; /* Firefox */ -webkit-animation: vibrate 2s linear 0s infinite; /* Safari and Chrome */ -o-animation: vibrate 2s linear 0s infinite; /* Opera */ } @keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } /* Firefox */ @-moz-keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } /* Safari and Chrome */ @-webkit-keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } /* Opera */ @-o-keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } @media only screen and (max-width:480px) { button.scroltop {font-size:7px; height:30px; width: 30px; line-height:16px;} button.scroltop span {font-size: 10px; line-height: 10px;} } /*====================================== 23. PAGE-CONTENT ======================================*/ #bg {background-attachment:fixed; background-size:cover;} .page-wraper {background:#fff;} .page-content {position:relative;} .section-full {position:relative;} /*------------------------------------- 1. Section Head Part -------------------------------------*/ .section-head {margin-bottom:30px;} .section-head.no-margin {margin-bottom:0;} .section-head h1, .section-head h2, .section-head h3 {margin-top:0; font-family: 'Martel', serif; } .title-small {display:block; color:#7a959d; margin-bottom:15px;} .section-head p {padding-top:20px; font-size:14px;} .section-head p:last-child { margin-bottom:0;} .text-center.section-head p {max-width:800px; margin-left:auto; margin-right:auto;} .text-white {color:#FFF; } .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p, .text-white .title-small {color:#FFF; } /*------------------------------------- 2. Section Content Part -------------------------------------*/ @media only screen and (max-width:1024px) { .section-full{ background-attachment:scroll !important; } } @media only screen and (max-width:480px) { .section-head h1, .section-head h2, .section-head h3 {font-size:24px;line-height:30px;} } /*====================================== 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-toggle, .nav-pills > li > a, .pager li > a, .pager li > span, .well, .alert, .list-group-item:first-child, .list-group-item:last-child, .input-group-addon, .btn-group-divides > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group-divides > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child), .wt-booking-form .wt-extra-services li .wt-icon-box-lg, .wt-booking-form .wt-extra-services li.active .wt-icon-box-lg:after, .searchform input[type="text"], .searchform input[type="submit"], ol.comment-list li.comment .comment-body { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } /*------------------------------------- 2. transition -------------------------------------*/ a, .btn, .form-control, .overlay-bx, .overlay-icon li a i, .wt-icon-box-xld, .wt-icon-box-xl, .wt-icon-box-lg, .wt-icon-box-md, .wt-icon-box-sm, .wt-icon-box-xs, .share-social-bx li, .indicator, .profile-menu ul li, .staff-member .member-done, .how-wt-work .wt-box .shadow-bx img, .how-wt-work .wt-box .step-no-bx, .wt-info-has, .wt-we-find .wt-box, .navbar-toggle, .logo-header, .header-nav .nav > li > a, .extra-nav, .acod-head .indicator .fa { -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .animate-slow { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .animate-mid { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .animate-fast { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } /*------------------------------------- 3. float-clearfix -------------------------------------*/ .clearfix::after, .filter-wrap::after, .filter-wrap::after, .wt-icon-box-wraper::after, ol.commentlist li::after { content: ""; display: table; clear: both; } /*====================================== 32. Inner pages ======================================*/ /*------------------------------------- 2. Out Team -------------------------------------*/ /*------------------------------------- 4. Product block -------------------------------------*/ .product-block{min-height:345px;} .product-block p{margin-bottom: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;} /*====================================== 34. Home Page ======================================*/ .why-choose-half-section{ position:relative; z-index:1;} .why-choose-half-section:after{ content: ""; position: absolute; top: 10%; right:270px; width: 1000%; height: 80%; z-index: -1; background-image:url(../images/background/bg7.png); background-color:#50aab2; } @media only screen and (max-width:1200px){ .why-choose-half-section:after{ right:250px; } } @media only screen and (max-width:991px){ .why-choose-half-section{display:none} } @media only screen and (max-width:991px){ .index-about{ margin-left:0px; } .index-about img{ width:100%; margin:0px auto; display:block; } .index-about::after { display:none; } .v-text { position: inherit; right: auto; bottom:auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } @media only screen and (max-width:991px){ .section-full.p-tb90{ padding-top:40px; padding-bottom:40px; } } .carousel-bg-img{ position:absolute; right:-65px; top:-50px; width:100%;} @media only screen and (max-width:991px) { .hilite-title{ display:none;} } @media only screen and (max-width:768px) { .m-carousel-2{ margin-right:65px;} .why-choose-half-section{display:none;} } @media only screen and (max-width:620px) { .carousel-bg-img{ display:none;} } @media only screen and (max-width:460px) { .m-carousel-2 .carousel-hover .carousel-line h2{ font-size:18px; } .m-carousel-2 .carousel-hover .carousel-line p{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .m-carousel-2 .wt-carousel-info{width:100%; padding:25px;} } /*====================================== 35. Carousel overlay content ======================================*/ .wt-carousel-block{position:relative;} .wt-carousel-info{position:absolute; bottom:0px; z-index:2;} .carousel-line{position:relative;} .carousel-line:after, .carousel-line:before{position:absolute; content:""; background-color:#fff;} .carousel-line:after{width:100px; height:6px; left: -40px; bottom: -20px;} .carousel-line:before{width:6px; height:100px; left: -20px; bottom: -40px;} .carousel-hover .owl-item .gradi-black:before{ opacity:0;} .carousel-hover .owl-item.active .gradi-black:before{ opacity:1; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; } .carousel-hover .wt-carousel-info{bottom:-300px; opacity:0px;} .carousel-hover .owl-item.active .wt-carousel-info{ bottom:0px; opacity:1px; -webkit-transition: all 1.5s linear; -moz-transition: all 1.5s linear; -ms-transition: all 1.5s linear; -o-transition: all 11.5s linear; transition: all 1.5s linear; } @media only screen and (max-width:460px) { .carousel-line::after {width: 80px; height: 4px; left: -17px; bottom: -10px;} .carousel-line::before {width: 4px; height: 80px; left: -12px; bottom: -16px;} } /*=========================== 36. Overlay Box 2 ===========================*/ .overlay-bx-2{ position: absolute; left: 0; bottom:0px; width: 100%; height: 100%; z-index: 1; background-color:#000; opacity:0; -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; } .overlay-bx-2:hover{ opacity:0.9; bottom:0px;} /*=========================== 37. line-filter-block ===========================*/ .line-filter-outer{ position:relative; z-index:1; min-height:520px; } .hover-effect-content{ position: absolute; padding: 30px; bottom: -100%; right: 20px; width: 55%; background-color: #fff; -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; } .hover-effect-content:after{ width: 0px; height: 0px; border-top: 25px solid #fff; border-left: 25px solid transparent; position: absolute; content: ""; right: 40px; bottom: -25px;} .owl-carousel-filter .owl-item.active.center .hover-effect-content, .owl-carousel-filter2 .owl-item.active .hover-effect-content, .owl-carousel-filter3 .owl-item.active .hover-effect-content{ bottom:40px; } .owl-carousel-filter.owl-btn-bottom-center .owl-nav, .owl-carousel-filter2.owl-btn-bottom-center .owl-nav, .owl-carousel-filter3.owl-btn-bottom-center .owl-nav{ margin-top:20px; margin-bottom:50px; } .owl-carousel-filter.owl-btn-bottom-center .owl-nav button.owl-prev, .owl-carousel-filter2.owl-btn-bottom-center .owl-nav button.owl-prev, .owl-carousel-filter3.owl-btn-bottom-center .owl-nav{ margin-right:10px; } .owl-carousel-filter.owl-btn-bottom-center .owl-nav button.owl-next, .owl-carousel-filter2.owl-btn-bottom-center .owl-nav button.owl-next, .owl-carousel-filter3.owl-btn-bottom-center .owl-nav button.owl-next{ margin-left:10px; } @media only screen and (max-width:640px){ .hover-effect-content{ width:75%; } } @media only screen and (max-width:400px){ .owl-carousel-filter .owl-item.active.center .hover-effect-content p, .owl-carousel-filter2 .owl-item.active.center .hover-effect-content p{ display:none; } .hover-effect-content{ width: auto; left: 0; right: 0; margin: 0% 5%; } } /*======================*/ .hover-effect-2{ position:absolute; width:100%; height:100%; left:0px; top:0px; background-color:rgba(0,0,0,0.5); opacity:0; color:#fff; -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; } .hover-effect-2 .hover-effect-content2{ position:absolute; height:100%; padding:30px 30px 30px 70px; overflow:hidden; } .hover-effect-2 .hover-effect-content2 p{ padding-top:50px; -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; opacity:0; } .h-category2{ top: 0px; left: 35px; width:160%; position: absolute; white-space: nowrap; margin-left: 0px; background-color:#000; padding:5px 20px 5px 37px; -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -ms-transform-origin: left top 0; -moz-transform-origin: left top 0; -webkit-transform-origin: left top 0; transform-origin: left top 0; text-transform: uppercase; text-transform: 1px 1px 0px rgba(0, 0, 0, 0.5); } /*=========================== 38. latest-blog-dark ===========================*/ .latest-blog-dark-outer{ height:250px;} .latest-blog-dark{ position: absolute; left: -20px; bottom: 20px; width: 260px; min-height: 120px; background-color: #000; padding-left: 40px;} .latest-blog-dark .v-date{ position:absolute; left: -25px; top: 50px; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } /*latest-blog-dark2*/ /*=========================*/ .latest-blog-dark-outer2{height:530px;} .latest-blog-square{position: absolute; right: -60px; bottom: 60px; width: 400px; min-height: 400px; padding: 25px 70px 25px 25px; border:15px solid #000;} .latest-blog-square .v-date{ position:absolute; left: -90px; top: 50px; font-size:16px; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } @media only screen and (max-width:1024px) { .latest-blog-square{ right:15px; width:80%;} .latest-blog-dark{ left:20px;} } @media only screen and (max-width:480px) { .latest-blog-square{ padding:15px;} } /*=========================*/ .some-facts{position:relative; padding:60px 30px 60px 50px; border:15px solid #fff; border-right:0px;} .some-facts:after, .some-facts:before{content:""; position:absolute; background-color:#fff; right:-15px; width:15px; height:140px;} .some-facts:after{ bottom:-15px;} .some-facts:before{top:-15px;} .some-facts-counter{ padding-top:130px;} @media only screen and (max-width:991px) { .some-facts{margin-right:15px;} .some-facts-counter{ padding-top:40px;} } @media only screen and (max-width:768px) { .some-facts:after, .some-facts:before{ height:100px; } } @media only screen and (max-width:480px) { .some-facts{padding:20px;} .some-facts span{ font-size:24px; line-height:inherit;} .some-facts h2{font-size:24px; line-height:inherit;} .some-facts p{ font-size:14px; line-height:inherit;} } /*=========================*/ .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav{position: absolute; margin-top: 0px; top: -10px; left: -80px;} .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-prev {left: 40px; position:relative; background-color:#1a1a1a; margin:0px;} .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-next { left:5px; position: relative; top: 40px; background-color:#1a1a1a; margin:0px;} @media only screen and (max-width:800px) { .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav{left: auto; right: 5px; top: auto; bottom: -47px;} .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-prev {left:0px;} .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-next { left:5px; top: 0px;} } /*========================= 39. background Square block =========================*/ /*========================= 40. About us =========================*/ .m-about{position:relative; z-index:2;} .m-about:after{ content: ""; position: absolute; width: 100%; height: 80%; background-color: #f5f7f6; right: -100px; bottom: 0%; z-index: -1;} @media only screen and (max-width:767px) { .m-about{margin:0px 0px 0px 50px;} .m-about-containt{margin-top:60px;} } /*====================================== 42. Contact Us ======================================*/ .contact-one{position:relative;} .contact-one .form-control{ border: 0px; background-color: transparent; } .contact-one .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #000; font-size:12px; text-transform:uppercase; font-weight:600; } .contact-one .form-control::-moz-placeholder { /* Firefox 19+ */ color: #000; font-size:12px; text-transform:uppercase; font-weight:600; } .contact-one .form-control:-ms-input-placeholder { /* IE 10+ */ color: #000; font-size:12px; text-transform:uppercase; font-weight:600; } .contact-one .form-control:-moz-placeholder { /* Firefox 18- */ color: #000; font-size:12px; text-transform:uppercase; font-weight:600; } .contact-one .form-group{position:relative;} .contact-one .form-control{ border-bottom:2px solid #ddd; padding-left:0px; padding-right:0px; } .contact-one .spin { transition: 300ms cubic-bezier(.4, 0, .2, 1); -webkit-transition: 300ms cubic-bezier(.4, 0, .2, 1); -ms-transition: 300ms cubic-bezier(.4, 0, .2, 1);} .contact-one .spin { width: 0%; height: 2px; position: absolute; bottom: 0; left: 0;} .contact-one .form-control:focus + .spin{ background: #50aab2; width:100%;} .contact-info{position: relative; z-index: 1;} .contact-info .icon-content p{ word-break:normal;} @media only screen and (max-width:768px) { .contact-info{ padding-bottom:0px; } } /*====================================== 43. Work carousal ======================================*/ /*====preview inner pages ====*/ .work-carousel .owl-stage{ padding-top:70px; padding-bottom:70px;} .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; z-index:1; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .work-carousel{ position:relative; z-index:1; } .work-carousel .owl-item.active.center{box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);} .work-carousel .wt-img-effect img{ float:left; width:50%; } .work-carousel .wt-img-effect .wt-info{ position:absolute; top:50%; width:50%; right:0%; padding:30px; z-index:2; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @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{ position:inherit; width:100%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } } /*========================= 45. our-story =========================*/ .our-story .our-story-detail{padding:15px 0px;} .our-story .row{margin-top:62px; margin-bottom:62px; position:relative;} .our-story .row:nth-child(odd){ text-align:left; } .our-story .row:nth-child(even){ text-align:right;} .our-story .row:nth-child(even) [class*="col-"]{float:right} .our-story .row:nth-child(odd) .our-story-detail{margin-left:50px;} .our-story .row:nth-child(even) .our-story-detail{margin-right:50px;} .our-story .row:nth-child(odd) .our-story-pic{margin-right:50px;} .our-story .row:nth-child(even) .our-story-pic{margin-left:50px;} /*| line=====================*/ .our-story{ position:relative; z-index:0;} .our-story:after{ content:""; position:absolute; width:2px; background-color:#000; height:100%; z-index:0;} .our-story:after{left:50%; top:0px;} .our-story .row:last-child:nth-child(even) .our-story-pic:after{ height:100%; } /*_ line=====================*/ .our-story .row:nth-child(odd) .our-story-pic-block:before, .our-story .row:nth-child(even) .our-story-pic-block:before{ content:""; position:absolute; height:100px; width:2px; background-color:#000; top:0px; z-index:-1; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); } .our-story .row:nth-child(odd) .our-story-pic-block:before{right:50px;} .our-story .row:nth-child(even) .our-story-pic-block:before{ left:50px;} /* line circle O=================*/ .our-story .row:nth-child(odd) .our-story-pic-block:after, .our-story .row:nth-child(even) .our-story-pic-block:after{ content:""; position:absolute; height:30px; width:30px; border:2px solid #000; background-color:#fff; z-index:3; -webkit-border-radius:50%; -moz-border-radius:50%; } .our-story .row:nth-child(odd) .our-story-pic-block:after{ right: -15px; top: 35px;} .our-story .row:nth-child(even) .our-story-pic-block:after{ left: -15px; top: 35px;} @media only screen and (max-width:767px) { .our-story .row:nth-child(even) [class*="col-"]{float:left;} .our-story .row:nth-child(odd) .our-story-pic{margin-right:0px; margin-left:50px} .our-story .row:nth-child(even) .our-story-detail{margin-right:0px;margin-left:50px;} .our-story .row:nth-child(even){ text-align:left;} .our-story:after{left:20px;} .our-story .row:nth-child(odd) .our-story-pic-block:after{ left: 20px; right:auto;} .our-story .row:nth-child(even) .our-story-pic-block:after{ left: 20px;} .our-story .row:nth-child(odd) .our-story-pic-block:before{left: 80px;} .our-story .row:nth-child(even) .our-story-pic-block:before{ right:auto;left: 80px;} } /* line circle O blink =================*/ .blink-circle { width: 60px; height: 60px; background:#fff; border-radius: 50%; position: relative; display: block; margin:20px auto; } /* triangle */ .blink-circle::after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-40%) translateY(-50%); transform: translateX(-40%) translateY(-50%); transform-origin: center center; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #ff0000; z-index: 100; -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } /* pulse wave */ .blink-circle:before { content: ""; position: absolute; width: 150%; height: 150%; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation: pulsate1 2s; animation: pulsate1 2s; -webkit-animation-direction: forwards; animation-direction: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: steps; animation-timing-function: steps; opacity: 1; border-radius: 50%; top: -25%; left: -25%; background:#fff; } @-webkit-keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } @keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } /*========================================================= =============================================================*/ /* No Js */ .no-js .owl-carousel-filter { display: block; } /*===============================*/ /*======================= after before slider ========================*/ .rs-addon-beforeafter-btn i{ color:#000; } /* cursor blink animation*/ .typewrite > .wrap:after { content: '|'; -webkit-animation: blink 0.7s infinite; animation: blink 0.7s infinite; position: relative; right:10px; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* Rotate 90==================*/ .slider-text-90{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .readmore-line a{ display:inline-block; position:relative; } .readmore-line a:after{ content:""; position:absolute; width:30px; height:1px; right:-40px; top:10px; background-color:#fff; } /* ===============Team==================*/ .our-team-reverse .row:nth-child(even) [class*="col-"]{float:right} .our-team-reverse-space{margin-left:-15px;margin-right:-15px;} @media only screen and (max-width:991px){ .our-team-reverse .row .equal-col{ height:inherit !important; } .our-team-reverse .row .equal-col .wt-info{ padding:20px; } .our-team-reverse .wt-team-arc{ margin-bottom:30px; } .our-team-reverse .wt-team-arc .wt-info .team-detail{ top:inherit; transform:none; } .our-team-reverse .wt-team-arc .wt-info .social-icons{ position:inherit; bottom:auto; } .our-team-reverse{margin:0px -15px;} .our-team-reverse-space{padding:0px;margin:0px 0px;} } @media only screen and (max-width:768px){ .our-team-reverse .row:nth-child(even) .our-team-reverse-space [class*="col-"]{float:none} } @media only screen and (max-width:600px){ .our-team-reverse .row:nth-child(even) [class*="col-"]{float:none;} } .wt-team-arc .wt-media{ width:100%; height:100%; } .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%; } .wt-team-arc2.bg-black .social-icons li a{color:#fff;} .wt-team-arc2 .wt-info .social-icons{ font-size: 14px; text-align: center; } .wt-team-one{ position:relative; z-index:1; margin-top:40px; } .wt-team-one:after{ content:''; position:absolute; top:-8%; left:10%; width:80%; height:108%; z-index:-1; border:6px solid #ececec; -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; } .wt-team-one .wt-team-media img{ width:100%; } .wt-team-one .wt-team-media{ position:relative; overflow:hidden; } .social-overlay{ position:absolute; width:100%; height:100%; top: 100%; left: 0%; opacity:0; background-color:rgba(0,0,0,0.5); -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; } .team-social-center .team-social-icon{ position:absolute; top:50%; left:50%; width:100%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); transform-origin: center center; } .team-social-icon{ text-align:center; list-style:none; } .team-social-icon li{ display: inline-block; border: 1px solid #fff; width: 36px; height: 36px; line-height: 36px; margin: 5px; } .team-social-icon li a{ color:#fff; } .wt-team-one:hover:after{ border-color:#50aab2; } .wt-team-one:hover .social-overlay{ opacity:1; top: 0%; } .wt-team-one .social-overlay .team-social-icon li:hover{ color:#fff; background-color:#50aab2; border:1px solid transparent; } /* ===============Line corner ==================*/ .line-corner-outer{ position:relative; z-index:1; } .line-corner{ width:20px; height:20px; position:absolute } .line-corner.top-left{ left:10px; top:10px; border-style: solid; border-width:1px 0px 0px 1px; border-color:#000; } .line-corner.top-right{ right:10px; top:10px; border-style: solid; border-width:1px 1px 0px 0px; border-color:#000; } .line-corner.bottom-left{ left:10px; bottom:10px; border-style: solid; border-width:0px 0px 1px 1px; border-color:#000; } .line-corner.bottom-right{ right:10px; bottom:10px; border-style: solid; border-width:0px 1px 1px 0px; border-color:#000; } /* =============== Img center icon ==================*/ .img-center-icon .overlay-bx .overlay-icon{ width:100px; height:40px; background-color:rgba(0,0,0,0.3); } .img-center-icon .overlay-bx .overlay-icon a{ color:#fff; } .img-center-icon .overlay-bx .overlay-icon a:hover{ color:#50aab2; } /* =============== Project Detail ==================*/ .project-detail-outer .project-detail-pic .wt-media img{width:100%;} /* =============== Fixed ==================*/ .wt-full-screen-left { background-color:#ddd; height: 100%; left: 245px; padding-left: 0; position: fixed; top: 0; width: calc(50% - 245px);} .wt-full-screen-right { position:fixed; right:0; top:0; width:50%; height:100%; padding:30px 15px; overflow-x:hidden;} .wt-thum-spacial { width: 100%; height: 100%; left: 0; position: absolute; top: 0; border:20px solid #fff; background-position: center center; background-repeat: no-repeat; background-size: cover;} .wt-thum-spacial.wt-wide-gallery { border:none;} .wt-gallery-listing { list-style:none; margin:0; padding:0;} .wt-gallery-listing li{ margin:0 0 30px;} .wt-full-screen-right.wt-wide-gallery { padding:0;} .wt-full-screen-right.wt-wide-gallery .wt-gallery-listing li { margin-bottom:0;} /*=============================================== left shortcodes =============================================== */ .shortcodes_panel ul { list-style:none; padding-left:0; margin-bottom:0;} .shortcodes_panel ul li {margin-bottom:13px; border-bottom:1px solid #e1e1e1; position:relative; padding:5px 10px 5px 0px; margin-bottom:0; line-height:20px;} .shortcodes_panel ul li {text-transform: uppercase; font-size: 12px;} .shortcodes_panel ul li a {color:#000;} .shortcodes_panel ul li a:hover {color:#50aab2;} .shortcodes_panel li {border-bottom:none; line-height:28px;} .shortcodes_panel li:before { top:0; left:1px;} .shortcodes_panel.inline-links li{display:block; border-bottom:none;} /*=============================================== Modal =============================================== */ .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; } @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 =============================================== */ .outer-box-specing{ padding-left:80px; padding-right:80px; } @media only screen and (max-width:1366px){ .outer-box-specing .container{ width:100%; max-width:1170px; } } @media only screen and (max-width:800px){ .outer-box-specing{ padding-left:0px; padding-right:0px; } .aside-right-item { position:absolute; right:-20px; top:0px; bottom:auto; } } .counter{ font-family: 'Poppins', sans-serif; } @media only screen and (max-width:800px){ .counter.font-60{ font-size:36px; } } @media only screen and (max-width:768px){ .counter.font-60{ font-size:28px; } .testimonial-6 { margin: 20px 10px; } } @media only screen and (max-width:420px){ .testimonial-6 { text-align:center; } .testimonial-6 .testimonial-pic-block{ float:none; margin-bottom:20px; } .testimonial-6 .testimonial-text{ padding-left:0px; } } /*------------------------------------- 1. Top Part Search Bar -------------------------------------*/ .site-search-btn { background: none; border: none; outline: none; color: #000; font-size: 16px; display: inline-block; text-align: center; font-weight: 400; } .left-side-search a{ font-size:16px; display:block; width:40px; line-height:40px; text-align:center; } .left-side-search a span.v-search{ position: relative; bottom: 80px; display:block; font-size:11px; text-transform:uppercase; letter-spacing:5px; font-weight:600; font-family: 'Martel', serif; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .site-search-btn2{ margin-top:80px; } .site-search-btn2 a{ font-size:16px; display:block; width:40px; line-height:40px; text-align:center; } .site-search-btn2 a span.v-share{ position: relative; bottom: -20px; display:block; font-size:11px; text-transform:uppercase; letter-spacing:5px; font-weight:600; font-family: 'Martel', serif; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .site-search-btn2 .dropdown-menu { min-width: 264px; left: 46px; top: 30px; } @media only screen and (max-width:991px) { .site-search-btn { padding:0px 15px;} } /*=====search top popup======*/ #search { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 255); -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: 57%; left: 0; margin-top:-30px; width: 60%; margin-left: 20%; color: #000; font-size: 18px; font-weight: 300; text-align: left; outline: none; padding: 10px 0px; border-radius:0px; } #search input[type="search"] {width: 100%;background: none;border: none;padding: 0px;font-size: 22px;text-transform: uppercase;font-weight: 400;} #search .search-btn {border:none; background:none; padding: 0px 0px 0px 30px;} #search .search-btn i{font-size:18px;} #search .close {position: fixed; top: 20px; 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:#000; 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:70%; margin-left:15px; font-size:26px;} #search input[type="search"] {padding: 0px 0px 0px 0px;} #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 0px;} #search .search-btn {padding: 0px 15px;} #search .search-btn i {font-size: 18px} #search .close:after,#search .close:before{height:16px;} #search .close { width: 16px; height: 16px; top: 45%; } #search .close::after, #search .close::before { right: 8px; } #social-top-icon .close::after, #social-top-icon .close::before { height:16px; } } /*====social popup=====*/ #social-top-icon { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 255); -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; } #social-top-icon.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; } #social-top-icon .full-social-bg { position: absolute; top: 50%; left: 0; margin-top:-30px; width: 60%; margin-left: 20%; outline: none; } #social-top-icon .close {position: fixed; top: 20px; right: 15px; opacity: 1; font-size: 27px; color: #fff; width:30px; height:30px;} #social-top-icon .close:after,#social-top-icon .close:before{ content:""; position:absolute; width:2px; height:32px; background-color:#000; right:20px; top:0px;} #social-top-icon .close:after{ -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg);} #social-top-icon .close:before{ -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari */ transform: rotate(-45deg);} #social-top-icon .close:hover:after ,#social-top-icon .close:hover:before{ cursor: pointer;} #social-top-icon .full-social-bg{text-align:center;} #social-top-icon .full-social-bg ul{list-style:none} #social-top-icon .full-social-bg li{text-align:center;} #social-top-icon .full-social-bg li{ display: inline-block;} #social-top-icon .full-social-bg li a { margin: 5px 2px; background-color: #efefef; position: relative; top: 0px; width: 50px; height: 50px; line-height: 50px; display: inline-block; } #social-top-icon .full-social-bg li a:hover i { color:#fff; } .facebook:hover { background: #3b5998 !important } .google:hover { background: #dd4b39 !important } .instagram:hover { background: #517fa4 !important } .tumblr:hover { background: #32506d !important } .twitter:hover { background: #00aced !important } .youtube:hover { background: #bb0000 !important } @media only screen and ( max-width:768px ){ #social-top-icon .full-social-bg { width: auto; margin-left: 2%; } } @media only screen and ( max-width:480px ){ #social-top-icon .full-social-bg li a { top: 10px; width: 30px; height: 30px; line-height: 30px; } } @media only screen and ( max-width:400px ){ #social-top-icon .close { width: 16px; height: 16px; top:45%; } #social-top-icon .close::after, #social-top-icon .close::before { right: 8px; height:16px } } #contact_us_popup{ 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; } #contact_us_popup.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; } #contact_us_popup form { position: absolute; top: 50%; left: 0; margin-top: -51px; width: 60%; margin-left: 20%; color: #000; border-bottom: 5px solid rgb(0, 0, 0); font-size: 40px; font-weight: 300; text-align: left; outline: none; padding: 10px; border-radius:0px; } #contact_us_popup input[type="search"] {width:100%; background: none; border:none; padding: 0px 30px;} #contact_us_popup .search-btn {border:none; background:none; padding: 0px 30px;} #contact_us_popup .search-btn i{font-size:36px;} #contact_us_popup .close {position: fixed; top: 15px; right: 15px; opacity: 1; font-size: 27px; color: #fff; width:30px; height:30px;} #contact_us_popup .close:after,#contact_us_popup .close:before{ content:""; position:absolute; width:2px; height:32px; background-color:#000; right:20px; top:0px;} #contact_us_popup .close:after{ -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg);} #contact_us_popup .close:before{ -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari */ transform: rotate(-45deg);} #contact_us_popup .close:hover:after ,#contact_us_popup .close:hover:before{ cursor: pointer;} @media only screen and ( max-width:768px ){ #contact_us_popup form{ width:90%; margin-left:5%; font-size:26px;} #contact_us_popup input[type="search"] {padding: 0px 0px 0px 30px;} #contact_us_popup .search-btn {padding: 0px 15px;} #contact_us_popup .search-btn i {font-size: 24px;} } @media only screen and ( max-width:400px ){ #contact_us_popup form{ font-size:16px;} #contact_us_popup input[type="search"] { padding: 0px 0px 0px 10px;} #contact_us_popup .search-btn {padding: 0px 15px;} #contact_us_popup .search-btn i {font-size: 18px} } .wt-quik-search .form-control::-moz-placeholder {color: #fff;} .wt-quik-search .form-control:-moz-placeholder {color: #fff;} .wt-quik-search .form-control:-ms-input-placeholder { color: #fff;} .wt-quik-search .form-control::-webkit-input-placeholder {color: #fff;} @media only screen and (max-width:767px) { .site-search { width:100%;} .site-search .site-button{padding:0;} .site-search form {padding-left:0;} } /*====================================== 59. animated play btn ======================================*/ .video-play-btn2 { position: absolute; left: 50%; top: 50%; display: block; background:#fff; border-radius: 50%; z-index:10; width:60px; height:60px; -webkit-transform: translateX(-40%) translateY(-50%); transform: translateX(-40%) translateY(-50%); transform-origin: center center; } /* triangle */ .video-play-btn2::after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-40%) translateY(-50%); transform: translateX(-40%) translateY(-50%); transform-origin: center center; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #ff0000; z-index: 100; -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } /* pulse wave */ .video-play-btn2:before { content: ""; position: absolute; width: 150%; height: 150%; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation: pulsate1 2s; animation: pulsate1 2s; -webkit-animation-direction: forwards; animation-direction: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: steps; animation-timing-function: steps; opacity: 1; border-radius: 50%; top: -25%; left: -25%; background:#fff; } @-webkit-keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } @keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } /*================inner pages css=======*/ @media only screen and (max-width:991px){ .m-about-containt{ padding-top:0px; margin-top:0px; } .m-about-containt h2{ font-size:36px; line-height:normal; margin-top:0px; } } @media only screen and (max-width:768px){ .m-about{ padding:0px; margin:0px; } .m-about::after{ display:none; } } /*------------------------------------- 7. extra cell position -------------------------------------*/ .aside-left-part, .aside-right-part, .aside-right-part2{position:relative;} .aside-left-item{ position:fixed; left:15px; top:50%; z-index:1; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); } .aside-left-item:after{ content: ""; position: absolute; left: 21px; top: 40px; width: 1px; height: 120px; background-color: #000; } .aside-right-item{ position:fixed; right:11px; bottom:48%; z-index:1; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); } .aside-right-item2{ position:fixed; right:11px; bottom:48%; z-index:1; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); } .nav-contact-slide a.v-contact{ position: relative; left: 37px; display:block; font-size:11px; text-transform:uppercase; letter-spacing:5px; font-weight:600; font-family: 'Martel', serif; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .nav-contact-slide:after{ content: ""; position: absolute; right: 20px; top: 80px; width: 1px; height:60px; background-color: #000; } .nav-contact-slide:before{ content: ""; position: absolute; right: 20px; bottom: 80px; width: 1px; height: 60px; background-color: #000; } @media only screen and (max-width:800px){ .aside-left-item { position: inherit; left: auto; top: auto; z-index: inherit; transform: none; margin-top: 15px; } .aside-left-item::after{ display:none; } .site-search-btn2{ margin:0px; } .aside-left-part{ position:inherit; } .site-search-btn2 a span.v-share, .left-side-search a span.v-search{ display:none; } .left-side-search, .site-search-btn2{ display:inline-block; } .aside-right-part{ display:none; } .aside-right-item2{ position:static; } } /*=============contact Popup =================*/ .contact-slide-hide { position:fixed; right:-640px; top:0px; height:100%; min-width:500px; max-width:100%; background:#fff; color:#000; z-index:20; overflow-x: hidden; border-left:1px solid #ddd; } .contact-nav{ display:table; width: 100%; height: 100%; } .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; } @media only screen and (max-width:800px){ .aside-right-part{ display:block; } .nav-contact-slide{ display:none; } .right-side-search{ margin-top:20px; } } @media only screen and (max-width:540px){ .is-fixed .navbar-toggle{ margin-bottom:0px; } .contact-slide-hide { min-width:100%; max-width:100%; } } /*================ Social css=======*/ .social_hide { position:fixed; left:-0px; top:0px; height:100%; width:70px; background:#fff; color:#000; z-index:10; overflow: auto; } .side-social-nav{ display:table; width: 100%; height: 100%; } .side-social-nav ul{ padding-top:60px; display:table-cell; vertical-align:middle; } .side-social-nav a.socialicon_close{ position:absolute; right:0px; top:0px; width:100%; border:none; font-size:36px; } .side-social-nav a { padding:15px 0px; text-decoration: none; font-size: 25px; color: #000; display: block; text-align:center; transition: 0.3s; } .side-social-nav a:hover.socialicon_close { color:#50aab2; background-color:transparent; border:none; } .side-social-nav a:hover { color: #fff; background-color:#000; } .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; } } @media screen and (max-width: 400px) { .social_hide { top:70px; height: calc(100% - 70px); } .side-social-nav ul { padding-top: 0px; } } /*====revolution slider styles=======*/ .light-number{ font-size:120px; font-weight:700; color:rgba(255,255,255,0.5); font-family: 'Roboto', sans-serif; } /*____BOLD TRANSPERENT TITLE____*/ .bold-title { position: relative; z-index: 1; overflow:inherit; } .bold-title h1:after, .bold-title h2:after, .bold-title h3:after, .bold-title h4:after{ position: absolute; content:attr(data-title); color: rgba(210, 210, 210, 0.4); font-weight: 900; font-size: 72px; text-transform: uppercase; top:-10px; left:0%; width: 100%; z-index: -1; } @media only screen and (max-width:720px) { .bold-title h1:after, .bold-title h2:after, .bold-title h3:after{ display:none; } } /*====================================== 59. animated play btn ======================================*/ .play-now{ position: absolute; left: 50%; top: 50%; display: block; border-radius: 50%; z-index:10; width:60px; height:60px; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); transform-origin: center center; } .play-now .icon{ position: absolute; left: 50%; top: 50%; height: 65px; width: 65px; text-align: center; line-height: 65px; background-color: #50aab2; color: #fff; 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(80, 170, 178, .1); -moz-box-shadow: 0 5px 10px 0 rgba(80, 170, 178, .1); -ms-box-shadow: 0 5px 10px 0 rgba(80, 170, 178, .1); -o-box-shadow: 0 5px 10px 0 rgba(80, 170, 178, .1); box-shadow: 0 5px 10px 0 rgba(80, 170, 178, .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(80, 170, 178, .3); -moz-box-shadow: 0 0 0 0 rgba(80, 170, 178, .3); -ms-box-shadow: 0 0 0 0 rgba(80, 170, 178, .3); -o-box-shadow: 0 0 0 0 rgba(80, 170, 178, .3); box-shadow: 0 0 0 0 rgba(80, 170, 178, .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 20px 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 20px 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%; } /*====full navigation====*/ /* OPEN / CLOSE BTNS */ .right-arrow-btn { position: relative; z-index: 999; font-size: 18px; padding-right:10px; font-size: 24px; } .right-arrow-btn button { background:none; border:none; outline:none; padding-right:0px; /* safari hack */ } .notification-animate:before { content: ""; border: 5px solid rgba(255,255, 255, 0.2); position: absolute; top: 4px; left: 2px; background: none; width:24px; height:24px; border-radius: 50%; -webkit-animation: bounceScale 2s cubic-bezier(0.3, 0, 0.7, 1) infinite 0.5s; animation: bounceScale 2s cubic-bezier(0.3, 0, 0.7, 1) infinite 0.5s; z-index:-1; } @-webkit-keyframes bounceScale { 0%, 20% { opacity: 0; border-width: 5px; } 10% { opacity: 1; } 20%, 100% { -webkit-transform: scale(2); transform: scale(2); border-width: 1px; opacity: 0; } } @keyframes bounceScale { 0%, 20% { opacity: 0; border-width: 5px; } 10% { opacity: 1; } 20%, 100% { -webkit-transform: scale(2); transform: scale(2); border-width: 1px; opacity: 0; } } @media only screen and (max-width:991px) { .notification-animate::before{border: 5px solid rgba(80, 170, 178, 0.2);} } /* OVERLAY */ .full-menu{ position: fixed; top: 0; left:0px; z-index: 99; display: none; overflow: auto; width: 100%; height: 100%; background: #fff; } .full-menu-close{ float: right; position: relative; z-index: 1; background: none; border: none; width:40px; height:40px; margin-top: 25px; margin-right: 25px; } .full-menu-close:after{ position:absolute; content:''; right:18px; top:5px; width:2px; height:30px; background-color:#000; -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari 3-8 */ transform: rotate(-45deg); } .full-menu-close:before{ position:absolute; content:''; right:18px; top:5px; width:2px; height:30px; background-color:#000; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari 3-8 */ transform: rotate(45deg); } /*=========================*/ #socialShare { width: 100%; text-align: center; } #socialShare > .socialBox { position: relative; float: none; display: inline-block; color: #000; font-size: 18px; background-color: transparent; text-align: center; } #socialShare a{ position: relative; float: none; display: inline-block; color: #50aab2; font-size: 20px; background-color:# fff; width: 40px; height: 40px; line-height: 40px; text-align: center; } #socialShare > * > span { display: inline-block; color: #50aab2; } /*====image hover content====*/ .work-hover-grid { position: relative; overflow: hidden; } .work-hover-grid img{ width:100%; } .work-hover-grid * { -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .work-hover-grid:before { position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; top: 100%; content: ''; background-color: rgba(255, 255, 255, 0.9); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .work-hover-grid img { vertical-align: top; max-width: 100%; backface-visibility: hidden; } .work-hover-grid .work-hover-discription { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; align-items: center; display: flex; flex-direction: column; justify-content: center; } .work-hover-grid h4, .work-hover-grid h5 { margin: 0; opacity: 0; letter-spacing: 1px; } .work-hover-grid h4 { -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-delay: 0.05s; transition-delay: 0.05s; margin-bottom: 5px; } .work-hover-grid h5 { background-color: #50aab2; padding: 3px 20px; color:#fff; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-delay: 0s; transition-delay: 0s; } .work-hover-grid a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .work-hover-grid:hover:before{ top: 10px; -webkit-transition-delay: 0s; transition-delay: 0s; } .work-hover-grid:hover h4, .work-hover-grid:hover h5{ -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .work-hover-grid:hover h4{ -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .work-hover-grid:hover h5{ -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .button-model{ display:inline-block; } /*====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:50px; 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;; } } .f-social-link.social-icons li a{ position: relative; overflow: hidden; font-size: 18px; color: #50aab2; width:40px; height:40px; line-height:35px; margin: 5px; padding: 2px; display: inline-block; text-align: center; text-decoration: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .f-social-link.social-icons li a:before { width: 36px; height: 36px; line-height: 36px; background-color:#fff; display:block; } .f-social-link.social-icons li a:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #50aab2; content: ''; z-index: -1; display: block; -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, -100%); transform: rotate(-45deg) scale(1.5) translate(0%, -100%); } .f-social-link.social-icons li a:before, .f-social-link.social-icons li a:after { -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .f-social-link.social-icons li a:hover, .f-social-link.social-icons li a:active, .f-social-link.social-icons li a.hover { color: #000; } .f-social-link.social-icons li a:hover:after, .f-social-link.social-icons li a:active:after, .f-social-link.social-icons li a.hover:after { -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, 0%); transform: rotate(-45deg) scale(1.5) translate(0%, 0%); } .top-half-section{ margin-top:-100px; } @media only screen and (max-width: 768px) { .top-half-section{ margin-top:80px; } .section-full.small-device{ padding-top:40px; padding-bottom:40px } .section-full.small-device h2{ font-size: 32px; line-height: 38px; } } .hover-box-style-1{ position:relative; overflow:hidden; } .hover-box-style-1 .hover-box-content{ position:absolute; width:100%; height:100%; left:0px; bottom:-100%; -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; background-color:rgba(255,255,255,0.9) } .hover-box-style-1:hover .hover-box-content{ bottom:0%; } /*====video section====*/ .video-section-full{ margin: 80px 0px; width:400px; padding:50px; } .video-section{ position:relative; z-index:1; margin-right: 31px; } .video-section-content{ display: table; padding: 30px 0px; } .video-section-left{ position:relative; display:table-cell; vertical-align:middle; width:120px; } .video-section-right{ display:table-cell; vertical-align:middle } .video-section-left .play-now{ position: absolute; left: 27%; top: 50%; display: block; border-radius: 50%; z-index: 10; width: 60px; height: 60px; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); transform-origin: center center; } @media only screen and (max-width: 480px) { .video-section-full{ width:100%; margin-bottom:15px; } } /*====MID SLIDER ====*/ .mid-slider{ text-align:center !important } .mid-slider .rev_slider_wrapper{ max-width:1440px !important; margin:0px auto !important; left:auto !important; position:relative !important; } .mid-slider .tp-fullwidth-forcer{ height:auto !important; } /*====half part====*/ .wt-half-left{ position:relative; height:600px; } .wt-half-left img{ position: absolute; right: -70px; bottom: -80px; z-index: 1; } .wt-half-right{ width:555px; float:left; } @media only screen and (max-width: 1200px) { .wt-half-right{ width:100%; float:none; padding:30px 0px 0px 0px; } .wt-half-left img{ right: 0px; } } @media only screen and (max-width: 991px) { .wt-half-left { position: relative; height: 300px; } } @media only screen and (max-width: 420px) { .wt-half-left-outer { display:none; } } /*====multiline-animation====*/ .multi-line-animation{ width:100%; z-index:100; bottom:0px; height: calc(100vh - 50px); } .multi-line-one, .multi-line-two, .multi-line-three, .multi-line-four{ position:absolute; bottom:50px; height:100vh; width:4px; border-left:1px solid rgba(255,255,255,0.2); z-index:20; } .multi-line-one{left:20%;} .multi-line-two{left:40%;} .multi-line-three{left:60%;} .multi-line-four{left:80%;} .animation-block1{ animation-duration: 10s; animation-iteration-count: infinite; background-color: #50aab2; height: 20px; margin: 0px 0px 0px -2px; transform-origin: bottom; width: 3px; } .bounce-1 { animation-name: bounce-1; animation-timing-function: linear; } @keyframes bounce-1 { 0% { transform: translateY(0); } 50% { transform: translateY(100vh); } 100% { transform: translateY(0); } } .animation-block2{ animation-duration: 20s; animation-iteration-count: infinite; background-color: #50aab2; height: 20px; margin: 0px 0px 0px -2px; transform-origin: bottom; width: 3px; } .bounce-2{ animation-name: bounce-2; animation-timing-function: linear; } @keyframes bounce-2 { 0% { transform: translateY(0); } 50% { transform: translateY(100vh); } 100% { transform: translateY(0); } } /*====multiline-animation End====*/ /*====================================== STEP NUMBER ======================================*/ .step-number-block{ position:relative; z-index:1; padding: 0px 0px 0px 0px; } .step-number{ position: absolute; right: 20px; top: 20px; font-size: 120px; font-weight: 800; z-index: 0; line-height: 120px; opacity:0.2; } .step-number.active{ color: #3a4452; } .step-blocks{} .step-blocks-one{background-color:#50aab2;} .step-blocks-two{background-color:#1e1e20;} .step-blocks-three{background-color:#50aab2;} .step-blocks-four{background-color:#1e1e20;} @media only screen and (max-width: 991px) { .step-blocks-three{background-color:#1e1e20;} .step-blocks-four{ background-color:#50aab2;} } @media only screen and (max-width: 776px) { .step-blocks{padding:30px 30px 0px 30px;} .multi-line-one, .multi-line-two, .multi-line-three, .multi-line-four{ bottom:0px; } } @media only screen and (max-width: 600px) { .step-blocks-three{ background-color:#50aab2;} .step-blocks-four{background-color:#1e1e20;} } @media only screen and (max-width: 768px) { .step-blocks{padding:30px 15px 0px 15px;} } /*=======Revolution slider number==============*/ .slider-tag-line{ padding-left:70px !important; position:relative; } .slider-tag-line:after{ content: ''; position: absolute; left: 0; top: 50%; height: 2px; background-color: #fff; z-index: 0; width: 60px; } .slider-tag-line2{ padding-left:70px !important; padding-right:70px !important; position:relative; } .slider-tag-line2:after{ content: ''; position: absolute; left: 0; top: 50%; height: 2px; background-color: #fff; z-index: 0; width: 60px; } .slider-tag-line2:before{ content: ''; position: absolute; right: 0; top: 50%; height: 2px; background-color: #fff; z-index: 0; width: 60px; } .tp-tabs,.tp-tab-mask{width:80px !important;} .tp-tab.selected .slider-number-wraper .tp-tab-number{ color:#000; } .slider-number-wraper{ width:80px !important; padding-left:40px; position:relative; } .slider-number-wraper:after{ content: ''; position: absolute; left: 0; top: 10px; height: 2px; background-color: #fff; z-index: 0; width: 30px; } .slider-number-wraper .tp-tab-number{ color:#fff; font-size:16px; font-family:Arial, Helvetica, sans-serif; } .slider-block{ border:20px solid rgba(255,255,255,0.1); } .tp-bullets { display: none !important; } @media (max-width: 991px) { .tp-bullets { display: block !important; } .tp-thumbs{display: none !important;} } /*====================================== 34. Home Page ======================================*/ .welcome-carousel-outer{ position:relative; z-index:1 } .welcome-carousel-outer:after{ position:absolute; content:''; right:0px; top:80px; width:80%; height:100%; background-image:url(../images/welcome-slider/bg-dot.jpg); background-repeat:repeat; z-index:-1; } .welcome-bg-block{ background-image:url(../images/welcome-slider/large-pic.jpg); background-repeat:no-repeat; background-position:left top; margin-right:230px; background-size: cover; } .welcome-carousel-1{ max-width: 380px; float: right; width: 100%; padding-top: 80px; padding-right: 80px; padding-bottom:80px; margin-right: -230px; } .welcome-carousel-1 .home-carousel-1 { -webkit-box-shadow: -30px 30px 60px 0 #rgba(0,0,0,0.5); box-shadow: -30px 30px 60px 0 rgba(0,0,0,0.5); } .welcome-carousel-1 .home-carousel-1.owl-btn-bottom-left .owl-nav { text-align: left; margin: 0px; position: absolute; left: -272px; bottom: -145px; } @media only screen and (max-width: 1199px) { .welcome-carousel-1 .home-carousel-1.owl-btn-bottom-left .owl-nav { left: -230px; bottom: -130px; } } @media only screen and (max-width: 991px) { .welcome-carousel-outer{ margin-bottom:100px; } .welcome-carousel-1 .home-carousel-1.owl-btn-bottom-left .owl-nav { left: -342px; bottom: -130px; } } @media only screen and (max-width: 768px) { .welcome-carousel-1 .home-carousel-1.owl-btn-bottom-left .owl-nav { left: auto; right:0px; bottom: -50px; } } @media only screen and (max-width: 540px) { .welcome-carousel-1{ float: none; margin-right: 0px; padding: 10%; margin: 0px auto; } .welcome-bg-block{ margin-right:0px; } .welcome-carousel-1 .home-carousel-1.owl-btn-bottom-left .owl-nav { bottom: -110px; } } @media only screen and (max-width:360px) { .welcome-carousel-1 .home-carousel-1.owl-btn-bottom-left .owl-nav { bottom: -90px; } } /*====COunter Section====*/ .counter-section-one{ background-image:url(../images/counter-bg.jpg); height:460px; position:relative; background-size:cover; } .counter-sec-top{ position:absolute; top:10px; right:10px; width:220px; background-color:rgba(255,255,255,0.9) } .counter-sec-bottom{ position:absolute; bottom:10px; left:10px; width:220px; background-color:rgba(255,255,255,0.9) } /*====INPUT ANIMATION=============================================*/ .input-animate.input, .login-animate.input label, .login-animate.input input, .login-animate.input textarea, .login-animate.input .spin { transition: 300ms cubic-bezier(.4, 0, .2, 1); -webkit-transition: 300ms cubic-bezier(.4, 0, .2, 1); -ms-transition: 300ms cubic-bezier(.4, 0, .2, 1);} .input-animate.input input, .input-animate.input textarea, .input-animate.input label { font-size: 14px; color: rgba(0, 0, 0, 0.8); font-weight: 600; } .input-animate.input { margin-bottom: 30px; height: 70px; } .input-animate.input::before { content: ""; background: rgba(0, 0, 0, 0.1); z-index: 3; } .input-animate.input input{ height: 60px; top: 10px; border: none; background: transparent; } .input-animate.input textarea{ height: 60px; padding-top:15px; top: 10px; border: none; background: transparent; } .input-animate.input label { position: absolute; top: 10px; left: 0; z-index: 2; cursor: pointer; line-height: 60px; } .input-animate.input input, .input-animate.input textarea, .input-animate.input label { font-size: 14px; color: rgba(0, 0, 0, 0.8); font-weight: 600; } .input-animate.input::before, .input-animate.input .spin { width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; } .input-animate.input, .input-animate.input input, .input-animate.input textarea{ position: relative; width:100%;outline: none;} .input-animate.input textarea{resize:none;} .input-animate.input .spin { background: #50aab2; z-index: 4; width: 0; } .input-animate.input, .input-animate.input label, .input-animate.input input, .input-animate.input textarea, .input-animate.input .spin { transition: 300ms cubic-bezier(.4, 0, .2, 1); -webkit-transition: 300ms cubic-bezier(.4, 0, .2, 1); -ms-transition: 300ms cubic-bezier(.4, 0, .2, 1); box-shadow: none;} /*=====icon hover shake=====*/ .icon-shake-outer:hover .icon-shake{ animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; display:inline-block; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /*====rev-slider====*/ .tp-thumbs-inner-wrapper .tp-thumb.selected:after{ content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; border:5px solid #50aab2; } /*====Ourteam two====*/ .our-team-one { color: #000000; font-size: 16px; position: relative; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: transparent; padding: 20px 20px 0 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: none !important; } .our-team-one *, .our-team-one *:before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .our-team-one img { box-shadow: 20px -20px 20px rgba(0, 0, 0, 0.2); max-width: 100%; position: relative; vertical-align: top; } .our-team-one .team-bg { background-color: #50aab2; bottom: 30px; left: 40px; position: absolute; right: 0; top: 0; } .our-team-one h4 { position: absolute; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; color: #fff; left: 100%; letter-spacing: 1px; margin: 30px -10px; opacity: 1; padding: 6px 40px 0 0; right: 0; top: 0; white-space: nowrap; } .our-team-one .team-img{ overflow: hidden; position: relative; padding: 40px 40px 0px 0px; } .our-team-one .team-img ul { position: absolute; top:100%; left: 20px; } .our-team-one:hover .team-img ul { top: 60px; } .our-team-one ul li{ display:block; } .our-team-one ul li a{ background-color:#fff; color:#000; width:40px; height:40px; text-align:center; line-height:35px; display: block; position:relative; } .our-team-one ul li a:hover{ color:#203334; background-color:#50aab2; } .our-team-one:hover .team-bg, .our-team-one.hover .team-bg { background-color: #203334; } @media only screen and (max-width:1024px){ .our-team-one img { box-shadow: 5px -5px 20px rgba(0, 0, 0, 0.2); } .our-team-one .team-img { padding: 20px 20px 0px 0px; } .our-team-one h4{ margin: 30px 0px; } } @media only screen and (max-width:767px){ .our-team-one img { box-shadow: 20px -20px 20px rgba(0, 0, 0, 0.2); } .our-team-one .team-img { padding: 40px 40px 0px 0px; } .our-team-one h4{ margin: 30px -10px; } } /*====image hover content====*/ .our-team-two { position: relative; overflow: hidden; } .our-team-two img{ width:100%; } .our-team-two * { -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .our-team-two:before { position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; top: 100%; content: ''; background-color: rgba(255, 255, 255, 0.9); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .our-team-two img { vertical-align: top; max-width: 100%; backface-visibility: hidden; } .our-team-two .work-hover-discription { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; align-items: center; display: flex; flex-direction: column; justify-content: center; } .our-team-two h4, .our-team-two h5, .our-team-two ul{ margin: 0; opacity: 0; letter-spacing: 1px; } .our-team-two h4 { -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-delay: 0.05s; transition-delay: 0.05s; margin-bottom: 20px; } .our-team-two h5 { background-color: #50aab2; padding: 3px 20px; color:#fff; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-delay: 0s; transition-delay: 0s; } .our-team-two ul{ padding: 20px 20px; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-delay: 0s; transition-delay: 0s; } .our-team-two:hover:before{ top: 10px; -webkit-transition-delay: 0s; transition-delay: 0s; } .our-team-two:hover h4, .our-team-two:hover h5, .our-team-two:hover ul{ -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .our-team-two:hover h4{ -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .our-team-two:hover h5{ -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .our-team-two:hover ul{ -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .our-team-two ul li{ display:inline-block; } .our-team-two ul li a{ color:#000; width:40px; text-align:center; display: block; position:relative; } .our-team-two ul li a:hover{ color:#50aab2; } /*========== Box Shadow =============*/ .block-shadow{ -webkit-box-shadow: 0 10px 30px 0 rgba(50,50,50,.16); box-shadow: 0 10px 30px 0 rgba(50,50,50,.16); -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; } /*========== 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; } } .hover-box-effect .wt-thum-bx [class*="wt-icon-box-"]{ position: absolute; right: 20px; bottom: 20px; width: 70px; height: 70px; } /*=====Gallery Filter=====*/ .stamp .stamp-secion{ min-height:404px; } .stamp .stamp-secion-2{ min-height:340px; } @media only screen and (max-width:991px){ .stamp .stamp-secion-2{ min-height:auto; } } /*=====home page 2=====*/ .welcome-block-two .wt-media img{width:100%;} .index-about2{ padding: 50px; margin-left: -100px; margin-top: 50px; } @media only screen and (max-width:991px) { .index-about2{ margin-left: 0px; } } @media only screen and (max-width:640px) { .index-about2{ padding:20px; } } /*=====home page 3=====*/ .welcome-block-three .wt-media img{width:100%;} .owl-nav button.owl-prev, .owl-nav button.owl-next{font-size:14px;} .owl-nav button.owl-prev i, .owl-nav button.owl-next i{font-size:28px; vertical-align:middle;} .owl-nav button.owl-prev i{padding-right:10px} .owl-nav button.owl-next i{padding-left:10px} .index-about3{ padding: 50px; margin-top: 50px; position: relative; z-index: 1; } @media only screen and (max-width:991px) { .index-about3{ margin-right: 0px; } } @media only screen and (max-width:640px) { .index-about3{ padding:20px; } }