@charset "UTF-8"; /* */ /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } @-webkit-keyframes bounce { 20%,53%,80%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0) } 70% { -webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0) } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) } } @keyframes bounce { 20%,53%,80%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0) } 70% { -webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0) } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { 50%,from,to { opacity: 1 } 25%,75% { opacity: 0 } } @keyframes flash { 50%,from,to { opacity: 1 } 25%,75% { opacity: 0 } } @-webkit-keyframes pulse { from,to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05) } } @keyframes pulse { from,to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05) } } @-webkit-keyframes rubberBand { from,to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) } 40% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) } 50% { -webkit-transform: scale3d(1.15,.85,1); transform: scale3d(1.15,.85,1) } 65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) } 75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) } } @keyframes rubberBand { from,to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) } 40% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) } 50% { -webkit-transform: scale3d(1.15,.85,1); transform: scale3d(1.15,.85,1) } 65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) } 75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) } } @-webkit-keyframes shake { from,to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 20%,40%,60%,80% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } } @keyframes shake { from,to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 20%,40%,60%,80% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0,0,1,15deg); transform: rotate3d(0,0,1,15deg) } 40% { -webkit-transform: rotate3d(0,0,1,-10deg); transform: rotate3d(0,0,1,-10deg) } 60% { -webkit-transform: rotate3d(0,0,1,5deg); transform: rotate3d(0,0,1,5deg) } 80% { -webkit-transform: rotate3d(0,0,1,-5deg); transform: rotate3d(0,0,1,-5deg) } to { -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg) } } @keyframes swing { 20% { -webkit-transform: rotate3d(0,0,1,15deg); transform: rotate3d(0,0,1,15deg) } 40% { -webkit-transform: rotate3d(0,0,1,-10deg); transform: rotate3d(0,0,1,-10deg) } 60% { -webkit-transform: rotate3d(0,0,1,5deg); transform: rotate3d(0,0,1,5deg) } 80% { -webkit-transform: rotate3d(0,0,1,-5deg); transform: rotate3d(0,0,1,-5deg) } to { -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg) } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { from,to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg); transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg); transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg) } } @keyframes tada { from,to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg); transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg); transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg) } } @-webkit-keyframes wobble { from,to { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg); transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg) } 30% { -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg); transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg) } 45% { -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg); transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg) } 60% { -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg); transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg) } 75% { -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg); transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg) } } @keyframes wobble { from,to { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg); transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg) } 30% { -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg); transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg) } 45% { -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg); transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg) } 60% { -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg); transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg) } 75% { -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg); transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg) } } @-webkit-keyframes jello { 11.1%,from,to { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } @keyframes jello { 11.1%,from,to { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } @-webkit-keyframes bounceIn { 20%,40%,60%,80%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000) } 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03) } 80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97) } to { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } @keyframes bounceIn { 20%,40%,60%,80%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000) } 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03) } 80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97) } to { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } @-webkit-keyframes bounceInDown { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000) } 0% { opacity: 0; -webkit-transform: translate3d(0,-3000px,0); transform: translate3d(0,-3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,25px,0); transform: translate3d(0,25px,0) } 75% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 90% { -webkit-transform: translate3d(0,5px,0); transform: translate3d(0,5px,0) } to { -webkit-transform: none; transform: none } } @keyframes bounceInDown { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000) } 0% { opacity: 0; -webkit-transform: translate3d(0,-3000px,0); transform: translate3d(0,-3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,25px,0); transform: translate3d(0,25px,0) } 75% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 90% { -webkit-transform: translate3d(0,5px,0); transform: translate3d(0,5px,0) } to { -webkit-transform: none; transform: none } } @-webkit-keyframes bounceInLeft { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px,0,0); transform: translate3d(-3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(25px,0,0); transform: translate3d(25px,0,0) } 75% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 90% { -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0) } to { -webkit-transform: none; transform: none } } @keyframes bounceInLeft { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px,0,0); transform: translate3d(-3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(25px,0,0); transform: translate3d(25px,0,0) } 75% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 90% { -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0) } to { -webkit-transform: none; transform: none } } @-webkit-keyframes bounceInRight { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000) } from { opacity: 0; -webkit-transform: translate3d(3000px,0,0); transform: translate3d(3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px,0,0); transform: translate3d(-25px,0,0) } 75% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } 90% { -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0) } to { -webkit-transform: none; transform: none } } @keyframes bounceInRight { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000) } from { opacity: 0; -webkit-transform: translate3d(3000px,0,0); transform: translate3d(3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px,0,0); transform: translate3d(-25px,0,0) } 75% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } 90% { -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0) } to { -webkit-transform: none; transform: none } } @-webkit-keyframes bounceInUp { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000) } from { opacity: 0; -webkit-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 75% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 90% { -webkit-transform: translate3d(0,-5px,0); transform: translate3d(0,-5px,0) } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes bounceInUp { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000) } from { opacity: 0; -webkit-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 75% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 90% { -webkit-transform: translate3d(0,-5px,0); transform: translate3d(0,-5px,0) } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } to { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } to { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px,0,0); transform: translate3d(20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px,0,0); transform: translate3d(20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @-webkit-keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-webkit-keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } } @keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } } @-webkit-keyframes fadeOutDown { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes fadeOutDown { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @-webkit-keyframes fadeOutDownBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @keyframes fadeOutDownBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @-webkit-keyframes fadeOutLeft { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes fadeOutLeft { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @keyframes fadeOutLeftBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @-webkit-keyframes fadeOutRight { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes fadeOutRight { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @-webkit-keyframes fadeOutRightBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @keyframes fadeOutRightBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @-webkit-keyframes fadeOutUp { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes fadeOutUp { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @-webkit-keyframes fadeOutUpBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @keyframes fadeOutUpBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg); transform: perspective(400px) rotate3d(0,1,0,-360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95,.95,.95); transform: perspective(400px) scale3d(.95,.95,.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg); transform: perspective(400px) rotate3d(0,1,0,-360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95,.95,.95); transform: perspective(400px) scale3d(.95,.95,.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg); transform: perspective(400px) rotate3d(1,0,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg); transform: perspective(400px) rotate3d(1,0,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg); transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg); transform: perspective(400px) rotate3d(1,0,0,-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg); transform: perspective(400px) rotate3d(1,0,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg); transform: perspective(400px) rotate3d(1,0,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg); transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg); transform: perspective(400px) rotate3d(1,0,0,-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg); transform: perspective(400px) rotate3d(0,1,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg); transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg); transform: perspective(400px) rotate3d(0,1,0,-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg); transform: perspective(400px) rotate3d(0,1,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg); transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg); transform: perspective(400px) rotate3d(0,1,0,-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg); transform: perspective(400px) rotate3d(1,0,0,-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg); transform: perspective(400px) rotate3d(1,0,0,90deg); opacity: 0 } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg); transform: perspective(400px) rotate3d(1,0,0,-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg); transform: perspective(400px) rotate3d(1,0,0,90deg); opacity: 0 } } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg); transform: perspective(400px) rotate3d(0,1,0,-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); opacity: 0 } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg); transform: perspective(400px) rotate3d(0,1,0,-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); opacity: 0 } } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%,0,0) skewX(-30deg); transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } to { -webkit-transform: none; transform: none; opacity: 1 } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%,0,0) skewX(-30deg); transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } to { -webkit-transform: none; transform: none; opacity: 1 } } @-webkit-keyframes lightSpeedOut { from { opacity: 1 } to { -webkit-transform: translate3d(100%,0,0) skewX(30deg); transform: translate3d(100%,0,0) skewX(30deg); opacity: 0 } } @keyframes lightSpeedOut { from { opacity: 1 } to { -webkit-transform: translate3d(100%,0,0) skewX(30deg); transform: translate3d(100%,0,0) skewX(30deg); opacity: 0 } } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0,0,1,-200deg); transform: rotate3d(0,0,1,-200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0,0,1,-200deg); transform: rotate3d(0,0,1,-200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1 } } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,-90deg); transform: rotate3d(0,0,1,-90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,-90deg); transform: rotate3d(0,0,1,-90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0,0,1,200deg); transform: rotate3d(0,0,1,200deg); opacity: 0 } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0,0,1,200deg); transform: rotate3d(0,0,1,200deg); opacity: 0 } } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,90deg); transform: rotate3d(0,0,1,90deg); opacity: 0 } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,90deg); transform: rotate3d(0,0,1,90deg); opacity: 0 } } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate3d(0,0,1,80deg); transform: rotate3d(0,0,1,80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%,80% { -webkit-transform: rotate3d(0,0,1,60deg); transform: rotate3d(0,0,1,60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0,700px,0); transform: translate3d(0,700px,0); opacity: 0 } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate3d(0,0,1,80deg); transform: rotate3d(0,0,1,80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%,80% { -webkit-transform: rotate3d(0,0,1,60deg); transform: rotate3d(0,0,1,60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0,700px,0); transform: translate3d(0,700px,0); opacity: 0 } } @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg) } to { opacity: 1; -webkit-transform: none; transform: none } } @-webkit-keyframes rollOut { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg); transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg) } } @keyframes rollOut { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg); transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg) } } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0); transform: scale3d(.475,.475,.475) translate3d(10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0); transform: scale3d(.475,.475,.475) translate3d(10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @-webkit-keyframes zoomOut { from { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } to { opacity: 0 } } @keyframes zoomOut { from { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } to { opacity: 0 } } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0); transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px,0,0); transform: scale(.1) translate3d(-2000px,0,0); -webkit-transform-origin: left center; transform-origin: left center } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0); transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px,0,0); transform: scale(.1) translate3d(-2000px,0,0); -webkit-transform-origin: left center; transform-origin: left center } } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px,0,0); transform: scale(.1) translate3d(2000px,0,0); -webkit-transform-origin: right center; transform-origin: right center } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px,0,0); transform: scale(.1) translate3d(2000px,0,0); -webkit-transform-origin: right center; transform-origin: right center } } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1) } } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); visibility: visible } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes slideInDown { from { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); visibility: visible } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); visibility: visible } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); visibility: visible } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); visibility: visible } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); visibility: visible } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); visibility: visible } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes slideInUp { from { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); visibility: visible } to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } to { visibility: hidden; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } to { visibility: hidden; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } to { visibility: hidden; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } to { visibility: hidden; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @-webkit-keyframes pulse { from,to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 50% { -webkit-transform: scale3d(1.3,1.3,1.3); transform: scale3d(1.3,1.3,1.3) } } @keyframes pulse { from,to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 50% { -webkit-transform: scale3d(1.3,1.3,1.3); transform: scale3d(1.3,1.3,1.3) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes fadeInLeftSlow { from { opacity: 0; -webkit-transform: translate3d(-5%,0,0); transform: translate3d(-5%,0,0) } to { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes fadeInLeftSlow { from { opacity: 0; -webkit-transform: translate3d(-5%,0,0); transform: translate3d(-5%,0,0) } to { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @-webkit-keyframes fadeInRightSlow { from { opacity: 0; -webkit-transform: translate3d(5%,0,0); transform: translate3d(5%,0,0) } to { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes fadeInRightSlow { from { opacity: 0; -webkit-transform: translate3d(5%,0,0); transform: translate3d(5%,0,0) } to { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } to { visibility: hidden; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } to { visibility: hidden; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } to { visibility: hidden; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } to { visibility: hidden; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @-webkit-keyframes fadeInSlow { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeInSlow { from { opacity: 0 } to { opacity: 1 } } /* */ .owl-carousel .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .owl-carousel .owl-animated-in { z-index: 0 } .owl-carousel .owl-animated-out { z-index: 1 } @-webkit-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } .owl-height { -webkit-transition: height .5s ease-in-out; -moz-transition: height .5s ease-in-out; -ms-transition: height .5s ease-in-out; -o-transition: height .5s ease-in-out; transition: height .5s ease-in-out } .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1 } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0,0,0) } .owl-carousel.owl-loaded { display: block } .owl-carousel.owl-loading { opacity: 0; display: block } .owl-carousel.owl-hidden { opacity: 0 } .owl-carousel .owl-refresh .owl-item { display: none } .owl-carousel .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 .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto } .owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab } .owl-carousel.owl-rtl { direction: rtl } .owl-carousel.owl-rtl .owl-item { float: right } .no-js .owl-carousel { display: block } .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity .4s; -moz-transition: opacity .4s; -ms-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s } .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000 } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale .1s; -moz-transition: scale .1s; -ms-transition: scale .1s; -o-transition: scale .1s; transition: scale .1s } .owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn { display: none } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: opacity .4s; -moz-transition: opacity .4s; -ms-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s } .owl-carousel .owl-video-frame { position: relative; z-index: 1 } /* */ /* */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0 } .slick-list:focus { outline: 0 } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-list, .slick-slider .slick-track { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } .slick-track { position: relative; top: 0; left: 0; display: block } .slick-track:after, .slick-track:before { display: table; content: '' } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { display: none; float: left; height: 100%; min-height: 1px } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-arrow.slick-hidden { display: none } /* */ .slick-loading .slick-list { background: url('/images/ajax-loader.gif') center center no-repeat #fff } @font-face { font-family: slick; font-weight: 400; font-style: normal; src: url('/fonts/slick.eot'); src: url('/fonts/slick.eot?#iefix') format('embedded-opentype'),url('/fonts/slick.woff') format('woff'),url('/fonts/slick.ttf') format('truetype'),url('/fonts/slick.svg#slick') format('svg') } .slick-next, .slick-prev { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); cursor: pointer; color: transparent; border: none; outline: 0; background: 0 0 } .slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover { color: transparent; outline: 0; background: 0 0 } .slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before { opacity: 1 } .slick-next.slick-disabled:before, .slick-prev.slick-disabled:before { opacity: .25 } .slick-next:before, .slick-prev:before { font-family: slick; font-size: 20px; line-height: 1; opacity: .75; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-prev { left: -25px } .slick-prev:before { content: '←' } .slick-next { right: -25px } .slick-next:before { content: '→' } .slick-dotted.slick-slider { margin-bottom: 30px } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: 0; background: 0 0 } .slick-dots li button:focus, .slick-dots li button:hover { outline: 0 } .slick-dots li button:focus:before, .slick-dots li button:hover:before { opacity: 1 } .slick-dots li button:before { font-family: slick; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-dots li.slick-active button:before { opacity: .75; color: #000 } /* */ .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; z-index: 1 } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform,-webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } .swiper-container-multirow > .swiper-wrapper { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform,-webkit-transform } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height,-webkit-transform; -o-transition-property: transform,height; transition-property: transform,height,-webkit-transform } .swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y } .swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100% } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(.33); -ms-transform: scale(.33); transform: scale(.33); position: relative } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(.66); -ms-transform: scale(.66); transform: scale(.66) } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2 } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-bullet-active { opacity: 1; background: #007aff } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0) } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 8px } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: top .2s,-webkit-transform .2s; transition: transform .2s,top .2s,-webkit-transform .2s; -o-transition: transform .2s,top .2s } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: left .2s,-webkit-transform .2s; transition: transform .2s,left .2s,-webkit-transform .2s; -o-transition: transform .2s,left .2s } .swiper-pagination-progressbar { background: rgba(0,0,0,.25); position: absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top } .swiper-container-horizontal > .swiper-pagination-progressbar { width: 100%; height: 4px; left: 0; top: 0 } .swiper-container-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0 } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0,0,0,.1) } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98% } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98% } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0,0,0,.5); border-radius: 10px; left: 0; top: 0 } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center } .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain } .swiper-slide-zoomed { cursor: move } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-animation: 1s steps(12,end) infinite swiper-preloader-spin; animation: 1s steps(12,end) infinite swiper-preloader-spin } .swiper-lazy-preloader:after { display: block; content: ''; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; background-size: 100%; background-repeat: no-repeat } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-container-cube { overflow: visible } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100% } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0 } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible } .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0 } .swiper-container-flip { overflow: visible } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-container-coverflow .swiper-wrapper { -ms-perspective: 1200px } /* */ .owl-fade-out { z-index: 10; -webkit-animation: .7s both fadeOut; -moz-animation: .7s both fadeOut; animation: .7s both fadeOut } .owl-fade-in { -webkit-animation: .7s both fadeIn; -moz-animation: .7s both fadeIn; animation: .7s both fadeIn } @-webkit-keyframes empty { 0% { opacity: 1 } } @-moz-keyframes empty { 0% { opacity: 1 } } @keyframes empty { 0% { opacity: 1 } } @-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-webkit-keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-500px) } 100%,75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%) } } @-moz-keyframes backSlideOut { 25% { opacity: .5; -moz-transform: translateZ(-500px) } 100%,75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%) } } @keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px) } 100%,75% { opacity: .5; transform: translateZ(-500px) translateX(-200%) } } @-webkit-keyframes backSlideIn { 0%,25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%) } 75% { opacity: .5; -webkit-transform: translateZ(-500px) } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0) } } @-moz-keyframes backSlideIn { 0%,25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%) } 75% { opacity: .5; -moz-transform: translateZ(-500px) } 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0) } } @keyframes backSlideIn { 0%,25% { opacity: .5; transform: translateZ(-500px) translateX(200%) } 75% { opacity: .5; transform: translateZ(-500px) } 100% { opacity: 1; transform: translateZ(0) translateX(0) } } @-webkit-keyframes scaleToFade { to { opacity: 0; -webkit-transform: scale(.8) } } @-moz-keyframes scaleToFade { to { opacity: 0; -moz-transform: scale(.8) } } @keyframes scaleToFade { to { opacity: 0; transform: scale(.8) } } @-webkit-keyframes goDown { from { -webkit-transform: translateY(-100%) } } @-moz-keyframes goDown { from { -moz-transform: translateY(-100%) } } @keyframes goDown { from { transform: translateY(-100%) } } @-webkit-keyframes scaleUpFrom { from { opacity: 0; -webkit-transform: scale(1.5) } } @-moz-keyframes scaleUpFrom { from { opacity: 0; -moz-transform: scale(1.5) } } @keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5) } } @-webkit-keyframes scaleUpTo { to { opacity: 0; -webkit-transform: scale(1.5) } } @-moz-keyframes scaleUpTo { to { opacity: 0; -moz-transform: scale(1.5) } } @keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5) } } /* */ /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-image, .fancybox-inner, .fancybox-nav, .fancybox-nav span, .fancybox-outer, .fancybox-skin, .fancybox-tmp, .fancybox-wrap, .fancybox-wrap iframe, .fancybox-wrap object { padding: 0; margin: 0; border: 0; outline: 0; vertical-align: top } .fancybox-iframe, .fancybox-image { display: block; width: 100%; height: 100% } .fancybox-image { max-width: 100%; max-height: 100% } /* */ .odometer.odometer-auto-theme, .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default, .odometer.odometer-theme-default .odometer-digit { display: inline-block; vertical-align: middle; position: relative } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { display: inline-block; vertical-align: middle; visibility: hidden } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner { text-align: left; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden } .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon { display: block } .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner { display: block; -webkit-backface-visibility: hidden } .odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value { display: block; -webkit-transform: translateZ(0) } .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value { position: absolute } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner { -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; transition: transform 2s } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%) } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner { -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; transition: transform 2s; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .odometer.odometer-auto-theme, .odometer.odometer-theme-default { font-family: "Helvetica Neue",sans-serif; line-height: 1.1em } .odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value { text-align: center } /* */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1. General 1.1 Theme Reset Style 1.2 Global Elements 2. header 2.1 topbar 2.2 navigation 3. content 3.1 wpo-hero-slider 3.2 wpo-about-section 3.3 wpo-service-section 3.4 wpo-cta-section 3.5 wpo-team-section 3.6 wpo-project-section 3.7 wpo-testimonial-section 3.8 wpo-partners-section 3.9 wpo-blog-section 4. wpo-footer 5. Home-style-2 5.1 wpo-about-area-s2 5.2 wpo-service-section-s2 5.3 wpo-team-section-s2 3.4 wpo-fun-fact-section 6. Home-style-3 6.1 wpo-service-section-s3 6.2 wpo-pricing-section 6.3 wpo-project-area-s2 7. wpo-project-single 8. wpo-service-single 9. wpo-team-single 10. wpo-shop-page 11. wpo-shop-single-page 12. wpo-cart-page-style 13. wpo-checkout-page-style 14. wpo-blog-pg-section 15. wpo-blog-single-section 16. wpo-contact-pg-section 17. wpo-booking-page-area 18. error-404-section ----------------------------------------------------------------*/ /*------------------------------------------------------------------ 1. General ----------------------------------------------------------------*/ /*--------------------------- Fonts ----------------------------*/ /* 1.1 Theme Reset Style */ html { font-size: 15pxpx; } :root { scroll-behavior: unset; } body { font-family: "DM Sans", sans-serif; background-color: #fff; font-size: 15px; font-size: calc-rem-value(15); overflow-x: hidden; } @media (max-width: 767px) { body { font-size: 14px; } } p { font-size: 16px; line-height: 1.8em; } h1, h2, h3, h4, h5, h6 { color: #213644; font-family: "Vidaloka", serif; font-weight: 600; } ul { padding-left: 0; margin: 0; } body a { text-decoration: none; transition: all 0.2s; color: #213644; } body a:hover { text-decoration: none; color: #8E713E; } img { max-width: 100%; } .sr-only { display: none !important; opacity: 0; visibility: hidden; } /* 1.2 Global Elements */ .page-wrapper { position: relative; overflow: hidden; } .wow { visibility: hidden; } .fi:before { margin: 0; } .section-padding { padding: 120px 0; } @media (max-width: 991px) { .section-padding { padding: 90px 0; } } @media (max-width: 767px) { .section-padding { padding: 80px 0; } } /*** contact form error handling ***/ .contact-validation-active .error-handling-messages { width: 100% !important; margin-top: 15px !important; } .contact-validation-active label.error { color: red; font-size: calc-rem-value(14); font-weight: normal; margin: 5px 0 0 0; text-align: left; display: block; } .contact-validation-active #c-loader, .contact-validation-active #loader { display: none; margin-top: 10px; } .contact-validation-active #c-loader i, .contact-validation-active #loader i { font-size: 30px; font-size: calc-rem-value(30); color: #8E713E; display: inline-block; -webkit-animation: rotating linear 2s infinite; animation: rotating linear 2s infinite; } .contact-validation-active #success, .contact-validation-active #c-success, .contact-validation-active #c-error, .contact-validation-active #error { width: 100%; color: #fff; padding: 5px 10px; font-size: 16px; text-align: center; display: none; } @media (max-width: 767px) { .contact-validation-active #success, .contact-validation-active #c-success, .contact-validation-active #c-error, .contact-validation-active #error { font-size: 15px; } } .contact-validation-active #c-success, .contact-validation-active #success { background-color: #009a00; border-left: 5px solid green; margin-bottom: 5px; } .contact-validation-active #c-error, .contact-validation-active #error { background-color: #ff1a1a; border-left: 5px solid red; } @-webkit-keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 5s alternate infinite; animation: rotating 5s alternate infinite; } /*** back to top **/ .back-to-top { background-color: rgba(172, 141, 104, 0.7); width: 45px; height: 45px; line-height: 45px; border: 2px solid #8E713E; border-radius: 45px; text-align: center; display: none; position: fixed; z-index: 999; right: 15px; bottom: 15px; transition: all 0.2s; } @media (max-width: 991px) { .back-to-top { width: 35px; height: 35px; line-height: 35px; } } .back-to-top:hover { background-color: #8E713E; } .back-to-top i { font-size: 18px; font-size: calc-rem-value(18); color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /** for popup image ***/ .mfp-wrap { background-color: rgba(0, 0, 0, 0.9); z-index: 99999; } .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } /*** for fancybox video ***/ .fancybox-overlay { background: rgba(0, 0, 0, 0.9); z-index: 9999 !important; } .fancybox-wrap { z-index: 99999 !important; } .wpo-section-title { margin-bottom: 60px; text-align: center; position: relative; } @media (max-width: 767px) { .wpo-section-title { margin-bottom: 40px; } } .wpo-section-title span { text-transform: uppercase; color: #8E713E; font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.2em; } .wpo-section-title h2 { line-height: 55px; margin: 0; margin-top: 15px; position: relative; text-transform: capitalize; font-family: "Vidaloka", serif; margin-top: 0; font-size: 46px; font-weight: 400; line-height: 46px; margin-top: 20px; } @media (max-width: 1399px) { .wpo-section-title h2 { font-size: 40px; } } @media (max-width: 1199px) { .wpo-section-title h2 { font-size: 33px; } } @media (max-width: 767px) { .wpo-section-title h2 { font-size: 32px; line-height: 40px; } } @media (max-width: 330px) { .wpo-section-title h2 { font-size: 30px; } } .wpo-section-title p { font-size: 18px; } .wpo-section-title .shape-title { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } .wpo-section-title .shape-title img { width: 100%; } .theme-btn, .view-cart-btn { background: #8E713E; color: #fff; display: inline-block; font-weight: 700; padding: 15px 45px; border: 0; text-transform: capitalize; -webkit-backface-visibility: hidden; z-index: 1; position: relative; font-size: 14px; font-size: calc-rem-value(16); transition: all 0.3s ease-in-out; overflow: hidden; } .theme-btn:after, .view-cart-btn:after { position: absolute; content: ""; top: -50%; left: 0; width: 100%; height: 100%; background: #fff; transition: opacity 0.5s ease-out; opacity: 0; z-index: -1; transition: all 0.3s ease-in-out; } .theme-btn:hover, .view-cart-btn:hover, .theme-btn:active, .view-cart-btn:active { color: #8E713E; } form .theme-btn:hover, .wpo-about-text .theme-btn:hover { color: #fff; } .theme-btn:hover:after, .view-cart-btn:hover:after { opacity: 1; top: 0; } @media (max-width: 991px) { .theme-btn, .view-cart-btn { font-size: 18px; font-size: calc-rem-value(18); } } @media (max-width: 767px) { .theme-btn, .view-cart-btn { padding: 12px 18px; font-size: 13px; } } .theme-btn-s2 { background: #fff; color: #0D0925; display: inline-block; padding: 12px 22px; border: 1px solid #8E713E; border-radius: 55px; text-transform: capitalize; z-index: 1; position: relative; } .theme-btn-s2:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 55px; background: linear-gradient(left, #00ded8, #00a7d5); transition: opacity 0.5s ease-out; opacity: 0; z-index: -1; } @media (max-width: 991px) { .theme-btn-s2 { font-size: 14px; font-size: calc-rem-value(14); } } .theme-btn-s2:hover, .theme-btn-s2:focus, .theme-btn-s2:active { background: #a28059; color: #fff; } .theme-btn-s2:hover:after { opacity: 1; } @media (max-width: 767px) { .theme-btn-s2 { padding: 12px 18px; font-size: 13px; } } .view-cart-btn { display: block; margin-top: 15px; border-radius: 5px; padding: 10px 45px; } .view-cart-btn:after { display: none; } .view-cart-btn:hover { background-color: #987953; } .view-cart-btn.s1 { background: #ddd; } .view-cart-btn.s1:hover { background-color: #c9c9c9; } .form input, .form textarea, .form select { border-color: #bfbfbf; border-radius: 0; outline: 0; box-shadow: none; color: #595959; font-style: normal; } .form input:focus, .form textarea:focus, .form select:focus { border-color: #8E713E; -o-box-shadow: 0 0 5px 0 #bea689; -ms-box-shadow: 0 0 5px 0 #bea689; box-shadow: 0 0 5px 0 #bea689; } .form ::-webkit-input-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form :-moz-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form ::-moz-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form :-ms-input-placeholder { font-style: 14px; font-style: italic; color: #595959; } .form select { font-style: normal; background: url(/images/select-icon.png) no-repeat right center; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .form select::-ms-expand { /* for IE 11 */ display: none; } .form :-ms-input-placeholder { /* Internet Explorer 10-11 */ font-style: normal; } .form ::-moz-placeholder { font-style: normal; } .form ::placeholder { font-style: normal; } .social-links { overflow: hidden; } .social-links li { float: left; width: 35px; height: 35px; margin-right: 1px; } .social-links li a { background-color: #bea689; width: 35px; height: 35px; line-height: 35px; display: block; color: #fff; text-align: center; } .social-links li a:hover { background-color: #8E713E; } .wpo-page-title { background: url(/images/slider/slider2.webp) no-repeat center/cover; min-height: 450px; position: relative; display: flex; justify-content: center; flex-direction: column; z-index: 1; } @media (max-width: 767px) { .wpo-page-title { min-height: 250px; } } .wpo-page-title:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; content: ""; z-index: -1; opacity: 0.5; } .wpo-page-title .wpo-breadcumb-wrap { text-align: center; margin-top: 10px; } @media (max-width: 991px) { .wpo-page-title .wpo-breadcumb-wrap { margin-top: 0; } } .wpo-page-title .wpo-breadcumb-wrap h1 { font-size: 60px; color: #fff; line-height: 60px; margin-top: -10px; margin-bottom: 20px; font-weight: 400; text-transform:capitalize; } #usps { text-transform: capitalize; } @media (max-width: 767px) { .wpo-page-title .wpo-breadcumb-wrap h1 { font-size: 30px; line-height: 35px; margin-bottom: 10px; } } .wpo-page-title .wpo-breadcumb-wrap ol { padding-left: 0; margin-bottom: 0; } .wpo-page-title .wpo-breadcumb-wrap h2 { display: inline-block; padding: 0px 5px; padding-right: 20px; color: #fff; position: relative; font-size: 20px; font-family: "DM Sans", sans-serif; } @media (max-width: 767px) { .wpo-page-title .wpo-breadcumb-wrap h2 { font-size: 18px; } } .wpo-page-title .wpo-breadcumb-wrap ol li:after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: #fff; border-radius: 50%; } .wpo-page-title .wpo-breadcumb-wrap ol li:last-child span { color: #cbd4fd; } .wpo-page-title .wpo-breadcumb-wrap ol li:last-child:after { display: none; } .wpo-page-title .wpo-breadcumb-wrap ol li a { color: #fff; font-size: 20px; transition: all 0.3s; } .wpo-page-title .wpo-breadcumb-wrap ol li a:hover { color: #8E713E; } .preloader { background-color: #213644; width: 100%; height: 100%; position: fixed; z-index: 1000; overflow: hidden; } .preloader .vertical-centered-box { position: absolute; width: 100%; height: 100%; text-align: center; } .preloader .vertical-centered-box:after { content: ""; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .preloader .vertical-centered-box .content { box-sizing: border-box; display: inline-block; vertical-align: middle; text-align: left; font-size: 0; } .preloader * { transition: all 0.3s; } .preloader .loader-circle { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); margin-left: -60px; margin-top: -60px; } .preloader .loader-line-mask { position: absolute; left: 50%; top: 50%; width: 60px; height: 120px; margin-left: -60px; margin-top: -60px; overflow: hidden; transform-origin: 60px 60px; -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0)); -webkit-animation: rotate 1.2s infinite linear; animation: rotate 1.2s infinite linear; } .preloader .loader-line-mask .loader-line { width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); } .preloader #particles-background, .preloader #particles-foreground { left: -51%; top: -51%; width: 202%; height: 202%; transform: scale3d(0.5, 0.5, 1); } .preloader #particles-background { background: #2c2d44; background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%); } .preloader lesshat-selector { -lh-property: 0; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .preloader [not-existing] { zoom: 1; } .preloader lesshat-selector { -lh-property: 0; } @-webkit-keyframes fade { 0% { opacity: 1; } 50% { opacity: 0.25; } } @keyframes fade { 0% { opacity: 1; } 50% { opacity: 0.25; } } .preloader [not-existing] { zoom: 1; } .preloader lesshat-selector { -lh-property: 0; } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .preloader [not-existing] { zoom: 1; } /*------------------------------------ blog sidebar ------------------------------------*/ .blog-sidebar { /*** search-widget ***/ /*** about-widget ***/ /*** category-widget ***/ /*** recent-post-widget ***/ /*** instagram-widget ***/ /*** wpo-newsletter-widget ***/ /*** tag-widget ***/ /*** wpo-contact-widget ***/ } @media screen and (min-width: 992px) { .blog-sidebar { padding-left: 45px; } } @media (max-width: 991px) { .blog-sidebar { margin-top: 80px; max-width: 400px; } } @media (max-width: 767px) { .blog-sidebar { margin-top: 60px; max-width: 400px; } } .blog-sidebar .widget h3 { font-size: 23px; font-size: calc-rem-value(23); color: #213644; margin: 0 0 1.3em; position: relative; text-transform: capitalize; font-family: "Vidaloka", serif; padding-bottom: 20px; font-weight: 400; } .blog-sidebar .widget h3:before { content: ""; background-color: #8E713E; width: 55px; height: 4px; position: absolute; left: 0; bottom: 0; border-radius: 10px; } .blog-sidebar .widget h3:after { content: ""; background-color: #f2f2f2; width: 80%; height: 4px; position: absolute; left: 65px; bottom: 0; border-radius: 10px; } .blog-sidebar > .widget + .widget { margin-top: 65px; } .blog-sidebar .search-widget form div { position: relative; } .blog-sidebar .search-widget input { background-color: #fff; height: 70px; font-size: 16px; font-size: calc-rem-value(16); padding: 6px 50px 6px 20px; border: 0; border-radius: 5px; transition: all 0.3s; box-shadow: 0px 1px 10px rgba(16, 45, 72, 0.15); } .blog-sidebar .search-widget input:focus { background-color: rgba(172, 141, 104, 0.1); } .blog-sidebar .search-widget form button { background: transparent; font-size: 20px; font-size: calc-rem-value(20); color: #fff; background-color: #8E713E; border: 0; outline: 0; position: absolute; right: 10px; top: 52%; height: 50px; line-height: 50px; width: 50px; border-radius: 6px; transform: translateY(-50%); } .blog-sidebar .about-widget { text-align: center; background-color: #F1EAE5; padding: 45px; position: relative; z-index: 1; } @media (max-width: 1200px) { .blog-sidebar .about-widget { padding: 35px; } } .blog-sidebar .about-widget .aw-shape { position: absolute; right: 0; top: 0; z-index: -1; } .blog-sidebar .about-widget .img-holder { margin-bottom: 25px; } .blog-sidebar .about-widget .img-holder img { border-radius: 50%; width: 100%; max-width: 200px; } .blog-sidebar .about-widget ul { list-style: none; display: flex; justify-content: center; } .blog-sidebar .about-widget ul li { margin-right: 10px; } .blog-sidebar .about-widget ul li:last-child { margin-right: 0; } .blog-sidebar .about-widget ul li a { text-decoration: none; display: block; width: 40px; height: 40px; line-height: 44px; background-color: #fff; border-radius: 50%; } .blog-sidebar .about-widget h4 { font-size: 25px; font-weight: 400; margin-bottom: 15px; } .blog-sidebar .about-widget p { font-size: 15px; font-size: calc-rem-value(15); margin-bottom: 1.2em; color: #484653; } .blog-sidebar .about-widget a { font-family: "Vidaloka", serif; font-size: 14px; font-size: calc-rem-value(14); color: #213644; } .blog-sidebar .about-widget a:hover { color: #8E713E !important; } .blog-sidebar .category-widget ul { list-style: none; } .blog-sidebar .category-widget ul li { font-size: 19px; font-size: calc-rem-value(19); position: relative; } @media (max-width: 767px) { .blog-sidebar .category-widget ul li { font-size: 16px; font-size: calc-rem-value(16); } } .blog-sidebar .category-widget ul li span { position: absolute; right: 0; } .blog-sidebar .category-widget ul > li + li { margin-top: 12px; padding-top: 12px; } .blog-sidebar .category-widget ul a { display: block; color: #474f62; font-size: 16px; font-weight: 600; } .blog-sidebar .category-widget ul a span { display: inline-block; width: 30px; height: 30px; line-height: 30px; background-color: #EAEAEA; text-align: center; border-radius: 50%; font-size: 18px; } @media (max-width: 767px) { .blog-sidebar .category-widget ul a span { font-size: 14px; font-size: calc-rem-value(14); } } .blog-sidebar .category-widget ul a.active, .blog-sidebar .category-widget ul a:hover, .blog-sidebar .category-widget ul li:hover:before { color: #8E713E; } .blog-sidebar .recent-post-widget .post { overflow: hidden; } .blog-sidebar .recent-post-widget .posts > .post + .post { margin-top: 15px; padding-top: 15px; } .blog-sidebar .recent-post-widget .post .img-holder { width: 90px; float: left; } .blog-sidebar .recent-post-widget .post .img-holder img { border-radius: 6px; } .blog-sidebar .recent-post-widget .post .details { width: calc(100% - 90px); float: left; padding-left: 20px; } .blog-sidebar .recent-post-widget .post h4 { font-size: 18px; font-size: calc-rem-value(18); font-weight: 500; line-height: 1.3em; margin: 0 0 0.3em; font-family: "DM Sans", sans-serif; } @media (max-width: 1199px) { .blog-sidebar .recent-post-widget .post h4 { margin: 0; } } @media (max-width: 767px) { .blog-sidebar .recent-post-widget .post h4 { font-size: 16px; font-size: calc-rem-value(16); } } .blog-sidebar .recent-post-widget .post h4 a { display: inline-block; color: #213644; } .blog-sidebar .recent-post-widget .post h4 a:hover { color: #8E713E; } .blog-sidebar .recent-post-widget .post .details .date { font-size: 13px; font-size: calc-rem-value(13); color: #0D0925; } .blog-sidebar .recent-post-widget .post .details .date i { display: inline-block; padding-right: 7px; } .blog-sidebar .wpo-instagram-widget ul { display: flex; flex-wrap: wrap; list-style: none; } .blog-sidebar .wpo-instagram-widget ul li { flex: 0 0 33.33%; max-width: 33.33%; margin-bottom: 5px; padding: 0px 3px; } .blog-sidebar .wpo-instagram-widget ul li img { width: 100%; } .blog-sidebar .wpo-newsletter-widget p { font-size: 18px; color: #213644; text-align: left; } .blog-sidebar .wpo-newsletter-widget span { font-size: 15px; color: #0D0925; } .blog-sidebar .wpo-newsletter-widget span a { color: #213644; font-weight: 400; } .blog-sidebar .wpo-newsletter-widget span a:hover { color: #8E713E; } .blog-sidebar .wpo-newsletter-widget .form input { border: 0; display: block; width: 100%; height: 55px; border-radius: 10px; box-shadow: 0px 1px 10px rgba(16, 45, 72, 0.15); padding: 15px; text-align: center; } .blog-sidebar .wpo-newsletter-widget .form input:focus { box-shadow: 0px 1px 10px rgba(16, 45, 72, 0.15); } .blog-sidebar .wpo-newsletter-widget .form button { background: #8E713E; width: 100%; height: 55px; border-radius: 10px; text-align: center; color: #fff; border: none; margin: 20px 0; } .blog-sidebar .tag-widget ul { overflow: hidden; list-style: none; } .blog-sidebar .tag-widget ul li { float: left; margin: 0 8px 8px 0; } .blog-sidebar .tag-widget ul li a { font-size: 15px; font-size: calc-rem-value(15); display: inline-block; padding: 5px 18px; color: #213644; background: rgba(172, 141, 104, 0.1); border-radius: 5px; } .blog-sidebar .tag-widget ul li a:hover { background: #8E713E; color: #fff; } .blog-sidebar .wpo-contact-widget { border: 0; background: url(/images/bg-2.jpg) no-repeat center center; position: relative; background-size: cover; z-index: 1; padding: 30px 40px; } .blog-sidebar .wpo-contact-widget:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(22, 57, 103, 0.9); content: ""; z-index: -1; } @media (max-width: 1200px) { .blog-sidebar .wpo-contact-widget { padding: 20px; } } .blog-sidebar .wpo-contact-widget h2 { font-size: 36px; font-weight: 400; text-align: left; color: #fff; margin-bottom: 20px; } .blog-sidebar .wpo-contact-widget h2::before { left: 28px; background: url(/images/Single-title-shape2.png) no-repeat right center; } .blog-sidebar .wpo-contact-widget p { color: #fff; font-size: 18px; } .blog-sidebar .wpo-contact-widget a { display: inline-block; padding: 10px 20px; border: 1px solid #fff; font-size: 18px; color: #fff; padding-right: 90px; position: relative; margin-top: 10px; } .blog-sidebar .wpo-contact-widget a::before { font-family: "themify"; content: "\e628"; font-size: 18px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } @media screen and (min-width: 992px) { .wpo-blog-pg-section.blog-pg-left-sidebar .blog-sidebar { padding-left: 0px; padding-right: 45px; } } @media screen and (min-width: 992px) { .wpo-blog-single-section.wpo-blog-single-left-sidebar-section .blog-sidebar { padding-left: 0px; padding-right: 45px; } } /**** pagination ****/ .pagination-wrapper { text-align: center; margin-top: 60px; } @media (max-width: 991px) { .pagination-wrapper { text-align: left; margin-top: 40px; } } .pagination-wrapper .pg-pagination { display: inline-block; overflow: hidden; list-style-type: none; text-align: center; } .pagination-wrapper .pg-pagination li { float: left; margin-right: 10px; } @media (max-width: 767px) { .pagination-wrapper .pg-pagination li { margin-right: 5px; } } .pagination-wrapper .pg-pagination li:last-child { margin-right: 0; } .pagination-wrapper .pg-pagination li a { background-color: transparent; width: 50px; height: 50px; line-height: 50px; font-size: 16px; font-size: calc-rem-value(16); font-weight: 600; color: #213644; background: #ebf4fc; display: block; } @media (max-width: 991px) { .pagination-wrapper .pg-pagination li a { width: 40px; height: 40px; line-height: 40px; font-size: 15px; font-size: calc-rem-value(15); } } .pagination-wrapper .pg-pagination .active a, .pagination-wrapper .pg-pagination li a:hover { background: #8E713E; border-color: #8E713E; color: #fff; } .pagination-wrapper .pg-pagination .fi:before { font-size: 15px; font-size: calc-rem-value(15); } .pagination-wrapper-left { text-align: left; } .pagination-wrapper-right { text-align: right; } @media screen and (min-width: 1200px) { .pagination-wrapper-right { padding-right: 50px; } } @media (max-width: 991px) { .pagination-wrapper-right { margin-top: 45px; text-align: left; } } /*-------------------------------------------------------------- 2. header --------------------------------------------------------------*/ /*-- 2.1 topbar --*/ .topbar { background: #F7F2EE; } @media (max-width: 991px) { .topbar { text-align: center; padding: 0; } } @media (max-width: 767px) { .header-style-1 { text-align: center; padding: 20px 0; } } .topbar { font-size: 16px; color: #e5e3e3; margin: 0; position: relative; z-index: 1; } .topbar::before { position: absolute; content: ""; left: 100%; top: 50%; background: #fff; width: 60%; height: 100%; transform: translate(-50%, -50%); z-index: -1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%); } @media (max-width: 1199px) { .topbar::before { width: 0; } } .topbar ul { overflow: hidden; list-style: none; float: right; margin-bottom: 0; } @media (max-width: 767px) { .topbar ul { display: flex; flex-wrap: wrap; } } @media (max-width: 1199px) { .topbar ul { float: none; display: inline-block; display: flex; justify-content: center; align-items: center; } } @media (max-width: 991px) { .topbar ul { float: none; display: inline-block; display: flex; justify-content: center; align-items: center; } } .topbar ul li { font-size: 16px; float: left; padding: 15px 9px; color: #66717A; line-height: 1em; font-family: "DM Sans", sans-serif; } @media (max-width: 991px) { .topbar ul li { padding: 15px 10px; } } .topbar ul li span { font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 700; color: #8E713E; line-height: 1em; } @media (max-width: 1199px) { .topbar ul li span { font-size: 15px; } } .topbar .contact-intro li { font-size: 16px; float: left; padding: 15px 10px; color: #66717A; line-height: 1em; font-family: "DM Sans", sans-serif; position: relative; } .topbar .contact-intro li:last-child { position: unset; } .topbar .contact-intro li::after { position: absolute; content: ""; right: 0; top: 50%; background: #C4C4C4; width: 1px; height: 16px; transform: translateY(-50%); } @media (max-width: 410px) { .topbar .contact-intro li::after { position: unset; } } @media (max-width: 1199px) { .topbar .contact-intro li { font-size: 15px; } } @media (max-width: 1199px) { .topbar .contact-intro { float: none; display: inline-block; display: flex; justify-content: center; align-items: center; padding-top: 5px; } } @media (max-width: 767px) { .topbar .contact-intro { padding-top: 2px; } } .topbar .contact-info ul li a { color: #213644; opacity: 0.45; } .topbar .contact-info ul li a:hover { color: #8E713E; } .topbar ul li:first-child { padding-left: 0; } .topbar .contact-intro ul { float: left; margin-bottom: 0; } @media (max-width: 991px) { .topbar .contact-intro ul { float: none; } } @media (max-width: 1200px) { .topbar ul li { font-size: 12px; padding: 15px 10px; } } @media (max-width: 991px) { .topbar ul li { font-size: 13px; } .topbar { padding: 10px 0; } } @media (max-width: 767px) { .topbar ul li { float: left; border: none; padding: 8px 6px; font-size: 13px; } } @media (max-width: 1199px) { .topbar .contact-info { padding-bottom: 5px; } } @media (max-width: 590px) { .topbar ul li { float: none; } .topbar .contact-info ul li { float: left; } .topbar ul { flex-wrap: wrap; } } .topbar .theme-btn-s2 { padding: 15px 20px; font-size: 14px; font-weight: 600; margin-bottom: -3px; color: #fff !important; } .topbar ul .fi { position: relative; top: 1px; display: inline-block; padding-right: 3px; } .topbar ul .fi:before { font-size: 15px; font-size: 1rem; color: #fff; } /* 2.2 navigation */ .wpo-site-header, .sticky-header { /* navigation open and close btn hide for width screen */ /* style for navigation less than 992px */ /*navbar collaps less then 992px*/ /*** cart-search-contact ***/ background-color: #213644; position: relative; z-index: 11; } .wpo-site-header::before, .sticky-header::before { position: absolute; content: ""; top: 56%; background: #fff; width: 55%; height: 115%; transform: translate(-50%, -50%); z-index: -1; -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); } @media (max-width: 1199px) { .wpo-site-header::before, .sticky-header::before { width: 52%; } } @media (max-width: 991px) { .wpo-site-header::before, .sticky-header::before { position: unset; } } .wpo-site-header .navigation { margin-bottom: 0; padding: 0; border: 0; border-radius: 0; } .sticky-header { background-color: #213644; width: 100%; position: fixed; left: 0; top: -400px; z-index: 9999; opacity: 0; visibility: hidden; transition: all 1s; box-shadow: 0 -5px 15px rgba(8, 106, 216, 0.2901960784); } .sticky-header::before { top: 50.5%; height: 101%; } .sticky-on { opacity: 1; top: 0; visibility: visible; } .wpo-site-header .navigation > .container { position: relative; } @media (min-width: 991px) { .wpo-site-header { padding: 0 130px; } } .wpo-site-header .row { width: 100%; } @media (max-width: 991px) { .wpo-site-header { padding: 20px 0; background: #fff; } .wpo-site-header .sticky-header { background: #fff; } } .wpo-site-header #navbar { transition: all 0.5s; } .wpo-site-header #navbar > ul li a:hover, .wpo-site-header #navbar > ul li a:focus { text-decoration: none; color: #8E713E; } @media screen and (min-width: 992px) { .wpo-site-header #navbar { /*** hover effect ***/ justify-content: center; } .wpo-site-header #navbar li { position: relative; } .wpo-site-header #navbar > ul > li.active > a:before, .wpo-site-header #navbar > ul > li > a:before { position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: #8E713E; content: ""; opacity: 0; visibility: hidden; transition: all 0.3s; border-radius: 3px; } .wpo-site-header #navbar > ul > li > a:hover:before, .wpo-site-header #navbar > ul > li > a.active:before { opacity: 1; visibility: visible; } .wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a { position: relative; } .wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a:before { font-family: "themify"; content: "\e649"; font-size: 11px; font-size: 0.73333rem; position: absolute; right: 15px; top: 58%; transform: translateY(-50%); } .wpo-site-header #navbar > ul > li:hover > .sub-menu { top: 100%; visibility: visible; opacity: 1; } .wpo-site-header #navbar .sub-menu > li:hover > .sub-menu { left: 100%; visibility: visible; opacity: 1; } } .wpo-site-header .container-fluid { padding-right: 0; } @media (max-width: 991px) { .wpo-site-header { /* class for show hide navigation */ } .wpo-site-header .container { width: 100%; max-width: 100%; } .wpo-site-header .header-right { right: -10px; } } @media (max-width: 991px) and (max-width: 767px) { .wpo-site-header .header-right { right: -25px; } } @media (max-width: 991px) { .wpo-site-header .navbar-header button span { background-color: #fff; width: 20px; display: block; height: 2px; margin-bottom: 5px; } } @media (max-width: 991px) { .wpo-site-header .navbar-header button span:last-child { margin: 0; } } .wpo-site-header #navbar { margin-left: 35px; } @media (max-width: 1199px) { .wpo-site-header #navbar { margin-left: 0px; } } .wpo-site-header #navbar ul { list-style: none; } @media (max-width: 991px) and (max-width: 991px) { .wpo-site-header #navbar { top: 0; visibility: visible; opacity: 1; } } @media (max-width: 991px) { .wpo-site-header #navbar > ul { z-index: 101; } .wpo-site-header #navbar ul a { color: #000; } .wpo-site-header #navbar ul a:hover, .wpo-site-header #navbar ul li.current a { color: #8E713E; } .wpo-site-header #navbar .close-navbar .ti-close { position: relative; top: 1px; } .wpo-site-header .navbar-toggler .first-angle, .wpo-site-header .navbar-toggler .last-angle { transition: all 0.3s; } .wpo-site-header .x-close .middle-angle { opacity: 0; } .wpo-site-header .x-close .first-angle { position: absolute; -webkit-transform: rotate(-44deg); top: 16px; left: 10px; } .wpo-site-header .x-close .last-angle { -webkit-transform: rotate(44deg); position: absolute; top: 16px; right: 10px; } } @media (max-width: 767px) { .wpo-site-header .navbar-header .navbar-brand { font-size: 24px; } .wpo-site-header #navbar .navbar-nav { margin: 0; } } @media (max-width: 991px) { .wpo-site-header .navbar-collapse.collapse { display: none; } .wpo-site-header .navbar-collapse.collapse.in { display: block; } .wpo-site-header .navbar-header .collapse, .wpo-site-header .navbar-toggle { display: block; } .wpo-site-header .navbar-header { float: none; position: relative; z-index: 99; text-align: center; } .navbar-brand { width: 100px !important; height: 100px !important; top: -10px !important; } } @media (max-width: 991px) and (max-width: 767px) { .wpo-site-header .navbar-header { margin-left: 0; } } @media (max-width: 991px) { .wpo-site-header .navbar-right { float: none; } } @media (max-width: 991px) { .wpo-site-header .navbar-nav { float: none; } } @media (max-width: 991px) { .wpo-site-header .navbar-nav > li { float: none; } } .wpo-site-header .header-right { display: flex; justify-content: flex-end; z-index: 991; position: relative; align-items: center; } @media (max-width: 335px) { .wpo-site-header .header-right { margin-top: -40px; right: -250px; } } .wpo-site-header .header-right button { padding: 0; border: 0; outline: 0; } .wpo-site-header .header-right > div { float: left; position: relative; margin-right: 8px; } @media (max-width: 335px) { .wpo-site-header .header-right > div { margin-right: 0px; float: none; } } .wpo-site-header .header-right .close-form .theme-btn, .wpo-site-header .header-right .close-form .view-cart-btn { padding: 15px 30px; } @media (max-width: 1400px) { .wpo-site-header .header-right .close-form .theme-btn, .wpo-site-header .header-right .close-form .view-cart-btn { padding: 10px 15px; font-size: 15px; } } @media (max-width: 767px) { .wpo-site-header .header-right .close-form .theme-btn, .wpo-site-header .header-right .close-form .view-cart-btn { padding: 8px 15px; font-size: 12px; font-weight: 400; text-align: center; } } .wpo-site-header .header-right > div:last-child { margin: 0 0 0 10px; position: relative; } @media (max-width: 767px) { .wpo-site-header .header-right > div:last-child { margin: 3px 0 0 10px; } } .wpo-site-header .header-right .header-search-form-wrapper { position: relative; margin-top: -5px; } @media (max-width: 991px) { .wpo-site-header .header-right .header-search-form-wrapper { margin-top: -6px; } } @media (max-width: 767px) { .wpo-site-header .header-right .header-search-form-wrapper { margin-top: 0px; } } .wpo-site-header .header-right .header-search-form-wrapper .fi:before { font-size: 18px; color: #fff; } .wpo-site-header .header-search-form.header-search-content-toggle .fi:before { color: #213644; } @media (max-width: 450px) { .wpo-site-header .header-right .cart-toggle-btn { display: none; } } .wpo-site-header .header-right .search-toggle-btn, .wpo-site-header .header-right .cart-toggle-btn { background-color: #8E713E; line-height: 0.66em; color: #fff; width: 50px; height: 51px; border: 0; } @media (max-width: 1199px) { .wpo-site-header .header-right .search-toggle-btn, .wpo-site-header .header-right .cart-toggle-btn { width: 45px; height: 42px; } } @media (max-width: 335px) { .wpo-site-header .header-right .search-toggle-btn, .wpo-site-header .header-right .cart-toggle-btn { width: 40px; height: 38px; } } @media (max-width: 991px) { .wpo-site-header .header-right .search-toggle-btn .fi:before, .wpo-site-header .header-right .cart-toggle-btn .fi:before { font-size: 16px; } } @media (max-width: 335px) { .wpo-site-header .header-right .search-toggle-btn .fi:before, .wpo-site-header .header-right .cart-toggle-btn .fi:before { font-size: 15px; } } .wpo-site-header .header-right .search-toggle-btn .ti-close, .wpo-site-header .header-right .cart-toggle-btn .ti-close { display: block; line-height: 20px; position: relative; top: -2px; } /*** cart-search-contact ***/ .cart-search-contact button { background: transparent; padding: 0; border: 0; outline: 0; } .cart-search-contact .fi { font-size: 30px; font-size: calc-rem-value(30); color: #213644; } .cart-search-contact > div { float: left; position: relative; } .cart-search-contact > div + div { margin-left: 12px; } .cart-search-contact .header-search-form { position: absolute; width: 350px; right: 0; top: 75px; transform: scale(0); opacity: 0; visibility: hidden; background: #fff; padding: 30px; border-radius: 6px; transition: all 0.5s; box-shadow: -2px 18px 40px -9px rgb(153, 153, 153); } @media (max-width: 991px) { .cart-search-contact .header-search-form { top: 65px; } } @media (max-width: 767px) { .cart-search-contact .header-search-form { right: 15px; } } @media (max-width: 575px) { .cart-search-contact .header-search-form { width: 260px; padding: 15px; } } .cart-search-contact .header-search-form-wrapper .fi:before { font-size: 18px; font-size: calc-rem-value(18); } .cart-search-contact form div { position: relative; } .cart-search-contact form div button { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } .cart-search-contact form div button .fi:before { font-size: 18px !important; } .cart-search-contact input { width: 100%; height: 50px; padding: 6px 20px; border: 0; border-radius: 0; box-shadow: none; border: 1px solid #F1EAE5; } .cart-search-contact input:focus { box-shadow: none; border-color: #8E713E; } .wpo-site-header .header-right .header-search-content-toggle { opacity: 1; visibility: visible; right: 0; transform: scale(1); } .mini-cart .cart-count { background: #8E713E; width: 19px; height: 19px; font-size: 10px; font-size: calc-rem-value(8); line-height: 17px; color: white; position: absolute; top: -2px; right: -5px; border-radius: 50%; font-weight: 600; } .mini-cart-content { background: #fff; width: 320px; height: 100%; z-index: 100; position: fixed; right: -320px; top: 0; opacity: 0; visibility: hidden; transition: all 0.5s; box-shadow: -2px 18px 40px -9px rgb(153, 153, 153); } @media (max-width: 575px) { .mini-cart-content { width: 290px; } } .mini-cart-content .mini-cart-close { display: block; width: 40px; height: 40px; background-color: rgb(51, 51, 51); color: rgb(255, 255, 255); font-size: 0px; text-align: center; overflow: hidden; position: relative; float: right; line-height: 54px; border-radius: 3px; right: 10px; top: 20px; } .mini-cart-content .mini-cart-close i { font-size: 15px; } .mini-cart-content p { font-size: 15px; font-size: calc-rem-value(15); font-weight: 500; color: #213644; margin: 0; text-transform: uppercase; } .mini-cart-content .mini-cart-items { padding: 100px 20px 25px; } .mini-cart-content .mini-cart-item { padding-top: 15px; margin-top: 15px; border-top: 1px solid #efefef; } .mini-cart-content .mini-cart-item:first-child { padding-top: 0; margin-top: 0; border-top: 0; } .mini-cart-content .mini-cart-item-image { width: 50px; height: 50px; border: 2px solid #f3f3f3; float: left; margin-right: 15px; } .mini-cart-content .mini-cart-item-image a, .mini-cart-content .mini-cart-item-image img { display: block; width: 46px; height: 46px; } .mini-cart-content .mini-cart-item-des { position: relative; overflow: hidden; } .mini-cart-content .mini-cart-item-des a { font-size: 14px; font-size: calc-rem-value(14); font-weight: 600; text-align: left; color: #213644; } .mini-cart-content .mini-cart-item-des a:hover { color: #8E713E; } .mini-cart-content .mini-cart-item-des .mini-cart-item-price { font-size: 13px; font-size: calc-rem-value(13); color: #888; display: block; margin-top: 3px; } .mini-cart-content .mini-cart-item-des .mini-cart-item-quantity { font-size: 12px; font-size: calc-rem-value(12); color: #444; display: block; position: absolute; right: 0; top: 6px; } .mini-cart-content .visible-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; opacity: 0.02; z-index: -1; } .mini-cart-content .mini-cart-action { padding: 20px 0 30px; text-align: center; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } .mini-cart-content .mini-cart-action .theme-btn-s2 { float: right; } .mini-cart-content .mini-cart-action .mini-btn { width: 240px; } .mini-cart-content .mini-cart-action .mini-checkout-price { font-size: 16px; font-size: calc-rem-value(16); font-weight: 600; color: #213644; display: block; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; } .mini-cart-content .mini-cart-action .mini-checkout-price span { color: #c79652; font-size: 20px; } .mini-cart-content-toggle, .mini-wislist-content-toggle { opacity: 1; visibility: visible; right: 0; } @media (max-width: 991px) { .page-wrapper { transition: all 0.3s; } .body-overlay:before { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); position: absolute; left: 0; top: 0; z-index: 10; transition: all 0.3s; } } .header-search-area { background: #fff; width: 100%; padding: 100px 0; text-align: center; position: fixed; left: 0; top: 0; z-index: 999; } .header-search-area h3 { font-size: 45px; margin: 0 0 1em; } .header-search-area form { position: relative; } .header-search-area input { height: 50px; font-size: 18px; font-size: 1.2rem; border-radius: 0; border: 0; border-bottom: 1px solid #d0d0d0; box-shadow: none; } .header-search-area input:focus { box-shadow: none; border-color: #8E713E; } .header-search-area form button { background: transparent; border: 0; font-size: 20px; font-size: 1.33333rem; position: absolute; right: 0; bottom: 10px; } .header-search-area form button:focus { border: none; outline: none; } .header-search-area .close-form { position: absolute; right: 35px; top: 35px; bottom: auto; padding-bottom: 5px; border-bottom: 1px solid; } .header-search-area .close-form button { background: transparent; border: 0; outline: 0; font-size: 13px; font-size: 0.86667rem; text-transform: uppercase; color: #000; letter-spacing: 2px; z-index: 99; } .header-search-area .close-form button:focus { border: 0; outline: 0; } .wpo-site-header { /* navigation open and close btn hide for width screen */ /* style for navigation less than 992px */ /*navbar collaps less then 992px*/ } .wpo-site-header .navigation { margin-bottom: 0; padding: 0; border: 0; border-radius: 0; } .wpo-site-header .navigation > .container { position: relative; } @media (max-width: 991px) { .wpo-site-header .navigation { padding: 20px 0; } } .wpo-site-header #navbar { transition: all 0.5s; } .wpo-site-header #navbar > ul li.active a, .wpo-site-header #navbar > ul li a:hover, .wpo-site-header #navbar > ul li a:focus { text-decoration: none; color: #a28059; } @media screen and (min-width: 992px) { .wpo-site-header #navbar { /*** hover effect ***/ } .wpo-site-header #navbar li { position: relative; } .wpo-site-header #navbar > ul > li > a { font-size: 19px; padding: 35px 20px; display: block; color: #fff; font-weight: 400; position: relative; font-family: "Vidaloka", serif; text-transform: capitalize; } } @media screen and (min-width: 992px) and (max-width: 1870px) { .wpo-site-header #navbar > ul > li > a { padding: 35px 18px; } } @media screen and (min-width: 992px) { .wpo-site-header #navbar > ul .sub-menu { background-color: #fff; box-shadow: 0px 2px 20px 0px rgba(62, 65, 159, 0.09); width: 230px; position: absolute; padding: 20px 0; left: 0; top: 90%; z-index: 10; font-family: "Vidaloka", serif; visibility: hidden; opacity: 0; transition: all 0.3s; } } @media screen and (min-width: 992px) { .wpo-site-header #navbar > ul > li .sub-menu a { font-size: 17px; font-size: calc-rem-value(16); display: block; padding: 10px 15px; color: #213644; position: relative; text-transform: capitalize; overflow: hidden; font-weight: 400; font-family: "Vidaloka", serif; } .wpo-site-header #navbar > ul > li .sub-menu a:after { position: absolute; left: 15px; bottom: 4px; width: 0px; height: 2px; content: ""; background: #8E713E; transition: all 0.3s; opacity: 0; visibility: hidden; } .wpo-site-header #navbar > ul > li .sub-menu a:hover:after, .wpo-site-header #navbar > ul > li .sub-menu a.active:after { width: 40px; opacity: 1; visibility: visible; } } @media screen and (min-width: 992px) { .wpo-site-header #navbar > ul > li > .sub-menu .sub-menu { left: 110%; top: 0; } } @media screen and (min-width: 992px) { .wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a { position: relative; } .wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a:before { font-family: "fontawesome"; content: "\f054"; font-size: 11px; font-size: calc-rem-value(11); position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } } @media screen and (min-width: 992px) { .wpo-site-header #navbar > ul > li:hover > .sub-menu { top: 100%; visibility: visible; opacity: 1; } } @media screen and (min-width: 992px) { .wpo-site-header #navbar .sub-menu > li:hover > .sub-menu { left: 100%; visibility: visible; opacity: 1; } } @media (max-width: 991px) { .wpo-site-header #navbar > ul > li a { display: block; font-size: 15px; font-size: calc-rem-value(15); color: #fff; font-weight: 600; } .wpo-site-header #navbar > ul > li a:hover, .wpo-site-header #navbar > ul > li a.active { color: #fff; } .wpo-site-header #navbar > ul .sub-menu > li:last-child { border-bottom: 0; } .wpo-site-header #navbar > ul > li > .sub-menu a { padding: 8px 15px 8px 45px; } .wpo-site-header #navbar > ul > li > .sub-menu .sub-menu a { padding: 8px 15px 8px 65px; } .wpo-site-header #navbar > ul .menu-item-has-children > a { position: relative; color: #ddd; } .wpo-site-header #navbar > ul .menu-item-has-children > a:hover, .wpo-site-header #navbar > ul .menu-item-has-children > a.active { color: #fff; } .wpo-site-header #navbar > ul .menu-item-has-children > a:before { font-family: "fontawesome"; content: "\f054"; font-size: 11px; font-size: calc-rem-value(11); position: absolute; right: 30px; top: 50%; transform: translateY(-50%); transition: all 0.3s; } .wpo-site-header #navbar > ul .menu-item-has-children > a.rotate:before { transform: rotate(90deg); top: 29%; } .wpo-site-header #navbar > ul .menu-item-has-children > a.rotate { color: #fff; } } @media screen and (min-width: 992px) { .wpo-site-header .navbar-header .open-btn { display: none; } .wpo-site-header #navbar .close-navbar { display: none; } } .wpo-site-header .menu-close { display: none; } @media (max-width: 991px) { .wpo-site-header { /* class for show hide navigation */ } .wpo-site-header .container { width: 100%; } .wpo-site-header .mobail-menu button { background-color: #8E713E; width: 40px; height: 35px; border: 0; padding: 5px 10px; outline: 0; position: relative; z-index: 20; } .wpo-site-header .mobail-menu button:focus { outline: none; box-shadow: none; } .wpo-site-header .mobail-menu button span { background-color: #fff; width: 20px; display: block; height: 2px; margin-bottom: 5px; } .wpo-site-header .mobail-menu button span:last-child { margin: 0; } .wpo-site-header #navbar { background: #213644; display: block !important; width: 300px; height: 100%; margin: 0; padding: 0; border: 0; position: fixed; left: -320px; top: 0px; z-index: 999999; opacity: 0; visibility: hidden; border-right: 2px solid #8E713E; } .wpo-site-header #navbar .navbar-nav { display: block; } .wpo-site-header #navbar > ul { position: relative; z-index: 101; } .wpo-site-header #navbar ul a { color: #000; } .wpo-site-header #navbar ul a:hover, .wpo-site-header #navbar ul li.current a { color: #8E713E; } .wpo-site-header #navbar .navbar-nav { height: 100%; overflow: auto; padding-bottom: 60px; } .wpo-site-header #navbar .close-navbar { background-color: #fff; width: 40px; height: 40px; color: #000; border: 0; outline: none; position: absolute; left: -41px; top: 90px; z-index: 20; } .wpo-site-header #navbar .close-navbar .ti-close { position: relative; top: 1px; } .wpo-site-header .menu-close { display: block; z-index: 99; background: none; text-align: center; color: #fff; border: 0; text-align: center; margin-left: auto; margin-top: 30px; margin-right: 30px; margin-bottom: 30px; width: 40px; height: 40px; line-height: 40px; border: 1px solid #fff; } .wpo-site-header .slideInn { left: 0 !important; opacity: 1 !important; visibility: visible !important; } .wpo-site-header .navbar-toggler .first-angle, .wpo-site-header .navbar-toggler .last-angle { transition: all 0.3s; } .wpo-site-header .x-close .middle-angle { opacity: 0; } .wpo-site-header .x-close .first-angle { position: absolute; -webkit-transform: rotate(-44deg); top: 16px; left: 10px; } .wpo-site-header .x-close .last-angle { -webkit-transform: rotate(44deg); position: absolute; top: 16px; right: 10px; } } @media (max-width: 767px) { .wpo-site-header .navbar-header .navbar-brand { font-size: 24px; } .wpo-site-header #navbar .navbar-nav { margin: 0; } } .navbar-brand { position: absolute; width: 150px; height: 150px; top: 0px; } .wpo-site-header .navbar-header .navbar-brand img { max-width: 150px; } @media (max-width: 991px) { .wpo-site-header .navbar-collapse.collapse { display: none; } .wpo-site-header .navbar-collapse.collapse.in { display: block; } .wpo-site-header .navbar-header .collapse, .wpo-site-header .navbar-toggle { display: block; } .wpo-site-header .navbar-header { float: none; } .wpo-site-header .navbar-right { float: none; } .wpo-site-header .navbar-nav { float: none; } .wpo-site-header .navbar-nav > li { float: none; } } @media (max-width: 575px) { .wpo-site-header .navbar-header .navbar-brand img { max-width: 150px; } } @media (max-width: 399px) { .wpo-site-header .navbar-header .navbar-brand img { max-width: 120px; } } @media (max-width: 1700px) { .wpo-site-header { padding: 0 30px; } } @media (max-width: 1500px) { .wpo-site-header #navbar > ul > li > a { padding: 30px 15px; } .wpo-site-header { padding: 0 10px; } } @media (max-width: 1400px) { .wpo-site-header #navbar > ul > li > a { padding: 30px 10px; font-size: 18px; } } @media (max-width: 1200px) { .wpo-site-header #navbar > ul > li > a { padding: 30px 6px; font-size: 16px; } } @media (max-width: 991px) { .wpo-site-header #navbar > ul > li > a { padding: 15px 30px; font-size: 15px; } } @media (max-width: 767px) { .header-right .theme-btn, .header-right .view-cart-btn { padding: 20px 5px; } } @media (max-width: 767px) { .wpo-site-header .header-right .close-form { display: none; } } .wpo-header-style-1 .wpo-site-header, .wpo-header-style-3 .wpo-site-header { position: absolute; left: 0; width: 100%; z-index: 99; background: transparent; } @media (max-width: 991px) { .wpo-header-style-1 .wpo-site-header, .wpo-header-style-3 .wpo-site-header { border-bottom: 0px; background: rgba(255, 255, 255, 0.2); } } .wpo-header-style-1 .wpo-site-header::before, .wpo-header-style-3 .wpo-site-header::before { top: 50%; width: 55%; height: 100%; } .wpo-header-style-2 .wpo-site-header::before { position: unset; } @media (max-width: 991px) { .wpo-header-style-2 .wpo-site-header { background: #213644; } } .wpo-header-style-2 .wpo-site-header .sticky-header:before { background: transparent; } .wpo-header-style-3 .topbar { background: #000; } .wpo-header-style-3 .topbar:before { position: unset; } .wpo-header-style-3 .topbar .contact-intro li { color: #fff; } .wpo-header-style-3 .topbar ul li span { color: #fff; } .wpo-header-style-3 .topbar .contact-info ul li a { color: #fff; opacity: 1; } /*-------------------------------------------------------------- 3. content --------------------------------------------------------------*/ /*3.1 wpo-hero-slider*/ .hero { position: relative; height: 100vh; /** slider controls **/ /*** hero slider animation ***/ } @media (max-width: 767px) { .hero { min-height: 420px; } } .hero .slide { height: 100vh; position: relative; background-repeat: no-repeat; position: relative; } @media (max-width: 767px) { .hero .slide { min-height: 420px; } } .hero .slide .slider-bg { display: none; } .hero .slide:focus { outline: none; } .hero .slide .container { height: 100%; display: table; } .hero .slide .row { display: table-cell; vertical-align: middle; } .hero .slick-prev, .hero .slick-next { background-color: rgba(172, 141, 104, 0.3); width: 55px; height: 55px; z-index: 10; border-radius: 50%; transition: all 0.5s; } .hero .slick-prev:hover, .hero .slick-next:hover { background-color: rgba(172, 141, 104, 0.6); } @media (max-width: 991px) { .hero .slick-prev, .hero .slick-next { display: none !important; } } .hero .slick-prev { left: -100px; } .hero .slick-prev:before { font-family: "themify"; content: "\e629"; opacity: 1; } .hero .slick-next { right: -100px; } .hero .slick-next:before { font-family: "themify"; content: "\e628"; opacity: 1; } .hero:hover .slick-prev { left: 25px; } .hero:hover .slick-next { right: 25px; } .hero .slick-dots { bottom: 30px; } @media screen and (min-width: 992px) { .hero .slick-dots { display: none !important; } } .hero .slick-dots li { margin: 0; } .hero .slick-dots button { background-color: #8E713E; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; } .hero .slick-dots button:before, .hero .slick-dots button:before { display: none; } .hero .slide-caption > div * { -webkit-animation: fadeOutLeft 1.5s both; animation: fadeOutLeft 1.5s both; } .hero .hero-right-text { -webkit-animation: fadeOutRight 1.5s both; animation: fadeOutRight 1.5s both; } .hero .slide-caption > div.slide-title * { -webkit-animation-delay: 0s; animation-delay: 0s; } .hero .slide-caption > div.btns * { -webkit-animation-delay: 0s; animation-delay: 0s; } .hero .hero-slider .slick-current .slide-caption > div * { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } .hero .hero-slider .slick-current .hero-right-text { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .hero .hero-slider .slick-current .slide-caption > div.slide-title * { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .hero .hero-slider .slick-current .slide-caption > div.btns * { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .hero .hero-slider .slick-current .hero-right-text { -webkit-animation-delay: 2s; animation-delay: 2s; } /************************************************ hero-style-1 **************************************************/ .hero-style-1 { max-height: 800px; position: relative; overflow: hidden; } @media (max-width: 1199px) { .hero-style-1 { max-height: 750px; } } @media (max-width: 991px) { .hero-style-1 { max-height: 650px; } } @media (max-width: 767px) { .hero-style-1 { max-height: 600px; } } @media (max-width: 575px) { .hero-style-1 { max-height: 500px; } } .hero-style-1 .slide { max-height: 800px; position: relative; overflow: hidden; z-index: 1; } .hero-style-1 .slide::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #0D0925; opacity: 0.5; z-index: -1; } @media (max-width: 1199px) { .hero-style-1 .slide { max-height: 750px; } } @media (max-width: 991px) { .hero-style-1 .slide { max-height: 650px; } } @media (max-width: 767px) { .hero-style-1 .slide { max-height: 600px; } } @media (max-width: 575px) { .hero-style-1 .slide { max-height: 500px; } } .hero-style-1 .slide .row { position: relative; } .hero-style-1 .slide .slide-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -11; } .hero-style-1 .slide .slide-bg img { width: 100%; height: 100%; } .hero-style-1 .slide-caption { padding-top: 10px; } .hero-style-1 .slide-caption h2 { color: #fff; margin-bottom: 15px; font-family: "Vidaloka", serif; font-size: 90px; font-weight: 400; line-height: 95px; } @media (max-width: 1200px) { .hero-style-1 .slide-caption h2 { font-size: 50px; font-size: calc-rem-value(50); line-height: 60px; } } @media (max-width: 991px) { .hero-style-1 .slide-caption h2 { font-size: 45px; font-size: calc-rem-value(45); line-height: 50px; } } @media (max-width: 767px) { .hero-style-1 .slide-caption h2 { font-size: 35px; font-size: calc-rem-value(35); line-height: 40px; } } @media (max-width: 575px) { .hero-style-1 .slide-caption h2 { font-size: 32px; font-size: calc-rem-value(32); } } .hero-style-1 .slide-caption p { color: #fff; font-family: "DM Sans", sans-serif; font-size: 18px; font-weight: 500; margin-bottom: 29px; line-height: 35px; padding-right: 105px; } @media (max-width: 1200px) { .hero-style-1 .slide-caption p { font-size: 18px; font-size: calc-rem-value(18); padding-right: 0; line-height: 25px; } } @media (max-width: 991px) { .hero-style-1 .slide-caption p { margin: 0 0 1.8em; font-size: 15px; line-height: 20px; } } .hero-style-1 .hero-right-text { width: 480px; background: #8E713E; padding: 40px 30px; align-items: center; border-left: 7px solid #fff; position: absolute; bottom: 0%; right: -24%; } @media (max-width: 992px) { .hero-style-1 .hero-right-text { padding: 20px; width: 350px; } } @media (max-width: 767px) { .hero-style-1 .hero-right-text { padding: 10px; width: 380px; } } @media (max-width: 425px) { .hero-style-1 .hero-right-text { padding: 10px; width: 310px; } } @media (max-width: 389px) { .hero-style-1 .hero-right-text { display: none; } } .hero-style-1 .hero-right-text .grid .info { float: left; width: 40%; position: relative; z-index: 1; } .hero-style-1 .hero-right-text .grid .info::before { position: absolute; left: -16px; top: 18px; width: 80px; height: 80px; border-radius: 50%; content: ""; background: rgba(255, 255, 255, 0.13); z-index: -1; } @media (max-width: 767px) { .hero-style-1 .hero-right-text .grid .info::before { left: 0; top: 25px; } } @media (max-width: 425px) { .hero-style-1 .hero-right-text .grid .info::before { left: 10px; top: 30px; width: 60px; height: 60px; } } .hero-style-1 .hero-right-text .grid .info h3 { font-size: 130px; font-weight: 400; line-height: 158px; color: #fff; margin: 0; } @media (max-width: 767px) { .hero-style-1 .hero-right-text .grid .info h3 { font-size: 90px; } } @media (max-width: 425px) { .hero-style-1 .hero-right-text .grid .info h3 { font-size: 75px; line-height: 90px; } } .hero-style-1 .hero-right-text .grid .info h3 .odometer-inside { font-family: "Vidaloka", serif; } .hero-style-1 .hero-right-text .grid .text { float: left; width: 60%; padding-right: 30px; padding-top: 15px; } @media (max-width: 767px) { .hero-style-1 .hero-right-text .grid .text { padding: 0; } } .hero-style-1 .hero-right-text .grid .text h4 { font-family: "Vidaloka", serif; font-size: 30px; font-weight: 400; line-height: 36px; color: #fff; margin-bottom: 13px; } @media (max-width: 425px) { .hero-style-1 .hero-right-text .grid .text h4 { font-size: 20px; margin-bottom: 0; } } .hero-style-1 .hero-right-text .grid .text span { font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 26px; color: #fff; margin: 0; } /************************************************ wpo-hero-slider **************************************************/ .wpo-hero-slider, .static-hero, .static-hero-s2, .static-hero-s3, .wpo-hero-slider-s2 { width: 100%; height: 900px; display: flex; position: relative; z-index: 0; } @media (max-width: 991px) { .wpo-hero-slider, .static-hero, .static-hero-s2, .static-hero-s3, .wpo-hero-slider-s2 { height: 600px; } } @media (max-width: 767px) { .wpo-hero-slider, .static-hero, .static-hero-s2, .static-hero-s3, .wpo-hero-slider-s2 { height: 500px; } } .wpo-hero-slider .swiper-slide, .static-hero .swiper-slide, .static-hero-s2 .swiper-slide, .static-hero-s3 .swiper-slide, .wpo-hero-slider-s2 .swiper-slide { overflow: hidden; } .wpo-hero-slider .swiper-container, .wpo-hero-slider .hero-container, .static-hero .swiper-container, .static-hero .hero-container, .static-hero-s2 .swiper-container, .static-hero-s2 .hero-container, .static-hero-s3 .swiper-container, .static-hero-s3 .hero-container, .wpo-hero-slider-s2 .swiper-container, .wpo-hero-slider-s2 .hero-container { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .wpo-hero-slider .slide-inner, .wpo-hero-slider .hero-inner, .static-hero .slide-inner, .static-hero .hero-inner, .static-hero-s2 .slide-inner, .static-hero-s2 .hero-inner, .static-hero-s3 .slide-inner, .static-hero-s3 .hero-inner, .wpo-hero-slider-s2 .slide-inner, .wpo-hero-slider-s2 .hero-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: left; } .wpo-hero-slider .slide-inner:before, .wpo-hero-slider .hero-inner:before, .static-hero .slide-inner:before, .static-hero .hero-inner:before, .static-hero-s2 .slide-inner:before, .static-hero-s2 .hero-inner:before, .static-hero-s3 .slide-inner:before, .static-hero-s3 .hero-inner:before, .wpo-hero-slider-s2 .slide-inner:before, .wpo-hero-slider-s2 .hero-inner:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #213644; content: ""; opacity: 0.8; } .wpo-hero-slider .slide-inner .slide-content, .wpo-hero-slider .hero-inner .slide-content, .static-hero .slide-inner .slide-content, .static-hero .hero-inner .slide-content, .static-hero-s2 .slide-inner .slide-content, .static-hero-s2 .hero-inner .slide-content, .static-hero-s3 .slide-inner .slide-content, .static-hero-s3 .hero-inner .slide-content, .wpo-hero-slider-s2 .slide-inner .slide-content, .wpo-hero-slider-s2 .hero-inner .slide-content { padding-top: 80px; } @media (max-width: 991px) { .wpo-hero-slider .slide-inner .slide-content, .wpo-hero-slider .hero-inner .slide-content, .static-hero .slide-inner .slide-content, .static-hero .hero-inner .slide-content, .static-hero-s2 .slide-inner .slide-content, .static-hero-s2 .hero-inner .slide-content, .static-hero-s3 .slide-inner .slide-content, .static-hero-s3 .hero-inner .slide-content, .wpo-hero-slider-s2 .slide-inner .slide-content, .wpo-hero-slider-s2 .hero-inner .slide-content { padding-top: 35px; } } .wpo-hero-slider .swiper-button-prev, .wpo-hero-slider .swiper-button-next, .static-hero .swiper-button-prev, .static-hero .swiper-button-next, .static-hero-s2 .swiper-button-prev, .static-hero-s2 .swiper-button-next, .static-hero-s3 .swiper-button-prev, .static-hero-s3 .swiper-button-next, .wpo-hero-slider-s2 .swiper-button-prev, .wpo-hero-slider-s2 .swiper-button-next { background: rgba(255, 255, 255, 0.2); width: 60px; height: 60px; line-height: 60px; border: 2px solid #fff; border-radius: 50%; opacity: 0.7; text-align: center; transition: all 0.3s; color: #fff; } .wpo-hero-slider .swiper-button-prev:hover, .wpo-hero-slider .swiper-button-next:hover, .static-hero .swiper-button-prev:hover, .static-hero .swiper-button-next:hover, .static-hero-s2 .swiper-button-prev:hover, .static-hero-s2 .swiper-button-next:hover, .static-hero-s3 .swiper-button-prev:hover, .static-hero-s3 .swiper-button-next:hover, .wpo-hero-slider-s2 .swiper-button-prev:hover, .wpo-hero-slider-s2 .swiper-button-next:hover { opacity: 0.9; } @media (max-width: 767px) { .wpo-hero-slider .swiper-button-prev, .wpo-hero-slider .swiper-button-next, .static-hero .swiper-button-prev, .static-hero .swiper-button-next, .static-hero-s2 .swiper-button-prev, .static-hero-s2 .swiper-button-next, .static-hero-s3 .swiper-button-prev, .static-hero-s3 .swiper-button-next, .wpo-hero-slider-s2 .swiper-button-prev, .wpo-hero-slider-s2 .swiper-button-next { display: none; } } .wpo-hero-slider .swiper-button-prev, .static-hero .swiper-button-prev, .static-hero-s2 .swiper-button-prev, .static-hero-s3 .swiper-button-prev, .wpo-hero-slider-s2 .swiper-button-prev { left: 25px; } .wpo-hero-slider .swiper-button-prev:before, .static-hero .swiper-button-prev:before, .static-hero-s2 .swiper-button-prev:before, .static-hero-s3 .swiper-button-prev:before, .wpo-hero-slider-s2 .swiper-button-prev:before { font-size: 20px; color: #fff; } .wpo-hero-slider .swiper-button-next, .static-hero .swiper-button-next, .static-hero-s2 .swiper-button-next, .static-hero-s3 .swiper-button-next, .wpo-hero-slider-s2 .swiper-button-next { right: 25px; } .wpo-hero-slider .swiper-button-next:before, .static-hero .swiper-button-next:before, .static-hero-s2 .swiper-button-next:before, .static-hero-s3 .swiper-button-next:before, .wpo-hero-slider-s2 .swiper-button-next:before { font-size: 20px; color: #fff; } @media (max-width: 991px) { .wpo-hero-slider .swiper-button-prev, .wpo-hero-slider .swiper-button-next, .static-hero .swiper-button-prev, .static-hero .swiper-button-next, .static-hero-s2 .swiper-button-prev, .static-hero-s2 .swiper-button-next, .static-hero-s3 .swiper-button-prev, .static-hero-s3 .swiper-button-next, .wpo-hero-slider-s2 .swiper-button-prev, .wpo-hero-slider-s2 .swiper-button-next { display: none; } } .wpo-hero-slider .swiper-pagination-bullet, .static-hero .swiper-pagination-bullet, .static-hero-s2 .swiper-pagination-bullet, .static-hero-s3 .swiper-pagination-bullet, .wpo-hero-slider-s2 .swiper-pagination-bullet { width: 12px; height: 12px; text-align: center; line-height: 12px; font-size: 12px; color: #000; opacity: 1; background: rgba(255, 255, 255, 0.2); } @media screen and (min-width: 992px) { .wpo-hero-slider .swiper-pagination-bullet, .static-hero .swiper-pagination-bullet, .static-hero-s2 .swiper-pagination-bullet, .static-hero-s3 .swiper-pagination-bullet, .wpo-hero-slider-s2 .swiper-pagination-bullet { display: none; } } .wpo-hero-slider .swiper-pagination-bullet-active, .static-hero .swiper-pagination-bullet-active, .static-hero-s2 .swiper-pagination-bullet-active, .static-hero-s3 .swiper-pagination-bullet-active, .wpo-hero-slider-s2 .swiper-pagination-bullet-active { color: #fff; background: #fff; width: 12px; height: 12px; text-align: center; line-height: 12px; } .wpo-hero-slider .swiper-container-horizontal > .swiper-pagination-bullets, .wpo-hero-slider .swiper-pagination-custom, .wpo-hero-slider .swiper-pagination-fraction, .static-hero .swiper-container-horizontal > .swiper-pagination-bullets, .static-hero .swiper-pagination-custom, .static-hero .swiper-pagination-fraction, .static-hero-s2 .swiper-container-horizontal > .swiper-pagination-bullets, .static-hero-s2 .swiper-pagination-custom, .static-hero-s2 .swiper-pagination-fraction, .static-hero-s3 .swiper-container-horizontal > .swiper-pagination-bullets, .static-hero-s3 .swiper-pagination-custom, .static-hero-s3 .swiper-pagination-fraction, .wpo-hero-slider-s2 .swiper-container-horizontal > .swiper-pagination-bullets, .wpo-hero-slider-s2 .swiper-pagination-custom, .wpo-hero-slider-s2 .swiper-pagination-fraction { bottom: 30px; } .wpo-hero-slider .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .static-hero .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .static-hero-s2 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .static-hero-s3 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .wpo-hero-slider-s2 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 8px; } @media (max-width: 1199px) { .wpo-hero-slider, .static-hero, .static-hero-s2, .static-hero-s3, .wpo-hero-slider-s2 { height: 680px; } } @media (max-width: 991px) { .wpo-hero-slider, .static-hero, .static-hero-s2, .static-hero-s3, .wpo-hero-slider-s2 { height: 600px; } } @media (max-width: 767px) { .wpo-hero-slider, .static-hero, .static-hero-s2, .static-hero-s3, .wpo-hero-slider-s2 { height: 500px; } } .wpo-hero-slider .gradient-overlay, .static-hero .gradient-overlay, .static-hero-s2 .gradient-overlay, .static-hero-s3 .gradient-overlay, .wpo-hero-slider-s2 .gradient-overlay { background-color: #000; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0.5; } .wpo-hero-slider .gradient-overlay + .container, .static-hero .gradient-overlay + .container, .static-hero-s2 .gradient-overlay + .container, .static-hero-s3 .gradient-overlay + .container, .wpo-hero-slider-s2 .gradient-overlay + .container { position: relative; z-index: 11; } .wpo-hero-slider .swiper-slide, .static-hero .swiper-slide, .static-hero-s2 .swiper-slide, .static-hero-s3 .swiper-slide, .wpo-hero-slider-s2 .swiper-slide { position: relative; z-index: 11; } .wpo-hero-slider .wpo-hero-title-top span, .static-hero .wpo-hero-title-top span, .static-hero-s2 .wpo-hero-title-top span, .static-hero-s3 .wpo-hero-title-top span, .wpo-hero-slider-s2 .wpo-hero-title-top span { font-size: 22px; color: #e4e4e4; font-family: "Vidaloka", serif; } @media (max-width: 767px) { .wpo-hero-slider .wpo-hero-title-top span, .static-hero .wpo-hero-title-top span, .static-hero-s2 .wpo-hero-title-top span, .static-hero-s3 .wpo-hero-title-top span, .wpo-hero-slider-s2 .wpo-hero-title-top span { font-size: 15px; } } .wpo-hero-slider .slide-title-sub h5, .static-hero .slide-title-sub h5, .static-hero-s2 .slide-title-sub h5, .static-hero-s3 .slide-title-sub h5, .wpo-hero-slider-s2 .slide-title-sub h5 { font-size: 19px; color: #fff; font-family: "DM Sans", sans-serif; text-transform: uppercase; font-weight: 400; letter-spacing: 2px; margin-bottom: 30px; } @media (max-width: 1200px) { .wpo-hero-slider .slide-title-sub h5, .static-hero .slide-title-sub h5, .static-hero-s2 .slide-title-sub h5, .static-hero-s3 .slide-title-sub h5, .wpo-hero-slider-s2 .slide-title-sub h5 { font-size: 16px; font-size: calc-rem-value(16); } } @media (max-width: 991px) { .wpo-hero-slider .slide-title-sub h5, .static-hero .slide-title-sub h5, .static-hero-s2 .slide-title-sub h5, .static-hero-s3 .slide-title-sub h5, .wpo-hero-slider-s2 .slide-title-sub h5 { margin-bottom: 20px; } } .wpo-hero-slider .slide-title, .static-hero .slide-title, .static-hero-s2 .slide-title, .static-hero-s3 .slide-title, .wpo-hero-slider-s2 .slide-title { max-width: 800px; } /*@media (max-width: 1199px) { .wpo-hero-slider .slide-title, .static-hero .slide-title, .static-hero-s2 .slide-title, .static-hero-s3 .slide-title, .wpo-hero-slider-s2 .slide-title { max-width: 555px; } }*/ .wpo-hero-slider .slide-title h2, .static-hero .slide-title h2, .static-hero-s2 .slide-title h2, .static-hero-s3 .slide-title h2, .wpo-hero-slider-s2 .slide-title h2 { font-size: 70px; font-weight: 400; line-height: 90px; margin: 10px 0 15px; color: #fff; text-transform: capitalize; } @media (max-width: 1199px) { .wpo-hero-slider .slide-title h2, .static-hero .slide-title h2, .static-hero-s2 .slide-title h2, .static-hero-s3 .slide-title h2, .wpo-hero-slider-s2 .slide-title h2 { font-size: 50px; font-size: calc-rem-value(50); line-height: 65px; margin-top: 0; } } @media (max-width: 991px) { .wpo-hero-slider .slide-title h2, .static-hero .slide-title h2, .static-hero-s2 .slide-title h2, .static-hero-s3 .slide-title h2, .wpo-hero-slider-s2 .slide-title h2 { font-size: 30px; font-size: calc-rem-value(40); line-height: normal } } @media (max-width: 767px) { .wpo-hero-slider .slide-title h2, .static-hero .slide-title h2, .static-hero-s2 .slide-title h2, .static-hero-s3 .slide-title h2, .wpo-hero-slider-s2 .slide-title h2 { font-size: 20px; font-size: calc-rem-value(30); line-height: normal } } .wpo-hero-slider .slide-text, .static-hero .slide-text, .static-hero-s2 .slide-text, .static-hero-s3 .slide-text, .wpo-hero-slider-s2 .slide-text { max-width: 800px; } @media (max-width: 767px) { .wpo-hero-slider .slide-text, .static-hero .slide-text, .static-hero-s2 .slide-text, .static-hero-s3 .slide-text, .wpo-hero-slider-s2 .slide-text { max-width: 500px; } } .wpo-hero-slider .slide-text p, .static-hero .slide-text p, .static-hero-s2 .slide-text p, .static-hero-s3 .slide-text p, .wpo-hero-slider-s2 .slide-text p { font-size: 22px; color: #fff; line-height: 35px; max-width: 680px; margin-bottom: 40px; color: #e2e2e2; } @media (max-width: 991px) { .wpo-hero-slider .slide-text p, .static-hero .slide-text p, .static-hero-s2 .slide-text p, .static-hero-s3 .slide-text p, .wpo-hero-slider-s2 .slide-text p { font-size: 18px; font-size: calc-rem-value(18); } } @media (max-width: 767px) { .wpo-hero-slider .slide-text p, .static-hero .slide-text p, .static-hero-s2 .slide-text p, .static-hero-s3 .slide-text p, .wpo-hero-slider-s2 .slide-text p { font-size: 16px; font-size: calc-rem-value(16); line-height: 22px; margin-bottom: 30px; } } @media (max-width: 991px) { .wpo-hero-slider .slide-btns, .static-hero .slide-btns, .static-hero-s2 .slide-btns, .static-hero-s3 .slide-btns, .wpo-hero-slider-s2 .slide-btns { max-width: 400px; } } .wpo-hero-slider .slide-btns .theme-btn, .wpo-hero-slider .slide-btns .view-cart-btn, .static-hero .slide-btns .theme-btn, .static-hero .slide-btns .view-cart-btn, .static-hero-s2 .slide-btns .theme-btn, .static-hero-s2 .slide-btns .view-cart-btn, .static-hero-s3 .slide-btns .theme-btn, .static-hero-s3 .slide-btns .view-cart-btn, .wpo-hero-slider-s2 .slide-btns .theme-btn, .wpo-hero-slider-s2 .slide-btns .view-cart-btn { border-radius: 0; font-weight: 600; font-size: 18px; } .wpo-hero-slider .slide-btns .theme-btn:after, .wpo-hero-slider .slide-btns .view-cart-btn:after, .static-hero .slide-btns .theme-btn:after, .static-hero .slide-btns .view-cart-btn:after, .static-hero-s2 .slide-btns .theme-btn:after, .static-hero-s2 .slide-btns .view-cart-btn:after, .static-hero-s3 .slide-btns .theme-btn:after, .static-hero-s3 .slide-btns .view-cart-btn:after, .wpo-hero-slider-s2 .slide-btns .theme-btn:after, .wpo-hero-slider-s2 .slide-btns .view-cart-btn:after { border-radius: 0; } .wpo-hero-slider .slide-btns .hero-video-btn, .static-hero .slide-btns .hero-video-btn, .static-hero-s2 .slide-btns .hero-video-btn, .static-hero-s3 .slide-btns .hero-video-btn, .wpo-hero-slider-s2 .slide-btns .hero-video-btn { margin-left: 40px; } @media (max-width: 767px) { .wpo-hero-slider .slide-btns .hero-video-btn, .static-hero .slide-btns .hero-video-btn, .static-hero-s2 .slide-btns .hero-video-btn, .static-hero-s3 .slide-btns .hero-video-btn, .wpo-hero-slider-s2 .slide-btns .hero-video-btn { margin-left: 20px; } } .static-hero { z-index: 1; background: url(/images/slider/slide-4.jpg) no-repeat center center; overflow: hidden; } .static-hero .hero-inner:before { z-index: -1; } .static-hero .hero-content { text-align: center; margin-top: -20px; } .static-hero .slide-title { max-width: 780px; margin: auto; } @media (max-width: 1199px) { .static-hero .slide-title { max-width: 550px; } } @media (max-width: 575px) { .static-hero .slide-title { max-width: 100%; } } .static-hero .slide-title h2 { text-transform: capitalize; font-weight: 600; line-height: 100px; } @media (max-width: 1199px) { .static-hero .slide-title h2 { line-height: 60px; } } @media (max-width: 767px) { .static-hero .slide-title h2 { line-height: 40px; } } .static-hero .slide-text { margin: auto; max-width: 750px; } .static-hero .btns .theme-btn, .static-hero .btns .view-cart-btn { border-radius: 0; font-weight: 600; font-size: 18px; } .static-hero .btns .theme-btn:after, .static-hero .btns .view-cart-btn:after { border-radius: 0; } /*-------------------------------------------------------------- 4. wpo-footer --------------------------------------------------------------*/ .wpo-site-footer { background: url('/images/footerbg.png') no-repeat bottom; background-size: 100%; position: relative; font-size: 15px; overflow: hidden; z-index: 1; background-color: #213644; } .wpo-site-footer:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: #213644; opacity: 0.95; z-index: -1; } .wpo-site-footer ul { list-style: none; } .wpo-site-footer p { color: #fff; } .wpo-site-footer li { color: #fff; } .wpo-site-footer .container { position: relative; } .wpo-site-footer .wpo-upper-footer { padding: 100px 120px; position: relative; z-index: 1; } @media (max-width: 1800px) { .wpo-site-footer .wpo-upper-footer { padding: 80px 50px; } } @media (max-width: 991px) { .wpo-site-footer .wpo-upper-footer { padding: 60px 30px 0; } } @media (max-width: 767px) { .wpo-site-footer .wpo-upper-footer { padding: 30px 20px 0; } } @media (max-width: 991px) { .wpo-site-footer .wpo-upper-footer .col { min-height: 235px; margin-bottom: 70px; } } @media (max-width: 767px) { .wpo-site-footer .wpo-upper-footer .col { min-height: auto; margin-bottom: 60px; } } .wpo-site-footer .widget-title { margin-bottom: 30px; } @media (max-width: 767px) { .wpo-site-footer .widget-title { margin-bottom: 20px; } } .wpo-site-footer .widget-title h3 { font-weight: 600; font-size: 25px; line-height: 36px; color: #fff; margin: 0; position: relative; font-family: "Vidaloka", serif; } @media (max-width: 991px) { .wpo-site-footer .widget-title h3 { font-size: 20px; font-size: 1.25rem; } } .wpo-site-footer .about-widget .logo { font-size: 45px; font-family: "Vidaloka", serif; color: #8E713E; line-height: 40px; max-width: 150px; } @media (max-width: 991px) { .wpo-site-footer .about-widget .logo { font-size: 40px; } .logo.widget-title { display:inline-block; max-width:unset; width:100px; } } .wpo-site-footer .about-widget .logo span { position: relative; } .wpo-site-footer .about-widget .logo span i { position: absolute; left: 1px; top: 3px; font-size: 13px; } .wpo-site-footer .about-widget p { margin-bottom: 0.8em; line-height: 1.9em; } .wpo-site-footer .about-widget p:last-child { margin-bottom: 0; } .wpo-site-footer .about-widget ul { overflow: hidden; padding-top: 10px; } .wpo-site-footer .about-widget ul li { font-size: 22px; float: left; } .wpo-site-footer .about-widget ul li a { color: #fff; width: 36px; height: 36px; line-height: 40px; border: 1px solid #fff; display: block; text-align: center; border-radius: 50%; font-size: 18px; } .wpo-site-footer .about-widget ul li a:hover { background: #fff; color: #8E713E !important; } .wpo-site-footer .about-widget ul li + li { margin-left: 25px; } @media screen and (max-width: 1600px) { .wpo-site-footer .about-widget ul li + li { margin-left: 10px; } } .wpo-site-footer .link-widget { overflow: hidden; } @media screen and (min-width: 1500px) { .wpo-site-footer .link-widget { padding-left: 65px; } } @media (max-width: 1199px) { .wpo-site-footer .link-widget { padding-left: 20px; } } @media (max-width: 991px) { .wpo-site-footer .link-widget { padding-left: 0; } } @media (max-width: 767px) { .wpo-site-footer .link-widget { max-width: 350px; } } .wpo-site-footer .link-widget ul li { position: relative; } .wpo-site-footer .link-widget ul li a { color: #fff; font-size: 17px; } .wpo-site-footer .link-widget ul li a:hover { text-decoration: underline; } .wpo-site-footer .link-widget ul li { padding-top: 15px; } .wpo-site-footer .contact-ft { margin-top: 20px; padding-right: 60px; } @media (max-width: 1500px) { .wpo-site-footer .contact-ft { padding-right: 0px; } } .wpo-site-footer .contact-ft ul li { padding-bottom: 15px; position: relative; padding-left: 35px; color: #fff; font-size: 16px; } .wpo-site-footer .contact-ft ul li i { position: absolute; left: 0; top: 2px; } .wpo-site-footer .contact-ft ul li .fi:before { font-size: 20px; margin-right: 15px; } .wpo-site-footer .wpo-lower-footer { text-align: center; position: relative; border-top: 1px solid #5F5E5E; } .wpo-site-footer .wpo-lower-footer .row { padding: 20px 0; position: relative; } .wpo-site-footer .wpo-lower-footer ul { display: flex; justify-content: space-between; } @media (max-width: 991px) { .wpo-site-footer .wpo-lower-footer ul { flex-wrap: wrap; justify-content: center; } } .wpo-site-footer .wpo-lower-footer ul li { font-size: 18px; margin: 0; color: #fff; } @media (max-width: 991px) { .wpo-site-footer .wpo-lower-footer ul li:first-child { margin-bottom: 10px; } } @media (max-width: 767px) { .wpo-site-footer .wpo-lower-footer ul li { font-size: 14px; } } .wpo-site-footer .wpo-lower-footer ul li a { color: #fff; text-decoration: none; } @media (max-width: 991px) { .wpo-site-footer .wpo-lower-footer ul li { float: none; display: block; } } @media (max-width: 1200px) { .wpo-site-footer .instagram { margin-top: 40px; } } @media (max-width: 991px) { .wpo-site-footer .instagram { margin-top: 0px; } } .wpo-site-footer .instagram ul { display: flex; flex-wrap: wrap; margin: 0px -3px; } .wpo-site-footer .instagram ul li { flex: 0 0 33.33%; max-width: 33.33%; padding: 0px 3px; margin-bottom: 5px; position: relative; transition: all 0.3s ease-in-out; } .wpo-site-footer .instagram ul li::before { position: absolute; left: 3px; top: 0; width: 97%; height: 100%; content: ""; background: red; z-index: 1; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .wpo-site-footer .instagram ul li:hover { opacity: 0.6; visibility: visible; } .wpo-site-footer .instagram ul li img { width: 100%; } .wpo-site-footer-s2 { background: #202026; } .wpo-site-footer-s2:before { display: none; } .wpo-site-footer-s2 .wpo-lower-footer { border-top: 1px solid #2f2f38; } .sticky-header { width: 100%; position: fixed; left: 0; top: -200px; z-index: 9999; opacity: 0; transition: all 0.7s; } .sticky-on { opacity: 1; top: 0; } /* 3.2 wpo-about-section */ .wpo-about-section { background: #fff; } .wpo-about-section .about-left { position: relative; } @media (max-width: 991px) { .wpo-about-section .about-left { margin-bottom: 40px; } } .wpo-about-section .about-left img { width: 100%; } .wpo-about-section .about-left .about-left-text { background: #8E713E; width: 270px; text-align: center; border: 10px solid #fff; border-left: 0; padding: 40px 0 23px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } @media (max-width: 525px) { .wpo-about-section .about-left .about-left-text { width: 200px; padding: 20px; } } .wpo-about-section .about-left .about-left-text img { width: 150px; height: 150px; } @media (max-width: 525px) { .wpo-about-section .about-left .about-left-text img { width: 80px; height: 80px; } } .wpo-about-section .about-left .about-left-text h5 { font-family: "DM Sans", sans-serif; font-size: 18px; font-weight: 700; line-height: 76px; letter-spacing: 0.43em; color: #fff; margin-bottom: -14px; text-align: center; } @media (max-width: 525px) { .wpo-about-section .about-left .about-left-text h5 { font-size: 16px; line-height: 40px; } } .wpo-about-section .about-left .about-left-text span { font-family: "Vidaloka", serif; font-size: 72px; font-weight: 400; line-height: 76px; color: #213644; margin-bottom: 0; text-align: center; } @media (max-width: 525px) { .wpo-about-section .about-left .about-left-text span { font-size: 35px; line-height: 45px; } } .wpo-about-section .about-right .text { background: #F7F2EE; padding: 74px 72px; } @media (max-width: 1399px) { .wpo-about-section .about-right .text { padding: 29px 40px; } } @media (max-width: 1199px) { .wpo-about-section .about-right .text { padding: 20px 40px; } } @media (max-width: 991px) { .wpo-about-section .about-right .text { padding: 75px 72px; } } @media (max-width: 525px) { .wpo-about-section .about-right .text { padding: 30px 20px; } } .wpo-about-section .about-right .text span { font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.2em; color: #8E713E; } .wpo-about-section .about-right .text h2 { font-family: "Vidaloka", serif; font-size: 42px; font-weight: 400; line-height: 53px; color: #0D0925; margin-top: 9px; margin-bottom: 23px; } @media (max-width: 1399px) { .wpo-about-section .about-right .text h2 { font-size: 40px; } } @media (max-width: 1199px) { .wpo-about-section .about-right .text h2 { font-size: 36px; margin-bottom: 5px; line-height: 40px; } } @media (max-width: 991px) { .wpo-about-section .about-right .text h2 { margin-bottom: 23px; font-size: 42px; } } @media (max-width: 767px) { .wpo-about-section .about-right .text h2 { font-size: 36px; margin-bottom: 5px; line-height: 40px; } } @media (max-width: 525px) { .wpo-about-section .about-right .text h2 { font-size: 25px; } } .wpo-about-section .about-right .text p { font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 30px; color: #66717A; padding-bottom: 11px; } @media (max-width: 1199px) { .wpo-about-section .about-right .text p { margin-bottom: 5px; line-height: 25px; padding-bottom: 5px; } } @media (max-width: 991px) { .wpo-about-section .about-right .text p { font-size: 16px; line-height: 30px; padding-bottom: 11px; } } @media (max-width: 525px) { .wpo-about-section .about-right .text p { font-size: 15px; line-height: 25px; padding-bottom: 11px; } } .wpo-about-section .about-right .text ul { margin-bottom: 20px; } .wpo-about-section .about-right .text ul li { padding: 10px 0; padding-left: 40px; position: relative; color: #5a5753; list-style: none; } .wpo-about-section .about-right .text ul li:before { position: absolute; left: 0; top: 10px; width: 25px; height: 25px; line-height: 25px; background: rgba(172, 141, 104, 0.2); border-radius: 50%; content: "\f00c"; font-family: "fontawesome"; text-align: center; color: #8E713E; font-size: 13px; } .wpo-about-section .about-right .text a { margin-top: 10px; } /* 3.3 wpo-service-section */ .wpo-service-section, .wpo-service-section-s2, .wpo-service-section-s3 { background: #213644; position: relative; z-index: 1; padding: 165px 0; color: #fff; } @media (max-width: 991px) { .wpo-service-section, .wpo-service-section-s2, .wpo-service-section-s3 { padding-top: 90px; padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-service-section, .wpo-service-section-s2, .wpo-service-section-s3 { padding-top: 80px; padding-bottom: 50px; } } .wpo-service-section .shape-1, .wpo-service-section-s2 .shape-1, .wpo-service-section-s3 .shape-1 { position: absolute; top: 0; left: 0; z-index: -1; } .wpo-service-section .shape-1::before, .wpo-service-section-s2 .shape-1::before, .wpo-service-section-s3 .shape-1::before { width: 108px; height: 100px; background: #8E713E; position: absolute; content: ""; top: 18%; left: 12%; transform: translate(-50%, -50%); -webkit-animation: bounceTop 3s linear infinite; animation: bounceTop 3s linear infinite; border-radius: 49% 51% 67% 33%/48% 16% 84% 52%; } @media (max-width: 1199px) { .wpo-service-section .shape-1::before, .wpo-service-section-s2 .shape-1::before, .wpo-service-section-s3 .shape-1::before { top: 16%; left: 10%; } } @media (max-width: 425px) { .wpo-service-section .shape-1::before, .wpo-service-section-s2 .shape-1::before, .wpo-service-section-s3 .shape-1::before { position: unset; } } @-webkit-keyframes bounceTop { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } @keyframes bounceTop { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } .wpo-service-section .wpo-section-title h2, .wpo-service-section-s2 .wpo-section-title h2, .wpo-service-section-s3 .wpo-section-title h2 { color: #fff; margin-top: 20px; } .wpo-service-section .scervice-wrap .scervice-item, .wpo-service-section-s2 .scervice-wrap .scervice-item, .wpo-service-section-s3 .scervice-wrap .scervice-item { background: #fff; padding: 45px 40px; transition: all 0.4s ease-in-out; } @media (max-width: 1399px) { .wpo-service-section .scervice-wrap .scervice-item, .wpo-service-section-s2 .scervice-wrap .scervice-item, .wpo-service-section-s3 .scervice-wrap .scervice-item { padding: 22px; } } @media (max-width: 1199px) { .wpo-service-section .scervice-wrap .scervice-item, .wpo-service-section-s2 .scervice-wrap .scervice-item, .wpo-service-section-s3 .scervice-wrap .scervice-item { padding: 22px 15px; } } @media (max-width: 991px) { .wpo-service-section .scervice-wrap .scervice-item, .wpo-service-section-s2 .scervice-wrap .scervice-item, .wpo-service-section-s3 .scervice-wrap .scervice-item { margin-bottom: 30px; } } @media (max-width: 767px) { .wpo-service-section .scervice-wrap .scervice-item, .wpo-service-section-s2 .scervice-wrap .scervice-item, .wpo-service-section-s3 .scervice-wrap .scervice-item { padding: 45px 40px; } } @media (max-width: 425px) { .wpo-service-section .scervice-wrap .scervice-item, .wpo-service-section-s2 .scervice-wrap .scervice-item, .wpo-service-section-s3 .scervice-wrap .scervice-item { padding: 25px 20px; } } .wpo-service-section .scervice-wrap .scervice-item .scervice-item-img, .wpo-service-section-s2 .scervice-wrap .scervice-item .scervice-item-img, .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-img { width: 80px; height: 80px; border-radius: 50%; background: #F7F2EE; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease-in-out; } @media (max-width: 767px) { .wpo-service-section .scervice-wrap .scervice-item .scervice-item-img, .wpo-service-section-s2 .scervice-wrap .scervice-item .scervice-item-img, .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-img { margin: 0 auto; } } @media (max-width: 767px) { .wpo-service-section .scervice-wrap .scervice-item .scervice-item-text, .wpo-service-section-s2 .scervice-wrap .scervice-item .scervice-item-text, .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-text { text-align: center; } } .wpo-service-section .scervice-wrap .scervice-item .scervice-item-text a h2, .wpo-service-section-s2 .scervice-wrap .scervice-item .scervice-item-text h2, .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-text a h2 { font-family: "Vidaloka", serif; font-size: 26px; font-weight: 400; line-height: 35px; color: #0D0925; margin-top: 35px; text-transform: uppercase; transition: all 0.4s ease-in-out; } @media (max-width: 1199px) { .wpo-service-section .scervice-wrap .scervice-item .scervice-item-text a h2, .wpo-service-section-s2 .scervice-wrap .scervice-item .scervice-item-text a h2, .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-text a h2 { font-size: 24px; line-height: 30px; } } @media (max-width: 991px) { .wpo-service-section .scervice-wrap .scervice-item .scervice-item-text a h2, .wpo-service-section-s2 .scervice-wrap .scervice-item .scervice-item-text a h2, .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-text a h2 { font-size: 22px; } } @media (max-width: 767px) { .wpo-service-section .scervice-wrap .scervice-item .scervice-item-text a h2, .wpo-service-section-s2 .scervice-wrap .scervice-item .scervice-item-text a h2, .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-text a h2 { font-size: 20px; } } @media (max-width: 399px) { .wpo-service-section .scervice-wrap .scervice-item .scervice-item-text a h2, .wpo-service-section-s2 .scervice-wrap .scervice-item .scervice-item-text a h2, .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-text a h2 { font-size: 19px; } } .wpo-service-section .scervice-wrap .scervice-item .scervice-item-text a h2 span, .wpo-service-section-s2 .scervice-wrap .scervice-item .scervice-item-text a h2 span, .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-text a h2 span { color: #8E713E; transition: all 0.4s ease-in-out; } .wpo-service-section .scervice-wrap .scervice-item .scervice-item-text p, .wpo-service-section-s2 .scervice-wrap .scervice-item .scervice-item-text p, .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-text p { font-family: "DM Sans", sans-serif; font-weight: 400; font-size: 16px; line-height: 25px; color: #66717A; transition: all 0.4s ease-in-out; margin-bottom: 0; } .wpo-service-section .scervice-wrap .scervice-item:hover, .wpo-service-section-s2 .scervice-wrap .scervice-item:hover, .wpo-service-section-s3 .scervice-wrap .scervice-item:hover { color: #fff !important; background: #8E713E; } .wpo-service-section-s2 .scervice-wrap .scervice-item:hover .scervice-item-text h2 { color: #fff !important; } .wpo-service-section .scervice-wrap .scervice-item:hover .scervice-item-img, .wpo-service-section-s2 .scervice-wrap .scervice-item:hover .scervice-item-img, .wpo-service-section-s3 .scervice-wrap .scervice-item:hover .scervice-item-img { background: #fff; } .wpo-service-section .scervice-wrap .scervice-item:hover .scervice-item-text a h2, .wpo-service-section-s2 .scervice-wrap .scervice-item:hover .scervice-item-text a h2, .wpo-service-section-s3 .scervice-wrap .scervice-item:hover .scervice-item-text a h2 { color: #fff; } .wpo-service-section .scervice-wrap .scervice-item:hover .scervice-item-text a h2 span, .wpo-service-section-s2 .scervice-wrap .scervice-item:hover .scervice-item-text a h2 span, .wpo-service-section-s3 .scervice-wrap .scervice-item:hover .scervice-item-text a h2 span { color: #fff; } .wpo-service-section .scervice-wrap .scervice-item:hover .scervice-item-text p, .wpo-service-section-s2 .scervice-wrap .scervice-item:hover .scervice-item-text p, .wpo-service-section-s3 .scervice-wrap .scervice-item:hover .scervice-item-text p { color: #fff; } /* 3.4 wpo-cta-section*/ .wpo-cta-section { margin-top: -70px; position: relative; z-index: 1; padding-bottom: 25px; } @media (max-width: 991px) { .wpo-cta-section { margin: 0; padding: 90px 0 71px; } } @media (max-width: 767px) { .wpo-cta-section { padding: 80px 0 41px; } } .wpo-cta-section .cta-wrapper { background: #8E713E; padding: 45px 70px; } @media (max-width: 1199px) { .wpo-cta-section .cta-wrapper { padding: 45px; } } @media (max-width: 991px) { .wpo-cta-section .cta-wrapper { padding: 25px; } } .wpo-cta-section .cta-wrapper .cta-left h2 { font-family: "Vidaloka", serif; font-size: 42px; font-weight: 400; line-height: 51px; text-align: left; color: #fff; margin-bottom: 0; } @media (max-width: 1199px) { .wpo-cta-section .cta-wrapper .cta-left h2 { font-size: 35px; } } @media (max-width: 991px) { .wpo-cta-section .cta-wrapper .cta-left h2 { font-size: 28px; line-height: 40px; } } @media (max-width: 767px) { .wpo-cta-section .cta-wrapper .cta-left h2 { text-align: center; } } @media (max-width: 440px) { .wpo-cta-section .cta-wrapper .cta-left h2 { font-size: 21px; line-height: 30px; } } .wpo-cta-section .cta-wrapper .cta-right { text-align: right; } @media (max-width: 767px) { .wpo-cta-section .cta-wrapper .cta-right { text-align: center; margin-top: 20px; } } .wpo-cta-section .cta-wrapper .cta-right a { background: #fff; color: #8E713E; transition: all 0.4s ease-in-out; } .wpo-cta-section .cta-wrapper .cta-right a:after { background: #213644; } .wpo-cta-section .cta-wrapper .cta-right a:hover { color: #fff; } /* 3.5 wpo-team-section */ .wpo-team-section .team-wrapper, .wpo-team-section-s2 .team-wrapper { /** slider controls **/ } .wpo-team-section .team-wrapper .team-single, .wpo-team-section-s2 .team-wrapper .team-single { position: relative; overflow: hidden; } .wpo-team-section .team-wrapper .team-single .team-single-img, .wpo-team-section-s2 .team-wrapper .team-single .team-single-img { position: relative; } .wpo-team-section .team-wrapper .team-single .team-single-img::after, .wpo-team-section-s2 .team-wrapper .team-single .team-single-img::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #0D0925; opacity: 0; visibility: hidden; transition: all 0.4s ease-in-out; } .wpo-team-section .team-wrapper .team-single .team-single-img img, .wpo-team-section-s2 .team-wrapper .team-single .team-single-img img { width: 100%; transition: all 0.4s ease-in-out; } .wpo-team-section .team-wrapper .team-single .team-single-text, .wpo-team-section-s2 .team-wrapper .team-single .team-single-text { text-align: center; background: #8E713E; width: 250px; padding: 15px 0; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, -50%); transition: all 0.4s ease-in-out; opacity: 0; visibility: hidden; } @media (max-width: 1199px) { .wpo-team-section .team-wrapper .team-single .team-single-text, .wpo-team-section-s2 .team-wrapper .team-single .team-single-text { width: 200px; } } @media (max-width: 480px) { .wpo-team-section .team-wrapper .team-single .team-single-text, .wpo-team-section-s2 .team-wrapper .team-single .team-single-text { width: 250px; } } .wpo-team-section .team-wrapper .team-single .team-single-text a h2, .wpo-team-section-s2 .team-wrapper .team-single .team-single-text a h2 { font-family: "Vidaloka", serif; font-size: 25px; font-weight: 400; line-height: 30px; color: #fff; margin-bottom: 3px; transition: all 0.4s ease-in-out; text-transform: capitalize; display: inline-block; } @media (max-width: 991px) { .wpo-team-section .team-wrapper .team-single .team-single-text a h2, .wpo-team-section-s2 .team-wrapper .team-single .team-single-text a h2 { font-size: 23px; } } @media (max-width: 767px) { .wpo-team-section .team-wrapper .team-single .team-single-text a h2, .wpo-team-section-s2 .team-wrapper .team-single .team-single-text a h2 { font-size: 20px; line-height: 25px; } } .wpo-team-section .team-wrapper .team-single .team-single-text a h2:hover, .wpo-team-section-s2 .team-wrapper .team-single .team-single-text a h2:hover { color: #0D0925; } .wpo-team-section .team-wrapper .team-single .team-single-text span, .wpo-team-section-s2 .team-wrapper .team-single .team-single-text span { font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.06em; color: #fff; text-transform: uppercase; display: block; } .wpo-team-section .team-wrapper .team-single:hover .team-single-img::after, .wpo-team-section-s2 .team-wrapper .team-single:hover .team-single-img::after { opacity: 0.3; visibility: visible; } .wpo-team-section .team-wrapper .team-single:hover .team-single-img img, .wpo-team-section-s2 .team-wrapper .team-single:hover .team-single-img img { transform: scale(1.1); } .wpo-team-section .team-wrapper .team-single:hover .team-single-text, .wpo-team-section-s2 .team-wrapper .team-single:hover .team-single-text { bottom: -33px; opacity: 1; visibility: visible; } .wpo-team-section .team-wrapper .slick-slider, .wpo-team-section-s2 .team-wrapper .slick-slider { margin: 0 -15px; } .wpo-team-section .team-wrapper .slick-slide, .wpo-team-section-s2 .team-wrapper .slick-slide { margin-right: 15px; margin-left: 15px; } .wpo-team-section .team-wrapper .slick-prev, .wpo-team-section .team-wrapper .slick-next, .wpo-team-section-s2 .team-wrapper .slick-prev, .wpo-team-section-s2 .team-wrapper .slick-next { background-color: rgba(172, 141, 104, 0.3); width: 55px; height: 55px; z-index: 10; border-radius: 50%; transition: all 0.5s; } .wpo-team-section .team-wrapper .slick-prev:hover, .wpo-team-section .team-wrapper .slick-next:hover, .wpo-team-section-s2 .team-wrapper .slick-prev:hover, .wpo-team-section-s2 .team-wrapper .slick-next:hover { background-color: rgba(172, 141, 104, 0.6); } @media (max-width: 991px) { .wpo-team-section .team-wrapper .slick-prev, .wpo-team-section .team-wrapper .slick-next, .wpo-team-section-s2 .team-wrapper .slick-prev, .wpo-team-section-s2 .team-wrapper .slick-next { display: none !important; } } .wpo-team-section .team-wrapper .slick-prev, .wpo-team-section-s2 .team-wrapper .slick-prev { left: -100px; } @media (max-width: 1699px) { .wpo-team-section .team-wrapper .slick-prev, .wpo-team-section-s2 .team-wrapper .slick-prev { left: -80px; } } @media (max-width: 1599px) { .wpo-team-section .team-wrapper .slick-prev, .wpo-team-section-s2 .team-wrapper .slick-prev { left: -60px; } } @media (max-width: 1499px) { .wpo-team-section .team-wrapper .slick-prev, .wpo-team-section-s2 .team-wrapper .slick-prev { left: -35px; } } @media (max-width: 1399px) { .wpo-team-section .team-wrapper .slick-prev, .wpo-team-section-s2 .team-wrapper .slick-prev { left: -15px; } } .wpo-team-section .team-wrapper .slick-prev:before, .wpo-team-section-s2 .team-wrapper .slick-prev:before { font-family: "themify"; content: "\e629"; opacity: 1; } .wpo-team-section .team-wrapper .slick-next, .wpo-team-section-s2 .team-wrapper .slick-next { right: -100px; } @media (max-width: 1699px) { .wpo-team-section .team-wrapper .slick-next, .wpo-team-section-s2 .team-wrapper .slick-next { right: -80px; } } @media (max-width: 1599px) { .wpo-team-section .team-wrapper .slick-next, .wpo-team-section-s2 .team-wrapper .slick-next { right: -60px; } } @media (max-width: 1499px) { .wpo-team-section .team-wrapper .slick-next, .wpo-team-section-s2 .team-wrapper .slick-next { right: -35px; } } @media (max-width: 1399px) { .wpo-team-section .team-wrapper .slick-next, .wpo-team-section-s2 .team-wrapper .slick-next { right: -15px; } } .wpo-team-section .team-wrapper .slick-next:before, .wpo-team-section-s2 .team-wrapper .slick-next:before { font-family: "themify"; content: "\e628"; opacity: 1; } .wpo-team-section .team-wrapper .slick-dots, .wpo-team-section-s2 .team-wrapper .slick-dots { bottom: -30px; } @media screen and (min-width: 992px) { .wpo-team-section .team-wrapper .slick-dots, .wpo-team-section-s2 .team-wrapper .slick-dots { display: none !important; } } .wpo-team-section .team-wrapper .slick-dots li, .wpo-team-section-s2 .team-wrapper .slick-dots li { margin: 0; } .wpo-team-section .team-wrapper .slick-dots li.slick-active button, .wpo-team-section-s2 .team-wrapper .slick-dots li.slick-active button { background-color: #fff; border: 2px solid #8E713E; } .wpo-team-section .team-wrapper .slick-dots button, .wpo-team-section-s2 .team-wrapper .slick-dots button { background-color: #8E713E; width: 14px; height: 14px; border: 2px solid transparent; border-radius: 50%; } .wpo-team-section .team-wrapper .slick-dots button:before, .wpo-team-section .team-wrapper .slick-dots button:before, .wpo-team-section-s2 .team-wrapper .slick-dots button:before, .wpo-team-section-s2 .team-wrapper .slick-dots button:before { display: none; } /* 3.6 wpo-project-section */ @media (max-width: 991px) { .wpo-project-section, .wpo-project-area-s2 { padding-top: 82px; } } @media (max-width: 767px) { .wpo-project-section, .wpo-project-area-s2 { padding-top: 72px; } } @media (max-width: 991px) { .wpo-project-section .wpo-section-title, .wpo-project-area-s2 .wpo-section-title { text-align: center; } } .wpo-project-section .wpo-section-title .shape-title, .wpo-project-area-s2 .wpo-section-title .shape-title { left: 75px; } @media (max-width: 991px) { .wpo-project-section .wpo-section-title .shape-title, .wpo-project-area-s2 .wpo-section-title .shape-title { left: 50%; } } .wpo-project-section .project-right, .wpo-project-area-s2 .project-right { text-align: center; border: 1px solid #E0D8CE; padding-top: 15px; width: 230px; height: 82px; margin: 0 0 0 auto; } @media (max-width: 991px) { .wpo-project-section .project-right, .wpo-project-area-s2 .project-right { margin: 0 auto; width: 240px; height: 88px; } } @media (max-width: 767px) { .wpo-project-section .project-right, .wpo-project-area-s2 .project-right { width: 180px; height: 75px; } } .wpo-project-section .project-right a .theme-btn, .wpo-project-section .project-right a .view-cart-btn, .wpo-project-area-s2 .project-right a .theme-btn, .wpo-project-area-s2 .project-right a .view-cart-btn { padding: 20px 45px; } @media (max-width: 991px) { .wpo-project-section .project-right a .theme-btn, .wpo-project-section .project-right a .view-cart-btn, .wpo-project-area-s2 .project-right a .theme-btn, .wpo-project-area-s2 .project-right a .view-cart-btn { padding: 20px 20px; } } @media (max-width: 991px) { .wpo-project-section .project-wrapper, .wpo-project-area-s2 .project-wrapper { padding-bottom: 90px; } } @media (max-width: 767px) { .wpo-project-section .project-wrapper, .wpo-project-area-s2 .project-wrapper { padding-bottom: 80px; } } .wpo-project-section .project-wrapper .project-single, .wpo-project-area-s2 .project-wrapper .project-single { background: #fff; transition: all 0.4s ease-in-out; padding: 35px; } @media (max-width: 1280px) { .wpo-project-section .project-wrapper .project-single, .wpo-project-area-s2 .project-wrapper .project-single { padding: 30px 25px; } } @media (max-width: 580px) { .wpo-project-section .project-wrapper .project-single, .wpo-project-area-s2 .project-wrapper .project-single { padding: 25px 15px; } } .wpo-project-section .project-wrapper .project-single .project-single-img, .wpo-project-area-s2 .project-wrapper .project-single .project-single-img { overflow: hidden; } .wpo-project-section .project-wrapper .project-single .project-single-img img, .wpo-project-area-s2 .project-wrapper .project-single .project-single-img img { width: 100%; transition: all 0.4s ease-in-out; } .wpo-project-section .project-wrapper .project-single .project-single-text, .wpo-project-area-s2 .project-wrapper .project-single .project-single-text { padding-top: 35px; text-align: left; } .wpo-project-section .project-wrapper .project-single .project-single-text span, .wpo-project-area-s2 .project-wrapper .project-single .project-single-text span { font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; line-height: 17px; text-transform: uppercase; letter-spacing: 0.13em; color: #8E713E; transition: all 0.4s ease-in-out; display: block; } @media (max-width: 1280px) { .wpo-project-section .project-wrapper .project-single .project-single-text span, .wpo-project-area-s2 .project-wrapper .project-single .project-single-text span { font-size: 12px; } } .wpo-project-section .project-wrapper .project-single .project-single-text a h2, .wpo-project-area-s2 .project-wrapper .project-single .project-single-text a h2 { font-family: "Vidaloka", serif; text-transform: capitalize; font-size: 25px; font-weight: 400; line-height: 30px; margin-bottom: 0; margin-top: 9px; transition: all 0.4s ease-in-out; display: inline-block; } @media (max-width: 1499px) { .wpo-project-section .project-wrapper .project-single .project-single-text a h2, .wpo-project-area-s2 .project-wrapper .project-single .project-single-text a h2 { font-size: 20px; } } .wpo-project-section .project-wrapper .project-single:hover .project-single-img img, .wpo-project-area-s2 .project-wrapper .project-single:hover .project-single-img img { transform: scale(1.1); } .wpo-project-section .project-wrapper .project-single:hover .project-single-text a h2, .wpo-project-area-s2 .project-wrapper .project-single:hover .project-single-text a h2 { color: #8E713E; } .wpo-project-section .project-wrapper .slick-slider, .wpo-project-area-s2 .project-wrapper .slick-slider { margin: 0 -15px; } .wpo-project-section .project-wrapper .slick-slide, .wpo-project-area-s2 .project-wrapper .slick-slide { margin-right: 15px; margin-left: 15px; } /* 3.7 wpo-testimonial-section*/ .wpo-testimonial-section, .wpo-testimonial-section-s2 { position: relative; z-index: 1; margin-top: -530px; } @media (max-width: 991px) { .wpo-testimonial-section, .wpo-testimonial-section-s2 { margin: 0; padding-bottom: 73px; } } @media (max-width: 767px) { .wpo-testimonial-section, .wpo-testimonial-section-s2 { margin: 0; padding-bottom: 63px; } } .wpo-testimonial-section .testimonial-wrapper, .wpo-testimonial-section-s2 .testimonial-wrapper { background: url(/images/new/bathroom.jpg) center/cover, no-repeat; width: 100%; position: relative; z-index: 1; } .wpo-testimonial-section .testimonial-wrapper::before, .wpo-testimonial-section-s2 .testimonial-wrapper::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #0D0925; opacity: 0.5; z-index: -1; } .wpo-testimonial-section .testimonial-wrapper .testimonial-text, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text { background: #fff; margin-top: 80px; margin-left: 80px; text-align: center; padding: 80px 50px; padding-bottom: 180px; border-bottom: 10px solid #8E713E; } @media (max-width: 1399px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-text, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text { padding: 64px 40px; margin-left: 50px; padding-bottom: 177px; margin-top: 48px; } } @media (max-width: 1199px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-text, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text { padding: 32px 20px; margin-left: 50px; padding-bottom: 106px; margin-top: 19px; } } @media (max-width: 991px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-text, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text { margin: 80px; margin-bottom: 0; padding: 80px 50px; padding-bottom: 180px; } } @media (max-width: 767px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-text, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text { margin: 80px; margin-bottom: 0; padding: 30px 20px; padding-bottom: 120px; } } @media (max-width: 425px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-text, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text { margin: 20px; margin-bottom: 0; padding: 20px 10px; padding-bottom: 80px; } } .wpo-testimonial-section .testimonial-wrapper .testimonial-text img, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text img { margin: 0 auto; } .wpo-testimonial-section .testimonial-wrapper .testimonial-text p, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text p { font-family: "Vidaloka", serif; font-size: 23px; font-weight: 400; line-height: 40px; color: #484653; padding: 0 20px; margin-bottom: 0; margin-top: 50px; } @media (max-width: 1399px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-text p, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text p { font-size: 19px; padding: 0 10px; } } @media (max-width: 1199px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-text p, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text p { font-size: 19px; padding: 0; } } @media (max-width: 425px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-text p, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text p { font-size: 15px; line-height: 25px; } } .wpo-testimonial-section .testimonial-wrapper .testimonial-text h3, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text h3 { font-family: "Vidaloka", serif; font-size: 26px; font-weight: 400; line-height: 32px; color: #0D0925; margin-top: 50px; position: relative; } .wpo-testimonial-section .testimonial-wrapper .testimonial-text h3::after, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text h3::after { position: absolute; top: -30px; left: 50%; content: ""; background: #8E713E; width: 90px; height: 3px; transform: translate(-50%, -50%); } .wpo-testimonial-section .testimonial-wrapper .testimonial-text span, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-text span { font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 21px; color: #66717A; } .wpo-testimonial-section .testimonial-wrapper .testimonial-img, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-img { padding-top: 100px; } @media (max-width: 991px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-img, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-img { display: none; } } .wpo-testimonial-section .testimonial-wrapper .testimonial-img img, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-img img { width: 100%; -o-object-fit: cover; object-fit: cover; } .wpo-testimonial-section .testimonial-wrapper .testimonial-slider .slick-dotted.slick-slider, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-slider .slick-dotted.slick-slider { margin-bottom: 0; } .wpo-testimonial-section .testimonial-wrapper .testimonial-slider .slick-dots, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-slider .slick-dots { bottom: 10%; left: 55%; transform: translate(-50%, -50%); } @media (max-width: 1199px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-slider .slick-dots, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-slider .slick-dots { bottom: 5%; } } @media (max-width: 991px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-slider .slick-dots, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-slider .slick-dots { bottom: 10%; left: 50%; } } @media (max-width: 767px) { .wpo-testimonial-section .testimonial-wrapper .testimonial-slider .slick-dots, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-slider .slick-dots { bottom: 2%; } } .wpo-testimonial-section .testimonial-wrapper .testimonial-slider .slick-dots, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-slider .slick-dots { display: flex; justify-content: center; margin: 0; padding: 1rem 0; list-style-type: none; } .wpo-testimonial-section .testimonial-wrapper .testimonial-slider .slick-dots li, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-slider .slick-dots li { margin: 0 0.25rem; } .wpo-testimonial-section .testimonial-wrapper .testimonial-slider .slick-dots button, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-slider .slick-dots button { display: block; width: 1rem; height: 1rem; padding: 0; border: none; border-radius: 100%; background-color: #8E713E; text-indent: -9999px; opacity: 0.5; } .wpo-testimonial-section .testimonial-wrapper .testimonial-slider .slick-dots li.slick-active button, .wpo-testimonial-section-s2 .testimonial-wrapper .testimonial-slider .slick-dots li.slick-active button { background-color: #8E713E; opacity: 1; } .wpo-testimonial-section.wpo-testimonial-section-s2, .wpo-testimonial-section-s2.wpo-testimonial-section-s2 { margin-top: 0; } /* 3.8 wpo-partners-section */ .wpo-partners-section { background: url(/images/new/garden.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; z-index: 1; } .wpo-partners-section::before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: #213644; z-index: -1; opacity: 0.9; } .wpo-partners-section .hidden { display: none; } .wpo-partners-section .partners-slider .grid img { margin: 0 auto; transition: all 0.3s ease-in-out; } .wpo-partners-section .partners-slider .grid:hover img { filter: grayscale(100%); } .wpo-partners-section .partners-slider .owl-item img { width: unset; } .wpo-partners-section .partners-slider .owl-nav { display: none; } /* 3.9 wpo-blog-section*/ .wpo-blog-section { background: #EDE4DE; } .wpo-blog-section .blog-wrapper .blog-single .images { position: relative; } .wpo-blog-section .blog-wrapper .blog-single .images img { width: 100%; } .wpo-blog-section .blog-wrapper .blog-single .images .date { position: absolute; bottom: -66px; left: 50%; transform: translate(-50%, -50%); background: #F7F2EE; text-align: center; width: 63px; height: 72px; -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%); transition: all 0.4s ease-in-out; } .wpo-blog-section .blog-wrapper .blog-single .images .date h3 { font-family: "DM Sans", sans-serif; font-size: 29px; font-weight: 700; padding-top: 15px; margin-bottom: -7px; color: #213644; } .wpo-blog-section .blog-wrapper .blog-single .images .date span { font-family: "DM Sans", sans-serif; font-size: 15px; font-weight: 700; line-height: 23px; color: #8E713E; transition: all 0.4s ease-in-out; } .wpo-blog-section .blog-wrapper .blog-single .text { padding: 60px 40px 50px; border: 1px solid #F7F2EE; border-top: 0; transition: all 0.4s ease-in-out; text-align: left; } @media (max-width: 1199px) { .wpo-blog-section .blog-wrapper .blog-single .text { padding: 60px 20px 50px; } } .wpo-blog-section .blog-wrapper .blog-single .text span { font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 500; line-height: 17px; letter-spacing: 0.13em; color: #66717A; transition: all 0.4s ease-in-out; text-transform: uppercase; } .wpo-blog-section .blog-wrapper .blog-single .text h2 { font-family: "Vidaloka", serif; font-size: 21px; font-weight: 400; line-height: 32px; color: #000; margin-top: 10px; margin-bottom: 37px; transition: all 0.4s ease-in-out; } .wpo-blog-section .blog-wrapper .blog-single .text a { color: #8E713E; background: #F7F2EE; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 500; line-height: 17px; letter-spacing: 0.16em; text-align: center; padding: 15px 20px; transition: all 0.4s ease-in-out; border: 1px solid transparent; } .wpo-blog-section .blog-wrapper .blog-single:hover .images .date { background: #F7F2EE; -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 100%); } .wpo-blog-section .blog-wrapper .blog-single:hover .images .date span { color: #0D0925; } .wpo-blog-section .blog-wrapper .blog-single:hover .text { background: #8E713E; margin-top: 10px; padding: 50px 40px 50px; border: 1px solid transparent; border-top: 0; } @media (max-width: 1199px) { .wpo-blog-section .blog-wrapper .blog-single:hover .text { padding: 60px 20px 50px; } } .wpo-blog-section .blog-wrapper .blog-single:hover .text span { color: #fff; } .wpo-blog-section .blog-wrapper .blog-single:hover .text h2 { color: #fff; } .wpo-blog-section .blog-wrapper .blog-single:hover .text a { background: transparent; color: #fff; border: 1px solid #fff; } .wpo-blog-section .blog-wrapper .wpo-blog-slider .owl-nav.disabled { display: none; } .wpo-blog-section .blog-wrapper .wpo-blog-slider .owl-dots { display: none; } .wpo-blog-section .blog-wrapper .wpo-blog-slider.owl-carousel { width: 101%; } .wpo-blog-section .blog-wrapper .wpo-blog-slider.owl-carousel .blog-single { background-color: #fff; } .wpo-blog-section .blog-wrapper .wpo-blog-slider .owl-item.active.center .images .date { background: #F7F2EE; -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 100%); } .wpo-blog-section .blog-wrapper .wpo-blog-slider .owl-item.active.center .images .date span { color: #0D0925; } .wpo-blog-section .blog-wrapper .wpo-blog-slider .owl-item.active.center .text { background: #8E713E; margin-top: 10px; padding: 50px 40px 50px; border: 1px solid transparent; border-top: 0; } @media (max-width: 1199px) { .wpo-blog-section .blog-wrapper .wpo-blog-slider .owl-item.active.center .text { padding: 60px 20px 50px; } } .wpo-blog-section .blog-wrapper .wpo-blog-slider .owl-item.active.center .text span { color: #fff; } .wpo-blog-section .blog-wrapper .wpo-blog-slider .owl-item.active.center .text h2 { color: #fff; } .wpo-blog-section .blog-wrapper .wpo-blog-slider .owl-item.active.center .text a { background: transparent; color: #fff; border: 1px solid #fff; } /*====================================== 2. Home-style-2 =======================================*/ /* 5.1 wpo-about-area-s2 */ .wpo-about-area-s2 .wpo-about-img { position: relative; } .wpo-about-area-s2 .wpo-about-img:before { position: absolute; left: 3%; top: 3%; width: 94%; height: 94%; content: ""; border: 1px solid rgba(255, 255, 255, 0.6); } .wpo-about-area-s2 .wpo-about-text { padding-left: 80px; } @media (max-width: 1400px) { .wpo-about-area-s2 .wpo-about-text { padding-left: 40px; } } @media (max-width: 1200px) { .wpo-about-area-s2 .wpo-about-text { padding-left: 20px; } } @media (max-width: 991px) { .wpo-about-area-s2 .wpo-about-text { padding-left: 0px; padding-top: 30px; } } .wpo-about-area-s2 .wpo-about-text .wpo-about-title span { display: inline-block; font-size: 18px; line-height: 26px; color: #8E713E; padding-left: 80px; position: relative; } .wpo-about-area-s2 .wpo-about-text .wpo-about-title span:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 70px; height: 1px; content: ""; background: #8E713E; } .wpo-about-area-s2 .wpo-about-text .wpo-about-title h2 { font-weight: 700; font-size: 45px; line-height: 65px; margin-top: 20px; margin-bottom: 30px; } @media (max-width: 1200px) { .wpo-about-area-s2 .wpo-about-text .wpo-about-title h2 { font-size: 35px; line-height: 55px; margin-bottom: 20px; } } @media (max-width: 450px) { .wpo-about-area-s2 .wpo-about-text .wpo-about-title h2 { font-size: 25px; line-height: 40px; } } .wpo-about-area-s2 .wpo-about-text h5 { font-style: italic; font-weight: normal; font-size: 22px; line-height: 32px; color: #4D4C60; font-weight: 400; margin-bottom: 30px; } .wpo-about-area-s2 .wpo-about-text p { font-size: 16px; color: #595959; } .wpo-about-area-s2 .wpo-about-text .btns { display: flex; align-items: center; margin-top: 40px; } .wpo-about-area-s2 .wpo-about-text .btns .theme-btn:after, .wpo-about-area-s2 .wpo-about-text .btns .view-cart-btn:after { background: #213644; } .wpo-about-area-s2 .wpo-about-text .btns ul { display: flex; align-items: center; list-style: none; padding-left: 20px; } .wpo-about-area-s2 .wpo-about-text .btns ul li .video-btn { display: block; width: 55px; height: 55px; background: #fff; box-shadow: 0px 2px 4px 2px rgba(146, 139, 104, 0.16); text-align: center; line-height: 58px; border-radius: 50%; color: #8E713E; margin-right: 10px; } @media (max-width: 450px) { .wpo-about-area-s2 .wpo-about-text .btns ul li.video-text { display: none; } } .wpo-about-area-s2 .wpo-about-text .btns ul li.video-text a { color: #0D0925; font-weight: 600; width: 100%; height: 100%; box-shadow: none; background: none; } /* 5.2 wpo-service-section-s2 */ .wpo-service-section-s2 .scervice-item, .wpo-service-section-s3 .scervice-item { text-align: center; } .wpo-service-section-s2 .scervice-item .scervice-item-img, .wpo-service-section-s3 .scervice-item .scervice-item-img { margin: 0 auto; } .wpo-service-section-s2 .scervice-item .scervice-item-img img, .wpo-service-section-s3 .scervice-item .scervice-item-img img { width: 40px; } @media (max-width: 767px) { .wpo-service-section-s2 .scervice-item, .wpo-service-section-s3 .scervice-item { padding: 45px 20px; } } .wpo-service-section-s2 .wpo-service-slider .owl-nav button, .wpo-service-section-s3 .wpo-service-slider .owl-nav button { position: absolute; transform: translateY(-50%); height: 50px; width: 50px; line-height: 46px; text-align: center; background: transparent; transition: all 0.3s; background: transparent; border: 1px solid #8E713E; color: #8E713E; text-decoration: none; border-radius: 50%; } @media (max-width: 991px) { .wpo-service-section-s2 .wpo-service-slider .owl-nav button, .wpo-service-section-s3 .wpo-service-slider .owl-nav button { display: none; } } .wpo-service-section-s2 .wpo-service-slider .owl-nav button:hover, .wpo-service-section-s3 .wpo-service-slider .owl-nav button:hover { background: #8E713E; color: #fff; text-decoration: none; border-radius: 50%; } .wpo-service-section-s2 .wpo-service-slider .owl-nav .owl-prev, .wpo-service-section-s3 .wpo-service-slider .owl-nav .owl-prev { left: -9%; bottom: 30%; } @media (max-width: 1599px) { .wpo-service-section-s2 .wpo-service-slider .owl-nav .owl-prev, .wpo-service-section-s3 .wpo-service-slider .owl-nav .owl-prev { left: -60px; } } @media (max-width: 1499px) { .wpo-service-section-s2 .wpo-service-slider .owl-nav .owl-prev, .wpo-service-section-s3 .wpo-service-slider .owl-nav .owl-prev { left: -35px; } } @media (max-width: 1399px) { .wpo-service-section-s2 .wpo-service-slider .owl-nav .owl-prev, .wpo-service-section-s3 .wpo-service-slider .owl-nav .owl-prev { left: -15px; } } .wpo-service-section-s2 .wpo-service-slider .owl-nav button.owl-next, .wpo-service-section-s3 .wpo-service-slider .owl-nav button.owl-next { right: -9%; bottom: 30%; } @media (max-width: 1599px) { .wpo-service-section-s2 .wpo-service-slider .owl-nav button.owl-next, .wpo-service-section-s3 .wpo-service-slider .owl-nav button.owl-next { right: -60px; } } @media (max-width: 1499px) { .wpo-service-section-s2 .wpo-service-slider .owl-nav button.owl-next, .wpo-service-section-s3 .wpo-service-slider .owl-nav button.owl-next { right: -35px; } } @media (max-width: 1399px) { .wpo-service-section-s2 .wpo-service-slider .owl-nav button.owl-next, .wpo-service-section-s3 .wpo-service-slider .owl-nav button.owl-next { right: -15px; } } .wpo-service-section-s2 .wpo-service-slider .owl-dots, .wpo-service-section-s3 .wpo-service-slider .owl-dots { bottom: -10px; position: absolute; left: 50%; transform: translateX(-50%); display: none; } @media (max-width: 991px) { .wpo-service-section-s2 .wpo-service-slider .owl-dots, .wpo-service-section-s3 .wpo-service-slider .owl-dots { display: block; } } .wpo-service-section-s2 .wpo-service-slider .owl-dots button, .wpo-service-section-s3 .wpo-service-slider .owl-dots button { border: 0; width: 10px; height: 12px; margin: 5px; border-radius: 50%; } .wpo-service-section-s2 .wpo-service-slider .owl-dots button.active, .wpo-service-section-s3 .wpo-service-slider .owl-dots button.active { background: #8E713E; } /* 5.3 wpo-team-section-s2 */ .wpo-team-section-s2 { padding-bottom: 90px; } @media (max-width: 991px) { .wpo-team-section-s2 { padding-bottom: 60px; } } @media (max-width: 767px) { .wpo-team-section-s2 { padding-bottom: 50px; } } .wpo-team-section-s2 .team-wrapper .team-single { position: relative; margin-bottom: 30px; } .wpo-team-section-s2 .team-wrapper .team-single .team-single-img { overflow: hidden; } .wpo-team-section-s2 .team-wrapper .team-single .team-single-text { width: 100%; position: unset; opacity: 1; visibility: visible; left: 0; transform: none; } /* 3.4 wpo-fun-fact-section */ .wpo-fun-fact-section, .wpo-fun-fact-section-s2 { text-align: center; background: #8E713E; position: relative; z-index: 1; overflow: hidden; } @media (max-width: 767px) { .wpo-fun-fact-section, .wpo-fun-fact-section-s2 { padding-bottom: 30px; } } .wpo-fun-fact-section h2, .wpo-fun-fact-section-s2 h2 { font-size: 30px; font-size: calc-rem-value(30); font-weight: 600; margin: 0 0 1.8em; } @media (max-width: 991px) { .wpo-fun-fact-section h2, .wpo-fun-fact-section-s2 h2 { font-size: 26px; font-size: calc-rem-value(26); } } @media (max-width: 767px) { .wpo-fun-fact-section h2, .wpo-fun-fact-section-s2 h2 { font-size: 25px; font-size: calc-rem-value(25); } } .wpo-fun-fact-section .wpo-fun-fact-grids .grid, .wpo-fun-fact-section-s2 .wpo-fun-fact-grids .grid { width: 25%; float: left; } @media (max-width: 767px) { .wpo-fun-fact-section .wpo-fun-fact-grids .grid, .wpo-fun-fact-section-s2 .wpo-fun-fact-grids .grid { width: 50%; margin-bottom: 50px; } } .wpo-fun-fact-section .grid h3, .wpo-fun-fact-section-s2 .grid h3 { font-size: 65px; font-size: calc-rem-value(65); font-weight: 700; color: #fff; margin: 0 0 0.2em; font-family: "Vidaloka", serif; display: flex; align-items: center; justify-content: center; } @media (max-width: 1200px) { .wpo-fun-fact-section .grid h3, .wpo-fun-fact-section-s2 .grid h3 { font-size: 50px; ont-size: calc-rem-value(50); } } @media (max-width: 991px) { .wpo-fun-fact-section .grid h3, .wpo-fun-fact-section-s2 .grid h3 { font-size: 40px; font-size: calc-rem-value(40); } } @media (max-width: 767px) { .wpo-fun-fact-section .grid h3, .wpo-fun-fact-section-s2 .grid h3 { font-size: 35px; font-size: calc-rem-value(35); } } .wpo-fun-fact-section .grid h3 + p, .wpo-fun-fact-section-s2 .grid h3 + p { font-size: 20px; font-size: calc-rem-value(15); text-transform: uppercase; margin: 0; color: #fff; font-family: "DM Sans", sans-serif; letter-spacing: 3px; } @media (max-width: 991px) { .wpo-fun-fact-section .grid h3 + p, .wpo-fun-fact-section-s2 .grid h3 + p { font-size: 14px; font-size: calc-rem-value(14); } } @media (max-width: 575px) { .wpo-fun-fact-section .grid h3 + p, .wpo-fun-fact-section-s2 .grid h3 + p { letter-spacing: 0; } } .wpo-fun-fact-section .shape-1, .wpo-fun-fact-section-s2 .shape-1 { position: absolute; left: 0; top: 0; z-index: -10; } .wpo-fun-fact-section .shape-1 svg, .wpo-fun-fact-section-s2 .shape-1 svg { fill: #213644; } .wpo-fun-fact-section .shape-2, .wpo-fun-fact-section-s2 .shape-2 { position: absolute; right: 0; bottom: 0; z-index: -10; } .wpo-fun-fact-section .shape-2 svg, .wpo-fun-fact-section-s2 .shape-2 svg { fill: #213644; } /*====================================== 6. Home-style-3 =======================================*/ /* 6.1 wpo-service-section-s3 */ .wpo-service-section-s3 { padding: 120px 0; } .wpo-service-section-s3 .scervice-wrap .scervice-item { padding: 0; background: transparent; overflow: hidden; } .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-img { position: relative; width: 100%; height: 100%; border-radius: 0; overflow: hidden; } .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-img img { width: 100%; transition: all 0.3s ease-in-out; } .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-img .content { position: absolute; left: 0; bottom: -25px; transition: all 0.3s ease-in-out; opacity: 0; visibility: hidden; } .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-img .content h2 { margin-bottom: 0; } .wpo-service-section-s3 .scervice-wrap .scervice-item .scervice-item-img .content h2 a { background: #8E713E; text-transform: uppercase; font-size: 30px; color: #fff; padding: 10px 15px; } .wpo-service-section-s3 .scervice-wrap .scervice-item:hover { background: transparent; } .wpo-service-section-s3 .scervice-wrap .scervice-item:hover .scervice-item-img img { transform: scale(1.1); } .wpo-service-section-s3 .scervice-wrap .scervice-item:hover .scervice-item-img .content { bottom: 9px; opacity: 1; visibility: visible; } /* 6.2 wpo-pricing-section */ .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item { box-shadow: 0px 2px 16.8px 3.2px rgba(0, 38, 66, 0.08); } @media (max-width: 991px) { .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item { margin-bottom: 30px; } } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top { padding: 30px; text-align: center; padding-top: 0; padding-bottom: 0; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .pricing-thumb, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .pricing-thumb { display: inline-block; padding: 3px 30px 5px; background: #8E713E; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .pricing-thumb span, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .pricing-thumb span { text-transform: uppercase; color: #fff; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text { margin-top: 30px; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text h2, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text h2 { color: #213644; font-size: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-weight: 700; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text h2 span, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text h2 span { font-weight: 500; color: #0D0925; font-size: 16px; text-transform: uppercase; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text p, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top .wpo-pricing-text p { padding-bottom: 30px; max-width: 282px; margin: 0 auto; color: #484653; border-bottom: 1px solid #8E713E; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom { padding: 40px; padding-top: 35px; text-align: center; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text ul, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text ul { list-style: none; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text ul li, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text ul li { color: #66717A; padding-bottom: 15px; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a { font-size: 16px; color: #8E713E; font-weight: 500; display: inline-block; margin-top: 20px; position: relative; padding: 10px 25px; border: 1px solid #8E713E; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a:hover, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a:hover { background: #8E713E; color: #fff; } .wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a:hover:before, .wpo-pricing-section-s2 .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom .wpo-pricing-bottom-text a:hover:before { background-color: #8E713E; } .wpo-pricing-section .wpo-pricing-wrap .col:last-child .wpo-pricing-item, .wpo-pricing-section-s2 .wpo-pricing-wrap .col:last-child .wpo-pricing-item { margin-bottom: 0; } /* 6.3 wpo-project-area-s2 */ .wpo-project-area-s2 { padding: 120px 0; } @media (max-width: 991px) { .wpo-project-area-s2 { padding: 90px 0; } } @media (max-width: 767px) { .wpo-project-area-s2 { padding: 90px 0; } } .wpo-project-area-s2 .container-fluid { padding: 0; } .wpo-project-area-s2 .wpo-section-title { text-align: center; } .wpo-project-area-s2 .wpo-section-title .shape-title { left: 50%; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item { position: relative; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-img { position: relative; z-index: 1; overflow: hidden; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-img:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #0C1145; content: ""; opacity: 0; z-index: 1; transition: all 0.3s; visibility: hidden; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-img .left-border { position: absolute; left: 20px; top: 20px; width: 100%; height: 100%; z-index: 11; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-img .left-border:before { position: absolute; left: 50%; top: 15px; height: 1px; width: 0; background: #fff; content: ""; transition: all 0.3s; transform: translateX(-50%); } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-img .left-border::after { position: absolute; left: 15px; top: 50%; height: 0; width: 1px; background: #fff; content: ""; transition: all 0.3s; transform: translateY(-50%); } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-img .right-border { position: absolute; right: 20px; bottom: 20px; width: 100%; height: 100%; z-index: 11; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-img .right-border:before { position: absolute; right: -80%; bottom: 15px; height: 1px; width: 0; background: #fff; content: ""; transition: all 0.3s; transform: translateX(-50%); } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-img .right-border::after { position: absolute; right: 15px; height: 0; width: 1px; background: #fff; content: ""; transition: all 0.3s; top: 50%; transform: translateY(-50%); } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 111; transition: all 0.3s; opacity: 0; visibility: hidden; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-text h2 { font-size: 40px; line-height: 58px; } @media (max-width: 575px) { .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-text h2 { font-size: 30px; line-height: 45px; } } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-text h2 a { color: #fff; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-text h2 a:hover { color: #8E713E; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-text span { font-weight: normal; font-size: 18px; line-height: 21px; color: #fff; } @media (max-width: 575px) { .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-text span { font-size: 16px; } } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item:hover .wpo-project-img:before { opacity: 0.5; visibility: visible; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item:hover .wpo-project-img .left-border:before { width: 120%; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item:hover .wpo-project-img .left-border::after { height: 120%; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item:hover .wpo-project-img .right-border:before { width: 120%; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item:hover .wpo-project-img .right-border::after { height: 120%; } .wpo-project-area-s2 .wpo-project-wrap .wpo-project-item:hover .wpo-project-text { opacity: 1; visibility: visible; } .wpo-project-area-s2 .wpo-project-wrap .project-grids { margin: 0; } .wpo-project-area-s2 .wpo-project-wrap .project-grids .grid { width: 33.33%; float: left; padding: 0; } @media (max-width: 1500px) { .wpo-project-area-s2 .wpo-project-wrap .project-grids .grid { padding: 0; } } @media (max-width: 991px) { .wpo-project-area-s2 .wpo-project-wrap .project-grids .grid { padding: 0; width: 50%; } } @media (max-width: 767px) { .wpo-project-area-s2 .wpo-project-wrap .project-grids .grid { width: 100%; } } .wpo-project-area-s2 .wpo-project-wrap .project-grids .grid img { width: 100%; } .wpo-project-area-s2 .wpo-project-wrap .project-grids .grid:nth-child(4) { width: 50%; } @media (max-width: 991px) { .wpo-project-area-s2 .wpo-project-wrap .project-grids .grid:nth-child(4) img { min-height: 282px; -o-object-fit: cover; object-fit: cover; } } @media (max-width: 767px) { .wpo-project-area-s2 .wpo-project-wrap .project-grids .grid:nth-child(4) { width: 100%; } } .wpo-project-area-s2 .wpo-project-wrap .project-grids .grid:nth-child(5) { width: 50%; } @media (max-width: 991px) { .wpo-project-area-s2 .wpo-project-wrap .project-grids .grid:nth-child(5) { width: 100%; } } /*===================================================== 7. wpo-project-single ======================================================*/ .wpo-project-single-area { padding-bottom: 70px; } @media (max-width: 991px) { .wpo-project-single-area { padding-bottom: 40px; } } @media (max-width: 767px) { .wpo-project-single-area { padding-bottom: 30px; } } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-title h3 { font-weight: 400; font-size: 35px; line-height: 130.5%; margin-bottom: 20px; } @media (max-width: 767px) { .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-title h3 { font-size: 25px; } } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item { margin-bottom: 50px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item p { color: #484653; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-main-img { margin-bottom: 50px; margin-top: 20px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-main-img .owl-controls { width: 100%; margin: 0; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-main-img .owl-nav [class*=owl-]:hover { background: #8E713E; color: #fff; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-main-img .owl-nav [class*=owl-] { background: #fff; width: 50px; height: 50px; line-height: 58px; padding: 0; margin: 0; border-radius: 50%; color: #8E713E; transition: all 0.3s; border: 0; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-main-img .owl-nav [class*=owl-] .fi::before { font-size: 20px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-main-img .owl-nav .owl-prev, .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-main-img .owl-nav .owl-next { position: absolute; top: 50%; transform: translateY(-50%); } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-main-img .owl-nav .owl-prev { left: 15px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-main-img .owl-nav .owl-next { right: 15px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-content-des-right { max-width: 380px; flex-basis: 35%; margin-left: auto; margin-bottom: 50px; } @media (max-width: 1200px) { .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-content-des-right { flex-basis: 100%; margin-bottom: 40px; } } @media (max-width: 991px) { .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-content-des-right { margin-left: 0; max-width: 100%; margin-top: 20px; } } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-content-des-right ul { list-style: none; padding: 50px 30px; box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15); } @media (max-width: 575px) { .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-content-des-right ul { padding: 50px 20px; } } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-content-des-right ul li { display: flex; padding: 10px 0; font-size: 16px; color: #213644; font-weight: 600; position: relative; justify-content: space-between; font-weight: 600; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-content-des-right ul li span { flex-basis: 60%; color: #484653; font-weight: 400; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-content-des-right ul li:last-child { padding-bottom: 0; border-bottom: 0; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item .wpo-project-single-content-des-right ul li:first-child { padding-top: 0; } @media (max-width: 991px) { .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item.related-project { margin-bottom: 20px; } } .wpo-project-single-area .wpo-project-single-wrap .list-widget ul { list-style: none; } .wpo-project-single-area .wpo-project-single-wrap .list-widget ul li { padding: 7px 0; padding-left: 35px; position: relative; color: #484653; } .wpo-project-single-area .wpo-project-single-wrap .list-widget ul li:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; line-height: 25px; border-radius: 50%; background: rgba(172, 141, 104, 0.1); content: "\f00c"; font-family: "fontawesome"; text-align: center; color: #8E713E; font-size: 14px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-p-details-img { margin-bottom: 10px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item-quote { padding: 45px; background: rgba(172, 141, 104, 0.1); text-align: center; border-radius: 15px; } @media (max-width: 991px) { .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item-quote { padding: 20px; margin-top: 30px; } } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item-quote p { font-size: 22px; margin-bottom: 30px; color: #213644; line-height: 44px; } @media (max-width: 991px) { .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item-quote p { font-size: 16px; margin-bottom: 20px; } } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item-quote span { font-size: 22px; font-weight: 600; color: #213644; } @media (max-width: 991px) { .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item-quote span { font-size: 16px; } } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item-quote span span { color: #8E713E; font-weight: 400; } @media (max-width: 991px) { .wpo-project-single-area .wpo-project-single-wrap .list-widget-s { margin-top: 30px; } } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-gallery { margin-bottom: 30px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area { padding: 30px; border-radius: 20px; box-shadow: 0px 2px 8px 2px rgba(22, 14, 71, 0.1); } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area .wpo-contact-title { margin-bottom: 30px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area .wpo-contact-title h2 { font-weight: 400; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area .wpo-contact-form-area .col { margin-bottom: 30px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area .wpo-contact-form-area .form-control { height: 50px; border: 0; border-bottom: 1px solid #F1EAE5; border-radius: 0; background: none; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area .wpo-contact-form-area .form-control:focus { outline: none; box-shadow: none; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area .wpo-contact-form-area textarea.form-control { height: 120px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area .wpo-contact-form-area select.form-control { background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area .wpo-contact-form-area .submit-area button { border-radius: 6px; } .wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area .wpo-contact-form-area .submit-area button::after { background: #213644; } .wpo-project-single-area .wpo-project-single-wrap .project-single { background: #F7F2EE; transition: all 0.4s ease-in-out; padding: 35px; } @media (max-width: 991px) { .wpo-project-single-area .wpo-project-single-wrap .project-single { margin-bottom: 30px; } } @media (max-width: 1280px) { .wpo-project-single-area .wpo-project-single-wrap .project-single { padding: 30px 25px; } } @media (max-width: 580px) { .wpo-project-single-area .wpo-project-single-wrap .project-single { padding: 25px 15px; } } .wpo-project-single-area .wpo-project-single-wrap .project-single .project-single-img { overflow: hidden; } .wpo-project-single-area .wpo-project-single-wrap .project-single .project-single-img img { width: 100%; transition: all 0.4s ease-in-out; } .wpo-project-single-area .wpo-project-single-wrap .project-single .project-single-text { padding-top: 35px; text-align: left; } .wpo-project-single-area .wpo-project-single-wrap .project-single .project-single-text span { font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; line-height: 17px; text-transform: uppercase; letter-spacing: 0.13em; color: #8E713E; transition: all 0.4s ease-in-out; display: block; } @media (max-width: 1280px) { .wpo-project-single-area .wpo-project-single-wrap .project-single .project-single-text span { font-size: 12px; } } .wpo-project-single-area .wpo-project-single-wrap .project-single .project-single-text a h2 { font-family: "Vidaloka", serif; text-transform: capitalize; font-size: 25px; font-weight: 400; line-height: 30px; margin-bottom: 0; margin-top: 9px; transition: all 0.4s ease-in-out; display: inline-block; } @media (max-width: 1499px) { .wpo-project-single-area .wpo-project-single-wrap .project-single .project-single-text a h2 { font-size: 20px; } } .wpo-project-single-area .wpo-project-single-wrap .project-single:hover .project-single-img img { transform: scale(1.1); } .wpo-project-single-area .wpo-project-single-wrap .project-single:hover .project-single-text a h2 { color: #8E713E; } /*===================================================== 8. wpo-service-single ======================================================*/ .wpo-service-single-area { padding-bottom: 80px; } @media (max-width: 991px) { .wpo-service-single-area { padding-bottom: 50px; } } @media (max-width: 767px) { .wpo-service-single-area { padding-bottom: 40px; } } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-single-title h3 { font-weight: 400; font-size: 35px; line-height: 130.5%; margin-bottom: 20px; } @media (max-width: 767px) { .wpo-service-single-area .wpo-service-single-wrap .wpo-service-single-title h3 { font-size: 25px; } } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-single-item { margin-bottom: 40px; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-single-item .wpo-service-single-main-img { margin-bottom: 30px; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-single-item p { color: #484653; } .wpo-service-single-area .wpo-service-single-wrap .list-widget { max-width: 590px; } .wpo-service-single-area .wpo-service-single-wrap .list-widget ul { list-style: none; } .wpo-service-single-area .wpo-service-single-wrap .list-widget ul li { padding: 10px 0; padding-left: 35px; position: relative; color: #484653; } .wpo-service-single-area .wpo-service-single-wrap .list-widget ul li:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; line-height: 25px; border-radius: 50%; background: rgba(172, 141, 104, 0.1); content: "\f00c"; font-family: "fontawesome"; text-align: center; color: #8E713E; font-size: 14px; } .wpo-service-single-area .wpo-service-single-wrap .wpo-p-details-img { margin-bottom: 10px; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area { padding-bottom: 0; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area .wpo-service-item { padding: 20px; box-shadow: 0px 2px 10px 2px rgba(21, 44, 88, 0.05); margin-bottom: 30px; display: inline-block } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area .wpo-service-item i::before { font-size: 60px; color: #8E713E; line-height: 1.5; } @media (max-width: 1200px) { .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area .wpo-service-item { padding: 20px 10px; } } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area .wpo-service-item h2 { font-weight: 400; font-size: 22px; margin-bottom: 12px; margin-top: 0; } @media (max-width: 1400px) { .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area .wpo-service-item h2 { font-size: 19px; margin-bottom: 10px; } } @media (max-width: 1200px) { .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area .wpo-service-item h2 { font-size: 17px; margin-bottom: 10px; } } @media (max-width: 991px) { .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area .wpo-service-item h2 { font-size: 22px; } } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area .wpo-service-item p { margin-bottom: 5px; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-contact-area { padding: 30px; box-shadow: 0px 2px 8px 2px rgba(22, 14, 71, 0.1); border-radius: 20px; background: #fff; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-contact-area .wpo-contact-title { margin-bottom: 30px; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-contact-area .wpo-contact-form-area .col { margin-bottom: 30px; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-contact-area .wpo-contact-form-area .form-control { height: 50px; border: 0; border-bottom: 1px solid #F1EAE5; border-radius: 0; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-contact-area .wpo-contact-form-area .form-control:focus { outline: none; box-shadow: none; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-contact-area .wpo-contact-form-area textarea.form-control { height: 120px; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-contact-area .wpo-contact-form-area select.form-control { background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-contact-area .wpo-contact-form-area .submit-area button { border-radius: 6px; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-contact-area .wpo-contact-form-area .submit-area button::after { background: #213644; } /*========================================== 9. wpo-team-single ===========================================*/ .team-pg-area { max-width: 1080px; margin: 0 auto; } .team-info-img { padding: 25px; box-shadow: 0px 6px 20.1px 4.9px rgba(176, 191, 238, 0.12); } @media (max-width: 991px) { .team-info-img { margin-bottom: 40px; } } .team-info-img img { width: 100%; height: 465px; -o-object-fit: cover; object-fit: cover; } @media (max-width: 991px) { .team-info-img img { height: 100%; } } .team-info-text h2 { font-size: 30px; font-weight: 400; color: #fff; margin-top: 0; margin-bottom: 50px; text-align: center; } .team-info-text { box-shadow: 0px 6px 20.1px 4.9px rgba(176, 191, 238, 0.12); padding: 58px 50px; } .team-info-text ul li { font-size: 17px; color: #1d2327; font-weight: 400; margin-bottom: 22px; list-style: none; } .team-info-text ul li:last-child { padding-bottom: 0; } .team-info-text ul li span { font-size: 16px; color: #8c8c8c; display: inline-block; position: relative; padding-left: 5px; font-weight: 400; } .team-info-text ul li:last-child { margin-bottom: 0; } .at-progress { box-shadow: 0px 5px 15px 0px rgba(62, 65, 159, 0.1); padding: 40px 0; } @media (max-width: 991px) { .at-progress { padding-bottom: 0; } } .team-info-text h2 { font-size: 27px; font-weight: 400; color: #213644; margin-top: 0; margin-bottom: 25px; text-align: center; background: #eee; padding: 20px; } .team-info-wrap ul { padding-left: 0; } .exprience-wrap p { color: #5d5851; } .exprience-wrap h2 { margin-bottom: 20px; font-weight: 400; color: #213644; } /*progress-design*/ .progress { width: 150px; height: 150px; background: none; margin: 0 auto; box-shadow: none; position: relative; overflow: unset; } .progress:after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 6px solid #ebebeb; position: absolute; top: 0; left: 0; } .progress > span { width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; } .progress .progress-left { left: 0; } .progress .progress-bar { width: 100%; height: 100%; background: none; border-width: 6px; border-style: solid; position: absolute; top: 0; } .progress .progress-left .progress-bar { left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px; border-left: 0; transform-origin: center left; } .progress .progress-right { right: 0; } .progress .progress-right .progress-bar { left: -100%; border-top-left-radius: 80px; border-bottom-left-radius: 80px; border-right: 0; transform-origin: center right; -webkit-animation: loading-1 1.8s linear forwards; animation: loading-1 1.8s linear forwards; } .progress .progress-value { width: 90%; height: 90%; border-radius: 50%; background: #fff; font-size: 30px; color: #8E713E; line-height: 135px; text-align: center; position: absolute; top: -5%; left: 5%; font-weight: 400; font-family: "Vidaloka", serif; } .progress .progress-bar { border-color: #8E713E; } .progress-name { position: absolute; left: 50%; transform: translateX(-50%); bottom: 25%; width: 100%; text-align: center; } .progress-name span { font-size: 15px; color: #213644; line-height: 15px; } .progress.blue .progress-left .progress-bar { -webkit-animation: loading-2 1.5s linear forwards 1.8s; animation: loading-2 1.5s linear forwards 1.8s; } .progress.yellow .progress-left .progress-bar { -webkit-animation: loading-3 1s linear forwards 1.8s; animation: loading-3 1s linear forwards 1.8s; } .progress.pink .progress-left .progress-bar { -webkit-animation: loading-4 0.4s linear forwards 1.8s; animation: loading-4 0.4s linear forwards 1.8s; } .progress.green .progress-left .progress-bar { -webkit-animation: loading-5 1.2s linear forwards 1.8s; animation: loading-5 1.2s linear forwards 1.8s; } @-webkit-keyframes loading-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } @keyframes loading-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } @-webkit-keyframes loading-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } } @keyframes loading-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } } @-webkit-keyframes loading-3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(120deg); } } @keyframes loading-3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(120deg); } } @-webkit-keyframes loading-4 { 0% { transform: rotate(0deg); } 100% { transform: rotate(46deg); } } @keyframes loading-4 { 0% { transform: rotate(0deg); } 100% { transform: rotate(46deg); } } @-webkit-keyframes loading-5 { 0% { transform: rotate(0deg); } 100% { transform: rotate(36deg); } } @keyframes loading-5 { 0% { transform: rotate(0deg); } 100% { transform: rotate(36deg); } } @media only screen and (max-width: 990px) { .progress { margin-bottom: 60px; } } .progress:before { position: absolute; left: -14px; top: -15px; width: 120%; height: 120%; background: #fff; content: ""; border-radius: 50%; } .education-area { max-width: 600px; } .education-area ul { list-style: none; } .education-area ul li { padding-bottom: 15px; position: relative; padding-left: 20px; color: #484653; } .education-area ul li:before { position: absolute; left: 0; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #8E713E; content: ""; } .ex-wiget { padding-top: 60px; } .ex-wiget ul { list-style: none; } .ex-wiget ul li { color: #484653; } .ex-wiget h2 { font-size: 30px; font-weight: 400; color: #213644; margin-bottom: 30px; } .wpo-contact-area .quote-form { padding-left: 0; margin-left: -10px; } .wpo-contact-area button { border-radius: 0; } .wpo-contact-area button:after { background: #213644; } .wpo-contact-area .quote-form .form-control { height: 55px; border: 1px solid #ebebeb; margin-bottom: 20px; padding: 15px; } .wpo-contact-area .quote-form .form-control:focus { outline: none; box-shadow: none; border-color: #8E713E; } .wpo-contact-area .quote-form textarea.form-control { height: 125px; } .half-col { float: left; width: 50%; padding: 0 10px 5px; } .full-col { padding: 0 10px 5px; } .exprience-area { padding-top: 60px; } @media (max-width: 767px) { .team-info-text { padding: 40px 20px; } .team-info-img { padding: 40px; } .team-info-img img { width: 100%; } .custom-grid { float: left; width: 50%; } .exprience-area { padding-top: 30px; } } @media (max-width: 575px) { .half-col { float: none; width: 100%; } .lawyer-about.pt-150 { padding-top: 100px !important; } } @media (max-width: 375px) { .custom-grid { float: none; width: 100%; } } .service-sidebar .wpo-contact-widget { border: 0; background: url(/images/bg-2.jpg) no-repeat center center; position: relative; background-size: cover; z-index: 1; } .service-sidebar .wpo-contact-widget:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(22, 57, 103, 0.9); content: ""; z-index: -1; } .service-sidebar .wpo-contact-widget h2 { font-size: 36px; font-weight: 400; text-align: left; color: #fff; margin-bottom: 20px; color: #213644; } .service-sidebar .wpo-contact-widget h2::before { background: #fff; } .service-sidebar .wpo-contact-widget p { color: #fff; font-size: 18px; } .service-sidebar .wpo-contact-widget a { display: inline-block; padding: 10px 20px; border: 1px solid #fff; font-size: 18px; color: #fff; padding-right: 90px; position: relative; margin-top: 10px; } .service-sidebar .wpo-contact-widget a::before { font-family: "themify"; content: "\e628"; font-size: 18px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } /*-------------------------------------------------------------- 10. wpo-shop-page --------------------------------------------------------------*/ .wpo-shop-section .shop-grids { margin: 0 -15px; } @media (max-width: 767px) { .wpo-shop-section .shop-grids { margin: 0 -7px; } } .wpo-shop-section .grid { width: calc(33.33% - 30px); float: left; margin: 0 15px 30px; } @media (max-width: 991px) { .wpo-shop-section .grid { width: calc(50% - 30px); } } @media (max-width: 767px) { .wpo-shop-section .grid { width: calc(50% - 15px); margin: 0 7px 15px; } } @media (max-width: 550px) { .wpo-shop-section .grid { width: calc(100% - 15px); float: none; } } .wpo-shop-section .grid img { width: 100%; } .wpo-shop-section .details { box-shadow: 0px 2px 10px 2px rgba(21, 44, 88, 0.05); text-align: center; padding: 35px 15px; } .wpo-shop-section .details h3 { font-size: 20px; font-size: calc-rem-value(20); margin: 0 0 0.5em; font-weight: 500; } @media (max-width: 991px) { .wpo-shop-section .details h3 { font-size: 16px; font-size: calc-rem-value(16); } } .wpo-shop-section .details h3 a { color: #213644; } .wpo-shop-section .details h3 a:hover { color: #8E713E; } .wpo-shop-section .details del { color: #0D0925; } .wpo-shop-section .details del + span { display: inline-block; padding-left: 20px; } .wpo-shop-section .add-to-cart { margin-top: 20px; } .wpo-shop-section .add-to-cart a { font-family: "DM Sans", sans-serif; font-size: 15px; font-size: calc-rem-value(15); font-weight: 600; color: #8E713E; padding: 12px 20px; border: 2px solid #8E713E; display: inline-block; border-radius: 50px; } @media (max-width: 767px) { .wpo-shop-section .add-to-cart a { font-size: 12px; font-size: calc-rem-value(12); padding: 8px 18px; } } .wpo-shop-section .add-to-cart a:hover { background-color: #8E713E; color: #fff; } .wpo-shop-section .add-to-cart a i { font-size: 15px; font-size: calc-rem-value(15); display: inline-block; padding-left: 5px; } .wpo-shop-section .grid:hover .add-to-cart a { background-color: #8E713E; color: #fff; } /*-------------------------------------------------------------- 11. wpo-shop-single-page --------------------------------------------------------------*/ .wpo-shop-single-section { /*** product slider ***/ /*** product info ***/ } .wpo-shop-single-section .shop-single-slider .slider-for { text-align: center; } .wpo-shop-single-section .shop-single-slider .slider-for img { display: inline-block; } .wpo-shop-single-section .shop-single-slider .slider-nav { padding: 0 25px; margin-top: 35px; } .wpo-shop-single-section .shop-single-slider .slider-nav > i { position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 100; } .wpo-shop-single-section .shop-single-slider .slider-nav > i:hover { cursor: pointer; } .wpo-shop-single-section .shop-single-slider .slider-nav .nav-btn-rt { left: auto; right: 0; } .wpo-shop-single-section .shop-single-slider .slider-nav .slick-slide { text-align: center; } .wpo-shop-single-section .shop-single-slider .slider-nav .slick-slide img { display: inline-block; } .wpo-shop-single-section .product-details { padding: 15px 30px 80px; /*** product option ***/ } @media (max-width: 1199px) { .wpo-shop-single-section .product-details { padding: 10px 30px 15px; } } @media (max-width: 991px) { .wpo-shop-single-section .product-details { margin-top: 45px; padding: 40px 30px; } } @media (max-width: 767px) { .wpo-shop-single-section .product-details { padding: 0; } } .wpo-shop-single-section .product-details h2 { font-size: 35px; font-size: calc-rem-value(35); line-height: 1.4em; margin: 0 0 0.33em; font-weight: 500; } @media (max-width: 767px) { .wpo-shop-single-section .product-details h2 { font-size: 22px; font-size: calc-rem-value(22); } } .wpo-shop-single-section .product-details .price { font-size: 25px; font-size: calc-rem-value(25); color: #8E713E; margin: 7px 0 20px; font-weight: 500; } @media (max-width: 991px) { .wpo-shop-single-section .product-details .price { font-size: 30px; font-size: calc-rem-value(30); } } @media (max-width: 767px) { .wpo-shop-single-section .product-details .price { font-size: 25px; font-size: calc-rem-value(25); } } .wpo-shop-single-section .product-details .price .old { font-size: 24px; font-size: calc-rem-value(24); font-weight: normal; color: #2a1d77; text-decoration: line-through; display: inline-block; margin-left: 5px; font-weight: 500; } @media (max-width: 991px) { .wpo-shop-single-section .product-details .price .old { font-size: 20px; font-size: calc-rem-value(20); } } @media (max-width: 767px) { .wpo-shop-single-section .product-details .price .old { font-size: 18px; font-size: calc-rem-value(18); } } .wpo-shop-single-section .product-details .product-rt { display: flex; align-items: center; margin-bottom: 20px; } .wpo-shop-single-section .product-details .product-rt .rating { margin-right: 10px; } .wpo-shop-single-section .product-details .product-rt .rating i { color: #f9d322; } .wpo-shop-single-section .product-details .product-rt span { color: #484653; } .wpo-shop-single-section .product-details p { margin-bottom: 1.3em; color: #484653; } .wpo-shop-single-section .product-details ul { list-style: none; } .wpo-shop-single-section .product-details ul li { padding-left: 20px; position: relative; margin-bottom: 10px; color: #484653; } .wpo-shop-single-section .product-details ul li:before { position: absolute; left: 0; top: 6px; width: 8px; height: 8px; background: #8E713E; content: ""; border-radius: 50%; } .wpo-shop-single-section .product-details .product-option { margin-top: 30px; } .wpo-shop-single-section .product-details .tg-btm { margin-top: 25px; } .wpo-shop-single-section .product-details .tg-btm p { margin-bottom: 0px; } .wpo-shop-single-section .product-details .tg-btm p span { font-weight: 500; color: #213644; margin-right: 5px; } .wpo-shop-single-section .product-details .product-option .product-row button:after { display: none; } .wpo-shop-single-section .product-details .product-option .product-row > div { height: 35px; display: inline-block; } .wpo-shop-single-section .product-details .product-option .product-row > div + div { margin-left: 15px; } .wpo-shop-single-section .product-details .product-option .product-row > div + div .theme-btn, .wpo-shop-single-section .product-details .product-option .product-row > div + div .view-cart-btn { border-radius: 0; border-width: 1px; height: 40px; padding: 0 18px; } .wpo-shop-single-section .product-details .product-option .product-row > div:first-child { width: 85px; } .wpo-shop-single-section .product-details .product-option .product-row > div:last-child .theme-btn:hover, .wpo-shop-single-section .product-details .product-option .product-row > div:last-child .view-cart-btn:hover { background: #8E713E; border-color: #8E713E; color: #fff; } .wpo-shop-single-section .product-details .product-option .theme-btn, .wpo-shop-single-section .product-details .product-option .view-cart-btn { background-color: transparent; color: #333; font-size: 14px; font-size: calc-rem-value(14); padding: 0 20px; height: 35px; line-height: 32px; outline: 0; border: 2px solid #e6e6e6; border-radius: 0; } .wpo-shop-single-section .product-details .product-option .theme-btn:hover, .wpo-shop-single-section .product-details .product-option .view-cart-btn:hover { background-color: #8E713E; color: #fff; border-color: #8E713E; } @media (max-width: 767px) { .wpo-shop-single-section .product-details .product-option .theme-btn, .wpo-shop-single-section .product-details .product-option .view-cart-btn { font-size: 14px; font-size: calc-rem-value(14); } } .wpo-shop-single-section .product-details .product-option .theme-btn:before, .wpo-shop-single-section .product-details .product-option .view-cart-btn:before { display: none; } .wpo-shop-single-section .product-details .product-option .heart-btn i { font-size: 15px; font-size: calc-rem-value(15); } .wpo-shop-single-section .product-details .product-option .product-row > div:last-child .theme-btn, .wpo-shop-single-section .product-details .product-option .product-row > div:last-child .view-cart-btn { background-color: #fff; font-size: 18px; font-size: calc-rem-value(18); color: #0D0925; border: 1px solid #e6e6e6; } .wpo-shop-single-section .product-details #product-count { border-radius: 0; border: 1px solid #e6e6e6; } .wpo-shop-single-section .product-details #product-count:focus { box-shadow: none; outline: none; } .wpo-shop-single-section .product-details .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up, .wpo-shop-single-section .product-details .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { border-radius: 0; border-color: #e6e6e6; display: block; padding: 1px 4px; font-size: 10px; } .wpo-shop-single-section .product-details .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:hover, .wpo-shop-single-section .product-details .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down:hover { background-color: #8E713E; color: #fff; } .wpo-shop-single-section .product-info { margin-top: 75px; /*** tabs ***/ /*** client rv ***/ /*** review form ***/ } @media (max-width: 991px) { .wpo-shop-single-section .product-info { margin-top: 40px; } } .wpo-shop-single-section .product-info h4 { font-size: 18px; font-size: calc-rem-value(18); margin: 0; line-height: 1.7em; font-weight: 500; margin-bottom: 10px; } .wpo-shop-single-section .product-info p { margin-bottom: 1.3em; color: #484653; } .wpo-shop-single-section .product-info .tab-pane p:last-child { margin-bottom: 0; } .wpo-shop-single-section .product-info .nav-tabs { font-family: "Vidaloka", serif; border: 0; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .nav-tabs { margin-bottom: 20px; } } .wpo-shop-single-section .product-info .nav-tabs li { margin-right: 1px; } .wpo-shop-single-section .product-info .nav-tabs li a.active { border: 0; outline: 0; } .wpo-shop-single-section .product-info .nav-tabs a { font-size: 15px; font-size: calc-rem-value(15); color: #0D0925; border: 0; border-radius: 0; margin: 0; display: block; padding: 12px 20px 11px; font-family: "DM Sans", sans-serif; position: relative; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .nav-tabs a { font-size: 14px; font-size: calc-rem-value(14); font-weight: normal; padding: 10px 10px 8px; text-transform: none; } } .wpo-shop-single-section .product-info .nav-tabs a:before { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #8E713E; border-radius: 4px; content: ""; opacity: 0; visibility: hidden; } .wpo-shop-single-section .product-info .nav-tabs a:hover:before, .wpo-shop-single-section .product-info .nav-tabs a.active:before { opacity: 1; visibility: visible; } .wpo-shop-single-section .product-info .nav-tabs .active, .wpo-shop-single-section .product-info .nav-tabs li:hover { border-color: #8E713E; } .wpo-shop-single-section .product-info .tab-content { border-top: 1px solid rgba(172, 141, 104, 0.3); padding-top: 30px; margin-top: -1px; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .tab-content { border: 0; padding: 0; margin: 0; } } .wpo-shop-single-section .product-info .client-rv { overflow: hidden; margin-bottom: 30px; } .wpo-shop-single-section .product-info .client-rv:last-child { margin-bottom: 0; } .wpo-shop-single-section .product-info .client-rv .client-pic { width: 100px; float: left; } .wpo-shop-single-section .product-info .client-rv .client-pic img { border-radius: 50%; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .client-pic { width: 100%; float: none; margin-bottom: 10px; } } .wpo-shop-single-section .product-info .client-rv .details { width: calc(100% - 130px); float: right; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .details { width: 100%; float: none; } } .wpo-shop-single-section .product-info .client-rv .name-rating .product-rt { display: flex; align-items: center; } .wpo-shop-single-section .product-info .client-rv .name-rating .product-rt span { color: #484653; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .name-rating-time { padding-bottom: 3px; } } .wpo-shop-single-section .product-info .client-rv .name-rating-time > div, .wpo-shop-single-section .product-info .client-rv .name-rating > div { display: inline-block; font-size: 14px; font-size: calc-rem-value(14); } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .name-rating-time > div, .wpo-shop-single-section .product-info .client-rv .name-rating > div { font-size: 12px; font-size: calc-rem-value(12); display: block; } } .wpo-shop-single-section .product-info .client-rv .rating { font-size: 12px; padding-left: 12px; } .wpo-shop-single-section .product-info .client-rv .rating i { color: #8E713E; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .rating { padding-left: 0; margin: 4px 0 7px; } } .wpo-shop-single-section .product-info .client-rv .name-rating-time .time { float: right; color: #b3b3b3; text-transform: uppercase; } @media (max-width: 767px) { .wpo-shop-single-section .product-info .client-rv .name-rating-time .time { float: none; } } .wpo-shop-single-section .product-info .client-rv .review-body { padding-top: 12px; } .wpo-shop-single-section .product-info .review-form { margin-top: 45px; } .wpo-shop-single-section .product-info .review-form h4 { font-size: 30px; font-weight: 500; } .wpo-shop-single-section .product-info .review-form p { margin-bottom: 1.73em; color: #484653; } .wpo-shop-single-section .product-info .review-form .give-rat-sec { margin-bottom: 10px; } .wpo-shop-single-section .product-info .review-form .give-rat-sec p { margin-bottom: 0; color: #484653; } .wpo-shop-single-section .product-info .review-form .give-rating { display: inline-block; position: relative; height: 50px; line-height: 50px; font-size: 30px; margin-bottom: 10px; } .wpo-shop-single-section .product-info .review-form .give-rating label { position: absolute; top: 0; left: 0; height: 100%; cursor: pointer; } .wpo-shop-single-section .product-info .review-form .give-rating label:last-child { position: static; } .wpo-shop-single-section .product-info .review-form .give-rating label:nth-child(1) { z-index: 5; } .wpo-shop-single-section .product-info .review-form .give-rating label:nth-child(2) { z-index: 4; } .wpo-shop-single-section .product-info .review-form .give-rating label:nth-child(3) { z-index: 3; } .wpo-shop-single-section .product-info .review-form .give-rating label:nth-child(4) { z-index: 2; } .wpo-shop-single-section .product-info .review-form .give-rating label:nth-child(5) { z-index: 1; } .wpo-shop-single-section .product-info .review-form .give-rating label input { position: absolute; top: 0; left: 0; opacity: 0; } .wpo-shop-single-section .product-info .review-form .give-rating label .icon { float: left; color: transparent; } .wpo-shop-single-section .product-info .review-form .give-rating label:last-child .icon { color: #ddd; } .wpo-shop-single-section .product-info .review-form .give-rating:not(:hover) label input:checked ~ .icon, .wpo-shop-single-section .product-info .review-form .give-rating:hover label:hover input ~ .icon { color: #FFD400; } .wpo-shop-single-section .product-info .review-form .give-rating label input:focus:not(:checked) ~ .icon:last-child { color: #ddd; text-shadow: 0 0 5px #FFD400; } .wpo-shop-single-section .product-info .review-form form input, .wpo-shop-single-section .product-info .review-form form textarea { background: transparent; border-radius: 0; box-shadow: none; height: 50px; border: 1px solid #efefef; } .wpo-shop-single-section .product-info .review-form form input:focus, .wpo-shop-single-section .product-info .review-form form textarea:focus { box-shadow: none; outline: none; } .wpo-shop-single-section .product-info .review-form form textarea { height: 130px; } .wpo-shop-single-section .product-info .review-form form > div { margin-bottom: 27px; } .wpo-shop-single-section .product-info .review-form form > div:last-child { margin-bottom: 0; } .wpo-shop-single-section .product-info .review-form form .theme-btn-s4 { background-color: transparent; color: #908f8f; outline: 0; box-shadow: none; } .wpo-shop-single-section .product-info .review-form form .theme-btn-s4:hover { background-color: #8E713E; color: #fff; } @media screen and (min-width: 767px) { .wpo-shop-single-section .product-info .review-form form .theme-btn-s4 { font-size: 15px; font-size: calc-rem-value(15); padding: 0 20px; } } .wpo-shop-single-section .slider-nav .slick-slide:focus { outline: none; } /*=========================== 12. wpo-cart-page-style ===========================*/ .cart-area .cart-wrapper { box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1); } @media (max-width: 991px) { .cart-area .cart-wrapper table { width: 1022px; } } @media (max-width: 991px) { .cart-area .cart-wrapper form { overflow: scroll; overflow-y: hidden; } } .cart-area .cart-wrap td, .cart-area .cart-wrap th { width: 10%; border-bottom: 1px solid rgba(240, 240, 240, 0.5803921569); text-align: center; font-weight: 400; color: #414141; } .cart-area .cart-wrap td ul, .cart-area .cart-wrap th ul { list-style: none; } .cart-area .cart-wrap th { border-bottom: 1px solid rgba(240, 240, 240, 0.5803921569); padding: 40px 0; } .cart-area .cart-wrap thead { background: #fff; color: #505050; padding: 40px; } .cart-area .cart-area form { margin: auto; text-align: center; background: #fff; } .cart-area .cart-wrap .product { width: 15%; } .cart-area .cart-wrap .product ul { text-align: left; padding-left: 30px; list-style: none; } .cart-area .cart-wrap .product ul li { padding-bottom: 5px; } .cart-area .cart-wrap .product a { font-size: 16px; color: #a5a4a4; } .cart-area .cart-wrap .product-2 { text-align: left; padding-left: 55px; } .cart-area .cart-wrap .product a:hover { color: #8E713E; } .cart-area .cart-wrap th { height: 80px; font-weight: 700; } .cart-area .cart-wrap td { padding: 40px 25px; } .cart-area .cart-wrap td img { width: 130px; height: 130px; -o-object-fit: cover; object-fit: cover; } .cart-area .cart-wrap td.action ul { display: flex; justify-content: center; list-style: none; } .cart-area .cart-wrap td.action ul .w-btn-view a { line-height: 45px; } .cart-area .cart-wrap td span { display: block; width: 100px; height: 38px; line-height: 34px; color: #ee9902; font-size: 14px; border: 1.5px solid #ee9902; border-radius: 4px; } .cart-area .cart-wrap td.Del span { color: #4ABA4E; border: 1.5px solid #4ABA4E; } .cart-area .cart-wrap td.can span { color: #D85656; border: 1.5px solid #D85656; } .cart-area .cart-wrap td.pro span { color: #691A5F; border: 1.5px solid #691A5F; } .cart-area .cart-wrap .name { width: 15%; } .cart-area .cart-wrap .action a { display: block; width: 40px; height: 38px; line-height: 45px; background: #414141; color: #fff; border-radius: 4px; font-size: 14px; } .cart-area .cart-wrap .action a .fi::before { font-size: 20px; } .cart-area .cart-wrap .action a:hover { background: #8E713E; } .cart-area .cart-wrap .action li.c-btn { margin-right: 10px; } .cart-area .cart-wrap .action li.c-btn a { background-color: #8E713E; } .cart-area .order-wrap { padding: 0; } .cart-area .cart-wrap tr:nth-child(even) { background: #FCFCFC; } .cart-area .cart-wrap .quantity { position: relative; max-width: 110px; margin: 0 auto; } .cart-area .quantity input { width: 105px; padding: 0px 35px; text-align: center; height: 36px; position: relative; background: #f2f2f5; border: none; border-radius: 40px; } .cart-area .quantity .qtybutton { position: absolute; top: 0; left: 0px; height: 30px; width: 30px; text-align: center; line-height: 28px; font-size: 18px; cursor: pointer; color: #333; background: #fafaff; border-radius: 30px; } .cart-area .cart-wrap .quantity .qtybutton { top: 50%; left: 5px; transform: translateY(-51%); -webkit-transform: translateY(-51%); -moz-transform: translateY(-51%); } .cart-area .cart-wrap .quantity .qtybutton.dec { border-left: none; } .cart-area .cart-wrap .quantity .qtybutton.inc { right: 5px; left: auto; border-right: none; } .cart-area .submit-btn-area { padding: 40px; } .cart-area .submit-btn-area ul { display: flex; justify-content: flex-end; list-style: none; } @media (max-width: 450px) { .cart-area .submit-btn-area ul { flex-wrap: wrap; justify-content: center; } } .cart-area .submit-btn-area ul li:last-child { margin-left: 20px; } @media (max-width: 450px) { .cart-area .submit-btn-area ul li:last-child { margin-left: 3px; margin-top: 5px; } } .cart-area .submit-btn-area button { padding: 17px 40px; border: none; background: #213644; color: #fff; transition: all 0.3s; outline: none; } .cart-area .submit-btn-area button:hover { background: #8E713E; } .cart-area .submit-btn-area .theme-btn, .cart-area .submit-btn-area .view-cart-btn { text-transform: capitalize; font-size: 15px; font-weight: 500; line-height: 27px; } .cart-area .submit-btn-area .theme-btn:after, .cart-area .submit-btn-area .view-cart-btn:after { background: #213644; } .cart-area .cart-product-list ul { border-top: 1px solid rgba(240, 240, 240, 0.5803921569); padding-top: 20px; list-style: none; } .cart-area .cart-product-list ul li { display: flex; justify-content: space-between; padding: 0px 30px; font-weight: 300; font-size: 18px; line-height: 21px; color: #414141; padding-bottom: 30px; } .cart-area .cart-product-list ul li.cart-b { border-top: 1px solid rgba(240, 240, 240, 0.5803921569); border-bottom: 1px solid rgba(240, 240, 240, 0.5803921569); color: #8E713E; padding-top: 30px; font-weight: 600; } /*=============================== 13. wpo-checkout-page-style ================================*/ .wpo-checkout-area .checkout-wrap ul { list-style: none; } .wpo-checkout-area #open2 { display: block; } .wpo-checkout-area #open3 { display: none; } .wpo-checkout-area #open4 { display: none; } .wpo-checkout-area .create-account p { margin-bottom: 15px; color: #484653; } .wpo-checkout-area .create-account { display: none; padding: 20px; } .wpo-checkout-area .create-account span { margin-bottom: 20px; display: block; color: #484653; } .wpo-checkout-area .input-wrap { position: relative; } .wpo-checkout-area .create-account input { width: 100%; height: 50px; border: 1px solid #ebebeb; margin-bottom: 25px; padding-left: 20px; border-radius: 40px; } .wpo-checkout-area .create-account input:focus { outline: none; } .wpo-checkout-area .create-account button { position: absolute; right: 0; top: 0; height: 50px; background: #333; color: #fff; width: 108px; border: none; outline: none; box-shadow: none; cursor: pointer; border-top-right-radius: 40px; border-bottom-right-radius: 40px; } .wpo-checkout-area .create-account button:hover { background: #8E713E; } .wpo-checkout-area .coupon { position: relative; cursor: pointer; cursor: pointer; background: #f9f3f3; } .wpo-checkout-area .coupon:before { position: absolute; right: 30px; top: 21px; content: "\e64b"; font-family: "themify"; } .wpo-checkout-area .coupon span { position: absolute; right: 30px; top: 30px; color: #484653; } .wpo-checkout-area .coupon label { margin-bottom: 0; font-weight: 500; font-size: 18px; color: #484653; cursor: pointer; padding: 20px 20px; border-left: 4px solid #8E713E; transition: all 0.3s; width: 100%; } @media (max-width: 767px) { .wpo-checkout-area .coupon label { font-size: 15px; } } .wpo-checkout-area .caupon-wrap { background: #fff; margin-bottom: 20px; transition: all 0.3s; box-shadow: 0px 5px 15px 0px rgba(62, 65, 159, 0.1); } .wpo-checkout-area .active-border { transition: all 0.3s; } .wpo-checkout-area .s1.active-border .coupon-active label, .wpo-checkout-area .s3.coupon-2 .coupon-3 label { border-left: none; border-top: 4px solid #8E713E; border-bottom: 1px solid #8E713E; } .wpo-checkout-area .s2 .coupon-3 { border-top: 4px solid #8E713E; } .wpo-checkout-area .s2.coupon-2 .coupon-3 { border-top: 0; } .wpo-checkout-area .s2 .coupon-3 label { border-left: 0; border-bottom: 1px solid #ffe5dc; } .wpo-checkout-area .s2.coupon-2 .coupon-3 label { border-left: 4px solid #8E713E; border-bottom: 0; } .wpo-checkout-area .billing-adress .form-style input, .wpo-checkout-area .billing-adress .form-style select { width: 100%; margin-bottom: 15px; padding-left: 10px; height: 40px; background: #fff; border-radius: 2px; border: none; border: 1px solid #ebebeb; border-radius: 40px; } .wpo-checkout-area .billing-adress .form-style input:focus, .wpo-checkout-area .billing-adress .form-style select:focus { outline: none; box-shadow: none; } .wpo-checkout-area .billing-adress .form-style select { -webkit-appearance: none; -o-appearance: none; appearance: none; -moz-appearance: none; background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center; position: relative; } .wpo-checkout-area .billing-adress { padding: 30px; } .wpo-checkout-area .note-area textarea { width: 100%; height: 150px; padding-top: 10px; margin-bottom: 0; padding-left: 10px; border: 1px solid #ebebeb; border-radius: 20px; } .wpo-checkout-area .note-area textarea:focus { outline: none; } .wpo-checkout-area .note-area p { color: #484653; } .wpo-checkout-area .biling-item-2 { margin-top: 20px; } .wpo-checkout-area .biling-item-2 label.fontsize { margin-bottom: 20px; } .wpo-checkout-area .biling-item-2 .billing-adress { padding: 0; } .wpo-checkout-area .payment-name ul { display: flex; justify-content: flex-start; } @media (max-width: 575px) { .wpo-checkout-area .payment-name ul { flex-wrap: wrap; } } .wpo-checkout-area .payment-area form { overflow: unset !important; } .wpo-checkout-area .payment-name ul li { width: 100px; height: 60px; text-align: center; line-height: 60px; } .wpo-checkout-area .payment-name ul li input { margin-right: 0; } .wpo-checkout-area .payment-name ul li { margin-right: 15px; } @media (max-width: 575px) { .wpo-checkout-area .payment-name ul li { margin-bottom: 10px; } } .wpo-checkout-area .payment-area h2 { padding-bottom: 40px; margin-bottom: 0; } .wpo-checkout-area .payment-select { padding: 40px 0; } .wpo-checkout-area .payment-select ul { display: flex; } @media (max-width: 575px) { .wpo-checkout-area .payment-select ul { flex-wrap: wrap; } } .wpo-checkout-area .payment-select ul li { margin-right: 10px; font-size: 15px; font-weight: 500; color: #5B5B5B; } .wpo-checkout-area .payment-select label { font-size: 18px; font-weight: 600; } @media (max-width: 575px) { .wpo-checkout-area .payment-select label { font-size: 14px; } } .wpo-checkout-area .payment-area h2 { font-size: 20px; color: #878787; font-weight: 700; } .wpo-checkout-area .payment-area h2 span { font-size: 30px; color: #ff493c; } .wpo-checkout-area .payment-area { width: 100%; } .wpo-checkout-area label { color: #484653; } .wpo-checkout-area .payment-name ul li input { margin-right: 0; position: absolute; z-index: -1; } .wpo-checkout-area .payment-name ul li input:checked ~ label { border: 1px solid #ff493c; } .wpo-checkout-area .payment-name label { width: 100%; border: 1px solid transparent; } .wpo-checkout-area .payment-name .visa label { border: 1px solid #0057A0; } .wpo-checkout-area .payment-name .mas label { border: 1px solid #CC0000; } .wpo-checkout-area .payment-name .ski label { border: 1px solid #691A5F; } .wpo-checkout-area .payment-name .pay label { border: 1px solid #019CDE; } .wpo-checkout-area .payment-option { padding: 30px; } .wpo-checkout-area .payment-name { display: none; } .wpo-checkout-area .payment-name.active { display: block; } .wpo-checkout-area .payment-option.active .payment-name { display: none !important; } .wpo-checkout-area .payment-area .form-style input, .wpo-checkout-area .payment-area .form-style select { width: 100%; margin-bottom: 15px; padding-left: 10px; height: 40px; background: #fff; border-radius: 2px; border: none; border: 1px solid #ebebeb; border-radius: 40px; } .wpo-checkout-area .payment-area .form-style input:focus, .wpo-checkout-area .payment-area .form-style select:focus { outline: none; } .wpo-checkout-area .payment-area .contact-form { margin-top: 40px; } .wpo-checkout-area .cout-order-area { box-shadow: 0px 5px 15px 0px rgba(62, 65, 159, 0.1); } .wpo-checkout-area .cout-order-area .oreder-item ul li { display: flex; justify-content: space-between; padding: 20px 30px; font-weight: 300; font-size: 18px; line-height: 21px; color: #414141; } .wpo-checkout-area .cout-order-area .oreder-item ul li.s-total { font-weight: 400; } .wpo-checkout-area .cout-order-area .oreder-item ul .o-header { color: #0F0F0F; font-size: 20px; font-weight: 600; border-bottom: 1px solid #ebebeb; } .wpo-checkout-area .cout-order-area .oreder-item ul .o-middle { border-bottom: 1px solid #ebebeb; } .wpo-checkout-area .cout-order-area .oreder-item ul .o-bottom { border-top: 1px solid #ebebeb; color: #8E713E; font-weight: 600; } .wpo-checkout-area .create-account.active { display: block; } .wpo-checkout-area .contact-form .form-control { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } .wpo-checkout-area .contact-form input, .wpo-checkout-area .contact-form select { margin-top: 10px; } .wpo-checkout-area .submit-btn-area { margin-top: 20px; } .wpo-checkout-area .submit-btn-area .theme-btn, .wpo-checkout-area .submit-btn-area .view-cart-btn { text-transform: capitalize; } .wpo-checkout-area .submit-btn-area .theme-btn::after, .wpo-checkout-area .submit-btn-area .view-cart-btn::after { background: #213644; } /*-------------------------------------------------------------- 14. wpo-blog-pg-section --------------------------------------------------------------*/ .wpo-blog-pg-section { /*** format-standard ***/ /*** format-gallery ***/ /*** format-quote ***/ /*** format-video ***/ } .wpo-blog-pg-section .wpo-blog-content .post { margin-bottom: 70px; } @media (max-width: 991px) { .wpo-blog-pg-section .wpo-blog-content .post { margin-bottom: 50px; } } @media (max-width: 767px) { .wpo-blog-pg-section .wpo-blog-content .post { margin-bottom: 40px; } } .wpo-blog-pg-section .entry-meta { list-style: none; overflow: hidden; margin: 35px 0; } @media (max-width: 767px) { .wpo-blog-pg-section .entry-meta { margin: 25px 0; } } .wpo-blog-pg-section .entry-meta ul { list-style: none; } .wpo-blog-pg-section .entry-meta ul li { font-weight: 400; font-size: 14px; font-size: calc-rem-value(14); float: left; text-transform: uppercase; color: #484653; } .wpo-blog-pg-section .entry-meta ul li a { color: #636893; } .wpo-blog-pg-section .entry-meta ul li a:hover { color: #8E713E; } .wpo-blog-pg-section .entry-meta ul li i { position: relative; margin-right: 3px; } .wpo-blog-pg-section .entry-meta ul li i:before { font-size: 13px; } .wpo-blog-pg-section .entry-meta ul li + li { margin-left: 20px; padding-left: 20px; position: relative; } .wpo-blog-pg-section .entry-meta ul li + li:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; content: ""; background: #8E713E; border-radius: 50%; } @media (max-width: 440px) { .wpo-blog-pg-section .entry-meta ul li + li:before { display: none; } } @media (max-width: 440px) { .wpo-blog-pg-section .entry-meta ul li + li { margin-left: 0; padding-left: 0; } } @media (max-width: 767px) { .wpo-blog-pg-section .entry-meta ul li { font-size: 12px; font-size: calc-rem-value(12); } } @media (max-width: 440px) { .wpo-blog-pg-section .entry-meta ul li { float: none; display: block; margin-bottom: 5px; } } .wpo-blog-pg-section .post h3 { font-size: 34px; font-size: calc-rem-value(34); line-height: 1.2em; font-weight: 400; margin: -0.27em 0 0.7em; font-family: "Vidaloka", serif; } @media (max-width: 991px) { .wpo-blog-pg-section .post h3 { font-size: 25px; font-size: calc-rem-value(25); } } @media (max-width: 767px) { .wpo-blog-pg-section .post h3 { font-size: 22px; font-size: calc-rem-value(22); } } .wpo-blog-pg-section .post h3 a { color: #213644; } .wpo-blog-pg-section .post h3 a:hover { color: #8E713E; } .wpo-blog-pg-section .post p { margin-bottom: 1.5em; color: #484653; } @media (max-width: 991px) { .wpo-blog-pg-section .post p { font-size: 16px; font-size: calc-rem-value(16); } } .wpo-blog-pg-section .post a.read-more { color: #0D0925; text-transform: capitalize; font-size: 16px; } .wpo-blog-pg-section .post a.read-more:hover { color: #8E713E; } .wpo-blog-pg-section .entry-media img { width: 100%; } .wpo-blog-pg-section .format-standard, .wpo-blog-pg-section .format-quote { background-color: #F1EAE5; padding: 25px 35px 45px; } @media (max-width: 767px) { .wpo-blog-pg-section .format-standard, .wpo-blog-pg-section .format-quote { padding: 25px 20px 45px; } } .wpo-blog-pg-section .format-standard { position: relative; } .wpo-blog-pg-section .format-standard:before { position: absolute; right: 20px; top: 10px; content: "\f108"; font-family: "flaticon"; font-size: 90px; line-height: 80px; color: #e5f0fb; } .wpo-blog-pg-section .format-gallery { position: relative; } .wpo-blog-pg-section .format-gallery .owl-controls { width: 100%; margin: 0; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .wpo-blog-pg-section .format-gallery .owl-nav [class*=owl-]:hover { background: #8E713E; color: #fff; } .wpo-blog-pg-section .format-gallery .owl-nav [class*=owl-] { background: #fff; width: 50px; height: 50px; line-height: 58px; padding: 0; margin: 0; border-radius: 50%; color: #8E713E; transition: all 0.3s; border: 0; } .wpo-blog-pg-section .format-gallery .owl-nav [class*=owl-] .fi::before { font-size: 20px; } .wpo-blog-pg-section .format-gallery .owl-nav .owl-prev, .wpo-blog-pg-section .format-gallery .owl-nav .owl-next { position: absolute; top: 50%; transform: translateY(-50%); } .wpo-blog-pg-section .format-gallery .owl-nav .owl-prev { left: 15px; } .wpo-blog-pg-section .format-gallery .owl-nav .owl-next { right: 15px; } .wpo-blog-pg-section .format-quote { text-align: center; padding: 80px 60px; position: relative; } @media (max-width: 767px) { .wpo-blog-pg-section .format-quote { padding: 40px 20px; } } .wpo-blog-pg-section .format-quote p { margin-bottom: 0; } .wpo-blog-pg-section .format-quote:before { font-family: "Flaticon"; content: "\f120"; font-size: 250px; font-size: calc-rem-value(250); color: #ecf3fb; margin-left: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .wpo-blog-pg-section .format-quote h3, .wpo-blog-pg-section .format-quote p { position: relative; } .wpo-blog-pg-section .format-video .video-holder { position: relative; text-align: center; } .wpo-blog-pg-section .format-video .video-holder:before { content: ""; background-color: rgb(22, 57, 103); width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: all 0.3s; opacity: 0.5; } .wpo-blog-pg-section .format-video .video-holder:hover:before { opacity: 0.8; } .wpo-blog-pg-section .format-video .video-holder a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 63px; height: 63px; line-height: 70px; background: #fff; border-radius: 50%; z-index: 1; } .wpo-blog-pg-section .format-video .video-holder a:after { position: absolute; left: -12px; top: -12px; width: 140%; height: 140%; background: rgba(255, 255, 255, 0.3); content: ""; -webkit-animation: spineer 2s infinite; animation: spineer 2s infinite; border-radius: 50%; z-index: -1; } .wpo-blog-pg-section .format-video .video-holder a:before { content: ""; width: 0px; height: 0px; border-top: 9px solid transparent; border-bottom: 10px solid transparent; border-left: 14px solid #2f426b; position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%); } .wpo-blog-pg-section .format-video .video-holder .fi:before { font-size: 20px; font-size: calc-rem-value(20); color: #8E713E; } @media screen and (min-width: 1200px) { .blog-pg-left-sidebar .blog-sidebar { padding-right: 45px; padding-left: 0; } } @media screen and (min-width: 1200px) { .blog-pg-fullwidth .wpo-blog-content { padding: 0; } } @-webkit-keyframes save-the-date-pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(0.95, 0.95, 0.95); } to { transform: scale3d(1, 1, 1); } } @keyframes save-the-date-pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(0.95, 0.95, 0.95); } to { transform: scale3d(1, 1, 1); } } /*-------------------------------------------------------------- 15. wpo-blog-single-section --------------------------------------------------------------*/ .wpo-blog-single-section { /*** tag-share ***/ /*** author-box ***/ /*** more-posts ***/ /*** comments area ***/ /*** comment-respond ***/ } @media (min-width: 1440px) { .wpo-blog-single-section .container { max-width: 1320px; } } .wpo-blog-single-section .entry-meta { list-style: none; overflow: hidden; margin: 35px 0; } @media (max-width: 767px) { .wpo-blog-single-section .entry-meta { margin: 25px 0; } } .wpo-blog-single-section .entry-meta ul { list-style: none; } .wpo-blog-single-section .entry-meta ul li { font-weight: 500; font-size: 14px; font-size: calc-rem-value(14); float: left; text-transform: uppercase; color: #484653; } .wpo-blog-single-section .entry-meta ul li a { color: #636893; } .wpo-blog-single-section .entry-meta ul li a:hover { color: #8E713E; } .wpo-blog-single-section .entry-meta ul li i { position: relative; top: 2px; margin-right: 3px; } .wpo-blog-single-section .entry-meta ul li + li { margin-left: 20px; padding-left: 20px; position: relative; } .wpo-blog-single-section .entry-meta ul li + li:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; content: ""; background: #8E713E; border-radius: 50%; } @media (max-width: 440px) { .wpo-blog-single-section .entry-meta ul li + li:before { display: none; } } @media (max-width: 440px) { .wpo-blog-single-section .entry-meta ul li + li { margin-left: 0; padding-left: 0; } } @media (max-width: 767px) { .wpo-blog-single-section .entry-meta ul li { font-size: 12px; font-size: calc-rem-value(12); } } @media (max-width: 440px) { .wpo-blog-single-section .entry-meta ul li { float: none; display: block; margin-bottom: 5px; } } .wpo-blog-single-section .entry-media img { width: 100%; } .wpo-blog-single-section .post h2 { font-size: 35px; font-size: calc-rem-value(35); margin: -0.22em 0 0.7em; line-height: 1.3em; font-family: "Vidaloka", serif; font-weight: 400; } @media (max-width: 991px) { .wpo-blog-single-section .post h2 { font-size: 30px; font-size: calc-rem-value(30); } } @media (max-width: 767px) { .wpo-blog-single-section .post h2 { font-size: 25px; font-size: calc-rem-value(25); } } .wpo-blog-single-section .post p { margin-bottom: 1.5em; color: #484653; } .wpo-blog-single-section .post h3 { font-size: 24px; font-size: calc-rem-value(24); font-weight: 400; line-height: 1.3em; margin: 1.8em 0 1em; } @media (max-width: 991px) { .wpo-blog-single-section .post h3 { font-size: 22px; font-size: calc-rem-value(22); } } @media (max-width: 767px) { .wpo-blog-single-section .post h3 { font-size: 20px; font-size: calc-rem-value(20); } } .wpo-blog-single-section .post blockquote { background-color: #F1EAE5; color: #233d62; font-size: 19px; padding: 65px; margin-top: 60px; margin-bottom: 40px; border: 0; text-align: center; position: relative; font-weight: 400; line-height: 35px; padding-bottom: 45px; } @media (max-width: 767px) { .wpo-blog-single-section .post blockquote { padding: 55px 25px; } } .wpo-blog-single-section .post blockquote:before { font-family: "Flaticon"; content: "\f108"; font-size: 20px; font-size: calc-rem-value(20); color: rgba(255, 255, 255, 0.5); position: absolute; left: 50%; top: -30px; transform: translateX(-50%); width: 60px; height: 60px; line-height: 60px; border: 2px solid #687693; background: #fff; color: #8E713E; border-radius: 50%; } .wpo-blog-single-section .post .gallery { overflow: hidden; margin: 40px -7.5px 0; } .wpo-blog-single-section .post .gallery > div { width: calc(50% - 15px); float: left; margin: 0 7.5px 15px; } .wpo-blog-single-section .post .gallery img { width: 100%; } .wpo-blog-single-section .tag-share, .wpo-blog-single-section .tag-share-s2 { border-bottom: 1px solid #F1EAE5; margin: 75px 0 0; padding-bottom: 30px; color: #213644; } @media (max-width: 767px) { .wpo-blog-single-section .tag-share, .wpo-blog-single-section .tag-share-s2 { margin-top: 40px; } } .wpo-blog-single-section .tag-share ul, .wpo-blog-single-section .tag-share-s2 ul { list-style: none; display: inline-block; overflow: hidden; } .wpo-blog-single-section .tag-share ul li, .wpo-blog-single-section .tag-share-s2 ul li { float: left; } @media (max-width: 767px) { .wpo-blog-single-section .tag-share ul li, .wpo-blog-single-section .tag-share-s2 ul li { margin: 2px; } } .wpo-blog-single-section .tag-share ul > li + li, .wpo-blog-single-section .tag-share-s2 ul > li + li { margin-left: 10px; } @media (max-width: 767px) { .wpo-blog-single-section .tag-share ul > li + li, .wpo-blog-single-section .tag-share-s2 ul > li + li { margin: 2px; } } .wpo-blog-single-section .tag-share .tag, .wpo-blog-single-section .tag-share-s2 .tag { display: flex; align-items: center; } .wpo-blog-single-section .tag-share .tag > span, .wpo-blog-single-section .tag-share-s2 .tag > span { font-family: "Vidaloka", serif; color: #213644; font-weight: 400; display: inline-block; padding-right: 15px; text-transform: uppercase; } .wpo-blog-single-section .tag-share .tag ul, .wpo-blog-single-section .tag-share-s2 .tag ul { list-style: none; position: relative; } .wpo-blog-single-section .tag-share .tag li, .wpo-blog-single-section .tag-share-s2 .tag li { position: relative; } .wpo-blog-single-section .tag-share .tag a, .wpo-blog-single-section .tag-share-s2 .tag a { font-size: 13px; font-size: calc-rem-value(13); display: inline-block; padding: 5px 18px; color: #213644; background: rgba(172, 141, 104, 0.1); border-radius: 5px; font-weight: 400; } @media (max-width: 767px) { .wpo-blog-single-section .tag-share .tag a, .wpo-blog-single-section .tag-share-s2 .tag a { font-size: 13px; font-size: calc-rem-value(13); } } .wpo-blog-single-section .tag-share .tag a:hover, .wpo-blog-single-section .tag-share-s2 .tag a:hover { color: #8E713E; } .wpo-blog-single-section .tag-share-s2 { margin: 0; margin-top: 30px; border-bottom: 0; } .wpo-blog-single-section .tag-share-s2 .tag a { padding: 0; font-size: 16px; font-size: calc-rem-value(16); text-transform: capitalize; background: none; text-decoration: underline; color: #0D0925; } .wpo-blog-single-section .author-box { margin: 35px 0 60px; } .wpo-blog-single-section .author-box .author-avatar { float: left; } @media (max-width: 767px) { .wpo-blog-single-section .author-box .author-avatar { float: none; } } .wpo-blog-single-section .author-box .author-avatar img { border-radius: 50%; } .wpo-blog-single-section .author-box .author-content { display: block; overflow: hidden; padding-left: 25px; } @media (max-width: 767px) { .wpo-blog-single-section .author-box .author-content { padding: 0; margin: 15px 0 0 0; } } .wpo-blog-single-section .author-box .author-content p { margin-bottom: 20px; color: #484653; } .wpo-blog-single-section .author-box .author-name { font-family: "Vidaloka", serif; font-size: 24px; font-size: calc-rem-value(24); font-weight: 400; display: inline-block; margin-bottom: 10px; color: #213644; } .wpo-blog-single-section .author-box .social-link { display: inline-block; list-style: none; } .wpo-blog-single-section .author-box .social-link li { float: left; margin-right: 12px; } .wpo-blog-single-section .author-box .social-link a { display: block; font-size: 13px; font-size: calc-rem-value(13); color: #213644; } .wpo-blog-single-section .author-box .social-link a:hover { color: #8E713E; } .wpo-blog-single-section .more-posts { overflow: hidden; border: 1px solid #E0D8CE; padding: 0 25px; } .wpo-blog-single-section .more-posts > div { width: 50%; float: left; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts > div { width: 100%; float: none; } } .wpo-blog-single-section .more-posts > div > a { display: inline-block; } .wpo-blog-single-section .more-posts .previous-post, .wpo-blog-single-section .more-posts .next-post { padding: 40px 0; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .previous-post, .wpo-blog-single-section .more-posts .next-post { padding: 25px 15px !important; } } .wpo-blog-single-section .more-posts .next-post { text-align: right; border-left: 1px solid #E0D8CE; padding-left: 15px; padding-right: 5px; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .next-post { border-left: 0; text-align: left; border-top: 1px solid #E0D8CE; } } .wpo-blog-single-section .more-posts .next-post .post-control-link { padding-right: 25px; position: relative; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .next-post .post-control-link { padding-right: 0; } } .wpo-blog-single-section .more-posts .next-post .post-control-link:before { font-family: "themify"; content: "\e628"; position: absolute; right: 0; top: 0; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .next-post .post-control-link:before { display: none; } } .wpo-blog-single-section .more-posts .previous-post { padding-right: 15px; padding-left: 5px; } .wpo-blog-single-section .more-posts .previous-post .post-control-link { padding-left: 25px; position: relative; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .previous-post .post-control-link { padding-left: 0; } } .wpo-blog-single-section .more-posts .previous-post .post-control-link:before { font-family: "themify"; content: "\e629"; position: absolute; left: 0; top: 0; } @media (max-width: 767px) { .wpo-blog-single-section .more-posts .previous-post .post-control-link:before { display: none; } } .wpo-blog-single-section .more-posts .previous-post > a > span, .wpo-blog-single-section .more-posts .next-post > a > span { display: block; } .wpo-blog-single-section .more-posts .post-control-link { font-size: 14px; font-size: calc-rem-value(14); color: #0D0925; text-transform: uppercase; font-weight: 400; letter-spacing: 2px; } .wpo-blog-single-section .more-posts .post-name { font-family: "Vidaloka", serif; font-size: 18px; font-size: calc-rem-value(18); color: #213644; margin: 0.7em 0 0; } @media (max-width: 991px) { .wpo-blog-single-section .more-posts .post-name { font-size: 18px; font-size: calc-rem-value(18); } } .wpo-blog-single-section .more-posts a:hover .post-control-link { color: #8E713E; } .wpo-blog-single-section .comments-area { margin-top: 70px; } .wpo-blog-single-section .comments-area li > div { border-bottom: 1px solid #e4effb; padding: 35px; } @media (max-width: 991px) { .wpo-blog-single-section .comments-area li > div { padding: 35px 25px; } } .wpo-blog-single-section .comments-area ol { list-style-type: none; padding-left: 0; } .wpo-blog-single-section .comments-area ol ul { padding-left: 30px; list-style-type: none; } .wpo-blog-single-section .comments-area ol > li:last-child div { border-bottom: 0; } .wpo-blog-single-section .comments-area .comments-title { font-size: 22px; font-size: calc-rem-value(22); font-weight: 500; margin: 0 0 1em; text-transform: uppercase; letter-spacing: 3px; } @media (max-width: 991px) { .wpo-blog-single-section .comments-area .comments-title { font-size: 20px; font-size: calc-rem-value(20); } } .wpo-blog-single-section .comments-area li > div { position: relative; } .wpo-blog-single-section .comments-area .comment-theme { position: absolute; left: 35px; } @media (max-width: 767px) { .wpo-blog-single-section .comments-area .comment-theme { position: static; } } .wpo-blog-single-section .comments-area .comment-theme img { border-radius: 50%; } .wpo-blog-single-section .comments-area .comment-main-area { padding-left: 100px; } @media (max-width: 767px) { .wpo-blog-single-section .comments-area .comment-main-area { padding-left: 0; margin-top: 25px; } } .wpo-blog-single-section .comments-area .comment-main-area p { margin-bottom: 20px; color: #484653; } .wpo-blog-single-section .comments-area .comments-meta h4 { font-family: "Vidaloka", serif; font-size: 18px; font-size: calc-rem-value(18); color: #213644; font-weight: bold; margin: 0 0 1em; } .wpo-blog-single-section .comments-area .comments-meta h4 span { font-size: 15px; font-size: calc-rem-value(15); color: #0D0925; font-weight: normal; text-transform: none; display: inline-block; padding-left: 5px; font-family: "DM Sans", sans-serif; } @media (max-width: 767px) { .wpo-blog-single-section .comments-area .comments-meta h4 span { padding-left: 0; } } .wpo-blog-single-section .comments-area .comment-reply-link { font-family: "Vidaloka", serif; font-size: 14px; font-size: calc-rem-value(14); font-weight: 400; color: #213644; text-align: center; border-radius: 50px; display: inline-block; font-family: "DM Sans", sans-serif; text-decoration: underline; text-transform: uppercase; letter-spacing: 1px; } .wpo-blog-single-section .comments-area .comment-reply-link:hover { color: #8E713E; } .wpo-blog-single-section .comment-respond { margin-top: 70px; } .wpo-blog-single-section .comment-respond .comment-reply-title { font-size: 22px; font-size: calc-rem-value(22); margin: 0 0 1.5em; text-transform: uppercase; letter-spacing: 2px; } @media (max-width: 991px) { .wpo-blog-single-section .comment-respond .comment-reply-title { font-size: 20px; font-size: calc-rem-value(20); } } .wpo-blog-single-section .comment-respond form input, .wpo-blog-single-section .comment-respond form textarea { background-color: #fff; width: 100%; height: 55px; border: 1px solid #a4adbe; padding: 6px 15px; margin-bottom: 15px; outline: 0; border-radius: 30px; box-shadow: none; transition: all 0.3s; } .wpo-blog-single-section .comment-respond form input:focus, .wpo-blog-single-section .comment-respond form textarea:focus { box-shadow: none; border-color: #8E713E; } @media (max-width: 991px) { .wpo-blog-single-section .comment-respond form input, .wpo-blog-single-section .comment-respond form textarea { height: 40px; } } .wpo-blog-single-section .comment-respond form textarea { height: 220px; padding: 15px; } @media (max-width: 991px) { .wpo-blog-single-section .comment-respond form textarea { height: 150px; } } .wpo-blog-single-section .comment-respond .form-inputs { overflow: hidden; } .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(1) { width: 49%; float: left; } @media (max-width: 767px) { .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(1) { width: 100%; float: none; } } .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(2) { width: 49%; float: right; } @media (max-width: 767px) { .wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(2) { width: 100%; float: none; } } .wpo-blog-single-section .comment-respond .form-submit input { font-family: "Vidaloka", serif; max-width: 180px; background-color: #8E713E; color: #fff; margin-bottom: 0; border: 0; outline: 0; text-transform: uppercase; font-size: 15px; letter-spacing: 2px; border-radius: 30px; line-height: 41px; } .wpo-blog-single-section .comment-respond .form-submit input:hover { background-color: #947652; } @media screen and (min-width: 1200px) { .wpo-blog-single-left-sidebar-section .blog-sidebar { padding-right: 45px; padding-left: 0; } } /*-------------------------------------------------------------- 16. wpo-contact-pg-section --------------------------------------------------------------*/ .wpo-contact-pg-section { padding-bottom: 0px; } .wpo-contact-pg-section .wpo-contact-title { max-width: 440px; margin: 0 auto; text-align: center; margin-bottom: 50px; } @media (max-width: 767px) { .wpo-contact-pg-section .wpo-contact-title { margin-bottom: 30px; } } .wpo-contact-pg-section .wpo-contact-title h2 { font-size: 35px; font-size: calc-rem-value(35); font-weight: 400; margin-bottom: 20px; } @media (max-width: 575px) { .wpo-contact-pg-section .wpo-contact-title h2 { font-size: 25px; font-size: calc-rem-value(25); } } .wpo-contact-pg-section .wpo-contact-title p { color: #484653; } .wpo-contact-pg-section form input.form-control, .wpo-contact-pg-section form select, .wpo-contact-pg-section form textarea { background: transparent; width: 100%; height: 50px; border: 1px solid transparent; border-radius: 0px; box-shadow: none !important; padding-left: 25px; border: 1px solid #ebebeb; } @media (max-width: 991px) { .wpo-contact-pg-section form input, .wpo-contact-pg-section form select, .wpo-contact-pg-section form textarea { height: 45px; } } .wpo-contact-pg-section form input:focus, .wpo-contact-pg-section form select:focus, .wpo-contact-pg-section form textarea:focus { border-color: #8E713E; background: transparent; } .wpo-contact-pg-section form textarea { height: 180px; padding-top: 15px; } .wpo-contact-pg-section form { margin: 0 -15px; overflow: hidden; } .wpo-contact-pg-section form ::-webkit-input-placeholder, .wpo-contact-pg-section form :-moz-placeholder, .wpo-contact-pg-section form ::-moz-placeholder, .wpo-contact-pg-section form :-ms-input-placeholder { font-style: 15px; font-style: normal; color: #333; } .wpo-contact-pg-section form select { display: inline-block; color: #333; cursor: pointer; opacity: 1; padding: 6px 25px; font-size: 15px; font-size: calc-rem-value(15); -webkit-appearance: none; -o-appearance: none; appearance: none; -moz-appearance: none; background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center; position: relative; } .wpo-contact-pg-section form select:focus { background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center; } .wpo-contact-pg-section form .submit-area { text-align: center; width: 100%; margin-bottom: 10px; margin-left: 0; } @media (max-width: 767px) { .wpo-contact-pg-section form .submit-area { margin-bottom: 0; } } .wpo-contact-pg-section form .submit-area .theme-btn, .wpo-contact-pg-section form .submit-area .view-cart-btn { border-radius: 0px; font-family: "DM Sans", sans-serif; font-size: 16px; } .wpo-contact-pg-section form .submit-area .theme-btn:after, .wpo-contact-pg-section form .submit-area .view-cart-btn:after { border-radius: 0px; background: #213644; } /* .wpo-contact-pg-section form > div { width: calc(50% - 30px); float: left; margin: 0 15px 25px; } @media (max-width: 600px) { .wpo-contact-pg-section form > div { width: calc(100% - 25px); float: none; } } .wpo-contact-pg-section form .fullwidth { width: calc(100% - 25px); float: none; clear: both; } */ .wpo-contact-pg-section .office-info { padding-bottom: 100px; } @media (max-width: 767px) { .wpo-contact-pg-section .office-info { padding-bottom: 60px; } } @media (max-width: 1200px) { .wpo-contact-pg-section .office-info .col .office-info-item { margin-bottom: 30px; } } @media (max-width: 1200px) { .wpo-contact-pg-section .office-info .col:last-child .office-info-item { margin-bottom: 0px; } } .wpo-contact-pg-section .office-info .office-info-item { text-align: center; box-shadow: 0px 5px 15px 0px rgba(62, 65, 159, 0.1); padding: 40px; } .wpo-contact-pg-section .office-info .office-info-item .office-info-icon { width: 85px; height: 85px; background: #f5f5f5; line-height: 110px; text-align: center; margin: 0 auto; border-radius: 50%; } .wpo-contact-pg-section .office-info .office-info-item .office-info-icon .icon .fa-solid { width:100% } .wpo-contact-pg-section .office-info .office-info-item .office-info-icon .icon .fa-solid:before { font-size: 45px; color: #8E713E; } .wpo-contact-pg-section .office-info .office-info-item .office-info-text h2 { font-size: 30px; font-weight: 500; margin: 20px 0; } .wpo-contact-pg-section .office-info .office-info-item .office-info-text p { margin-bottom: 0; color: #484653; } .wpo-contact-pg-section .wpo-contact-form-area { padding: 50px; background: #fff; box-shadow: 0px 1px 15px 0px rgba(62, 65, 159, 0.1); padding-bottom: 0; margin-bottom: -125px; position: relative; z-index: 1; } @media (max-width: 767px) { .wpo-contact-pg-section .wpo-contact-form-area { padding: 30px; padding-top: 50px; } } .wpo-contact-map-section .wpo-contact-map { height: 1000px; } .wpo-contact-map-section iframe { width: 100%; height: 100%; border: 0; outline: 0; filter: grayscale(100%); } .wpo-contact-map-section h2.hidden { display: none; } /*====================================== 17. wpo-booking-page-area =======================================*/ .wpo-donate-header { text-align: center; margin-bottom: 50px; } .wpo-donate-header h2 { font-weight: 700; text-transform: capitalize; margin-bottom: 0; } .wpo-donations-amount, .wpo-donations-details, .wpo-doanation-payment { padding: 30px; border: 1px solid #ebebeb; margin-bottom: 40px; } .wpo-donations-amount h2, .wpo-donations-details h2, .wpo-doanation-payment h2 { font-size: 18px; font-size: 1.125rem; font-weight: 600; position: relative; text-transform: capitalize; margin-bottom: 30px; margin-top: 0; } .wpo-donations-amount input, .wpo-donations-details input, .wpo-donations-details textarea { background: transparent; width: 100%; height: 50px; border: 0; border: 1px solid #ebebeb; padding-left: 15px; border-radius: 0; box-shadow: none !important; color: #525252; border-radius: 5px; margin-bottom: 30px; } .wpo-donations-details textarea { height: 135px; } .wpo-donations-details .form-group .error { margin-bottom: 20px; } .wpo-donations-amount input:focus, .wpo-donations-details input:focus, .wpo-donations-details textarea:focus { border-color: #8E713E; } .payment-name ul li input { margin-right: 0; position: absolute; z-index: -1; opacity: 0; } .wpo-payment-select ul { list-style: none; } .payment-name ul { display: flex; margin-top: 30px; flex-wrap: wrap; } .wpo-payment-area form { overflow: unset !important; } .payment-name ul li { width: 100px; height: 60px; text-align: center; line-height: 60px; margin-bottom: 5px; } .payment-name ul { list-style: none; } .payment-name ul li input { margin-right: 0; } .payment-name ul li { margin-right: 15px; } .wpo-payment-area h2 { padding-bottom: 40px; margin-bottom: 0; } .wpo-payment-select ul { display: flex; } .wpo-payment-select ul li { margin-right: 10px; font-size: 15px; font-weight: 500; color: #5B5B5B; } .wpo-payment-select label { font-size: 18px; font-weight: 600; } .wpo-payment-area h2 { font-size: 20px; color: #878787; font-weight: 700; } .wpo-payment-area h2 span { font-size: 30px; color: #ff493c; } .wpo-payment-area { width: 100%; } .payment-name ul li input { margin-right: 0; position: absolute; z-index: -1; } .payment-name ul li input:checked ~ label { background: #fcebbd; } .payment-name label { width: 100%; border: 1px solid transparent; cursor: pointer; } .payment-name .visa label { border: 1px solid #0057A0; } .payment-name .mas label { border: 1px solid #CC0000; } .payment-name .ski label { border: 1px solid #691A5F; } .payment-name .pay label { border: 1px solid #019CDE; } .wpo-payment-option { padding: 0 15px; } .payment-name.active { display: block; } .wpo-payment-option.active .payment-name { display: none !important; } .wpo-payment-area .form-style input { width: 100%; margin-bottom: 15px; padding-left: 20px; height: 40px; background: #fff; border-radius: 2px; border: none; border: 1px solid #ebebeb; } .wpo-payment-area .form-style input:focus { border: 1px solid #8E713E; } .wpo-payment-area .contact-form { margin-top: 40px; } .wpo-payment-area .contact-form label { color: #484653; } #Donations .theme-btn, #Donations .view-cart-btn { border: none; outline: none; box-shadow: none; } #Donations .theme-btn::after, #Donations .view-cart-btn::after { background: #213644; } #Donations .submit-area { text-align: center; } /*-------------------------------------------------------------- 18. error-404-section --------------------------------------------------------------*/ .error-404-section { text-align: center; } .error-404-section .error-message { margin-top: 70px; padding: 0 200px; } @media (max-width: 991px) { .error-404-section .error-message { margin-top: 50px; padding: 0 100px; } } @media (max-width: 767px) { .error-404-section .error-message { padding: 0; } } .error-404-section .error-message h3 { font-size: 30px; font-size: calc-rem-value(30); margin: 0 0 0.8em; } .error-404-section .error-message p { margin-bottom: 1.8em; color: #484653; } .error-404-section .error-message .theme-btn::after, .error-404-section .error-message .view-cart-btn::after { background: #213644; } .bgBlue { background-color: #213644 !important; color: #fff; } .accordion-button:not(.collapsed) { color: #fff !important; background-color: #213644 !important; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125); } .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; transform: rotate(-180deg); } .nv-terms ul, .projectsInsights ul { list-style-position: inside; } .wpo-service-section-s2 .owl-carousel .owl-stage { display: flex; } .wpo-service-section-s2 .owl-stage-outer { display: flex; flex: 1 0 auto; height: 100%; } .wpo-service-section-s2 .grid { position: relative; overflow: hidden; /* margin-bottom: 80px; */ /*This is optional*/ display: flex; flex-direction: column; align-items: stretch; } .bgBlue a { color: #fff; } .projectBlock .project-single { background-color: #fff; padding: 30px 25px; } .projectBlock .project-single a { color: #213644 } .projectBlock .project-single-text { padding-top: 35px; text-align: left; } .projectBlock .project-single-text span { font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; line-height: 17px; text-transform: uppercase; letter-spacing: 0.13em; color: #8E713E; transition: all 0.4s ease-in-out; display: block; } @media (max-width: 991.98px) { .wpo-page-title .wpo-breadcumb-wrap h1 { font-size: 35px; line-height: normal; margin-top: 80px; } .navbar-brand { margin-right: unset; } .position-md-absolute { position: absolute !important; } } @media (max-width: 767.98px) { .wpo-site-header .navbar-header .navbar-brand img { position: absolute; right: 76px; width:100px; top:-20px; } .wpo-site-header .navbar-header { float:right; } } .team-single-text { min-height: 112px; } .project-single-text h3 { font-size: 1.2rem; } .wpo-project-section .project-wrapper .project-single .project-single-text span { letter-spacing: revert-layer; } .wpo-blog-section .blog-wrapper .blog-single .text { background-color: #fff; } .wpo-blog-section .blog-wrapper .blog-single .text span { letter-spacing: revert-layer; } .list-position-inside { list-style-position: inside; } .validation-summary-valid { display: none; } .field-validation-error.invalid-feedback { display: block; } /* show messages on server postback */ /* MVC CheckBoxFor outputs a hidden input before the checkbox. Some themes style all inputs in .form-check and break clicking. */ .form-check input[type="hidden"] { display: none !important; } /* Defensive: make sure the checkbox stays clickable */ .form-check-input { position: relative; z-index: 2; } .scervice-item-img svg { width: 64px; height: 64px; color: #8E713E; } .scervice-item:hover .scervice-item-img svg { color: #213644; } a:hover .scervice-item h2 { color:#fff; } .wpo-service-item svg { width: 60px; height: 60px; color: #8E713E; } .wpo-service-item:hover svg { color: #213644; } .goldText { color:#8E713E; } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area .wpo-service-item .goldText i::before{ font-size: 14px !important; line-height: normal !important } .wpo-service-single-area .wpo-service-single-wrap .wpo-service-area .wpo-service-item:hover .goldText { color:#213644 } .bgNone { background-color:unset; } .validation-summary-errors ul { list-style-position:inside; } #ccc-info p { display: none; visibility: hidden; }