/* ========================== Template: Modern - Architecture & Interior design Template Author: thememejestic team Version: 3.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 ======================================*/ @media only screen and (min-width: 1200px){ .container { max-width: 1170px; } } body {background-color:#FFF; font-family: 'Poppins', sans-serif; font-size:12px; font-weight:400; color:#000; padding:0; margin:0; overflow-x: hidden;} a {color: #767676; outline: 0 none; text-decoration:none;} a:hover, a:focus { text-decoration:none; outline: 0 none; } a:active, a:hover, a:focus{ color: #333333; } p a { color:#333333; } img {border-style: none; height: auto; max-width: 100%; vertical-align: middle;} hr {clear:both;} section, aside, details, figcaption, figure, footer, header, main, menu, nav, summary {display:block;} address {font-style:italic;} table {background-color: transparent; width: 100%;} table thead th {color:#333;} table td {padding:15px 10px;} @media only screen and ( max-width:360px){ table td {word-break: break-all;} } p, address, pre, hr, ul, ol, table { margin-bottom:24px; } .clear { clear:both; } ::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:#333333; } h1 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 40px; line-height:46px; color:#000;} h2 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 24px; line-height:30px; color:#000;} h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 20px; line-height:26px; color:#000; margin-bottom:20px;} h4 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; line-height:24px; color:#000; margin-bottom:15px;} h5 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 16px; line-height:22px; color:#000; margin-bottom:10px;} h6 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; line-height:20px; color:#000; margin-bottom:10px;} /*====================================== 3. TEXT & PARAGRAPH ======================================*/ p { line-height:24px; margin-bottom:24px;} strong { font-weight:600;} /*------------------------------------- 1. text align ------------------------------------ */ .text-left {text-align: left;} .text-center {text-align: center;} .text-right { text-align: right;} /*------------------------------------- 2. text vertical align ------------------------------------ */ /*------------------------------------- 3. text no line brack ------------------------------------ */ /*------------------------------------- 4. text transform ------------------------------------ */ .text-uppercase { text-transform: uppercase} /*------------------------------------- 5. text size ------------------------------------ */ .font-12 { font-size:12px; line-height:18px;} .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-28 { font-size:28px; line-height:34px;} .font-30 { font-size:30px; line-height:36px;} .font-32 { font-size:32px; line-height:38px;} .font-36 { font-size:36px; line-height:42px;} .font-40 { font-size:40px; line-height:46px;} .font-50 { font-size:50px; line-height:56px;} /*------------------------------------- 6. text bold ------------------------------------ */ .font-weight-300{font-weight:300;} .font-weight-400{font-weight:400;} .font-weight-500{font-weight:500;} .font-weight-600{font-weight:600;} .font-weight-700{font-weight:700;} /*------------------------------------- 7. Letter Spacing ------------------------------------ */ .letter-spacing-2{letter-spacing:2px;} .letter-spacing-4{letter-spacing:4px;} .letter-spacing-5{letter-spacing:5px;} /*====================================== 4. LISTING STYLES ======================================*/ ul, ol {list-style-position: outside ; padding:0;} ul, ol {margin-bottom:24px;} ul li, ol li {padding:0;} /*------------------------------------- 1. listing before icon color css -------------------------------------*/ 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;} /*------------------------------------- 2. listing before numbers -------------------------------------*/ /*====================================== 5. BOX SPACING (Padding & Margin) ======================================*/ /*------------------------------------- 1.1 padding (around) -------------------------------------*/ .p-a10 {padding:10px;} .p-a20 {padding:20px;} .p-a30 {padding:30px;} .p-a40 {padding:40px;} .p-a50 {padding:50px;} /*------------------------------------- 1.2 Padding (top) -------------------------------------*/ .p-t0 {padding-top:0;} .p-t10 {padding-top:10px;} .p-t15 {padding-top:15px;} .p-t30 {padding-top:30px;} .p-t80 {padding-top:80px;} .p-t90 {padding-top:90px;} .p-t140 {padding-top:140px;} /*------------------------------------- 1.3 Padding (bottom) -------------------------------------*/ .p-b30 {padding-bottom:30px;} .p-b50 {padding-bottom:50px;} /*------------------------------------- 1.4 Padding (left) -------------------------------------*/ .p-l20 {padding-left:20px;} /*------------------------------------- 1.5 Padding (right) -------------------------------------*/ .p-r150 {padding-right:150px;} /*------------------------------------- 1.6 Padding (left right) -------------------------------------*/ .p-lr10 {padding-left:10px; padding-right:10px;} .p-lr20 {padding-left:20px; padding-right:20px;} .p-lr80 {padding-left:80px; padding-right:80px;} /*------------------------------------- 1.7 Padding (top bottom) -------------------------------------*/ .p-tb10 {padding-bottom:10px; padding-top:10px;} .p-tb20 {padding-bottom:20px; padding-top:20px;} .p-tb40 {padding-bottom:40px; padding-top:40px;} .p-tb80 {padding-bottom:80px; padding-top:80px;} .p-tb90 {padding-bottom:90px; padding-top:90px;} /*------------------------------------- 2.1 margin (around) -------------------------------------*/ .m-a0 {margin:0;} /*------------------------------------- 2.2 marging (top) -------------------------------------*/ .m-t0 {margin-top:0;} /*------------------------------------- 2.3 marging (bottom) -------------------------------------*/ .m-b0 {margin-bottom:0;} .m-b5 {margin-bottom:5px;} .m-b10 {margin-bottom:10px;} .m-b15 {margin-bottom:15px;} .m-b20 {margin-bottom:20px;} .m-b30 {margin-bottom:30px;} .m-b50 {margin-bottom:50px;} /*------------------------------------- 2.4 marging (left) -------------------------------------*/ .m-l50 {margin-left:50px;} .m-l100 {margin-left:100px;} /*------------------------------------- 2.5 marging (right) -------------------------------------*/ .m-r50 {margin-right:50px;} /*------------------------------------- 2.6 marging (left right) -------------------------------------*/ /*------------------------------------- 2.7 marging (top bottom) -------------------------------------*/ .m-tb15 {margin-bottom:15px; margin-top:15px; } .m-tb20 {margin-bottom:20px; margin-top:20px; } /*------------------------------------- 2.8 colum gap less -------------------------------------*/ /*====================================== 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 -------------------------------------*/ /*====================================== 7. COLOR ======================================*/ /*------------------------------------- 1. text -------------------------------------*/ .text-white{color:#fff;} .text-black{color:#000;} .text-gray{color:#f5f6f6;} /*------------------------------------- 2. background color -------------------------------------*/ .bg-white{background-color:#FFF;} .bg-black{background-color:#000;} .bg-gray{background-color:#f6f7f8;} .bg-gray-dark{background-color:#d3d3d3;} /*------------------------------------- 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-04{opacity:0.4;} .opacity-07{opacity:0.7;} .opacity-08{opacity:0.8;} .overlay-wraper > .container, .overlay-wraper > .container-fluid, .overlay-wraper > .wt-icon-box-wraper, .overlay-wraper > .wt-left-part, .overlay-wraper > .wt-left-part2, .overlay-wraper > .wt-right-part2{ position:relative; z-index:1; } /*left right part css*/ .wt-left-part{width:562px;} .wt-left-part2, .wt-right-part2{width:562px;} .wt-left-part{float:right;} .wt-left-part2{float:right;} .wt-left-part2{padding-left: 0px;padding-right:30px;} .wt-right-part2{padding-right:0px;padding-left: 30px;} .team-outer{margin-top:198px;} @media only screen and (max-width:1200px) { .wt-left-part{width:100%;} .wt-left-part{clear: both;float: none;padding-left: 30px;} } @media only screen and (max-width:1199px) { .wt-left-part2, .wt-right-part2 { width: 456px; } } @media only screen and (max-width:991px) { .wt-left-part{ max-width: 694px; width: 100%; padding: 0px; margin: 0px auto; } .wt-left-part2{ max-width: 694px; width: 100%; padding: 0px; margin: 50px auto 0px; float: none; } .wt-right-part2{ max-width: 694px; width: 100%; padding: 0px; margin: 50px auto 50px; float: none; } .latest_project-outer { max-width: 694px; width: 100%; padding: 0px; margin: 0px auto; } } @media only screen and (max-width:767px){ .latest_project-outer { max-width: 578px; } .tm-wo-we-r .wt-left-part{ max-width: 520px; } .wt-left-part2{ max-width:520px; } .wt-right-part2{ max-width:520px; } } /*use for box*/ .overlay-bx {position:absolute; left:0; bottom:0; width:100%; height:100%; text-align:center; z-index:1; opacity:0; visibility:hidden;} .overlay-icon {list-style:none; width:160px; height:40px; position:absolute; left:50%; top:50%; margin:-20px -75px; z-index: 1 !important; } .overlay-icon a {display:inline-block; padding:0; margin:0 2px; border:1px solid #fff; color:#fff;} .overlay-icon a:hover {color:#fff; background-color:#000; border:1px solid transparent;} .overlay-bx:hover a > i, .wt-thum-bx:hover .overlay-bx a > i, .wt-box:hover .overlay-bx a > i { opacity:1; visibility:visible; -webkit-transition: all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; transition:all .5s ease-in-out; } .overlay-bx:hover, .wt-thum-bx:hover .overlay-bx, .wt-box:hover .overlay-bx, .ow-img:hover .overlay-bx {opacity:1; visibility:visible; } /*====================================== 9. BOXES CSS ======================================*/ .wt-box , .wt-thum-bx, .wt-post-thum {position:relative; } /*------------------------------------- 1. box content -------------------------------------*/ .wt-box {position:relative; } /*------------------------------------- 2. For icons with box -------------------------------------*/ /*------------------------------------- 3. Border -------------------------------------*/ .bdr-gray{border-color:#dddddd;} /*------------------------------------- 4. For only icons -------------------------------------*/ .icon-sm { display:inline-block; text-align: center; } .icon-sm i { vertical-align:middle; } .icon-sm { width:40px;} .icon-sm i { font-size:30px;} .icon-sm img { vertical-align:middle; max-width:100%; width:auto; } .icon-sm img { height:30px;} /*------------------------------------- 5. place icon with box -------------------------------------*/ .wt-icon-box-wraper {position:relative;} .wt-icon-box-wraper .wt-tilte{ margin-top:0;} .wt-icon-box-wraper p:last-child {margin:0px;} .icon-content { overflow:hidden;} .icon-content p{word-break:break-all;} /*------------------------------------- 6. icon box left align -------------------------------------*/ .wt-icon-box-wraper.left .icon-sm { float:left; margin-right:10px; } /*------------------------------------- 7. icon box right align -------------------------------------*/ .wt-icon-box-wraper.right { text-align:right;} .wt-icon-box-wraper.right .icon-sm { float:right; margin-left:10px; } /*------------------------------------- 8. icon box center align -------------------------------------*/ .wt-icon-box-wraper.center { text-align:center; } /*------------------------------------- 9. media with content box css -------------------------------------*/ .wt-box, .wt-tilte {position:relative;} .wt-box[class*="border-"], .wt-icon-box-wraper[class*="border-"] {border-color:#eee;} /*------------------------------------- 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:after, .wt-img-overlay1:before, .gradi-black:before, .gradi-black: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. 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 -------------------------------------*/ /*====================================== 11. shortcodeS ======================================*/ /*------------------------------------- 1. Buttons --------------------------------------- */ /* 1.1 theme default button */ .btn { padding-top:9px; padding-bottom:9px;} .site-button { padding: 10px 20px; display: inline-block; font-size: 14px; outline: none; cursor: pointer; outline: none; border-width:0; border-style:solid; border-color:transparent; line-height:1.42857; margin-left:-1px; text-decoration: none !important; } .site-button{color: #fff; } .site-button {background-color:#000; } .site-button:active, .site-button:hover, .site-button:focus, .active > .site-button { background-color: #000;color: #fff;} .site-button:hover{ background-color: #efefef; color: #000;} /* 1.2 button text uppercase */ .site-button.text-uppercase {text-transform:uppercase;} /* 1.3 button size */ .button-lg {padding:20px 35px; font-size: 16px;} /* 1.4 button rounded */ .radius-no {border-radius:0; -webkit-border-radius:0; -moz-border-radius:0;} .radius-xl {border-radius:100px; -webkit-border-radius:100px; -moz-border-radius:100px;} /* 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; color:#fff;} /* 1.8 Gray */ .site-button.gray {background-color:#666666; color:#fff;} .site-button.gray:hover, .site-button.gray:active, .site-button.gray:focus {background-color:#555555;color:#fff;} /* 1.9 pink */ .site-button.pink {background-color:#e63f75; color:#fff;} .site-button.pink:hover, .site-button.pink:active, .site-button.pink:focus { background-color:#d22b61; color:#fff; } /* 1.10 Blue */ .site-button.blue {background-color:#42B8D4; color:#fff;} .site-button.blue:hover, .site-button.blue:active, .site-button.blue:focus {background-color:#2ca2be; color:#fff;} /* 1.11 Green */ .site-button.green {background-color:#35B494; color:#fff;} .site-button.green:hover, .site-button.green:active, .site-button.green:focus { background-color:#26a585; color:#fff; } /* 1.12 Orange */ .site-button.orange {background-color:#E56713; color:#fff;} .site-button.orange:hover, .site-button.orange:active, .site-button.orange:focus { background-color:#d55703; color:#fff;} /* 1.13 Red */ .site-button.red { background-color:#D93223; color:#fff;} .site-button.red:hover, .site-button.red:active, .site-button.red:focus {background-color:#c51e0f; color:#fff;} /*1.14 Brown */ /* 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 */ /* 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 */ .masonry-filter { display:table; margin-bottom:0;} .masonry-filter > li {display: inline-block; margin-right:30px; position:relative;} .masonry-filter > li a {color: #000; font-size: 14px; font-weight:500; } .masonry-filter > li.active a, .masonry-filter > li a:hover, .masonry-filter > li a:active, .masonry-filter > li a:focus {color: #a0a0a0;} @media only screen and (max-width: 600px) { .masonry-filter > li { margin-bottom:10px;} .masonry-filter > li a{font-size:14px !important;} } /* 1.45(1) Masonry filter alignment [Left-Right-Center] */ .filter-wrap.right > .masonry-filter { float:right;} @media only screen and (max-width:991px) { .filter-wrap.right > .masonry-filter { float:none;} } .filter-wrap.center > .masonry-filter {margin-left:auto; margin-right:auto;} /* 1.45(2) Masonry filter link style */ .masonry-filter.link-style > li a {font-size:15px;} .masonry-filter.link-style > li:after { content:"/"; position:relative; right:-18px; opacity:0.3;} .masonry-filter.link-style.white > li:after { color:#fff;} .masonry-filter.link-style > li:last-child:after { display:none;} .masonry-filter.link-style.white > li.active a, .masonry-filter.link-style.white > li a:hover, .masonry-filter.link-style.white > li a:active, .masonry-filter.link-style.white > li a:focus {color: #f7c20a;} .masonry-filter.has-bg > li a { color: #fff;} .masonry-filter.link-style.has-bg > li.active a, .masonry-filter.link-style.has-bg > li:hover a, .masonry-filter.link-style.has-bg > li:active a, .masonry-filter.link-style.has-bg > li:focus a { color: #FFBC13;} /* 1.45(3) Masonry filter button style */ /* 1.45(4) Masonry filter button outline style */ @media only screen and (max-width:575px){ .masonry-item{width:100%;} } /* 1.45(5) half effect button outline style */ .btn-half{cursor: pointer; background-color: #000; z-index: 0; display:inline-block; position:relative;} .btn-half span {color: #fff; display: block; padding-left: 0%; padding-right: 25px; text-transform: uppercase; font-size:12px; letter-spacing:5px; transform: scaleX(0.9); transform-origin: center left; transition: color 0.3s ease; position: relative; z-index: 1;} .btn-half em { position: absolute; height: 1px; background: #fff; width: 22%; right: 23px; top: 50%; transform: scaleX(0.25); transform-origin: center right; transition: all 0.3s ease; z-index: 1;} .btn-half:before, .btn-half:after { content: ''; background-color:rgba(255,255,255,0.2); height: 50%; width: 0; position: absolute; transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);} .btn-half:before { top: 0; left: 0; right: auto;} .btn-half:after { bottom: 0; right: 0; left: auto;} .btn-half.site-button:hover{ background-color: #000; } .btn-half:hover:before { width: 100%; right: 0; left: auto;} .btn-half:hover:after { width: 100%; left: 0; right: auto;} .btn-half:hover span { color: #fff;} .btn-half:hover em { background: #fff; transform: scaleX(1);} /*------------------------------------- 2. Title separators -------------------------------------*/ .wt-separator-outer { overflow:hidden;} /*Separator defualt*/ .wt-separator { display:inline-block; height:3px; width:50px; position:relative;} /*Separator liner*/ /*Separator square*/ /*Separator icon*/ /*------------------------------------- 3. Deviders -------------------------------------*/ .wt-divider{ height:1px; position:relative; margin:30px 0;} .wt-divider.divider-3px { height:3px;} .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%);} /*------------------------------------- 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 -------------------------------------*/ .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; letter-spacing: 1px; font-size: 12px;} .acod-head a, .acod-head a:hover, .acod-head a:active, .acod-head a:focus { color:#000; } /*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*/ .ow-client-logo {display:table; width:100%;} .client-logo {display:table-cell; text-align:center; vertical-align:middle; padding:10px;} .owl-carousel .ow-client-logo img { max-height:100%; width:auto; display:inline-block;} .client-logo-media img{max-width:100% !important; margin:0px auto !important; width:auto !important;} /*------------------------------------- 7. Testimonials -------------------------------------*/ .testimonial-pic {background:#FFF; width:100px; height:100px; position:relative; display:inline-block; border:5px solid #FFF; } .testimonial-pic.radius {border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%;} .testimonial-pic.radius img {width:100%; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%;} .testimonial-pic.shadow { -webkit-box-shadow:2px 3px 6px -3px rgba(0, 0, 0, 0.35); -moz-box-shadow: 2px 3px 6px -3px rgba(0, 0, 0, 0.35); box-shadow:2px 3px 6px -3px rgba(0, 0, 0, 0.35); } .testimonial-text { padding:15px; position:relative;} .testimonial-text p:last-child{ margin:0;} .testimonial-detail {padding:5px;} .testimonial-name, .testimonial-position {display:block;} .testimonial-position {font-style:italic;} .testimonial-text p {margin:0;} /*7.1 testimonial with background image*/ /*7.2 testimonial 6*/ .testimonial-6{position: relative;} .testimonial-6{ padding:4px 4px 4px 4px;} .testimonial-6 .testimonial-text{ padding:30px; margin-bottom:20px; -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{ width:80px; height:80px; position:relative; border:0px; } .testimonial-6 .testimonial-pic:after, .testimonial-6 .testimonial-pic:before{ content:""; position:absolute; background-color:#000; } .testimonial-6 .testimonial-pic:after{ left:-3px; top:-3px; width:3px; height:30px; } .testimonial-6 .testimonial-pic:before{ left:0px; top:-3px; width:30px; height:3px; } .testimonial-6 .testimonial-name, .testimonial-6 .testimonial-position{ display: block; } .testimonial-6 .fa-quote-left{ font-size:18px; } .testimonial-6 .testimonial-paragraph p{ padding:0px 0px; } .testimonial-6 .testimonial-name{ color:#000; text-transform:uppercase; font-size:16px; } .testimonial-6 .testimonial-position{ font-style:normal; } .testimonial-6 .testimonial-detail{ padding-left:0px; padding-right:0px; } /* testimonial 6 owl-dots*/ .testimonial-home.owl-carousel .owl-dots .owl-dot span{ height:10px; width: 20px; background: no-repeat; border: 1px solid #000; -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; } .testimonial-home.owl-carousel .owl-dots .owl-dot.active span{ border: none; background-color: #000 !important; -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; } /*------------------------------------- 8. Pricing table -------------------------------------*/ /*8.2 pricing table style 4*/ /*------------------------------------- 9. Alert box -------------------------------------*/ .alert[class*="alert-"] i{ margin-right:8px;} .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 */ /*10.5 image-side-pan */ /*10.6 image-vertical-pan */ /*10.7 image-fade-in */ /*10.8 image-fade-out */ /*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 */ /*10.11 image-blurr */ /*10.12 image-blurr-invert */ /*10.13 image off color */ /*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 -------------------------------------*/ /*------------------------------------- 12. Social icons -------------------------------------*/ .social-icons {list-style:none; margin-left:-3px; margin-right:-3px; font-size:12px;} .social-icons li {display:inline-block; text-align:center;} .social-icons li a {display:block; padding:3px;} .social-icons.social-md { font-size:18px;} .social-icons.has-bg li a:hover{color:#fff;} .social-icons.social-dark a { color:#777;} .social-icons.social-dark.has-bg li a:hover{ color:#777;} .social-icons.social-square a { border:1px solid rgba(0,0,0,0.2); width:24px; height:24px; line-height:24px; padding:0; } .social-icons.social-square.social-md a { width:36px; height:36px; line-height:36px; padding:0; } .social-icons.social-square.social-dark a{ background-color:#fff; } .social-icons.social-square.social-dark a:hover { background-color:#1a1a1a; color:#fff; } .social-icons.social-square.social-dark.has-bg a:hover { border:1px solid #777; } .social-icons.social-square.social-dark.white-border a{ background:none; color:#fff; border:1px solid rgba(255,255,255,1); } /*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*/ .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:#000; } .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%;} .google-map iframe{ width:100%; height: 460px; } /*------------------------------------- 16. Countdown clock -------------------------------------*/ /*------------------------------------- 17. Form elements -------------------------------------*/ label { font-weight: 600; margin-bottom:10px;} .form-group { margin-bottom:25px;} .form-control {border-color:#e1e6eb ; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; height:40px; font-size:13px; line-height:20px; padding:9px 12px;} .form-control:focus { border-color:#e1e1e1; outline:0; } .form-control:focus { -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } /* 17.1 input group */ .input-group { width:100%;} .input-group .form-control, .input-group-btn { display: table-cell; } /* 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; } /*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 */ /*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*/ .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*/ /*------------------------------------- 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*/ /*19.2 widget search custom*/ /*19.3 widget search wp-default*/ .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 { color:#3396d1; font-style:normal; } .widget .post-title { font-size: 11px; line-height: 16px; margin-bottom: 8px; text-transform: uppercase; margin-top: 0px; letter-spacing: 2px; } .recent-posts-entry .widget-post{ margin-bottom: 5px; padding: 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:65px;} .recent-posts-entry .wt-post-info {background:transparent; padding:0; margin-left:80px; border:none;} /*19.8 widget tags-list*/ .widget_tag_cloud a {padding:8px 14px; background-color:#f6f7f8; font-size:12px; display:inline-block; margin:0 0 5px; text-transform:uppercase; font-weight:600; color:#000; } .widget_tag_cloud a:hover{background-color:#000; color:#fff;} /* 19.14 widget gallery */ .widget_gallery ul {padding-left:0;} .widget_gallery li {display: inline-block; margin-bottom:5px; width: 23.9%; 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%;} } /* 19.18 widget client slider */ .widget-client{ background-color:#f6f7f8;} .widget-client.owl-carousel .owl-dots{position:absolute; right:15px; margin-top:0px; top: 50%; width:0px; transform: translateX(-50%) translateY(-50%);} .widget-client.owl-carousel .owl-dots .owl-dot span{width:12px; height:3px; border:none; float:right; clear:both; position:relative;} .widget-client.owl-carousel .owl-dots .owl-dot span:after{ content:""; position:absolute; top:0; right:0; width:12px; height:3px; background-color:#000; -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; } .widget-client.owl-carousel .owl-dots .owl-dot.active span:after{ width:50px;} .widget-client .ow-client-logo{ background-color:#f6f7f8;} /*------------------------------------- 20. Table -------------------------------------*/ /* 20.1 Full-responsive */ /*------------------------------------- 21. Video -------------------------------------*/ /*====================================== 12. WP DEFAULT ======================================*/ /*====================================== 13. BLOG ======================================*/ .blog-post { position:relative; margin-bottom:40px;} .wt-post-title{margin-bottom:15px;} .wt-post-title .post-title{ margin:0; text-transform:uppercase; font-weight:normal;} .wt-post-meta {margin-bottom:10px;} .wt-post-meta ul {margin:0px; list-style:none;} .wt-post-meta li { padding: 0; display: inline-block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px;} .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:15px; text-align: left;} .wt-post-text p:last-child { margin:0;} @media only screen and (max-width:420px) { .masonry-item .wt-post-info{padding-bottom:0px;} .masonry-item .wt-post-title h2.post-title{line-height:14px;} .masonry-item .wt-post-title h2.post-title a{font-size:14px; line-height:none;} } /*------------------------------------- 3. if no image with blog post -------------------------------------*/ .wt-post-media .embed-responsive.embed-responsive-16by9 iframe{width: 100%;} /*------------------------------------- Video -------------------------------------*/ .embed-responsive.embed-responsive-16by9 iframe{ width: 100%; } .embed-responsive.embed-responsive-16by9 .player{max-width: 100%;} .embed-responsive { position: relative; display: block; height: 0; padding: 0; padding-bottom: 0px; overflow: hidden; } .embed-responsive-16by9 { padding-bottom: 56.25%; } .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } /*------------------------------------- 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;} } /*------------------------------------- 12. comment list -------------------------------------*/ /*------------------------------------- 13. comment form -------------------------------------*/ /*------------------------------------- 15. blog grid-post -------------------------------------*/ /*====================================== 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 80px; max-width: 100%;} @media only screen and (max-width:991px) { .nav-wide .container{padding:0px 15px;} } /*------------------------------------- 2. without top bar -------------------------------------*/ .extra-nav { display:table; float:right; height:70px; position:relative; z-index:9;} .extra-nav .extra-cell{ display:table-cell; padding-left:10px; vertical-align:middle;} /*------------------------------------- 3. map page header -------------------------------------*/ /*====================================== 16. LOGO ( company identify symbol ) ======================================*/ /*------------------------------------- 1. logo for header -------------------------------------*/ .logo-header{ display:table; float:left; width:140px; height:70px; vertical-align:middle; padding:0; font-size:36px; color:#1bbce8; margin-top:0; margin-bottom:0; margin-left:0; margin-right:0; position:relative; z-index:9;} .logo-header-inner { display:table-cell; vertical-align:middle; height:100%;} .logo-header-inner a{display: block;} .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;} } /*------------------------------------- 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-right { padding-left:15px; padding-right:15px; } .wt-topbar-right { float:right; } @media only screen and (max-width: 991px) { .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 { margin:0 0 0 15px; float:right; } @media only screen and (max-width: 480px) { .social-bx, .e-p-bx { margin-top:5px; margin-bottom:5px !important; } } .social-bx li { font-size:12px; margin:0; position:relative; } .social-bx li{ padding-left:2px; padding-right:2px; } .social-bx li a { color:#000; font-size:14px; } .social-bx li i { vertical-align:baseline; margin:0 5px 0 0; } .social-bx li span { vertical-align:baseline; margin:0 2px 0; font-size:8px; } /*------------- top share icon block ----------------------*/ .share-icon-btn .dropdown-menu{ padding:0px 20px; min-width: 60px; top: 53px; left: -10px;} .share-icon-btn .dropdown-toggle::after{display: none;} .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;} .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;} .share-icon-btn2{ display:none;} @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;} } .share-icon-btn2 .dropdown-toggle:after{ display: none; } @media only screen and (max-width:480px) { .share-icon-btn2{ display:block;} .header-top-info{ display:none;} } /*-----------------------------------*/ .main-bar { position:relative; width:100%; padding:10px 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*/ /*------------------------------------- 1. Top Part Search Bar -------------------------------------*/ .site-search-btn { background:none; border:none; outline:none; color:#000; font-size: 14px; height: 40px; line-height: 40px; width:40px; display: inline-block; text-align: center;} @media only screen and (max-width:991px) { .site-search-btn { padding:0px 15px;} } #search { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -moz-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); -o-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0; display: none; } #search.open { -webkit-transform: translate(0px, 0px) scale(1, 1); -moz-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); -o-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; z-index: 999; display: block; } #search form { position: absolute; top: 50%; left: 0; margin-top: -51px; width: 60%; margin-left: 20%; color: #fff; background: #000; font-size: 40px; font-weight: 300; text-align: left; outline: none; padding: 10px; border-radius:0px; } #search .input-group{justify-content: space-between;} #search input[type="search"] {background: none; border:none;padding: 0px 30px; color: #fff; width: calc(100% - 100px);} #search input:focus{outline: none;} #search .search-btn {border:none; background:none; padding: 0px 30px;} #search .search-btn i{font-size:36px; color: #fff;} #search .close {position: fixed; top: 15px; right: 15px; opacity: 1; font-size: 27px; color: #fff; width:30px; height:30px;} #search .close:after,#search .close:before{ content:""; position:absolute; width:2px; height:32px; background-color:#fff; right:20px; top:0px;} #search .close:after{ -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg);} #search .close:before{ -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari */ transform: rotate(-45deg);} #search .close:hover:after ,#search .close:hover:before{ cursor: pointer;} @media only screen and ( max-width:768px ){ #search form{ width:90%; margin-left:5%; font-size:26px;} #search input[type="search"] {padding: 0px 0px 0px 30px;} #search .search-btn {padding: 0px 15px;} #search .search-btn i {font-size: 24px;} } @media only screen and ( max-width:400px ){ #search form{ font-size:16px;} #search input[type="search"] { padding: 0px 0px 0px 10px;} #search .search-btn {padding: 0px 15px;} #search .search-btn i {font-size: 18px} } /*====================================== 18. NAVIGATIONS ======================================*/ /*------------------------------------- 1. mega-menu -------------------------------------*/ @media only screen and (max-width:480px) { .extra-nav .extra-cell {margin-left:0;} } .header-nav { position:relative; padding:0;} .header-nav .nav {float:right;} .header-nav .nav i {font-size:9px; margin-left:3px; margin-top:-3px; vertical-align:middle; opacity:0.7;} .header-nav .nav > li { font-weight:400; position:relative; text-transform:uppercase; margin:-10px 0; padding:10px 0;} .header-nav .nav > li > a { border-radius: 0; -webkit-border-radius:0; -moz-border-radius:0; color: #000; font-size: 12px; padding:35px 12px; cursor:pointer; letter-spacing:2px;} .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 {background-color: transparent; color: #ababab;} .header-nav .nav > li:hover > a {color: #ababab;} .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;} .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: 10px 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 .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;} /*-- Submenu direction---*/ .has-child .submenu-toogle { position:absolute; right:4px; top:4px; color:#000; background-color:transparent; z-index:900; cursor:pointer; padding:10px; font-size:14px; display:none; } .header-nav .has-child li .submenu-toogle {opacity:0.9;} .header-nav .has-child.nav-active > a+.submenu-toogle.glyphicon-chevron-right:before { content:"\e114";} /*.header-nav .nav > li:last-child{display:none;}*/ @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:#000;} } @media only screen and (max-width: 991px) { /* responsive strat when media screen [991px] css START*/ .navbar-collapse.collapse { display: none!important;} .navbar-collapse.collapse.in { display: block!important; } /* Responsive strat when medai screen [991px] css END*/ .header-nav { clear:both; margin:0 -15px; border-bottom:1px solid #E9E9E9 ;} .header-nav .nav{ float:none; margin:0; background:#fff;} .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 { 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;} } /* Vertical Nav */ .nav-sidebar{ position:fixed; right:-400px; top:0; width:100%; max-width:400px; height:100%; z-index:999; background-color:#fff; transition: all 0.5s linear; box-shadow:2px 1px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow:2px 1px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow:2px 1px 5px rgba(0, 0, 0, 0.3); -o-box-shadow:2px 1px 5px rgba(0, 0, 0, 0.3); } .nav-sidebar.active{ right:0px; } .nav-siderbar-scroll{ padding:50px 40px; height:100%; position:absolute; width:100%; overflow:auto; } .nav-sidebar .vnav-btn{ position: absolute; right: -40px; top:200px; box-shadow:7px 0 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow:7px 0 5px rgba(0, 0, 0, 0.1); -moz-box-shadow:7px 0 5px rgba(0, 0, 0, 0.1); -o-box-shadow:7px 0 5px rgba(0, 0, 0, 0.1); } .vnav-btn { background: #fff none repeat scroll 0 0; color: #333; cursor: pointer; display: block; font-size: 21px; height: 40px; line-height: 40px; text-align: right; width: 40px; border:none; } .vnav-close{ background:none; border:none; position:absolute; left: 10px; top: 20px; z-index:10; width:40px; height:40px; } .vnav-close:after, .vnav-close:before{ content:""; position:absolute; right: 10px; top: 10px; width:24px; height:1px; background-color:#000; } .vnav-close:after{ -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .vnav-close:before{ background-color:#000; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /*--vertcal navigation start--*/ .vertical-nav .has-child .submenu-toogle { position: absolute; right: 0px; top: 22px; color: #000; z-index: 999; cursor: pointer; padding: 5px 10px; font-size: 24px; display: none; background: none; width: 100%; text-align: right; font-weight: bold; } .vertical-nav .has-child li .submenu-toogle { opacity:0.9;} .vertical-nav .has-child.nav-active > a+.submenu-toogle.fa-angle-right:before { content:"\f107";} .vertical-content-wrap{display:table; width:100%; height:100%; overflow:auto;} .vertical-content-area{display:table-cell; } .vertical-content-area.vertical-centered{vertical-align:middle;} .vertical-nav {font-family: 'Roboto Condensed', sans-serif;} .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 10px; color: #999; display: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:visited, .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 a{position: relative; z-index: 1;} .vertical-nav ul li .sub-menu > li a {font-size: 14px;padding: 5px 30px; text-transform: capitalize;} .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.has-child.nav-active a{color: #000;} .vertical-nav ul li .sub-menu { opacity:1; margin:0 !important; } .vertical-nav .has-child .submenu-toogle {display:block;} .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; } /*------------------------------------- 2. nav dark version -------------------------------------*/ /*------------------------------------- 3. when header is sticky -------------------------------------*/ /*------------------------------------- 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;} @media only screen and (max-width:767px){ .main-bar, .is-fixed .main-bar, .is-fixed.color-fill .main-bar { padding: 0px;} } @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; } } @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; } } /*------------------------------------- 6. header with bg primary color 1 -------------------------------------*/ @media only screen and (max-width:991px) { .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;} } /*====================================== 19. BANNER ======================================*/ /*------------------------------------- 1. inner page banner -------------------------------------*/ .wt-bnr-inr {height:500px; background-size:cover; background-position:center center; display:table; width:100%;} .wt-bnr-inr .container{display:table; height:100%;} .wt-bnr-inr-entry { display:table-cell; vertical-align:middle;} .wt-bnr-inr-entry .banner-title-outer{position: relative; padding: 70px 0px 70px 30px; border: 10px solid #fff; border-right: 0px; width: 200px;} .wt-bnr-inr-entry .banner-title-outer:after, .wt-bnr-inr-entry .banner-title-outer:before{content:""; position:absolute; right:0px; width:10px; height:50px; background-color:#fff;} .wt-bnr-inr-entry .banner-title-outer:after{ top:0px;} .wt-bnr-inr-entry .banner-title-outer:before{bottom:0px; right:0px;} .wt-bnr-inr-entry .banner-title-name{width:640px;} @media only screen and (max-width: 991px) { .wt-bnr-inr {height: 330px; padding-top: 120px;} } @media only screen and (max-width: 767px) { .wt-bnr-inr-entry .banner-title-name{width:258px;} } /*====================================== 20. SLIDER ======================================*/ /*------------------------------------- 1. owl slider -------------------------------------*/ /*------------------------------------- 1.1 next pre btn -------------------------------------*/ .owl-carousel .owl-nav { margin-top:40px; text-align: center; } .owl-carousel .owl-nav .disabled { opacity: .5; cursor: default } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{ background-color: #000; color: #ffffff; padding: 8px 10px; width: 28px; height: 35px; text-align: center; font-size: 13px; display: inline-block; cursor: pointer; opacity: 0.5; } .owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover{ opacity: 1; } /*------------------------------------- 1.1 next pre btn -------------------------------------*/ .owl-carousel .owl-nav { margin-top:40px; text-align: center;} .owl-carousel .owl-nav .disabled {opacity: .5; cursor: default} /*------------------------------------- 1.2 owl dots button -------------------------------------*/ .owl-carousel .owl-dots {text-align:center; margin-top:20px;} .owl-carousel .owl-dots .owl-dot {display: inline-block;} .owl-carousel .owl-dots .owl-dot span { width:12px; height:12px; margin:5px 7px; background: #1a1a1a; border:1px solid #fff; display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; } .owl-carousel .owl-dots .owl-dot.active span, .owl-carousel .owl-dots .owl-dot:hover span {background: #979797;} /*------------------------------------- 1.3 owl button top to center -------------------------------------*/ /*------------------------------------- 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 -------------------------------------*/ .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-carousel .owl-item img{transform-style: inherit;} /*------------------------------------- 1.11 owl slider button -------------------------------------*/ .owl-prev, .owl-next {background-color: #000; color: #ffffff; padding:8px 10px; width:35px; height:35px; text-align:center; font-size: 13px; display: inline-block; cursor: pointer;} .owl-prev {margin-right:5px;} .owl-next {margin-left:5px;} .owl-prev:hover, .owl-prev:active, .owl-prev:focus, .owl-next:hover, .owl-next:active, .owl-next:focus { background-color: #212121; border-color: #212121; color: #ffffff; opacity:0.9; } /*------------------------------------- 1.12 owl dots nav position -------------------------------------*/ /*====================================== 21. PAGINATION ======================================*/ /*1. pagination style-1 */ /*2. pagination style-2 */ /*3. Pager */ /*====================================== 22. FOOTER ======================================*/ /*------------------------------------- 0. footer Large css -------------------------------------*/ /*------------------------------------- 1. footer fixed on bottom css -------------------------------------*/ /*1.1 footer fixed with fullscreen view*/ .footer-fixed .site-footer { position:fixed; width:100%; bottom:0; border:none; z-index:0;} .footer-fixed .page-content { position:relative; z-index:1; background-color:#fff;} @media only screen and (max-width:1200px) { .footer-fixed .site-footer { position:static;} .footer-fixed .page-wraper { padding-bottom:0 !important;} } /*1.2 footer fixed with boxed view*/ .site-footer .widget > .widget-title { text-transform:uppercase;} .site-footer p, .site-footer li {line-height:20px;} .site-footer { background-position:center; background-size:cover; border-top: 1px solid #dadada;} .site-footer p { line-height:20px;} .site-footer .widget ul{ list-style:none; margin-top:5px;} .footer-bottom {padding:100px 0px; color:#787878; font-size:13px;} .footer-bottom .copyrights-text { color:#000; } .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) { .copyright-block{padding-top:5px;} } /*------------------------------------- 2. Footer dark version css -------------------------------------*/ .footer-light .footer-bottom { background-color:#f6f7f8; } .footer-wide .container{ width:100%; padding:0px 80px; max-width: 100%; } @media only screen and (max-width:991px) { .footer-wide .container{ padding:0px 15px; } } /*------------------------------------- 5. widget Getintuch -------------------------------------*/ .footer-bottom ul {margin:0;} .wt-footer-bot-left{ padding-left:0px; padding-right:15px; } .wt-footer-bot-right{ padding-left:15px; padding-right:0px; } .wt-footer-bot-left {float:left;} .wt-footer-bot-right {float:right;} @media only screen and (max-width:1199px){ .footer-bottom{ padding: 20px 0px; } .footer-bottom-content{ display: block !important; text-align: center; } .footer-bottom-content .wt-footer-bot-left{ float: none; padding-right: 0px; } .footer-bottom-content .wt-footer-bot-right{ float: none; padding-left: 0px; } .footer-bottom-content .wt-footer-bot-right .copyrights-nav.pull-right{float: none;} } @media only screen and (max-width:991px) { footer .container {width:100%;} .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;} } /*------------------------------------- 6. scroll top btn css -------------------------------------*/ button.scroltop { height: 40px; width: 40px; background:#000; 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; } 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:40px;} .section-head h1, .section-head h2, .section-head h3 {margin-top:0;} .section-head p {padding-top:10px; font-size:14px;} .section-head p:last-child { margin-bottom:0;} .text-center.section-head p {max-width:800px; margin-left:auto; margin-right:auto;} .text-white {color:#FFF; } .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p {color:#FFF; } /*------------------------------------- 2. Section Content Part -------------------------------------*/ @media only screen and (max-width:1024px) { .section-full{ background-attachment:scroll !important; } } /*====================================== 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;} /*------------------------------------- 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 () ======================================*/ @media only screen and (max-width:768px){ .wt-media > img, .wt-media a > img{width:100%; } } /*====================================== 30. Customize Grouping css ======================================*/ /*------------------------------------- 1.set-radius -------------------------------------*/ .btn, .form-control, .dropdown-menu, .well, .alert, .list-group-item:first-child, .list-group-item:last-child, .searchform input[type="text"], .searchform input[type="submit"] { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } /*------------------------------------- 2. transition -------------------------------------*/ a, .btn, .form-control, .overlay-bx, .overlay-icon li a i, .logo-header, .header-nav .nav > li > a, .extra-nav { -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; } /*------------------------------------- 3. float-clearfix -------------------------------------*/ .clearfix::after, .filter-wrap::after, .filter-wrap::after, .wt-icon-box-wraper::after { content: ""; display: table; clear: both; } /*====================================== 32. Inner pages ======================================*/ /*------------------------------------- 2. Out Team -------------------------------------*/ /*2.6. Out Team six*/ .wt-team-six .wt-team-info{position:relative;} .wt-team-six .wt-team-info:after, .wt-team-six .wt-team-info:before{content:""; position:absolute; left:-4px; bottom:-4px; background-color:#000;} .wt-team-six.large-pic .wt-team-info:after, .wt-team-six.large-pic .wt-team-info:before{visibility:hidden} .wt-team-six .wt-team-info:after{ width:4px; height:40px;} .wt-team-six .wt-team-info:before{width:40px; height:4px;} .wt-team-six:hover .overlay-bx{opacity:1;} /*------------------------------------- 4. Product block -------------------------------------*/ /*====================================== 33. Background Effects ======================================*/ .bg-top-center{background-position:top center;} .bg-cover{background-size:cover;} .bg-repeat{background-repeat:repeat;} .bg-no-repeat{ background-repeat:no-repeat;} /*====================================== 34. Home Page ======================================*/ .m-carousel-1{ position:relative;} .m-carousel-1:after{ content:""; position:absolute; top:70px; left:-70px; width:100%; height:100%; background-color:transparent; border:30px solid rgba(0,0,0,0.1);} .m-carousel-1 .owl-carousel .owl-dots{ position:absolute; right:20px; margin-top:0px; top: 50%; width:0px; transform: translateX(-50%) translateY(-50%);} .m-carousel-1 .owl-carousel .owl-dots .owl-dot span{ width:12px; height:3px; border:none; float:right; clear:both; position:relative;} .m-carousel-1 .owl-carousel .owl-dots .owl-dot span:after{ content:""; position:absolute; top:0; right:0; width:12px; height:3px; background-color:#000; -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; } .m-carousel-1 .owl-carousel .owl-dots .owl-dot.active span:after{ width:50px;} @media only screen and (max-width:991px) { .m-carousel-1{ margin-bottom:100px; margin-left: 70px;} } @media only screen and (max-width:768px) { .m-carousel-1{ margin-top:0px; } .m-carousel-1::after { top: 100px; left: -70px; border: 20px solid rgba(0,0,0,0.1); } } @media only screen and (max-width:420px) { .m-carousel-1{ margin-left:0px; margin-bottom:0px;} .m-carousel-1:after{ display:none;} } .hilite-title{ border:0px; } .hilite-title strong{ display:block; font-size:80px; line-height:80px; font-weight:bold; color:rgba(191,191,191,0.3);} .hilite-title span{display:block; font-size:24px; line-height:24px; font-family: 'Roboto Condensed', sans-serif;} .hilite-title.bdr-left{border-left:10px; border-style:solid;} .hilite-title.bdr-right{border-right:10px; border-style:solid;} .m-carousel-2{ margin-right:130px; margin-bottom: 50px; position:relative;} .m-carousel-2 .home-carousel-2{ border:15px solid #fff; border-bottom:0px; border-left:0px; } .m-carousel-2 .home-carousel-2 .owl-nav {margin: 0px; position: absolute; bottom: -30px; left: 30px;} .m-carousel-2 .home-carousel-2 .owl-nav .owl-prev {left: -30px;} .m-carousel-2 .home-carousel-2 .owl-nav .owl-next {right: -44px;} .carousel-bg-img{ position:absolute; right:-65px; top:-50px; width:100%;} @media only screen and (max-width:991px) { .m-carousel-2{ max-width: 694px; width: 100%; padding: 0px; margin: 0px auto 50px; } .m-carousel-2 .home-carousel-2{ border:none;} .carousel-bg-img{display:none;} } @media only screen and (max-width:768px) { .m-carousel-2{ margin:0px auto; max-width: 696px;} .m-carousel-2 .home-carousel-2{margin-bottom: 40px;} } @media only screen and (max-width: 767px) { .m-carousel-2 { margin: 0px auto; max-width: 520px; } } @media only screen and (max-width:620px) { .m-carousel-2{ margin-right:0px; margin-top:0px;} .hilite-title strong{ font-size:46px; line-height:46px;} .hilite-title span{ font-size:18px; line-height:18px;} } @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-amiation-block ===========================*/ .line-amiation{ position:relative; width:100%; height:100%;} .line-amiation:after, .line-amiation:before{ content:""; position:absolute; background-color:#fff; left:20px; top:20px; -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear; -ms-transition: all 0.7s linear; -o-transition: all 0.7s linear; transition: all 0.7s linear; opacity:0; } .line-amiation:after{width:0%; height:1px;} .line-amiation:before{width:1px; height:0px;} .line-amiation:hover:after{width:100%; opacity:1; left:-20px;} .line-amiation:hover:before{height:100%; top:-20px; opacity:1;} .line-amiation a.v-button{ color:#fff; border-left:2px solid; display:block; position:absolute; bottom:90px; right:-40px; -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:420px) { .line-amiation a.v-button{bottom:70px;} } /*=========================== 38. latest-blog-dark ===========================*/ .latest-blog-dark-outer{margin-left: 20px; 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; margin-right: 61px;} .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:991px){ .latest-blog-dark-outer{margin-left: 0px;} .latest-blog-dark-outer2{margin-right: 0px;} } @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: 38px; position:relative; background-color:#1a1a1a; margin:0px;} .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-next {left:10px; 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{position: inherit; left: auto; right: auto; top: auto; bottom:auto;} .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 =========================*/ /*shape1*/ .square_shape1, .square_shape2, .square_shape3, .square_shape4{ position:relative; overflow: hidden; z-index:0; } .square_shape1:after, .square_shape2:before, .square_shape3:before, .square_shape4:after{ width:800px; height:800px; position:absolute; content:""; border:40px solid rgba(191,191,191,0.1); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index:-1; } /*shape1*/ .square_shape1:after{left:-700px; top:50px;} /*shape2*/ .square_shape2:before{ right:-700px; bottom:-340px;} /*shape3*/ .square_shape3:before{right:-700px; bottom:-300px;} /*shape4*/ .square_shape4:after{left: -820px; top: -260px;} /*========================= 40. About us =========================*/ .m-about{position:relative; z-index:2;} .m-about:after{content: ""; position: absolute; width: 100%; height: 100%; border: 10px solid #000; left: -50px; bottom: -50px; z-index: -1;} .about-us-carousel.owl-carousel .owl-nav{ margin-top: 0px; position: absolute; right: -15px; bottom: 15px;} .about-us-carousel.owl-carousel .owl-nav .owl-prev, .about-us-carousel.owl-carousel .owl-nav .owl-next{display:block; margin:0px;} @media only screen and (max-width:767px) { .m-about{margin:0px 0px 0px 50px;} .m-about-containt{margin-top:60px;} .about-us-carousel.owl-carousel .owl-nav{ right:15px;} } /*====================================== 41. Our Services ======================================*/ .circle-block-outer .wt-icon-box-wraper{ -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; border:2px solid #fff; } .circle-block-outer .wt-icon-box-wraper:hover{ background-color:#fff; cursor:pointer; -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.1); box-shadow: 0 0 20px 0 rgba(0,0,0,0.1); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .circle-block-outer .wt-icon-box-wraper:hover .icon-content h4, .circle-block-outer .wt-icon-box-wraper:hover .icon-content p{ color:#000; } .circle-block-outer .circle-content-pic .wt-media img{ height: 465px; object-fit: cover; object-position: center; width: 100%; } @media only screen and (max-width:991px) { .circle-content-pic{ text-align:center;} } /*====================================== 42. Contact Us ======================================*/ .contact-one{border:6px solid #000; position:relative; max-width: 945px;} .contact-one .form-control{border:0px; border-bottom:1px solid #000;} .contact-one .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #000; font-size:12px; text-transform:uppercase; } .contact-one .form-control::-moz-placeholder { /* Firefox 19+ */ color: #000; font-size:12px; text-transform:uppercase; } .contact-one .form-control:-ms-input-placeholder { /* IE 10+ */ color: #000; font-size:12px; text-transform:uppercase; } .contact-one .form-control:-moz-placeholder { /* Firefox 18- */ color: #000; font-size:12px; text-transform:uppercase; } .contact-info{position: absolute; right: -200px; top: 30px; width: 310px;} .contact-info .icon-content p{ word-break:normal;} .contact-form textarea.form-control { height: auto; } @media only screen and (max-width:1200px) { .contact-one{max-width: 745px;} } @media only screen and (max-width:991px) { .contact-one{padding-right: 375px;} .contact-info {right: 40px; width: 310px; top: 21px;} } @media only screen and (max-width:767px) { .contact-one{padding-right: 40px;} .contact-info {right: 0px; width: 100%; top: 0px; position:inherit; margin-top:40px;} } @media only screen and (max-width:767px) { .contact-one{padding:15px;} } /*====================================== 43. Work carousal ======================================*/ /*====preview inner pages ====*/ .work-carousel .owl-stage{ padding-top:0px; padding-bottom:50px;} .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; } .work-carousel .owl-item.active.center{box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);} @media only screen and (max-width:1200px) { .work-carousel .owl-item > .item h2{margin-bottom:10px;} .work-carousel .owl-item > .item h2 a{ font-size:24px; line-height:24px;} .work-carousel .line-amiation { padding:20px 30px;} } @media only screen and (max-width:767px) { .latest_project-outer{padding-left:30px; padding-right:30px;} } @media only screen and (max-width:575px) { .latest_project-outer{padding-left:12px; padding-right:12px;} } @media only screen and (max-width:480px) { .work-carousel .owl-item p{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: none;} } @media only screen and (max-width:360px) { .work-carousel .owl-item > .item h2 a{font-size:14px; line-height:14px;} } /*====================================== 44. Work Masonry ======================================*/ @media only screen and (max-width:360px) { .line-amiation a.v-button {bottom: 60px; right: -50px;} } /*========================= 45. our-story =========================*/ .our-story .our-story-detail{padding:15px 30px; margin:62px 0px;} .our-story .our-story-detail p{ font-size:12px; text-transform:uppercase; color:#000;} .our-story{background-image:url(../images/background/ptn-1.png);} .our-story .row{margin-top:30px; margin-bottom:30px; position:relative;} .our-story .row:nth-child(odd){ text-align:left;} .our-story .row:nth-child(even){text-align:right; flex-direction: row-reverse;} .our-story .row:nth-child(odd) .our-story-detail{position:absolute;left:-50px;z-index:5;background-color:#fff; right:15px;} .our-story .row:nth-child(even) .our-story-detail{position:absolute; right:-50px; z-index:5; background-color:#000; left:15px;} .our-story .row:nth-child(even) .our-story-detail h3, .our-story .row:nth-child(even) .our-story-detail h2, .our-story .row:nth-child(even) .our-story-detail p{color:#fff;} .our-story .our-story-detail-wrap{ position: relative; } @media only screen and (max-width:1200px) { .our-story .our-story-detail { padding: 15px 30px; margin: 15px 0px; } } @media only screen and (max-width:991px) { .our-story .row:nth-child(odd) .our-story-detail{ position:inherit; left:0px; } .our-story .row:nth-child(even) .our-story-detail{ position:inherit; right:0px; left:0px; text-align: left; } } /*---some responsive device font size---*/ @media only screen and (max-width:575px) { h2.font-40{ font-size:30px; line-height:36px; } h2.font-36{ font-size:26px; line-height:32px; } span.font-30{ font-size:18px; line-height:24px; } .wt-team-six.large-pic h2 a.font-32{ font-size:22px; line-height:28px; } } /*========================================================= =============================================================*/ /* * Owl Carousel - Animate Plugin */ .owl-carousel-filter .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel-filter .owl-animated-in { z-index: 0; } .owl-carousel-filter .owl-animated-out { z-index: 1; } .owl-carousel-filter .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Core Owl Carousel CSS File */ .owl-carousel-filter { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel-filter .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel-filter .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel-filter .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel-filter.owl-loaded { display: block; } .owl-carousel-filter.owl-loading { opacity: 0; display: block; } .owl-carousel-filter.owl-hidden { opacity: 0; } .owl-carousel-filter .owl-refresh .owl-item { display: none; } .owl-carousel-filter .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel-filter .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel-filter .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-carousel-filter.owl-rtl { direction: rtl; } .owl-carousel-filter.owl-rtl .owl-item { float: right; } /* No Js */ /*===============================*/ .btn-filter-wrap { list-style:none; margin:64px 0 0; float:right; } @media only screen and (max-width:1199px){ .btn-filter-wrap { margin:30px 0 0; float:none; } .btn-filter-wrap li:first-child{ padding-left: 0px; } } .btn-filter-wrap li { position:relative; display:inline-block; font-size:18px; font-weight:600; color: #000; padding:0 20px; cursor:pointer; } .btn-filter-wrap li:last-child { padding-right:0; } .btn-filter-wrap li.btn-active{ color: #D5DD02; } .btn-filter-wrap li:after{ content:"/"; position:absolute; left:-2px; top:4px; font-size:14px; opacity:0.2; color: #000; } .btn-filter-wrap li:first-child:after{ display:none; } .owl-carousel-filter .owl-item{ opacity:0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .owl-carousel-filter .owl-item.active{ opacity:1 ; } .owl-carousel-filter .owl-item > .owl-item{ opacity:1; } /*=============== PARTICLE CANVAS =================*/ #particles-js { position: absolute; width: 50%; height: 100%; background-color: #b61924; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /*======================= after before slider ========================*/ /* 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; } } .list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; } @media only screen and (max-width:991px){ .section-full.p-t80{padding-top: 40px;} .section-full.p-b50{padding-bottom: 10px;} } /*------------------------------------- Header Style 1--------------------------------------*/ .header-style-1 .container{display: flex;} .header-style-1 .container:after{display: table; clear: both; content: "";} .header-style-1 .header-nav{display: flex !important; justify-content: end; align-items: center;} .header-style-1 .header-nav .nav {float: right; display: flex;justify-content: flex-end; flex-direction: inherit;} .header-style-1 .header-nav .nav > li{margin: 0px;} .header-style-1 .header-nav .nav > li .sub-menu{margin-top: 24px;} .header-style-1 .navbar-toggler{display: none;} .header-style-1 .navbar-toggler .icon-bar{background: #000; height: 3px;border-radius: 0;display: block;width: 22px;} .header-style-1 .navbar-toggler .icon-bar + .icon-bar {margin-top: 4px;} .header-style-1 .header-nav .has-child.nav-active>a+.submenu-toogle.fa.fa-angle-right:before {content: "\f107";} .header-style-1 .is-fixed.color-fill .header-nav .nav > li {margin:0;padding: 10px 0;} .header-style-1 .is-fixed.color-fill .header-nav .nav > li > a {margin: 0;padding: 34px 12px;} /*Header style 1 mobile navigation*/ @media only screen and (max-width: 991px) { .header-style-1 .container{display: flex; justify-content: space-between;} .header-style-1 .container:after{content:inherit;} .header-style-1 .navbar-toggler{display: block;} .header-style-1 .header-nav{margin: 0px;} .header-style-1 .header-nav .nav > li .sub-menu li .fa{z-index: 1;top: 4px;width: 100%;padding: 10px;text-align: right;} .header-style-1 .header-nav .nav > li .sub-menu li > a:hover + .fa {z-index: 0;} .header-style-1 .navbar-toggler{display: block; position: absolute; top: 50%;transform: translateY(-50%);right: 16px;} .header-style-1 .extra-nav {margin-right: 40px;} .has-child .submenu-toogle{background: none;} .header-style-1 .header-nav .nav {float: none;margin: 0px;background: #fff;background-color: rgb(255, 255, 255);width: 100%;display: block;height: 100%;} .header-style-1 .header-nav .nav > li > a{display: block;} .header-style-1 .header-nav .nav > .has-child .submenu-toogle{ display: block; text-align: right; width: 100%; padding: 0px 20px 0px 0px; top: 0px; min-height: 44px; } .header-style-1 .header-nav .nav > .has-child .submenu-toogle:before{ top: 15px; position: relative; } .header-style-1 .header-nav .nav > li > a .fa{display: none;} .header-nav .nav > li .sub-menu li .fa{top: 1px;} .header-nav .nav > li .sub-menu li > .sub-menu{transition: none !important;} .header-style-1.mobile-sider-drawer-menu .header-nav {position: fixed; width: 250px !important; z-index: 999; height: 100vh !important; overflow-y: inherit !important; left: -250px; top: 0px; transition: all 0.5s linear; background-color: #fff; } .header-style-1.mobile-sider-drawer-menu .header-nav .nav > li:hover > .sub-menu { transition: none;} .header-style-1.mobile-sider-drawer-menu .header-nav .nav > li .sub-menu li:hover > .sub-menu { transition: none;} .header-style-1.mobile-sider-drawer-menu.active .header-nav {left: 0%;} .header-style-1.mobile-sider-drawer-menu .icon-bar {transition: all 0.5s linear;position: relative;} .header-style-1.mobile-sider-drawer-menu.active .icon-bar.icon-bar-first{transform:rotate(45deg) translateX(3px) translateY(2px);} .header-style-1.mobile-sider-drawer-menu.mobile-sider-drawer-menu.active .icon-bar.icon-bar-three{transform:rotate(-45deg) translateX(3px) translateY(-2px);} .header-style-1.mobile-sider-drawer-menu .icon-bar.icon-bar-two {position: relative;right: 0%;} .header-style-1.mobile-sider-drawer-menu.active .icon-bar.icon-bar-two { position: absolute; right: 100px; opacity: 0;} .header-style-1.mobile-sider-drawer-menu .is-fixed .header-nav .nav { overflow: auto; max-height: 100%;} .header-style-1 .is-fixed.color-fill .header-nav .nav > li {margin:0;padding: 0px;} .header-style-1 .is-fixed.color-fill .header-nav .nav > li > a {margin: 0; padding: 12px 12px;} .header-style-1 .is-fixed .header-nav .nav > li > a {margin: 0; padding: 12px 12px;} } @media only screen and (max-width:991px){ .tm-wo-we-r{ padding-top: 40px; } } /*Model Popup Close Btn*/ .logo-header { width: 260px; } .logo-header-inner img, .wt-footer-bot-left img { width: 260px; height: auto; max-height: 56px; object-fit: contain; } .floating-whatsapp { position: fixed; right: 24px; bottom: 78px; z-index: 999; width: 48px; height: 48px; border-radius: 50%; background: #25d366; color: #fff; font-size: 25px; line-height: 48px; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,0.18); } .floating-whatsapp:hover, .floating-whatsapp:focus { color: #fff; background: #1ebe5d; } @media only screen and (max-width: 767px) { .logo-header { width: 210px; } .logo-header-inner img, .wt-footer-bot-left img { width: 210px; max-height: 46px; } .floating-whatsapp { right: 18px; bottom: 70px; width: 44px; height: 44px; font-size: 23px; line-height: 44px; } }