File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/hotelbluestarsehore.com/css/style.css
Back
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Marcellus&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap'); /*====================================== 1. GENERAL ======================================*/ @media (min-width: 1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1170px; } } body { background-color: #fff; font-family: "Jost", sans-serif; font-size: 16px; font-weight: 400; color: #323232; 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: #2f544c; } p a { color: #333333; } img { border-style: none; height: auto; max-width: 100%; vertical-align: middle; } hr { clear: both; } section, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, summary { display: block; } address { font-style: italic; } table { background-color: transparent; width: 100%; } table thead th { color: #fff; padding: 12px 8px !important; background-color: #2f544c; } table td { padding: 15px 10px !important; } @media only screen and (max-width: 360px) { table td { word-break: break-all; } } p, address, pre, hr, ul, ol, dl, dd, table { margin-bottom: 24px; } .overflow-hide { overflow: hidden; } .overflow-auto { overflow: auto; } .clear { clear: both; } .pull-none { float: none; } ::selection { background: #484848; color: #fff; } ::-moz-selection { background: #484848; color: #fff; } ::-webkit-selection { background: #484848; color: #fff; } @media only screen and (max-width: 600px) { .col-xs-100pc { width: 100%; } } /*====================================== 2. HEADING & TITLE ======================================*/ h1, h2, h3, h4, h5, h6 { margin-bottom: 24px; font-family: "Cinzel", serif; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #262423; font-family: "Cinzel", serif; text-decoration: none; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #2f544c; } h1 { font-weight: normal; font-size: 46px; line-height: 52px; color: #262423;font-weight:500; } h2 { font-weight: normal; font-size: 45px; line-height: 46px; color: #262423; font-weight:500 } h3 { font-weight: normal; font-size: 34px; line-height: 40px; color: #262423; margin-bottom: 20px; font-weight:500 } h4 { font-weight: normal; font-size: 22px; line-height: 26px; color: #262423; margin-bottom: 15px; font-weight:500 } h5 { font-weight: normal; font-size: 16px; line-height: 22px; color: #262423; margin-bottom: 10px; font-weight:500 } h6 { font-weight: normal; font-size: 14px; line-height: 20px; color: #262423; margin-bottom: 10px; font-weight:500 } .display-inline { display: inline; } .display-inline-block { display: inline-block; } .display-block { display: block; } /*====================================== 3. TEXT & PARAGRAPH ======================================*/ p { line-height: 28px; margin-bottom: 10px; } strong { } .head-heading { font-family: "Marcellus", serif; font-weight: 600 !important; font-size: 55px !important; line-height: 50px !important; } /*------------------------------------- 1. text align ------------------------------------ */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } /*------------------------------------- 2. text vertical align ------------------------------------ */ .v-align-t { vertical-align: top; } .v-align-m { vertical-align: middle; } .v-align-b { vertical-align: bottom; } /*------------------------------------- 3. text no line brack ------------------------------------ */ .text-nowrap { white-space: nowrap; } /*------------------------------------- 4. text transform ------------------------------------ */ .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } /*------------------------------------- 5. text size ------------------------------------ */ .font-12 { font-size: 12px; line-height: 18px; } .font-14 { font-size: 14px; line-height: 20px; } .font-16 { font-size: 16px; line-height: 22px; } .font-18 { font-size: 18px; line-height: 24px; } .font-20 { font-size: 20px; line-height: 26px; } .font-22 { font-size: 22px; line-height: 28px; } .font-24 { font-size: 24px; line-height: 30px; } .font-26 { font-size: 26px; line-height: 32px; } .font-28 { font-size: 28px; line-height: 34px; } .font-30 { font-size: 30px; line-height: 36px; } .font-32 { font-size: 32px; line-height: 38px; } .font-34 { font-size: 34px; line-height: 40px; } .font-36 { font-size: 36px; line-height: 42px; } .font-38 { font-size: 38px; line-height: 44px; } .font-40 { font-size: 40px; line-height: 46px; } .font-45 { font-size: 46px; line-height: 52px; } .font-50 { font-size: 50px; line-height: 56px; } .font-60 { font-size: 60px; line-height: 66px; } .font-70 { font-size: 70px; line-height: 76px; } .font-80 { font-size: 80px; line-height: 86px; } .font-90 { font-size: 90px; line-height: 96px; } .font-100 { font-size: 100px; line-height: 106px; } .font-120 { font-size: 120px; line-height: 126px; } .font-140 { font-size: 140px; line-height: 146px; } .font-160 { font-size: 160px; line-height: 166px; } .font-180 { font-size: 180px; line-height: 186px; } /*------------------------------------- 6. text bold ------------------------------------ */ .font-weight-100 { font-weight: 100; } .font-weight-300 { font-weight: 300; } .font-weight-400 { font-weight: 400; } .font-weight-500 { font-weight: 600; } .font-weight-600 { font-weight: 600; } .font-weight-700 { font-weight: 700; } .font-weight-800 { font-weight: 800; } .font-weight-900 { font-weight: 900; } /*------------------------------------- 7. Letter Spacing ------------------------------------ */ .letter-spacing-2 { letter-spacing: 2px; } .letter-spacing-3 { letter-spacing: 3px; } .letter-spacing-4 { letter-spacing: 4px; } .letter-spacing-5 { letter-spacing: 5px; } /*====================================== 4. LISTING STYLES ======================================*/ dl, ul, ol { list-style-position: outside; padding: 0; } ul, ol { margin-bottom: 24px; } ul li, ol li { padding: 0; } dl { margin-left: 0; margin-bottom: 30px; } dl dd { margin-bottom: 10px; } .list-simple li { margin-bottom: 10px; } .list-simple li ul { margin-left: 15px; margin-top: 10px; } .list-simple.list-unstyled li ul { margin-left: 30px; margin-top: 10px; } .list-circle, .list-angle-right, .list-arrow, .list-check, .list-checked, .list-check-circle, .list-chevron-circle, .list-arrow-circle, .list-times-circle { margin: 0 0 20px 0; padding: 0; list-style: none; } .list-circle li, .list-angle-right li, .list-arrow li, .list-check li, .list-checked li, .list-check-circle li, .list-chevron-circle li, .list-arrow-circle li, .list-times-circle li { padding: 5px 5px 5px 20px; position: relative; } .list-circle li:before, .list-angle-right li:before, .list-arrow li:before, .list-check li:before, .list-checked li:before, .list-check-circle li:before, .list-chevron-circle li:before, .list-arrow-circle li:before, .list-times-circle li:before { font-family: "FontAwesome"; position: absolute; left: 0; top: 3px; display: block; font-size: 15px; color: #262423; } .list-circle li:before { top: 6px; font-size: 10px; } .list-circle li:before { content: "\f111"; } .list-angle-right li:before { content: "\f105"; } .list-arrow li:before { content: "\f0da"; } .list-check li:before { content: "\f00c"; } .list-checked li:before { content: "\f046"; } .list-check-circle li:before { content: "\f058"; } .list-chevron-circle li:before { content: "\f138"; } .list-arrow-circle li:before { content: "\f0a9"; } .list-times-circle li:before { content: "\f057"; } /*------------------------------------- 1. listing before icon color css -------------------------------------*/ ul.primary li:before { color: #ffbc13; } ul.secondry li:before { color: #77c04b; } ul.black li:before { color: #262423; } ul.white li:before { color: #fff; } ul.orange li:before { color: #ff6600; } ul.green li:before { color: #00cc00; } ul.red li:before { color: #ff3737; } dl.no-margin, ul.no-margin, ol.no-margin { margin: 0px !important; list-style: none; } /*------------------------------------- 2. listing before numbers -------------------------------------*/ ol.list-num-count { counter-reset: li; padding-left: 0; } ol.list-num-count > li { position: relative; margin: 0 0 6px 30px; padding: 4px 8px; list-style: none; } ol.list-num-count > li:before { content: counter(li, decimal); counter-increment: li; position: absolute; top: 0; left: -28px; width: 28px; height: 28px; padding: 5px; color: #fff; background: #262423; font-weight: bold; text-align: center; font-size: 12px; } ol.list-num-count.lower-alpha > li:before { content: counter(li, lower-alpha); } ol.list-num-count.upper-alpha > li:before { content: counter(li, upper-alpha); } ol.list-num-count.list-outline > li:before { border: 1px solid #262423; background-color: transparent; color: #262423; } ol.list-num-count.list-outline-none > li:before { background-color: transparent; color: #262423; } /*====================================== 5. BOX SPACING (Padding & Margin) ======================================*/ /*------------------------------------- 1.1 padding (around) -------------------------------------*/ .p-a0 { padding: 0; } .p-a5 { padding: 5px; } .p-a10 { padding: 10px; } .p-a15 { padding: 15px; } .p-a20 { padding: 20px; } .p-a25 { padding: 25px; } .p-a30 { padding: 30px; } .p-a40 { padding: 40px; } .p-a50 { padding: 50px; } .p-a60 { padding: 60px; } .p-a70 { padding: 70px; } .p-a80 { padding: 80px; } .p-a90 { padding: 90px; } .p-a100 { padding: 100px; } .p-a110 { padding: 110px; } .p-a120 { padding: 120px; } .p-a130 { padding: 130px; } .p-a140 { padding: 140px; } .p-a150 { padding: 150px; } /*------------------------------------- 1.2 Padding (top) -------------------------------------*/ .p-t0 { padding-top: 0; } .p-t5 { padding-top: 5px; } .p-t10 { padding-top: 10px; } .p-t15 { padding-top: 15px; } .p-t20 { padding-top: 20px; } .p-t25 { padding-top: 25px; } .p-t30 { padding-top: 30px; } .p-t40 { padding-top: 40px; } .p-t50 { padding-top: 50px; } .p-t60 { padding-top: 60px; } .p-t70 { padding-top: 70px; } .p-t80 { padding-top: 80px; } .p-t90 { padding-top: 60px; } .p-t100 { padding-top: 100px; } .p-t110 { padding-top: 110px; } .p-t120 { padding-top: 120px; } .p-t130 { padding-top: 130px; } .p-t140 { padding-top: 140px; } .p-t150 { padding-top: 150px; } /*------------------------------------- 1.3 Padding (bottom) -------------------------------------*/ .p-b0 { padding-bottom: 0; } .p-b5 { padding-bottom: 5px; } .p-b10 { padding-bottom: 10px; } .p-b15 { padding-bottom: 15px; } .p-b20 { padding-bottom: 20px; } .p-b25 { padding-bottom: 25px; } .p-b30 { padding-bottom: 30px; } .p-b40 { padding-bottom: 40px; } .p-b50 { padding-bottom: 50px; } .p-b60 { padding-bottom: 60px; } .p-b70 { padding-bottom: 70px; } .p-b80 { padding-bottom: 80px; } .p-b90 { padding-bottom: 90px; } .p-b100 { padding-bottom: 100px; } .p-b110 { padding-bottom: 110px; } .p-b120 { padding-bottom: 120px; } .p-b130 { padding-bottom: 130px; } .p-b140 { padding-bottom: 140px; } .p-b150 { padding-bottom: 150px; } /*------------------------------------- 1.4 Padding (left) -------------------------------------*/ .p-l0 { padding-left: 0; } .p-l5 { padding-left: 5px; } .p-l10 { padding-left: 10px; } .p-l15 { padding-left: 15px; } .p-l20 { padding-left: 20px; } .p-l25 { padding-left: 25px; } .p-l30 { padding-left: 30px; } .p-l40 { padding-left: 40px; } .p-l50 { padding-left: 50px; } .p-l60 { padding-left: 60px; } .p-l70 { padding-left: 70px; } .p-l80 { padding-left: 80px; } .p-l90 { padding-left: 90px; } .p-l100 { padding-left: 100px; } .p-l110 { padding-left: 110px; } .p-l120 { padding-left: 120px; } .p-l130 { padding-left: 130px; } .p-l140 { padding-left: 140px; } .p-l150 { padding-left: 150px; } /*------------------------------------- 1.5 Padding (right) -------------------------------------*/ .p-r0 { padding-right: 0; } .p-r5 { padding-right: 5px; } .p-r10 { padding-right: 10px; } .p-r15 { padding-right: 15px; } .p-r20 { padding-right: 20px; } .p-r25 { padding-right: 25px; } .p-r30 { padding-right: 30px; } .p-r40 { padding-right: 40px; } .p-r50 { padding-right: 50px; } .p-r60 { padding-right: 60px; } .p-r70 { padding-right: 70px; } .p-r80 { padding-right: 80px; } .p-r90 { padding-right: 90px; } .p-r100 { padding-right: 100px; } .p-r110 { padding-right: 110px; } .p-r120 { padding-right: 120px; } .p-r130 { padding-right: 130px; } .p-r140 { padding-right: 140px; } .p-r150 { padding-right: 150px; } /*------------------------------------- 1.6 Padding (left right) -------------------------------------*/ .p-lr0 { padding-left: 0; padding-right: 0; } .p-lr5 { padding-left: 5px; padding-right: 5px; } .p-lr10 { padding-left: 10px; padding-right: 10px; } .p-lr15 { padding-left: 15px; padding-right: 15px; } .p-lr20 { padding-left: 20px; padding-right: 20px; } .p-lr30 { padding-left: 30px; padding-right: 30px; } .p-lr40 { padding-left: 40px; padding-right: 40px; } .p-lr50 { padding-left: 50px; padding-right: 50px; } .p-lr60 { padding-left: 60px; padding-right: 60px; } .p-lr70 { padding-left: 70px; padding-right: 70px; } .p-lr80 { padding-left: 80px; padding-right: 80px; } .p-lr90 { padding-left: 90px; padding-right: 90px; } .p-lr100 { padding-left: 100px; padding-right: 100px; } .p-lr120 { padding-left: 120px; padding-right: 120px; } .p-lr150 { padding-left: 150px; padding-right: 150px; } /*------------------------------------- 1.7 Padding (top bottom) -------------------------------------*/ .p-tb0 { padding-bottom: 0; padding-top: 0; } .p-tb5 { padding-bottom: 5px; padding-top: 5px; } .p-tb10 { padding-bottom: 10px; padding-top: 10px; } .p-tb15 { padding-bottom: 15px; padding-top: 15px; } .p-tb20 { padding-bottom: 20px; padding-top: 20px; } .p-tb30 { padding-bottom: 30px; padding-top: 30px; } .p-tb40 { padding-bottom: 40px; padding-top: 40px; } .p-tb50 { padding-bottom: 50px; padding-top: 50px; } .p-tb60 { padding-bottom: 60px; padding-top: 60px; } .p-tb70 { padding-bottom: 70px; padding-top: 70px; } .p-tb80 { padding-bottom: 80px; padding-top: 80px; } .p-tb90 { padding-bottom: 90px; padding-top: 90px; } .p-tb100 { padding-bottom: 100px; padding-top: 100px; } .p-tb120 { padding-bottom: 120px; padding-top: 120px; } .p-tb150 { padding-bottom: 150px; padding-top: 150px; } /*------------------------------------- 2.1 margin (around) -------------------------------------*/ .m-a-1 { margin: -1px; } .m-a0 { margin: 0; } .m-a5 { margin: 5px; } .m-a10 { margin: 10px; } .m-a15 { margin: 15px; } .m-a20 { margin: 20px; } .m-a30 { margin: 30px; } .m-a40 { margin: 40px; } .m-a50 { margin: 50px; } .m-a60 { margin: 60px; } .m-a70 { margin: 70px; } .m-a80 { margin: 80px; } .m-a90 { margin: 90px; } .m-a100 { margin: 100px; } .m-a110 { margin: 110px; } .m-a120 { margin: 120px; } .m-a130 { margin: 130px; } .m-a140 { margin: 140px; } .m-a150 { margin: 150px; } /*------------------------------------- 2.2 marging (top) -------------------------------------*/ .m-t0 { margin-top: 0; } .m-t5 { margin-top: 5px; } .m-t10 { margin-top: 10px; } .m-t15 { margin-top: 15px; } .m-t20 { margin-top: 20px; } .m-t30 { margin-top: 30px; } .m-t40 { margin-top: 40px; } .m-t50 { margin-top: 50px; } .m-t60 { margin-top: 60px; } .m-t70 { margin-top: 70px; } .m-t80 { margin-top: 80px; } .m-t90 { margin-top: 90px; } .m-t100 { margin-top: 100px; } .m-t110 { margin-top: 110px; } .m-t120 { margin-top: 120px; } .m-t130 { margin-top: 130px; } .m-t140 { margin-top: 140px; } .m-t150 { margin-top: 150px; } /*------------------------------------- 2.3 marging (bottom) -------------------------------------*/ .m-b0 { margin-bottom: 0; } .m-b5 { margin-bottom: 5px; } .m-b10 { margin-bottom: 10px; } .m-b15 { margin-bottom: 15px; } .m-b20 { margin-bottom: 20px; } .m-b30 { margin-bottom: 30px; } .m-b40 { margin-bottom: 40px; } .m-b50 { margin-bottom: 50px; } .m-b60 { margin-bottom: 60px; } .m-b70 { margin-bottom: 70px; } .m-b80 { margin-bottom: 80px; } .m-b90 { margin-bottom: 90px; } .m-b100 { margin-bottom: 100px; } .m-b110 { margin-bottom: 110px; } .m-b120 { margin-bottom: 120px; } .m-b130 { margin-bottom: 130px; } .m-b140 { margin-bottom: 140px; } .m-b150 { margin-bottom: 150px; } /*------------------------------------- 2.4 marging (left) -------------------------------------*/ .m-l0 { margin-left: 0; } .m-l5 { margin-left: 5px; } .m-l10 { margin-left: 10px; } .m-l15 { margin-left: 15px; } .m-l20 { margin-left: 20px; } .m-l30 { margin-left: 30px; } .m-l40 { margin-left: 40px; } .m-l50 { margin-left: 50px; } .m-l60 { margin-left: 60px; } .m-l70 { margin-left: 70px; } .m-l80 { margin-left: 80px; } .m-l90 { margin-left: 90px; } .m-l100 { margin-left: 100px; } .m-l110 { margin-left: 110px; } .m-l120 { margin-left: 120px; } .m-l130 { margin-left: 130px; } .m-l140 { margin-left: 140px; } .m-l150 { margin-left: 150px; } /*------------------------------------- 2.5 marging (right) -------------------------------------*/ .m-r0 { margin-right: 0; } .m-r5 { margin-right: 5px; } .m-r10 { margin-right: 10px; } .m-r15 { margin-right: 15px; } .m-r20 { margin-right: 20px; } .m-r30 { margin-right: 30px; } .m-r40 { margin-right: 40px; } .m-r50 { margin-right: 50px; } .m-r60 { margin-right: 60px; } .m-r70 { margin-right: 70px; } .m-r80 { margin-right: 80px; } .m-r90 { margin-right: 90px; } .m-r100 { margin-right: 100px; } .m-r110 { margin-right: 110px; } .m-r120 { margin-right: 120px; } .m-r130 { margin-right: 130px; } .m-r140 { margin-right: 140px; } .m-r150 { margin-right: 150px; } /*------------------------------------- 2.6 marging (left right) -------------------------------------*/ .m-lr0 { margin-left: 0; margin-right: 0; } .m-lr5 { margin-left: 5px; margin-right: 5px; } .m-lr10 { margin-left: 10px; margin-right: 10px; } .m-lr15 { margin-left: 15px; margin-right: 15px; } .m-lr20 { margin-left: 20px; margin-right: 20px; } .m-lr30 { margin-left: 30px; margin-right: 30px; } .m-lr40 { margin-left: 40px; margin-right: 40px; } .m-lr50 { margin-left: 50px; margin-right: 50px; } .m-lr60 { margin-left: 60px; margin-right: 60px; } .m-lr70 { margin-left: 70px; margin-right: 70px; } .m-lr80 { margin-left: 80px; margin-right: 80px; } .m-lr90 { margin-left: 90px; margin-right: 90px; } .m-lr100 { margin-left: 100px; margin-right: 100px; } .m-lr120 { margin-left: 120px; margin-right: 120px; } .m-lr150 { margin-left: 150px; margin-right: 150px; } /*------------------------------------- 2.7 marging (top bottom) -------------------------------------*/ .m-tb0 { margin-bottom: 0; margin-top: 0; } .m-tb5 { margin-bottom: 5px; margin-top: 5px; } .m-tb10 { margin-bottom: 10px; margin-top: 10px; } .m-tb15 { margin-bottom: 15px; margin-top: 15px; } .m-tb20 { margin-bottom: 20px; margin-top: 20px; } .m-tb30 { margin-bottom: 30px; margin-top: 30px; } .m-tb40 { margin-bottom: 40px; margin-top: 40px; } .m-tb50 { margin-bottom: 50px; margin-top: 50px; } .m-tb60 { margin-bottom: 60px; margin-top: 60px; } .m-tb70 { margin-bottom: 70px; margin-top: 70px; } .m-tb80 { margin-bottom: 80px; margin-top: 80px; } .m-tb90 { margin-bottom: 90px; margin-top: 90px; } .m-tb100 { margin-bottom: 100px; margin-top: 100px; } .m-tb120 { margin-bottom: 120px; margin-top: 120px; } .m-tb150 { margin-bottom: 150px; margin-top: 150px; } /*------------------------------------- 2.8 colum gap less -------------------------------------*/ .no-col-gap [class*="col-xs-"], .no-col-gap [class*="col-sm-"], .no-col-gap [class*="col-md-"], .no-col-gap [class*="col-lg-"] { padding-left: 0; padding-right: 0; } /*====================================== 6. POSITIONS ( absolute , relative , statice & z-index) ======================================*/ /*------------------------------------- 1. position -------------------------------------*/ /*1.1 relative*/ .relative { position: relative; } /*1.2 absolute*/ .absolute { position: absolute; } /*1.3 static*/ .static { position: static; } /*------------------------------------- 2. z-index -------------------------------------*/ .z-index1 { z-index: 1; } .z-index2 { z-index: 2; } .z-index3 { z-index: 3; } .z-index4 { z-index: 4; } .z-index5 { z-index: 5; } .z-index6 { z-index: 6; } .z-index7 { z-index: 7; } .z-index8 { z-index: 8; } .z-index9 { z-index: 9; } .z-index10 { z-index: 10; } .z-index100 { z-index: 100; } .z-index999 { z-index: 999; } /*====================================== 7. COLOR ======================================*/ /*------------------------------------- 1. text -------------------------------------*/ .text-white { color: #fff; } .site-text-primary { color: #fff; } .text-secondry { color: #c19b76; } .text-black { color: #262423; } .text-gray { color: #f5f6f6; } .text-gray-dark { color: #d3d3d3; } .text-red { color: #99090a; } .text-green { color: #557131; } .text-yellow { color: #d5dd02; } .text-light-blue { color: #004f83; } .text-black p { color: #323232; } /*------------------------------------- 2. background color -------------------------------------*/ .bg-transparent { background-color: transparent; } .site-bg-primary { background-color: #2f544c; } .bg-secondry { background-color: #efefef; } .bg-white { background-color: #fff; } .bg-black { background-color: #000; } .bg-black-light { background-color: #212121; } .bg-gray { background-color: #d3d3d3;; } .bg-gray-light { background-color: #f1f1f1; } .bg-gray-dark { background-color: #d3d3d3; } .bg-red { background-color: #fb5455; } .bg-green { background-color: #a5de5c; } .bg-yellow { background-color: #fff000; } .bg-dark-blue { background-color: #161b23; } .bg-light-blue { background-color: #3097db; } /*------------------------------------- 3. background image -------------------------------------*/ .bg-parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } @media only screen and (max-width: 768px) { .bg-parallax { background-attachment: fixed !important; background-position: center !important; background-repeat: no-repeat; background-size: cover; } } /*====================================== 8. OVERLAY ( transparient box style ) ======================================*/ .overlay-wraper { position: relative; } .overlay-main { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5; } .opacity-01 { opacity: 0.1; } .opacity-02 { opacity: 0.2; } .opacity-03 { opacity: 0.3; } .opacity-04 { opacity: 0.4; } .opacity-05 { opacity: 0.5; } .opacity-06 { opacity: 1.6; } .opacity-07 { opacity: 0.7; } .opacity-08 { opacity: 0.8; } .opacity-09 { opacity: 0.9; } .overlay-light .overlay-main { opacity: 0.3; } .overlay-dark .overlay-main { opacity: 0.9; } .overlay-wraper > .container, .overlay-wraper > .container-fluid, .overlay-wraper > .wt-icon-box-wraper, .overlay-wraper > .wt-left-part, .overlay-wraper > .wt-right-part { position: relative; z-index: 1; } /*left right part css*/ .wt-left-part, .wt-right-part { width: 555px; } .wt-left-part { float: right; } @media only screen and (max-width: 1200px) { .wt-left-part, .wt-right-part { width: 100%; } .wt-left-part { clear: both; float: none; padding-left: 30px; } .wt-right-part { padding-right: 30px; } } @media only screen and (max-width: 991px) { .wt-left-part { padding-left: 0px; } .wt-right-part { padding-right: 0px; } } /*use for box*/ .overlay-bx { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; text-align: center; z-index: 1; opacity: 0; visibility: hidden; } .overlay-icon { list-style: none; position: absolute; left: 50%; top: 50%; width: 100%; z-index: 1 !important; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); } .overlay-icon a { display: inline-block; padding: 0; margin: 0 2px; } .overlay-icon .wt-icon-box-xs { line-height: 40px; } .overlay-icon a:hover { color: #fff; } .overlay-bx:hover a > i, .wt-thum-bx:hover .overlay-bx a > i, .wt-box:hover .overlay-bx a > i { opacity: 1; visibility: visible; -webkit-transition: all 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; } .overlay-bx:hover, .wt-thum-bx:hover .overlay-bx, .wt-box:hover .overlay-bx, .ow-img:hover .overlay-bx, .ow-portfolio-img:hover .overlay-bx { opacity: 1; visibility: visible; } /*====================================== 9. BOXES CSS ======================================*/ .rounded-bx, .wt-box, .wt-icon-box, .wt-icon-box-small, .wt-thum-bx, .wt-post-thum { position: relative; } /*------------------------------------- 1. box content -------------------------------------*/ .wt-box { position: relative; } .wt-box.no-margin { margin-bottom: 0; } /*------------------------------------- 2. For icons with box -------------------------------------*/ .wt-icon-box-xld, .wt-icon-box-xl, .wt-icon-box-lg, .wt-icon-box-md, .wt-icon-box-sm, .wt-icon-box-xs { display: inline-block; text-align: center; } .wt-icon-box-xld { width: 180px; height: 180px; } .wt-icon-box-xl { width: 150px; height: 150px; } .wt-icon-box-lg { width: 120px; height: 120px; } .wt-icon-box-md { width: 100px; height: 100px; } .wt-icon-box-sm { width: 80px; height: 80px; } .wt-icon-box-xs { width: 40px; height: 40px; } .wt-icon-box-xld.radius, .wt-icon-box-xl.radius, .wt-icon-box-lg.radius, .wt-icon-box-md.radius, .wt-icon-box-sm.radius, .wt-icon-box-xs.radius { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .wt-icon-box-xld i, .wt-icon-box-xl i, .wt-icon-box-lg i, .wt-icon-box-md i, .wt-icon-box-sm i, .wt-icon-box-xs i { vertical-align: middle; } .wt-icon-box-xld i { font-size: 100px; } .wt-icon-box-xl i { font-size: 80px; } .wt-icon-box-lg i { font-size: 60px; } .wt-icon-box-md i { font-size: 45px; } .wt-icon-box-sm i { font-size: 30px; } .wt-icon-box-xs i { font-size: 20px; } .wt-icon-box-xld img, .wt-icon-box-xl img, .wt-icon-box-lg img, .wt-icon-box-md img, .wt-icon-box-sm img, .wt-icon-box-xs img { vertical-align: middle; max-width: 100%; width: auto; } .wt-icon-box-xld img { height: 90px; } .wt-icon-box-xl img { height: 80px; } .wt-icon-box-lg img { height: 55px; } .wt-icon-box-md img { height: 40px; } .wt-icon-box-sm img { height: 30px; } .wt-icon-box-xs img { height: 20px; } /*------------------------------------- 3. Border -------------------------------------*/ .bdr-white { border-color: #ffffff; } .bdr-black { border-color: #262423000; } .bdr-primary { border-color: #ffbc13; } .bdr-gray { border-color: #dddddd; } .bdr-gray-light { border-color: #ddd; } .bdr-gray-dark { border-color: #333333; } .bdr-solid { border-style: solid; } .bdr-dot { border-style: dotted; } .bdr-dash { border-style: dashed; } .bdr-1 { border-width: 1px; } .bdr-2 { border-width: 2px; } .bdr-3 { border-width: 3px; } .bdr-4 { border-width: 4px; } .bdr-5 { border-width: 5px; } .bdr-l-1 { border-left: 1px; } .bdr-r-1 { border-right: 1px; } .bdr-t-1 { border-top: 1px; } .bdr-b-1 { border-bottom: 1px; } .bdr-l-2 { border-left: 2px; } .bdr-r-2 { border-right: 2px; } .bdr-t-2 { border-top: 2px; } .bdr-b-2 { border-bottom: 2px; } .bdr-l-3 { border-left: 3px; } .bdr-r-3 { border-right: 3px; } .bdr-t-3 { border-top: 3px; } .bdr-b-3 { border-bottom: 3px; } .bdr-l-4 { border-left: 4px; } .bdr-r-4 { border-right: 4px; } .bdr-t-4 { border-top: 4px; } .bdr-b-4 { border-bottom: 4px; } .bdr-l-5 { border-left: 5px; } .bdr-r-5 { border-right: 5px; } .bdr-t-5 { border-top: 5px; } .bdr-b-5 { border-bottom: 4px; } /*------------------------------------- 4. For only icons -------------------------------------*/ .icon-xld, .icon-xl, .icon-lg, .icon-md, .icon-sm, .icon-xs { display: inline-block; text-align: center; } .icon-xld i, .icon-xl i, .icon-lg i, .icon-md i, .icon-sm i, .icon-xs i { vertical-align: middle; } .icon-xld { width: 120px; } .icon-xld i { font-size: 100px; } .icon-xl { width: 100px; } .icon-xl i { font-size: 80px; } .icon-lg { width: 80px; } .icon-lg i { font-size: 60px; } .icon-md { width: 60px; } .icon-md i { font-size: 45px; } .icon-sm { width: 40px; } .icon-sm i { font-size: 30px; } .icon-xs { width: 30px; } .icon-xs i { font-size: 20px; } .icon-xld img, .icon-xl img, .icon-lg img, .icon-md img, .icon-sm img, .icon-xs img { vertical-align: middle; max-width: 100%; width: auto; } .icon-xld img { height: 90px; } .icon-xl img { height: 80px; } .icon-lg img { height: 70px; } .icon-md img { height: 64px; } .icon-sm img { height: 30px; } .icon-xs img { height: 20px; } /*------------------------------------- 5. place icon with box -------------------------------------*/ .about-types .wt-icon-box-wraper { border-width: 0px 0px 0px 3px; } .wt-icon-box-wraper { position: relative; } .wt-icon-box-wraper .wt-tilte { margin-top: 0; margin-bottom: 5px; } .wt-icon-box-wraper .after-titile-line { margin-bottom: 10px; } .wt-icon-box-wraper p:last-child { margin: 0px; } .icon-content { overflow: hidden; } .wt-icon-box-xld, .wt-icon-box-xl, .wt-icon-box-lg, .wt-icon-box-md, .wt-icon-box-sm, .wt-icon-box-xs { display: table; } .wt-icon-box-xld .icon-cell, .wt-icon-box-xl .icon-cell, .wt-icon-box-lg .icon-cell, .wt-icon-box-md .icon-cell, .wt-icon-box-sm .icon-cell, .wt-icon-box-xs .icon-cell { display: table-cell; vertical-align: middle; } /*------------------------------------- 6. icon box left align -------------------------------------*/ .wt-icon-box-wraper.left .wt-icon-box-xld, .wt-icon-box-wraper.left .wt-icon-box-xl, .wt-icon-box-wraper.left .wt-icon-box-lg, .wt-icon-box-wraper.left .wt-icon-box-md, .wt-icon-box-wraper.left .wt-icon-box-sm, .wt-icon-box-wraper.left .wt-icon-box-xs { float: left; margin-right: 20px; } .wt-icon-box-wraper.left .icon-xld, .wt-icon-box-wraper.left .icon-xl, .wt-icon-box-wraper.left .icon-lg, .wt-icon-box-wraper.left .icon-md, .wt-icon-box-wraper.left .icon-sm, .wt-icon-box-wraper.left .icon-xs { float: left; margin-right: 10px; } /*------------------------------------- 7. icon box right align -------------------------------------*/ .wt-icon-box-wraper.right { text-align: right; } .wt-icon-box-wraper.right .wt-icon-box-xld, .wt-icon-box-wraper.right .wt-icon-box-xl, .wt-icon-box-wraper.right .wt-icon-box-lg, .wt-icon-box-wraper.right .wt-icon-box-md, .wt-icon-box-wraper.right .wt-icon-box-sm, .wt-icon-box-wraper.right .wt-icon-box-xs { float: right; display: table; margin-left: 20px; } .wt-icon-box-wraper.right .icon-xld, .wt-icon-box-wraper.right .icon-xl, .wt-icon-box-wraper.right .icon-lg, .wt-icon-box-wraper.right .icon-md, .wt-icon-box-wraper.right .icon-sm, .wt-icon-box-wraper.right .icon-xs { float: right; margin-left: 10px; } /*------------------------------------- 8. icon box center align -------------------------------------*/ .wt-icon-box-wraper.center { text-align: center; } .wt-icon-box-wraper.center .wt-icon-box-xld, .wt-icon-box-wraper.center .wt-icon-box-xl, .wt-icon-box-wraper.center .wt-icon-box-lg, .wt-icon-box-wraper.center .wt-icon-box-md, .wt-icon-box-wraper.center .wt-icon-box-sm, .wt-icon-box-wraper.center .wt-icon-box-xs { margin-left: auto; margin-right: auto; } .wt-icon-box-wraper.bx-style-1, .wt-icon-box-wraper.bx-style-2 { border-width: 1px; border-style: solid; border-color: #ddd; } .wt-icon-box-wraper.bx-style-2.center [class*="wt-icon-box-"], .wt-icon-box-wraper.bx-style-2.left [class*="wt-icon-box-"], .wt-icon-box-wraper.bx-style-2.right [class*="wt-icon-box-"] { position: absolute; } .wt-icon-box-wraper.bx-style-2.center [class*="wt-icon-box-"] { position: absolute; top: 0; left: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .wt-icon-box-wraper.bx-style-2.center .wt-icon-box-xl { margin-left: -75px; } .wt-icon-box-wraper.bx-style-2.center .wt-icon-box-lg { margin-left: -60px; } .wt-icon-box-wraper.bx-style-2.center .wt-icon-box-md { margin-left: -50px; } .wt-icon-box-wraper.bx-style-2.center .wt-icon-box-sm { margin-left: -40px; } .wt-icon-box-wraper.bx-style-2.center .wt-icon-box-xs { margin-left: -20px; } .wt-icon-box-wraper.bx-style-2.left [class*="wt-icon-box-"] { position: absolute; top: auto; left: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .wt-icon-box-wraper.bx-style-2.right [class*="wt-icon-box-"] { position: absolute; top: auto; right: 0; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } /*------------------------------------- 9. media with content box css -------------------------------------*/ .wt-box, .wt-info, .wt-tilte, .wt-tilte-inner { position: relative; } .wt-tilte-inner { display: inline-block; } .wt-tilte-inner.skew-title:after { content: ""; position: absolute; right: -15px; top: 0; width: 50px; height: 100%; z-index: -1; -moz-transform: skewX(20deg); -webkit-transform: skewX(20deg); -o-transform: skewX(20deg); -ms-transform: skewX(20deg); transform: skewX(20deg); } .wt-box[class*="border-"], .wt-info[class*="border-"], .wt-icon-box-wraper[class*="border-"] { border-color: #eee; } .wt-info.border-1, .wt-info.border-2, .wt-info.border-3, .wt-info.border-4, .wt-info.border-5 { border-top: none; } /*------------------------------------- 10. for images -------------------------------------*/ .wt-thum-bx, .wt-post-thum { background-color: #262423; } .wt-thum-bx img, .wt-post-thum img { width: 100%; height: auto; } /*====================================== 10. IMAGES OVERLAY EFFECTS (overly animation on images) ======================================*/ .wt-img-overlay1, .wt-img-overlay2 { position: relative; } .wt-img-overlay1:before, .wt-img-overlay1:after, .wt-img-overlay2:before, .wt-img-overlay2:after { content: ""; background: #262423; position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0.4; z-index: 0; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .gradi-black:before, .gradi-black:after, .gradi-white:before, .gradi-white:after { content: ""; background: #262423; position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0.4; z-index: 1; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } /*------------------------------------- 1. effect 1 -------------------------------------*/ .wt-img-overlay1:before { width: 100%; height: 100%; opacity: 0; } .wt-img-overlay1:hover:before, .wt-box:hover .wt-img-overlay1:before { opacity: 0.5; } /*------------------------------------- 2. effect 2 -------------------------------------*/ .wt-img-overlay2:before { width: 100%; height: 100%; opacity: 0; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26242300000', endColorstr='#a6000000',GradientType=0 );*/ /* IE6-9 */ } .wt-img-overlay2:hover:before, .wt-box:hover .wt-img-overlay2:before { opacity: 0.9; } /*------------------------------------- 2. Gradient-black -------------------------------------*/ .gradi-black:before { width: 100%; height: 100%; opacity: 1; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26242300000', endColorstr='#262423000',GradientType=0 ); /* IE6-9 */ } /*------------------------------------- 3. Gradient-white -------------------------------------*/ .gradi-white:before { width: 100%; height: 100%; opacity: 1; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.9) 90%, rgba(255, 255, 255, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.9) 90%, rgba(255, 255, 255, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.9) 90%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26242300000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } /*====================================== 11. shortcodeS ======================================*/ /*------------------------------------- 1. Buttons --------------------------------------- */ /* 1.1 theme default button */ .btn { padding-top: 9px; padding-bottom: 9px; } .site-button, .site-button-secondry { padding: 14px 20px !important; display: inline-block; font-size: 14px; outline: none; cursor: pointer; outline: none; border-width: 0; border-style: solid; border-color: transparent; line-height: 20px; margin-left: -1px; text-decoration: none !important; } .site-button { background-color: #2f544c; color: #262423; } .site-button:active, .site-button:hover, .site-button:focus, .active > .site-button { background-color: #2f544c; color: #262423; } .site-button:hover { background-color: #262423; color: #fff; } .mfp-video.video-play-btn { position: absolute; top: 50%; left: 50%; width: 60px; height: 40px; line-height: 40px; text-align: center; margin: -25px; color: #fff; display: block; z-index: 10; font-size: 14px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .mfp-video.video-play-btn:hover { background-color: #262423; color: #fff; border: 1px solid transparent; } .mfp-video.video-play-btn i { margin-right: -5px; } /* 1.2 button text uppercase */ .site-button.text-uppercase { text-transform: uppercase; } /* 1.3 button size */ .button-sm { padding: 5px 10px; font-size: 12px; } .button-lg { padding: 10px 20px; font-size: 16px; } .button-xl { padding: 30px 50px; font-size: 24px; } /* 1.4 button rounded */ .radius-no { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .radius-sm { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .radius-xl { border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } .radius-bx { border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; } /* 1.6 white */ .site-button.white { background-color: #fff; color: #777; } .site-button.white:hover, .site-button.white:active, .site-button.white:focus { background-color: #f4f4f4; color: #555; } /* 1.7 black */ .site-button.black { background-color: #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 */ .site-button.graphical { color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 3px -1px rgba(45, 60, 72, 0.5); -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 3px -1px rgba(45, 60, 72, 0.5); -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 3px -1px rgba(45, 60, 72, 0.5); border: 1px solid rgba(0, 0, 0, 0.15); } .site-button.graphical:active { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25) inset; -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25) inset; } /* 1.19 Outline */ .site-button.outline { color: #888; background: none; border-width: 2px; border-style: solid; border-color: #eee; } /* 1.20 Outline white */ .site-button.outline.white { color: #e7e7e7; border-color: #e7e7e7; } .site-button.outline.white:hover { color: #666666; } /* 1.21 Outline black */ .site-button.outline.black { color: #171717; border-color: #171717; } /* 1.22 Outline gray */ .site-button.outline.gray { color: #666666; border-color: #666666; } /* 1.23 Outline pink */ .site-button.outline.pink { color: #e63f75; border-color: #e63f75; } /* 1.24 Outline blue */ .site-button.outline.blue { color: #42b8d4; border-color: #42b8d4; } /* 1.25 Outline green */ .site-button.outline.green { color: #35b494; border-color: #35b494; } /* 1.26 Outline orange */ .site-button.outline.orange { color: #e56713; border-color: #e56713; } /* 1.27 Outline red */ .site-button.outline.red { color: #d93223; border-color: #d93223; } /* 1.28 Outline brown */ .site-button.outline.brown { color: #69441f; border-color: #69441f; } /* 1.29 Outline yellow */ .site-button.outline.yellow { color: #ffbc13; border-color: #ffbc13; } /* 1.30 Outline purple */ .site-button.outline.purple { color: #ae1af7; border-color: #ae1af7; } /* 1.31 Outline hover */ .site-button.outline.black:hover { border-color: rgba(0, 0, 0, 0); color: #fff; } /* 1.32 button text link */ .site-button-link { display: inline-block; } /* 1.33 text link white */ .site-button-link.white { color: #e7e7e7; } .site-button-link.white:hover, .site-button-link.white:active, .site-button-link.white:focus { color: #ccc; } /* 1.34 text link black */ .site-button-link.black { color: #171717; } .site-button-link.black:hover, .site-button-link.black:active, .site-button-link.black:focus { color: #262423; } /* 1.35 text link Gray */ .site-button-link.gray { color: #666666; } .site-button-link.gray:hover, .site-button-link.gray:active, .site-button-link.gray:focus { color: #555555; } /* 1.36 text link pink */ .site-button-link.pink { color: #e63f75; } .site-button-link.pink:hover, .site-button-link.pink:active, .site-button-link.pink:focus { color: #2ca2be; } /* 1.37 text link Blue */ .site-button-link.blue { color: #42b8d4; } .site-button-link.blue:hover, .site-button-link.blue:active, .site-button-link.blue:focus { color: #2ca2be; } /* 1.38 text link Green */ .site-button-link.green { color: #35b494; } .site-button-link.green:hover, .site-button-link.green:active, .site-button-link.green:focus { color: #26a585; } /* 1.39 text link Orange */ .site-button-link.orange { color: #e56713; } .site-button-link.orange:hover, .site-button-link.orange:active, .site-button-link.orange:focus { color: #d55703; } /* 1.40 text link Red */ .site-button-link.red { color: #d93223; } .site-button-link.red:hover, .site-button-link.red:active, .site-button-link.red:focus { color: #c51e0f; } /* 1.41 text link Brown */ .site-button-link.brown { color: #69441f; } .site-button-link.brown:hover, .site-button-link.brown:active, .site-button-link.brown:focus { color: #5f3a15; } /* 1.42 text link Yellow */ .site-button-link.yellow { color: #ecc731; } .site-button-link.yellow:hover, .site-button-link.yellow:active, .site-button-link.yellow:focus { color: #d4af19; } /* 1.43 text link purple */ .site-button-link.purple { color: #ae1af7; } .site-button-link.purple:hover, .site-button-link.purple:active, .site-button-link.purple:focus { color: #9804e1; } /* 1.44 app strore */ .site-button.button-app { text-align: left; padding: 15px 25px; } .site-button.button-app i { display: inline-block; font-size: 45px; float: left; margin-right: 15px; } .site-button.button-app strong { display: block; font-size: 16px; } /* 1.45 filter buttons css */ .masonry-filter { display: table; margin-bottom: 0; } .masonry-filter > li { display: inline-block; margin-right: 30px; position: relative; } .masonry-filter > li a { color: #262423; font-size: 14px; font-weight: 500; } .masonry-filter > li.active a, .masonry-filter > li a:hover, .masonry-filter > li a:active, .masonry-filter > li a:focus { color: #a0a0a0; } @media only screen and (max-width: 600px) { .masonry-filter > li { margin-bottom: 10px; } .masonry-filter > li a { font-size: 14px !important; } } /* 1.45(1) Masonry filter alignment [Left-Right-Center] */ .filter-wrap.right > .masonry-filter { float: right; } @media only screen and (max-width: 991px) { .filter-wrap.right > .masonry-filter { float: none; } } .filter-wrap.center > .masonry-filter { margin-left: auto; margin-right: auto; } /* 1.45(2) Masonry filter link style */ .masonry-filter.link-style > li a { font-size: 15px; } .masonry-filter.link-style > li:after { content: "/"; position: relative; right: -18px; opacity: 0.3; } .masonry-filter.link-style.white > li:after { color: #fff; } .masonry-filter.link-style > li:last-child:after { display: none; } .masonry-filter.link-style.white > li.active a, .masonry-filter.link-style.white > li a:hover, .masonry-filter.link-style.white > li a:active, .masonry-filter.link-style.white > li a:focus { color: #f7c20a; } .masonry-filter.has-bg > li a { color: #fff; } .masonry-filter.link-style.has-bg > li.active a, .masonry-filter.link-style.has-bg > li:hover a, .masonry-filter.link-style.has-bg > li:active a, .masonry-filter.link-style.has-bg > li:focus a { color: #ffbc13; } /* 1.45(3) Masonry filter button style */ .masonry-filter.button-style > li { margin-right: 10px; } @media only screen and (max-width: 767px) { .masonry-filter.button-style > li { margin-bottom: 10px; } } .head-heading { font-family: "Marcellus", serif; font-weight: 600 !important; font-size: 45px !important; line-height: 45px !important; } .masonry-filter.button-style > li a { background-color: #666666; color: #fff; padding: 10px 20px; display: inline-block; } .masonry-filter.button-style > li.active a, .masonry-filter.button-style > li a:hover, .masonry-filter.button-style > li a:active, .masonry-filter.button-style > li a:focus { background-color: #262423; color: #fff; } .masonry-filter.button-style.has-bg > li a { background-color: #fff; color: #666; } .masonry-filter.button-style.has-bg > li.active a, .masonry-filter.button-style.has-bg > li a:hover, .masonry-filter.button-style.has-bg > li a:active, .masonry-filter.button-style.has-bg > li a:focus { background-color: #262423; color: #fff; } /* 1.45(4) Masonry filter button outline style */ .masonry-filter.outline-style > li { margin-right: 10px; } .masonry-filter.outline-style > li a { border-width: 2px; border-style: solid; border-color: #666666; color: #666666; padding: 10px 20px; display: inline-block; } .masonry-filter.outline-style.rounded-corner > li a { border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } .masonry-filter.outline-style > li.active a, .masonry-filter.outline-style > li a:hover, .masonry-filter.outline-style > li a:active, .masonry-filter.outline-style > li a:focus { border-color: #262423; color: #262423; } .masonry-filter.outline-style.has-bg > li a { border-color: #fff; color: #fff; } .masonry-filter.outline-style.has-bg > li.active a, .masonry-filter.outline-style.has-bg > li a:hover, .masonry-filter.outline-style.has-bg > li a:active, .masonry-filter.outline-style.has-bg > li a:focus { border-color: #262423; color: #262423; } @media only screen and (max-width: 767px) { .masonry-item { width: 100%; } } /* 1.45(5) half effect button outline style */ .btn-half { cursor: pointer; background-color: #2f544c; 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: 500; transform: scaleX(0.9); transform-origin: center left; transition: color 0.3s ease; position: relative; z-index: 1; font-size: 12px !important; } .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: #111818; } .btn-half.site-button-secondry span { color: #fff; display: block; padding-left: 0%; padding-right: 25px; text-transform: uppercase; 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: #2f544c; } .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; line-height: 0; margin-bottom: 30px; } /*Separator defualt*/ .wt-separator { display: inline-block; height: 3px; width: 80px; position: relative; } .wt-separator .separator-left, .wt-separator .separator-right { position: absolute; top: 50%; width: 70px; height: 2px; margin-top: -1px; } .wt-separator .separator-left { left: -80px; } .wt-separator .separator-right { right: -80px; } /*Separator liner*/ .wt-separator.style-liner { width: 20px; height: 4px; } /*Separator square*/ .wt-separator.style-square { width: 10px; height: 10px; background-color: transparent; border-width: 3px; border-style: solid; border-color: #2d3239; } .wt-separator.style-square .separator-left, .wt-separator.style-square .separator-right { height: 3px; } .wt-separator.style-square.has-bg { border-color: #fff; } /*Separator icon*/ .wt-separator.style-icon { width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 18px; } /*------------------------------------- 3. Deviders -------------------------------------*/ .wt-divider { height: 1px; position: relative; margin: 30px 0; } .wt-divider.divider-2px { height: 2px; } .wt-divider.divider-3px { height: 3px; } .wt-divider.divider-4px { height: 4px; } .wt-divider i { position: absolute; width: 30px; height: 30px; text-align: center; line-height: 30px; display: block; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .wt-divider.icon-left { margin-left: 40px; } .wt-divider.icon-left i { left: -40px; } .wt-divider.icon-right { margin-right: 40px; } .wt-divider.icon-right i { left: auto; right: -40px; } .wt-divider.icon-center i { left: 50%; margin-left: -5px; } /*------------------------------------- 4. TABS -------------------------------------*/ .wt-tabs:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } @media only screen and (max-width: 767px) { .wt-tabs .nav-tabs > li { float: none; } } .wt-tabs p:last-child { margin-bottom: 0; } /*4.1 tabs style 1 [ default ] */ .wt-tabs .tab-pane { padding: 20px 0; } .wt-tabs .nav-tabs > li > a { color: #262423; font-size: 12px; padding: 15px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid transparent; border: 0px; } .wt-tabs .nav-tabs > li > a.active, .wt-tabs .nav-tabs > li > a.active:focus, .wt-tabs .nav-tabs > li > a.active:hover { background-color: #fff; border-bottom: 1px solid #2f544c; color: #262423; } .wt-tabs .nav > li > a:focus, .wt-tabs .nav > li > a:hover { background-color: transparent; border: 0px; } .wt-tabs .nav li a:hover { border: 1px; } .wt-tabs .nav-tabs > li > a i { margin-right: 5px; } .wt-tabs.tabs-default.has-bg .nav-tabs > li > a { color: #fff; } .wt-tabs.tabs-default.has-bg .nav-tabs > li > a.active, .wt-tabs.tabs-default.has-bg .nav-tabs > li > a.active:focus, .wt-tabs.tabs-default.has-bg .nav-tabs > li > a.active:hover { color: #262423; border-color: #ddd #ddd #fff; } .wt-tabs.tabs-default.has-bg .tab-pane { color: #fff; } /* tabs nav center */ .wt-tabs.nav-center > .nav-tabs { display: table; margin-left: auto; margin-right: auto; } /*4.2 tabs bg [ tabs background ] */ .wt-tabs.bg-tabs .nav-tabs > li > a { background-color: #f0f0f0; border: 0px; margin-right: -1px; border-bottom: 4px solid transparent; border-radius: 0px; } .wt-tabs.bg-tabs .nav-tabs > li > a.active { border-bottom: 0px; background-color: #262423; color: #2f544c; border-bottom: 4px solid #2f544c; } .wt-tabs.bg-tabs.has-bg .tab-pane { color: #fff; } /*4.3 tabs bg [ tabs background ] */ .wt-tabs.vertical.bg-tabs .nav-tabs > li > a { border-bottom: 4px solid transparent; } .wt-tabs.vertical.bg-tabs .nav-tabs > li > a.active { border-bottom: 1px solid transparent; background-color: #262423; color: #2f544c; border-bottom: 4px solid #2f544c; } .wt-tabs.vertical.right.bg-tabs .nav-tabs > li > a { border: 1px solid #ddd; } .wt-tabs.vertical.right.bg-tabs .nav-tabs > li > a.active { border-left: 1px solid transparent; } /*4.4 tabs bg & top border [ tabs background & top border in active ] */ .wt-tabs.border-top .nav-tabs > li > a.active { color: #1a1a1a; } .wt-tabs.border-top .nav-tabs > li > a.active:after { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 3px; background-color: #262423; } .wt-tabs.border-top.vertical .nav-tabs > li > a.active:after { top: 0px; left: -1px; width: 3px; height: 100%; } /*4.4 tabs style 2 [ content with border outer ] */ .wt-tabs.border .tab-pane { padding: 10px; border: 1px solid #ddd; margin-top: -1px; } /*4.5 tabs style 3 [ left-nav ] */ .wt-tabs.vertical .nav-tabs { float: left; width: 170px; border-bottom: none; border-right: 0px; } @media only screen and (max-width: 720px) { .wt-tabs.vertical .nav-tabs { width: 100%; float: none; border-right: 0px; } .wt-tabs.vertical .tab-content { width: 100%; margin-left: 0px !important; } } .wt-tabs.vertical .tab-pane { padding: 10px 0 10px 20px; } .wt-tabs.vertical .nav-tabs li { float: none; margin-right: 0px; width: 100%; } .wt-tabs.vertical .nav-tabs li a { margin-right: 0; border-right: none; -webkit-border-radius: 0px; -moz-border-radius: 0; border-radius: 0px; color: #262423; border-bottom: 1px solid transparent; } .wt-tabs.vertical .nav-tabs li a.active { border-bottom: 1px solid #2f544c; background-color: #fff; } .wt-tabs.vertical .tab-content { border-left: 0px; margin-left: 169px; } /*4.6 tabs style 4 [ left-nav & content with border ] */ .wt-tabs.vertical.border .tab-pane { padding: 20px; margin-left: -1px; } /*4.7 tabs style 5 [ right-nav ] */ .wt-tabs.vertical.right .nav-tabs { border-left: 1px solid #ddd; border-right: none; float: right; } .wt-tabs.vertical.right .nav-tabs li { margin-right: 0; margin-left: -1px; } .wt-tabs.vertical.right .nav-tabs li a { border-right: 1px solid transparent; border-left: none; } .wt-tabs.vertical.right .nav-tabs li a.active { border-right: 1px solid #ddd; border-left: none; } .wt-tabs.vertical.right .tab-content { border-left: none; border-right: 1px solid #ddd; margin-right: 169px; margin-left: 0; } .wt-tabs.vertical.right .tab-pane { padding: 10px 20px 10px 0; } /*4.8 tabs style 6 [ right-nav & content with border ]*/ .wt-tabs.vertical.right.border .tab-pane { padding: 20px; margin-right: -1px; } /*------------------------------------- 5. Accordians -------------------------------------*/ .wt-accordion .wt-panel { background-color: transparent; border: none; margin-bottom: 10px; border-radius: 0; -webkit-border-radius: 0px; -moz-border-radius: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } .acod-head { position: relative; } .acod-title { margin-top: 0; margin-bottom: 0; } .acod-title a { position: relative; z-index: 1; overflow: hidden; } .acod-head .fa { margin-right: 5px; } .acod-head a { display: block; padding: 15px 40px 15px 15px; font-size: 14px; font-weight: 500; } .acod-head a, .acod-head a:hover, .acod-head a:active, .acod-head a:focus { color: #262423; } .acod-body { color: #262423; } /*Accodian open close indicator css*/ .acod-head .indicator { padding: 15px; color: #262423; position: absolute; right: 0; top: 0; } .acod-head .indicator .fa { position: relative; } /*.acod-head .indicator .fa:after, .acod-head .indicator .fa:before{ position:absolute; content:""; right:0px; top:-4px; height:1px; width:13px; background-color:#262423;}*/ .acc-bg-dark .acod-head .indicator .fa:after, .acc-bg-dark .acod-head .indicator .fa:before { color: #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 */ .acc-default .acod-title a { padding: 5px 0; border-bottom: 1px solid #ececec; } .acc-default .acod-head .indicator { padding: 0; } .acc-default.acc-has-bg .acod-head a, .acc-default.acc-has-bg .acod-head a:hover, .acc-default.acc-has-bg .acod-head a:active, .acc-default.acc-has-bg .acod-head a:focus, .acc-default.acc-has-bg .acod-head .indicator, .acc-default.acc-has-bg .acod-body { color: #fff; } /* 2. Accordion outline */ .acc-outline .acod-title a { border: 1px solid #ddd; } .acc-outline.acc-has-bg .acod-head a, .acc-outline.acc-has-bg .acod-head a:hover, .acc-outline.acc-has-bg .acod-head a:active, .acc-outline.acc-has-bg .acod-head a:focus, .acc-outline.acc-has-bg .acod-head .indicator, .acc-outline.acc-has-bg .acod-body { color: #fff; } /* 3. Accordion bg gray */ .acc-bg-gray a { background-color: #f5f5f5; } .acc-bg-gray .acod-head .indicator { color: #fff; background-color: #262423; } .acc-bg-gray.acc-has-bg .acod-body { color: #fff; } /* 4. Accordion bg primary */ .acc-site-bg-primary a { background-color: #262423; } .acc-site-bg-primary .acod-head a, .acc-site-bg-primary .acod-head a:hover, .acc-site-bg-primary .acod-head a:active, .acc-site-bg-primary .acod-head a:focus { color: #fff; } .acc-site-bg-primary .acod-head .indicator { color: #fff; } .acc-site-bg-primary.acc-has-bg .acod-body { color: #fff; } /* 5. Accordion bg dark */ .acc-bg-dark a { background-color: #262423; } .acc-bg-dark .acod-head a, .acc-bg-dark .acod-head a:hover, .acc-bg-dark .acod-head a:active, .acc-bg-dark .acod-head a:focus { color: #fff; } .acc-bg-dark .acod-head .indicator { color: #262423; background-color: #2f544c; } .acc-bg-dark .acod-head .fa { color: #2f544c; } .acc-bg-dark.acc-has-bg .acod-body { color: #fff; } /*------------------------------------- 6. Carousels -------------------------------------*/ /* 6.1 Client carousel 1*/ .ow-client-logo { display: table; width: 100%; } .client-logo { display: table-cell; text-align: center; vertical-align: middle; padding: 10px; } .owl-carousel .ow-client-logo img { max-height: 100%; width: auto; display: inline-block; } .client-logo-media img { max-width: 100% !important; margin: 0px auto !important; width: auto !important; } /*------------------------------------- 7. Testimonials -------------------------------------*/ .testimonial-pic { width: 80px; height: 80px; position: relative; display: inline-block; border: 5px solid #fff; } .testimonial-pic.radius { border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; } .testimonial-pic.radius img { width: 100%; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; } .testimonial-pic.shadow { -webkit-box-shadow: 2px 3px 6px -3px rgba(0, 0, 0, 0.35); -moz-box-shadow: 2px 3px 6px -3px rgba(0, 0, 0, 0.35); box-shadow: 2px 3px 6px -3px rgba(0, 0, 0, 0.35); } .quote-left, .quote-right { position: relative; } .quote-left:before, .quote-right:after { font-family: "FontAwesome"; position: absolute; z-index: 10; top: 15px; } .quote-left:before { content: "\f10d"; left: 0; } .quote-right:after { content: "\f10e"; left: auto; right: 0; } .testimonial-text { padding: 15px; position: relative; } .testimonial-text p:last-child { margin: 0; } .testimonial-detail { padding: 5px; } .testimonial-name, .testimonial-position { display: block; } .testimonial-position { font-style: italic; } .testimonial-text p { margin: 0; } /*7.1 testimonial with background image*/ .testimonial-bg { color: #fff; } /*7.2 testimonial 6*/ .testimonial-6 { margin: 0px 10px; padding: 0px 4px 0px 4px; } .testimonial-6 .testimonial-text { padding: 15px 15px 15px 20px; overflow: hidden; -webkit-box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.1); box-shadow: 3px 3px 5px 0 rgb(0 0 0 / 19%); background: #eeeeee1c; } .testimonial-6 .testimonial-pic-block { float: left; } .testimonial-6 .testimonial-pic { width: 80px; height: 80px; position: relative; padding-right: 5px; border: 0px; } .testimonial-6 .testimonial-pic:after, .testimonial-6 .testimonial-pic:before { content: ""; position: absolute; background-color: #2f544c; } .testimonial-6 .testimonial-pic:after { left: -6px; bottom: -6px; width: 2px; height: 35px; } .testimonial-6 .testimonial-pic:before { left: -6px; bottom: -6px; width: 35px; height: 2px; } .testimonial-6 .testimonial-name, .testimonial-6 .testimonial-position { display: block; } .testimonial-6 .fa-quote-left, .testimonial-grid-6 .fa-quote-left { font-size: 18px; } .testimonial-6 .testimonial-paragraph p { padding: 0px 0px 15px 0px; } .testimonial-6 .testimonial-name { text-transform: capitalize; } .testimonial-6 .testimonial-position { font-style: normal; text-transform: uppercase; font-size: 12px; letter-spacing: 4px; font-family: "Jost", sans-serif; font-weight: 500; } .testimonial-6 .testimonial-position:after { } .testimonial-6 .testimonial-position { display: inline-block; position: relative; } .testimonial-6 .testimonial-position:after { content: ""; position: absolute; width: 30px; height: 1px; right: -40px; top: 10px; background-color: #fff; } .testimonial-6 .testimonial-detail { padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } .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; } .testimonial-detail .star-rating { margin-bottom: 10px; } .testimonial-detail .star-rating span i { color: #ffb606; font-size: 13px; } /*------------------------------------- 8. Pricing table -------------------------------------*/ .pricingtable-inner { text-align: center; } .pricingtable-price { padding: 10px; background-color: #ffbc13; } .pricingtable-bx { font-size: 70px; font-family: Arial; color: #666666; color: #1a1a1a; } .pricingtable-type { font-size: 20px; text-transform: uppercase; font-size: 24px; color: #fff; } .pricingtable-type:before { content: "/"; margin-right: 3px; } .pricingtable-title { background-color: #1a1a1a; padding: 20px; text-transform: uppercase; } .pricingtable-title * { margin: 0; color: #fff; } .pricingtable-features { margin: 0; padding: 0; list-style: none; border: 1px solid #e9e9e9; } .pricingtable-features li { padding: 12px; border-bottom: 1px solid #e9e9e9; } .pricingtable-features li i { margin: 0 3px; } .pricingtable-features li:nth-child(even) { background-color: #f4f7f8; } .pricingtable-features li:last-child { border-bottom: none; } .pricingtable-footer { margin-top: -1px; padding: 20px; background-color: #1a1a1a; } .pricingtable-highlight { margin: -20px 0; -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2); position: relative; z-index: 99; } .pricingtable-highlight .pricingtable-price { padding: 20px 10px; } .pricingtable-highlight .pricingtable-footer { padding: 30px 20px; } .no-col-gap .pricingtable-wrapper { margin-left: -1px; } @media only screen and (max-width: 420px) { .pricingtable-bx { font-size: 40px; } .pricingtable-type { font-size: 18px; } } /*8.2 pricing table style 4*/ .pricing-table-style-4 .pricingtable-inner { position: relative; overflow: hidden; } .pricing-table-style-4 .pricingtable-inner.radius { -webkit-border-radius: 40px 40px 40px 40px; border-radius: 40px 40px 40px 40px; } .pricing-table-style-4 .pricingtable-bx { font-size: 50px; } .pricing-table-style-4 .pricingtable-type { font-size: 14px; font-style: italic; color: #fff; font-family: "Crete Round", serif; text-transform: none; } .pricing-table-style-4 .pricingtable-type:before { content: ""; } .pricing-table-style-4 .pricingtable-inner-overlay { position: relative; z-index: 1; } .pricing-table-style-4 .pricingtable-inner-overlay .overlay-main { z-index: -1; } .pricing-table-style-4 .pricingtable-title { background-color: inherit; color: #fff; padding: 20px 0px 0px 0px; } .pricing-table-style-4 .pricingtable-title * { color: #fff; } .pricing-table-style-4 .pricingtable-bx { color: #fff; } .pricing-table-style-4 .pricingtable-price { padding: 10px 10px; } .pricing-table-style-4 .pricingtable-highlight .pricingtable-price { padding: 20px 10px; } .pricing-table-style-4 .pricingtable-price { background-color: inherit; } .pricing-table-style-4 .pricingtable-price span { display: block; } .pricing-table-style-4 .pricingtable-features li:nth-child(2n) { background-color: inherit; } .pricing-table-style-4 .pricingtable-footer { background-color: inherit; } .pricing-table-style-4 .pricingtable-features { border: none; padding-top: 20px; } .pricing-table-style-4 .pricingtable-features li { border-bottom: 0px; } /*------------------------------------- 9. Alert box -------------------------------------*/ .alert.alert-sm { padding: 5px 15px; font-size: 12px; } .alert.alert-lg { padding: 25px 15px; font-size: 16px; } .alert.alert-xl { padding: 35px 15px; font-size: 18px; } .alert[class*="alert-"] i { margin-right: 8px; } .alert.no-radius { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .alert.no-bg { background-color: transparent; border-width: 2px; } .alert[class*="alert-"] ul { padding-left: 25px; margin-top: 10px; } .alert[class*="alert-"] ul li:before { color: #a94442; } /*------------------------------------- 10. Image effects -------------------------------------*/ .wt-img-effect { position: relative; overflow: hidden; display: block; } .wt-img-effect img { display: block; margin: 0; width: 100%; height: auto; box-shadow: 0 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: all 0.25s; -moz-transition: all 0.25s; -webkit-transition: all 0.25s; -o-transition: all 0.25s; } /* 10.1 image-opacity */ .wt-img-effect.opacity img:hover { opacity: 0.8; -moz-opacity: 0.8; -webkit-opacity: 0.8; } /*10.2 image-zoom */ .wt-img-effect.zoom-slow img { transition: all 10s; -moz-transition: all 10s; -webkit-transition: all 10s; -o-transition: all 10s; } .wt-img-effect.zoom-slow:hover img { -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } /*10.3 image-zoom-slow */ .wt-img-effect.zoom:hover img { -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } /*10.4 image-shrink */ .wt-img-effect.shrink:hover img { transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); } /*10.5 image-side-pan */ .wt-img-effect.side-pan:hover img { margin-left: -9%; transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } /*10.6 image-vertical-pan */ .wt-img-effect.vertical-pan:hover img { margin-top: -10%; transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } /*10.7 image-fade-in */ .wt-img-effect.fade-in { background: #262423; } .wt-img-effect.fade-in img { opacity: 0.65; -moz-opacity: 0.65; -webkit-opacity: 0.65; } .wt-img-effect.fade-in:hover img { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; } /*10.8 image-fade-out */ .wt-img-effect.fade-out { background: #262423; } .wt-img-effect.fade-out:hover img { opacity: 0.7; -moz-opacity: 0.7; -webkit-opacity: 0.7; } /*10.9 image-rotate */ .wt-img-effect.rotate:hover img { -moz-transform: scale(1.5) rotate(-20deg); -webkit-transform: scale(1.5) rotate(-20deg); -o-transform: scale(1.5) rotate(-20deg); -ms-transform: scale(1.5) rotate(-20deg); transform: scale(1.5) rotate(-20deg); } /*10.10 image-sepia */ .wt-img-effect.sepia img { -webkit-filter: sepia(100%); filter: sepia(100%); } .algo-image-hover.sepia:hover img { -webkit-filter: sepia(0); filter: sepia(0); } /*10.11 image-blurr */ .wt-img-effect.blurr img { transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; } .wt-img-effect.blurr:hover img { filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); } /*10.12 image-blurr-invert */ .wt-img-effect.blurr-invert img { transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; } .wt-img-effect.blurr-invert img { filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); } .wt-img-effect.blurr-invert:hover img { filter: blur(0px); -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); } /*10.13 image off color */ .wt-img-effect.off-color img { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); } .wt-img-effect.off-color:hover img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); } /*10.14 image on color */ .wt-img-effect.on-color img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); } .wt-img-effect.on-color:hover img { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); } /*------------------------------------- 11. Modal pop -------------------------------------*/ .modal-xlg { width: 1000px; } .provider_registration .bootstrap-select div.dropdown-menu ul li a { } .provider_registration .bootstrap-select div.dropdown-menu ul li a span.childcat { font-weight: 400; color: #7c7c7c; } @media only screen and (max-width: 1024px) { .modal-xlg { width: auto; margin-left: 15px; margin-right: 15px; } } /*------------------------------------- 12. Social icons -------------------------------------*/ .social-icons { list-style: none; margin-left: -3px; margin-right: -3px; font-size: 12px; margin: 0px; } .social-icons li { display: inline-block; text-align: center; } .social-icons li a { display: block; padding: 3px; } .social-icons.social-md { font-size: 18px; } .social-icons.social-lg li a { font-size: 24px; } .social-icons.has-bg li a:hover { color: #fff; } .social-icons.social-light a { color: #fff; } .social-icons.social-light.has-bg li a:hover { color: #777; } .social-icons.social-dark a { color: #262423000; } .social-icons.social-dark a:hover { color: #fff; } .social-icons.social-dark.has-bg li a:hover { color: #777; } .social-icons.social-square a, .social-icons.social-radius a { width: 24px; height: 24px; line-height: 24px; padding: 0; } .social-icons.social-square.social-md a, .social-icons.social-radius.social-md a { width: 36px; height: 36px; line-height: 36px; padding: 0; } .social-icons.social-square.social-lg a, .social-icons.social-radius.social-lg a { width: 40px; height: 40px; line-height: 40px; padding: 0; } .social-icons.social-square.social-primary a, .social-icons.social-radius.social-primary a { background-color: #262423; color: #fff; } .social-icons.social-square.social-primary a:hover, .social-icons.social-radius.social-primary a:hover { background-color: #1a1a1a; } .social-icons.social-square.social-dark a, .social-icons.social-radius.social-dark a { background-color: #fff; } .social-icons.social-square.social-dark a:hover, .social-icons.social-radius.social-dark a:hover { background-color: #1a1a1a; color: #fff; } .social-icons.social-square.social-dark.has-bg a:hover, .social-icons.social-radius.social-dark.has-bg a:hover { border: 1px solid #777; } .social-icons.social-darkest a { color: #454747; } .social-icons.social-square.social-darkest a:hover, .social-icons.social-radius.social-darkest a:hover { background-color: #262423; color: #fff; } .social-icons.social-radius a { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .social-icons.social-square.social-dark.white-border a, .social-icons.social-radius.social-dark.white-border a { background: none; color: #fff; border: 1px solid rgba(255, 255, 255, 1); } /*12.1 social icon default */ .wt-social-icon { display: inline-block; margin: 0 -3px; padding: 0; } .wt-social-icon li { display: inline-block; padding: 0; font-size: 12px; } .wt-social-icon li a { display: inline-block; width: 24px; height: 24px; padding: 4px; } .wt-social-icon li .fa { vertical-align: middle; } /*12.2 social icon with border */ .wt-social-icon.border li { padding: 0 3px; } .wt-social-icon.border li a { border: 1px solid #efeded; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } /*12.3 social icon dark */ .wt-social-links.dark li { padding: 0 3px; } .wt-social-icon.dark li a { border: 1px solid #777777; color: #777777; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } /*12.4 social share icon style 1 */ .wt-share-icon li { border: none; width: 36px; display: block; float: left; white-space: nowrap; overflow: hidden; margin-right: 0; } .wt-share-icon li a { color: #fff; } .wt-share-icon li i { border-right: none; font-size: 14px; color: #fff; width: 36px; height: 34px; line-height: 34px; padding: 0; text-align: center; } .wt-share-icon li.fb { background: #354d89; } .wt-share-icon li.fb i { background: #3a5799; } .wt-share-icon li.gp { background: #d34b2b; } .wt-share-icon li.gp i { background: #e35736; } .wt-share-icon li.tw { background: #029fdf; } .wt-share-icon li.tw i { background: #00abf0; } .wt-share-icon li.dig { background: #1d61aa; } .wt-share-icon li.dig i { background: #2b6fb8; } .wt-share-icon li.lin { background: #0176be; } .wt-share-icon li.lin i { background: #0082ca; } .wt-share-icon li.pin { background: #ac0104; } .wt-share-icon li.pin i { background: #bd0e15; } .wt-share-icon li:hover { width: 90px; } /*------------------------------------- 13. Breadcrumb -------------------------------------*/ /*13.1 breadcrumb-row-1*/ .wt-breadcrumb { margin: 0; list-style: none; } .wt-breadcrumb li { padding: 0; margin-right: 3px; color: #fff; position: relative; display: inline-block; font-size: 12px; } .wt-breadcrumb li a { color: #fff; } .wt-breadcrumb li a:hover { color: #262423; } .wt-breadcrumb li:last-child { color: #fff; } .wt-breadcrumb li:first-child a i { font-size: 18px; vertical-align: text-top; } .wt-breadcrumb li:last-child:after { display: none; } /*13.2 Breadcrumb-1*/ .breadcrumb-style-2 li:after { content: "\f101"; margin-left: 7px; font-family: "FontAwesome"; color: #fff; font-size: 16px; font-weight: normal; } /*------------------------------------- 14. Google map -------------------------------------*/ .google-map { width: 100%; height: 460px; } .google-map iframe { width: 100%; height: 460px; } .google-map-gray iframe { width: 100%; border: 0px; } /*------------------------------------- 16. Countdown clock -------------------------------------*/ .count-row { background: #333; } #countdown-clock { display: table; text-align: center; width: 80%; margin-left: -15px; border: 1px solid #3f3f3f; margin: 17px 0; } #countdown-clock span { display: table-cell; width: 1%; color: #fff; padding: 5px 15px; text-transform: uppercase; color: #999; border-right: 1px solid #3f3f3f; } #countdown-clock span:last-child { border-right: none; } #countdown-clock span b { display: block; font-size: 25px; font-weight: 900; color: #fff; } @media only screen and (max-width: 991px) { #countdown-clock { width: 100%; } } /*------------------------------------- 17. Form elements -------------------------------------*/ label { margin-bottom: 5px; } .panel-default, .panel-default > .panel-heading { border-color: #e7ecf1; color: inherit; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #e7ecf1; } .form-group { margin-bottom: 20px; } .form-control { border-color: #e1e6eb; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: 40px; font-size: 15px; line-height: 20px; padding: 8px 4px 0px 4px; } .form-control:focus { border-color: #e1e1e1; outline: 0; } .form-control:focus, .has-error .form-control:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .form-control.kv-fileinput-caption { height: 39px; } .form-group.form-inline .radio, .form-group.form-inline .checkbox { margin-right: 15px; } /* 17.1 input group */ .input-group { width: 100%; } .input-group .form-control, .input-group-addon, .input-group-btn { display: table-cell; } .input-group-addon { background: #fff; border-color: #e1e1e1; padding: 6px 14px; font-size: 16px; } .input-group-addon.font-size-20 { font-size: 20px; } .input-group-addon.fixed-w { text-align: center; padding: 6px 0; width: 40px; } .input-group-addon.v-align-t { line-height: 30px; } /* 17.3 radio & checkbox */ input[type="checkbox"], input[type="radio"] { opacity: 0; margin-left: 1px !important; } input[type="checkbox"] + label, input[type="radio"] + label { display: block; padding-left: 20px !important; position: relative; } input[type="checkbox"] + label:hover:before, input[type="radio"] + label:hover:before { border-color: #3396d1; } input[type="checkbox"] + label:before, input[type="radio"] + label:before { background-color: #fff; border: 2px solid #b6b7b8; border-radius: 0px; content: ""; display: inline-block; height: 16px; line-height: 1; margin-left: -20px; position: absolute; top: 2px; transition: all linear 0.1s; width: 16px; } input[type="checkbox"] + label:after { color: #fff; content: "\f00c"; font-family: FontAwesome; font-size: 0px; -webkit-font-smoothing: antialiased; left: 6px; position: absolute; top: 7px; transition: all linear 0.1s; } input[type="checkbox"]:checked + label:before { border-width: 7px; border-color: #3396d1; } input[type="checkbox"]:checked + label:after { font-size: 10px; left: 2px; top: 2px; } input[type="radio"] + label:before { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; content: ""; } input[type="radio"]:checked + label:before { border-color: #3396d1; border-width: 5px; } .form-inline .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"] { position: absolute; left: 0; bottom: 0; } /*17.4 Browse Button css */ .btn-file { overflow: hidden; position: relative; } .btn-file input[type="file"] { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; cursor: inherit; display: block; min-height: 100%; min-width: 100%; opacity: 0; position: absolute; right: 0; text-align: right; top: 0; } /*17.8 validation symbol */ .has-feedback label ~ .form-control-feedback { top: 31px; } /*17.9 error for select box */ .has-error .bootstrap-select .dropdown-toggle, .has-error .bootstrap-select .dropdown-toggle:hover, .has-error .bootstrap-select .dropdown-toggle:focus { border-color: #a94442 !important; } /*17.10 succes for select box */ .has-success .bootstrap-select .dropdown-toggle, .has-success .bootstrap-select .dropdown-toggle:hover, .has-success .bootstrap-select .dropdown-toggle:focus { border-color: #3c763d !important; } /*17.11 textarea */ /*17.11(1) resize-vertical*/ .resize-vertical { resize: vertical; } /*17.11(2) resize-horizontal*/ .resize-horizontal { resize: horizontal; } /*17.11(3) resize-none*/ .resize-none { resize: none; } /*------------------------------------- 18. Loading -------------------------------------*/ /*18.1 loading - 1*/ .loading-area { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9999; overflow: hidden; } .loading-box { width: 100%; height: 100%; background-color: #fff; position: absolute; left: 0; top: 0; opacity: 1; z-index: 9999; } .loading-pic { width: 100%; position: absolute; top: 50%; z-index: 99999; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /*18.2 loading - 2*/ .loading-cover, .loading-srh-bar, .loading-map { background: rgba(255, 255, 255, 0.8); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .loading-cover .fa-spinner, .loading-srh-bar .fa-spinner, .loading-map .fa-spinner { position: absolute; left: 50%; top: 50%; margin: -10px; font-size: 25px; color: #333; } /*------------------------------------- 19. Widgets -------------------------------------*/ .widget { margin-bottom: 40px; } .widget-title { margin: 0 0 25px; } .widget-title { margin-bottom: 20px; } .recent-posts-entry ul { margin: 0; list-style: none; padding: 0; } /* 19.1 widget listing*/ .widget_services ul { list-style: none; padding-left: 0; margin-bottom: 0; } .widget_services ul li { margin-bottom: 13px; border-bottom: 1px solid #e1e1e1; position: relative; padding: 5px 10px 5px 0px; margin-bottom: 0; line-height: 20px; } .widget_services ul li { font-size: 16px; } .widget_services ul li a { color: #262423; } .widget_services ul li a:hover { color: #2f544c; } .widget_services li { border-bottom: none; line-height: 28px; } .widget_services li:before { top: 0; left: 1px; } .widget_services.inline-links li { display: block; border-bottom: none; } /*19.2 widget search custom*/ .search-bx .site-button { border-left-color: #fff; padding: 9px 15px; color: #262423; background-color: #fff; border: 1px solid #e1e6eb; } .search-bx .input-group .form-control { border-right: 1px solid transparent; } /*19.3 widget search wp-default*/ .widget_search .screen-reader-text { display: block; } .searchform { position: relative; } .searchform input[type="text"] { width: 100%; height: 40px; padding: 10px 90px 10px 15px; border: 1px solid #cccccc; } .searchform input[type="submit"] { height: 40px; padding: 10px 15px; background-color: #ffbc13; position: absolute; right: 0; bottom: 0; color: #ffffff; border-left: none; border-right: none; border-top: none; border-bottom: none; } .searchform input[type="submit"]:hover, .searchform input[type="submit"]:focus, .searchform input[type="submit"]:active { background-color: #6ab33e; color: #ffffff !important; border-bottom-color: #5a9e2f; } /*19.4 widget recent-posts*/ .recent-posts-entry .post-date, .tweets-feed-entry .tweet-date { color: #3396d1; font-style: normal; } .widget .post-title { font-size: 14px; line-height: 16px; margin-bottom: 0px; margin-top: 0px; } .recent-posts-entry .widget-post { margin-bottom: 5px; padding: 5px; } .recent-posts-entry .widget-post-bx:last-child { border-bottom: none; } .recent-posts-entry .widget-post:last-child { margin-bottom: 0px; } .recent-posts-entry .wt-post-media { float: left; width: 90px; } .recent-posts-entry .wt-post-info { background: transparent; padding: 0; margin-left: 105px; border: none; } .recent-posts-entry .post-meta span { margin-right: 10px; } /*19.8 widget tags-list*/ .widget_tag_cloud a { padding: 8px 14px; font-size: 12px; display: inline-block; margin: 0 0 5px; text-transform: uppercase; color: #262423; position: relative; } .widget_tag_cloud a:after { position: absolute; right: -6px; top: 16px; content: ""; width: 10px; height: 1px; background-color: #262423; -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; } .widget_tag_cloud a:hover { color: #a2a2a2; } .widget_tag_cloud a:hover:after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); width: 10px; right: -5px; } /* 19.14 widget gallery */ .widget_gallery ul { padding-left: 0; } .widget_gallery li { display: inline-block; width: 32.5%; padding: 8px 5px; } .widget_gallery li a { position: relative; } .widget_gallery li a:hover { cursor: crosshair; } .widget_gallery li:hover img { margin-bottom: 0; opacity: 0.3; } .widget_gallery li:hover a:after { opacity: 1; } .widget_gallery a { display: block; } @media only screen and (max-width: 991px) { .widget_gallery li { width: 24.333%; } } @media only screen and (max-width: 480px) { .widget_gallery li { width: 32.1%; } } .widget_newsletter-2 .newsletter-bx { background-color: #f6f7f8; text-align: center; } .widget_newsletter-2 .newsletter-bx .newsletter-icon { background-color: #262423; display: block; width: 70px; height: 70px; margin: 0px auto; margin-bottom: 15px; border-radius: 50%; text-align: center; } .widget_newsletter-2 .newsletter-bx .newsletter-icon i { font-size: 32px; color: #fff; line-height: 70px; } /* 19.18 widget client slider */ .widget-client { background-color: #f6f7f8; } /*-------widget service-------*/ .widget_address li { margin-bottom: 20px; color: #323232; position: relative; padding-left: 30px; } .footer-light .widget_address li { margin-bottom: 20px; color: #262423; position: relative; padding-left: 30px; } .widget_address li i { position: absolute; left: 0px; top: 5px; font-size: 14px; color: #2f544c; } .widget_address_outer .social-icons li { padding-right: 10px; } /*-------widget newsletter-------*/ .widget_newsletter .newsletter-bx .form-control { background-color: #262423; border: 0px; color: #fff; } .footer-dark .social-icons { margin-top: 50px; } .footer-dark .social-icons li a { color: #2f544c !important; font-size: 24px; padding: 6px 10px; } .footer-light .social-icons { margin-top: 50px; } .footer-light .social-icons li a { color: #262423; color: #2f544c; font-size: 16px; padding: 6px; } .footer-light .widget_newsletter .newsletter-bx { text-align: left; } .footer-light .widget_newsletter .newsletter-bx input { padding: 10px; } .footer-light .widget_newsletter .newsletter-bx button { background-color: #fff; margin-top: 20px; color: #262423; text-transform: uppercase; letter-spacing: 2px; } .footer-dark .widget_newsletter .newsletter-bx { text-align: left; } .footer-dark .widget_newsletter .newsletter-bx input { padding: 10px; } .footer-dark .widget_newsletter .newsletter-bx button { background-color: #fff; margin-top: 20px; color: #262423; text-transform: uppercase; letter-spacing: 2px; } /*====footer news letter====*/ .news-letter-footer p { color: #999999; } .newsletter-f-left { border-right: 1px solid #ddd; margin-bottom: 30px; } .newsletter-f-left p { margin-bottom: 0px; } .newsletter-f-right { margin-bottom: 30px; } .newsletter-f-right .form-control { padding: 13px; width: 345px; border-radius: 0; border: 1px solid #eee; height: 53px; float: right; margin-right: 0px; } .newsletter-f-right .input-group-btn .site-button { padding: 15px 30px; height: 53px; } .ftr-btm { display: flex; justify-content: space-between; } .ftr-btm > * { width: auto; } @media only screen and (max-width: 1200px) { .newsletter-f-right .input-group { display: flex; } .newsletter-f-right .form-control { width: 1%; } } @media only screen and (max-width: 991px) { .newsletter-f-left { border-right: 0px; } .newsletter-f-right .form-control { float: none; } } @media only screen and (max-width: 400px) { .newsletter-f-right .input-group { display: block; } .newsletter-f-right .form-control { width: 100%; } .newsletter-f-right .input-group-btn { display: block; margin-top: 10px; } } /*------------------------------------- 20. Table -------------------------------------*/ /* 20.1 Full-responsive */ .wt-responsive-table td, .wt-responsive-table th { padding: 8px !important; } @media only screen and (max-width: 800px) { #no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th, #no-more-tables td, #no-more-tables tr { display: block; margin: 15px 0px; } #no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; display: none; } #no-more-tables tr { border: 1px solid #ccc; } #no-more-tables td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50% !important; white-space: normal; text-align: left; } #no-more-tables td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; } #no-more-tables td:before { content: attr(data-title); } } /*------------------------------------- 21. Video -------------------------------------*/ .yt-thum-box img { margin: -9.5% 0%; } /*====================================== 12. WP DEFAULT ======================================*/ .alignnone { margin: 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 15px; } .alignright { float: right; margin: 5px 0 25px 25px; } .alignleft { float: left; margin: 5px 25px 25px 0; } a img.alignright { float: right; margin: 5px 0 25px 25px; } a img.alignnone { margin: 5px 0 25px 0; } a img.alignleft { float: left; margin: 5px 25px 25px 0; } a img.aligncenter { display: block; margin: 5px auto 15px; } .wp-caption { max-width: 100%; text-align: center; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0; } .wp-caption.alignnone { margin: 5px 0 25px 0; } .wp-caption.alignleft { margin: 5px 25px 25px 0; } .wp-caption.alignright { margin: 5px 0 25px 25px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 100%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { color: #9d9d9d; font-size: 13px; line-height: 18px; margin: 0; padding: 10px 0; text-align: left; } blockquote { padding: 0px 0px 0px 40px; color: #262423; margin: 40px 0; position: relative; clear: both; border: none; font-family: "Jost", sans-serif; } blockquote p { font-size: 24px; line-height: 32px; } blockquote strong { font-size: 18px; display: block; } blockquote span { font-size: 12px; color: #262423; line-height: 30px; margin-bottom: 0px; font-style: normal; text-transform: uppercase; } blockquote:before { content: ""; color: #555555; position: absolute; left: 0px; top: 0px; font-style: normal; width: 5px; height: 100%; background-color: #262423; } @media only screen and (max-width: 640px) { blockquote { padding: 30px 20px 30px 30px; } blockquote p { font-size: 16px; line-height: 22px; } } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } /*====================================== 13. BLOG ======================================*/ .blog-post { position: relative; margin-bottom: 30px; font-family: "Jost", sans-serif; } .wt-post-title { margin-bottom: 10px; } .wt-post-title .post-title { margin: 0; font-size: 28px; } .wt-post-meta { margin-bottom: 5px; } .wt-post-meta ul { margin: 0px; list-style: none; } .wt-post-meta li { padding: 0; display: inline-block; font-size: 14px; } .wt-post-meta i { margin: 0 5px; } .wt-post-meta li:after { content: "/"; display: inline-block; font-weight: normal; margin-left: 5px; opacity: 0.5; } .wt-post-meta li:last-child:after { display: none; } .wt-post-text { margin-bottom: 2px; text-align: left; } .wt-post-text p a { text-transform: uppercase; display: inline-block; } .wt-post-text p:last-child { margin: 0; } .wt-post-readmore { margin-bottom: 15px; } .wt-post-readmore a { font-family: "Crete Round", serif; font-size: 16px; font-style: italic; text-decoration: underline; } @media only screen and (max-width: 420px) { .masonry-item .wt-post-info { padding-bottom: 0px; } .masonry-item .wt-post-title h2.post-title { line-height: 14px; } .masonry-item .wt-post-title h2.post-title a { font-size: 14px; line-height: none; } .news-grid .wt-post-text { display: none; } } /*------------------------------------- 10. side bar -------------------------------------*/ .side-bar .widget { margin-bottom: 30px; } .widget .widget-post img { width: 100%; } @media only screen and (max-width: 991px) { .side-bar { margin-bottom: 0px; margin-top: 30px; } } /*------------------------------------- 12. comment list -------------------------------------*/ .comments-area { padding: 0; } .comments-area .comments-title { text-transform: uppercase; font-size: 20px; } ol.comment-list { list-style: none; } ol.comment-list li.comment { position: relative; padding: 0; } ol.comment-list li.comment .comment-body { position: relative; padding: 20px 30px 20px 80px; margin-left: 20px; color: #262423; position: relative; } ol.comment-list li.comment .comment-author { display: block; margin-bottom: 10px; } ol.comment-list li.comment .comment-author .avatar { position: absolute; top: 20px; left: -20px; width: 80px; height: 80px; background-color: #fff; } ol.comment-list li.comment .comment-author .fn { display: inline-block; color: #262423; font-size: 15px; text-transform: uppercase; font-style: normal; } ol.comment-list li.comment .comment-author .says { display: none; color: #999999; } ol.comment-list li.comment .comment-meta { margin-bottom: 5px; font-size: 12px; } ol.comment-list li.comment .comment-meta a { color: #262423; font-style: italic; } ol.comment-list li.comment .comment-meta:before, ol.comment-list li.comment .reply a:before { font-family: "FontAwesome"; font-size: 16px; vertical-align: top; } ol.comment-list li.comment p { margin: 0 0 5px; font-weight: 400; font-size: 14px; } ol.comment-list li.comment .reply { text-align: right; } ol.comment-list li.comment .reply a { font-size: 12px; color: #262423; text-transform: uppercase; } ol.comment-list li .children { list-style: none; margin-left: 80px; } ol.comment-list li .children li { padding: 0; } @media only screen and (max-width: 767px) { .comments-area .padding-30 { padding: 15px; } ol.comment-list li.comment .comment-body { margin-bottom: 30px; margin-left: 30px; } ol.comment-list li.comment .comment-author .avatar { left: -35px; height: 70px; width: 70px; } ol.comment-list li .children { margin-left: 20px; } ol.comment-list li.comment .reply a { position: static; } } @media only screen and (max-width: 480px) { ol.comment-list li.comment .comment-body { margin-left: 26px; } ol.comment-list li.comment .comment-author .avatar { left: -15px; top: 12px; width: 60px; height: 60px; } ol.comment-list li.comment .comment-body { padding-left: 55px; } ol.comment-list li .children { margin-left: 0px; } } @media only screen and (max-width: 380px) { ol.comment-list li.comment .comment-body { padding: 0px; margin: 0px 0px 20px 0px; } ol.comment-list li.comment .comment-author .avatar { position: inherit; margin: 0px 0px 20px 0px; width: 100px; height: 100px; display: block; } } /*------------------------------------- 13. comment form -------------------------------------*/ .comment-respond .comment-reply-title { text-transform: uppercase; font-size: 20px; } .comments-area .comment-form { margin: 0 -15px; } .comments-area .comment-form .comment-notes { display: none; } .comments-area .comment-form p { width: 33.333%; float: left; padding: 0 15px; margin-bottom: 30px; position: relative; } .comments-area .comment-form p.form-allowed-tags { width: 100%; } ol.comment-list li.comment .comment-respond .comment-form p { padding: 0 15px !important; } .comments-area .comment-form p label { display: none; line-height: 18px; margin-bottom: 10px; } .comments-area .comment-form p input[type="text"], .comments-area .comment-form p textarea { width: 100%; height: 40px; padding: 10px 0px; border: none; background-color: transparent; border-bottom: 1px solid #cccccc; } .comments-area .comment-form p.comment-form-comment { width: 100%; display: block; clear: both; } .comments-area .comment-form p textarea { height: 120px; resize: none; } .comments-area .comment-form p.form-submit { clear: both; float: none; width: 100%; margin: 0; } .comments-area .comment-form p input[type="submit"] { background-color: #77c04b; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-width: 0; color: #fff; display: inline-block; padding: 10px 20px; text-transform: uppercase; } .comments-area .comment-form p input[type="submit"]:hover, .comments-area .comment-form p input[type="submit"]:focus, .comments-area .comment-form p input[type="submit"]:active { background-color: #6ab33e; border-color: #6ab33e; color: #fff; } .comment-respond .form-submit .site-button { font-weight: 300; padding: 15px 30px; } .comment-form .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #262423; font-size: 12px; text-transform: uppercase; } .comment-form .form-control::-moz-placeholder { /* Firefox 19+ */ color: #262423; font-size: 12px; text-transform: uppercase; } .comment-form .form-control:-ms-input-placeholder { /* IE 10+ */ color: #262423; font-size: 12px; text-transform: uppercase; } .comment-form .form-control:-moz-placeholder { /* Firefox 18- */ color: #262423; font-size: 12px; text-transform: uppercase; } @media only screen and (max-width: 767px) { .comments-area .comment-form p { width: 100%; float: none; margin-bottom: 20px; } } @media only screen and (max-width: 1280px) { .wt-post-info-inner { padding: 20px; } } @media only screen and (max-width: 767px) { .wt-post-info-inner { height: auto; } } /*------------------------------------- 15. blog grid-post -------------------------------------*/ .blog-post .grid-post { } .blog-post .grid-post li { float: left; width: 33.33%; border-right: 4px solid #fff; border-bottom: 4px solid #fff; list-style: none; } .blog-post .grid-post li:first-child { width: 100%; } .blog-post .grid-post li .portfolio-item { width: 100%; } .portfolio-item { width: 100%; position: relative; overflow: hidden; color: #fff; width: 100%; border: 0; position: relative; } .blog-post .grid-post li img { width: 100%; } /*------------------------------------- 16. if no image with blog post Latest-blog-3 -------------------------------------*/ .latest-blog-1 { position: relative; } .latest-blog-1 .wt-post-info { padding: 0px; } .latest-blog-1 .wt-post-meta ul { display: table; } .latest-blog-1 .wt-post-info { position: relative; background: #fff; padding: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .latest-blog-1 .wt-post-info h3 { font-size: 22px; font-weight:500; } .latest-blog-1 .wt-post-meta { border-top: 1px solid #edeeef; padding: 20px 0px 0px 0px; } .latest-blog-1 .wt-post-info .post-date { position: absolute; right: 70px; top: -100px; text-transform: uppercase; white-space: nowrap; color: #fff; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; padding: 10px 20px; background-color: #2f544c; font-size: 14px; line-height: 24px; bottom: auto; } .latest-blog-1 .wt-post-meta ul li:first-child { text-align: left; width: auto; } .latest-blog-1 .wt-post-meta ul li { display: table-cell; vertical-align: middle; text-align: right; width: auto; padding-right: 10px; } .latest-blog-1 .wt-post-meta ul li:last-child { padding-left: 0px; } .latest-blog-1 .wt-post-meta li::after { display: none; } .latest-blog-1 .wt-post-meta .post-author img { width: 45px; height: 45px; margin-right: 10px; -webkit-border-radius: 50%; border-radius: 50%; } @media only screen and (max-width: 359px) { .latest-blog-1 .wt-post-meta ul { display: block; } .latest-blog-1 .wt-post-meta ul li:first-child { text-align: left; width: 100%; } .latest-blog-1 .wt-post-meta ul li { display: block; text-align: left; width: 100%; padding-right: 0px; } } .recent-posts-entry-date .widget-post:last-child { border: none; } .recent-posts-entry-date .wt-post-date { background-color: #0e0e0e; width: 50px; height: 60px; float: left; } .recent-posts-entry-date .wt-post-date strong { display: block; font-size: 24px; } .recent-posts-entry-date .wt-post-date span { display: block; font-size: 11px; text-transform: uppercase; } .recent-posts-entry-date .wt-post-info { margin-left: 70px; } .recent-posts-entry-date .wt-post-info .wt-post-meta ul li { font-weight: normal; font-size: 12px; } .recent-posts-entry-date .wt-post-info .post-title { font-weight: bold; margin-top: 0px; } /*------------------------------------- 16. if no image with blog post Latest-blog-3 -------------------------------------*/ .latest-blog-3.post-overlay .wt-post-info { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: table; } .latest-blog-3.post-overlay { height: 488px; } .latest-blog-3.post-overlay .wt-post-info .post-overlay-position { display: table-cell; vertical-align: bottom; } .latest-blog-3.post-overlay .wt-post-meta a { color: #fff; } .latest-blog-3.post-overlay .wt-post-meta i { color: #fff; } .latest-blog-3.blog-md .wt-post-media { width: 230px; float: left; margin-right: 30px; } .latest-blog-3.blog-md .wt-post-info { border: none; } .latest-blog-3.blog-md .wt-post-tags { border: none; display: inline-block; padding: 0; } .latest-blog-3.blog-md .wt-post-meta i { color: #222222; } @media only screen and (max-width: 991px) { .latest-blog-3.post-overlay { height: 360px; } } @media only screen and (max-width: 640px) { .latest-blog-3.blog-md .wt-post-media { width: 100%; } } /*====================================== 14. HEADER (top part of page) ======================================*/ .site-header { position: relative; z-index: 999; } @media only screen and (max-width: 1200px) { .site-header .container { width: auto; } } .site-header ul, .site-header ol { margin-bottom: 0; } @media only screen and (max-width: 991px) { .sticky-wrapper { height: auto !important; } } /*------------------------------------- 1. header full screen -------------------------------------*/ .nav-wide .container { max-width: 100%; padding-left: 30px; padding-right: 30px; } /*------------------------------------- 2. without top bar -------------------------------------*/ .extra-nav { display: table; float: right; height: 70px; position: relative; z-index: 9; } .extra-nav .extra-cell { display: table-cell; padding-left: 20px; vertical-align: middle; } /*------------------------------------- 3. map page header -------------------------------------*/ #header-part.fix-map-header { height: 90px; } #header-part.fix-map-header .main-bar { position: fixed; top: 0; left: 0; z-index: 1; } @media only screen and (max-width: 480px) { #header-part.fix-map-header { height: 160px; } } /*====================================== 16. LOGO ( company identify symbol ) ======================================*/ /*------------------------------------- 1. logo for header -------------------------------------*/ .logo-header { display: table; float: left; width: 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 { width: 105px; /* max-height: 100%; */ padding: 5px; } @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: 150px; vertical-align: middle; padding: 0; margin-top: 0; margin-bottom: 8px; margin-left: 0; margin-right: 0; position: relative; z-index: 9; } .logo-footer-inner { display: table-cell; vertical-align: middle; height: 100%; } .logo-footer-inner img { max-width: 100%; max-height: 100%; } .logo-footer img { padding: 5px; } /*------------------------------------- 2. when header is sticky -------------------------------------*/ .is-fixed .logo-header { height: 70px; } /*====================================== 17. MAIN BAR ( place logo & main-navigation ) ======================================*/ .top-bar { color: #262423; padding: 0px; /*background-color:#212427;*/ } .top-bar .fa { vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.01); padding: 3px; width: 22px; height: 22px; text-align: center; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; } .wt-topbar-left, .wt-topbar-right, .wt-topbar-center { padding-left: 15px; padding-right: 15px; } .wt-topbar-left { float: left; } .wt-topbar-right { float: right; } .wt-topbar-center { text-align: center; } @media only screen and (max-width: 991px) { .wt-topbar-left, .wt-topbar-right { float: none; padding-top: 5px; padding-bottom: 5px; } } /*------------------------------------- 1. eamil-phone (left) -------------------------------------*/ .e-p-bx li { display: inline; font-size: 14px; padding-right: 10px; } .e-p-bx li a { color: #fff; } .e-p-bx li i { margin-right: 5px; vertical-align: middle; } /*------------------------------------- 2. social-links (right) -------------------------------------*/ .social-bx, .login-bx { margin: 0 0 0 15px; float: right; } @media only screen and (max-width: 480px) { .social-bx, .e-p-bx, .login-bx { margin-top: 5px; margin-bottom: 5px !important; } } .social-bx li, .login-bx li { font-size: 12px; margin: 0; position: relative; } .social-bx li { padding-left: 2px; padding-right: 2px; } .social-bx li a, .login-bx li a { color: #262423; font-size: 14px; } .social-bx li i, .login-bx li i { vertical-align: baseline; margin: 0 5px 0 0; } .social-bx li span, .login-bx li span { vertical-align: baseline; margin: 0 2px 0; font-size: 8px; } .login-bx li ul { top: 25px; left: auto; right: 0; border: none; padding: 0; } .login-bx li ul li { border-bottom: 1px solid #f7f7f7; } .login-bx li ul li a { color: #767676; padding: 9px 15px; } .arrow-up-border:before, .arrow-up:after { position: absolute; display: inline-block; content: ""; } .arrow-up-border:before { top: -7px; right: 19px; border-right: 7px solid transparent; border-bottom: 7px solid #f00; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); } .arrow-up:after { top: -6px; right: 20px; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; } .arrow-left:before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ""; } .arrow-left:after { position: absolute; top: -6px; left: 10px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ""; } /*------------- top share icon block ----------------------*/ .share-icon-btn { display: block; } .share-icon-btn .dropdown-menu { padding: 0px 20px; min-width: 60px; top: 53px; left: -10px; } .share-icon-btn .social-bx { clear: both; float: none; margin-left: 0px; } .share-icon-btn .social-bx.list-inline > li { display: block; margin: 10px 0px 15px 0px; } .share-icon-btn2 { display: block; } .share-icon-btn2 .dropdown-menu { padding: 0px 20px; min-width: 60px; top: 53px; left: -10px; } .share-icon-btn2 .social-bx { clear: both; float: none; margin-left: 0px; } .share-icon-btn2 .social-bx.list-inline > li { display: block; margin: 10px 0px; } @media only screen and (max-width: 991px) { .e-p-bx { display: none; } .header-top-info .wt-topbar-right { padding-left: 0px; padding-right: 0px; } .header-top-info .social-bx { margin-left: 0px; } } @media only screen and (max-width: 480px) { .header-top-info { display: none; } } /*-----------------------------------*/ .main-bar { position: relative; width: 100%; padding: 2px 0px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .main-bar::after, .main-bar::after { clear: both; content: ""; display: table; } /*main bar with box view*/ @media only screen and (max-width: 480px) { .main-bar { padding-left: 0px; padding-right: 0px; } } /*header info css*/ .header-info { float: right; padding: 10px 0; } .header-info > ul { list-style: none; display: table; } .header-info > ul li { display: table-cell; padding: 15px 10px; vertical-align: middle; } .header-info > ul li .icon-sm { float: left; margin-right: 15px; } .header-info > ul li strong { display: block; font-size: 16px; text-transform: uppercase; color: #1a1a1a; } @media only screen and (max-width: 991px) { .header-info > ul li { display: none; } .header-info > ul li.btn-col-last { display: block; padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 767px) { .header-info > ul li.btn-col-last, .header-info { display: none; } } .header-botton { background-color: #1a1a1a; } .header-botton .header-nav .nav { float: none; } .header-botton .header-nav .nav > li > a { padding: 20px 12px; color: #fff; } .header-botton .extra-nav { padding: 13px 0; } .header-botton .extra-nav .site-search-btn { color: #fff; padding: 7px 15px; } .header-botton .extra-nav .wt-cart .woo-cart-count { border: 2px solid #fff; color: #fff; min-width: 36px; padding: 5px 5px 5px; } .header-botton .extra-nav .wt-cart .woo-cart-count::before { border-color: #fff; } @media only screen and (max-width: 991px) { .header-botton .navbar-toggle { float: left; margin: 9px 0; } .header-botton .navbar-toggle span { background-color: #fff; } .header-botton .header-nav .nav > li > a { padding: 12px 12px; color: #777; } } @media only screen and (max-width: 767px) { .header-middle .logo-header { float: none; margin: 9px auto; } } .header-style-1 .main-bar { position: absolute; background-color:#ffffff96; } /* header 3 fixed */ .header-style-1 .is-fixed .main-bar { position: fixed; background: #fff; } .header-style-1 .is-fixed.color-fill .main-bar { background: #323232; } .header-style-1 .container { display: flex; justify-content: space-between; } /*====================================== 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; display: flex !important; justify-content: end; } .header-nav .nav { float: none; display: flex; flex-direction: inherit; justify-content: space-between; } .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: #323232; font-size: 15px; padding: 22px 20px; cursor: pointer; margin: -10px 0; text-decoration: none; } .header-nav .nav > li > a:hover { background-color: transparent; color: #212427; } .header-nav .nav > li > a:active, .header-nav .nav > li > a:focus { background-color: transparent; } .header-nav .nav > li.active > a, .header-nav .nav > li.current-menu-item > a { background-color: transparent; color: #2f544c; } .header-nav .nav > li:hover > a { color: #2f544c; } .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: #2f544c; border: 1px solid #2f544c; display: block; left: 0; top: 50px; 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: #fff; display: block; font-size: 16px; padding: 10px 20px; } .header-nav .nav > li .sub-menu li a:hover { color: #fff; 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: #2f544c; -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: #ddd; } @media only screen and (max-width: 991px) { .header-nav .nav > li .sub-menu li:hover > a { background-color: transparent; } } .header-nav .nav > li .sub-menu li:last-child { border-bottom: 0px; } .header-nav .nav > li .sub-menu li .fa { display: none; color: #363636; float: right; position: absolute; right: 0px; top: 0px; } @media only screen and (max-width: 991px) { .header-nav .nav > li .sub-menu li .fa { display: block; } } .header-nav .nav > li .sub-menu li > .sub-menu { left: 220px; top: 0px; margin: 0 0 0 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .header-nav .nav > li .sub-menu li:hover > .sub-menu { left: 220px; margin: 0px; opacity: 1; top: -1px; visibility: visible; } .header-nav .nav > li .sub-menu li:hover > .sub-menu:before { background-color: transparent; bottom: 0px; content: ""; display: block; height: 100%; left: -6px; position: absolute; top: 0px; width: 6px; } .header-nav .nav > li.has-mega-menu { position: inherit; } .header-nav .nav > li .mega-menu li a > i { font-size: 13px; margin-right: 5px; min-width: 20px; } .header-nav .nav > li .mega-menu { background-color: #ffffff; border: 1px solid #e9e9e9; display: table; left: 0px; list-style: none; opacity: 0; position: absolute; right: 0px; visibility: hidden; width: 100%; margin-top: 20px; z-index: 10; } .header-nav .nav > li .mega-menu > li { display: table-cell; padding: 10px 0; position: relative; vertical-align: top; width: 25%; text-transform: none; } .header-nav .nav > li .mega-menu > li:after { content: ""; background-color: rgba(204, 204, 204, 0.4); position: absolute; right: 0px; top: 0px; display: block; width: 1px; height: 100%; } .header-nav .nav > li .mega-menu > li:last-child:after { display: none; } .header-nav .nav > li .mega-menu > li > a { color: #555555; display: block; font-size: 14px; padding: 0 20px; } .header-nav .nav > li .mega-menu > li ul { list-style: none; margin: 10px 0px 0px 0px; padding: 0px; } .header-nav .nav > li .mega-menu > li ul a { color: #474747; display: block; font-size: 13px; line-height: 34px; padding: 2px 20px; } .header-nav .nav > li .mega-menu > li ul a:hover { color: #1bbce8; background-color: #f2f2f2; } .header-nav .nav > li.menu-item-has-children:before { content: "\f078"; display: block; font-family: "FontAwesome"; right: 4px; position: absolute; top: 50%; color: #999; margin-top: -8px; font-size: 8px; } /*-- Submenu direction---*/ .header-nav .nav > li.submenu-direction .sub-menu { left: auto; right: 0; } .header-nav .nav > li.submenu-direction .sub-menu li > .sub-menu { left: auto; right: 220px; margin: 0 20px 0 0; } .header-nav .nav > li.submenu-direction .sub-menu li:hover > .sub-menu { left: auto; right: 220px; margin: 0 0 0 0; } .has-child .submenu-toogle { position: absolute; right: 4px; top: 3px; color: #262423; background-color: transparent; z-index: 900; cursor: pointer; padding: 10px; font-size: 14px; display: none; } .header-nav .has-child li .submenu-toogle { opacity: 0.9; } .header-nav .has-child.nav-active > a + .submenu-toogle.glyphicon-chevron-right:before { content: "\e114"; } /*.header-nav .nav > li:last-child{display:none;}*/ @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-header { float: none; } .navbar-toggle { display: block; } /* Responsive strat when medai screen [991px] css END*/ .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: #323232; } .header-nav .nav > li.active > a, .header-nav .nav > li.current-menu-item > a { color: #262423; } .header-nav .nav i { float: right; } .header-nav .nav > li > a:hover, .header-nav .nav > li > a:active, .header-nav .nav > li > a:focus { 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"; } } .header-style-1 .navbar-toggler { display: none; } .header-style-1 .navbar-toggler .icon-bar { background: #433f3f; height: 2px; border-radius: 0; display: block; width: 30px; } .header-style-1 .navbar-toggler .icon-bar + .icon-bar { margin-top: 4px; } .header-style-1 .header-nav .has-child.nav-active > a + .submenu-toogle.fa.fa-angle-right:before { content: "\f107"; } /*Header style 1 mobile navigation*/ @media only screen and (max-width: 991px) { .header-style-1 .navbar-toggler { display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; } .header-style-1 .extra-nav { margin-right: 40px; } .header-style-1 .has-child .submenu-toogle { background-color: transparent; color: #000; font-size: 14px; width: 100%; text-align: right; } .header-style-1 .is-fixed .header-nav .nav > li > a { padding: 12px 15px; } .header-style-1 .extra-nav .extra-cell { padding-left: 0px; margin-left: 0px; padding-right: 20px; } .header-style-1 .header-botton .extra-nav .site-search-btn { color: #fff; padding: 7px 15px 7px 0px; } .header-style-1 .container { position: relative; } .has-child .submenu-toogle { background: none; } .header-style-1 .header-botton .header-nav .nav { float: none; margin: 0px; background: #fff; background-color: rgb(255, 255, 255); width: 100%; display: block; height: 100%; } .header-style-1 .header-botton .header-nav .nav > li > a .fa { display: none; } .header-style-1 .header-botton .header-nav .nav > li .sub-menu li .fa { top: 1px; } .header-style-1 .header-botton .header-nav .nav > li .sub-menu li > .sub-menu { transition: none !important; } .header-style-1.mobile-sider-drawer-menu .header-nav { position: fixed; width: 250px !important; z-index: 999; height: 100vh !important; overflow-y: inherit !important; left: -250px; top: 0px; transition: all 0.5s linear; background-color: #fff; } .header-style-1 .header-nav .nav { float: none; margin: 15px; background: #fff; background-color: rgb(255, 255, 255); width: 100%; display: block; height: 100%; } .header-style-1.mobile-sider-drawer-menu .header-nav .nav > li:hover > .sub-menu { transition: none; } .header-style-1.mobile-sider-drawer-menu .header-nav .nav > li .sub-menu li:hover > .sub-menu { transition: none; } .header-style-1.mobile-sider-drawer-menu.active .header-nav { left: 0%; } .header-style-1.mobile-sider-drawer-menu .icon-bar { transition: all 0.5s linear; position: relative; } #mobile-side-drawer:focus { box-shadow: none; } .header-style-1.mobile-sider-drawer-menu.active .icon-bar.icon-bar-first { transform: rotate(45deg) translateX(3px) translateY(2px); } .header-style-1.mobile-sider-drawer-menu.active .icon-bar.icon-bar-three { transform: rotate(-45deg) translateX(3px) translateY(-2px); } .header-style-1.mobile-sider-drawer-menu .icon-bar.icon-bar-two { position: relative; right: 0%; } .header-style-1.mobile-sider-drawer-menu.active .icon-bar.icon-bar-two { position: absolute; right: 100px; opacity: 0; } .header-style-1.mobile-sider-drawer-menu .is-fixed .header-nav .nav { overflow: auto; max-height: 100%; display: block; width: 100%; } .header-style-1.mobile-sider-drawer-menu .header-fixed .header-nav .nav { overflow: auto; max-height: 100%; } .header-style-1 .header-nav .nav li { float: none; display: block; width: 100%; } .header-style-1 .header-nav .nav > li > a .fa { display: none; } } @media only screen and (max-width: 991px) { .header-nav .nav li.has-child.nav-active .sub-menu .has-child.nav-active > a { color: #fff !important; } } /* Vertical Nav */ .nav-sidebar { position: fixed; right: -500px; top: 0; width: 100%; max-width: 500px; height: 100%; z-index: 999; background-color: #fff; transition: all 0.5s linear; box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.3); -o-box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.3); } .nav-sidebar.active { right: 0px; } .nav-siderbar-scroll { height: 100%; position: absolute; width: 100%; overflow: auto; } .nav-sidebar .vnav-btn { position: absolute; right: -40px; top: 200px; box-shadow: 7px 0 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 7px 0 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 7px 0 5px rgba(0, 0, 0, 0.1); -o-box-shadow: 7px 0 5px rgba(0, 0, 0, 0.1); } .vnav-btn { 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--*/ .vertical-nav .has-child .submenu-toogle { color: #000; cursor: pointer; font-size: 24px; text-align: right; font-weight: bold; position: absolute; right: 0px; top: 0px; z-index: 999; padding: 15px 0px; display: none; background: none; width: 100%; } .vertical-nav .has-child li .submenu-toogle { opacity: 0.9; } .vertical-nav .has-child.nav-active > a + .submenu-toogle.glyphicon-plus:before { content: "\2212"; } .vertical-content-wrap { display: flex; width: 100%; height: 100%; overflow: auto; flex-direction: column; justify-content: space-between; } .vertical-content-area { display: block; } .vertical-content-area.vertical-centered { padding: 40px 40px 20px 40px; } .vertical-nav { font-family: "Jost", sans-serif; } .vertical-nav ul { list-style: none; float: none; } .vertical-nav ul li { float: none; } .vertical-nav ul li a > i { font-size: 18px; margin-right: 25px; } .vertical-nav ul > li > a { padding: 10px 0px; color: #999; display: block; font-size: 24px; text-transform: uppercase; } .vertical-nav ul li a > i { font-size: 18px; margin-right: 20px; } .vertical-nav ul > li.active > a { color: #262423; } .vertical-nav ul > li > a:hover, .vertical-nav ul > li > a:active, .vertical-nav ul > li > a:focus { background: none; text-decoration: none; color: #262423; } .vertical-nav ul > li .mega-menu > li:after { display: none; } .vertical-nav ul li .sub-menu > li a { font-size: 14px; padding: 10px 30px; text-transform: capitalize; position: relative; } .vertical-nav ul li .sub-menu > li a:before { content: ""; width: 20px; height: 2px; left: 0; top: 20px; position: absolute; background-color: #262423; } .vertical-nav ul li .sub-menu > li a > i { font-size: 20px; } .vertical-nav ul > li ul, .vertical-nav ul > li .sub-menu { display: none; position: static; visibility: visible; width: auto; } .vertical-nav ul li.has-child { position: relative; } .vertical-nav ul li .sub-menu { opacity: 1; margin: 0 !important; padding: 10px 0px; border-left: 2px solid #262423; } .vertical-nav .has-child .submenu-toogle { display: block; } .vertical-nav ul li.has-child.nav-active a { color: #000; } .vertical-nav .has-child.nav-active > a + .submenu-toogle.fa-angle-right::before { content: "\f107"; } .nav-transparent-area { position: absolute; width: calc(100vw - 500px); background-color: rgba(0, 0, 0, 0.5); right: 0; top: 0; bottom: 0px; opacity: 0; visibility: hidden; cursor: pointer; z-index: 998; -webkit-transition: all 0.2s ease; } .nav-sidebar.active .nav-transparent-area { opacity: 1; visibility: visible; } .right-nav-header { padding: 40px 40px 20px 40px; } .right-nav-header .r-nav-h-content .list-inline { display: flex; } .right-nav-header .r-nav-h-content .list-inline li { margin-right: 5px; } .right-nav-footer { display: table-footer-group; } .right-nav-footer .r-nav-f-content { padding: 40px 40px 20px 40px; } .social-rounded li a { font-size: 14px; color: black; width: 40px; height: 40px; line-height: 40px; border: 1px solid #262423; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; text-align: center; } .social-rounded li a:hover { background-color: #262423; color: #fff; } @media only screen and (max-width: 360px) { .social-rounded.list-inline > li { padding-right: 0px; } } .vertical-content-wrap .vertical-content-area { position: relative; top: 40px; display: block; } .vertical-content-wrap .vertical-content-area { -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .nav-sidebar.active .vertical-content-wrap .vertical-content-area { opacity: 1; top: 0px; } /*------------------------------------- 2. nav dark version -------------------------------------*/ .nav-dark.header-nav .nav > li .sub-menu, .nav-dark.header-nav .nav > li .mega-menu { background-color: #262423; border: 1px solid rgba(0, 0, 0, 0.2); } .nav-dark.header-nav .nav > li .sub-menu li { border-bottom: 1px solid #23282f; } .nav-dark.header-nav .nav > li .sub-menu li:last-child { border-bottom: 0px; } .nav-dark.header-nav .nav > li .sub-menu li a, .nav-dark.header-nav .nav > li .mega-menu > li ul a, .nav-dark.header-nav .nav > li .mega-menu > li > a { color: #cccccc; } .nav-dark.header-nav .nav > li .sub-menu li a:hover { background-color: #222; } .nav-dark.header-nav .nav > li .mega-menu > li ul a:hover { background-color: #23282f; color: #ffbc13; } .nav-dark.header-nav .nav > li .mega-menu > li:after { background-color: rgba(0, 0, 0, 0.2); } @media only screen and (max-width: 991px) { .nav-dark.header-nav { border-bottom: 1px solid rgba(0, 0, 0, 0.8); } .nav-dark.header-nav .nav { background-color: #2d3239; } .nav-dark.header-nav .nav > li > a { border-top: 1px solid rgba(0, 0, 0, 0.2); } .nav-dark.header-nav .nav > li > a { color: #999; } .nav-dark.header-nav .nav > li > a:hover, .nav-dark.header-nav .nav > li > a:active, .nav-dark.header-nav .nav > li > a:focus { background-color: #23282f; color: #ffbc13; } .nav-dark.header-nav .nav > li ul, .nav-dark.header-nav .nav > li .sub-menu, .nav-dark.header-nav .nav > li .mega-menu { background-color: #23282f; } } /*------------------------------------- 3. when header is sticky -------------------------------------*/ .sticky-no .main-bar { position: static !important; } /*------------------------------------- 4. when header is sticky -------------------------------------*/ .is-fixed .main-bar { position: fixed; top: 0; left: 0; } /*------------------------------------- 5. header id Fixed -------------------------------------*/ /*.is-fixed.color-fill .main-bar { padding:0px 64px;}*/ /* .is-fixed.color-fill .header-nav .nav > li { margin:0; padding:0;} .is-fixed.color-fill .header-nav .nav > li > a { margin:0; padding:25px 12px;} */ @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 -------------------------------------*/ .site-bg-primary .header-nav .nav > li > a { color: #fff; } .site-bg-primary .header-nav .nav > li:hover > a, .site-bg-primary .header-nav .nav > li.active > a, .site-bg-primary .header-nav .nav > li.current-menu-item > a { color: #1a1a1a; } .site-bg-primary .site-search-btn, .site-bg-primary .wt-cart .woo-cart-total, .site-bg-primary .wt-cart .woo-cart-count { color: #fff; } .site-bg-primary .wt-cart .woo-cart-count, .site-bg-primary .wt-cart .woo-cart-count::before { border-color: #fff; } .site-bg-primary .navbar-toggle .icon-bar { background-color: #fff; } @media only screen and (max-width: 991px) { .site-bg-primary .header-nav .nav > li > a { color: #777; } .site-bg-primary .header-nav .nav > li:hover > a, .site-bg-primary .header-nav .nav > li.active > a, .site-bg-primary .header-nav .nav > li.current-menu-item > a { color: #ffbc13; } .header-nav .nav > li { margin: 0; padding: 0; } .header-nav .nav > li > a { margin: 0; padding: 10px 12px; display: block; } .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-right-btn { background: none; border: none; outline: none; color: #262423; font-size: 14px; height: 40px; line-height: 40px; width: 40px; display: inline-block; text-align: center; } /*===cart box ===*/ .cart-box-inner { width: 220px; border: 2px solid #666; position: fixed; right: -250px; background-color: #fff; } /*===cart box inner ===*/ .nav-cart-items { position: relative; } .nav-cart-items:before { border-bottom: 8px solid #efefef; border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; height: 0; position: absolute; right: 15px; top: -12px; width: 0; } .nav-cart-title { border-bottom: 1px solid #eee; } .nav-cart-title h4 { font-size: 15px; font-weight: 700; letter-spacing: 1px; margin: 0px; text-transform: uppercase; } .nav-cart-item { border-top: 1px solid #f5f5f5; margin-top: 15px; padding-top: 15px; } .nav-cart-item:first-child { border-top: 0 none; margin-top: 0; padding-top: 0; } .nav-cart-item-image { border: 2px solid #eee; float: left; height: 48px; margin-right: 15px; transition: border-color 0.2s linear 0s; width: 48px; } .nav-cart-item-image a, .nav-cart-item-image img { display: block; height: 44px; width: 44px; } .nav-cart-item-image:hover { border-color: #243447; } .nav-cart-item-desc { overflow: hidden; position: relative; } .nav-cart-item-desc a { font-size: 12px; height: auto; text-align: left; width: auto; color: #262423; } .nav-cart-item-desc a:hover { color: #243447; } .nav-cart-item-desc span.nav-cart-item-price { color: #999; display: block; font-size: 12px; line-height: 20px; } .nav-cart-item-desc a.nav-cart-item-quantity { color: #444; display: block; font-size: 12px; position: absolute; right: 0; top: 2px; padding: 0px 5px 2px 5px; } .nav-cart-item-desc a:hover.nav-cart-item-quantity { background-color: #262423; color: #fff; } .nav-cart-action { border-top: 1px solid #eee; } /*====================================== 19. BANNER ======================================*/ /*------------------------------------- 1. inner page banner -------------------------------------*/ .wt-bnr-inr { height: 500px; background-size: cover; background-position: center center !important; display: table; width: 100%; } .wt-bnr-inr .container { display: table; height: 100%; } .wt-bnr-inr-entry { display: table-cell; vertical-align: middle; text-align: center; } .wt-bnr-inr-entry .banner-title-outer { position: relative; } .wt-bnr-inr-entry .banner-title-outer .banner-title-name h2 { margin-bottom: 0; } @media only screen and (max-width: 991px) { .wt-bnr-inr { height: 330px; padding-top: 120px; } } @media only screen and (max-width: 1024px) { .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: 36px; line-height: normal; font-weight: normal; } } .banner-inner-row h1, .banner-inner-row h2, .banner-inner-row h3, .banner-inner-row h4, .banner-inner-row h5, .banner-inner-row h6 { color: #fff; } /*====================================== 20. SLIDER ======================================*/ /*------------------------------------- 1. owl slider -------------------------------------*/ /*------------------------------------- 1.1 next pre btn -------------------------------------*/ .owl-carousel .owl-nav { margin-top: 40px; text-align: center; } .owl-carousel .owl-nav .disabled { opacity: 0.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-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { background-color: #262423; color: #ffffff; padding: 8px 10px; width: 35px; height: 35px; text-align: center; font-size: 13px; display: inline-block; cursor: pointer; } .owl-carousel .owl-nav button.owl-prev { margin-right: 5px; } .owl-carousel .owl-nav button.owl-next { margin-left: 5px; } .owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-prev:active, .owl-carousel .owl-nav button.owl-prev:focus, .owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-next:active, .owl-carousel .owl-nav button.owl-next:focus { background-color: #212121; border-color: #212121; color: #ffffff; opacity: 0.9; } /*------------------------------------- 1.12 owl dots nav position -------------------------------------*/ .owl-dots-bottom-left .owl-dots, .owl-dots-bottom-right .owl-dots, .owl-dots-bottom-center .owl-dots { bottom: 0px; padding: 15px 20px; position: absolute; width: 100%; } .owl-dots-bottom-left .owl-dots { text-align: left; } .owl-dots-bottom-right .owl-dots { text-align: right; } /*====================================== 21. PAGINATION ======================================*/ /*1. pagination style-1 */ .pagination-bx .pagination, .cvf-universal-pagination .pagination { margin: 0; } .pagination { padding: 10px 0; } .pagination > li:first-child > a, .pagination > li:first-child > span { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: 0; } .pagination > li:last-child > a, .pagination > li:last-child > span { border-bottom-right-radius: 0; border-top-right-radius: 0; } .pagination > li > a, .pagination > li > span { background-color: #fff; border: 1px solid #e0e0e0; color: #767676; font-size: 12px; padding: 12px 16px; } .pagination > li > a { border-right: 0px; } .pagination > li:last-child > a { border-right: 1px solid #e0e0e0; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { background-color: #262423; border-color: transparent; color: #fff; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #262423; border-color: transparent; } .pagination > .previous > a, .pagination > .next > a { font-size: 12px; } /*====================================== 22. FOOTER ======================================*/ /*------------------------------------- 0. footer Large css -------------------------------------*/ .footer-large .footer-bottom { padding: 10px 0px; color: #787878; font-size: 16px; } /*------------------------------------- 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 { font-size: 30px; } .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: 25px; } .site-footer .widget ul { list-style: none; margin-top: 40px; } .footer-dark .footer-bottom .copyrights-text { color: #fff; } .footer-dark .footer-bottom .copyrights-nav { list-style: none; display: inline-block; margin-bottom: 0px; } .footer-dark .footer-bottom .copyrights-nav li { display: inline-block; margin-left: 8px; margin-right: 8px; } .footer-dark .footer-bottom .copyrights-nav li:first-child { margin-left: 0; } .footer-dark .footer-bottom .copyrights-nav li:last-child { margin-right: 0; } .footer-dark .footer-bottom .copyrights-nav li:last-child:after { display: none; } .footer-dark .footer-bottom .copyrights-nav li:after { content: "/"; position: relative; right: -8px; } .footer-dark .footer-bottom .copyrights-nav li a { color: #b7b7b7; } .footer-dark .footer-bottom .copyrights-nav li a:hover, .footer-dark .footer-bottom .copyrights-nav li a:active, .footer-dark .footer-bottom .copyrights-nav li a:focus, .footer-dark .footer-bottom .copyrights-nav li.active a { color: #fff; } .footer-dark .widget_services ul li a { color: #ddd; } .footer-bottom { padding: 100px 0px; color: #787878; font-size: 13px; } .footer-bottom .copyrights-text { color: #262423; } .footer-bottom .copyrights-nav { list-style: none; display: inline-block; } .footer-bottom .copyrights-nav li { display: inline-block; margin-left: 8px; margin-right: 8px; } .footer-bottom .copyrights-nav li:first-child { margin-left: 0; } .footer-bottom .copyrights-nav li:last-child { margin-right: 0; } .footer-bottom .copyrights-nav li:last-child:after { display: none; } .footer-bottom .copyrights-nav li:after { content: "/"; position: relative; right: -8px; } .footer-bottom .copyrights-nav li a { color: #262423; } .footer-bottom .copyrights-nav li a:hover, .footer-bottom .copyrights-nav li a:active, .footer-bottom .copyrights-nav li a:focus, .footer-bottom .copyrights-nav li.active a { color: #333333; } @media only screen and (max-width: 991px) { .site-footer { padding: 0px; } .copyright-block { padding-top: 5px; } } .footer-bottom .container { width: 100%; } /*------------------------------------- 2. Footer dark version css -------------------------------------*/ .footer-dark.site-footer { border-top: 0px solid #150e07; } .footer-dark .footer-top { background-color: #150e07; } .footer-dark .footer-bottom { background: linear-gradient(135deg, #00aee1, #033d85); } .footer-dark .footer-top h1, .footer-dark .footer-top h2, .footer-dark .footer-top h3, .footer-dark .footer-top h4, .footer-dark .footer-top h5, .footer-dark .footer-top h6, .footer-dark .footer-top h1 a, .footer-dark .footer-top h2 a, .footer-dark .footer-top h3 a, .footer-dark .footer-top h4 a, .footer-dark .footer-top h5 a, .footer-dark .footer-top h6 a { color: #323232; } .footer-dark .footer-top .widget-title::before { border-color: #fff; } .footer-dark .footer-top p, .footer-dark .footer-top strong, .footer-dark .footer-top b, .footer-dark .footer-top { color: #323232; } .footer-dark .footer-top a:active, .footer-dark .footer-top a:focus, .footer-dark .footer-top a:hover { color: #2f544c; } .footer-dark .footer-top p a { color: #fff; } .footer-dark .footer-top .widget_newsletter .form-control { background-color: #0e0e0e; border-color: #2d2d2d; } .footer-light .footer-top { background-color: #eee; } .footer-light .footer-bottom { background-color: #f6f7f8; } .footer-top { padding: 50px 0px 10px 0px; } .footer-wide .container-fluid { width: 100%; max-width: 1170; } @media only screen and (max-width: 1366px) { .footer-wide .container-fluid { width: 100%; max-width: 1170; } } @media only screen and (max-width: 991px) { .footer-wide .container-fluid { padding: 0px 80px; } } @media only screen and (max-width: 800px) { .footer-wide .container-fluid { padding: 0px 15px; } } /*------------------------------------- 5. widget Getintuch -------------------------------------*/ .footer-bottom ul { margin: 0; } .wt-footer-bot-left, .wt-footer-bot-right, .wt-footer-bot-center { padding-left: 15px; padding-right: 15px; } .wt-footer-bot-left { float: left; } .wt-footer-bot-right { float: right; } .wt-footer-bot-center { text-align: center; } @media only screen and (max-width: 991px) { footer .container { width: 100%; } .col-md-3.col-sm-6.footer-col-4:nth-child(3) { clear: both; } .wt-footer-bot-left, .wt-footer-bot-right { float: none; text-align: center; padding-top: 5px; padding-bottom: 5px; } .wt-footer-bot-right .copyrights-nav { float: none !important; } } @media only screen and (max-width: 767px) { .footer-clear { display: block !important; clear: both; } #footer .footer-4-col { width: 100%; } .footer-bottom [class*="clo-"] { width: 100%; } } /*------------------------------------- 6. scroll top btn css -------------------------------------*/ button.scroltop { height: 40px; width: 40px; background: #323232; 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 { 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: 10px; 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: 500; font-size: 50px; 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.no-margin { margin-bottom: 0; } .section-head h1, .section-head h2, .section-head h3 { margin-top: 0; font-family: "Cinzel", serif; font-weight:500; } @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; } } .title-small { display: block; color: #7a959d; margin-bottom: 15px; } .section-head p { padding-top: 20px; font-size: 14px; } .section-head p:last-child { margin-bottom: 0; } .text-center.section-head p { max-width: 800px; margin-left: auto; margin-right: auto; } .text-white { color: #fff; } .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p, .text-white .title-small { color: #fff; } /*------------------------------------- 2. Section Content Part -------------------------------------*/ @media only screen and (max-width: 1024px) { .section-full { background-attachment: scroll !important; } } @media only screen and (max-width: 480px) { .section-head h1, .section-head h2, .section-head h3 { font-size: 22px; } h1, h2, h3, .wt-post-title h1, .wt-post-title h2, .wt-post-title 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, ul.contact-info li h6 { margin: 0 0 10px; } ul.contact-info li p { line-height: 20px; margin: 0; } ul.contact-info li .fa { position: absolute; left: 0; top: 2px; color: #3396d1; font-size: 16px; } /*====================================== 25. THEMEFOREST REQUIRED CLASSES ======================================*/ .sticky { clear: both; } .gallery-caption { clear: both; } .bypostauthor { clear: both; } /*------------------------------------- 1. Text meant only for screen readers -------------------------------------*/ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /*====================================== 27. BOX MAX-WIDTH css ( ) ======================================*/ .max-w100 { max-width: 100px; } .max-w200 { max-width: 200px; } .max-w300 { max-width: 300px; } .max-w400 { max-width: 400px; } .max-w500 { max-width: 500px; } .max-w600 { max-width: 600px; } .max-w700 { max-width: 700px; } .max-w800 { max-width: 800px; } .max-w900 { max-width: 900px; } .max-w1000 { max-width: 1000px; } /*====================================== 28. SHOP & PRODUCT DETAIL (Woocommerce) ======================================*/ /*------------------------------------- 1. Product Box -------------------------------------*/ .wt-product-box .price { margin-bottom: 10px; } .wt-product-box .price del { font-size: 16px; color: #999999; margin: 4px 4px; } .wt-product-box .price ins { font-size: 16px; color: #111111; text-decoration: none; margin: 4px 4px; } .wt-product-box .rating-bx { padding-top: 10px; color: #ffa000; } .comment-reply-title { margin-top: 0; } .comment-form [class*="comment-form"] { width: 50%; } @media only screen and (max-width: 767px) { .comment-form [class*="comment-form"] { width: 100%; } } .comment-form [class*="-form-author"], .comment-form [class*="-form-email"] { float: left; } .comment-form [class*="-form-comment"] { width: 100%; } .comment-form label { display: block; } .star-Rating-input i { font-size: 18px; } .star-Rating-input .fa-star { color: #ffbc13; } .star-Rating-input i:hover { color: #ffbc13; } .comment-form [class*="comment-form"] input, .comment-form [class*="comment-form"] textarea { border: 1px solid #ccc; padding: 8px 10px; width: 100%; } .comment-form { margin: 0 -15px; } .comment-form [class*="comment-form"], .comment-form .form-submit { margin-bottom: 20px; padding: 0 15px; } .comment-form .form-submit input:active, .comment-form .form-submit input:focus, .comment-form .form-submit input:hover { background: #037a85; } /*====================================== 29. content show on image box () ======================================*/ @media only screen and (max-width: 768px) { .wt-media > img, .wt-media a > img { width: 100%; } } /*====================================== 30. Customize Grouping css ======================================*/ /*------------------------------------- 1.set-radius -------------------------------------*/ .btn, .panel, .form-control, .img-thumbnail, .panel-head ing, .dropdown-menu, .panel-group .panel, .nav-tabs > li > a, .modal-content, .navbar-toggle, .nav-pills > li > a, .pager li > a, .pager li > span, .well, .alert, .list-group-item:first-child, .list-group-item:last-child, .input-group-addon, .btn-group-divides > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group-divides > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child), .wt-booking-form .wt-extra-services li .wt-icon-box-lg, .wt-booking-form .wt-extra-services li.active .wt-icon-box-lg:after, .searchform input[type="text"], .searchform input[type="submit"], ol.comment-list li.comment .comment-body { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } /*------------------------------------- 2. transition -------------------------------------*/ a, .btn, .form-control, .overlay-bx, .overlay-icon li a i, .wt-icon-box-xld, .wt-icon-box-xl, .wt-icon-box-lg, .wt-icon-box-md, .wt-icon-box-sm, .wt-icon-box-xs, .share-social-bx li, .indicator, .profile-menu ul li, .staff-member .member-done, .how-wt-work .wt-box .shadow-bx img, .how-wt-work .wt-box .step-no-bx, .wt-info-has, .wt-we-find .wt-box, .navbar-toggle, .logo-header, .header-nav .nav > li > a, .extra-nav, .acod-head .indicator .fa { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .animate-slow { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .animate-mid { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .animate-fast { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } /*------------------------------------- 3. float-clearfix -------------------------------------*/ .clearfix::after, .filter-wrap::after, .filter-wrap::after, .wt-icon-box-wraper::after, ol.commentlist li::after { content: ""; display: table; clear: both; } /*====================================== 32. Inner pages ======================================*/ /*------------------------------------- 2. Out Team -------------------------------------*/ /*------------------------------------- 4. Product block -------------------------------------*/ .product-block p { margin-bottom: 0px; } /*====================================== 33. Background Effects ======================================*/ .bg-center { background-position: center; } .bg-top-left { background-position: top left; } .bg-top-right { background-position: top right; } .bg-top-center { background-position: top center; } .bg-bottom-left { background-position: bottom left; } .bg-bottom-right { background-position: bottom right; } .bg-bottom-center { background-position: bottom center; } .bg-left-center { background-position: left; } .bg-right-center { background-position: left; } .bg-auto { background-size: auto; } .bg-contain { background-size: contain; } .bg-cover { background-size: cover; } .bg-full-width { background-size: 100% auto; } .bg-full-height { background-size: auto 100%; } .bg-repeat { background-repeat: repeat; } .bg-no-repeat { background-repeat: no-repeat; } .bg-repeat-x { background-repeat: repeat-x; } .bg-repeat-y { background-repeat: repeat-y; } .bg-fixed { background-attachment: fixed; } .bg-scroll { background-attachment: scroll; } /*====================================== 34. Home Page ======================================*/ .h-about-img-wrap { position: relative; margin: 0px 40px 40px 80px; } .h-about-pic-shape { position: absolute; left: -40px; bottom: -40px; width: 100%; z-index: 0; } .h-about-pic { border: 10px solid #f8f8f8; position: relative; z-index: 1; background-color: #fff; } .h-about-pic img { width: 100%; } .h-about-since { display: inline-block; font-family: "Jost", sans-serif; text-align: center; width: 200px; position: absolute; bottom: 10px; left: 10px; z-index: 1; background-color: rgba(255, 255, 255, 0.8); } .h-about-sincespan { display: block; } @media only screen and (max-width: 991px) { .h-about-img-wrap { position: relative; margin: 0px 0px 40px 40px; } .index-about2 { margin-left: 0px; } .section-full.p-tb90 { padding-top: 50px; padding-bottom: 50px; } } @media only screen and (max-width: 360px) { .h-about-pic-shape { left: -20px; bottom: -20px; } .h-about-img-wrap { margin: 0px 0px 20px 20px; } } .hilite-title { font-family: "Jost", sans-serif; } .hilite-block { position: absolute; z-index: 0; } .hilite-block.light-text { color: rgba(221, 221, 221, 0.2); } .hilite-block.dark-text { color: #efefef; } .hilite-block.left { left: 80px; } .hilite-block.right { right: 80px; } .carousel-bg-img { position: absolute; right: -65px; top: -50px; width: 100%; } @media only screen and (max-width: 991px) { .hilite-title { display: none; } } @media only screen and (max-width: 768px) { .m-carousel-2 { margin-right: 65px; } } @media only screen and (max-width: 620px) { .carousel-bg-img { display: none; } } @media only screen and (max-width: 460px) { .m-carousel-2 .carousel-hover .carousel-line h2 { font-size: 18px; } .m-carousel-2 .carousel-hover .carousel-line p { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .m-carousel-2 .wt-carousel-info { width: 100%; padding: 25px; } } /*====================================== 35. Carousel overlay content ======================================*/ .wt-carousel-block { position: relative; } .wt-carousel-info { position: absolute; bottom: 0px; z-index: 2; } .carousel-line { position: relative; } .carousel-line:after, .carousel-line:before { position: absolute; content: ""; background-color: #fff; } .carousel-line:after { width: 100px; height: 6px; left: -40px; bottom: -20px; } .carousel-line:before { width: 6px; height: 100px; left: -20px; bottom: -40px; } .carousel-hover .owl-item .gradi-black:before { opacity: 0; } .carousel-hover .owl-item.active .gradi-black:before { opacity: 1; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; } .carousel-hover .wt-carousel-info { bottom: -300px; opacity: 0px; } .carousel-hover .owl-item.active .wt-carousel-info { bottom: 0px; opacity: 1px; -webkit-transition: all 1.5s linear; -moz-transition: all 1.5s linear; -ms-transition: all 1.5s linear; -o-transition: all 11.5s linear; transition: all 1.5s linear; } @media only screen and (max-width: 460px) { .carousel-line::after { width: 80px; height: 4px; left: -17px; bottom: -10px; } .carousel-line::before { width: 4px; height: 80px; left: -12px; bottom: -16px; } } /*=========================== 36. Overlay Box 2 ===========================*/ .overlay-bx-2 { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; z-index: 1; background-color: #262423; opacity: 0; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .overlay-bx-2:hover { opacity: 0.9; bottom: 0px; } /*=========================== 37. line-filter-block ===========================*/ .line-filter { position: relative; width: 100%; height: 100%; } .line-filter:after { content: ""; position: absolute; background-color: transparent; border: 1px solid #fff; left: 5%; top: 5%; width: 90%; height: 90%; z-index: 1; } .line-filter:before { content: ""; position: absolute; border: 1px solid #262423; border-left: 0px; border-right: 0px; left: 12%; top: 5%; width: 76%; height: 90%; z-index: 2; } .line-filter2:before { content: ""; position: absolute; border: 1px solid #262423; border-top: 0px; border-bottom: 0px; left: 5%; top: 10%; width: 90%; height: 80%; z-index: 3; } .line-filter .filter-content { position: relative; z-index: 10; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .line-filter a.v-button { width: 20px; height: 20px; font-size: 10px; color: #262423; text-align: center; display: block; line-height: 22px; background-color: #fff; z-index: 4; } .line-filter a:hover.v-button { background-color: #2f544c; } @media only screen and (max-width: 420px) { .line-filter a.v-button { bottom: 70px; } } /*=========================== 38. latest-blog-dark ===========================*/ .latest-blog-dark-outer { height: 250px; } .latest-blog-dark { position: absolute; left: -20px; bottom: 20px; width: 260px; min-height: 120px; background-color: #262423; padding-left: 40px; } .latest-blog-dark .v-date { position: absolute; left: -25px; top: 50px; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } /*latest-blog-dark2*/ /*=========================*/ .latest-blog-dark-outer2 { height: 530px; } .latest-blog-square { position: absolute; right: -60px; bottom: 60px; width: 400px; min-height: 400px; padding: 25px 70px 25px 25px; border: 15px solid #262423; } .latest-blog-square .v-date { position: absolute; left: -90px; top: 50px; font-size: 16px; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } @media only screen and (max-width: 1024px) { .latest-blog-square { right: 15px; width: 80%; } .latest-blog-dark { left: 20px; } } @media only screen and (max-width: 480px) { .latest-blog-square { padding: 15px; } } /*=========================*/ .some-facts { position: relative; padding: 60px 30px 60px 50px; border: 15px solid #fff; border-right: 0px; } .some-facts:after, .some-facts:before { content: ""; position: absolute; background-color: #fff; right: -15px; width: 15px; height: 140px; } .some-facts:after { bottom: -15px; } .some-facts:before { top: -15px; } .some-facts-counter { padding-top: 130px; } @media only screen and (max-width: 991px) { .some-facts { margin-right: 15px; } .some-facts-counter { padding-top: 40px; } } @media only screen and (max-width: 768px) { .some-facts:after, .some-facts:before { height: 100px; } } @media only screen and (max-width: 480px) { .some-facts { padding: 20px; } .some-facts span { font-size: 24px; line-height: inherit; } .some-facts h2 { font-size: 24px; line-height: inherit; } .some-facts p { font-size: 14px; line-height: inherit; } } /*=========================*/ .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav { position: absolute; margin-top: 0px; top: -10px; left: -80px; } .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-prev { left: 40px; position: relative; background-color: #1a1a1a; margin: 0px; } .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-next { left: 5px; position: relative; top: 40px; background-color: #1a1a1a; margin: 0px; } @media only screen and (max-width: 800px) { .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav { left: auto; right: 5px; top: auto; bottom: -47px; } .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-prev { left: 0px; } .home-client-carousel.owl-btn-center-v.owl-carousel .owl-nav .owl-next { left: 5px; top: 0px; } } /*========================= 39. background Square block =========================*/ /*========================= 40. About us =========================*/ .m-about { position: relative; z-index: 2; } .m-about:after { content: ""; position: absolute; width: 100%; height: 80%; background-color: #f5f7f6; right: -100px; bottom: 0%; z-index: -1; } @media only screen and (max-width: 767px) { .m-about { margin: 0px 0px 0px 50px; } .m-about-containt { margin-top: 60px; } } /*====================================== 42. Contact Us ======================================*/ .contact-one { position: relative; } .contact-one .form-control { border: 0px; border-bottom: 2px solid #262423; } .contact-one .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #323232; font-size: 13px; text-transform: uppercase; } .contact-one .form-control::-moz-placeholder { /* Firefox 19+ */ color: #323232; font-size: 13px; text-transform: uppercase; } .contact-one .form-control:-ms-input-placeholder { /* IE 10+ */ color: #323232; font-size: 13px; text-transform: uppercase; } .contact-one .form-control:-moz-placeholder { /* Firefox 18- */ color: #323232; font-size: 13px; text-transform: uppercase; } .contact-one textarea.form-control { min-height: 80px; } .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); } .work-carousel .wt-img-effect img { float: left; width: 50%; } .work-carousel .wt-img-effect .wt-info { position: absolute; top: 50%; width: 50%; right: 0%; padding: 30px; z-index: 2; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (max-width: 1136px) { .work-carousel .wt-img-effect .wt-info { padding: 15px; } .work-carousel .wt-img-effect .wt-info h3 { font-size: 16px; line-height: 20px; } } @media only screen and (max-width: 991px) { .work-carousel .owl-stage { padding-top: 35px; padding-bottom: 35px; } .work-carousel .owl-item.active.center { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @media only screen and (max-width: 540px) { .work-carousel .wt-img-effect img { float: none; width: 100%; clear: both; } .work-carousel .wt-img-effect .wt-info { position: inherit; width: 100%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } } /*========================= 45. our-story =========================*/ .our-story .our-story-detail { padding: 15px 0px; } .our-story .row { margin-top: 62px; margin-bottom: 62px; position: relative; } .our-story .row:last-child { margin-bottom: 0px; } .our-story .row:nth-child(odd) { text-align: left; } .our-story .row:nth-child(even) { text-align: right; flex-direction: row-reverse; } .our-story .row:nth-child(even) [class*="col-"] { float: right; } .our-story .row:nth-child(odd) .our-story-detail { margin-left: 50px; } .our-story .row:nth-child(even) .our-story-detail { margin-right: 50px; } .our-story .row:nth-child(odd) .our-story-pic { margin-right: 50px; } .our-story .row:nth-child(even) .our-story-pic { margin-left: 50px; } /*| line=====================*/ .our-story { position: relative; z-index: 0; } .our-story:after { content: ""; position: absolute; width: 2px; background-color: #262423; height: 100%; z-index: 0; } .our-story:after { left: 50%; top: 0px; } .our-story .row:last-child:nth-child(even) .our-story-pic:after { height: 100%; } /*_ line=====================*/ .our-story .row:nth-child(odd) .our-story-pic-block:before, .our-story .row:nth-child(even) .our-story-pic-block:before { content: ""; position: absolute; height: 100px; width: 2px; background-color: #262423; top: 0px; z-index: -1; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); } .our-story .row:nth-child(odd) .our-story-pic-block:before { right: 50px; } .our-story .row:nth-child(even) .our-story-pic-block:before { left: 50px; } /* line circle O=================*/ .our-story .row:nth-child(odd) .our-story-pic-block:after, .our-story .row:nth-child(even) .our-story-pic-block:after { content: ""; position: absolute; height: 30px; width: 30px; border: 2px solid #262423; background-color: #fff; z-index: 3; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .our-story .row:nth-child(odd) .our-story-pic-block:after { right: -28px; top: 35px; } .our-story .row:nth-child(even) .our-story-pic-block:after { left: -28px; top: 35px; } @media only screen and (max-width: 767px) { .our-story .row:nth-child(even) [class*="col-"] { float: left; } .our-story .row:nth-child(even) { text-align: left; flex-direction: inherit; } .our-story .row:nth-child(odd) .our-story-pic { margin-right: 0px; margin-left: 50px; } .our-story .row:nth-child(even) .our-story-detail { margin-right: 0px; margin-left: 50px; } .our-story .row:nth-child(even) { text-align: left; } .our-story:after { left: 15px; } .our-story .row:nth-child(odd) .our-story-pic-block:after { left: 0px; right: auto; } .our-story .row:nth-child(even) .our-story-pic-block:after { left: 0px; } .our-story .row:nth-child(odd) .our-story-pic-block:before { left: 80px; } .our-story .row:nth-child(even) .our-story-pic-block:before { right: auto; left: 80px; } } .our-story-pic-block { position: relative; } .notification-animate:before { content: ""; border: 5px solid rgb(193, 155, 118); position: absolute; background: none; width: 24px; height: 24px; border-radius: 50%; -webkit-animation: bounceScale 2s cubic-bezier(0.3, 0, 0.7, 1) infinite 0.5s; animation: bounceScale 2s cubic-bezier(0.3, 0, 0.7, 1) infinite 0.5s; z-index: -1; } .notification-animate:after { content: ""; position: absolute; background: #2f544c; width: 10px; height: 10px; border-radius: 50%; z-index: 4; } .our-story .row:nth-child(odd) .notification-animate:before { top: 38px; right: -24px; } .our-story .row:nth-child(even) .notification-animate:before { top: 38px; left: -24px; } .our-story .row:nth-child(odd) .notification-animate:after { top: 44px; right: -18px; } .our-story .row:nth-child(even) .notification-animate:after { top: 44px; left: -18px; } @media only screen and (max-width: 767px) { .our-story .row:nth-child(odd) .notification-animate:before { right: auto; left: 3px; top: 38px; } .our-story .row:nth-child(even) .notification-animate:before { right: auto; left: 3px; top: 38px; } .our-story .row:nth-child(odd) .notification-animate:after { right: auto; left: 10px; } .our-story .row:nth-child(even) .notification-animate:after { right: auto; left: 10px; } } @-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 =================*/ .blink-circle { width: 60px; height: 60px; background: #fff; border-radius: 50%; position: relative; display: block; margin: 20px auto; } /* triangle */ .blink-circle::after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-40%) translateY(-50%); transform: translateX(-40%) translateY(-50%); transform-origin: center center; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #ff0000; z-index: 100; -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } /* pulse wave */ .blink-circle:before { content: ""; position: absolute; width: 150%; height: 150%; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation: pulsate1 2s; animation: pulsate1 2s; -webkit-animation-direction: forwards; animation-direction: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: steps; animation-timing-function: steps; opacity: 1; border-radius: 50%; top: -25%; left: -25%; background: #fff; } @-webkit-keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } @keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } /*========================================================= =============================================================*/ /* * 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; } .owl-carousel-filter2 .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); padding-top: 10px; } .owl-carousel-filter3 .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); padding-top: 20px; } @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; } } /*===============================*/ .filter-content-left { width: 25%; float: left; margin-top: 20px; padding-right: 15px; border-left: 3px solid #262423; } .filter-content-left .btn-filter-wrap { float: left; } .filter-content-left .btn-filter-wrap li { display: block; font-size: 18px; padding: 0px 0px 10px 20px; } .filter-content-left .btn-filter-wrap li::after { display: none; } .filter-content-right { width: 75%; float: left; } .btn-filter-wrap, .btn-filter-wrap2, .btn-filter-wrap3 { list-style: none; } .btn-filter-wrap li { position: relative; display: inline-block; font-size: 14px; text-transform: uppercase; color: #262423; padding: 0 20px; cursor: pointer; } .btn-filter-wrap2 li { position: relative; display: inline-block; font-size: 14px; text-transform: uppercase; color: #262423; padding: 0 20px; cursor: pointer; } .btn-filter-wrap3 li { position: relative; display: inline-block; font-size: 14px; 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: #2f544c; } .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; } } @media only screen and (max-width: 768px) { .filter-content-left, .filter-content-right { width: 100%; float: none; clear: both; } .filter-content-left .btn-filter-wrap li { display: block; font-size: 14px; padding: 0px 20px 10px 0px; float: left; } } /*=============== PARTICLE CANVAS =================*/ .particles-canvas { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } #particles-js { position: absolute; width: 50%; height: 100%; background-color: #b61924; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } #particles-js2 { position: absolute; right: 0px; width: 50%; height: 100%; background-color: #888; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /*======================= 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==================*/ .slider-text-90 { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .readmore-line a { display: inline-block; position: relative; color:#000!important; font-weight:500; margin-top: 12px; } .readmore-line a:after { content: ""; position: absolute; width: 30px; height: 1px; right: -40px; top: 10px; background-color: #2f544c; -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; } .readmore-line a:hover:after { width: 10px; background-color: #262423; } .readmore-line a:hover { color: #262423; } .readmore-line-light a { display: inline-block; position: relative; } .readmore-line-light a:after { content: ""; position: absolute; width: 30px; height: 1px; right: -40px; top: 10px; background-color: #262423; -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; } .readmore-line-light a:hover:after { width: 10px; } /* ===============Team==================*/ .our-team-reverse { } .our-team-reverse .row:nth-child(even) [class*="col-"] { float: right; } .wt-team-arc .wt-media { width: 100%; height: 100%; } .wt-team-arc .wt-info { position: relative; height: 100%; } .wt-team-arc .wt-info .team-detail { position: relative; z-index: 10; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .wt-team-arc .wt-info .social-icons { font-size: 14px; margin-bottom: 0px; text-align: center; position: absolute; bottom: 20px; width: 100%; } @media only screen and (max-width: 991px) { .our-team-reverse .row .equal-col { height: inherit !important; } .our-team-reverse .row .equal-col .wt-info { padding: 20px; } .our-team-reverse .wt-team-arc { margin-bottom: 30px; } .our-team-reverse .wt-team-arc .wt-info .team-detail { top: inherit; transform: none; } .our-team-reverse .wt-team-arc .wt-info .social-icons { position: inherit; bottom: auto; } } @media only screen and (max-width: 600px) { .our-team-reverse .row:nth-child(even) [class*="col-"] { float: none; } } .wt-team-arc2 { margin-top: 50px; } .wt-team-arc2 .wt-media { padding: 30px; margin-bottom: 30px; position: relative; z-index: 1; } .wt-team-arc2 .wt-media:after { content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 5px solid #1a1a1a; z-index: -1; } .wt-team-arc2 .wt-media img { margin-top: -70px; position: relative; z-index: 2; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .wt-team-arc2 p { margin-bottom: 0px; } .wt-team-arc2 .team-social-center { padding-top: 0px; position: absolute; width: 100%; left: 0; bottom: 50px; z-index: 1; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .wt-team-arc2 .team-social-icon { text-align: center; list-style: none; } .wt-team-arc2 .team-social-icon li { display: inline-block; margin: 0px 5px; } .wt-team-arc2 .team-social-icon li a { color: #262423; font-size: 14px; border: 2px solid #262423; width: 30px; height: 30px; line-height: 26px; text-align: center; } .wt-team-arc2 .team-social-icon li a:hover { background-color: #2f544c; } .wt-team-arc2 .team-social-icon li:hover a { color: #262423; } .wt-team-arc2:hover .wt-media img { -moz-transform: translateX(0px) translateY(-30px); -webkit-transform: translateX(0px) translateY(-30px); -o-transform: translateX(0px) translateY(-30px); -ms-transform: translateX(0px) translateY(-30px); transform: translateX(0px) translateY(-30px); } .wt-team-arc2:hover .team-social-center { bottom: -5px; } .wt-team-arc2.team-style2 { margin-top: 100px; } .wt-team-arc2:hover.team-style2 .team-social-center { bottom: -40px; } .wt-team-arc2.team-style2 .wt-media:after { display: none; } .wt-team-arc2.team-style2 .wt-media { padding: 0px; } /* ===============Line corner ==================*/ .line-corner-outer { position: relative; z-index: 1; } .line-corner { width: 20px; height: 20px; position: absolute; } .line-corner.top-left { left: 10px; top: 10px; border-style: solid; border-width: 1px 0px 0px 1px; border-color: #262423; } .line-corner.top-right { right: 10px; top: 10px; border-style: solid; border-width: 1px 1px 0px 0px; border-color: #262423; } .line-corner.bottom-left { left: 10px; bottom: 10px; border-style: solid; border-width: 0px 0px 1px 1px; border-color: #262423; } .line-corner.bottom-right { right: 10px; bottom: 10px; border-style: solid; border-width: 0px 1px 1px 0px; border-color: #262423; } /* =============== 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: #2f544c; } /* =============== Project Detail ==================*/ .project-detail-outer .project-detail-pic .wt-media img { width: 100%; } /* =============== Fixed ==================*/ .wt-full-screen-left { background-color: #ddd; height: 100%; left: 245px; padding-left: 0; position: fixed; top: 0; width: calc(50% - 245px); } .wt-full-screen-right { position: fixed; right: 0; top: 0; width: 50%; height: 100%; padding: 30px 15px; overflow-x: hidden; } .wt-thum-spacial { width: 100%; height: 100%; left: 0; position: absolute; top: 0; border: 20px solid #fff; background-position: center center; background-repeat: no-repeat; background-size: cover; } .wt-thum-spacial.wt-wide-gallery { border: none; } .wt-gallery-listing { list-style: none; margin: 0; padding: 0; } .wt-gallery-listing li { margin: 0 0 30px; } .wt-full-screen-right.wt-wide-gallery { padding: 0; } .wt-full-screen-right.wt-wide-gallery .wt-gallery-listing li { margin-bottom: 0; } /*=============================================== left shortcodes =============================================== */ .shortcodes_panel ul { list-style: none; padding-left: 0; margin-bottom: 0; } .shortcodes_panel ul li { margin-bottom: 13px; border-bottom: 1px solid #e1e1e1; position: relative; padding: 5px 10px 5px 0px; margin-bottom: 0; line-height: 20px; } .shortcodes_panel ul li { text-transform: uppercase; font-size: 12px; } .shortcodes_panel ul li a { color: #262423; } .shortcodes_panel ul li a:hover { color: #2f544c; } .shortcodes_panel li { border-bottom: none; line-height: 28px; } .shortcodes_panel li:before { top: 0; left: 1px; } .shortcodes_panel.inline-links li { display: block; border-bottom: none; } /*=============================================== Modal =============================================== */ .button-model button { min-width: 200px; text-align: center !important; text-transform: uppercase; } .modal-footer button { min-width: inherit; } .button-model button.close { min-width: inherit; } @media only screen and (max-width: 640px) { h2.font-45 { font-size: 32px; line-height: 38px; } h2 a.font-45 { font-size: 32px; line-height: 38px; } } @media only screen and (max-width: 360px) { h2.font-45 { font-size: 22px; line-height: 28px; } h2 a.font-45 { font-size: 22px; line-height: 28px; } } /*=============================================== Responsive container =============================================== */ .outer-box-specing { padding-left: 80px; padding-right: 80px; } @media only screen and (max-width: 1366px) { .outer-box-specing .container { width: 100%; max-width: 1170px; } } @media only screen and (max-width: 800px) { .outer-box-specing { padding-left: 0px; padding-right: 0px; } .aside-right-item { position: absolute; right: -20px; top: 0px; bottom: auto; } } @media only screen and (max-width: 800px) { .counter.font-60 { font-size: 36px; } } @media only screen and (max-width: 768px) { .counter.font-60 { font-size: 28px; } .testimonial-6 { margin: 20px 10px; } } @media only screen and (max-width: 420px) { .testimonial-6 { text-align: center; } .testimonial-6 .testimonial-pic-block { float: none; margin-bottom: 20px; } .testimonial-6 .testimonial-text { padding-left: 0px; } } /*------------------------------------- 1. Top Part Search Bar -------------------------------------*/ .site-search-btn { background: none; border: none; outline: none; color: #fff; font-size: 16px; width: 40px; display: inline-block; text-align: center; } .left-side-search a { font-size: 16px; display: block; width: 40px; line-height: 40px; text-align: center; } #search .input-group { display: flex; flex-wrap: nowrap; align-items: center; } #search .input-group input { outline: none !important; padding: 4px 10px; font-size: 14px; } #search .input-group input:focus { background-color: #fafafa; } #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 .search-btn { border: none; background: none; padding: 0px 30px; } #search .search-btn i { font-size: 36px; } #search .close { position: fixed; top: 15px; right: 15px; opacity: 1; font-size: 27px; color: #fff; width: 30px; height: 30px; } #search .close:after, #search .close:before { content: ""; position: absolute; width: 2px; height: 32px; background-color: #262423; right: 20px; top: 0px; } #search .close:after { -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg); } #search .close:before { -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari */ transform: rotate(-45deg); } #search .close:hover:after, #search .close:hover:before { cursor: pointer; } @media only screen and (max-width: 768px) { #search form { width: 90%; margin-left: 5%; font-size: 26px; } #search input[type="search"] { padding: 0px 0px 0px 30px; } #search .search-btn { padding: 0px 15px; } #search .search-btn i { font-size: 24px; } } @media only screen and (max-width: 400px) { #search form { font-size: 16px; } #search input[type="search"] { padding: 0px 0px 0px 10px; } #search .search-btn { padding: 0px 15px; } #search .search-btn i { font-size: 18px; } } #contact_us_popup { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -moz-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); -o-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0; display: none; } #contact_us_popup.open { -webkit-transform: translate(0px, 0px) scale(1, 1); -moz-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); -o-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; z-index: 999; display: block; } #contact_us_popup form { position: absolute; top: 50%; left: 0; margin-top: -51px; width: 60%; margin-left: 20%; color: #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; } #contact_us_popup input[type="search"] { width: 100%; background: none; border: none; padding: 0px 30px; } #contact_us_popup .search-btn { border: none; background: none; padding: 0px 30px; } #contact_us_popup .search-btn i { font-size: 36px; } #contact_us_popup .close { position: fixed; top: 15px; right: 15px; opacity: 1; font-size: 27px; color: #fff; width: 30px; height: 30px; } #contact_us_popup .close:after, #contact_us_popup .close:before { content: ""; position: absolute; width: 2px; height: 32px; background-color: #262423; right: 20px; top: 0px; } #contact_us_popup .close:after { -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg); } #contact_us_popup .close:before { -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari */ transform: rotate(-45deg); } #contact_us_popup .close:hover:after, #contact_us_popup .close:hover:before { cursor: pointer; } @media only screen and (max-width: 768px) { #contact_us_popup form { width: 90%; margin-left: 5%; font-size: 26px; } #contact_us_popup input[type="search"] { padding: 0px 0px 0px 30px; } #contact_us_popup .search-btn { padding: 0px 15px; } #contact_us_popup .search-btn i { font-size: 24px; } } @media only screen and (max-width: 400px) { #contact_us_popup form { font-size: 16px; } #contact_us_popup input[type="search"] { padding: 0px 0px 0px 10px; } #contact_us_popup .search-btn { padding: 0px 15px; } #contact_us_popup .search-btn i { font-size: 18px; } } .wt-quik-search .form-control::-moz-placeholder { color: #fff; } .wt-quik-search .form-control:-moz-placeholder { color: #fff; } .wt-quik-search .form-control:-ms-input-placeholder { color: #fff; } .wt-quik-search .form-control::-webkit-input-placeholder { color: #fff; } @media only screen and (max-width: 767px) { .site-search { width: 100%; } .site-search .site-button { padding: 0; } .site-search form { padding-left: 0; } } /*====================================== 59. animated play btn ======================================*/ .video-play-btn2 { position: absolute; left: 50%; top: 50%; display: block; background: #fff; border-radius: 50%; z-index: 10; width: 60px; height: 60px; -webkit-transform: translateX(-40%) translateY(-50%); transform: translateX(-40%) translateY(-50%); transform-origin: center center; } /* triangle */ .video-play-btn2::after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-40%) translateY(-50%); transform: translateX(-40%) translateY(-50%); transform-origin: center center; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #262423; z-index: 100; -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } /* pulse wave */ .video-play-btn2:before { content: ""; position: absolute; width: 150%; height: 150%; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation: pulsate1 2s; animation: pulsate1 2s; -webkit-animation-direction: forwards; animation-direction: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: steps; animation-timing-function: steps; opacity: 1; border-radius: 50%; top: -25%; left: -25%; background: #fff; } @-webkit-keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } @keyframes pulsate1 { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.3; } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; box-shadow: none; } } /*================inner pages css=======*/ @media only screen and (max-width: 991px) { .m-about-containt { padding-top: 0px; margin-top: 0px; } .m-about-containt h2 { font-size: 36px; line-height: normal; margin-top: 0px; } } @media only screen and (max-width: 768px) { .m-about { padding: 0px; margin: 0px; } .m-about::after { display: none; } } /*------------------------------------- 7. extra cell position -------------------------------------*/ /*=============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; } .side-social-nav { display: table; width: 100%; height: 100%; } .side-social-nav ul { padding-top: 60px; display: table-cell; vertical-align: middle; } .side-social-nav a.socialicon_close { position: absolute; right: 0px; top: 0px; width: 100%; border: none; font-size: 36px; } .side-social-nav a { margin: 30px 0px; text-decoration: none; font-size: 14px; color: #262423; display: block; text-align: center; transition: 0.3s; position: relative; } .side-social-nav a .social-tooltip { padding: 4px 15px; position: absolute; right: 100%; top: 0px; background-color: #2f544c; color: #262423; display: block; width: auto; text-align: right; display: none; font-family: "Jost", sans-serif; font-size: 12px; border-radius: 3px; white-space: nowrap; } .side-social-nav a:hover .social-tooltip { display: block; } .social-tooltip:after, .social-tooltip:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; } .social-tooltip:after { border-left-color: #2f544c; border-width: 6px; margin-top: -6px; } .social-tooltip:before { border-left-color: #2f544c; border-width: 6px; margin-top: -6px; } .side-social-nav a:hover.socialicon_close { color: #2f544c; background-color: transparent; border: none; } .side-social-nav a:hover { color: #2f544c; } .side-social-nav .closebtn { position: absolute; top: 0; right: 0px; font-size: 36px; width: 100%; text-align: right; padding-right: 20px; } @media screen and (max-height: 450px) { .side-social-nav a { font-size: 18px; } .side-social-nav { padding-top: 60px; } } /*====revolution slider styles=======*/ .rev-slider-style-1 { padding: 70px 90px !important; border: 12px solid #000; z-index: 20; box-shadow: 10px 10px 10px inset rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.5); } .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=======*/ .our-ability [class*="col-"] .wt-icon-box-wraper { position: relative; } .our-ability [class*="col-"] .wt-icon-box-wraper:after { content: ""; position: absolute; height: 50px; width: 1px; top: 0px; right: -15px; background-color: #262423; -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); } .our-ability [class*="col-"]:last-child .wt-icon-box-wraper:after { display: none; } @media only screen and (max-width: 991px) { .our-ability [class*="col-"] .wt-icon-box-wraper:after { display: none; } } .wt-team-arc2 .wt-media img { width: 100%; } /*=========== Flat Icons ============*/ .icon-font-block { text-align: center; margin-bottom: 30px; } .icon-font-block .flat-icon { padding: 10px; display: block; font-size: 64px; line-height: 1; } /*=========== bg-change-section ============*/ .bg-change-section { position: relative; } .bg-change-section .overlay-main { z-index: 1; } .bg-changer { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .section-bg { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: -1; } .bg-changer .section-bg:first-child { opacity: 1; } .bg-changer .section-bg { opacity: 0; will-change: opacity, transform; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; -o-transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease; } .bg-changer .section-bg.active { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .bgcall-block { cursor: pointer; } @media only screen and (max-width: 767px) { .bg-change-section .no-col-gap { margin: 0px; } } /*====================================== Clients logo grid ======================================*/ .client-grid { overflow: hidden; } .client-grid [class*="col-"] { position: relative; z-index: 1; } .client-grid [class*="col-"] a { display: block; padding: 10px 20px; text-align: center; } .client-grid [class*="col-"]:after { content: ""; position: absolute; border-bottom: 1px dashed #dcdcdc; border-left: 1px dashed #dcdcdc; position: absolute; left: -1px; bottom: -1px; height: 100%; width: 100%; z-index: -1; } .client-logo-media + .tooltip { bottom: auto !important; top: 50px !important; z-index: 10; } .grid-5 [class*="col-"] { width: 20%; } .grid-4 [class*="col-"] { width: 25%; } .grid-3 [class*="col-"] { width: 33.33%; } .grid-2 [class*="col-"] { width: 50%; } @media only screen and (max-width: 991px) { .grid-5 [class*="col-"] { width: 25%; } } @media only screen and (max-width: 767px) { .grid-5 [class*="col-"], .grid-4 [class*="col-"], .grid-3 [class*="col-"] { width: 50%; } } @media only screen and (max-width: 360px) { .grid-5 [class*="col-"], .grid-4 [class*="col-"], .grid-3 [class*="col-"] { width: 100%; } } /* 17.2 select box */ .dropdown-menu { font-size: 13px; } .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 100%; } .bootstrap-select .dropdown-toggle { border: 1px solid #e7ecf1 !important; background-color: #fff !important; height: 40px; font-size: 13px; color: #999; } .bootstrap-select .dropdown-toggle:after { display: none; } .bootstrap-select .dropdown-toggle:active, .bootstrap-select .dropdown-toggle:focus, .bootstrap-select .dropdown-toggle:hover { background-color: #fff !important; border: 1px solid #e9e9e9 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; outline: 0px !important; } .bootstrap-select:active, .bootstrap-select:focus { border: 0px !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; outline: 0px !important; } .bootstrap-select.open { box-shadow: none !important; outline: 0px !important; } .bootstrap-select.open .dropdown-toggle { box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; outline: 0px !important; } .bootstrap-select div.dropdown-menu { border: 1px solid #e9e9e9; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; box-shadow: none; margin-top: -1px; padding: 0; font-size: 13px; } .bootstrap-select div.dropdown-menu ul li { padding: 0; } .bootstrap-select div.dropdown-menu ul li a { padding: 5px 15px; } .bootstrap-select div.dropdown-menu ul li a img { border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; margin-right: 5px; } .bootstrap-select .bs-searchbox .form-control { padding: 5px 10px; height: 30px; } /*check in check out div*/ .clickable { cursor: pointer; } .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-bar.booking-bar-2 { margin-top: 0px; padding: 10px 0px; margin-bottom: 0px; } .booking-bar.booking-bar-2 .booking-bar-inner { display: table; width: 100%; padding: 20px; box-shadow: none; } .booking-form { display: table-cell; vertical-align: middle; } .booking-form ul { list-style: none; display: table; width: calc(113% - 20px); margin: 0px -10px; } .booking-form ul li { display: table-cell; vertical-align: bottom; padding: 0px 10px; color: #fff; } .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-fram-name h3 { color: #fff; font-size: 30px; } .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: 20px; } .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.children-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: 20px; } } /*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 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; } .hover-box-effect:hover { background-color: #2f544c; color: #fff; background-image: url(../images/background/bg-5.png); background-repeat: repeat; } .hover-box-effect:hover .wt-tilte { color: #fff; } .hover-box-effect:hover p { color: #fff; } /*========== Icon Verticle Animation =============*/ .v-icon { display: block; cursor: pointer; text-align: center; position: relative; z-index: 1; overflow: hidden; } .v-icon:before { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; } /* Effect 5 */ .v-icon-effect:hover .v-icon:before { -webkit-animation: toTopFromBottom 0.3s forwards; -moz-animation: toTopFromBottom 0.3s forwards; animation: toTopFromBottom 0.3s forwards; } @-webkit-keyframes toTopFromBottom { 49% { -webkit-transform: translateY(-100%); } 50% { opacity: 0; -webkit-transform: translateY(100%); } 51% { opacity: 1; } } @-moz-keyframes toTopFromBottom { 49% { -moz-transform: translateY(-100%); } 50% { opacity: 0; -moz-transform: translateY(100%); } 51% { opacity: 1; } } @keyframes toTopFromBottom { 49% { transform: translateY(-100%); } 50% { opacity: 0; transform: translateY(100%); } 51% { opacity: 1; } } .slider-text-outline { opacity: 0.3; color: #fff; -webkit-text-fill-color: rgba(0, 0, 0, 0); -ms-text-fill-color: rgba(0, 0, 0, 0); -moz-text-fill-color: rgba(0, 0, 0, 0); -o-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke-width: 2px; -ms-text-stroke-width: 2px; -moz-text-stroke-width: 2px; -o-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; -ms-text-stroke-color: #fff; -moz-text-stroke-color: #fff; -o-text-stroke-color: #fff; } /*====rev-slider====*/ .tp-thumbs-inner-wrapper .tp-thumb.selected:after { content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 5px solid #2f544c; } /*====home about section====*/ .home-about-block-inner { padding: 60px 100px 60px 30px; position: relative; } .home-about-block-inner:after { position: absolute; content: ""; right: 0px; top: 0px; width: 50%; height: 100%; background-color: #2f544c; } .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(owl-dot, decimal); counter-increment: owl-dot; position: absolute; color: #fff; font-size: 20px; font-family: "DM Serif Display", 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: #c19b76; width: 0%; height: 2px; left: 30px; top: 14px; -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; } .home-about-slider .owl-dots .owl-dot.active span:after { width: 30px; left: 30px; top: 14px; } .home-about-slider .owl-dots .owl-dot.active:before { color: #c19b76; } .home-about-slider .owl-dots .owl-dot:hover span { background: none; } .home-about-slider .owl-dots .owl-dot:hover:before { color: #262423; } /*Simple Icon*/ .sl-icons-demo i, .sl-icons-demo span { display: block; text-align: center; margin-bottom: 30px; } .sl-icons-demo i { font-size: 54px; } /*social-tooltip*/ .social-tooltips-outer li { position: relative; } .social-tooltips-outer a .social-tooltips { padding: 4px 15px; position: absolute; left: 0%; top: -30px; background-color: #2f544c; color: #262423; display: block; width: auto; text-align: right; opacity: 0; font-family: "Jost", sans-serif; font-size: 12px; border-radius: 3px; white-space: nowrap; } .social-tooltips-outer a:hover .social-tooltips { opacity: 1; color: #fff; } .social-tooltips-outer .social-tooltips:before { left: 8px; bottom: -6px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; } .social-tooltips-outer .social-tooltips:before { border-top-color: #2f544c; border-width: 6px; margin-bottom: -6px; } /*room-rent-section*/ .room-rent-section-outer { position: relative; } .room-rent-section { position: relative; margin: 0px 0px 0px 30px; z-index: 1; } .room-rent-section-outer a { position: absolute; right: 20px; bottom: 20px; z-index: 5; display: block; } .room-rent-section-outer.room-style-2 a { position: relative; right: auto; bottom: auto; display: inline-block; margin-top: 15px; } .room-rent-section:after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 75%; border: 3px solid #262423; z-index: 0; } .room-rent-section .wt-media { position: relative; left: -30px; z-index: 1; } .room-rent-section .wt-media .wt-title { position: absolute; z-index: 2; bottom: 20px; left: 20px; padding-right: 20px; color: #fff; } .overlay-bx-3 { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; z-index: 1; -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; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+64,ffffff+100&0+63,0.68+100 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 63%, rgba(0, 0, 0, 0.02) 64%, rgba(0, 0, 0, 0.4) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 63%, rgba(0, 0, 0, 0.02) 64%, rgba(0, 0, 0, 0.4) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 63%, rgba(0, 0, 0, 0.02) 64%, rgba(0, 0, 0, 0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#adffffff',GradientType=0 ); /* IE6-9 */ } .room-info-section { padding: 30px; } .room-info-section span { font-size: 22px; font-weight: 400; padding-bottom: 15px; display: block; } .room-info-section ul { list-style: none; margin: 0px; margin-right: 110px; } .room-info-section ul li { float: left; padding-right: 8px; } .room-info-section ul li:last-child { padding-right: 0px; } .room-info-section ul li strong { display: inline-block; padding-right: 5px; } .room-info-section ul li i { padding-right: 5px; } /*amenities-list*/ .amenities-list ul { list-style: none; } .amenities-list ul li { float: left; width: 33.33%; } .room-rent-section-outer-2 .room-rent-section { margin: 50px 0px 0px 30px; } .room-rent-section-outer-2 .room-rent-section .wt-media { position: relative; left: 0px; z-index: 1; } .room-rent-section-outer-2 a { position: inherit; display: inline-block; margin-left: 30px; margin-top: 0px; right: auto; bottom: auto; } .room-rent-section-outer-2 .room-rent-section:after { display: none; } .room-rent-section-outer-2 .room-info-section { padding: 30px 0px; } @media only screen and (max-width: 640px) { .amenities-list ul li { float: left; width: 48%; padding-right: 15px; } } .room-style-2 .room-info-section ul { margin-right: 0px; } @media only screen and (max-width: 640px) { .room-rent-section-outer a { position: inherit; display: inline-block; left: auto; top: auto; right: auto; bottom: inherit; margin-top: 20px; margin-left: 70px; } .room-info-section ul { margin-right: 0px; } .room-info-section { padding: 20px; } .room-rent-section { margin: 0px 0px 0px 30px; } } @media only screen and (max-width: 400px) { .room-rent-section { margin: 0px; } .room-rent-section .wt-media { left: 0px; } .room-rent-section .wt-media .wt-title { left: auto; bottom: 0px; padding: 20px; } .room-rent-section-outer a { margin-left: 0px; } } /*review overview*/ .review-overview { margin-bottom: 30px; padding: 30px 0px; } .review-rate-box { float: left; border: navajowhite; border-right-color: navajowhite; border-right-style: none; border-right-width: medium; width: 135px; margin-right: 20px; text-align: center; border-radius: 0; border-right: 1px solid #e8e8e8; padding-right: 10px; } .rating-rate-box-total { font-size: 44px; font-weight: 400; line-height: 1em; display: block; color: #333; } .rating-rate-box-percent { font-size: 15px; margin-bottom: 0; color: #888; display: block; } .review-rate-box .star-Rating-input { display: inline-block; color: #ffc100 !important; font-size: 14px; margin-right: 10px; } .rating-bars { overflow: hidden; } .rate-bar-category { margin-bottom: 10px; } .rate-bars-name { color: #333; display: block; font-size: 14px; line-height: 22px; position: relative; } .rate-bars-line .wt-probar-2 { height: 4px; } .rate-bars-name .rate-count { display: inline-block; margin-bottom: 5px; font-size: 12px; position: absolute; right: 0px; top: 0px; } @media only screen and (max-width: 540px) { .review-rate-box { float: none; width: 100%; margin: 0px 0px 30px 0px; padding: 0px; } } .twm-our-speci-box-wrap { margin-right: 0px; } @media only screen and (max-width: 991px) { .section-full.p-t90 { padding-top: 50px; } .section-full.p-t30 { padding-top: 40px; } .section-full.p-b60 { padding-bottom: 20px; } } .wt-mid-page { position: relative; max-width: 900px; margin: 0px auto; } .button-model button.close { min-width: inherit; background: #fff; border: none; font-size: 26px; line-height: 26px; color: #000; width: 30px; height: 30px; } .button-model form .form-group { display: flex; } .button-model .modal-header { border-radius: 0px; } .embed-responsive { position: relative; display: block; height: 0; padding: 0; padding-bottom: 0px; overflow: hidden; } .embed-responsive-16by9 { padding-bottom: 56.25%; } .embed-responsive .ytp-impression-link { opacity: 0; } .ytp-impression-link { opacity: 0; } .embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .hdr-cpy-right { text-align: center; } @media only screen and (max-width: 575px) { .hdr-cpy-right { text-align: left; } } .room-details-amenities { padding: 20px 30px 10px; background: #fff; } .room-details-amenities .widget-title { font-size: 26px; } .room-amenities-item ul { list-style: none; } .room-amenities-item ul li { color: #323232; font-size: 15px; border-bottom: 1px solid #61616129; padding-bottom: 10px; padding-top: 10px; } .room-amenities-item ul li img { margin-right: 14px; margin-bottom: 6px; } /*======sidebar social media=======*/ .mf-social-side-list { position: fixed; bottom: 60px; r: 15px; z-index: 100; padding: 10px 8px; border-radius: 50px; } .mf-social-side-list ul { list-style: none; display: flex; flex-direction: column; padding: 0; margin: 0; } .mf-social-side-list ul li a { color: #323232; border-radius: 50%; line-height: 35px; margin: 6px 0; text-align: center; text-decoration: none; display: inline-block; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .mf-social-side-list ul li a:hover { opacity: 0.9; -webkit-transform: translateY(-3px); transform: translateY(-3px); } .mf-social-side-list ul li a i img { width: 50px; } /* Single combined bounce + pulse animation */ .mf-social-side-list ul li .whatsapp-icon i img { animation: bouncePulse 2s infinite; } @keyframes bouncePulse { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-10px) scale(1.1); } 60% { transform: translateY(-5px) scale(1.05); } } /*======sidebar social media=====*/ .payment-container { max-width: 800px; margin: 10px auto; padding: 30px; background-color: #fff; border-radius: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 4px double #2f544c; } .qr-img { max-width: 100%; height: auto; border: 2px solid #ddd; padding: 10px; border-radius: 10px; } .tarifinfo { width: 100%; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 50px; margin-top: 50px; } .tarifinfo tr:nth-child(odd) { background-color: #f2f2f2; } .tarifinfo tr { font-size: 16px; } .tarifinfo th { background: linear-gradient( 135deg, #00c6ff, #0072ff); text-align: center; font-size: 18px; color: #fff; } .tarifinfo th, td { padding: 10px; border: solid 1px #ddd; font-weight: 500; } /* Container fixed to the left center */ .reservation-widget { position: fixed; top: 50%; left: 0; transform: translateY(-50%); background: rgba(0,0,0,0.3); /* subtle background behind text */ padding: 20px 10px; display: flex; flex-direction: column; align-items: center; z-index: 9999; border-left: 4px solid #d5a75e; /* optional accent line */ } /* Vertical “Reservation” label */ .reservation-text { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 4px; font-size: 12px; color: #ccc; margin-bottom: 15px; font-weight: 600; text-transform: uppercase; } /* Phone number rotated vertically */ .reservation-number { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 18px; color: #fff; text-decoration: none; margin-bottom: 20px; font-weight: bold; } /* Circular call icon */ .reservation-icon { width: 48px; height: 48px; background: #d5a75e; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease; } .reservation-icon i { color: #fff; font-size: 20px; } .reservation-icon:hover { background: #b5884c; } .site-button{ line-height: 20px !important; } .book-now { position: fixed; bottom: 25px; right: 25px; z-index: 999; animation: float 2s ease-in-out infinite; } .book-now a { display: flex; align-items: center; text-decoration: none; background: linear-gradient(135deg, #00c6ff, #0072ff); color: #fff; font-weight: bold; font-family: 'Arial', sans-serif; padding: 12px 25px; border-radius: 50px; box-shadow: 0 8px 15px rgba(0,0,0,0.3); transition: transform 0.3s, box-shadow 0.3s, background 0.3s; } .book-now a img { width: 30px; height: 30px; margin-right: 12px; transition: transform 0.3s; } /* Hover Animation */ .book-now a:hover { transform: scale(1.1); box-shadow: 0 12px 20px rgba(0,0,0,0.4); background: linear-gradient(135deg, #ff6a00, #ee0979); } .book-now a:hover img { transform: rotate(20deg) scale(1.2); } /* Floating Animation */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } /* Responsive */ @media screen and (max-width: 768px) { .book-now a { padding: 10px 20px; font-size: 14px; } .book-now a img { width: 25px; height: 25px; margin-right: 8px; } } .att h2{ font-size: 24px !important; line-height: 40px; padding-top: 20px; }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.07 |
proxy
|
phpinfo
|
Settings