/* ========================== Template: sharan - Hotel and Resort Html Template Author: Thewebmax team Version: 1.0 ========================== */ /*======================================= || CSS TABLE CONTENT || ======================================= ======================================= 1. GENERAL ======================================= ======================================= 2. HEADING & TITLE ======================================= ======================================= 3. TEXT & PARAGRAPH ======================================= ------------------------------------- 1. text align ------------------------------------- 2. text vertical align ------------------------------------- 3. text no line brack ------------------------------------- 4. text transform ------------------------------------- 5. text size ------------------------------------- 6. text bold ====================================== 4. LISTING STYLES ====================================== ------------------------------------- 1. listing before icon color css ------------------------------------- 2. listing before numbers ------------------------------------- ====================================== 5. BOX SPACING (Padding & Margin) ====================================== ------------------------------------- 1.1 padding (around) ------------------------------------- 1.2 Padding (top) ------------------------------------- 1.3 Padding (bottom) ------------------------------------- 1.4 Padding (left) ------------------------------------- 1.5 Padding (right) ------------------------------------- 1.6 Padding (left right) ------------------------------------- 1.7 Padding (top bottom) ------------------------------------- 2.1 margin (around) ------------------------------------- 2.2 marging (top) ------------------------------------- 2.3 marging (bottom) ------------------------------------- 2.4 marging (left) ------------------------------------- 2.5 marging (right) ------------------------------------- 2.6 marging (left right) ------------------------------------- 2.7 marging (top bottom) ------------------------------------- 2.8 colum gap less ------------------------------------- ====================================== 6. POSITIONS ( absolute , relative , statice & z-index) ====================================== ------------------------------------- 1. position ------------------------------------- 1.1 relative 1.2 absolute 1.3 static ------------------------------------- 2. z-index ------------------------------------- ====================================== 7. COLOR ====================================== ------------------------------------- 1. text ------------------------------------- 2. background color ------------------------------------- 3. background image ------------------------------------- ====================================== 8. OVERLAY ( transparient box style ) ====================================== use for box left right part css ====================================== 9. BOXES CSS ====================================== ------------------------------------- 1. box content ------------------------------------- 2. For icons with box ------------------------------------- 3. Border ------------------------------------- 4. For only icons ------------------------------------- 5. place icon with box ------------------------------------- 6. icon box left align ------------------------------------- 7. icon box right align ------------------------------------- 8. icon box center align ------------------------------------- 9. media with content box css ------------------------------------- 10. for images ------------------------------------- ====================================== 10. IMAGES OVERLAY EFFECTS (overly animation on images) ====================================== ------------------------------------- 1. effect 1 ------------------------------------- 2. Gradient-black ------------------------------------- 3. Gradient-white ------------------------------------- ====================================== 11. shortcodeS ====================================== ------------------------------------- 1. Buttons ------------------------------------- 1.1 theme default button 1.2 button text uppercase 1.3 button size 1.4 button rounded 1.6 white 1.7 black 1.8 Gray 1.9 pink 1.10 Blue 1.11 Green 1.12 Orange 1.13 Red 1.14 Brown 1.15 Yellow 1.16 purple 1.17 Graphical 1.19 Outline 1.20 Outline white 1.21 Outline black 1.22 Outline gray 1.23 Outline pink 1.24 Outline blue 1.25 Outline green 1.26 Outline orange 1.27 Outline red 1.28 Outline brown 1.29 Outline yellow 1.30 Outline purple 1.31 Outline hover 1.32 button text link 1.33 text link white 1.34 text link black 1.35 text link Gray 1.36 text link pink 1.37 text link Blue 1.38 text link Green 1.39 text link Orange 1.40 text link Red 1.41 text link Brown 1.42 text link Yellow 1.43 text link purple 1.44 app strore 1.45 filter buttons css 1.45(1) Masonry filter alignment [Left-Right-Center] 1.45(2) Masonry filter link style 1.45(3) Masonry filter button style 1.45(4) Masonry filter button outline style ------------------------------------- 2. Title separators ------------------------------------- Separator defualt Separator liner Separator square Separator icon ------------------------------------- 3. Deviders ------------------------------------- 4. TABS ------------------------------------- 4.1 tabs style 1 [ default ] tabs nav center 4.2 tabs bg [ tabs background ] 4.3 tabs bg [ tabs background ] 4.4 tabs bg & top border [ tabs background & top border in active ] 4.4 tabs style 2 [ content with border outer ] 4.5 tabs style 3 [ left-nav ] 4.6 tabs style 4 [ left-nav & content with border ] 4.7 tabs style 5 [ right-nav ] 4.8 tabs style 6 [ right-nav & content with border ] ------------------------------------- 5. Accordians ------------------------------------- Accodian open close indicator css 1. Accordion defult 2. Accordion outline 3. Accordion bg gray 4. Accordion bg primary 5. Accordion bg dark ------------------------------------- 6. Carousels ------------------------------------- 6.1 Client carousel 1 ------------------------------------- 7. Testimonials ------------------------------------- 7.1 testimonial with background image 7.2 testimonial 6 ------------------------------------- 8. Pricing table ------------------------------------- 8.1 Pricing table 8.2 pricing table style 2 ------------------------------------- 9. Alert box ------------------------------------- 10. Image effects ------------------------------------- 10.1 image-opacity 10.2 image-zoom 10.3 image-zoom-slow 10.4 image-shrink 10.5 image-side-pan 10.6 image-vertical-pan 10.7 image-fade-in 10.8 image-fade-out 10.9 image-rotate 10.10 image-sepia 10.11 image-blurr 10.12 image-blurr-invert 10.13 image off color 10.14 image on color ------------------------------------- 11. Modal pop ------------------------------------- 12. Social icons ------------------------------------- 12.1 social icon default 12.2 social icon with border 12.3 social icon dark 12.4 social share icon style 1 ------------------------------------- 13. Breadcrumb ------------------------------------- 13.1 breadcrumb-row-1 13.2 Breadcrumb-1 ------------------------------------- 14. Google map ------------------------------------- 16. Countdown clock ------------------------------------- 17. Form elements ------------------------------------- 17.1 input group 17.3 radio & checkbox 17.4 Browse Button css 17.8 validation symbol 17.9 error for select box 17.10 succes for select box 17.11 textarea 17.11(1) resize-vertical 17.11(2) resize-horizontal 17.11(3) resize-none ------------------------------------- 18. Loading ------------------------------------- 18.1 loading - 1 18.2 loading - 2 ------------------------------------- 19. Widgets ------------------------------------- 19.1 widget listing 19.2 widget search custom 19.3 widget search wp-default 19.4 widget recent-posts 19.8 widget tags-list 19.14 widget gallery 19.18 widget client slider ------------------------------------- 20. Table ------------------------------------- 21. Video ------------------------------------- ====================================== 12. WP DEFAULT ====================================== ====================================== 13. BLOG ====================================== ------------------------------------- 3. if no image with blog post ------------------------------------- 10. side bar ------------------------------------- 11. Blog single ------------------------------------- 12. comment list ------------------------------------- 13. comment form ------------------------------------- ====================================== 14. HEADER (top part of page) ====================================== 1. header full screen ------------------------------------- 2. without top bar ------------------------------------- 3. map page header ------------------------------------- ====================================== 16. LOGO ( company identify symbol ) ====================================== 1. logo for header ------------------------------------- 2. when header is sticky ====================================== 17. MAIN BAR ( place logo & main-navigation ) ====================================== main bar with box view ------------------------------------- 1. Top Part Search Bar ====================================== 18. NAVIGATIONS ====================================== ------------------------------------- 1. mena-menu ------------------------------------- 2. nav dark version ------------------------------------- 3. when header is sticky ------------------------------------- 4. when header is sticky ------------------------------------- 5. header id Fixed ------------------------------------- 6. header with bg primary color 1 ------------------------------------- ====================================== 19. BANNER ====================================== ------------------------------------- 1. inner page banner ------------------------------------- ====================================== 20. SLIDER ====================================== ------------------------------------- 1. owl slider ------------------------------------- 1.1 next pre btn 1.2 owl dots button 1.3 owl button top to center 1.4 owl button top to left 1.5 owl button top to right 1.6 owl button bottom to center [it is default position ] 1.7 owl button bottom to left 1.8 owl button bottom to right 1.9 owl button vertical to center 1.10 owl button show on hover 1.11 owl slider button 1.12 owl dots nav position ====================================== 21. PAGINATION ====================================== 1. pagination style-1 ====================================== 22. FOOTER ====================================== ------------------------------------- 1. footer fixed on bottom css ------------------------------------- 1.1 footer fixed with fullscreen view 1.2 footer fixed with boxed view ------------------------------------- 5. widget Getintuch ------------------------------------- 6. scroll top btn css ------------------------------------- ====================================== 23. PAGE-CONTENT ====================================== ------------------------------------- 1. Section Head Part ------------------------------------- 2. Section Content Part ------------------------------------- ====================================== 24. AFTER-LOGIN-CONTENT ====================================== ------------------------------------- 2. Contact us page ------------------------------------- ====================================== 25. THEMEFOREST REQUIRED CLASSES ====================================== ------------------------------------- 1. Text meant only for screen readers ------------------------------------- ====================================== 27. BOX MAX-WIDTH css ( ) ====================================== ====================================== 28. SHOP & PRODUCT DETAIL (Woocommerce) ====================================== ------------------------------------- 1. Product Box ------------------------------------- ====================================== 29. content show on image box () ====================================== info box show ====================================== 30. Customize Grouping css ====================================== ------------------------------------- 1.set-radius ------------------------------------- 2. transition ------------------------------------- 3. float-clearfix ------------------------------------- ====================================== 32. Inner pages ====================================== ------------------------------------- 2. Out Team ------------------------------------- 2.6. Out Team six ------------------------------------- 4. product block ------------------------------------- ====================================== 33. Background Effects ====================================== ====================================== 34. Home Page ====================================== ====================================== 35. Carousel overlay content ====================================== ====================================== 36. Overlay Box 2 ====================================== ====================================== 37. line-amiation-block ====================================== ====================================== 38. latest-blog-dark ====================================== ====================================== 39. background Square block ====================================== ====================================== 40. About us ====================================== ====================================== 41. Our Services ====================================== ====================================== 42. Contact Us ====================================== ====================================== 43. Work carousal ====================================== ====================================== 44. Work Masonry ====================================== ====================================== 45. our-story ====================================== */ /*====================================== 1. GENERAL ======================================*/ body {background-color:#FFF; font-family: 'Roboto', sans-serif; font-size:14px; font-weight:400; color:#7c7c7c; padding:0; margin:0; overflow-x: hidden;} a {color: #262423; outline: 0 none; text-decoration:none;} a:hover, a:focus { text-decoration:none; outline: 0 none; } a:active, a:hover, a:focus{ color: #c19b76; } p a { color:#333333; } img {border-style: none; height: auto; max-width: 100%; vertical-align: middle;} hr {clear:both;} section, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, summary {display:block;} table {background-color: transparent; width: 100%;} table thead th { color: #fff; padding: 12px 8px !important; background-color: #c19b76; } table td {padding:15px 10px !important;} @media only screen and ( max-width:360px){ table td {word-break: break-all;} } p, pre, hr, ul, dd, table { margin-bottom:24px; } .overflow-hide { overflow:hidden; } .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 { margin-bottom:24px; font-family: 'DM Serif Text', serif; } h1 a, h2 a, h3 a, h4 a, h5 a { color:#262423; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { color:#c19b76; } h1 {font-weight:normal; font-size: 46px; line-height:52px; color:#262423;} h2 {font-weight:normal; font-size: 40px; line-height:46px; color:#262423;} h3 {font-weight:normal; font-size: 34px; line-height:40px; color:#262423; margin-bottom:20px;} h4 {font-weight:normal; font-size: 20px; line-height:26px; color:#262423; margin-bottom:15px;} h5 {font-weight:normal; font-size: 16px; line-height:22px; color:#262423; 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;} /*------------------------------------- 2. text vertical align ------------------------------------ */ /*------------------------------------- 3. text no line brack ------------------------------------ */ /*------------------------------------- 4. text transform ------------------------------------ */ .text-uppercase { text-transform: uppercase} /*------------------------------------- 5. text size ------------------------------------ */ .font-80 {font-size:80px; line-height:86px;} /*------------------------------------- 6. text bold ------------------------------------ */ .font-weight-500{font-weight:500;} .font-weight-900{font-weight:900;} /*------------------------------------- 7. Letter Spacing ------------------------------------ */ /*====================================== 4. LISTING STYLES ======================================*/ ul {list-style-position: outside ; padding:0;} ul {margin-bottom:24px;} ul li {padding:0;} .list-simple li{margin-bottom:10px;} .list-simple li ul{margin-left:15px; margin-top:10px;} /*------------------------------------- 1. listing before icon color css -------------------------------------*/ ul.black li:before {color:#262423;} ul.white li:before {color:#fff;} ul.orange li:before {color:#FF6600;} ul.green li:before {color:#00CC00;} ul.red li:before {color:#FF3737;} /*------------------------------------- 2. listing before numbers -------------------------------------*/ /*====================================== 5. BOX SPACING (Padding & Margin) ======================================*/ /*------------------------------------- 1.1 padding (around) -------------------------------------*/ .p-a0 {padding:0;} .p-a5 {padding:5px;} .p-a10 {padding:10px;} .p-a15 {padding:15px;} .p-a20 {padding:20px;} .p-a25 {padding:25px;} .p-a30 {padding:30px;} .p-a40 {padding:40px;} .p-a50 {padding:50px;} .p-a60 {padding:60px;} .p-a70 {padding:70px;} .p-a80 {padding:80px;} .p-a90 {padding:90px;} .p-a100 {padding:100px;} .p-a110 {padding:110px;} .p-a120 {padding:120px;} .p-a130 {padding:130px;} .p-a140 {padding:140px;} .p-a150 {padding:150px;} /*------------------------------------- 1.2 Padding (top) -------------------------------------*/ .p-t0 {padding-top:0;} .p-t5 {padding-top:5px;} .p-t10 {padding-top:10px;} .p-t15 {padding-top:15px;} .p-t20 {padding-top:20px;} .p-t25 {padding-top:25px;} .p-t30 {padding-top:30px;} .p-t40 {padding-top:40px;} .p-t50 {padding-top:50px;} .p-t60 {padding-top:60px;} .p-t70 {padding-top:70px;} .p-t80 {padding-top:80px;} .p-t90 {padding-top:90px;} .p-t100 {padding-top:100px;} .p-t110 {padding-top:110px;} .p-t120 {padding-top:120px;} .p-t130 {padding-top:130px;} .p-t140 {padding-top:140px;} .p-t150 {padding-top:150px;} /*------------------------------------- 1.3 Padding (bottom) -------------------------------------*/ .p-b0 {padding-bottom:0;} .p-b5 {padding-bottom:5px;} .p-b10 {padding-bottom:10px;} .p-b15 {padding-bottom:15px;} .p-b20 {padding-bottom:20px;} .p-b25 {padding-bottom:25px;} .p-b30 {padding-bottom:30px;} .p-b40 {padding-bottom:40px;} .p-b50 {padding-bottom:50px;} .p-b60 {padding-bottom:60px;} .p-b70 {padding-bottom:70px;} .p-b80 {padding-bottom:80px;} .p-b90 {padding-bottom:90px;} .p-b100 {padding-bottom:100px;} .p-b110 {padding-bottom:110px;} .p-b120 {padding-bottom:120px;} .p-b130 {padding-bottom:130px;} .p-b140 {padding-bottom:140px;} .p-b150 {padding-bottom:150px;} /*------------------------------------- 1.4 Padding (left) -------------------------------------*/ .p-l0 {padding-left:0;} .p-l5 {padding-left:5px;} .p-l10 {padding-left:10px;} .p-l15 {padding-left:15px;} .p-l20 {padding-left:20px;} .p-l25 {padding-left:25px;} .p-l30 {padding-left:30px;} .p-l40 {padding-left:40px;} .p-l50 {padding-left:50px;} .p-l60 {padding-left:60px;} .p-l70 {padding-left:70px;} .p-l80 {padding-left:80px;} .p-l90 {padding-left:90px;} .p-l100 {padding-left:100px;} .p-l110 {padding-left:110px;} .p-l120 {padding-left:120px;} .p-l130 {padding-left:130px;} .p-l140 {padding-left:140px;} .p-l150 {padding-left:150px;} /*------------------------------------- 1.5 Padding (right) -------------------------------------*/ .p-r0 {padding-right:0;} .p-r5 {padding-right:5px;} .p-r10 {padding-right:10px;} .p-r15 {padding-right:15px;} .p-r20 {padding-right:20px;} .p-r25 {padding-right:25px;} .p-r30 {padding-right:30px;} .p-r40 {padding-right:40px;} .p-r50 {padding-right:50px;} .p-r60 {padding-right:60px;} .p-r70 {padding-right:70px;} .p-r80 {padding-right:80px;} .p-r90 {padding-right:90px;} .p-r100 {padding-right:100px;} .p-r110 {padding-right:110px;} .p-r120 {padding-right:120px;} .p-r130 {padding-right:130px;} .p-r140 {padding-right:140px;} .p-r150 {padding-right:150px;} /*------------------------------------- 1.6 Padding (left right) -------------------------------------*/ /*------------------------------------- 1.7 Padding (top bottom) -------------------------------------*/ .p-tb10 {padding-bottom:10px; padding-top:10px;} .p-tb30 {padding-bottom:30px; padding-top:30px;} .p-tb50 {padding-bottom:50px; padding-top:50px;} .p-tb90 {padding-bottom:90px; padding-top:90px;} /*------------------------------------- 2.1 margin (around) -------------------------------------*/ .m-a0 {margin:0;} .m-a5 {margin:5px;} .m-a10 {margin:10px;} .m-a15 {margin:15px;} .m-a20 {margin:20px;} .m-a30 {margin:30px;} .m-a40 {margin:40px;} .m-a50 {margin:50px;} .m-a60 {margin:60px;} .m-a70 {margin:70px;} .m-a80 {margin:80px;} .m-a90 {margin:90px;} .m-a100 {margin:100px;} .m-a110 {margin:110px;} .m-a120 {margin:120px;} .m-a130 {margin:130px;} .m-a140 {margin:140px;} .m-a150 {margin:150px;} /*------------------------------------- 2.2 marging (top) -------------------------------------*/ .m-t0 {margin-top:0;} .m-t5 {margin-top:5px;} .m-t10 {margin-top:10px;} .m-t15 {margin-top:15px;} .m-t20 {margin-top:20px;} .m-t30 {margin-top:30px;} .m-t40 {margin-top:40px;} .m-t50 {margin-top:50px;} .m-t60 {margin-top:60px;} .m-t70 {margin-top:70px;} .m-t80 {margin-top:80px;} .m-t90 {margin-top:90px;} .m-t100 {margin-top:100px;} .m-t110 {margin-top:110px;} .m-t120 {margin-top:120px;} .m-t130 {margin-top:130px;} .m-t140 {margin-top:140px;} .m-t150 {margin-top:150px;} /*------------------------------------- 2.3 marging (bottom) -------------------------------------*/ .m-b0 {margin-bottom:0;} .m-b5 {margin-bottom:5px;} .m-b10 {margin-bottom:10px;} .m-b15 {margin-bottom:15px;} .m-b20 {margin-bottom:20px;} .m-b30 {margin-bottom:30px;} .m-b40 {margin-bottom:40px;} .m-b50 {margin-bottom:50px;} .m-b60 {margin-bottom:60px;} .m-b70 {margin-bottom:70px;} .m-b80 {margin-bottom:80px;} .m-b90 {margin-bottom:90px;} .m-b100 {margin-bottom:100px;} .m-b110 {margin-bottom:110px;} .m-b120 {margin-bottom:120px;} .m-b130 {margin-bottom:130px;} .m-b140 {margin-bottom:140px;} .m-b150 {margin-bottom:150px;} /*------------------------------------- 2.4 marging (left) -------------------------------------*/ .m-l0 {margin-left:0;} .m-l5 {margin-left:5px;} .m-l10 {margin-left:10px;} .m-l15 {margin-left:15px;} .m-l20 {margin-left:20px;} .m-l30 {margin-left:30px;} .m-l40 {margin-left:40px;} .m-l50 {margin-left:50px;} .m-l60 {margin-left:60px;} .m-l70 {margin-left:70px;} .m-l80 {margin-left:80px;} .m-l90 {margin-left:90px;} .m-l100 {margin-left:100px;} .m-l110 {margin-left:110px;} .m-l120 {margin-left:120px;} .m-l130 {margin-left:130px;} .m-l140 {margin-left:140px;} .m-l150 {margin-left:150px;} /*------------------------------------- 2.5 marging (right) -------------------------------------*/ .m-r0 {margin-right:0;} .m-r5 {margin-right:5px;} .m-r10 {margin-right:10px;} .m-r15 {margin-right:15px;} .m-r20 {margin-right:20px;} .m-r30 {margin-right:30px;} .m-r40 {margin-right:40px;} .m-r50 {margin-right:50px;} .m-r60 {margin-right:60px;} .m-r70 {margin-right:70px;} .m-r80 {margin-right:80px;} .m-r90 {margin-right:90px;} .m-r100 {margin-right:100px;} .m-r110 {margin-right:110px;} .m-r120 {margin-right:120px;} .m-r130 {margin-right:130px;} .m-r140 {margin-right:140px;} .m-r150 {margin-right:150px;} /*------------------------------------- 2.6 marging (left right) -------------------------------------*/ /*------------------------------------- 2.7 marging (top bottom) -------------------------------------*/ /*------------------------------------- 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-primary{color:#c19b76;} .text-black{color:#262423;} .text-black p{color:#7c7c7c;} /*------------------------------------- 2. background color -------------------------------------*/ .bg-primary{background-color:#c19b76;} .bg-white{background-color:#FFF;} .bg-gray{background-color:#f6f7f8;} /*------------------------------------- 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%;} .overlay-wraper > .container, .overlay-wraper > .wt-icon-box-wraper{ position:relative; z-index:1; } /*left right part css*/ /*use for box*/ .overlay-bx {position:absolute; left:0; bottom:0; width:100%; height:100%; text-align:center; z-index:1; opacity:0; visibility:hidden;} .overlay-icon { list-style:none; position:absolute; left:50%; top:50%; width:100%; z-index: 1 !important; -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%); } .overlay-icon a {display:inline-block; padding:0; margin:0 2px;} .overlay-icon .wt-icon-box-xs {line-height:40px;} .overlay-icon a:hover {color:#fff;} .overlay-bx:hover a > i, .wt-thum-bx:hover .overlay-bx a > i, .wt-box:hover .overlay-bx a > i { opacity:1; visibility:visible; -webkit-transition: all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; transition:all .5s ease-in-out; } .overlay-bx:hover, .wt-thum-bx:hover .overlay-bx, .wt-box:hover .overlay-bx {opacity:1; visibility:visible; } /*====================================== 9. BOXES CSS ======================================*/ .wt-box , .wt-thum-bx {position:relative; } /*------------------------------------- 1. box content -------------------------------------*/ .wt-box {position:relative; } /*------------------------------------- 2. For icons with box -------------------------------------*/ .wt-icon-box-xs { display:inline-block; text-align: center; } .wt-icon-box-xs { width:40px; height:40px;} .wt-icon-box-xs.radius { -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; } .wt-icon-box-xs i { vertical-align:middle; } .wt-icon-box-xs i { font-size:20px;} .wt-icon-box-xs img { vertical-align:middle; max-width:100%; width:auto; } .wt-icon-box-xs img { height:20px;} /*------------------------------------- 3. Border -------------------------------------*/ /*------------------------------------- 4. For only icons -------------------------------------*/ .icon-md { display:inline-block; text-align: center; } .icon-md i { vertical-align:middle; } .icon-md { width:60px;} .icon-md i { font-size:45px;} .icon-md img { vertical-align:middle; max-width:100%; width:auto; } .icon-md img { height:50px;} /*------------------------------------- 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;} .wt-icon-box-xs { display:table; } .wt-icon-box-xs .icon-cell { display:table-cell; vertical-align:middle; } /*------------------------------------- 6. icon box left align -------------------------------------*/ .wt-icon-box-wraper.left .wt-icon-box-xs { float:left; margin-right:20px; } .wt-icon-box-wraper.left .icon-md { float:left; margin-right:10px; } /*------------------------------------- 7. icon box right align -------------------------------------*/ .wt-icon-box-wraper.right { text-align:right;} .wt-icon-box-wraper.right .wt-icon-box-xs { float:right; display:table; margin-left:20px; } .wt-icon-box-wraper.right .icon-md { float:right; margin-left:10px; } /*------------------------------------- 8. icon box center align -------------------------------------*/ .wt-icon-box-wraper.center { text-align:center; } .wt-icon-box-wraper.center .wt-icon-box-xs { margin-left:auto; margin-right:auto; } /*------------------------------------- 9. media with content box css -------------------------------------*/ .wt-box, .wt-info, .wt-tilte {position:relative;} .wt-box[class*="border-"], .wt-info[class*="border-"], .wt-icon-box-wraper[class*="border-"] {border-color:#eee;} /*------------------------------------- 10. for images -------------------------------------*/ .wt-thum-bx {background-color:#262423; } .wt-thum-bx img { width:100%; height:auto; } /*====================================== 10. IMAGES OVERLAY EFFECTS (overly animation on images) ======================================*/ .wt-img-overlay2{ position:relative; } .wt-img-overlay2:before, .wt-img-overlay2:after{ content:""; background:#262423; position:absolute; left:0; top:0; width:0; height:0; opacity:0.4; z-index:0; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -ms-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } /*------------------------------------- 1. effect 1 -------------------------------------*/ /*------------------------------------- 2. effect 2 -------------------------------------*/ .wt-img-overlay2:before { width:100%; height:100%; opacity:0; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26242300000', endColorstr='#a6000000',GradientType=0 );*/ /* IE6-9 */ } .wt-img-overlay2:hover:before, .wt-box:hover .wt-img-overlay2:before { opacity:0.9; } /*------------------------------------- 2. Gradient-black -------------------------------------*/ /*------------------------------------- 3. Gradient-white -------------------------------------*/ /*====================================== 11. shortcodeS ======================================*/ /*------------------------------------- 1. Buttons --------------------------------------- */ /* 1.1 theme default button */ .btn { padding-top:9px; padding-bottom:9px;} .site-button, .site-button-secondry { padding: 10px 20px; display: inline-block; font-size: 14px; outline: none; cursor: pointer; outline: none; border-width:0; border-style:solid; border-color:transparent; line-height:1.42857; margin-left:-1px; text-decoration: none !important; } .site-button{ background-color:#c19b76; color:#262423;} .site-button:active, .site-button:hover, .site-button:focus, .active > .site-button{ background-color: #c19b76; color: #262423;} .site-button:hover{ background-color: #262423 ; color: #fff;} .mfp-video.video-play-btn{position:absolute; top:50%; left:50%; width:60px; height:40px; line-height:40px; text-align:center; margin:-25px; color:#fff; display:block; z-index:10; font-size:14px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; } .mfp-video.video-play-btn:hover{background-color:#262423; color:#fff; border:1px solid transparent;} .mfp-video.video-play-btn i{margin-right:-5px;} /* 1.2 button text uppercase */ .site-button.text-uppercase {text-transform:uppercase;} /* 1.3 button size */ .button-lg {padding:10px 20px; font-size: 16px;} .button-xl {padding:30px 50px; font-size:24px;} /* 1.4 button rounded */ /* 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:#262423; color:#fff;} .site-button.black:hover, .site-button.black:active, .site-button.black:focus {background-color:#171717 !important; color:#fff !important;} /* 1.8 Gray */ .site-button.gray {background-color:#666666; color:#fff;} .site-button.gray:hover, .site-button.gray:active, .site-button.gray:focus {background-color:#555555;color:#fff;} /* 1.9 pink */ .site-button.pink {background-color:#e63f75; color:#fff;} .site-button.pink:hover, .site-button.pink:active, .site-button.pink:focus { background-color:#d22b61; color:#fff; } /* 1.10 Blue */ .site-button.blue {background-color:#42B8D4; color:#fff;} .site-button.blue:hover, .site-button.blue:active, .site-button.blue:focus {background-color:#2ca2be; color:#fff;} /* 1.11 Green */ .site-button.green {background-color:#35B494; color:#fff;} .site-button.green:hover, .site-button.green:active, .site-button.green:focus { background-color:#26a585; color:#fff; } /* 1.12 Orange */ .site-button.orange {background-color:#E56713; color:#fff;} .site-button.orange:hover, .site-button.orange:active, .site-button.orange:focus { background-color:#d55703; color:#fff;} /* 1.13 Red */ .site-button.red { background-color:#D93223; color:#fff;} .site-button.red:hover, .site-button.red:active, .site-button.red:focus {background-color:#c51e0f; color:#fff;} /*1.14 Brown */ .site-button.brown { background-color:#69441F; color:#fff;} .site-button.brown:hover, .site-button.brown:active, .site-button.brown:focus { background-color:#5f3a15; color:#fff;} /* 1.15 Yellow */ .site-button.yellow { background-color:#ecc731; color:#fff;} .site-button.yellow:hover, .site-button.yellow:active, .site-button.yellow:focus {background-color:#d4af19; color:#fff;} /* 1.16 purple */ .site-button.purple { background-color:#AE1AF7; color:#fff;} .site-button.purple:hover, .site-button.purple:active, .site-button.purple:focus {background-color:#9804e1; color:#fff;} /* 1.17 Graphical */ /* 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: #262423; font-size: 14px; font-weight:500; } .masonry-filter > li.active a, .masonry-filter > li a:hover, .masonry-filter > li a:active, .masonry-filter > li a:focus {color: #a0a0a0;} @media only screen and (max-width: 600px) { .masonry-filter > li { margin-bottom:10px;} .masonry-filter > li a{font-size:14px !important;} } /* 1.45(1) Masonry filter alignment [Left-Right-Center] */ .filter-wrap.right > .masonry-filter { float:right;} @media only screen and (max-width:991px) { .filter-wrap.right > .masonry-filter { float:none;} } .filter-wrap.center > .masonry-filter {margin-left:auto; margin-right:auto;} /* 1.45(2) Masonry filter link style */ .masonry-filter.link-style > li a {font-size:15px;} .masonry-filter.link-style > li:after { content:"/"; position:relative; right:-18px; opacity:0.3;} .masonry-filter.link-style.white > li:after { color:#fff;} .masonry-filter.link-style > li:last-child:after { display:none;} .masonry-filter.link-style.white > li.active a, .masonry-filter.link-style.white > li a:hover, .masonry-filter.link-style.white > li a:active, .masonry-filter.link-style.white > li a:focus {color: #f7c20a;} /* 1.45(3) Masonry filter button style */ /* 1.45(4) Masonry filter button outline style */ @media only screen and (max-width:768px){ .masonry-item{width:100%;} } /* 1.45(5) half effect button outline style */ .btn-half{cursor: pointer; background-color: #c19b76; z-index: 0; display:inline-block; position:relative;} .btn-half span {color: #fff; display: block; padding-left: 0%; padding-right: 25px; text-transform: uppercase; font-weight:600; transform: scaleX(0.9); transform-origin: center left; transition: color 0.3s ease; position: relative; z-index: 1;} .btn-half em { position: absolute; height: 1px; background: #fff; width: 15%; right: 23px; top: 50%; transform: scaleX(0.25); transform-origin: center right; transition: all 0.3s ease; z-index: 1;} .btn-half:before, .btn-half:after { content: ''; background-color:rgba(255,255,255,0.2); height: 50%; width: 0; position: absolute; transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);} .btn-half:before { top: 0; left: 0; right: auto;} .btn-half:after { bottom: 0; right: 0; left: auto;} .btn-half.site-button:hover{ background-color: #262423; } .btn-half:hover:before { width: 100%; right: 0; left: auto;} .btn-half:hover:after { width: 100%; left: 0; right: auto;} .btn-half:hover span { color: #fff;} .btn-half:hover em { background: #fff; transform: scaleX(1);} .site-button-secondry:active, .site-button-secondry:hover, .site-button-secondry:focus, .active > .site-button-secondry {background-color:#262423; color: #fff; } .btn-half.site-button-secondry{ background-color: #262423;} .btn-half.site-button-secondry span {color: #fff; display: block; padding-left: 0%; padding-right: 25px; text-transform: uppercase; font-weight:600; transform: scaleX(0.9); transform-origin: center left; transition: color 0.3s ease; position: relative; z-index: 1;} .btn-half.site-button-secondry em { position: absolute; height: 1px; background: #fff; width: 15%; right: 23px; top: 50%; transform: scaleX(0.25); transform-origin: center right; transition: all 0.3s ease; z-index: 1;} .btn-half.site-button:hover{ background-color: #262423; } .btn-half.site-button-secondry:hover{ background-color: #c19b76; } .btn-half:hover:before { width: 100%; right: 0; left: auto;} .btn-half:hover:after { width: 100%; left: 0; right: auto;} .btn-half:hover span { color: #fff;} .btn-half:hover em { background: #fff; transform: scaleX(1);} /*------------------------------------- 2. Title separators -------------------------------------*/ .wt-separator-outer { overflow:hidden;} /*Separator defualt*/ .wt-separator { display:inline-block; height:3px; width:80px; position:relative;} /*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 -------------------------------------*/ .acod-head {position:relative;} .acod-title { margin-top:0; margin-bottom:0;} .acod-title a{position:relative; z-index:1; overflow:hidden; } .acod-head .fa {margin-right:5px;} .acod-head a { display:block; padding:15px 40px 15px 15px; font-size: 14px; font-weight: 500;} .acod-head a, .acod-head a:hover, .acod-head a:active, .acod-head a:focus { color:#262423; } /*Accodian open close indicator css*/ .acod-head .indicator {padding:15px; color:#262423; position:absolute; right:0; top:0;} .acod-head .indicator .fa{position:relative;} /*.acod-head .indicator .fa:after, .acod-head .indicator .fa:before{ position:absolute; content:""; right:0px; top:-4px; height:1px; width:13px; background-color:#262423;}*/ .acod-head.acc-actives .indicator .fa:before, .acod-head [aria-expanded="false"] .indicator .fa:before { content: "\f067"; font-family: 'FontAwesome'; } .acod-head.acc-actives .indicator .fa:before, .acod-head [aria-expanded="true"] .indicator .fa:before { font-family: 'FontAwesome'; content: "\f068" } .acod-head .collapsed .indicator .fa:before, .acod-head .collapsed [aria-expanded="false"] .indicator .fa:before { content: "\f067"; font-family: 'FontAwesome'; } .acod-head .indicator .fa:before, .acod-head [aria-expanded="true"] .indicator .fa:before { font-family: 'FontAwesome'; content: "\f068" } /* 1. Accordion defult */ /* 2. Accordion outline */ /* 3. Accordion bg gray */ /* 4. Accordion bg primary */ /* 5. Accordion bg dark */ /*------------------------------------- 6. Carousels -------------------------------------*/ /* 6.1 Client carousel 1*/ .owl-carousel .ow-client-logo img { max-height:100%; width:auto; display:inline-block;} /*------------------------------------- 7. Testimonials -------------------------------------*/ /*7.1 testimonial with background image*/ /*7.2 testimonial 6*/ .testimonial-home .owl-prev, .testimonial-home .owl-next{ background-color: transparent; color: #ffffff; padding: 8px 10px; width: 35px; height: 35px; text-align: center; font-size: 13px; display: inline-block; cursor: pointer; } .testimonial-home .owl-prev i, .testimonial-home .owl-next i{ font-size: 24px; font-weight:800; } /*------------------------------------- 8. Pricing table -------------------------------------*/ /*8.2 pricing table style 4*/ /*------------------------------------- 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 -------------------------------------*/ 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 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 { 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;} /*18.2 loading - 2*/ /*------------------------------------- 19. Widgets -------------------------------------*/ .widget {margin-bottom:40px;} .widget-title {margin:0 0 25px;} .widget-title{margin-bottom:20px;} /* 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 */ .widget-client{ background-color:#f6f7f8;} /*-------widget service-------*/ .widget_address li{ margin-bottom: 20px; color: #fff; position: relative; padding-left: 30px; } .widget_address li i { position: absolute; left: 0px; top: 5px; font-size: 14px; } /*-------widget newsletter-------*/ /*====footer news letter====*/ /*------------------------------------- 20. Table -------------------------------------*/ /* 20.1 Full-responsive */ /*------------------------------------- 21. Video -------------------------------------*/ /*====================================== 12. WP DEFAULT ======================================*/ /*====================================== 13. BLOG ======================================*/ /*------------------------------------- 10. side bar -------------------------------------*/ /*------------------------------------- 12. comment list -------------------------------------*/ /*------------------------------------- 13. comment form -------------------------------------*/ /*------------------------------------- 15. blog grid-post -------------------------------------*/ /*------------------------------------- 16. if no image with blog post Latest-blog-3 -------------------------------------*/ /*------------------------------------- 16. if no image with blog post Latest-blog-3 -------------------------------------*/ /*====================================== 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{margin-bottom:0;} @media only screen and (max-width:991px) { .sticky-wrapper { height: auto !important;} } /*------------------------------------- 1. header full screen -------------------------------------*/ /*------------------------------------- 2. without top bar -------------------------------------*/ .extra-nav { font-size: 16px; display:table; float:right; height:70px; position:relative; z-index:9;} .extra-nav .extra-cell{ display:table-cell; padding-left:20px; vertical-align:middle;} /*------------------------------------- 3. map page header -------------------------------------*/ /*====================================== 16. LOGO ( company identify symbol ) ======================================*/ /*------------------------------------- 1. logo for header -------------------------------------*/ .logo-header{ display:table; float:left; width:170px; height:70px; vertical-align:middle; padding:0; font-size:36px; color:#1bbce8; margin-top:0; margin-bottom:0; margin-left:0; margin-right:0; position:relative; z-index:11;} .logo-header-inner { display:table-cell; vertical-align:middle; height:100%;} .logo-header-inner img{ max-width:100%; max-height:100%;} @media only screen and (max-width:991px) { .logo-header{ width:120px;} } @media only screen and (max-width:480px) { .logo-header{ width:100px;} } .logo-footer{ display:table; width:170px; height: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;} /*------------------------------------- 2. when header is sticky -------------------------------------*/ .is-fixed .logo-header { height:70px; } /*====================================== 17. MAIN BAR ( place logo & main-navigation ) ======================================*/ /*------------------------------------- 1. eamil-phone (left) -------------------------------------*/ /*------------------------------------- 2. social-links (right) -------------------------------------*/ /*------------- top share icon block ----------------------*/ /*-----------------------------------*/ .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*/ .header-style-1 .main-bar { position:absolute; background:none; } /* header 3 fixed */ .header-style-1 .is-fixed .main-bar { position:fixed; } .header-style-1 .is-fixed.color-fill .main-bar { background:#150e07; } /*====================================== 18. NAVIGATIONS ======================================*/ /*------------------------------------- 1. mega-menu -------------------------------------*/ .navbar-toggle { border:none; margin-top:14px; margin-bottom:14px; margin-left:15px; margin-right:-10px; padding: 12px 10px;} .navbar-toggle .icon-bar { background:#fff; height:3px; border-radius:0; -webkit-border-radius:0;} @media only screen and (max-width:480px) { .navbar-toggle { margin-left:10px;} .extra-nav .extra-cell {margin-left:0;} } .is-fixed .navbar-toggle { margin-top:14px; margin-bottom:14px;} .header-nav { position:relative; padding:0px; z-index:7;} .header-nav .nav {float:right;} .header-nav .nav i {font-size:9px; margin-left:3px; margin-top:-3px; vertical-align:middle; opacity:0.7;} .header-nav .nav > li { font-weight:500; position:relative; text-transform:uppercase; margin:-10px 0; padding:10px 0;} .header-nav .nav > li > a { border-radius: 0; -webkit-border-radius:0; -moz-border-radius:0; color: #fff; font-size: 15x; padding:35px 12px; cursor:pointer; letter-spacing:2px; margin:-10px 0;} .header-nav .nav > li > a:hover {background-color: transparent; color: #212427;} .header-nav .nav > li > a:active, .header-nav .nav > li > a:focus { background-color: transparent;} .header-nav .nav > li.active > a {background-color: transparent; color: #c19b76;} .header-nav .nav > li:hover > a {color: #c19b76;} .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: #c19b76; border: 5px solid #c19b76; 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 {position: relative; text-transform:none;} .header-nav .nav > li .sub-menu li a {color: #262423; display: block; font-size: 15px; padding: 10px 20px;} .header-nav .nav > li .sub-menu li a:hover {color: #262423; text-decoration: none;} .header-nav .nav > li .sub-menu li a:after{ content:""; position:absolute; left:50%; bottom:-1px; height:1px; width:0%; background-color:#c19b76; -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; } .header-nav .nav > li .sub-menu li a:hover:after{ width:100%; left:0%; } .header-nav .nav > li .sub-menu li:hover > a {color: #fff; background-color: #262423;} .header-nav .nav > li .sub-menu li:last-child {border-bottom: 0px;} .header-nav .nav > li .sub-menu li .fa { color: #363636; display: block; float: right; position: absolute; right: 10px; top: 12px;} .header-nav .nav > li .sub-menu li > .sub-menu { left:220px; top:0px; margin:0 0 0 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-nav .nav > li .sub-menu li:hover > .sub-menu {left:220px; margin:0px; opacity:1; top: -1px; visibility: visible;} .header-nav .nav > li .sub-menu li:hover > .sub-menu:before { background-color: transparent; bottom: 0px; content: ''; display: block; height: 100%; left: -6px; position: absolute; top: 0px; width: 6px; } .header-nav .nav > li .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---*/ .header-nav .nav > li.submenu-direction .sub-menu {left: auto; right: 0;} .header-nav .nav > li.submenu-direction .sub-menu li > .sub-menu { left:auto; right:220px; margin:0 20px 0 0;} .header-nav .nav > li.submenu-direction .sub-menu li:hover > .sub-menu { left:auto; right:220px; margin:0 0 0 0;} .has-child .submenu-toogle { position:absolute; right:4px; top:4px; color:#262423; background-color:transparent; z-index:900; cursor:pointer; padding:10px; font-size:14px; display:none; } .header-nav .has-child li .submenu-toogle {opacity:0.9;} /*.header-nav .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:#262423;} } @media only screen and (max-width: 991px) { /* responsive strat when media screen [991px] css START*/ .navbar-toggle { display: block;} .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: #262423;} .header-nav .nav i{ float:right; } .header-nav .nav > li > a:hover, .header-nav .nav > li > a:active, .header-nav .nav > li > a:focus { background-color: #f0f0f0; text-decoration: none; } .header-nav .nav > li .mega-menu > li:after{ display:none;} .header-nav .nav > li ul, .header-nav .nav > li .sub-menu, .header-nav .nav > li .mega-menu { display: none; position: static; visibility: visible; width:auto; background:#f9f9f9; } .header-nav .nav > li ul.mega-menu ul {display: block;} .header-nav .nav > li .mega-menu > li {padding:0px;} .header-nav .nav > li ul.mega-menu li:hover ul { display: block;} .header-nav .nav li.has-child { position:relative;} .header-nav .nav li .sub-menu, .header-nav .nav li .mega-menu { opacity:1; margin:0 !important; } .has-child .submenu-toogle { display:block;} .header-nav .has-child.nav-active > a + .submenu-toogle.glyphicon-plus::before { content: "\2212"; } } /* Vertical Nav */ .nav-sidebar{ position:fixed; right:-500px; top:0; width:100%; max-width:500px; height:100%; z-index:999; background-color:#fff; 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 .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 { color: #fff; cursor: pointer; display: block; font-size: 21px; height: 40px; line-height: 40px; text-align: center; width: 40px; border:none; } .vnav-close{ background:none; border:none; position:absolute; right: 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:#262423; } .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:#262423; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /*--vertcal navigation start--*/ .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;} } /*------------------------------------- 6. header with bg primary color 1 -------------------------------------*/ .bg-primary .header-nav .nav > li > a { color:#fff;} .bg-primary .header-nav .nav > li:hover > a, .bg-primary .header-nav .nav > li.active > a {color:#1a1a1a;} .bg-primary .navbar-toggle .icon-bar {background-color:#fff;} @media only screen and (max-width:991px) { .bg-primary .header-nav .nav > li > a { color:#777;} .bg-primary .header-nav .nav > li:hover > a, .bg-primary .header-nav .nav > li.active > a {color:#FFBC13;} .header-nav .nav > li { margin:0; padding:0;} .header-nav .nav > li > a { margin:0; padding:10px 12px; font-weight:600;} .is-fixed.color-fill .header-nav .nav > li { margin:0; padding:0;} .is-fixed.color-fill .header-nav .nav > li > a { margin:0; padding:10px 12px;} } /*===cart btn===*/ /*===cart box ===*/ /*===cart box inner ===*/ /*====================================== 19. BANNER ======================================*/ /*------------------------------------- 1. inner page banner -------------------------------------*/ .wt-bnr-inr {height:360px; background-size:cover; background-position:center center; display:table; width:100%;} .wt-bnr-inr .container{display:table; height:100%;} .wt-bnr-inr-entry {display:table-cell; vertical-align:middle; text-align:center; padding-top: 10%;} .wt-bnr-inr-entry .banner-title-outer{position: relative;} @media only screen and (max-width: 991px) { .wt-bnr-inr {height: 330px; padding-top: 120px;} } @media only screen and (max-width: 540px) { .wt-bnr-inr-entry .banner-title-name h1, .wt-bnr-inr-entry .banner-title-name h2, .wt-bnr-inr-entry .banner-title-name h3{font-size:32px; line-height:normal;} } /*====================================== 20. SLIDER ======================================*/ /*------------------------------------- 1. owl slider -------------------------------------*/ /*------------------------------------- 1.1 next pre btn -------------------------------------*/ .owl-carousel .owl-nav { margin-top:40px; text-align: center;} .owl-carousel .owl-nav .disabled {opacity: .5; cursor: default} /*------------------------------------- 1.2 owl dots button -------------------------------------*/ .owl-carousel .owl-dots {text-align:center; margin-top:20px;} .owl-carousel .owl-dots .owl-dot {display: inline-block;} .owl-carousel .owl-dots .owl-dot span { width:12px; height:12px; margin:5px 7px; background: #1a1a1a; border:1px solid #fff; display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; } .owl-carousel .owl-dots .owl-dot.active span, .owl-carousel .owl-dots .owl-dot:hover span {background: #979797;} /*------------------------------------- 1.3 owl button top to center -------------------------------------*/ .owl-btn-top-center .owl-nav, .owl-btn-top-left .owl-nav, .owl-btn-top-right .owl-nav { position:absolute; top:0; left:0; width:100%; margin:0; } .owl-btn-top-center .owl-stage-outer, .owl-btn-top-left .owl-stage-outer, .owl-btn-top-right .owl-stage-outer {padding-top:40px;} .owl-btn-top-center .owl-nav {text-align:center;} /*------------------------------------- 1.4 owl button top to left -------------------------------------*/ .owl-btn-top-left .owl-nav {text-align:left;} /*------------------------------------- 1.5 owl button top to right -------------------------------------*/ .owl-btn-top-right .owl-nav {text-align:right;} /*------------------------------------- 1.6 owl button bottom to center [it is default position ] -------------------------------------*/ .owl-btn-bottom-center .owl-nav {text-align:center;} /*------------------------------------- 1.7 owl button bottom to left -------------------------------------*/ .owl-btn-bottom-left .owl-nav {text-align:left;} /*------------------------------------- 1.8 owl button bottom to right -------------------------------------*/ .owl-btn-bottom-right .owl-nav { text-align:right;} /*------------------------------------- 1.9 owl button vertical to center -------------------------------------*/ .owl-btn-vertical-center .owl-nav {margin:0px;} .owl-btn-vertical-center .owl-nav .owl-prev, .owl-btn-vertical-center .owl-nav .owl-next {position:absolute; top:50%; margin:-15px 0;} .owl-btn-vertical-center .owl-nav .owl-prev {left:0;} .owl-btn-vertical-center .owl-nav .owl-next {right:0;} /*------------------------------------- 1.10 owl button show on hover -------------------------------------*/ .owl-btn-hover .owl-nav {opacity:0;} .owl-btn-hover:hover .owl-nav {opacity:1;} .owl-carousel .owl-item img{transform-style: inherit;} /*------------------------------------- 1.11 owl slider button -------------------------------------*/ .owl-prev, .owl-next {background-color: #262423; color: #ffffff; padding:8px 10px; width:35px; height:35px; text-align:center; font-size: 13px; display: inline-block; cursor: pointer;} .owl-prev {margin-right:5px;} .owl-next {margin-left:5px;} .owl-prev:hover, .owl-prev:active, .owl-prev:focus, .owl-next:hover, .owl-next:active, .owl-next:focus { background-color: #212121; border-color: #212121; color: #ffffff; opacity:0.9; } /*------------------------------------- 1.12 owl dots nav position -------------------------------------*/ .owl-dots-bottom-left .owl-dots, .owl-dots-bottom-right .owl-dots , .owl-dots-bottom-center .owl-dots{ bottom:0px; padding:15px 20px; position: absolute; width:100%; } .owl-dots-bottom-left .owl-dots { text-align: left;} .owl-dots-bottom-right .owl-dots { text-align: right;} /*====================================== 21. PAGINATION ======================================*/ /*1. pagination style-1 */ /*====================================== 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; font-weight:600;} .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:0px;} @media only screen and (max-width:991px) { .site-footer{padding:0px;} } /*------------------------------------- 2. Footer dark version css -------------------------------------*/ .footer-dark.site-footer {border-top: 0px solid #150e07;} .footer-dark .footer-top {background-color:#150e07;} .footer-dark .footer-top h1, .footer-dark .footer-top h2, .footer-dark .footer-top h3, .footer-dark .footer-top h4, .footer-dark .footer-top h5, .footer-dark .footer-top h1 a, .footer-dark .footer-top h2 a, .footer-dark .footer-top h3 a, .footer-dark .footer-top h4 a, .footer-dark .footer-top h5 a {color: #fff;} .footer-dark .footer-top .widget-title::before { border-color:#fff;} .footer-dark .footer-top p { color: #fff; } .footer-dark .footer-top strong, .footer-dark .footer-top b, .footer-dark .footer-top{color:#999;} .footer-dark .footer-top a:active, .footer-dark .footer-top a:focus, .footer-dark .footer-top a:hover {color: #c19b76;} .footer-dark .footer-top p a{color: #fff;} .footer-top { padding: 50px 0px 10px 0px; } /*------------------------------------- 5. widget Getintuch -------------------------------------*/ @media only screen and (max-width:991px) { footer .container {width:100%;} .col-md-3.col-sm-6.footer-col-4:nth-child(3) {clear:both;} } /*------------------------------------- 6. scroll top btn css -------------------------------------*/ button.scroltop { height: 40px; width: 40px; background:#262423; border:none; position: fixed; right: 15px; bottom:15px; text-transform:uppercase; margin:0; padding:0; cursor: pointer; display: none; text-align:center; z-index:999; color: #fff; } button.scroltop span{display: block; font-size: 24px; line-height: 24px;} .string {position:relative;} #btn-vibrate{ animation:vibrate 2s linear 0s infinite; -moz-animation: vibrate 2s linear 0s infinite; /* Firefox */ -webkit-animation: vibrate 2s linear 0s infinite; /* Safari and Chrome */ -o-animation: vibrate 2s linear 0s infinite; /* Opera */ } @keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } /* Firefox */ @-moz-keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } /* Safari and Chrome */ @-webkit-keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } /* Opera */ @-o-keyframes vibrate { 0% { top: 0px; } 25% { top: -3px; } 50% { top: 0px; } 75% { top: 3px; } 100% { top: 0px; } } @media only screen and (max-width:480px) { button.scroltop {font-size:7px; height:30px; width: 30px; line-height:16px;} button.scroltop span {font-size: 10px; line-height: 10px;} } /*====================================== 23. PAGE-CONTENT ======================================*/ #bg {background-attachment:fixed; background-size:cover;} .page-wraper {background:#fff;} .page-content {position:relative;} .section-full {position:relative;} /*------------------------------------- 1. Section Head Part -------------------------------------*/ .section-head {margin-bottom:30px; position:relative; z-index: 1;} .section-head h1:after, .section-head h2:after, .section-head h3:after{ position: absolute; content:attr(data-title); color: rgba(210, 210, 210, 0.3); font-weight: 900; font-size: 100px; text-transform: uppercase; top:-15px; left: 50%; width: 100%; z-index: -1; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .section-head h1, .section-head h2, .section-head h3 {margin-top:0; font-family: 'DM Serif Text', serif;} @media only screen and (max-width:1200px){ .section-head h1:after, .section-head h2:after, .section-head h3:after{ font-size: 60px; } } @media only screen and (max-width:767px){ .section-head h1:after, .section-head h2:after, .section-head h3:after{ display:none; } } .section-head p {padding-top:20px; font-size:14px;} .section-head p:last-child { margin-bottom:0;} .text-center.section-head p {max-width:800px; margin-left:auto; margin-right:auto;} .text-white {color:#FFF; } .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white p {color:#FFF; } /*------------------------------------- 2. Section Content Part -------------------------------------*/ @media only screen and (max-width:1024px) { .section-full{ background-attachment:scroll !important; } .section-full{padding-top:40px;padding-bottom:40px;} } @media only screen and (max-width:480px) { .section-head h1, .section-head h2, .section-head h3 {font-size:22px;} h1,h2,h3 {font-size:22px; line-height:28px;} } /*====================================== 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 {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 ( ) ======================================*/ .max-w400 {max-width:400px; } /*====================================== 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, .panel, .form-control, .dropdown-menu, .modal-content, .navbar-toggle, .well, .alert { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } /*------------------------------------- 2. transition -------------------------------------*/ a, .btn, .form-control, .overlay-bx, .overlay-icon li a i, .wt-icon-box-xs, .indicator, .navbar-toggle, .logo-header, .header-nav .nav > li > a, .extra-nav, .acod-head .indicator .fa { -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } /*------------------------------------- 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 -------------------------------------*/ /*------------------------------------- 4. Product block -------------------------------------*/ .product-block p{margin-bottom:0px;} /*====================================== 33. Background Effects ======================================*/ .bg-top-center{background-position:top center;} .bg-repeat{background-repeat:repeat;} /*====================================== 34. Home Page ======================================*/ @media only screen and (max-width:991px){ .section-full.p-tb90{ padding-top:40px; padding-bottom:40px; } } /*====================================== 35. Carousel overlay content ======================================*/ .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 .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; } /*=========================== 36. Overlay Box 2 ===========================*/ /*=========================== 37. line-filter-block ===========================*/ /*=========================== 38. latest-blog-dark ===========================*/ /*latest-blog-dark2*/ /*=========================*/ /*=========================*/ /*=========================*/ .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav{position: absolute; margin-top: 0px; top: -10px; left: -80px;} .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-prev {left: 40px; position:relative; background-color:#1a1a1a; margin:0px;} .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-next { left:5px; position: relative; top: 40px; background-color:#1a1a1a; margin:0px;} @media only screen and (max-width:800px) { .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav{left: auto; right: 5px; top: auto; bottom: -47px;} .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-prev {left:0px;} .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-next { left:5px; top: 0px;} } /*========================= 39. background Square block =========================*/ /*========================= 40. About us =========================*/ /*====================================== 42. Contact Us ======================================*/ .contact-one{position:relative;} .contact-one .form-control{border:0px; border-bottom:2px solid #262423;} .contact-one .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #262423; font-size:12px; text-transform:uppercase; font-weight:900; } .contact-one .form-control::-moz-placeholder { /* Firefox 19+ */ color: #262423; font-size:12px; text-transform:uppercase; font-weight:900; } .contact-one .form-control:-ms-input-placeholder { /* IE 10+ */ color: #262423; font-size:12px; text-transform:uppercase; font-weight:900; } .contact-one .form-control:-moz-placeholder { /* Firefox 18- */ color: #262423; font-size:12px; text-transform:uppercase; font-weight:900; } .contact-info{} .contact-info .icon-content p{ word-break:normal;} /*====================================== 43. Work carousal ======================================*/ /*====preview inner pages ====*/ .work-carousel .owl-stage{ padding-top:70px; padding-bottom:70px;} .work-carousel .owl-item{background-color:#fff;} .work-carousel .owl-item > .item{opacity:0.6;} .work-carousel .owl-item.active.center > .item{ opacity:1;} .work-carousel .owl-item.active.center{ opacity:1; z-index:1; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .work-carousel{ position:relative; z-index:1; } .work-carousel .owl-item.active.center{box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);} @media only screen and (max-width:991px) { .work-carousel .owl-item.active.center{ -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } /*========================= 45. our-story =========================*/ /*| line=====================*/ /*_ line=====================*/ /* line circle O=================*/ @-webkit-keyframes bounceScale { 0%, 20% { opacity: 0; border-width: 5px; } 10% { opacity: 1; } 20%, 100% { -webkit-transform: scale(2); transform: scale(2); border-width: 1px; opacity: 0; } } @keyframes bounceScale { 0%, 20% { opacity: 0; border-width: 5px; } 10% { opacity: 1; } 20%, 100% { -webkit-transform: scale(2); transform: scale(2); border-width: 1px; opacity: 0; } } /* line circle O blink =================*/ /* triangle */ /* pulse wave */ @-webkit-keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } @keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } /*========================================================= =============================================================*/ /* * 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); padding-top:20px; } .owl-carousel-filter .owl-controls .owl-nav .owl-prev, .owl-carousel-filter .owl-controls .owl-nav .owl-next, .owl-carousel-filter .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .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-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .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 */ .no-js .owl-carousel-filter { display: block; } .owl-carousel-filter.owl-btn-top-left .owl-nav{ top:-35px; width:auto; } @media only screen and (max-width:991px) { .owl-carousel-filter2.owl-btn-top-center .owl-nav, .owl-carousel-filter2.owl-btn-top-left .owl-nav, .owl-carousel-filter2.owl-btn-top-right .owl-nav{ top:40px; } } @media only screen and (max-width:768px){ .owl-carousel-filter.owl-btn-top-left .owl-nav{ top:50%; text-align: center; width: 100%; bottom: inherit; height:36px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .owl-carousel-filter.owl-btn-top-left .owl-nav .owl-prev{ float:left; } .owl-carousel-filter.owl-btn-top-left .owl-nav .owl-next{ float:right; } } /*===============================*/ .btn-filter-wrap, .btn-filter-wrap2, .btn-filter-wrap3 { list-style:none; } .btn-filter-wrap li{ position:relative; display:inline-block; font-size:14px; font-weight:600; text-transform:uppercase; color: #262423; padding:0 20px; cursor:pointer; } .btn-filter-wrap2 li { position:relative; display:inline-block; font-size:14px; font-weight:600; text-transform:uppercase; color: #262423; padding:0 20px; cursor:pointer; } .btn-filter-wrap3 li { position:relative; display:inline-block; font-size:14px; font-weight:600; text-transform:uppercase; color: #262423; padding:0 20px; cursor:pointer; } .btn-filter-wrap li:last-child, .btn-filter-wrap2 li:last-child, .btn-filter-wrap3 li:last-child{ padding-right:0; } .btn-filter-wrap li.btn-active, .btn-filter-wrap2 li.btn-active, .btn-filter-wrap3 li.btn-active{ color: #c19b76; } .btn-filter-wrap li:after, .btn-filter-wrap2 li:after, .btn-filter-wrap3 li:after{ content:"/"; position:absolute; left:-2px; top:4px; font-size:14px; opacity:0.2; color: #262423; } .btn-filter-wrap li:first-child:after, .btn-filter-wrap2 li:first-child:after, .btn-filter-wrap3 li:first-child:after{ display:none; } .owl-carousel-filter .owl-item, .owl-carousel-filter2 .owl-item, .owl-carousel-filter3 .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, .owl-carousel-filter2 .owl-item.active, .owl-carousel-filter3 .owl-item.active{ opacity:1 ; } .owl-carousel-filter .owl-item > .owl-item, .owl-carousel-filter2 .owl-item > .owl-item, .owl-carousel-filter3 .owl-item > .owl-item{ opacity:1; } @media only screen and (max-width:640px){ .btn-filter-wrap, .btn-filter-wrap2, .btn-filter-wrap3 { text-align:left; } } @media only screen and (max-width:540px){ .btn-filter-wrap li, .btn-filter-wrap2 li, .btn-filter-wrap2 li{ padding-left:0px; margin-bottom: 15px; } .btn-filter-wrap li:after, .btn-filter-wrap2 li:after, .btn-filter-wrap3 li:after{ display:none; } .owl-carousel-filter2.owl-btn-top-center .owl-nav, .owl-carousel-filter2.owl-btn-top-left .owl-nav, .owl-carousel-filter2.owl-btn-top-right .owl-nav{ top:40px; } .owl-carousel-filter3.owl-btn-top-center .owl-nav, .owl-carousel-filter3.owl-btn-top-left .owl-nav, .owl-carousel-filter3.owl-btn-top-right .owl-nav{ top:40px; } } /*=============== PARTICLE CANVAS =================*/ /*======================= after before slider ========================*/ .rs-addon-beforeafter-btn i{ color:#262423; } /* cursor blink animation*/ .typewrite > .wrap:after { content: '|'; -webkit-animation: blink 0.7s infinite; animation: blink 0.7s infinite; position: relative; right:10px; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* Rotate 90==================*/ /* ===============Team==================*/ /* ===============Line corner ==================*/ /* =============== Img center icon ==================*/ .img-center-icon .overlay-bx .overlay-icon{ width:100px; height:40px; background-color:rgba(0,0,0,0.3); } .img-center-icon .overlay-bx .overlay-icon a{ color:#fff; } .img-center-icon .overlay-bx .overlay-icon a:hover{ color:#c19b76; } /* =============== Project Detail ==================*/ .project-detail-outer .project-detail-pic .wt-media img{width:100%;} /* =============== Fixed ==================*/ /*=============================================== left shortcodes =============================================== */ /*=============================================== Modal =============================================== */ /*=============================================== Responsive container =============================================== */ /*------------------------------------- 1. Top Part Search Bar -------------------------------------*/ #search { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -moz-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); -o-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0; display: none; } #search.open { -webkit-transform: translate(0px, 0px) scale(1, 1); -moz-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); -o-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; z-index: 999; display: block; } #search form { position: absolute; top: 50%; left: 0; margin-top: -51px; width: 60%; margin-left: 20%; color: #262423; border-bottom: 5px solid rgb(0, 0, 0); font-size: 40px; font-weight: 300; text-align: left; outline: none; padding: 10px; border-radius:0px; } #search input[type="search"] {width:100%; background: none; border:none; padding: 0px 30px;} #search .close {position: fixed; top: 15px; right: 15px; opacity: 1; font-size: 27px; color: #fff; width:30px; height:30px;} #search .close:after,#search .close:before{ content:""; position:absolute; width:2px; height:32px; background-color:#262423; right:20px; top:0px;} #search .close:after{ -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg);} #search .close:before{ -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari */ transform: rotate(-45deg);} #search .close:hover:after ,#search .close:hover:before{ cursor: pointer;} @media only screen and ( max-width:768px ){ #search form{ width:90%; margin-left:5%; font-size:26px;} #search input[type="search"] {padding: 0px 0px 0px 30px;} } @media only screen and ( max-width:400px ){ #search form{ font-size:16px;} #search input[type="search"] { padding: 0px 0px 0px 10px;} } /*====================================== 59. animated play btn ======================================*/ /* triangle */ /* pulse wave */ @-webkit-keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } @keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } /*================inner pages css=======*/ /*------------------------------------- 7. extra cell position -------------------------------------*/ /*=============contact Popup =================*/ .contact-slide-hide { position:fixed; right:-100%; top:0px; height:100%; width:100%; background:#fff; color:#262423; z-index:12; overflow-x: hidden; border-left:1px solid #ddd; } .contact-nav{ display: table; width: 100%; height: 100%; max-width: 800px; margin: 0px auto; } .contact-nav .contact-nav-form{ padding-top:60px; display:table-cell; vertical-align:middle; } .contact-nav .contact_close{ position: absolute; right: 20px; top: 20px; width: 100%; border: none; text-align: right; font-size: 36px; } .contact-nav-form .form-control { padding-left: 30px; } .contact-nav-form .wt-inputicon-box { position:relative; } .contact-nav-form .fs-input-icon { position: absolute; left: 0; top: 0; width: 30px; height: 40px; z-index: 5; line-height: 40px; text-align: left; font-size: 16px; } .contact-info ul{list-style:none;} .contact-info ul li{float:left;width:33.33%;} @media only screen and (max-width:800px){ .contact-info ul li{float:none;width:100%;} } @media only screen and (max-width:540px){ .is-fixed .navbar-toggle{ margin-bottom:0px; } .contact-slide-hide { right:-100%; width:100%; } } /*================ Social css=======*/ .social_hide { position:fixed; height:100%; width:70px; background:#fff; color:#262423; z-index:11; top:0px; right:-70px; } /*====revolution slider styles=======*/ .rev-slider-style-1{ padding:100px 80px; border:10px solid #262423; z-index:20; } .rev-slider-style-2{ border-left:10px solid #262423; padding: 10px 10px 10px 30px; } @media screen and (max-width: 380px) { .rev-slider-style-1{ padding:60px 80px !important; } } /*====our ability counter=======*/ /*=========== Flat Icons ============*/ /*=========== bg-change-section ============*/ .bg-changer { position: absolute; left:0px; top:0px; width: 100%; height: 100%; overflow: hidden; z-index:0; } .section-bg { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-size: cover; background-position: center; z-index:-1; } .bg-changer .section-bg:first-child{ opacity: 1; } .bg-changer .section-bg{ opacity: 0; will-change: opacity, transform; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; -o-transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; } .bg-changer .section-bg.active{ opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .bgcall-block{ cursor:pointer; } /*====================================== Clients logo grid ======================================*/ /* 17.2 select box */ .dropdown-menu { font-size:13px; } /*check in check out div*/ .booking-bar{ margin-top: -87px; margin-bottom: 60px; } .booking-bar-inner{ display:table; width:100%; padding:20px; -webkit-box-shadow: 0 20px 30px 0 rgba(0,0,0,0.2); box-shadow: 0 20px 30px 0 rgba(0,0,0,0.2); } .booking-form{ display:table-cell; vertical-align:middle; } .booking-form ul{ list-style:none; display:table; width: calc(100% + 20px); margin:0px -10px; } .booking-form ul li{ display:table-cell; vertical-align:bottom; padding:0px 10px; } .booking-form ul li.booking-form-btn-block{width:1%;} .booking-form ul li .form-control{ border-color:#fff; } .booking-fram-name{ display:table-cell; vertical-align:middle; } .booking-form .form-group{ margin:0px; } .booking-bar .site-button{ display:block; width:100%; margin-top:30px; } @media only screen and (max-width: 991px) { .booking-form{ padding:0px; } .booking-bar{ margin-top:20px; } .booking-form .form-group{ margin-bottom:30px; } .booking-fram-name, .booking-form{ display:block; } .booking-form{margin-top:30px;} .booking-form ul li{ display: block; float: left; } .booking-form ul li.date-cal-block, .booking-form ul li.room-type-block{width:100%;} .booking-form ul li.adult-type-block{width:50%;} .booking-form ul li.booking-form-btn-block{width:100%;} .booking-form ul li.booking-form-btn-block button{width:100%;} .booking-form ul li.booking-form-btn-block button span{width:100%;margin:0px;padding:0px;transform:none;} .booking-form ul li.booking-form-btn-block button em{display:none;} .booking-form ul li.booking-form-btn-block.site-button{margin-top: 0px;} } @media only screen and (max-width: 420px) { .booking-bar{ margin-bottom:5px; } } /*Select bar*/ .select-box { position:relative; } .select-box:after { content:""; position:absolute; right:13px; top:18px; width: 0; height: 0; border-left:5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #999; } .select-box select { border:1px solid #ddd; padding:8px 10px; width:100%; height:40px; -webkit-appearance: none; -moz-appearance: none; appearance:none; } /*========== Hover box effect =============*/ .hover-box-effect{ -webkit-transition: all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; transition:all .5s ease-in-out; } .hover-box-effect:hover{ background-color:#c19b76; color:#fff; background-image:url(../../images/background/bg-5.png); background-repeat:repeat; } .hover-box-effect:hover .wt-tilte{ color:#fff; } .hover-box-effect:hover p{ color:#fff; } /*========== Icon Verticle Animation =============*/ .v-icon { display:block; cursor: pointer; text-align: center; position: relative; z-index: 1; overflow: hidden; } .v-icon:before { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; } /* Effect 5 */ .v-icon-effect:hover .v-icon:before { -webkit-animation: toTopFromBottom 0.3s forwards; -moz-animation: toTopFromBottom 0.3s forwards; animation: toTopFromBottom 0.3s forwards; } @-webkit-keyframes toTopFromBottom { 49% { -webkit-transform: translateY(-100%); } 50% { opacity: 0; -webkit-transform: translateY(100%); } 51% { opacity: 1; } } @-moz-keyframes toTopFromBottom { 49% { -moz-transform: translateY(-100%); } 50% { opacity: 0; -moz-transform: translateY(100%); } 51% { opacity: 1; } } @keyframes toTopFromBottom { 49% { transform: translateY(-100%); } 50% { opacity: 0; transform: translateY(100%); } 51% { opacity: 1; } } /*====rev-slider====*/ .tp-thumbs-inner-wrapper .tp-thumb.selected:after{ content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; border:5px solid #c19b76; } /*====home about section====*/ .home-about-block-inner{ padding:20px 80px 20px 30px; position:relative; } .home-about-block-inner:after{ position:absolute; content:""; right:0px; top:0px; width:50%; height:100%; background-color:#c19b76; } .home-about-block-inner:before{ position: absolute; content: ""; right: 25%; top: 35px; width: 25%; height: auto; border: 5px solid #fff; border-left:0px; z-index: 1; bottom: 35px; border-left: 0px } .home-about-slider .owl-dots{ counter-reset:owl-dot; position:absolute; right:-40px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); } .home-about-slider .owl-dots .owl-dot{ position: relative; list-style: none; display: block; height: 30px; line-height: 30px; text-align: center; } .home-about-slider .owl-dots .owl-dot:before { content: '•'; counter-increment:owl-dot; position:absolute; color:#fff; font-size:20px; font-family: 'DM Serif Text', serif; } .home-about-slider .owl-dots .owl-dot span{ background: none; border: none; margin: 0px; } .home-about-slider .owl-dots .owl-dot.active span{ background:none; position:relative; } .home-about-slider .owl-dots .owl-dot span:after{ position: absolute; content: ""; background-color: #262423; width: 0%; height: 2px; left:30px; top: 14px; -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; } .home-about-slider .owl-dots .owl-dot.active:before{ color:#262423; } .home-about-slider .owl-dots .owl-dot:hover span{ background:none; } .home-about-slider .owl-dots .owl-dot:hover:before{ color:#262423; } /*Simple Icon*/ /*social-tooltip*/ /*room-rent-section*/ /*amenities-list*/ /*review overview*/