/* Name: theme-elements.css Written by: Okler Themes - (http://www.okler.net) Theme Version: 1.1.0 */ /* Headings */ h1, /*h2,*/ h3, h4, h5, h6 { color: #1c1f21; font-weight: 400; line-height: 1.2; margin: 0 0 6.4px 0; margin: 0 0 0.4rem 0; letter-spacing: -0.5px; } h1 { font-size: 36.8px; font-size: 2.3rem; } h2 { color: #695093; font-family: Source Sans Pro, regular; font-size: 24px; font-size: 2.3rem; } h3 { color:#6E799F; font-size: 24px; font-size: 1.5rem; } h4 { text-align: center; font-size: 17.6px; font-size: 1rem; font-family: Source Sans Pro, bold; } h5 { text-align: center; font-size: 16px; font-size: 1rem; } h6 { font-size: 12.8px; font-size: 0.8rem; } h7 { color: #242F62; font-family: Source Sans Pro, bold; font-weight: 400; line-height: 1.2; margin: 0 0 6.4px 0; margin: 0 0 0.4rem 0; letter-spacing: -0.5px; font-size: 28.8px; font-size: 1.8rem; } h8 { color: #695093; font-family: Source Sans Pro, regular; font-size: 36px; font-size: 2.3rem; } h9 { color: #695093; font-family: Source Sans Pro, regular; font-size: 36px; font-size: 2.3rem; } h10 { color: #6E799F; font-family: Source Sans Pro, regular; font-size: 30px; font-size: 1.8rem; } /* Heading with Icons */ h1>i, h1 .fa, h1 .fas, h1 .far, h1 .fal, h1 .fab, h1 svg, h1 object, h2>i, h2 .fa, h2 .fas, h2 .far, h2 .fal, h2 .fab, h2 svg, h2 object, h3>i, h3 .fa, h3 .fas, h3 .far, h3 .fal, h3 .fab, h3 svg, h3 object, h4>i, h4 .fa, h4 .fas, h4 .far, h4 .fal, h4 .fab, h4 svg, h4 object, h5>i, h5 .fa, h5 .fas, h5 .far, h5 .fal, h5 .fab, h5 svg, h5 object, h6>i, h6 .fa, h6 .fas, h6 .far, h6 .fal, h6 .fab, h6 svg, h6 object { margin-right: 10px; font-size: 1.9em; } h1.icon-va-fix-1>i, h1.icon-va-fix-1 .fa, h1.icon-va-fix-1 .fas, h1.icon-va-fix-1 .far, h1.icon-va-fix-1 .fal, h1.icon-va-fix-1 .fab, h1.icon-va-fix-1 svg, h1.icon-va-fix-1 object, h2.icon-va-fix-1>i, h2.icon-va-fix-1 .fa, h2.icon-va-fix-1 .fas, h2.icon-va-fix-1 .far, h2.icon-va-fix-1 .fal, h2.icon-va-fix-1 .fab, h2.icon-va-fix-1 svg, h2.icon-va-fix-1 object, h3.icon-va-fix-1>i, h3.icon-va-fix-1 .fa, h3.icon-va-fix-1 .fas, h3.icon-va-fix-1 .far, h3.icon-va-fix-1 .fal, h3.icon-va-fix-1 .fab, h3.icon-va-fix-1 svg, h3.icon-va-fix-1 object, h4.icon-va-fix-1>i, h4.icon-va-fix-1 .fa, h4.icon-va-fix-1 .fas, h4.icon-va-fix-1 .far, h4.icon-va-fix-1 .fal, h4.icon-va-fix-1 .fab, h4.icon-va-fix-1 svg, h4.icon-va-fix-1 object, h5.icon-va-fix-1>i, h5.icon-va-fix-1 .fa, h5.icon-va-fix-1 .fas, h5.icon-va-fix-1 .far, h5.icon-va-fix-1 .fal, h5.icon-va-fix-1 .fab, h5.icon-va-fix-1 svg, h5.icon-va-fix-1 object, h6.icon-va-fix-1>i, h6.icon-va-fix-1 .fa, h6.icon-va-fix-1 .fas, h6.icon-va-fix-1 .far, h6.icon-va-fix-1 .fal, h6.icon-va-fix-1 .fab, h6.icon-va-fix-1 svg, h6.icon-va-fix-1 object { position: relative; top: -1px; } h1.icon-va-fix-2>i, h1.icon-va-fix-2 .fa, h1.icon-va-fix-2 .fas, h1.icon-va-fix-2 .far, h1.icon-va-fix-2 .fal, h1.icon-va-fix-2 .fab, h1.icon-va-fix-2 svg, h1.icon-va-fix-2 object, h2.icon-va-fix-2>i, h2.icon-va-fix-2 .fa, h2.icon-va-fix-2 .fas, h2.icon-va-fix-2 .far, h2.icon-va-fix-2 .fal, h2.icon-va-fix-2 .fab, h2.icon-va-fix-2 svg, h2.icon-va-fix-2 object, h3.icon-va-fix-2>i, h3.icon-va-fix-2 .fa, h3.icon-va-fix-2 .fas, h3.icon-va-fix-2 .far, h3.icon-va-fix-2 .fal, h3.icon-va-fix-2 .fab, h3.icon-va-fix-2 svg, h3.icon-va-fix-2 object, h4.icon-va-fix-2>i, h4.icon-va-fix-2 .fa, h4.icon-va-fix-2 .fas, h4.icon-va-fix-2 .far, h4.icon-va-fix-2 .fal, h4.icon-va-fix-2 .fab, h4.icon-va-fix-2 svg, h4.icon-va-fix-2 object, h5.icon-va-fix-2>i, h5.icon-va-fix-2 .fa, h5.icon-va-fix-2 .fas, h5.icon-va-fix-2 .far, h5.icon-va-fix-2 .fal, h5.icon-va-fix-2 .fab, h5.icon-va-fix-2 svg, h5.icon-va-fix-2 object, h6.icon-va-fix-2>i, h6.icon-va-fix-2 .fa, h6.icon-va-fix-2 .fas, h6.icon-va-fix-2 .far, h6.icon-va-fix-2 .fal, h6.icon-va-fix-2 .fab, h6.icon-va-fix-2 svg, h6.icon-va-fix-2 object { position: relative; top: -2px; } h1.icon-va-fix-3>i, h1.icon-va-fix-3 .fa, h1.icon-va-fix-3 .fas, h1.icon-va-fix-3 .far, h1.icon-va-fix-3 .fal, h1.icon-va-fix-3 .fab, h1.icon-va-fix-3 svg, h1.icon-va-fix-3 object, h2.icon-va-fix-3>i, h2.icon-va-fix-3 .fa, h2.icon-va-fix-3 .fas, h2.icon-va-fix-3 .far, h2.icon-va-fix-3 .fal, h2.icon-va-fix-3 .fab, h2.icon-va-fix-3 svg, h2.icon-va-fix-3 object, h3.icon-va-fix-3>i, h3.icon-va-fix-3 .fa, h3.icon-va-fix-3 .fas, h3.icon-va-fix-3 .far, h3.icon-va-fix-3 .fal, h3.icon-va-fix-3 .fab, h3.icon-va-fix-3 svg, h3.icon-va-fix-3 object, h4.icon-va-fix-3>i, h4.icon-va-fix-3 .fa, h4.icon-va-fix-3 .fas, h4.icon-va-fix-3 .far, h4.icon-va-fix-3 .fal, h4.icon-va-fix-3 .fab, h4.icon-va-fix-3 svg, h4.icon-va-fix-3 object, h5.icon-va-fix-3>i, h5.icon-va-fix-3 .fa, h5.icon-va-fix-3 .fas, h5.icon-va-fix-3 .far, h5.icon-va-fix-3 .fal, h5.icon-va-fix-3 .fab, h5.icon-va-fix-3 svg, h5.icon-va-fix-3 object, h6.icon-va-fix-3>i, h6.icon-va-fix-3 .fa, h6.icon-va-fix-3 .fas, h6.icon-va-fix-3 .far, h6.icon-va-fix-3 .fal, h6.icon-va-fix-3 .fab, h6.icon-va-fix-3 svg, h6.icon-va-fix-3 object { position: relative; top: -3px; } /* Styled Heading */ .heading-style-1 { font-size: 100.8px; font-size: 6.3rem; line-height: 1; letter-spacing: -5px; } .heading-style-1>span { position: absolute; margin-left: -14.4px; margin-left: -0.9rem; z-index: -1; } /* Paragraphs */ p { color: #707070; line-height: 2.0; margin: 0 0 1.2em; } p.featured { font-size: 2.8em; line-height: 1.5em; } p.short { margin-bottom: 0; } p.tall { margin-bottom: 20px; } p.taller { margin-bottom: 40px; } /* Links */ a { color: #707070; -webkit-transition: ease color 300ms; transition: ease color 300ms; } a:hover, a:focus { color: #CCC; text-decoration: none; } a.link:hover, a.link:focus { text-decoration: underline; } /* Drop Caps */ p.drop-caps:first-letter { float: left; font-size: 75px; line-height: 60px; padding: 4px; margin-right: 5px; margin-top: 5px; font-family: Georgia; } p.drop-caps.drop-caps-style-2:first-letter { background-color: #CCC; color: #FFF; padding: 6px; margin-right: 5px; border-radius: 4px; } /* Mask Up */ @-webkit-keyframes maskUp { from { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskUp { from { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* Mask Right */ @-webkit-keyframes maskRight { from { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskRight { from { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* Mask Down */ @-webkit-keyframes maskDown { from { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskDown { from { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* Mask Left */ @-webkit-keyframes maskLeft { from { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskLeft { from { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* Fade In Up Shorter */ @-webkit-keyframes fadeInUpShorter { from { opacity: 0; -webkit-transform: translate(0, 50px); transform: translate(0, 50px); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpShorter { from { opacity: 0; -webkit-transform: translate(0, 50px); transform: translate(0, 50px); } to { opacity: 1; -webkit-transform: none; transform: none; } } /* Fade In Left Shorter */ @-webkit-keyframes fadeInLeftShorter { from { opacity: 0; -webkit-transform: translate(50px, 0); transform: translate(50px, 0); } to { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes fadeInLeftShorter { from { opacity: 0; -webkit-transform: translate(50px, 0); transform: translate(50px, 0); } to { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* Fade In Right Shorter */ @-webkit-keyframes fadeInRightShorter { from { opacity: 0; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); } to { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes fadeInRightShorter { from { opacity: 0; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); } to { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* Fade In Down Shorter */ @-webkit-keyframes fadeInDownShorter { from { opacity: 0; -webkit-transform: translate(0, -50px); transform: translate(0, -50px); } to { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes fadeInDownShorter { from { opacity: 0; -webkit-transform: translate(0, -50px); transform: translate(0, -50px); } to { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* Fade In Down Shorter - Absolute Center */ @-webkit-keyframes fadeInDownShorterAbsCenter { from { opacity: 0; -webkit-transform: translate(-50%, -50px); transform: translate(-50%, -50px); } to { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @keyframes fadeInDownShorterAbsCenter { from { opacity: 0; -webkit-transform: translate(-50%, -50px); transform: translate(-50%, -50px); } to { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } /* Expand In */ @-webkit-keyframes expandIn { from { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes expandIn { from { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* Blur In */ @-webkit-keyframes blurIn { from { opacity: 0; -webkit-filter: blur(20px); filter: blur(20px); -webkit-transform: scale(1.3); transform: scale(1.3); } to { opacity: 1; -webkit-filter: blur(0); filter: blur(0); -webkit-transform: none; transform: none; } } @keyframes blurIn { from { opacity: 0; -webkit-filter: blur(20px); filter: blur(20px); -webkit-transform: scale(1.3); transform: scale(1.3); } to { opacity: 1; -webkit-filter: blur(0); filter: blur(0); -webkit-transform: none; transform: none; } } /* Carousel Fade In Right */ @-webkit-keyframes doubleCarouselFadeInRight { from { opacity: 0; -webkit-transform: translate(15%, -50%); transform: translate(15%, -50%); } to { opacity: 1; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } } @keyframes doubleCarouselFadeInRight { from { opacity: 0; -webkit-transform: translate(15%, -50%); transform: translate(15%, -50%); } to { opacity: 1; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } } /* Carousel Fade In Left */ @-webkit-keyframes doubleCarouselFadeInLeft { from { opacity: 0; -webkit-transform: translate(-15%, -50%); transform: translate(-15%, -50%); } to { opacity: 1; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } } @keyframes doubleCarouselFadeInLeft { from { opacity: 0; -webkit-transform: translate(-15%, -50%); transform: translate(-15%, -50%); } to { opacity: 1; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } } /* Steps Fade In Up */ @-webkit-keyframes stepsFadeInUp { from { opacity: 0; -webkit-transform: translate(-50%, 25%); transform: translate(-50%, 25%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @keyframes stepsFadeInUp { from { opacity: 0; -webkit-transform: translate(-50%, 25%); transform: translate(-50%, 25%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } /* Steps Fade In Left */ @-webkit-keyframes stepsFadeInLeft { from { opacity: 0; -webkit-transform: translate(-75%, -50%); transform: translate(-75%, -50%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @keyframes stepsFadeInLeft { from { opacity: 0; -webkit-transform: translate(-75%, -50%); transform: translate(-75%, -50%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } /* Steps Fade In Right */ @-webkit-keyframes stepsFadeInRight { from { opacity: 0; -webkit-transform: translate(-25%, -50%); transform: translate(-25%, -50%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @keyframes stepsFadeInRight { from { opacity: 0; -webkit-transform: translate(-25%, -50%); transform: translate(-25%, -50%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } /* Text bg Fade In Up */ @-webkit-keyframes textBgFadeInUp { from { opacity: 0; -webkit-transform: translate(-50%, 200%); transform: translate(-50%, 200%); } to { opacity: 0.06; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @keyframes textBgFadeInUp { from { opacity: 0; -webkit-transform: translate(-50%, 200%); transform: translate(-50%, 200%); } to { opacity: 0.06; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @-webkit-keyframes textBgFadeInUpDark { from { opacity: 0; -webkit-transform: translate(-50%, 200%); transform: translate(-50%, 200%); } to { opacity: 0.02; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @keyframes textBgFadeInUpDark { from { opacity: 0; -webkit-transform: translate(-50%, 200%); transform: translate(-50%, 200%); } to { opacity: 0.02; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } /* Text bg Fade In Up 2 */ @-webkit-keyframes textBgFadeInUp2 { from { opacity: 0; -webkit-transform: translate(-50%, 200%); transform: translate(-50%, 200%); } to { opacity: 0.5; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @keyframes textBgFadeInUp2 { from { opacity: 0; -webkit-transform: translate(-50%, 200%); transform: translate(-50%, 200%); } to { opacity: 0.5; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } /* Header Reveal */ @-webkit-keyframes headerReveal { from { top: -150px; } to { top: 0; } } @keyframes headerReveal { from { top: -150px; } to { top: 0; } } /* Fade In Scale */ @-webkit-keyframes fadeInScale { from { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes fadeInScale { from { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* Highlight */ @-webkit-keyframes highlight { 0% { background-color: transparent; } 50% { background-color: #f1f3f7; } 100% { background-color: transparent; } } @keyframes highlight { 0% { background-color: transparent; } 50% { background-color: #f1f3f7; } 100% { background-color: transparent; } } /* Slider Scroll Button Animation */ @-webkit-keyframes sliderScrollButton { 0% { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } 70% { opacity: 1; -webkit-transform: translate3d(-50%, 10px, 0); transform: translate3d(-50%, 10px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-50%, 10px, 0); transform: translate3d(-50%, 10px, 0); } } @keyframes sliderScrollButton { 0% { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } 70% { opacity: 1; -webkit-transform: translate3d(-50%, 10px, 0); transform: translate3d(-50%, 10px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-50%, 10px, 0); transform: translate3d(-50%, 10px, 0); } } /* Background Scale Out */ @-webkit-keyframes scaleOut { from { -webkit-transform: scale(1.1); transform: scale(1.1); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleOut { from { -webkit-transform: scale(1.1); transform: scale(1.1); } to { -webkit-transform: scale(1); transform: scale(1); } } /* Animations */ .animated { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-timing-function: cubic-bezier(0.03, 0.025, 0, 0.97); animation-timing-function: cubic-bezier(0.03, 0.025, 0, 0.97); } .appear-animation { opacity: 0; } .appear-animation-visible { opacity: 1; } .maskUp { -webkit-animation-name: maskUp; animation-name: maskUp; } .maskRight { -webkit-animation-name: maskRight; animation-name: maskRight; } .maskDown { -webkit-animation-name: maskDown; animation-name: maskDown; } .maskLeft { -webkit-animation-name: maskLeft; animation-name: maskLeft; } .fadeInUpShorter { -webkit-animation-name: fadeInUpShorter; animation-name: fadeInUpShorter; } .fadeInLeftShorter { -webkit-animation-name: fadeInLeftShorter; animation-name: fadeInLeftShorter; } .fadeInRightShorter { -webkit-animation-name: fadeInRightShorter; animation-name: fadeInRightShorter; } .fadeInDownShorter { -webkit-animation-name: fadeInDownShorter; animation-name: fadeInDownShorter; } .fadeInDownShorterAbsCenter { -webkit-animation-name: fadeInDownShorterAbsCenter; animation-name: fadeInDownShorterAbsCenter; } .expandIn { -webkit-animation-name: expandIn; animation-name: expandIn; } .blurIn { -webkit-animation-name: blurIn; animation-name: blurIn; } .doubleCarouselFadeInRight { -webkit-animation-name: doubleCarouselFadeInRight; animation-name: doubleCarouselFadeInRight; } .doubleCarouselFadeInLeft { -webkit-animation-name: doubleCarouselFadeInLeft; animation-name: doubleCarouselFadeInLeft; } .stepsFadeInUp { -webkit-animation-name: stepsFadeInUp; animation-name: stepsFadeInUp; } .stepsFadeInLeft { -webkit-animation-name: stepsFadeInLeft; animation-name: stepsFadeInLeft; } .stepsFadeInRight { -webkit-animation-name: stepsFadeInRight; animation-name: stepsFadeInRight; } .textBgFadeInUp { -webkit-animation-name: textBgFadeInUp; animation-name: textBgFadeInUp; } .textBgFadeInUpDark { -webkit-animation-name: textBgFadeInUpDark; animation-name: textBgFadeInUpDark; } .textBgFadeInUp2 { -webkit-animation-name: textBgFadeInUp2; animation-name: textBgFadeInUp2; } .fadeInScale { -webkit-animation-name: fadeInScale; animation-name: fadeInScale; } .scaleOut { -webkit-animation-name: scaleOut; animation-name: scaleOut; } /* Hover 3d Effect */ .hover-in { -webkit-transition: .1s ease-out !important; transition: .1s ease-out !important; } .hover-out { -webkit-transition: .1s ease-in !important; transition: .1s ease-in !important; } .hover-3d { -webkit-transition: none; transition: none; } /* Hover Anim */ .hover-anim.hover-anim-effect-1 { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.7s cubic-bezier(0.2, 1, 0.22, 1); transition: all 0.7s cubic-bezier(0.2, 1, 0.22, 1); } .hover-anim.hover-anim-effect-1:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } /* Highlight Anim */ .highlight-anim { -webkit-animation-name: highlight; animation-name: highlight; -webkit-animation-duration: 1s; animation-duration: 1s; } /* Overlays */ .overlay { /* Backward */ } .overlay:before { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background: #1c1f21; opacity: 0; pointer-events: none; -webkit-transition: ease opacity 300ms 100ms; transition: ease opacity 300ms 100ms; } .overlay:hover:before, .overlay.overlay-show:before, .overlay.show:before { opacity: 0.8; } .overlay.overlay-op-1:hover:before, .overlay.overlay-op-1.overlay-show:before, .overlay.overlay-op-1.show:before { opacity: 0.1; } .overlay.overlay-op-2:hover:before, .overlay.overlay-op-2.overlay-show:before, .overlay.overlay-op-2.show:before { opacity: 0.2; } .overlay.overlay-op-3:hover:before, .overlay.overlay-op-3.overlay-show:before, .overlay.overlay-op-3.show:before { opacity: 0.3; } .overlay.overlay-op-4:hover:before, .overlay.overlay-op-4.overlay-show:before, .overlay.overlay-op-4.show:before { opacity: 0.4; } .overlay.overlay-op-5:hover:before, .overlay.overlay-op-5.overlay-show:before, .overlay.overlay-op-5.show:before { opacity: 0.5; } .overlay.overlay-op-6:hover:before, .overlay.overlay-op-6.overlay-show:before, .overlay.overlay-op-6.show:before { opacity: 0.6; } .overlay.overlay-op-7:hover:before, .overlay.overlay-op-7.overlay-show:before, .overlay.overlay-op-7.show:before { opacity: 0.7; } .overlay.overlay-op-8:hover:before, .overlay.overlay-op-8.overlay-show:before, .overlay.overlay-op-8.show:before { opacity: 0.8; } .overlay.overlay-op-9:hover:before, .overlay.overlay-op-9.overlay-show:before, .overlay.overlay-op-9.show:before { opacity: 0.9; } .overlay.overlay-backward:hover:before, .overlay.overlay-backward.overlay-show:before, .overlay.overlay-backward.show:before { z-index: 0; } .overlay .container-fluid { position: relative; z-index: 3; } /* Overlay Colors */ .overlay-light:before { background-color: #FFF !important; } .overlay-dark:before { background-color: #1c1f21 !important; } /* Navs */ .nav { padding-left: 0; } .nav>.nav-item>.nav-link { color: #707070; } .nav>.nav-item>.nav-link.active { color: #CCC; } .nav>.nav-item>.nav-link:hover, .nav>.nav-item>.nav-link:focus, .nav>.nav-item>.nav-link:active { color: #CCC; } .nav.no-skin .nav-item .nav-link { color: inherit; } .nav.nav-light .nav-item .nav-link { color: #FFF; } .nav.nav-light-2 .nav-item .nav-link { color: #d4d4d4; } .nav.nav-light-2 .nav-item .nav-link.active, .nav.nav-light-2 .nav-item .nav-link:hover { color: #FFF !important; } /* Nav Pills */ .nav-pills .nav-link.active, .nav-pills .show>.nav-link { color: #FFF; background-color: #CCC; } /* Nav Secondary */ .nav-secondary { z-index: 10; } .nav-secondary.nav-secondary-style-1 .nav>li>a { position: relative; padding-right: 3.2px; padding-right: .2rem; padding-left: 3.2px; padding-left: .2rem; margin: 0 16px; margin: 0 1rem; } .nav-secondary.nav-secondary-style-1 .nav>li>a:after { content: ''; display: block; position: absolute; bottom: 6.4px; bottom: 0.4rem; left: 50%; width: 0%; border-bottom: 2px solid #FFF; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transition: ease width 300ms; transition: ease width 300ms; } .nav-secondary.nav-secondary-style-1 .nav>li>a.active, .nav-secondary.nav-secondary-style-1 .nav>li>a:hover { color: #FFF; } .nav-secondary.nav-secondary-style-1 .nav>li>a.active:after, .nav-secondary.nav-secondary-style-1 .nav>li>a:hover:after { width: 100%; } .nav-secondary.nav-secondary-style-2 { position: fixed; top: 50%; right: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .nav-secondary.nav-secondary-style-2 .nav:hover>li>a.active:hover>span { opacity: 1; visibility: visible; } .nav-secondary.nav-secondary-style-2 .nav:hover>li>a.active>span { opacity: 0; visibility: hidden; } .nav-secondary.nav-secondary-style-2 .nav>li { margin-bottom: 8px; margin-bottom: 0.5rem; } .nav-secondary.nav-secondary-style-2 .nav>li:last-child { margin-bottom: 0; } .nav-secondary.nav-secondary-style-2 .nav>li>a { position: relative; display: block; width: 12.8px; width: 0.8rem; height: 12.8px; height: 0.8rem; border-radius: 100%; border: 1px solid #F7F7F7; padding: 0; } .nav-secondary.nav-secondary-style-2 .nav>li>a>span { position: absolute; top: 50%; right: calc(100% + 20px); background: #F7F7F7; color: #1c1f21; font-size: 12.8px; font-size: 0.8rem; font-weight: 800; padding: 3.2px 16px; padding: 0.2rem 1rem; border-radius: 4px; white-space: nowrap; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .nav-secondary.nav-secondary-style-2 .nav>li>a>span:after { content: ''; position: absolute; top: 50%; left: 100%; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #F7F7F7; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .nav-secondary.nav-secondary-style-2 .nav>li>a.active, .nav-secondary.nav-secondary-style-2 .nav>li>a:hover { background: #F7F7F7; } .nav-secondary.nav-secondary-style-2 .nav>li>a.active>span, .nav-secondary.nav-secondary-style-2 .nav>li>a:hover>span { opacity: 1; visibility: visible; } .nav-secondary.nav-secondary-style-2.nav-secondary-style-2-square .nav>li>a { border-radius: 0; } @media (max-width: 767px) { .nav-secondary.nav-secondary-style-2 .nav>li>a>span { display: none; } } /* IE */ html.ie .nav-secondary.nav-secondary-style-2 { right: 15px; } /* Buttons */ .btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 12px; font-size: 0.90rem; font-family: "Source Sans Pro", bold; cursor: pointer; -webkit-transition: all 0.1s; transition: all 0.1s; } /* Buttons Sizes */ .btn-fs-1 { font-size: 9.6px !important; font-size: 0.6rem !important; } .btn-fs-2 { font-size: 11.2px !important; font-size: 0.7rem !important; } .btn-fs-3 { font-size: 12.8px !important; font-size: 0.8rem !important; } .btn-fs-4 { font-size: 14.4px !important; font-size: 0.9rem !important; } .btn-fs-5 { font-size: 16px !important; font-size: 1rem !important; } /* Sizes */ .btn-1 { padding: 1.23px 17.23px !important; padding: 0.0769230769rem 1.0769230769rem !important; } .btn-2 { padding: 4.923px 23.384px !important; padding: 0.3076923077rem 1.4615384615rem !important; } .btn-3 { padding: 7.384px 29.538px !important; padding: 0.4615384615rem 1.8461538462rem !important; } .btn-4 { padding: 11.076px 35.692px !important; padding: 0.6923076923rem 2.2307692308rem !important; } .btn-5 { padding: 14.769px 41.846px !important; padding: 0.9230769231rem 2.6153846154rem !important; } /* Vertical Sizes */ .btn-v-1 { padding-top: 2.461px !important; padding-top: 0.1538461538rem !important; padding-bottom: 2.461px !important; padding-bottom: 0.1538461538rem !important; } .btn-v-2 { padding-top: 7.384px !important; padding-top: 0.4615384615rem !important; padding-bottom: 7.384px !important; padding-bottom: 0.4615384615rem !important; } .btn-v-3 { padding-top: 11.076px !important; padding-top: 0.6923076923rem !important; padding-bottom: 11.076px !important; padding-bottom: 0.6923076923rem !important; } .btn-v-4 { padding-top: 14.769px !important; padding-top: 0.9230769231rem !important; padding-bottom: 14.769px !important; padding-bottom: 0.9230769231rem !important; } .btn-v-5 { padding-top: 18.461px !important; padding-top: 1.1538461538rem !important; padding-bottom: 18.461px !important; padding-bottom: 1.1538461538rem !important; } /* Horizontal Sizes */ .btn-h-1 { padding-left: 17.23px !important; padding-left: 1.0769230769rem !important; padding-right: 17.23px !important; padding-right: 1.0769230769rem !important; } .btn-h-2 { padding-left: 29.538px !important; padding-left: 1.8461538462rem !important; padding-right: 29.538px !important; padding-right: 1.8461538462rem !important; } .btn-h-3 { padding-left: 41.846px !important; padding-left: 2.6153846154rem !important; padding-right: 41.846px !important; padding-right: 2.6153846154rem !important; } .btn-h-4 { padding-left: 54.153px !important; padding-left: 3.3846153846rem !important; padding-right: 54.153px !important; padding-right: 3.3846153846rem !important; } .btn-h-5 { padding-left: 66.461px !important; padding-left: 4.1538461538rem !important; padding-right: 66.461px !important; padding-right: 4.1538461538rem !important; } /* Wide Buttons */ .btn-wide-1 { padding: 14.769px 35.692px !important; padding: 0.9230769231rem 2.2307692308rem !important; } .btn-wide-2 { padding: 14.769px 48px !important; padding: 0.9230769231rem 3rem !important; } .btn-wide-3 { padding: 14.769px 60.307px !important; padding: 0.9230769231rem 3.7692307692rem !important; } .btn-wide-4 { padding: 14.769px 72.615px !important; padding: 0.9230769231rem 4.5384615385rem !important; } .btn-wide-5 { padding: 14.769px 97.23px !important; padding: 0.9230769231rem 6.0769230769rem !important; } /* Button Block */ .btn-block { display: block; } /* Border Buttons */ .btn-rounded { border-radius: 50px; } /* Outline Buttons */ .btn-outline { border-width: 2px; border-radius: 50px; } /* Button With Icon Effect 1 */ .btn-icon-effect-1 .wrap { position: relative; } .btn-icon-effect-1 .wrap span { position: relative; display: inline-block; width: 100%; left: 0; -webkit-transition: ease left 300ms; transition: ease left 300ms; } .btn-icon-effect-1 .wrap i, .btn-icon-effect-1 .wrap strong { display: block; position: absolute; top: 50%; right: 0; opacity: 0; font-size: 17.6px; font-size: 1.1rem; max-width: 20px; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -webkit-transition: ease right 300ms, ease opacity 300ms; transition: ease right 300ms, ease opacity 300ms; } .btn-icon-effect-1:hover .wrap span { left: -14px; } .btn-icon-effect-1:hover .wrap i, .btn-icon-effect-1:hover .wrap strong { opacity: 1; right: -14px; } /* Button With Icon Effect 2 */ .btn-icon-effect-2 { position: relative; overflow: hidden; } .btn-icon-effect-2 span { display: inline-block; -webkit-transition: ease transform 300ms, ease opacity 300ms; transition: ease transform 300ms, ease opacity 300ms; } .btn-icon-effect-2 i { position: absolute; left: 50%; top: 50%; opacity: 0; font-size: 1.5em; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); -webkit-transition: ease transform 300ms, ease opacity 300ms; transition: ease transform 300ms, ease opacity 300ms; } .btn-icon-effect-2:hover span { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .btn-icon-effect-2:hover i { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* Button Group */ .btn-group>.btn-group:not(:first-child)>.btn>strong, .btn-group>.btn:not(:first-child)>strong { position: relative; left: -3px; } .btn-group.btn-group-style-1>.btn:first-child { z-index: 10; margin-right: -3.5em; } .btn-group.btn-group-style-1>.btn-outline:last-child { padding-left: 5.5em !important; } .btn-group.btn-group-style-1>.btn-rounded, .btn-group.btn-group-style-1>.btn-outline { position: relative; border-radius: 50px !important; } .btn-group.btn-group-style-1:hover>.btn:first-child { -webkit-box-shadow: 2px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 2px 0px 1px rgba(0, 0, 0, 0.1); } .btn-group.btn-group-style-2>.btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Buttons Colors */ .btn-light, html.sticky-header-active .btn-sticky-light { border-color: #FFF; color: #1c1f21; background-color: #FFF; } .btn-light:hover, .btn-light:focus, html.sticky-header-active .btn-sticky-light:hover, html.sticky-header-active .btn-sticky-light:focus { border-color: white; background-color: white; color: #1c1f21; } .btn-light:focus, html.sticky-header-active .btn-sticky-light:focus { -webkit-box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } .btn-light:disabled, .btn-light:disabled:hover, .btn-light:disabled:active, .btn-light:disabled:focus, .btn-light.disabled, .btn-light.disabled:hover, .btn-light.disabled:active, .btn-light.disabled:focus, html.sticky-header-active .btn-sticky-light:disabled, html.sticky-header-active .btn-sticky-light:disabled:hover, html.sticky-header-active .btn-sticky-light:disabled:active, html.sticky-header-active .btn-sticky-light:disabled:focus, html.sticky-header-active .btn-sticky-light.disabled, html.sticky-header-active .btn-sticky-light.disabled:hover, html.sticky-header-active .btn-sticky-light.disabled:active, html.sticky-header-active .btn-sticky-light.disabled:focus { cursor: default; border-color: #FFF !important; color: #1c1f21 !important; background-color: #FFF !important; } .btn-light.btn-outline, html.sticky-header-active .btn-sticky-light.btn-outline { background: transparent; border-color: #FFF; color: #FFF; } .btn-light.btn-outline:hover, .btn-light.btn-outline:focus, html.sticky-header-active .btn-sticky-light.btn-outline:hover, html.sticky-header-active .btn-sticky-light.btn-outline:focus { border-color: white; background-color: #FFF; color: #1c1f21; } .btn-light.btn-outline:focus, html.sticky-header-active .btn-sticky-light.btn-outline:focus { -webkit-box-shadow: 0 0 0 3px fade(#FFF, 25%); box-shadow: 0 0 0 3px fade(#FFF, 25%); } .btn-light.btn-outline:disabled, .btn-light.btn-outline:disabled:hover, .btn-light.btn-outline:disabled:active, .btn-light.btn-outline:disabled:focus, .btn-light.btn-outline.disabled, .btn-light.btn-outline.disabled:hover, .btn-light.btn-outline.disabled:active, .btn-light.btn-outline.disabled:focus, html.sticky-header-active .btn-sticky-light.btn-outline:disabled, html.sticky-header-active .btn-sticky-light.btn-outline:disabled:hover, html.sticky-header-active .btn-sticky-light.btn-outline:disabled:active, html.sticky-header-active .btn-sticky-light.btn-outline:disabled:focus, html.sticky-header-active .btn-sticky-light.btn-outline.disabled, html.sticky-header-active .btn-sticky-light.btn-outline.disabled:hover, html.sticky-header-active .btn-sticky-light.btn-outline.disabled:active, html.sticky-header-active .btn-sticky-light.btn-outline.disabled:focus { background: transparent !important; border-color: #FFF !important; color: #FFF !important; } .btn-dark, html.sticky-header-active .btn-sticky-dark { border-color: #1c1f21; color: #FFF; background-color: #1c1f21; } .btn-dark:hover, .btn-dark:focus, html.sticky-header-active .btn-sticky-dark:hover, html.sticky-header-active .btn-sticky-dark:focus { border-color: #33393d; background-color: #33393d; color: #FFF; } .btn-dark:focus, html.sticky-header-active .btn-sticky-dark:focus { -webkit-box-shadow: 0 0 0 3px rgba(28, 31, 33, 0.25); box-shadow: 0 0 0 3px rgba(28, 31, 33, 0.25); } .btn-dark:disabled, .btn-dark:disabled:hover, .btn-dark:disabled:active, .btn-dark:disabled:focus, .btn-dark.disabled, .btn-dark.disabled:hover, .btn-dark.disabled:active, .btn-dark.disabled:focus, html.sticky-header-active .btn-sticky-dark:disabled, html.sticky-header-active .btn-sticky-dark:disabled:hover, html.sticky-header-active .btn-sticky-dark:disabled:active, html.sticky-header-active .btn-sticky-dark:disabled:focus, html.sticky-header-active .btn-sticky-dark.disabled, html.sticky-header-active .btn-sticky-dark.disabled:hover, html.sticky-header-active .btn-sticky-dark.disabled:active, html.sticky-header-active .btn-sticky-dark.disabled:focus { cursor: default; border-color: #1c1f21 !important; color: #FFF !important; background-color: #1c1f21 !important; } .btn-dark.btn-outline, html.sticky-header-active .btn-sticky-dark.btn-outline { background: transparent; border-color: #1c1f21; color: #1c1f21; } .btn-dark.btn-outline:hover, .btn-dark.btn-outline:focus, html.sticky-header-active .btn-sticky-dark.btn-outline:hover, html.sticky-header-active .btn-sticky-dark.btn-outline:focus { border-color: #050505; background-color: #1c1f21; color: #FFF; } .btn-dark.btn-outline:focus, html.sticky-header-active .btn-sticky-dark.btn-outline:focus { -webkit-box-shadow: 0 0 0 3px fade(#1c1f21, 25%); box-shadow: 0 0 0 3px fade(#1c1f21, 25%); } .btn-dark.btn-outline:disabled, .btn-dark.btn-outline:disabled:hover, .btn-dark.btn-outline:disabled:active, .btn-dark.btn-outline:disabled:focus, .btn-dark.btn-outline.disabled, .btn-dark.btn-outline.disabled:hover, .btn-dark.btn-outline.disabled:active, .btn-dark.btn-outline.disabled:focus, html.sticky-header-active .btn-sticky-dark.btn-outline:disabled, html.sticky-header-active .btn-sticky-dark.btn-outline:disabled:hover, html.sticky-header-active .btn-sticky-dark.btn-outline:disabled:active, html.sticky-header-active .btn-sticky-dark.btn-outline:disabled:focus, html.sticky-header-active .btn-sticky-dark.btn-outline.disabled, html.sticky-header-active .btn-sticky-dark.btn-outline.disabled:hover, html.sticky-header-active .btn-sticky-dark.btn-outline.disabled:active, html.sticky-header-active .btn-sticky-dark.btn-outline.disabled:focus { background: transparent !important; border-color: #1c1f21 !important; color: #1c1f21 !important; } /* Button Dots */ .btn-dots { font-size: 40px; font-size: 2.5rem; line-height: 0.2; padding-top: 0; padding-bottom: 19.2px; padding-bottom: 1.2rem; } /* Colorpicker Button */ .colorpicker-button-style-1 { padding: 11.2px 32px 11.2px 48px; padding: 0.7rem 2rem 0.7rem 3rem; margin-left: -22.4px; margin-left: -1.4rem; } /* Btn Pull Down */ .btn-pull-down { position: relative; top: 20px; } /* Badges */ .badge.badge-xs { padding: 0.3em 0.5em; } .badge.badge-sm { padding: 0.5em 0.8em; } .badge.badge-md { padding: 1em 1.6em; font-size: 85%; } .badge.badge-lg { padding: 1.5em 2em; font-size: 90%; } .badge.badge-xl { padding: 2em 2.5em; font-size: 100%; } /* Shop Badges */ .product-badge { position: absolute; top: 10px; left: 10px; text-align: center; z-index: 1; } .product-badge>span { font-size: 11.2px; font-size: 0.7rem; color: #FFF; font-weight: 600; text-transform: uppercase; padding: 1.6px 14.4px; padding: 0.1rem 0.9rem; border-radius: 4px; min-width: 57px; display: block; } .product-badge>span.discount { background-color: #2186EB; } .product-badge>span.hot { background-color: #F73B3B; } .product-badge+.product-badge { top: 40px; } /* Forms */ .form-control { border-color: #5BBFF6; font-size: 12.8px; font-size: 0.8rem; padding: 14.4px 12px; padding: 0.9rem .75rem; height: auto !important; border-radius: 0; } /* Form Control */ .form-control:not(.form-control-lg) { font-size: 12px; font-size: 0.75rem; line-height: 1.3; } .form-control:not(.form-control-sm):not(.form-control-lg) { font-size: 12.8px; font-size: 0.8rem; line-height: 1.3; } .form-control.form-control-focused { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; border-color: #e2e2e2; } .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border-color: #695093; } .form-control.error { border-color: rgba(181, 81, 79, 0.3); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .form-control.error:focus { border-color: rgba(181, 81, 79, 0.3); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; } /* Form Control Errors Light */ .form-errors-light .form-control.error { border-color: rgba(255, 255, 255, 0.3); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .form-errors-light .form-control.error:focus { border-color: rgba(255, 255, 255, 0.3); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(255, 255, 255, 0.3); } .form-errors-light label.error { color: #FFF; } /* Transparent Fields */ form.transparent-fields .form-control { background: transparent; border-bottom: 1px solid #353535; border-top: 0; border-left: 0; border-right: 0; border-radius: 0; color: #ababab; font-weight: 100; font-size: 14.4px; font-size: 0.9rem; } form.transparent-fields .form-control::-webkit-input-placeholder { color: #FFF; } form.transparent-fields .form-control::-moz-placeholder { color: #FFF; } form.transparent-fields .form-control:-ms-input-placeholder { color: #FFF; } form.transparent-fields .form-control:focus { border-bottom-color: #FFF; -webkit-box-shadow: none; box-shadow: none; } /* Form Style 2 */ form.form-style-2 .form-control { background-color: #f1f3f7; } /* Form Style 3 */ form.form-style-3 .form-control { background-color: rgba(255, 255, 255, 0.13); color: #FFF; } form.form-style-3 .form-control::-webkit-input-placeholder { color: #FFF; } form.form-style-3 .form-control::-moz-placeholder { color: #FFF; } form.form-style-3 .form-control:-ms-input-placeholder { color: #FFF; } form.form-style-3 .form-control.form-control-focused { border-color: rgba(226, 226, 226, 0.4); } form.form-style-3 .form-control:focus { border-color: rgba(226, 226, 226, 0.4); } /* Contact Form - Dark Style */ .contact-form-dark .form-control { background-color: #222527; color: #FFF; } .contact-form-dark .form-control.form-control-focused { border-color: rgba(226, 226, 226, 0.1); } .contact-form-dark .form-control:focus { border-color: rgba(226, 226, 226, 0.1); } /* Forms Validations */ label.valid { display: inline-block; text-indent: -9999px; } label.error { color: #c10000; font-size: 0.9em; line-height: 18px; padding: 5px 0 0; } label.error#captcha-error { margin-top: 15px; } /* Custom Checkbox */ .checkbox-custom { position: relative; padding: 0 0 0 25px; margin-bottom: 7px; margin-top: 0; } .checkbox-custom.form-check .form-check-input { margin-left: 0; } .checkbox-custom.form-check .form-check-label { padding-left: 0; } .checkbox-custom.checkbox-inline { display: inline-block; vertical-align: middle; } .form-group .checkbox-custom.checkbox-inline { margin-top: 7px; padding-top: 0; } .checkbox-custom:last-child, .checkbox-custom:last-of-type { margin-bottom: 0; } .checkbox-custom input[type="checkbox"] { opacity: 0; position: absolute; top: 50%; left: 3px; margin: -6px 0 0 0; z-index: 2; cursor: pointer; } .checkbox-custom input[type="checkbox"]:checked+label:after { position: absolute; display: inline-block; font-family: 'Font Awesome 5 Free'; content: '\F00C'; top: 50%; left: 4px; margin-top: -5px; font-size: 11px; font-weight: 900; line-height: 1; width: 16px; height: 16px; color: #333; } .checkbox-custom input[type="checkbox"]:disabled { cursor: not-allowed; } .checkbox-custom input[type="checkbox"]:disabled:checked+label:after { color: #999; } .checkbox-custom input[type="checkbox"]:disabled+label { cursor: not-allowed; } .checkbox-custom input[type="checkbox"]:disabled+label:before { background-color: #eee; } .checkbox-custom label { cursor: pointer; margin-bottom: 0; text-align: left; line-height: 1.5; } .checkbox-custom label:before { content: ''; position: absolute; top: 50%; left: 0; margin-top: -9px; width: 19px; height: 18px; display: inline-block; border-radius: 2px; border: 1px solid #dadada; background: #fff; } .checkbox-custom label+label.error { display: block; } .checkbox-custom.checkbox-custom-transparent label:before { background: transparent; } .checkbox-custom.checkbox-custom-transparent input[type="checkbox"]:checked+label:after { color: #FFF; } .checkbox-custom.checkbox-custom-transparent input[type="checkbox"]:disabled:checked+label:after { color: #999; } /* Custom Radio */ .radio-custom { position: relative; padding: 0 0 0 25px; margin-bottom: 7px; margin-top: 0; } .radio-custom.radio-inline { display: inline-block; vertical-align: middle; } .form-group .radio-custom.radio-inline { margin-top: 7px; padding-top: 0; } .radio-custom:last-child, .radio-custom:last-of-type { margin-bottom: 0; } .radio-custom input[type="radio"] { opacity: 0; position: absolute; top: 50%; left: 3px; margin: -6px 0 0 0; z-index: 2; cursor: pointer; } .radio-custom input[type="radio"]:checked+label:after { content: ''; position: absolute; top: 50%; left: 4px; margin-top: -5px; display: inline-block; font-size: 11px; line-height: 1; width: 10px; height: 10px; background-color: #444; border-radius: 50px; -webkit-box-shadow: 0px 0px 1px #444; box-shadow: 0px 0px 1px #444; } .radio-custom input[type="radio"]:disabled { cursor: not-allowed; } .radio-custom input[type="radio"]:disabled:checked+label:after { color: #999; } .radio-custom input[type="radio"]:disabled+label { cursor: not-allowed; } .radio-custom input[type="radio"]:disabled+label:before { background-color: #eee; } .radio-custom label { cursor: pointer; margin-bottom: 0; text-align: left; line-height: 1.2; } .radio-custom label:before { content: ''; position: absolute; top: 50%; left: 0; margin-top: -9px; width: 18px; height: 18px; display: inline-block; border-radius: 50px; border: 1px solid #bbb; background: #fff; } .radio-custom label+label.error { display: block; } /* Select */ .custom-select-1 { position: relative; } .custom-select-1:before { content: '\f107'; font-family: "Font Awesome 5 Free"; position: absolute; display: block; top: 11px; right: 18px; color: #b5b5b5; font-weight: 900; pointer-events: none; } .custom-select-1 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-select-1 select::-ms-expand { display: none; } /* Colorpicker */ .colorpicker-element .input-group-addon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 6px 12px; padding: .375rem .75rem; margin-bottom: 0; font-size: 16px; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; text-align: center; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 0 .25rem .25rem 0; border-left: 0; } .colorpicker-element .input-group-addon i { width: 22px; height: 22px; } .colorpicker-element .input-group-addon i.colorpicker-default-color { background-color: #2388ED; } .colorpicker-element .add-on i { width: 22px; height: 22px; } .colorpicker-element .form-control { border: 0; border-radius: 50px 0 0 50px; line-height: 1.6 !important; padding-left: 20.8px; padding-left: 1.3rem; padding-right: 20.8px; padding-right: 1.3rem; } .colorpicker-element .form-control.left-rounded { border-radius: 4px 0 0 4px; padding-left: 8px; padding-left: 0.5rem; padding-right: 8px; padding-right: 0.5rem; } @media (max-width: 576px) { .colorpicker-element .d-flex.align-items-stretch { display: block !important; } .colorpicker-element .colorpicker-button-style-1 { margin: 10px 0 0; } .colorpicker-element .input-group-addon { border-radius: 0 50px 50px 0 !important; } } @media (max-width: 576px) { .skin-color-picker .d-flex.align-items-stretch { display: block !important; } .skin-color-picker .align-self-sm-center { text-align: center; } .skin-color-picker .colorpicker-button-style-1 { margin: 10px 0 0; padding: 0.5rem 2.8rem 0.5rem 3rem; } .skin-color-picker .input-group-addon { border-radius: 0 50px 50px 0 !important; } } /* Tables */ .table-active { color: #fff; } .table-active>td, .table-active>th { color: #fff; } /* Table Dark */ .table-dark>td, .table-dark>th { background: transparent; } /* Icons */ [data-icon], .animated-icon { position: relative; opacity: 0; } .sample-icon { line-height: 40px; font-size: 11px; } .sample-icon .fa, .sample-icon .fas, .sample-icon .far, .sample-icon .fal, .sample-icon .fab, .sample-icon .sl, .sample-icon .lnr { display: inline-block; font-size: 14px; margin-right: 10px; text-align: center; width: 32px; color: #1c1f21; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; top: 1px; } .sample-icon:hover .fa, .sample-icon:hover .fas, .sample-icon:hover .far, .sample-icon:hover .fal, .sample-icon:hover .fab, .sample-icon:hover .sl, .sample-icon:hover .lnr { font-size: 28px; top: 5px; } .sample-icon .sl { font-size: 18px; top: 4px; } .sample-icon:hover .sl { font-size: 24px; } .sample-icon.sample-icon-sl { line-height: 50px; } .sample-icon .lnr { font-size: 18px; top: 4px; } .sample-icon:hover .lnr { font-size: 24px; } .sample-icon.sample-icon-lnr { line-height: 50px; } /* Image */ .object-fit-cover { -o-object-fit: cover; object-fit: cover; } .img-thumbnail-small { max-width: 25px; } .img-thumbnail-medium { max-width: 80px; } .img-thumbnail-big { max-width: 125px; } /* Image Frames */ .image-frame { position: relative; display: block; text-decoration: none; max-width: 100%; z-index: 0; /* Image Frames Styles */ } .image-frame img { position: relative; z-index: 1; } .image-frame .image-frame-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; overflow: hidden; } .image-frame .image-frame-wrapper>img { -webkit-transition: ease transform 300ms; transition: ease transform 300ms; } .image-frame .image-frame-wrapper .image-frame-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; } .image-frame .image-frame-wrapper .image-frame-inner-border { position: absolute; top: 13px; right: 13px; bottom: 13px; left: 13px; border: solid rgba(255, 255, 255, 0.1); border-width: 0; z-index: 2; -webkit-transition: ease border-width 300ms 200ms; transition: ease border-width 300ms 200ms; } .image-frame .image-frame-wrapper .image-frame-action { position: absolute; opacity: 0; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: ease opacity 300ms 100ms; transition: ease opacity 300ms 100ms; } .image-frame .image-frame-wrapper .image-frame-action .image-frame-action-icon { display: block; color: #FFF; font-size: 1.2307692308em; line-height: 2.9230769231em; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 100%; width: 2.9230769231em; height: 2.9230769231em; text-align: center; margin: 3.2px; margin: 0.2rem; } .image-frame .image-frame-wrapper .image-frame-action.image-frame-action-absolute-center { top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .image-frame .image-frame-wrapper .image-frame-action.image-frame-action-style-2 .image-frame-action-icon { border: 0; background: rgba(28, 31, 33, 0.95); border-radius: 0; } .image-frame .image-frame-wrapper .image-frame-action.image-frame-action-effect-1 .image-frame-action-icon { -webkit-transition: ease transform 200ms; transition: ease transform 200ms; } .image-frame .image-frame-wrapper .image-frame-action.image-frame-action-effect-1 .image-frame-action-icon:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .image-frame .image-frame-wrapper .image-frame-action.image-frame-action-sm .image-frame-action-icon { font-size: 0.9230769231em; } .image-frame .image-frame-wrapper .image-frame-action.image-frame-action-md .image-frame-action-icon { font-size: 1.0769230769em; } .image-frame .image-frame-wrapper .image-frame-info { position: absolute; width: 100%; z-index: 4; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; -webkit-transition: ease opacity 300ms 100ms; transition: ease opacity 300ms 100ms; } .image-frame .image-frame-wrapper .image-frame-info.image-frame-info-show { opacity: 1; } .image-frame .image-frame-wrapper .image-frame-info-box-style-1 { background: #FFF; padding: 10px 20px; text-align: center; display: block; font-family: "Source Sans Pro", regular; } .image-frame .image-frame-wrapper .image-frame-info-box-style-2 { max-width: 70%; margin: 0 auto; -ms-flex-item-align: end; align-self: flex-end; margin-bottom: 24px; margin-bottom: 1.5rem; } .image-frame .image-frame-wrapper .image-frame-info-box-style-2 .image-frame-info-box-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; } .image-frame .image-frame-wrapper .image-frame-info-box-style-2 .image-frame-info-box-title>span { position: relative; font-size: 56px; font-size: 3.5rem; -ms-flex-item-align: end; align-self: flex-end; left: -4px; top: -4px; } .image-frame .image-frame-wrapper .image-frame-info-box-style-2 .image-frame-info-box-title>span:after { content: ''; position: absolute; display: block; bottom: 0; left: 0; right: 0; top: 65%; background: #FFF; } .image-frame .image-frame-wrapper .image-frame-info-box-style-2>p { padding: 32px 41.6px 32px; padding: 2rem 2.6rem 2rem; margin-top: -35.2px; margin-top: -2.2rem; } @media (min-width: 992px) and (max-width: 1300px) { .image-frame .image-frame-wrapper .image-frame-info-box-style-2 { max-width: 95%; } } @media (max-width: 1199px) { .image-frame .image-frame-wrapper .image-frame-info-box-style-2>p { padding: 2rem 0.8rem 1rem; } } .image-frame .image-frame-wrapper .image-frame-bottom-bar { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; left: 0; bottom: 0; background: #2E3237; z-index: 2; -webkit-transition: ease transform 300ms; transition: ease transform 300ms; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .image-frame .image-frame-wrapper .image-frame-bottom-bar .image-frame-bottom-bar-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; opacity: 0; -webkit-transition: ease opacity 300ms 300ms; transition: ease opacity 300ms 300ms; } .image-frame .image-frame-wrapper .image-frame-bottom-bar .image-frame-bottom-bar-action { display: block; color: #FFF; font-size: 1.2307692308em; line-height: 2.4615384615em; border: 1px solid rgba(72, 72, 72, 0.85); border-radius: 100%; width: 2.4615384615em; height: 2.4615384615em; text-align: center; margin: 3.2px; margin: 0.2rem; opacity: 0; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: ease opacity 300ms 300ms, ease transform 300ms; transition: ease opacity 300ms 300ms, ease transform 300ms; } .image-frame .image-frame-wrapper .image-frame-bottom-bar .image-frame-bottom-bar-action:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .image-frame .image-frame-wrapper .image-frame-bottom-bar.image-frame-bottom-bar-style-2 { background: -webkit-gradient(linear, left bottom, left top, from(#2E3237), to(rgba(241, 243, 247, 0))); background: linear-gradient(to top, #2E3237, rgba(241, 243, 247, 0)); } .image-frame:hover .image-frame-info { opacity: 1; } .image-frame:hover .image-frame-bottom-bar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .image-frame:hover .image-frame-bottom-bar .image-frame-bottom-bar-info, .image-frame:hover .image-frame-bottom-bar .image-frame-bottom-bar-action { opacity: 1; } .image-frame.image-frame-border { border: 1px solid rgba(28, 31, 33, 0.1); } .image-frame.image-frame-style-1 { background-color: #FFF; } .image-frame.image-frame-style-1 .image-frame-wrapper:after { content: ""; position: absolute; display: block; background: rgba(28, 31, 33, 0.8); -webkit-transition: opacity 300ms; transition: opacity 300ms; bottom: -4px; color: #FFF; left: -4px; right: -4px; top: -4px; opacity: 0; pointer-events: none; z-index: 1; } .image-frame.image-frame-style-1 .image-frame-wrapper.image-frame-wrapper-overlay-bottom:after { top: auto; height: 30%; } .image-frame.image-frame-style-1 .image-frame-wrapper.image-frame-wrapper-overlay-light:after { background: rgba(255, 255, 255, 0.8); } .image-frame.image-frame-style-1 .image-frame-wrapper.image-frame-wrapper-justify-left { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .image-frame.image-frame-style-1 .image-frame-wrapper.image-frame-wrapper-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .image-frame.image-frame-style-1 .image-frame-wrapper.image-frame-wrapper-align-end .image-frame-action { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; height: 30%; margin-bottom: -4px; } .image-frame.image-frame-style-1.image-frame-effect-1:hover .image-frame-wrapper:after { opacity: 1; } .image-frame.image-frame-style-1.image-frame-effect-1:hover .image-frame-wrapper>img { -webkit-transform: scale(1.1); transform: scale(1.1); } .image-frame.image-frame-style-1.image-frame-effect-1:hover .image-frame-wrapper .image-frame-inner-border { border-width: 10px; -webkit-transition: ease border-width 300ms 200ms; transition: ease border-width 300ms 200ms; } .image-frame.image-frame-style-1.image-frame-effect-1:hover .image-frame-wrapper .image-frame-action { opacity: 1; } .image-frame.image-frame-style-1.image-frame-effect-2 .image-frame-wrapper:after { -webkit-transition: ease all 100ms; transition: ease all 100ms; -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } .image-frame.image-frame-style-1.image-frame-effect-2 .image-frame-wrapper .image-frame-action { opacity: 0; -webkit-transition: ease all 300ms; transition: ease all 300ms; -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } .image-frame.image-frame-style-1.image-frame-effect-2:hover .image-frame-wrapper:after { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .image-frame.image-frame-style-1.image-frame-effect-2:hover .image-frame-wrapper .image-frame-action { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .image-frame.image-frame-style-2:after, .image-frame.image-frame-style-3:after, .image-frame.image-frame-style-4:after { content: ' '; position: absolute; top: 13px; right: 13px; bottom: 13px; left: 13px; border: 5px solid #FFF; z-index: 3; } .image-frame.image-frame-style-3 { overflow: hidden; } .image-frame.image-frame-style-3:after { bottom: -15px; } .image-frame.image-frame-style-3 .image-frame-wrapper .image-frame-info { padding-top: 15px; } .image-frame.image-frame-style-4 { overflow: hidden; } .image-frame.image-frame-style-4:after { top: -15px; } .image-frame.image-frame-style-4 .image-frame-wrapper .image-frame-info { padding-bottom: 15px; } .image-frame.image-frame-style-5 { -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07); box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07); } .image-frame.image-frame-style-5.image-frame-effect-1:hover .image-frame-wrapper:after { opacity: 1; } .image-frame.image-frame-style-5.image-frame-effect-1:hover .image-frame-wrapper>img { -webkit-transform: scale(1.1); transform: scale(1.1); } .image-frame.image-frame-style-5.image-frame-effect-1:hover .image-frame-wrapper .image-frame-inner-border { border-width: 10px; -webkit-transition: ease border-width 300ms 200ms; transition: ease border-width 300ms 200ms; } .image-frame.image-frame-style-5.image-frame-effect-1:hover .image-frame-wrapper .image-frame-action { opacity: 1; } .image-frame.image-frame-style-6 img { position: relative; z-index: 2; border: 4px solid #FFF; } .image-frame.image-frame-style-6:before { background: #252a2c none repeat scroll 0 0; border-radius: 50%; bottom: -5px; content: " "; -webkit-filter: blur(2px); filter: blur(2px); height: 10px; left: -10px; opacity: 0.1; position: absolute; right: -10px; z-index: 1; } .image-frame.image-frame-style-7 { padding: 4px; border: 5px solid #777; border-radius: 50%; } .image-frame.image-frame-style-8 .image-frame-action-bottom { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: ease transform 300ms; transition: ease transform 300ms; } .image-frame.image-frame-style-8:hover .image-frame-action, .image-frame.image-frame-style-8.show .image-frame-action { opacity: 1; } .image-frame.image-frame-style-8:hover .image-frame-action-bottom, .image-frame.image-frame-style-8.show .image-frame-action-bottom { -webkit-transform: none; transform: none; } /* Hover Effect 3d */ .hover-effect-3d .image-frame-style-1 { will-change: box-shadow; -webkit-transition: -webkit-box-shadow 300ms; transition: -webkit-box-shadow 300ms; transition: box-shadow 300ms; transition: box-shadow 300ms, -webkit-box-shadow 300ms; } .hover-effect-3d .image-frame-style-1:hover { -webkit-box-shadow: 0px 17px 20px -15px rgba(28, 31, 33, 0.6); box-shadow: 0px 17px 20px -15px rgba(28, 31, 33, 0.6); } .hover-effect-3d .image-frame-style-1 .image-frame-action .image-frame-action-icon { pointer-events: none; } /* IE */ html.ie { /* Image Frames */ /* Image Frame Inside Carousel */ } html.ie .image-frame { -ms-flex-negative: 0; flex-shrink: 0; } html.ie .image-frame .image-frame-wrapper img, html.ie .image-frame .image-frame-wrapper a>img { width: 100%; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: 100%; flex-basis: 100%; } html.ie .image-frame .image-frame-wrapper .image-frame-info { position: relative; left: -100%; -ms-flex-negative: 0; flex-shrink: 0; } html.ie .image-frame .image-frame-wrapper .image-frame-info-box-style-2 { margin: 0; } html.ie .image-frame .image-frame-wrapper .image-frame-action { position: relative; left: -100%; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } html.ie .image-frame .image-frame-wrapper .image-frame-background+.image-frame-info, html.ie .image-frame .image-frame-wrapper .image-frame-background+.image-frame-inner-border+.image-frame-action { left: 0; } html.ie .image-frame.image-frame-style-1 .image-frame-wrapper.image-frame-wrapper-align-end .image-frame-action { height: 30%; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } html.ie .image-frame.image-frame-effect-2 .image-frame-wrapper .image-frame-action:not(.image-frame-action-style-2) { position: absolute; left: 0; bottom: 0; } html.ie .owl-carousel .image-frame .image-frame-wrapper img, html.ie .owl-carousel .image-frame .image-frame-wrapper a>img { z-index: -1; } /* Input Group Styles */ .input-group.input-group-style-1 .form-control { background: transparent; border-width: 2px; border-color: #FFF; border-style: solid; color: #FFF; } .input-group.input-group-style-1 .form-control::-webkit-input-placeholder { color: #e2e2e2; } .input-group.input-group-style-1 .form-control::-moz-placeholder { color: #e2e2e2; } .input-group.input-group-style-1 .form-control:-ms-input-placeholder { color: #e2e2e2; } .input-group.input-group-style-1 .form-control:hover, .input-group.input-group-style-1 .form-control:focus { z-index: 2; } .input-group.input-group-style-1 .form-control:not(:last-child) { border-radius: 50px 0 0 50px; padding-right: 65px; padding-left: 20px; } .input-group.input-group-style-1 .form-control:not(:first-child) { border-radius: 0 50px 50px 0; padding-left: 65px; padding-right: 20px; } .input-group.input-group-style-1 .input-group-btn { z-index: 2; } .input-group.input-group-style-1 .input-group-btn .btn { height: 100%; } .input-group.input-group-style-1 .input-group-btn:not(:last-child) .btn { border-radius: 50px !important; margin-right: -50px; border-width: 2px; border-color: #FFF; border-style: solid; z-index: 3; } .input-group.input-group-style-1 .input-group-btn:not(:first-child) .btn { border-radius: 50px !important; margin-left: -50px; border-width: 2px; border-color: #FFF; border-style: solid; } .input-group.input-group-style-2 { position: relative; } .input-group.input-group-style-2 .form-control { padding-right: 45px; } .input-group.input-group-style-2 .input-group-btn { position: absolute; top: 0; right: 0; height: 100%; z-index: 3; } .input-group.input-group-style-2 .input-group-btn button, .input-group.input-group-style-2 .input-group-btn input { height: 100%; background: transparent !important; border: none; border-radius: 0; } .input-group.input-group-style-2 .input-group-btn button:focus, .input-group.input-group-style-2 .input-group-btn button:active, .input-group.input-group-style-2 .input-group-btn input:focus, .input-group.input-group-style-2 .input-group-btn input:active { background: #e0e0e0 !important; } .input-group.input-group-style-3 { position: relative; } .input-group.input-group-style-3 .form-control { padding-right: 155px; } .input-group.input-group-style-3 .input-group-btn { position: absolute; top: 0; right: 0; width: 100%; max-width: 150px; height: 100%; background: transparent !important; z-index: 3; } .input-group.input-group-style-3 .input-group-btn button, .input-group.input-group-style-3 .input-group-btn input { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; height: 100%; border: none; } .input-group-btn:not(:first-child)>.btn-group:first-child, .input-group-btn:not(:first-child)>.btn:first-child { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* List */ .list li>a+.list { padding-left: 44.8px; padding-left: 2.8rem; } .list li>span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 3.2px; margin-right: 0.2rem; } .list:not(.list-unstyled) li:not(.list-group-item) { margin-bottom: 0.25em; } .list:not(.list-unstyled) ul { margin-top: 0.25em; margin-bottom: 0.5em; } .list:not(.list-unstyled).list-style-1 { list-style: outside none none; padding-left: 0; } .list:not(.list-unstyled).list-style-1 li { margin-bottom: 8px; margin-bottom: 0.5rem; padding-left: 22px; position: relative; } .list:not(.list-unstyled).list-style-1 li:before { content: ' '; display: block; width: 12px; height: 1px; border-bottom: 1px solid #707070; position: absolute; top: 50%; left: 0; margin-top: 1px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .list:not(.list-unstyled).list-light li { color: #e2e2e2; } .list:not(.list-unstyled).list-light li:before { border-color: #e2e2e2; } /* List Icon */ .list-icon li { position: relative; padding-left: 20.8px; padding-left: 1.3rem; } .list-icon li>i { position: absolute; left: 0; top: 7px; } /* List Icons Size */ .list.list-icons-size-1 li>i { font-size: 16px; font-size: 1rem; } .list.list-icons-size-2 li>i { font-size: 20px; font-size: 1.25rem; } .list.list-icons-size-3 li>i { font-size: 24px; font-size: 1.50rem; } .list.list-icons-size-4 li>i { font-size: 28px; font-size: 1.75rem; } .list.list-icons-size-5 li>i { font-size: 32px; font-size: 2rem; } /* List Borders */ .list.list-borders li { border-bottom: 1px solid #DBDBDB; margin-top: 9px; margin-bottom: 0; padding-bottom: 9px; } .list.list-borders li:last-child { border-bottom: 0; } /* List Filter */ .list.list-filter li { margin-bottom: 10px !important; } .list.list-filter li a { border: 1px solid #dadada; padding: 4.8px 6.4px; padding: 0.3rem 0.4rem; min-width: 40px; display: inline-block; text-align: center; } .list.list-filter li a:hover { border-color: #CCC; } .list.list-filter li a.active { color: #FFF !important; background-color: #CCC; border-color: #CCC; } /* Accordion */ .accordion .card { margin-bottom: 8px; margin-bottom: 0.5rem; border: 0; } .accordion .card .card-body { padding: 17.6px 1.6px; padding: 1.1rem 0.1rem; } .accordion .accordion-header { -webkit-transition: background 0.3s; transition: background 0.3s; background-color: #f1f3f7; border-radius: 5px; border: 0; padding: 0; } .accordion .accordion-header a { position: relative; display: inline-block; width: 100%; padding: 16px 40px; padding: 1rem 2.5rem; font-size: 16px; border-radius: 5px; } .accordion .accordion-header a, .accordion .accordion-header a:hover, .accordion .accordion-header a:focus { color: #1c1f21; } .accordion .accordion-header a:before { content: " "; position: absolute; top: 50%; left: 20px; border-color: #CCC; border-top: 1px solid; border-right: 1px solid; width: 10px; height: 10px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: top 0.3s, -webkit-transform 0.3s; transition: top 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, top 0.3s; transition: transform 0.3s, top 0.3s, -webkit-transform 0.3s; -webkit-transform: rotate(-45deg) translate3d(0, -50%, 0); transform: rotate(-45deg) translate3d(0, -50%, 0); -webkit-transform-origin: 50%; transform-origin: 50%; } .accordion .accordion-header a.collapsed:before { top: calc(50% - 8px); left: 16px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .accordion.accordion-minimal .card { margin-bottom: 0; } .accordion.accordion-minimal .accordion-header { border-radius: 0; border-bottom: 1px solid #e1e1e1; background: transparent; } .accordion.accordion-minimal .accordion-header a { margin-left: 0; } .accordion:not(.accordion-minimal):not(.accordion-style-1):not(.accordion-style-2) .accordion-header a.collapsed { background-color: #f1f3f7 !important; } .accordion:not(.accordion-minimal):not(.accordion-style-1):not(.accordion-style-2) .accordion-header a.collapsed, .accordion:not(.accordion-minimal):not(.accordion-style-1):not(.accordion-style-2) .accordion-header a.collapsed:hover, .accordion:not(.accordion-minimal):not(.accordion-style-1):not(.accordion-style-2) .accordion-header a.collapsed:focus { color: #1c1f21 !important; } /* Toggle */ .accordion-toggle .accordion-header a:before { content: '+'; top: calc(50% - 13px); left: 16px; font-weight: 300; border: none; width: auto; height: auto; font-size: 25.6px; font-size: 1.6rem; line-height: 25.6px; line-height: 1.6rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .accordion-toggle .accordion-header a.collapsed:before { top: calc(50% - 13px); -webkit-transform: rotate(90deg); transform: rotate(90deg); } /* Sizes */ .accordion.accordion-sm .accordion-header a { padding: 11.2px 35.2px; padding: 0.7rem 2.2rem; font-size: 0.8em; } .accordion.accordion-sm .accordion-header a:before { width: 8px; height: 8px; margin-top: 2px; } .accordion.accordion-lg .accordion-header a { padding: 20.8px 41.6px; padding: 1.3rem 2.6rem; font-size: 1em; } /* Accordion Colors */ .accordion:not(.accordion-minimal).accordion-dark .accordion-header a { background-color: #1c1f21; } .accordion:not(.accordion-minimal).accordion-dark .accordion-header a, .accordion:not(.accordion-minimal).accordion-dark .accordion-header a:hover, .accordion:not(.accordion-minimal).accordion-dark .accordion-header a:focus { color: #FFF; } /* Styles */ .accordion.accordion-style-1 .card { margin-bottom: 0; } .accordion.accordion-style-1 .card+.card .accordion-header a { border-top-width: 0; } .accordion.accordion-style-1 .accordion-header { background-color: transparent; } .accordion.accordion-style-1 .accordion-header a { padding: 28.8px 24px; padding: 1.8rem 1.5rem; font-weight: 600; border-width: 1px; border-style: solid; border-color: #DAE2E6; border-bottom-width: 0; border-radius: 0; } .accordion.accordion-style-1 .accordion-header a:before { content: " "; position: absolute; top: calc(50% - 4px); right: 30px; left: auto; border-color: #CCC; border-top: 1px solid; border-right: 1px solid; width: 7px; height: 7px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .accordion.accordion-style-1 .accordion-header a.collapsed { background-color: transparent !important; border-bottom-width: 1px; -webkit-transition: ease border-bottom-width 100ms 350ms; transition: ease border-bottom-width 100ms 350ms; } .accordion.accordion-style-1 .accordion-header a.collapsed:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .accordion.accordion-style-1 .accordion-header.accordion-header-shrink a { padding: 19.2px 24px; padding: 1.2rem 1.5rem; } .accordion.accordion-style-1 .accordion-body { border-width: 1px; border-style: solid; border-color: #DAE2E6; border-top-width: 0; border-radius: 0; } .accordion.accordion-style-1 .accordion-body .card-body { padding: 0 24px 22.4px; padding: 0 1.5rem 1.4rem; } .accordion.accordion-style-1 .accordion-body.accordion-body-show-border-top { border-top-width: 1px; } .accordion.accordion-style-1.accordion-style-1-no-borders .accordion-header a { border: none; } .accordion.accordion-style-1.accordion-style-1-no-borders .accordion-body { border: none; } .accordion.accordion-style-1.accordion-style-1-no-borders-divider .accordion-header a { border: none; padding: 20.8px 0; padding: 1.3rem 0; } .accordion.accordion-style-1.accordion-style-1-no-borders-divider .accordion-header a:before { right: 10px; } .accordion.accordion-style-1.accordion-style-1-no-borders-divider .accordion-body { border: none; } .accordion.accordion-style-1.accordion-style-1-no-borders-divider .card-body { padding-right: 0 !important; padding-left: 0 !important; } .accordion.accordion-style-1.accordion-style-1-no-borders-divider .card+.card .accordion-header { border-top: 1px solid #DAE2E6; } .accordion.accordion-style-1.accordion-style-1-no-expand .accordion-header a { pointer-events: none; } .accordion.accordion-style-1.accordion-style-1-no-expand .accordion-header a:before { content: none; } .accordion.accordion-style-2 .card { margin-bottom: 0; padding: 32px 0; padding: 2rem 0; } .accordion.accordion-style-2 .card+.card { border-top: 1px solid #E2E2E2; } .accordion.accordion-style-2 .accordion-header { background: transparent; } .accordion.accordion-style-2 .accordion-header a, .accordion.accordion-style-2 .accordion-header a:hover, .accordion.accordion-style-2 .accordion-header a:focus { color: #FFF; } .accordion.accordion-style-2 .accordion-header a { width: 200px; height: 40px; -webkit-transition: ease all 300ms; transition: ease all 300ms; } .accordion.accordion-style-2 .accordion-header a.btn-rounded { border-radius: 50px; } .accordion.accordion-style-2 .accordion-header a:before { content: none; } .accordion.accordion-style-2 .accordion-header a .title { -webkit-transition: ease opacity 300ms 300ms; transition: ease opacity 300ms 300ms; } .accordion.accordion-style-2 .accordion-header a>i { opacity: 0; visibility: hidden; -webkit-transition: ease opacity 300ms 300ms; transition: ease opacity 300ms 300ms; } .accordion.accordion-style-2 .accordion-header a:not(.collapsed) { position: relative; width: 40px; height: 40px; padding: 0 !important; background-color: #E6E6E6; border-color: #E6E6E6; color: #B9B9B9; } .accordion.accordion-style-2 .accordion-header a:not(.collapsed) .title { opacity: 0; visibility: hidden; } .accordion.accordion-style-2 .accordion-header a:not(.collapsed)>i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); font-size: 20.8px; font-size: 1.3rem; opacity: 1; visibility: visible; } /* IE */ html.ie .accordion .accordion-body { height: 100%; } /* Tabs */ .nav-tabs { border-bottom: 1px solid #e1e1e1; } .nav-tabs .nav-item .nav-link { border: 0; background: transparent; padding: 20.8px; padding: 1.3rem; font-size: 1.1em; position: relative; overflow: hidden; font-family: "Source Sans Pro", regular; border-radius: 0; } .nav-tabs .nav-item .nav-link:after { height: 4px; width: 100%; content: ' '; background-color: #000; display: block; position: absolute; bottom: -4px; left: 0; z-index: 10; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .nav-tabs .nav-item .nav-link.active { color: #1c1f21; } .nav-tabs .nav-item .nav-link.active:after { -webkit-transform: translateY(-3px); transform: translateY(-3px); } .nav-tabs.nav-tabs-centered { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .nav-tabs.nav-tabs-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .nav-tabs.nav-tabs-minimal { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: 0; } .nav-tabs.nav-tabs-vertical { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: 0; border-right: 1px solid #e1e1e1; } .nav-tabs.nav-tabs-vertical .nav-item .nav-link { padding-left: 0; } .nav-tabs.nav-tabs-vertical .nav-item .nav-link:after { height: 100%; width: 4px; left: auto; right: -4px; bottom: 0; } .nav-tabs.nav-tabs-vertical .nav-item .nav-link.active:after { -webkit-transform: translateX(-3px); transform: translateX(-3px); } /* Carousel */ .owl-carousel { /* Rounded Style 1 */ /* Owl Dots Styles */ /* Owl Nav Styles */ /* Nav Colors */ /* Nav Size */ } .owl-carousel.stage-py-1 .owl-stage-outer { padding-top: 32px; padding-top: 2rem; padding-bottom: 32px; padding-bottom: 2rem; } .owl-carousel .owl-item { -ms-touch-action: auto !important; touch-action: auto !important; } .owl-carousel .owl-nav { top: 50%; position: absolute; margin-top: -23px; width: 100%; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next { display: inline-block; position: absolute; width: 30px; height: 30px; outline: none; } .owl-carousel .owl-nav .owl-prev { left: -5px; } .owl-carousel .owl-nav .owl-prev:before { font-family: 'Font Awesome 5 Free'; content: "\f053"; position: relative; left: -1px; top: 1px; font-weight: 900; } .owl-carousel .owl-nav .owl-next { right: -5px; } .owl-carousel .owl-nav .owl-next:before { font-family: 'Font Awesome 5 Free'; content: "\f054"; position: relative; left: 2px; top: 1px; font-weight: 900; } .owl-carousel .owl-nav.disabled+.owl-dots { margin-top: 16px; margin-top: 1rem; } .owl-carousel .owl-prev, .owl-carousel .owl-next { outline: none; } .owl-carousel .owl-dots { margin-top: 32px; margin-top: 2rem; } .owl-carousel .owl-dots .owl-dot { outline: none; } .owl-carousel.rounded-style-1 .owl-stage-outer { border-radius: 100%; } .owl-carousel.rounded-style-1 .owl-stage-outer:before { content: ''; display: block; pointer-events: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 4px solid; border-color: #CCC; border-radius: 100%; z-index: 1; } .owl-carousel.rounded-style-1 .owl-stage-outer:after { content: ''; display: block; pointer-events: none; position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px; border: 6px solid; border-color: #FFF; border-radius: 100%; z-index: 1; } .owl-carousel.dots-style-1 { margin-bottom: 30px; } .owl-carousel.dots-style-1 .owl-dots .owl-dot span { width: 7px; height: 7px; margin: 4px 4px; -webkit-transition: ease background 300ms 100ms; transition: ease background 300ms 100ms; } .owl-carousel.dots-style-1 .owl-dots .owl-dot.active span { background: #CCC; -webkit-transition: ease background 300ms; transition: ease background 300ms; } .owl-carousel.dots-style-2 .owl-dots { position: absolute; bottom: 7px; right: 10px; } .owl-carousel.dots-style-2 .owl-dots .owl-dot span { width: 7px; height: 7px; margin: 4px 4px; } .owl-carousel.dots-style-2 .owl-dots .owl-dot.active span { background: #CCC; } .owl-carousel.dots-style-2.dots-style-2-left .owl-dots { right: auto; left: 10px; } .owl-carousel.dots-style-2.dots-style-2-center .owl-dots { right: auto; left: auto; width: 100%; } .owl-carousel.dots-style-2.dots-style-2-center-more-up .owl-dots { bottom: 30px; right: auto; left: auto; width: 100%; } .owl-carousel.dots-style-3 { margin-bottom: 30px; } .owl-carousel.dots-style-3 .owl-dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .owl-carousel.dots-style-3 .owl-dots .owl-dot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .owl-carousel.dots-style-3 .owl-dots .owl-dot span { width: 4px; height: 4px; -webkit-transition: ease all 300ms 300ms; transition: ease all 300ms 300ms; } .owl-carousel.dots-style-3 .owl-dots .owl-dot.active span { background: #CCC; -webkit-transition: ease all 300ms; transition: ease all 300ms; -webkit-transform: scale(2); transform: scale(2); } .owl-carousel.nav-style-1 { padding-bottom: 30px; } .owl-carousel.nav-style-1 .owl-nav { left: 50%; margin-top: 0; position: absolute; top: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 65px; } .owl-carousel.nav-style-1 .owl-nav .owl-prev, .owl-carousel.nav-style-1 .owl-nav .owl-next { background: transparent; color: #CCC; font-size: 22.4px; font-size: 1.4rem; } .owl-carousel.nav-style-1 .owl-nav .owl-prev:before { content: '\f104'; } .owl-carousel.nav-style-1 .owl-nav .owl-next:before { content: '\f105'; } .owl-carousel.nav-style-2 .owl-nav .owl-prev, .owl-carousel.nav-style-2 .owl-nav .owl-next { background: transparent; color: #CCC; font-size: 22.4px; font-size: 1.4rem; } .owl-carousel.nav-style-2 .owl-nav .owl-prev { left: 0; } .owl-carousel.nav-style-2 .owl-nav .owl-prev:before { content: '\f104'; } .owl-carousel.nav-style-2 .owl-nav .owl-next { right: 0; } .owl-carousel.nav-style-2 .owl-nav .owl-next:before { content: '\f105'; } .owl-carousel.nav-style-3 .owl-nav .owl-prev, .owl-carousel.nav-style-3 .owl-nav .owl-next { background: transparent; color: #CCC; font-size: 28.8px; font-size: 1.8rem; } .owl-carousel.nav-style-3 .owl-nav .owl-prev { left: -45px; } .owl-carousel.nav-style-3 .owl-nav .owl-prev:before { content: '\f104'; } .owl-carousel.nav-style-3 .owl-nav .owl-next { right: -45px; } .owl-carousel.nav-style-3 .owl-nav .owl-next:before { content: '\f105'; } .owl-carousel.nav-style-4 .owl-nav { opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; margin-top: -20px; } .owl-carousel.nav-style-4 .owl-nav .owl-prev, .owl-carousel.nav-style-4 .owl-nav .owl-next { background: rgba(255, 255, 255, 0.6); border-radius: 100%; color: #666 !important; font-size: 22.4px; font-size: 1.4rem; line-height: 17px; } .owl-carousel.nav-style-4 .owl-nav .owl-prev { left: 3px; } .owl-carousel.nav-style-4 .owl-nav .owl-prev:before { content: '\f104'; } .owl-carousel.nav-style-4 .owl-nav .owl-next { right: 3px; } .owl-carousel.nav-style-4 .owl-nav .owl-next:before { content: '\f105'; } .owl-carousel.nav-style-4:hover .owl-nav { opacity: 1; } .owl-carousel.nav-style-5 .owl-nav { top: 0; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; margin-top: 0; height: 100%; pointer-events: none; } .owl-carousel.nav-style-5 .owl-nav .owl-prev, .owl-carousel.nav-style-5 .owl-nav .owl-next { background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0; border-radius: 0; font-size: 22.4px; font-size: 1.4rem; height: 100%; line-height: 17px; margin: 0; color: #666 !important; width: 35px; pointer-events: auto; } .owl-carousel.nav-style-5 .owl-nav .owl-prev { left: 0; } .owl-carousel.nav-style-5 .owl-nav .owl-prev:before { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); content: '\f104'; } .owl-carousel.nav-style-5 .owl-nav .owl-next { right: 0; } .owl-carousel.nav-style-5 .owl-nav .owl-next:before { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); content: '\f105'; } .owl-carousel.nav-style-5:hover .owl-nav { opacity: 1; } .owl-carousel.nav-style-6 .owl-nav .owl-next, .owl-carousel.nav-style-6 .owl-nav .owl-prev { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 65px; height: 65px; background: transparent; } .owl-carousel.nav-style-6 .owl-nav .owl-next:before { content: ''; display: block; width: 20px; height: 20px; border-top: 1px solid #FFF; border-right: 1px solid #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .owl-carousel.nav-style-6 .owl-nav .owl-next:after { content: ''; display: block; position: absolute; width: 35px; right: 19px; border-top: 1px solid #FFF; } .owl-carousel.nav-style-6 .owl-nav .owl-prev:before { content: ''; display: block; width: 20px; height: 20px; border-top: 1px solid #FFF; border-left: 1px solid #FFF; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .owl-carousel.nav-style-6 .owl-nav .owl-prev:after { content: ''; display: block; position: absolute; width: 35px; left: 19px; border-top: 1px solid #FFF; } .owl-carousel.nav-style-7 .owl-nav .owl-prev, .owl-carousel.nav-style-7 .owl-nav .owl-next { background: transparent; color: #CCC; font-size: 22.4px; font-size: 1.4rem; } .owl-carousel.nav-style-7 .owl-nav .owl-prev { left: 15px; } .owl-carousel.nav-style-7 .owl-nav .owl-prev:before { content: '\f104'; } .owl-carousel.nav-style-7 .owl-nav .owl-next { right: 15px; } .owl-carousel.nav-style-7 .owl-nav .owl-next:before { content: '\f105'; } .owl-carousel.nav-color-light .owl-nav .owl-prev, .owl-carousel.nav-color-light .owl-nav .owl-next { color: #FFF !important; } .owl-carousel.nav-color-light.nav-style-5 .owl-nav .owl-prev, .owl-carousel.nav-color-light.nav-style-5 .owl-nav .owl-next { background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0; color: #1c1f21 !important; } .owl-carousel.nav-color-dark .owl-nav .owl-prev, .owl-carousel.nav-color-dark .owl-nav .owl-next { color: #1c1f21 !important; } .owl-carousel.nav-color-dark.nav-style-5 .owl-nav .owl-prev, .owl-carousel.nav-color-dark.nav-style-5 .owl-nav .owl-next { background: rgba(28, 31, 33, 0.6) none repeat scroll 0 0; color: #FFF !important; } .owl-carousel.nav-size-1 .owl-nav .owl-prev, .owl-carousel.nav-size-1 .owl-nav .owl-next { font-size: 27.2px; font-size: 1.7rem; } .owl-carousel.nav-size-2 .owl-nav .owl-prev, .owl-carousel.nav-size-2 .owl-nav .owl-next { font-size: 32px; font-size: 2rem; } /* Responsive Nav Syles */ @media (max-width: 575px) { .owl-carousel.nav-style-3 { margin-right: auto; margin-left: auto; } } /* Carousel Horizontal Degrade */ .owl-carousel.carousel-horizontal-degrade:after { content: ' '; display: block; width: 30%; height: 100%; background: -webkit-gradient(linear, left top, right top, from(rgba(241, 243, 247, 0)), to(#f1f3f7)); background: linear-gradient(to right, rgba(241, 243, 247, 0), #f1f3f7); position: absolute; top: 0; right: 0; z-index: 10; pointer-events: none; } .owl-carousel.carousel-horizontal-degrade:before { content: ' '; display: block; width: 30%; height: 100%; background: -webkit-gradient(linear, left top, right top, from(#f1f3f7), to(rgba(241, 243, 247, 0))); background: linear-gradient(to right, #f1f3f7, rgba(241, 243, 247, 0)); position: absolute; left: 0; z-index: 10; pointer-events: none; } .owl-carousel.carousel-horizontal-degrade.rm-degrade-now:before, .owl-carousel.carousel-horizontal-degrade.rm-degrade-now:after { content: none; } @media (max-width: 767px) { .owl-carousel.carousel-horizontal-degrade.mobile-disable-degrade:before, .owl-carousel.carousel-horizontal-degrade.mobile-disable-degrade:after { content: none; } } /* Carousel Style 1 */ .owl-carousel.carousel-style-1 .content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .owl-carousel.carousel-style-1 .left-content { position: relative; padding: 0 32px; padding: 0 2rem; text-align: center; min-width: 100px; } .owl-carousel.carousel-style-1 .left-content>span span { font-size: 60.8px; font-size: 3.8rem; line-height: 1; margin-left: 2px; } .owl-carousel.carousel-style-1 .left-content:before { content: ''; display: block; position: absolute; top: 0; top: 6.4px; top: 0.4rem; right: 8px; right: 0.5rem; height: 68.8px; height: 4.3rem; border-right: 1px solid #e1e1e1; } .owl-carousel.carousel-style-1 .right-content { padding-left: 16px; padding-left: 1rem; padding-top: 30.4px; padding-top: 1.9rem; } .owl-carousel.carousel-style-1 .owl-dots { position: absolute; top: 80px; top: 5rem; left: 30.4px; left: 1.9rem; z-index: 1; } /* Carousel Style - Left Bottom Corner */ .owl-carousel.carousel-corner-left-bottom { position: absolute; left: 0; bottom: 0; width: 35%; margin-bottom: 0; min-width: 300px; /* Carousel Corner Style 1 */ } .owl-carousel.carousel-corner-left-bottom:before { content: ''; display: block; position: absolute; top: -60px; right: 20px; bottom: 20px; left: 20px; background: rgba(28, 31, 33, 0.3); border-radius: 100%; z-index: -1; } .owl-carousel.carousel-corner-left-bottom .owl-stage-outer:before { content: ''; display: block; background: #FFF; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .owl-carousel.carousel-corner-left-bottom.stage-top-gap .owl-stage-outer:before { top: 22px; } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item h2 { position: relative; top: -7px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 2.5em; letter-spacing: 1.2px; font-weight: 800; margin-bottom: 5px; -webkit-transition: ease top 300ms; transition: ease top 300ms; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item h2>span { font-size: 1.4em; font-weight: 900; line-height: 1; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item .content { padding: 0 15%; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item a.learn-more { font-weight: bold; -webkit-transition: ease transform 300ms, ease opacity 300ms; transition: ease transform 300ms, ease opacity 300ms; } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item a.learn-more:hover i { margin-left: 8px; } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item a.learn-more i { margin-left: 5px; -webkit-transition: ease margin-left 300ms; transition: ease margin-left 300ms; } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item.changing h2 { top: 20px; -webkit-transition: ease top 100ms; transition: ease top 100ms; -webkit-transition-delay: 0ms; transition-delay: 0ms; } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item.changing h2>span { opacity: 0; -webkit-transition: ease opacity 100ms; transition: ease opacity 100ms; } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item.changing .content { opacity: 0; -webkit-transition: ease opacity 100ms; transition: ease opacity 100ms; -webkit-transition-delay: 0ms; transition-delay: 0ms; } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item.changing a.learn-more { opacity: 0; -webkit-transition: ease transform 100ms, ease opacity 100ms; transition: ease transform 100ms, ease opacity 100ms; -webkit-transition-delay: 0ms; transition-delay: 0ms; -webkit-transform: translateY(10%); transform: translateY(10%); } .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-dots { margin-top: 0; padding: 20px 0; background: #FFF; } @media (max-width: 575px) { .owl-carousel.carousel-corner-left-bottom { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } /* Carousel Style - Center Active Items */ .owl-carousel.carousel-center-active-items { padding-bottom: px; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); /* Change Color On Current Item */ } @media (min-width: 992px) { .owl-carousel.carousel-center-active-items { width: 114vw; } } @media (min-width: 1200px) { .owl-carousel.carousel-center-active-items { width: 102vw; } } .owl-carousel.carousel-center-active-items .owl-item .card { background-color: #FFF; padding: 24.615px; padding: 1.5384615385rem; -webkit-transition: ease background-color 300ms; transition: ease background-color 300ms; -webkit-transform: scale(1); transform: scale(1); } .owl-carousel.carousel-center-active-items .owl-item:not(.current):not(.remove-blur) .card { -webkit-filter: blur(2px); } .owl-carousel.carousel-center-active-items .owl-nav { left: 50%; margin-top: 10px; position: absolute; top: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 65px; transform: translateX(-50%); } .owl-carousel.carousel-center-active-items .owl-nav .owl-prev, .owl-carousel.carousel-center-active-items .owl-nav .owl-next { background: transparent; color: #CCC; font-size: 22.4px; font-size: 1.4rem; } .owl-carousel.carousel-center-active-items .owl-nav .owl-prev:before { content: '\f104'; } .owl-carousel.carousel-center-active-items .owl-nav .owl-next:before { content: '\f105'; } .owl-carousel.carousel-center-active-items:not(.carousel-center-active-items-style-2):not(.carousel-center-active-items-style-3) .owl-item.active.current .card { background: #CCC; } .owl-carousel.carousel-center-active-items:not(.carousel-center-active-items-style-2):not(.carousel-center-active-items-style-3) .owl-item.active.current .card i, .owl-carousel.carousel-center-active-items:not(.carousel-center-active-items-style-2):not(.carousel-center-active-items-style-3) .owl-item.active.current .card strong, .owl-carousel.carousel-center-active-items:not(.carousel-center-active-items-style-2):not(.carousel-center-active-items-style-3) .owl-item.active.current .card p { color: #FFF !important; } @media (min-width: 768px) { .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-2, .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-3 { width: 160%; } } @media (min-width: 1200px) { .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-2, .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-3 { width: 133vw; } } .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-3 .owl-item .card { -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-3 .owl-item:not(.current):not(.remove-blur) .card { opacity: 0.2; } .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-4 { max-width: 100%; } .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-6 { width: 133vw; max-height: 40vw; cursor: move; cursor: -webkit-grab; overflow: hidden; } .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { content: ''; position: absolute; left: 0; bottom: -30px; width: 100%; height: 36vh; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(90%, white)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 90%); pointer-events: none; } @media (min-width: 768px) { .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-7 { width: 133vw; } } .bg-light-1 .carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(252, 253, 253, 0)), color-stop(90%, #fcfdfd)); background: linear-gradient(to bottom, rgba(252, 253, 253, 0) 0%, #fcfdfd 90%); } .bg-light-2 .carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(251, 251, 253, 0)), color-stop(90%, #fbfbfd)); background: linear-gradient(to bottom, rgba(251, 251, 253, 0) 0%, #fbfbfd 90%); } .bg-light-3 .carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(247, 249, 251, 0)), color-stop(90%, #f7f9fb)); background: linear-gradient(to bottom, rgba(247, 249, 251, 0) 0%, #f7f9fb 90%); } .bg-light-4 .carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(244, 246, 249, 0)), color-stop(90%, #f4f6f9)); background: linear-gradient(to bottom, rgba(244, 246, 249, 0) 0%, #f4f6f9 90%); } .bg-light-5 .carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(241, 243, 247, 0)), color-stop(90%, #f1f3f7)); background: linear-gradient(to bottom, rgba(241, 243, 247, 0) 0%, #f1f3f7 90%); } .bg-dark-1 .carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(9, 10, 11, 0)), color-stop(90%, #090a0b)); background: linear-gradient(to bottom, rgba(9, 10, 11, 0) 0%, #090a0b 90%); } .bg-dark-2 .carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(27, 30, 33, 0)), color-stop(90%, #1b1e21)); background: linear-gradient(to bottom, rgba(27, 30, 33, 0) 0%, #1b1e21 90%); } .bg-dark-3 .carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(32, 35, 38, 0)), color-stop(90%, #202326)); background: linear-gradient(to bottom, rgba(32, 35, 38, 0) 0%, #202326 90%); } .bg-dark-4 .carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(41, 45, 49, 0)), color-stop(90%, #292d31)); background: linear-gradient(to bottom, rgba(41, 45, 49, 0) 0%, #292d31 90%); } .bg-dark-5 .carousel-center-active-items.carousel-center-active-items-style-6.bottom-degrade:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(46, 50, 55, 0)), color-stop(90%, #2e3237)); background: linear-gradient(to bottom, rgba(46, 50, 55, 0) 0%, #2e3237 90%); } @media (max-width: 991px) { .owl-carousel.carousel-center-active-items .owl-nav { width: 100px; } .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-6 { max-height: 68vw; } } @media (max-width: 767px) { .owl-carousel.carousel-center-active-items .owl-dots { display: none; } .owl-carousel.carousel-center-active-items.carousel-center-active-items-style-6 { max-height: 72vw; } } /* Carousel Style - Stripes */ .owl-carousel.carousel-stripes .carousel-stripe-item { height: calc(100vh - 118px); } /* Carousel Items Border Divider */ .owl-carousel.carousel-items-border-divider .owl-item.active+.owl-item.active { border-left: 1px solid rgba(255, 255, 255, 0.2); } /* Carousel - Gallery Thumbs */ .owl-carousel.thumb-gallery-thumbs .owl-item { cursor: pointer; } /* Carousel Style - Grid Style 1 */ .owl-carousel.carousel-grid-style-1 { height: 100%; } .owl-carousel.carousel-grid-style-1 .owl-stage-outer, .owl-carousel.carousel-grid-style-1 .owl-stage, .owl-carousel.carousel-grid-style-1 .owl-item { height: 100%; } /* Edge */ html.edge { /* Carousel Style - Left Bottom Corner */ } html.edge .owl-carousel.carousel-corner-left-bottom { /* Carousel Corner Style 1 */ } html.edge .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item h2 { -webkit-transition-delay: 0s; transition-delay: 0s; } /* IE */ html.ie { /* Carousel Style - Left Bottom Corner */ /* Owl Carousel Vertical */ } html.ie .owl-carousel.carousel-corner-left-bottom { /* Carousel Corner Style 1 */ } html.ie .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item { overflow: hidden; } html.ie .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item h2 { -webkit-transition: none; transition: none; } html.ie .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item h2>span { -webkit-transition: none; transition: none; } html.ie .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item .content { -webkit-transition: none; transition: none; } html.ie .owl-carousel.carousel-corner-left-bottom.carousel-corner-style-1 .owl-item a.learn-more { -webkit-transition: none; transition: none; } html.ie .owl-carousel.owl-carousel-vertical { overflow: hidden; } html.ie .owl-carousel.owl-carousel-vertical .owl-stage-outer { -webkit-transform: translateZ(-1px); transform: translateZ(-1px); } /* Videos */ .embed-responsive.embed-soundcloud { padding-top: 19.25%; } /* Modals */ .modal-open .modal { overflow-x: hidden; overflow-y: scroll; } /* Ajax Container */ .mfp-content .ajax-container { background: none repeat scroll 0 0 #FFF; margin: 40px auto; max-width: 1140px; padding: 48px 36.8px; padding: 3rem 2.3rem; position: relative; text-align: left; display: block; } .mfp-content .ajax-container .mfp-close { display: none; } @media (min-width: 768px) { .mfp-content .ajax-container a[data-ajax-portfolio-close] { position: absolute; top: -26px; right: 2px; } } /* Lightbox */ .lightbox-open body { overflow: hidden; padding-right: 16px; } .lightbox-open #header { right: 8px; } /* Close */ .mfp-close, .mfp-close-btn-in .mfp-close { font-family: "Source Sans Pro", regular; font-weight: 600; font-size: 22px; color: #838383; } /* No Margins */ .mfp-no-margins img.mfp-img { padding: 0; } .mfp-no-margins .mfp-figure:after { top: 0; bottom: 0; } .mfp-no-margins .mfp-container { padding: 0; } /* Zoom */ .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0.001; -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s ease-out; 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; } /* Animnate */ .my-mfp-zoom-in .zoom-anim-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); transform: scale(0.8); } .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; } .my-mfp-zoom-in.mfp-bg { opacity: 0.001; /* Chrome opacity transition bug */ -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .my-mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } .my-mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } .my-mfp-slide-bottom .zoom-anim-dialog { opacity: 0; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg); transform: translateY(-20px) perspective(600px) rotateX(10deg); } .my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog { opacity: 1; -webkit-transform: translateY(0) perspective(600px) rotateX(0); transform: translateY(0) perspective(600px) rotateX(0); } .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog { opacity: 0; -webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg); transform: translateY(-10px) perspective(600px) rotateX(10deg); } .my-mfp-slide-bottom.mfp-bg { opacity: 0.01; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .my-mfp-slide-bottom.mfp-ready.mfp-bg { opacity: 0.8; } .my-mfp-slide-bottom.mfp-removing.mfp-bg { opacity: 0; } /* Fade */ .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /* Dialog */ .dialog { background: white; padding: 20px 30px; text-align: left; margin: 40px auto; position: relative; max-width: 600px; } .dialog.dialog-xs { max-width: 200px; } .dialog.dialog-sm { max-width: 400px; } .dialog.dialog-md { max-width: 600px; } .dialog.dialog-lg { max-width: 900px; } /* White Popup Block */ .white-popup-block { background: #FFF; padding: 20px 30px; text-align: left; max-width: 600px; margin: 40px auto; position: relative; } .white-popup-block.white-popup-block-xs { max-width: 200px; } .white-popup-block.white-popup-block-sm { max-width: 400px; } .white-popup-block.white-popup-block-md { max-width: 600px; } .white-popup-block.white-popup-block-lg { max-width: 900px; } /* Lightbox Opened */ html.lightbox-opened.sticky-header-active #header .header-body { padding-right: 17px; } /* Full Screen No Scroll */ html.full-screen-no-scroll .body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100vh; } html.full-screen-no-scroll .main { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } /* Outline */ .outline-none { outline: 0 !important; } /* Text Decoration */ .text-decoration-none { text-decoration: none !important; } /* No Borders */ .border-0 { border: none !important; } /* Container */ @media (min-width: 1200px) { .container-xl { width: 100%; max-width: 1440px; } } /* Top Sub Title */ .top-sub-title { font-family: "Source Sans Pro", regular; font-size: 0.9em; } /* Title Number */ .title-number-style-1 { position: absolute; top: -4.8px; top: -0.3rem; left: -36.8px; left: -2.3rem; font-size: 57.6px; font-size: 3.6rem; } /* Lead */ .lead { font-size: 1.2em; line-height: 1.8; color: #777; } /* Clear */ .clear-both { clear: both; } /* Absolute Vertical Center */ .absolute-y-center { position: absolute; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } @media (max-width: 767px) { .absolute-y-center { position: relative; top: auto; -webkit-transform: none; transform: none; } } html.ie .absolute-y-center { width: 100%; } /* Absolute Horizontal Center */ .absolute-x-center { position: absolute; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } /* Absolute Horizontal & Vertical Center */ .absolute-xy-center { position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } /* Text with Background Effect */ .effect-text-background { background-image: url(../img/gif/people.gif); background-repeat: no-repeat; background-size: cover; background-position: 50% 35%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html.ie .effect-text-background { background: none !important; } /* Opacity */ .opacity-0 { opacity: 0; } .opacity-1 { opacity: 0.1; } .opacity-2 { opacity: 0.2; } .opacity-3 { opacity: 0.3; } .opacity-4 { opacity: 0.4; } .opacity-5 { opacity: 0.5; } .opacity-6 { opacity: 0.6; } .opacity-7 { opacity: 0.7; } .opacity-8 { opacity: 0.8; } .opacity-9 { opacity: 0.9; } .opacity-10 { opacity: 1; } /* Grid */ .col-half-section { max-width: 555px; width: 100%; } @media (max-width: 1199px) { .col-half-section { max-width: 465px; } } @media (max-width: 991px) { .col-half-section { max-width: 345px; } } @media (max-width: 767px) { .col-half-section { max-width: 515px; margin: 0 auto; } } @media (max-width: 575px) { .col-half-section { width: 100%; max-width: none; margin-left: 15px; margin-right: 15px; } } /* Highlight Boxes */ .highlight-boxes { position: relative; } .highlight-boxes .particles { width: 114%; position: absolute; top: 47%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .highlight-boxes .particles .g-particles { -webkit-transform-origin: center; transform-origin: center; } .highlight-boxes .wrap-boxes { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: baseline; -webkit-box-align: baseline; align-items: baseline; } .highlight-boxes .wrap-boxes>div { overflow: hidden; } .highlight-boxes .wrap-boxes>div:nth-child(1), .highlight-boxes .wrap-boxes>div:nth-child(3) { height: 90%; } .highlight-boxes .wrap-boxes>div:nth-child(1) { right: -5px; padding: 92.8px 43.2px 92.8px 38.4px; padding: 5.8rem 2.7rem 5.8rem 2.4rem; } .highlight-boxes .wrap-boxes>div:nth-child(2) { margin: 0 auto; padding: 112px 38.4px; padding: 7rem 2.4rem; } .highlight-boxes .wrap-boxes>div:nth-child(2) p { color: #bbb; } .highlight-boxes .wrap-boxes>div:nth-child(3) { left: -5px; padding: 92.8px 38.4px 92.8px 43.2px; padding: 5.8rem 2.4rem 5.8rem 2.7rem; z-index: -1; } .highlight-boxes .wrap-boxes>div .background-icon { position: absolute; font-size: 148.8px; font-size: 9.3rem; opacity: 0.1; } .highlight-boxes .wrap-boxes>div .background-icon.background-icon-top { top: -54.4px; top: -3.4rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .highlight-boxes .wrap-boxes>div .background-icon.background-icon-right { top: 47%; right: -54.4px; right: -3.4rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .highlight-boxes .wrap-boxes>div .background-icon.background-icon-bottom { bottom: -36.8px; bottom: -2.3rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .highlight-boxes .wrap-boxes>div .background-icon.background-icon-left { font-size: 160px; font-size: 10rem; top: 47%; left: -80px; left: -5rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .highlight-boxes.highlight-boxes-rounded .wrap-boxes>div { border-radius: 7px; } @media (max-width: 767px) { .highlight-boxes .particles { display: none; } .highlight-boxes .wrap-boxes { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .highlight-boxes .wrap-boxes>div:nth-child(1) { right: 0; margin-bottom: 2rem; } .highlight-boxes .wrap-boxes>div:nth-child(2) { margin-bottom: 2rem; } .highlight-boxes .wrap-boxes>div:nth-child(3) { left: 0; } } @media (max-width: 575px) { .highlight-boxes { padding-right: 15px; padding-left: 15px; } } /* Static Tooltip */ .tooltip-static { display: inline-block; margin: 10px 20px; opacity: 1; position: relative; } .tooltip-static-top .arrow { left: 50%; } .tooltip-static-right .arrow { top: 50%; } .tooltip-static-top .arrow { left: 50%; } .tooltip-static-right .arrow { top: 50%; } /* Link Underline */ .link-underline-dark { color: #707070; border-bottom: 1px solid #707070; padding: 0 0 3px; } .link-underline-dark:hover { color: #969696 !important; border-color: #969696 !important; } .link-underline-light { color: #e2e2e2; border-bottom: 1px solid #e2e2e2; padding: 0 0 3px; } .link-underline-light:hover { color: #FFF !important; border-color: #FFF !important; } /* Text Underline Style */ .text-underline-style-1 { border-bottom: 1px solid #1c1f21; padding: 0 0 3px; } /* Scrollable Element */ .scrollable-element { overflow-y: auto; overflow-x: hidden; } .scrollable-element::-webkit-scrollbar-track { border-radius: 10px; background-color: #292d31; } .scrollable-element::-webkit-scrollbar { width: 7px; background-color: transparent; } .scrollable-element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #CCC; } .scrollable-element.scrollable-element-light::-webkit-scrollbar-track { border-radius: 10px; background-color: #f1f3f7; } /* Box Shadow */ .box-shadow-1 { -webkit-box-shadow: 0px 0px 50px -13px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 50px -13px rgba(0, 0, 0, 0.4); } /* Twitter Feed */ .twitter>ul { padding: 0; } .twitter>ul>li { list-style: none; } /* Mask Desktop */ .mask-desktop { position: relative; width: 320px; height: 270px; margin: 0 auto; } .mask-desktop>img { position: absolute; left: -29px; width: 540px; z-index: 1; } .mask-desktop .parallax { width: 320px; height: 210px; } /* Content Grid */ .content-grid { overflow: hidden; margin: 0; padding: 0; } .content-grid .content-grid-item { position: relative; padding: 10px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .content-grid .content-grid-item:before, .content-grid .content-grid-item:after { content: ''; position: absolute; } .content-grid .content-grid-item:before { height: 100%; top: 0; left: -1px; border-left: 1px solid #DADADA; } .content-grid .content-grid-item:after { width: 100%; height: 0; top: auto; left: 0; bottom: -1px; border-bottom: 1px solid #DADADA; } .content-grid .content-grid-item .img-fluid { display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .content-grid.content-grid-dashed .content-grid-item:before { border-left: 1px dashed #DADADA; } .content-grid.content-grid-dashed .content-grid-item:after { border-bottom: 1px dashed #DADADA; } /* Show Grid */ .show-grid [class*="col"] .show-grid-block { background-color: #EEE; line-height: 40px; min-height: 40px; text-align: center; border: 1px solid #FFF; display: block; } /* Masonry Loading */ .masonry-loader { height: auto; overflow: visible; position: relative; } .masonry-loader:after { -webkit-transition: all 0.5s; transition: all 0.5s; content: ' '; background: #FFF; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 1; opacity: 0; } .masonry-loader .bounce-loader { display: none; } .masonry-loader.masonry-loader-showing { height: 200px; overflow: hidden; } .masonry-loader.masonry-loader-showing:after { opacity: 1; } .masonry-loader.masonry-loader-showing .bounce-loader { display: block; } .masonry-loader.masonry-loader-loaded:after { display: none; } /* Isotope Item */ .isotope-item { min-width: 1px; } /* Sticky Wrapper */ .sticky-wrapper { width: 100%; } .sticky-wrapper .sticky-body { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; z-index: 10; -webkit-transition: ease background 300ms; transition: ease background 300ms; } .sticky-wrapper.sticky-wrapper-transparent { position: absolute; z-index: 11; } html.sticky-wrapper-active .sticky-wrapper.sticky-wrapper-effect-1 .sticky-body { position: fixed; background: #FFF; -webkit-animation: headerReveal 0.4s ease-in; animation: headerReveal 0.4s ease-in; } /* Full Width Half Background */ .full-width-half-background { position: relative; } .full-width-half-background:after { content: ''; position: absolute; bottom: 0; top: 50%; left: 50%; width: 100vw; background-color: #f1f3f7; z-index: -1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } /* Featured Boxes */ .featured-boxes { position: relative; } .featured-boxes::after { clear: both; content: ""; display: block; } .featured-boxes:before { content: ''; display: block; position: absolute; bottom: 0; left: 50%; width: 99vw; border-bottom: 1px solid rgba(119, 119, 119, 0.2); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .featured-boxes h4 { font-size: 1.2em; } .featured-boxes [class*="col-"] { padding: 0; } .featured-boxes .featured-box { position: relative; padding: 35px 35px 35px 90px; border-right: 1px solid rgba(119, 119, 119, 0.2); } .featured-boxes .featured-box:last-child { border-right: none; } .featured-boxes .featured-box>a { display: block; } .featured-boxes .featured-box i, .featured-boxes .featured-box img { position: absolute; top: 35px; left: 32px; font-size: 40px; } .featured-boxes .featured-box h4, .featured-boxes .featured-box p { margin-bottom: 0; } .featured-boxes.featured-boxes-no-border-bottom:before { content: none; } @media (min-width: 992px) and (max-width: 1199px) { .featured-boxes h4 { font-size: 1em; } .featured-boxes p { margin-top: 6px; } } @media (max-width: 991px) { .featured-boxes .featured-box { position: relative; border-right: 0; } .featured-boxes .featured-box:after { content: ''; display: block; position: absolute; bottom: 0; left: 50%; width: 100vw; border-bottom: 1px solid rgba(119, 119, 119, 0.2); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .featured-boxes .featured-box:last-child:after { content: none; } } @media (max-width: 767px) { .featured-boxes p { margin-top: 6px; } } /* Hover Effects */ .hover-effect-1 { position: relative; } .hover-effect-1:after { content: ''; display: block; position: absolute; bottom: -5px; left: 0; width: 100%; border-width: 0.2px; border-style: solid; border-color: inherit; opacity: 0; -webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0); -webkit-transition: ease opacity 300ms, ease transform 300ms; transition: ease opacity 300ms, ease transform 300ms; } .hover-effect-1:hover:after { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .hover-effect-2 { opacity: 1; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .hover-effect-2:hover { opacity: 0.9; } .hover-effect-3:not(.portfolio-item) { -webkit-box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0); box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0); -webkit-transition: ease transform 300ms, ease box-shadow 300ms; transition: ease transform 300ms, ease box-shadow 300ms; } .hover-effect-3:not(.portfolio-item):hover { -webkit-box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.4); box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.4); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } .hover-effect-3.portfolio-item { -webkit-transition: ease transform 300ms; transition: ease transform 300ms; } .hover-effect-3.portfolio-item .image-frame { -webkit-box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0); box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0); -webkit-transition: ease box-shadow 300ms; transition: ease box-shadow 300ms; } .hover-effect-3.portfolio-item:hover, .hover-effect-3.portfolio-item.show { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } .hover-effect-3.portfolio-item:hover .image-frame, .hover-effect-3.portfolio-item.show .image-frame { -webkit-box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.4); box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.4); } .hover-effect-3.portfolio-item:hover h2>a, .hover-effect-3.portfolio-item.show h2>a { color: #CCC; } /* Box Shadow Effects */ .box-shadow-effect-1 { -webkit-box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.1); box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.1); -webkit-transition: ease box-shadow 300ms; transition: ease box-shadow 300ms; } .box-shadow-effect-1:hover { -webkit-box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.4); box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.4); } /* Breadcrumb */ .breadcrumb { background: transparent; padding: 0; } .breadcrumb li+li:before { color: inherit; opacity: 0.5; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; padding: 0 7px 0 5px; } /* Quantity Button */ .quantity { display: -webkit-box; display: -ms-flexbox; display: flex; } .quantity .plus, .quantity .minus, .quantity .qty { background-color: #f1f3f7; border: none; -webkit-box-shadow: none; box-shadow: none; padding: 9.6px 20.8px; padding: 0.6rem 1.3rem; font-size: 20.8px; font-size: 1.3rem; outline: none; } .quantity .qty { font-size: 12.8px; font-size: 0.8rem; padding: 9.6px 4.8px; padding: 0.6rem 0.3rem; text-align: center; max-width: 35px; -moz-appearance: textfield; } .quantity .qty::-webkit-inner-spin-button, .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } .quantity .minus { padding-top: 4.8px; padding-top: 0.3rem; } .quantity .plus { padding-top: 8px; padding-top: 0.5rem; } .quantity .plus, .quantity .minus { cursor: pointer; -webkit-transition: ease background-color 300ms; transition: ease background-color 300ms; } .quantity .plus:hover, .quantity .minus:hover { background-color: #eaeaea; } /* Google Maps */ .google-map { background: #f1f3f7; height: 400px; width: 100%; } @media (min-width: 992px) { .google-map.google-map-burst-height { position: absolute; top: 50%; left: 0; width: calc(100% - 15px); overflow: hidden; height: calc(100% + 100px); -webkit-box-shadow: 0px 0px 64px -14px rgba(28, 31, 33, 0.2); box-shadow: 0px 0px 64px -14px rgba(28, 31, 33, 0.2); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } } @media (max-width: 991px) { .google-map.google-map-burst-height { width: 100vw; height: 400px; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } .google-map.google-map-style-2 { -webkit-transform: translate3d(0, 60px, 0); transform: translate3d(0, 60px, 0); } /* Ajax Box */ .ajax-box { position: relative; -webkit-transition: all 0.2s; transition: all 0.2s; } .ajax-box .ajax-box-content { opacity: 1; overflow: hidden; height: auto; -webkit-transition: all 0.2s; transition: all 0.2s; } .ajax-box .bounce-loader { opacity: 0; } .ajax-box.ajax-box-init { height: 0; } .ajax-box.ajax-box-init .ajax-box-content { opacity: 0; visibility: hidden; } .ajax-box.ajax-box-loading { height: 300px; } .ajax-box.ajax-box-loading .ajax-box-content { opacity: 0; height: 300px; } .ajax-box.ajax-box-loading .bounce-loader { opacity: 1; } /* Vertical Divider */ .vertical-divider { background: #CCC; width: 1px; min-height: 20px; } .vertical-divider.vertical-divider-size-1 { height: 30px; } .vertical-divider.vertical-divider-size-2 { height: 40px; } .vertical-divider.vertical-divider-size-3 { height: 50px; } .vertical-divider.vertical-divider-size-4 { height: 60px; } .vertical-divider.vertical-divider-size-5 { height: 70px; } /* Countdown */ .countdown.countdown-style-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .countdown.countdown-style-1>span { position: relative; padding-left: 40px; padding-left: 2.5rem; padding-right: 40px; padding-right: 2.5rem; line-height: 1.2; font-size: 16px; font-size: 1rem; } .countdown.countdown-style-1>span:first-child { padding-left: 0; } .countdown.countdown-style-1>span:first-child:before { content: none; } .countdown.countdown-style-1>span:last-child { padding-right: 0; } .countdown.countdown-style-1>span:before { content: ''; position: absolute; top: 50%; left: -5.6px; left: -0.35rem; width: 8px; height: 8px; border-radius: 100%; background: #707070; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .countdown.countdown-style-1>span span { display: block; text-align: center; font-size: 48px; font-size: 3rem; font-weight: 900; } @media (max-width: 575px) { .countdown.countdown-style-1 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .countdown.countdown-style-1>span { padding: 0; margin-bottom: 2rem; } .countdown.countdown-style-1>span:last-child { margin-bottom: 0; } .countdown.countdown-style-1>span:before { content: none; } } /* Skew Text Bar */ @media (min-width: 1200px) { .skew-text-bar-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: -10px; margin-bottom: -10px; } .skew-text-bar-1:before { content: ''; position: relative; top: 3px; left: 16px; -webkit-transform: skewX(22deg); transform: skewX(22deg); background: #CCC; width: 18px; height: 110px; z-index: -1; } } /* Rating */ .rating { unicode-bidi: bidi-override; direction: rtl; } .rating input { position: absolute; left: -999999px; } .rating label { display: inline-block; font-size: 0; margin: 0; padding: 0; line-height: 1; cursor: pointer; } .rating>label:before { position: relative; font: 24px/1 "Font Awesome 5 Free"; display: block; content: "\f005"; color: #e1e5ee; background: #e1e5ee; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .rating>label:hover:before, .rating>label:hover~label:before { color: #1c1f21; background-color: #1c1f21; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .rating>label.selected:before, .rating>label.selected~label:before { color: #1c1f21; background-color: #1c1f21; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Responsive Images */ .responsive-images { position: absolute; width: 510px; height: 100%; } .responsive-images.responsive-images-left { top: 0; right: 74%; } .responsive-images.responsive-images-left div:nth-child(1) { left: 0; top: -16px; top: -1rem; } .responsive-images.responsive-images-left div:nth-child(2) { left: 0; top: 288px; top: 18rem; } .responsive-images.responsive-images-left div:nth-child(3) { left: 384px; left: 24rem; top: 304px; top: 19rem; } .responsive-images.responsive-images-right { top: 0; left: 74%; } .responsive-images.responsive-images-right div:nth-child(1) { right: 0; top: 0; } .responsive-images.responsive-images-right div:nth-child(2) { right: 0; top: 169.6px; top: 10.6rem; } .responsive-images.responsive-images-right div:nth-child(3) { right: 0; top: 200px; top: 12.5rem; } .responsive-images.responsive-images-right div:nth-child(4) { right: 0; top: 411.2px; top: 25.7rem; } @media (min-width: 1920px) { .responsive-images.responsive-images-left { right: auto; left: 0; } .responsive-images.responsive-images-right { left: auto; right: 0; } } html.boxed .responsive-images { display: none; } /* Expandable Selector */ .expandable-selector { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; white-space: nowrap; } .expandable-selector .btn { width: 24px; width: 1.5rem; height: 24px; height: 1.5rem; min-width: 24px; min-width: 1.5rem; margin: 0 4.8px; margin: 0 0.3rem; padding: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; font-size: 16px; font-size: 1rem; border-radius: 2px; outline: none; } .expandable-selector .btn:not(.btn-colorpicker):not(.main-color) { pointer-events: none; opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) transform 300ms, cubic-bezier(0.55, 0, 0.1, 1) opacity 300ms; transition: cubic-bezier(0.55, 0, 0.1, 1) transform 300ms, cubic-bezier(0.55, 0, 0.1, 1) opacity 300ms; } .expandable-selector .btn:not(.btn-colorpicker):not(.main-color):nth-child(6) { -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } .expandable-selector .btn:not(.btn-colorpicker):not(.main-color):nth-child(5) { -webkit-transform: translate3d(40px, 0, 0); transform: translate3d(40px, 0, 0); } .expandable-selector .btn:not(.btn-colorpicker):not(.main-color):nth-child(4) { -webkit-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } .expandable-selector .btn:not(.btn-colorpicker):not(.main-color):nth-child(3) { -webkit-transform: translate3d(80px, 0, 0); transform: translate3d(80px, 0, 0); } .expandable-selector .btn:not(.btn-colorpicker):not(.main-color):nth-child(2) { -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } .expandable-selector .title { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 0 14.4px; padding: 0 0.9rem; height: 100%; top: 0; right: 70.4px; right: 4.4rem; width: 100%; background: #FFF; -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) right 300ms; transition: cubic-bezier(0.55, 0, 0.1, 1) right 300ms; font-size: 11.2px; font-size: 0.7rem; font-weight: 600; letter-spacing: -0.5px; } .expandable-selector:hover .title { right: 100%; -webkit-transition-duration: 660ms; transition-duration: 660ms; } .expandable-selector:hover .btn:not(.btn-colorpicker):not(.main-color) { pointer-events: auto; opacity: 1; -webkit-transform: none; transform: none; } .expandable-selector:hover .btn:not(.btn-colorpicker):not(.main-color):nth-child(7) { -webkit-transition-duration: 700ms; transition-duration: 700ms; -webkit-transition-delay: 50ms; transition-delay: 50ms; } .expandable-selector:hover .btn:not(.btn-colorpicker):not(.main-color):nth-child(6) { -webkit-transition-duration: 650ms; transition-duration: 650ms; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .expandable-selector:hover .btn:not(.btn-colorpicker):not(.main-color):nth-child(5) { -webkit-transition-duration: 600ms; transition-duration: 600ms; -webkit-transition-delay: 150ms; transition-delay: 150ms; } .expandable-selector:hover .btn:not(.btn-colorpicker):not(.main-color):nth-child(4) { -webkit-transition-duration: 550ms; transition-duration: 550ms; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .expandable-selector:hover .btn:not(.btn-colorpicker):not(.main-color):nth-child(3) { -webkit-transition-duration: 500ms; transition-duration: 500ms; -webkit-transition-delay: 250ms; transition-delay: 250ms; } .expandable-selector:hover .btn:not(.btn-colorpicker):not(.main-color):nth-child(2) { -webkit-transition-duration: 450ms; transition-duration: 450ms; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .expandable-selector:hover .btn:hover, .expandable-selector:hover .btn:not(.btn-colorpicker):not(.main-color):hover { -webkit-transition-delay: 0ms; transition-delay: 0ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; opacity: 0.8; } @media (max-width: 1870px) { .expandable-selector:hover .title { opacity: 0; } } @media (max-width: 1480px) { .expandable-selector .title { right: 3.3rem; } .expandable-selector .btn { margin: 0 0.1rem; } } @media (max-width: 1199px) { .expandable-selector .btn:not(.btn-colorpicker):not(.main-color) { display: none; } .expandable-selector:hover .title { right: 3.3rem; opacity: 1; } } /* Conpect Position */ .concept-pos-1 { position: relative; top: 13%; right: -120px; } @media (max-width: 991px) { .concept-pos-1 { right: 0; } } /* Lamp Style */ .lamp-style-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .lamp-style-wrapper .lamp, .lamp-style-wrapper .logo { position: absolute; top: 0; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); z-index: -1; } .lamp-style-wrapper .lamp { top: 32px; top: 2rem; } .lamp-style-wrapper .logo { top: 288px; top: 18rem; } .lamp-style-2 { position: absolute; top: 0; min-width: 520px; } /* Rect Size */ .rect-size { height: 320px; } @media (max-width: 575px) { .rect-size { height: 52vw; } .rect-size.rect-size-style-2 { height: 82vw; } } /* Extra Image Header */ .extra-image-header { position: absolute; } .extra-image-header .pos-left { left: 0; bottom: -30px; } .extra-image-header .pos-right { right: -275px; bottom: -165px; } /* Stile Switcher Required */ .style-switcher-required { visibility: hidden !important; } .style-switcher-active .style-switcher-required { visibility: visible !important; } /* Dividers */ hr { /* Divider Width */ /* Divider Size */ } hr.divider-w-1 { width: 50px; } hr.divider-w-2 { width: 100px; } hr.divider-w-3 { width: 150px; } hr.divider-w-4 { width: 200px; } hr.divider-w-5 { width: 250px; } hr.divider-size-1 { border-width: 1px; } hr.divider-size-2 { border-width: 2px; } hr.divider-size-3 { border-width: 4px; } hr.divider-size-4 { border-width: 6px; } hr.divider-size-5 { border-width: 8px; } /* Custom Dividers */ .custom-divider-1 { background: #ccc; width: 30px; height: 1px; } /* Sort */ .sort-source>div>a, .sort-source>li>a { font-size: 12px; font-size: 0.75rem; font-family: "Source Sans Pro", regular; font-weight: 500; } .sort-source>div.active>a, .sort-source>li.active>a { font-weight: 700; } .sort-source>div:first-child>a, .sort-source>li:first-child>a { padding-left: 0; } /* Sort Loading */ .sort-destination-loader { height: auto; overflow: hidden; position: relative; } .sort-destination-loader:after { content: ' '; background: #FFF; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 1; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .sort-destination-loader .bounce-loader { display: none; } .sort-destination-loader.sort-destination-loader-showing { max-height: 200px; } .sort-destination-loader.sort-destination-loader-showing:after { opacity: 1; } .sort-destination-loader.sort-destination-loader-showing .bounce-loader { display: block; } .sort-destination-loader.sort-destination-loader-loaded { overflow: visible; } .sort-destination-loader.sort-destination-loader-loaded:after { display: none; } /* Pricing Tables */ .pricing-table.pricing-table-style-1 { padding-left: 15px; padding-right: 15px; } .pricing-table.pricing-table-style-1 [class^='col'] { border: 1px solid #EDEDEE; border-right-color: transparent; } .pricing-table.pricing-table-style-1 [class^='col']:last-child { border-right-color: #EDEDEE; } .pricing-table .plan { text-align: center; } .pricing-table .plan-title { border-bottom: 1px solid #EDEDEE; padding: 25.6px 0; padding: 1.6rem 0; } .pricing-table .plan-title h3 { text-transform: uppercase; font-size: 1.0769230769em; margin: 0; padding: 0; color: #969696; } .pricing-table .plan-title em { font-family: "Georgia", sans-serif; font-size: 1em; color: #a3a3a3; margin: 0; padding: 0; opacity: 0.6; } .pricing-table .plan-price { padding: 40px 0 19.2px; padding: 2.5rem 0 1.2rem; } .pricing-table .plan-price strong { font-size: 3.6923076923em; color: #2E3237; font-weight: 800; } .pricing-table .plan-price strong em { font-size: 0.5em; font-style: normal; } .pricing-table .plan-price p { font-family: "Georgia", sans-serif; font-size: 1.2307692308em; color: #a3a3a3; margin: 0; } .pricing-table .plan-detail { padding: 0 0 32px; padding: 0 0 2rem; } .pricing-table .plan-detail ul { list-style: none; margin: 0 0 24px; margin: 0 0 1.5rem; padding: 0; } .pricing-table .plan-detail ul li { margin: 0; padding: 8px 0; padding: 0.5rem 0; } .pricing-table .plan.plan-most-popular { z-index: 1; } @media (min-width: 992px) { .pricing-table .plan.plan-most-popular { margin-top: -0.8rem; } } .pricing-table .plan.plan-most-popular .plan-title h3, .pricing-table .plan.plan-most-popular .plan-title em { color: #FFF; } .pricing-table.pricing-table-style-2 table td, .pricing-table.pricing-table-style-2 table th { border: 0; border-right: 1px solid #EDEDEE; text-align: center; } .pricing-table.pricing-table-style-2 table td { border-left: 1px solid #EDEDEE; } .pricing-table.pricing-table-style-2 table td:first-child { text-align: right; } .pricing-table.pricing-table-style-2 table tbody tr:nth-of-type(2n+1) { background: rgba(0, 0, 0, 0.02); } .pricing-table.pricing-table-style-2 table thead tr th { vertical-align: top; border-bottom: 1px solid #EDEDEE; border-top: 1px solid #EDEDEE; background: rgba(0, 0, 0, 0.02); } .pricing-table.pricing-table-style-2 table thead tr th:first-child { border-top: 0; background: transparent; } .pricing-table.pricing-table-style-2 table tr:last-child { background: transparent !important; } .pricing-table.pricing-table-style-2 table tr:last-child td { border-top: 1px solid #EDEDEE; border-left: 0; } .pricing-table.pricing-table-style-2 table tr:last-child td.plan-action { border-bottom: 1px solid #EDEDEE; } .pricing-table.pricing-table-style-2 .plan.plan-most-popular { position: relative; } @media (min-width: 992px) { .pricing-table.pricing-table-style-2 .plan.plan-most-popular { margin-top: -0.8rem; } } .pricing-table.pricing-table-style-2 .plan.plan-most-popular .plan-title h3, .pricing-table.pricing-table-style-2 .plan.plan-most-popular .plan-title em { color: #FFF; } /* Icon Box */ .icon-box h1, .icon-box h2, .icon-box h3, .icon-box h4 { font-weight: 700; margin-bottom: 9.6px; margin-bottom: 0.6rem; } .icon-box .icon-box-sub-title { font-family: "Source Sans Pro", regular; font-size: 0.9em; } .icon-box .icon-box-icon i.fa, .icon-box .icon-box-icon i.fas, .icon-box .icon-box-icon i.far, .icon-box .icon-box-icon i.fal, .icon-box .icon-box-icon i.fab, .icon-box .icon-box-icon i.icons, .icon-box .icon-box-icon i.lnr { position: relative; } .icon-box .icon-box-icon object, .icon-box .icon-box-icon img { position: relative; } .icon-box .icon-box-icon object:not([width]), .icon-box .icon-box-icon img:not([width]) { width: 42px; } .icon-box .icon-box-icon i { font-size: 40px; font-size: 2.5rem; } .icon-box .icon-box-icon.icon-box-icon-no-top i, .icon-box .icon-box-icon.icon-box-icon-no-top .animated-icon { top: 0 !important; } .icon-box .icon-box-icon .stick-icon { margin-left: -26px; } .icon-box .icon-box-icon-offset-border { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 100%; padding: 4px; } .icon-box .icon-box-icon-offset-border .icon-box-icon { margin: 0 !important; } .icon-box .icon-box-icon-square { border-radius: 4px !important; } .icon-box.icon-box-style-1 { display: -ms-flexbox; display: -webkit-box; display: flex; } .icon-box.icon-box-style-1 .icon-box-icon { padding-right: 16px; padding-right: 1rem; } .icon-box.icon-box-style-1 .icon-box-icon i.fa, .icon-box.icon-box-style-1 .icon-box-icon i.fas, .icon-box.icon-box-style-1 .icon-box-icon i.far, .icon-box.icon-box-style-1 .icon-box-icon i.fal, .icon-box.icon-box-style-1 .icon-box-icon i.fab, .icon-box.icon-box-style-1 .icon-box-icon i.icons, .icon-box.icon-box-style-1 .icon-box-icon i.lnr { font-size: 36.8px; font-size: 2.3rem; top: 8px; } .icon-box.icon-box-style-1 .animated-icon { top: 8px; } .icon-box.icon-box-style-1 h1, .icon-box.icon-box-style-1 h2, .icon-box.icon-box-style-1 h3, .icon-box.icon-box-style-1 h4 { margin-bottom: 16px; margin-bottom: 1rem; } .icon-box.icon-box-style-1 .icon-box-info p { font-size: 14.4px; font-size: 0.9rem; } .icon-box.icon-box-style-1.icon-box-reverse .icon-box-icon { padding-right: 0; padding-left: 16px; padding-left: 1rem; } .icon-box.icon-box-style-1.align-items-center .icon-box-icon i.fa, .icon-box.icon-box-style-1.align-items-center .icon-box-icon i.fas, .icon-box.icon-box-style-1.align-items-center .icon-box-icon i.far, .icon-box.icon-box-style-1.align-items-center .icon-box-icon i.fal, .icon-box.icon-box-style-1.align-items-center .icon-box-icon i.fab, .icon-box.icon-box-style-1.align-items-center .icon-box-icon i.icons, .icon-box.icon-box-style-1.align-items-center .icon-box-icon i.lnr { top: 0; } .icon-box.icon-box-style-2 .icon-box-icon { display: inline-block; float: left; padding-right: 12.8px; padding-right: 0.8rem; } .icon-box.icon-box-style-2 .icon-box-icon i.fa, .icon-box.icon-box-style-2 .icon-box-icon i.fas, .icon-box.icon-box-style-2 .icon-box-icon i.far, .icon-box.icon-box-style-2 .icon-box-icon i.fal, .icon-box.icon-box-style-2 .icon-box-icon i.fab, .icon-box.icon-box-style-2 .icon-box-icon i.icons, .icon-box.icon-box-style-2 .icon-box-icon i.lnr { font-size: 32px; font-size: 2rem; top: -3px; } .icon-box.icon-box-style-2 h1, .icon-box.icon-box-style-2 h2, .icon-box.icon-box-style-2 h3, .icon-box.icon-box-style-2 h4 { margin-bottom: 16px; margin-bottom: 1rem; } .icon-box.icon-box-style-2 .icon-box-info-title { display: inline-block; } .icon-box.icon-box-style-2.icon-box-reverse .icon-box-icon { padding-right: 0; float: right; padding-left: 12.8px; padding-left: 0.8rem; } .icon-box.icon-box-style-3 .icon-box-icon { padding-bottom: 8px; padding-bottom: 0.5rem; } .icon-box.icon-box-style-3 .icon-box-icon i.fa, .icon-box.icon-box-style-3 .icon-box-icon i.fas, .icon-box.icon-box-style-3 .icon-box-icon i.far, .icon-box.icon-box-style-3 .icon-box-icon i.fal, .icon-box.icon-box-style-3 .icon-box-icon i.fab, .icon-box.icon-box-style-3 .icon-box-icon i.icons, .icon-box.icon-box-style-3 .icon-box-icon i.lnr { font-size: 44.8px; font-size: 2.8rem; position: relative; } .icon-box.icon-box-style-3 h1, .icon-box.icon-box-style-3 h2, .icon-box.icon-box-style-3 h3, .icon-box.icon-box-style-3 h4 { margin-bottom: 16px; margin-bottom: 1rem; } .icon-box.icon-box-style-4, .icon-box.icon-box-style-7 { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .icon-box.icon-box-style-4 .icon-box-icon-offset-border, .icon-box.icon-box-style-7 .icon-box-icon-offset-border { margin-right: 16px; margin-right: 1rem; } .icon-box.icon-box-style-4 .icon-box-icon, .icon-box.icon-box-style-7 .icon-box-icon { margin-right: 16px; margin-right: 1rem; border-radius: 100%; width: auto; height: auto; padding: 36.8px; padding: 2.3rem; text-align: center; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .icon-box.icon-box-style-4 .icon-box-icon i.fa, .icon-box.icon-box-style-4 .icon-box-icon i.fas, .icon-box.icon-box-style-4 .icon-box-icon i.far, .icon-box.icon-box-style-4 .icon-box-icon i.fal, .icon-box.icon-box-style-4 .icon-box-icon i.fab, .icon-box.icon-box-style-4 .icon-box-icon i.icons, .icon-box.icon-box-style-4 .icon-box-icon i.lnr, .icon-box.icon-box-style-7 .icon-box-icon i.fa, .icon-box.icon-box-style-7 .icon-box-icon i.fas, .icon-box.icon-box-style-7 .icon-box-icon i.far, .icon-box.icon-box-style-7 .icon-box-icon i.fal, .icon-box.icon-box-style-7 .icon-box-icon i.fab, .icon-box.icon-box-style-7 .icon-box-icon i.icons, .icon-box.icon-box-style-7 .icon-box-icon i.lnr { font-size: 30.4px; font-size: 1.9rem; color: #FFF; margin: 0 auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .icon-box.icon-box-style-4 .icon-box-icon object, .icon-box.icon-box-style-4 .icon-box-icon img, .icon-box.icon-box-style-7 .icon-box-icon object, .icon-box.icon-box-style-7 .icon-box-icon img { margin: 0 auto; } .icon-box.icon-box-style-4.icon-box-reverse .icon-box-icon, .icon-box.icon-box-style-7.icon-box-reverse .icon-box-icon { margin-right: 0; margin-left: 16px; margin-left: 1rem; } .icon-box.icon-box-style-5, .icon-box.icon-box-style-8 { text-align: center; } .icon-box.icon-box-style-5 .icon-box-icon-offset-border, .icon-box.icon-box-style-8 .icon-box-icon-offset-border { margin: 0 auto 24px; margin: 0 auto 1.5rem; width: 109px; height: 109px; padding: 4px; } .icon-box.icon-box-style-5 .icon-box-icon, .icon-box.icon-box-style-8 .icon-box-icon { margin: 0 auto 24px; margin: 0 auto 1.5rem; border-radius: 100%; width: 100px; height: 100px; text-align: center; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .icon-box.icon-box-style-5 .icon-box-icon i.fa, .icon-box.icon-box-style-5 .icon-box-icon i.fas, .icon-box.icon-box-style-5 .icon-box-icon i.far, .icon-box.icon-box-style-5 .icon-box-icon i.fal, .icon-box.icon-box-style-5 .icon-box-icon i.fab, .icon-box.icon-box-style-5 .icon-box-icon i.icons, .icon-box.icon-box-style-5 .icon-box-icon i.lnr, .icon-box.icon-box-style-8 .icon-box-icon i.fa, .icon-box.icon-box-style-8 .icon-box-icon i.fas, .icon-box.icon-box-style-8 .icon-box-icon i.far, .icon-box.icon-box-style-8 .icon-box-icon i.fal, .icon-box.icon-box-style-8 .icon-box-icon i.fab, .icon-box.icon-box-style-8 .icon-box-icon i.icons, .icon-box.icon-box-style-8 .icon-box-icon i.lnr { font-size: 46.4px; font-size: 2.9rem; color: #FFF; margin: 0 auto; } .icon-box.icon-box-style-5 .icon-box-icon object, .icon-box.icon-box-style-5 .icon-box-icon img, .icon-box.icon-box-style-8 .icon-box-icon object, .icon-box.icon-box-style-8 .icon-box-icon img { margin: 0 auto; } .icon-box.icon-box-style-6 { text-align: center; } .icon-box.icon-box-style-6 .icon-box-icon { margin: 0 auto 24px; margin: 0 auto 1.5rem; text-align: center; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .icon-box.icon-box-style-6 .icon-box-icon i.fa, .icon-box.icon-box-style-6 .icon-box-icon i.fas, .icon-box.icon-box-style-6 .icon-box-icon i.far, .icon-box.icon-box-style-6 .icon-box-icon i.fal, .icon-box.icon-box-style-6 .icon-box-icon i.fab, .icon-box.icon-box-style-6 .icon-box-icon i.icons, .icon-box.icon-box-style-6 .icon-box-icon i.lnr { font-size: 44.8px; font-size: 2.8rem; margin: 0 auto; } .icon-box.icon-box-style-6 .icon-box-icon object, .icon-box.icon-box-style-6 .icon-box-icon img { margin: 0 auto; } .icon-box.icon-box-style-7 .icon-box-icon { border: 1px solid rgba(0, 0, 0, 0.1); } .icon-box.icon-box-style-8 .icon-box-icon { border: 1px solid rgba(0, 0, 0, 0.1); } .icon-box.icon-box-reverse { text-align: right; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .icon-box.icon-box-reverse .icon-box-icon { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .icon-box.icon-box-reverse .icon-box-info { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .icon-box.icon-box-pull-top { margin-top: -48px; margin-top: -3rem; } /* Icon Box Animations */ .icon-box-animation-1 { position: relative; /* Icon Box Animation 1 - Light */ } .icon-box-animation-1:before, .icon-box-animation-1:after { content: ''; position: absolute; width: 0; top: 0; left: 0; border-bottom: 3px solid #CCC; -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) width 400ms; transition: cubic-bezier(0.55, 0, 0.1, 1) width 400ms; } .icon-box-animation-1:after { top: auto; left: auto; right: 0; bottom: 0; } .icon-box-animation-1 .icon-box { padding: 48px; padding: 3rem; } .icon-box-animation-1 .icon-box:before, .icon-box-animation-1 .icon-box:after { content: ''; position: absolute; height: 0; top: 0; left: 0; border-right: 3px solid #CCC; -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) height 400ms; transition: cubic-bezier(0.55, 0, 0.1, 1) height 400ms; } .icon-box-animation-1 .icon-box:after { top: auto; left: auto; right: 0; bottom: 0; } .icon-box-animation-1:hover:before, .icon-box-animation-1:hover:after { width: 100%; } .icon-box-animation-1:hover .icon-box:before, .icon-box-animation-1:hover .icon-box:after { height: 100%; } .icon-box-animation-1.icon-box-animation-1-light:before, .icon-box-animation-1.icon-box-animation-1-light:after { border-color: #FFF; } .icon-box-animation-1.icon-box-animation-1-light .icon-box:before, .icon-box-animation-1.icon-box-animation-1-light .icon-box:after { border-color: #FFF; } /* Cards */ .card { border: 1px solid #EDEDEE; border-radius: 0; background: transparent; } .card .card-body { padding: 35.2px; padding: 2.2rem; } .card .card-body.card-body-flex-0 { -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; } .card.overlay .card-body { z-index: 2; } .card.card-style-1 { -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07); box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07); } .card.card-style-2 .card-body { margin: 10px; border: 5px solid #EDEDEE; } .card.card-style-3 .card-img-top { max-width: 80px; max-height: 80px; border-radius: 50%; position: absolute; left: 50%; -webkit-transform: translate(-50%, -30px); transform: translate(-50%, -30px); border: 5px solid #FFF; } .card.card-style-4 .card-img-top { position: relative; z-index: 1; } .card.card-style-4 .card-body { margin: -5px 20px 0; } .card.card-style-5:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #f1f3f7; border-radius: .25rem; opacity: 1; z-index: 0; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .card.card-style-5:hover:before { opacity: 0; } .card.card-style-5:hover .card-body { background: rgba(255, 255, 255, 0.8); } .card.card-style-5 .card-body { background: rgba(255, 255, 255, 0); z-index: 1; -webkit-transition: ease background 300ms; transition: ease background 300ms; } /* IE */ html.ie .card>a { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } html.ie .card .card-body { height: 100%; } html.ie .card-img-top { -ms-flex-negative: 0; flex-shrink: 0; } /* Timeline */ /* .timeline { position: relative; } .timeline:after { background: #505050; background: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 0)), color-stop(8%, #505050), color-stop(92%, #505050), to(rgba(80, 80, 80, 0))); background: linear-gradient(to bottom, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%); content: ""; display: block; height: 103%; left: 50%; margin-left: -2px; position: absolute; top: 0; width: 3px; z-index: 0; filter: alpha(opacity=10); opacity: 0.1; } .timeline .timeline-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 128px; padding-bottom: 8rem; } .timeline .timeline-title { background: #F4F4F4; padding: 12px; } .timeline .timeline-title h4 { padding: 0; margin: 0; color: #171717; font-size: 1.4em; } .timeline .timeline-title a { color: #171717; } .timeline .timeline-title .timeline-title-tags { color: #B1B1B1; font-size: 0.9em; } .timeline .timeline-title .timeline-title-tags a { color: #B1B1B1; font-size: 0.9em; } .timeline .timeline-box { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 45.8%; -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04); border: 1px solid #E5E5E5; border-radius: 4px; margin: 20px 10px 10px 10px; padding: 32px; padding: 2rem; z-index: 1; margin-bottom: -80px; margin-bottom: -5rem; background: #FFF; -ms-flex-item-align: start; align-self: flex-start; } .timeline .timeline-box.left { margin-bottom: 27.2px; margin-bottom: 1.7rem; } .timeline .timeline-box.left:before { background: #CCC; border-radius: 50%; content: ""; display: block; height: 14px; position: absolute; left: 50%; margin-top: 66px; width: 14px; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .timeline .timeline-box.left .timeline-box-arrow { -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #FFF; border-right: 1px solid #E5E5E5; border-top: 1px solid #E5E5E5; float: right; height: 14px; margin-top: 66px; margin-right: -40px; width: 14px; z-index: 0; } .timeline .timeline-box.right { margin-top: 128px; margin-top: 8rem; margin-left: auto; } .timeline .timeline-box.right:before { background: #CCC; border-radius: 50%; content: ""; display: block; height: 14px; position: absolute; left: 50%; margin-top: 66px; width: 14px; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .timeline .timeline-box.right .timeline-box-arrow { -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #FFF; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; float: left; height: 14px; margin-top: 66px; margin-left: -40px; width: 14px; z-index: 0; } .timeline .timeline-box .owl-carousel { border-radius: 0; padding: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; } @media (max-width: 767px) { .timeline .timeline-box { width: 100%; margin: 0 !important; margin-bottom: 2rem !important; } .timeline .timeline-box.left:before { content: none; } .timeline .timeline-box.left .timeline-box-arrow { display: none; } .timeline .timeline-box.right:before { content: none; } .timeline .timeline-box.right .timeline-box-arrow { display: none; } }*/ /* Testimonials */ .testimonial .testimonial-author>span strong { font-size: 17.6px; font-size: 1.1rem; font-weight: 800; color: #1c1f21; letter-spacing: -0.8px; } .testimonial .testimonial-author>span span { display: block; } .testimonial.testimonial-style-1 blockquote p { font-size: 19.2px; font-size: 1.2rem; letter-spacing: -0.5px; color: #1c1f21; } .testimonial.testimonial-style-2 { position: relative; } .testimonial.testimonial-style-3 .card { position: relative; z-index: 2; } .testimonial.testimonial-style-3 .testimonial-author-image img { margin: 32px auto 0; max-height: 65px; max-width: 65px; } .testimonial.testimonial-style-3 .testimonial-arrow { display: block; height: 25px; left: 50%; margin-top: -13px; margin-left: -13px; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 25px; z-index: 1; } /* Blockquote */ .blockquote { font-size: 20px; font-size: 1.25rem; } .blockquote .blockquote-footer-style-1:before { content: ''; } .blockquote.blockquote-style-1 { padding: 40px 0 0 50px; position: relative; } .blockquote.blockquote-style-1:before { font-family: "Georgia", sans-serif !important; display: block; font-style: italic; content: "\201C"; font-size: 80px; position: absolute; left: 0; } .blockquote.blockquote-style-1.blockquote-dark:before { color: #1c1f21; } .blockquote.blockquote-style-1.blockquote-light:before { color: #FFF; } .blockquote.blockquote-style-2 { border-left: 5px solid #707070; padding-left: 24px; padding-left: 1.5rem; } .blockquote.blockquote-style-2.blockquote-dark { border-left-color: #1c1f21; } .blockquote.blockquote-style-2.blockquote-light { border-left-color: #FFF; } /* Social Icons */ .social-icons { margin: 0; padding: 0; width: auto; } .social-icons li { display: inline-block; margin: -1px 1px 0 2px; padding: 0; border-radius: 100%; overflow: visible; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3); } .social-icons li a { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; background: #FFF; border-radius: 100%; display: block; height: 2.4em; font-size: 1.1em; line-height: 2.4em; width: 2.4em; text-align: center; color: #999; text-decoration: none; } .social-icons li:hover a { background: #171717; color: #FFF !important; } .social-icons li:hover.social-icons-twitter a { background: #1aa9e1 !important; } .social-icons li:hover.social-icons-facebook a { background: #3b5a9a !important; } .social-icons li:hover.social-icons-linkedin a { background: #0073b2 !important; } .social-icons li:hover.social-icons-rss a { background: #ff8201 !important; } .social-icons li:hover.social-icons-googleplus a { background: #dd4b39 !important; } .social-icons li:hover.social-icons-pinterest a { background: #cc2127 !important; } .social-icons li:hover.social-icons-youtube a { background: #c3191e !important; } .social-icons li:hover.social-icons-instagram a { background: #7c4a3a !important; } .social-icons li:hover.social-icons-skype a { background: #00b0f6 !important; } .social-icons li:hover.social-icons-email a { background: #dd4b39 !important; } .social-icons li:hover.social-icons-vk a { background: #6383a8 !important; } .social-icons li:hover.social-icons-xing a { background: #1a7576 !important; } .social-icons li:hover.social-icons-tumblr a { background: #304e6c !important; } .social-icons li:hover.social-icons-reddit a { background: #ff4107 !important; } .social-icons li:hover.social-icons-dribbble a { background: #ea4c89 !important; } .social-icons.header-top-social-icons li:hover a { color: #FFF; } .social-icons.header-social-icons li a { width: 2.6em; height: 2.6em; font-size: 0.9em; line-height: 2.6em; color: #1c1f21; } .social-icons.header-social-icons li:hover a { color: #FFF; } .social-icons.social-icons-border li a { background: transparent; border: 2px solid #FFF; -webkit-box-sizing: content-box; box-sizing: content-box; } .social-icons.social-icons-transparent li { -webkit-box-shadow: none; box-shadow: none; } .social-icons.social-icons-transparent li a { background: transparent; } .social-icons.social-icons-dark li a { color: #FFF; background: #2E3237; } .social-icons.social-icons-light li a { color: #2E3237; background: #f1f3f7; } .social-icons.social-icons-icon-light li a { color: #1C1F21; } .social-icons.social-icons-icon-dark li a { color: #1c1f21; } .social-icons.social-icons-icon-dark li:hover a { color: #FFF !important; } .social-icons.social-icons-pills li a { color: #FFF; background-color: #CCC; border-radius: 0; } .social-icons.social-icons-1 li a { font-size: 11.2px; font-size: 0.7rem; } .social-icons.social-icons-2 li a { font-size: 12.8px; font-size: 0.8rem; } .social-icons.social-icons-3 li a { font-size: 16px; font-size: 1rem; } .social-icons.social-icons-4 li a { font-size: 19.2px; font-size: 1.2rem; } .social-icons.social-icons-5 li a { font-size: 1.5em; } html.sticky-header-active #header.header-transparent .header-social-icons li a i { color: #1c1f21; } html.sticky-header-active #header.header-transparent .header-social-icons li:hover a i { color: #FFF; } /* Call to Action */ .call-to-action { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 4.6153846154em 0; /* If have parallax */ /* Call To Action with Text Background */ } .call-to-action h1, .call-to-action h2, .call-to-action h3, .call-to-action h4, .call-to-action h5, .call-to-action h6 { margin-bottom: 0; } .call-to-action h2 { font-size: 2.1em; } .call-to-action p { font-size: 1.1em; } .call-to-action .btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .call-to-action .btn:not([class*="btn-icon-effect"]) strong { font-size: 19.2px; font-size: 1.2rem; margin-left: 12.8px; margin-left: 0.8rem; } .call-to-action>[class*="col-"] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .call-to-action>[class*="col-"]:nth-child(2) { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: center; } @media (max-width: 767px) { .call-to-action>[class*="col-"]:nth-child(2) { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .call-to-action .container, .call-to-action .container-fluid { position: relative; z-index: 3; } .call-to-action .container>.row, .call-to-action .container-fluid>.row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .call-to-action .container>.row>[class*="col-"], .call-to-action .container-fluid>.row>[class*="col-"] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .call-to-action .container>.row>[class*="col-"]:nth-child(2), .call-to-action .container-fluid>.row>[class*="col-"]:nth-child(2) { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: center; } @media (max-width: 767px) { .call-to-action .container>.row>[class*="col-"]:nth-child(2), .call-to-action .container-fluid>.row>[class*="col-"]:nth-child(2) { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (max-width: 767px) { .call-to-action>[class*="col-"]:not([class*="col-xs"]) { width: 100%; } .call-to-action .container>.row [class*="col-"]:not([class*="col-xs"]) { width: 100%; } } .call-to-action.call-to-action-height-1 { padding: 24.615px 0; padding: 1.5384615385rem 0; } .call-to-action.call-to-action-height-2 { padding: 49.23px 0; padding: 3.0769230769rem 0; } .call-to-action.call-to-action-height-3 { padding: 73.846px 0; padding: 4.6153846154rem 0; } .call-to-action.call-to-action-height-4 { padding: 98.461px 0; padding: 6.1538461538rem 0; } .call-to-action.call-to-action-height-5 { padding: 123.076px 0; padding: 7.6923076923rem 0; } .call-to-action.call-to-action-text-light .call-to-action-content h1, .call-to-action.call-to-action-text-light .call-to-action-content h2, .call-to-action.call-to-action-text-light .call-to-action-content h3, .call-to-action.call-to-action-text-light .call-to-action-content h4, .call-to-action.call-to-action-text-light .call-to-action-content h5, .call-to-action.call-to-action-text-light .call-to-action-content h6, .call-to-action.call-to-action-text-light .call-to-action-content p, .call-to-action.call-to-action-text-light .call-to-action-content a:not(.btn), .call-to-action.call-to-action-text-light .call-to-action-content span { color: #FFF; } .call-to-action .parallax-background { z-index: 0 !important; } .call-to-action.call-to-action-text-background { position: relative; overflow: hidden; } .call-to-action.call-to-action-text-background .text-background { position: absolute; left: 50%; bottom: 0; width: 100%; font-size: 5em; line-height: 0.1; opacity: 0.1; text-align: center; white-space: nowrap; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (min-width: 768px) { .call-to-action.call-to-action-text-background .text-background { max-width: 710px; font-size: 8em; } } @media (min-width: 992px) { .call-to-action.call-to-action-text-background .text-background { max-width: 940px; text-align: right; } } @media (min-width: 1200px) { .call-to-action.call-to-action-text-background .text-background { max-width: 1140px; font-size: 11em; } } .call-to-action.call-to-action-text-background .text-background.appear-animation { opacity: 0; } /* Responsive */ @media (max-width: 767px) { .call-to-action .call-to-action-content, .call-to-action .call-to-action-btn { margin: 0; padding: 20px; position: static; width: auto; } } /* Progress Bars */ .progress-bar-wrapper.progress-bar-style-1 .progress-bar-info { margin-bottom: 3.2px; margin-bottom: 0.2rem; position: relative; } .progress-bar-wrapper.progress-bar-style-1 .progress-bar-info label { font-weight: 700 !important; font-size: 1.0769230769em; color: #1c1f21; } .progress-bar-wrapper.progress-bar-style-1 .progress-bar-info .progress-bar-percent { float: right; font-size: 0.85em; margin-top: 0.2em; } .progress-bar-wrapper.progress-bar-style-1 .progress { overflow: visible; text-align: right; height: auto; } .progress-bar-wrapper.progress-bar-style-1 .progress-bar { position: relative; height: 3.2px; height: 0.2rem; } .progress-bar-wrapper.progress-bar-style-1 .progress-bar:after { content: ''; width: 12px; height: 12px; border: 3.2px solid #333; border: 0.2rem solid #333; border-radius: 50%; position: absolute; right: 0; top: -4px; margin: 0 -4px -4px; background: #FFF; } .progress-bar-wrapper.progress-bar-style-2 { text-align: center; } .progress-bar-wrapper.progress-bar-style-2 .progress-bar-info { margin: 0 auto 11.2px; margin: 0 auto 0.7rem; position: relative; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .progress-bar-wrapper.progress-bar-style-2 .progress-bar-info label { font-weight: 700 !important; font-size: 1.0769230769em; color: #1c1f21; } .progress-bar-wrapper.progress-bar-style-2 .progress-bar-info .progress-bar-percent { font-size: 0.85em; margin-top: 0.2em; } .progress-bar-wrapper.progress-bar-style-2 .progress { width: 3.2px; width: 0.2rem; height: 3.2px; height: 0.2rem; min-height: 200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin: 0 auto 16px; margin: 0 auto 1rem; overflow: visible; } .progress-bar-wrapper.progress-bar-style-2 .progress-bar { position: relative; width: 100%; margin: 0 auto; } .progress-bar-wrapper.progress-bar-style-2 .progress-bar:before { content: ''; width: 12px; height: 12px; border: 3.2px solid #333; border: 0.2rem solid #333; border-radius: 50%; position: absolute; top: 0; left: -4px; margin: -6px 0 0 0px; background: #FFF; } .progress { height: auto; } .progress .progress-bar { height: 16px; height: 1rem; width: 0; -webkit-transition: ease-in-out width 900ms, ease-in-out height 900ms; transition: ease-in-out width 900ms, ease-in-out height 900ms; } .progress .progress-bar.bg-dark { background-color: #1c1f21; } .progress .progress-bar.bg-dark:after { border-color: #1c1f21; } .progress .progress-bar.bg-light { background-color: #FFF; } .progress .progress-bar.bg-light:after { border-color: #FFF; } .progress .progress-bar.progress-bar-small { height: 10px; } /* Circular Bar */ .circular-bar { text-align: center; position: relative; min-height: 150px; } .circular-bar label { display: block; font-size: 1.8461538462em; position: absolute; left: 50%; top: 50%; margin: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 80%; font-weight: 800; color: #1c1f21; } /* Counters */ .counters .counter { text-align: center; margin: 50px 0; } @media (max-width: 767px) { .counters .counter { margin: 80px 0; } } .counters strong, .counters label { font-family: "Source Sans Pro", regular; } .counters i { display: block; font-size: 3.6923076923em; line-height: 1; margin-bottom: 4.8px; margin-bottom: 0.3rem; } .counters strong { display: block; font-weight: 900; font-size: 3.6923076923em; line-height: 1; margin-bottom: 4.8px; margin-bottom: 0.3rem; } .counters label { display: block; font-weight: 100; font-size: 1.1538461538em; line-height: 1; letter-spacing: 0.5px; } .counters.counters-xs strong, .counters.counters-xs i { font-size: 1.3846153846em; } .counters.counters-xs label { font-size: 0.7692307692em; } .counters.counters-sm strong, .counters.counters-sm i { font-size: 2.1538461538em; } .counters.counters-sm label { font-size: 0.9230769231em; } .counters.counters-lg strong, .counters.counters-lg i { font-size: 4.4615384615em; } .counters.counters-lg label { font-size: 1.3076923077em; } .counters.counters-xl strong, .counters.counters-xl i { font-size: 5.2307692308em; } .counters.counters-xl label { font-size: 1.3846153846em; } .counters.counters-light .counter { color: #FFF !important; } .counters.counters-light .counter strong, .counters.counters-light .counter i, .counters.counters-light .counter label { color: #FFF !important; } .counters.counters-dark .counter { color: #1c1f21 !important; } .counters.counters-dark .counter strong, .counters.counters-dark .counter i, .counters.counters-dark .counter label { color: #1c1f21 !important; } /* Scroll to Top */ html .scroll-to-top { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; background: #404040; border-radius: 100%; bottom: 10px; color: #FFF; display: block; height: 35px; opacity: 0; padding: 5px; position: fixed; text-align: center; text-decoration: none; width: 35px; z-index: 1040; font-size: 10px; right: 10px; } html .scroll-to-top:hover { opacity: 1; } html .scroll-to-top.visible { opacity: 0.75; } html .scroll-to-top i { position: relative; top: 1px; } html.lightbox-open .scroll-to-top { right: 27px; } html.ie11 .scroll-to-top { right: 25px; } /* Responsive */ @media (max-width: 991px) { html .scroll-to-top.hidden-mobile { display: none !important; } } /* Flags */ .flag { width: 16px; height: 11px; background: url(../img/flags.png) no-repeat; margin-top: -1px; } .flag.flag-ad { background-position: -16px 0; } .flag.flag-ae { background-position: -32px 0; } .flag.flag-af { background-position: -48px 0; } .flag.flag-ag { background-position: -64px 0; } .flag.flag-ai { background-position: -80px 0; } .flag.flag-al { background-position: -96px 0; } .flag.flag-am { background-position: -112px 0; } .flag.flag-an { background-position: -128px 0; } .flag.flag-ao { background-position: -144px 0; } .flag.flag-ar { background-position: -160px 0; } .flag.flag-as { background-position: -176px 0; } .flag.flag-at { background-position: -192px 0; } .flag.flag-au { background-position: -208px 0; } .flag.flag-aw { background-position: -224px 0; } .flag.flag-az { background-position: -240px 0; } .flag.flag-ba { background-position: 0 -11px; } .flag.flag-bb { background-position: -16px -11px; } .flag.flag-bd { background-position: -32px -11px; } .flag.flag-be { background-position: -48px -11px; } .flag.flag-bf { background-position: -64px -11px; } .flag.flag-bg { background-position: -80px -11px; } .flag.flag-bh { background-position: -96px -11px; } .flag.flag-bi { background-position: -112px -11px; } .flag.flag-bj { background-position: -128px -11px; } .flag.flag-bm { background-position: -144px -11px; } .flag.flag-bn { background-position: -160px -11px; } .flag.flag-bo { background-position: -176px -11px; } .flag.flag-br { background-position: -192px -11px; } .flag.flag-bs { background-position: -208px -11px; } .flag.flag-bt { background-position: -224px -11px; } .flag.flag-bv { background-position: -240px -11px; } .flag.flag-bw { background-position: 0 -22px; } .flag.flag-by { background-position: -16px -22px; } .flag.flag-bz { background-position: -32px -22px; } .flag.flag-ca { background-position: -48px -22px; } .flag.flag-catalonia { background-position: -64px -22px; } .flag.flag-cd { background-position: -80px -22px; } .flag.flag-cf { background-position: -96px -22px; } .flag.flag-cg { background-position: -112px -22px; } .flag.flag-ch { background-position: -128px -22px; } .flag.flag-ci { background-position: -144px -22px; } .flag.flag-ck { background-position: -160px -22px; } .flag.flag-cl { background-position: -176px -22px; } .flag.flag-cm { background-position: -192px -22px; } .flag.flag-cn { background-position: -208px -22px; } .flag.flag-co { background-position: -224px -22px; } .flag.flag-cr { background-position: -240px -22px; } .flag.flag-cu { background-position: 0 -33px; } .flag.flag-cv { background-position: -16px -33px; } .flag.flag-cw { background-position: -32px -33px; } .flag.flag-cy { background-position: -48px -33px; } .flag.flag-cz { background-position: -64px -33px; } .flag.flag-de { background-position: -80px -33px; } .flag.flag-dj { background-position: -96px -33px; } .flag.flag-dk { background-position: -112px -33px; } .flag.flag-dm { background-position: -128px -33px; } .flag.flag-do { background-position: -144px -33px; } .flag.flag-dz { background-position: -160px -33px; } .flag.flag-ec { background-position: -176px -33px; } .flag.flag-ee { background-position: -192px -33px; } .flag.flag-eg { background-position: -208px -33px; } .flag.flag-eh { background-position: -224px -33px; } .flag.flag-england { background-position: -240px -33px; } .flag.flag-er { background-position: 0 -44px; } .flag.flag-es { background-position: -16px -44px; } .flag.flag-et { background-position: -32px -44px; } .flag.flag-eu { background-position: -48px -44px; } .flag.flag-fi { background-position: -64px -44px; } .flag.flag-fj { background-position: -80px -44px; } .flag.flag-fk { background-position: -96px -44px; } .flag.flag-fm { background-position: -112px -44px; } .flag.flag-fo { background-position: -128px -44px; } .flag.flag-fr { background-position: -144px -44px; } .flag.flag-ga { background-position: -160px -44px; } .flag.flag-gb { background-position: -176px -44px; } .flag.flag-gd { background-position: -192px -44px; } .flag.flag-ge { background-position: -208px -44px; } .flag.flag-gf { background-position: -224px -44px; } .flag.flag-gg { background-position: -240px -44px; } .flag.flag-gh { background-position: 0 -55px; } .flag.flag-gi { background-position: -16px -55px; } .flag.flag-gl { background-position: -32px -55px; } .flag.flag-gm { background-position: -48px -55px; } .flag.flag-gn { background-position: -64px -55px; } .flag.flag-gp { background-position: -80px -55px; } .flag.flag-gq { background-position: -96px -55px; } .flag.flag-gr { background-position: -112px -55px; } .flag.flag-gs { background-position: -128px -55px; } .flag.flag-gt { background-position: -144px -55px; } .flag.flag-gu { background-position: -160px -55px; } .flag.flag-gw { background-position: -176px -55px; } .flag.flag-gy { background-position: -192px -55px; } .flag.flag-hk { background-position: -208px -55px; } .flag.flag-hm { background-position: -224px -55px; } .flag.flag-hn { background-position: -240px -55px; } .flag.flag-hr { background-position: 0 -66px; } .flag.flag-ht { background-position: -16px -66px; } .flag.flag-hu { background-position: -32px -66px; } .flag.flag-ic { background-position: -48px -66px; } .flag.flag-id { background-position: -64px -66px; } .flag.flag-ie { background-position: -80px -66px; } .flag.flag-il { background-position: -96px -66px; } .flag.flag-im { background-position: -112px -66px; } .flag.flag-in { background-position: -128px -66px; } .flag.flag-io { background-position: -144px -66px; } .flag.flag-iq { background-position: -160px -66px; } .flag.flag-ir { background-position: -176px -66px; } .flag.flag-is { background-position: -192px -66px; } .flag.flag-it { background-position: -208px -66px; } .flag.flag-je { background-position: -224px -66px; } .flag.flag-jm { background-position: -240px -66px; } .flag.flag-jo { background-position: 0 -77px; } .flag.flag-jp { background-position: -16px -77px; } .flag.flag-ke { background-position: -32px -77px; } .flag.flag-kg { background-position: -48px -77px; } .flag.flag-kh { background-position: -64px -77px; } .flag.flag-ki { background-position: -80px -77px; } .flag.flag-km { background-position: -96px -77px; } .flag.flag-kn { background-position: -112px -77px; } .flag.flag-kp { background-position: -128px -77px; } .flag.flag-kr { background-position: -144px -77px; } .flag.flag-kurdistan { background-position: -160px -77px; } .flag.flag-kw { background-position: -176px -77px; } .flag.flag-ky { background-position: -192px -77px; } .flag.flag-kz { background-position: -208px -77px; } .flag.flag-la { background-position: -224px -77px; } .flag.flag-lb { background-position: -240px -77px; } .flag.flag-lc { background-position: 0 -88px; } .flag.flag-li { background-position: -16px -88px; } .flag.flag-lk { background-position: -32px -88px; } .flag.flag-lr { background-position: -48px -88px; } .flag.flag-ls { background-position: -64px -88px; } .flag.flag-lt { background-position: -80px -88px; } .flag.flag-lu { background-position: -96px -88px; } .flag.flag-lv { background-position: -112px -88px; } .flag.flag-ly { background-position: -128px -88px; } .flag.flag-ma { background-position: -144px -88px; } .flag.flag-mc { background-position: -160px -88px; } .flag.flag-md { background-position: -176px -88px; } .flag.flag-me { background-position: -192px -88px; } .flag.flag-mg { background-position: -208px -88px; } .flag.flag-mh { background-position: -224px -88px; } .flag.flag-mk { background-position: -240px -88px; } .flag.flag-ml { background-position: 0 -99px; } .flag.flag-mm { background-position: -16px -99px; } .flag.flag-mn { background-position: -32px -99px; } .flag.flag-mo { background-position: -48px -99px; } .flag.flag-mp { background-position: -64px -99px; } .flag.flag-mq { background-position: -80px -99px; } .flag.flag-mr { background-position: -96px -99px; } .flag.flag-ms { background-position: -112px -99px; } .flag.flag-mt { background-position: -128px -99px; } .flag.flag-mu { background-position: -144px -99px; } .flag.flag-mv { background-position: -160px -99px; } .flag.flag-mw { background-position: -176px -99px; } .flag.flag-mx { background-position: -192px -99px; } .flag.flag-my { background-position: -208px -99px; } .flag.flag-mz { background-position: -224px -99px; } .flag.flag-na { background-position: -240px -99px; } .flag.flag-nc { background-position: 0 -110px; } .flag.flag-ne { background-position: -16px -110px; } .flag.flag-nf { background-position: -32px -110px; } .flag.flag-ng { background-position: -48px -110px; } .flag.flag-ni { background-position: -64px -110px; } .flag.flag-nl { background-position: -80px -110px; } .flag.flag-no { background-position: -96px -110px; } .flag.flag-np { background-position: -112px -110px; } .flag.flag-nr { background-position: -128px -110px; } .flag.flag-nu { background-position: -144px -110px; } .flag.flag-nz { background-position: -160px -110px; } .flag.flag-om { background-position: -176px -110px; } .flag.flag-pa { background-position: -192px -110px; } .flag.flag-pe { background-position: -208px -110px; } .flag.flag-pf { background-position: -224px -110px; } .flag.flag-pg { background-position: -240px -110px; } .flag.flag-ph { background-position: 0 -121px; } .flag.flag-pk { background-position: -16px -121px; } .flag.flag-pl { background-position: -32px -121px; } .flag.flag-pm { background-position: -48px -121px; } .flag.flag-pn { background-position: -64px -121px; } .flag.flag-pr { background-position: -80px -121px; } .flag.flag-ps { background-position: -96px -121px; } .flag.flag-pt { background-position: -112px -121px; } .flag.flag-pw { background-position: -128px -121px; } .flag.flag-py { background-position: -144px -121px; } .flag.flag-qa { background-position: -160px -121px; } .flag.flag-re { background-position: -176px -121px; } .flag.flag-ro { background-position: -192px -121px; } .flag.flag-rs { background-position: -208px -121px; } .flag.flag-ru { background-position: -224px -121px; } .flag.flag-rw { background-position: -240px -121px; } .flag.flag-sa { background-position: 0 -132px; } .flag.flag-sb { background-position: -16px -132px; } .flag.flag-sc { background-position: -32px -132px; } .flag.flag-scotland { background-position: -48px -132px; } .flag.flag-sd { background-position: -64px -132px; } .flag.flag-se { background-position: -80px -132px; } .flag.flag-sg { background-position: -96px -132px; } .flag.flag-sh { background-position: -112px -132px; } .flag.flag-si { background-position: -128px -132px; } .flag.flag-sk { background-position: -144px -132px; } .flag.flag-sl { background-position: -160px -132px; } .flag.flag-sm { background-position: -176px -132px; } .flag.flag-sn { background-position: -192px -132px; } .flag.flag-so { background-position: -208px -132px; } .flag.flag-somaliland { background-position: -224px -132px; } .flag.flag-sr { background-position: -240px -132px; } .flag.flag-ss { background-position: 0 -143px; } .flag.flag-st { background-position: -16px -143px; } .flag.flag-sv { background-position: -32px -143px; } .flag.flag-sx { background-position: -48px -143px; } .flag.flag-sy { background-position: -64px -143px; } .flag.flag-sz { background-position: -80px -143px; } .flag.flag-tc { background-position: -96px -143px; } .flag.flag-td { background-position: -112px -143px; } .flag.flag-tf { background-position: -128px -143px; } .flag.flag-tg { background-position: -144px -143px; } .flag.flag-th { background-position: -160px -143px; } .flag.flag-tibet { background-position: -176px -143px; } .flag.flag-tj { background-position: -192px -143px; } .flag.flag-tk { background-position: -208px -143px; } .flag.flag-tl { background-position: -224px -143px; } .flag.flag-tm { background-position: -240px -143px; } .flag.flag-tn { background-position: 0 -154px; } .flag.flag-to { background-position: -16px -154px; } .flag.flag-tr { background-position: -32px -154px; } .flag.flag-tt { background-position: -48px -154px; } .flag.flag-tv { background-position: -64px -154px; } .flag.flag-tw { background-position: -80px -154px; } .flag.flag-tz { background-position: -96px -154px; } .flag.flag-ua { background-position: -112px -154px; } .flag.flag-ug { background-position: -128px -154px; } .flag.flag-um { background-position: -144px -154px; } .flag.flag-us { background-position: -160px -154px; } .flag.flag-uy { background-position: -176px -154px; } .flag.flag-uz { background-position: -192px -154px; } .flag.flag-va { background-position: -208px -154px; } .flag.flag-vc { background-position: -224px -154px; } .flag.flag-ve { background-position: -240px -154px; } .flag.flag-vg { background-position: 0 -165px; } .flag.flag-vi { background-position: -16px -165px; } .flag.flag-vn { background-position: -32px -165px; } .flag.flag-vu { background-position: -48px -165px; } .flag.flag-wales { background-position: -64px -165px; } .flag.flag-wf { background-position: -80px -165px; } .flag.flag-ws { background-position: -96px -165px; } .flag.flag-xk { background-position: -112px -165px; } .flag.flag-ye { background-position: -128px -165px; } .flag.flag-yt { background-position: -144px -165px; } .flag.flag-za { background-position: -160px -165px; } .flag.flag-zanzibar { background-position: -176px -165px; } .flag.flag-zm { background-position: -192px -165px; } .flag.flag-zw { background-position: -208px -165px; } .loading-overlay-showing { overflow: hidden; } .loading-overlay-showing>.loading-overlay { opacity: 1; visibility: visible; } .loading-overlay { -webkit-transition: visibility 0s ease-in-out 0.5s, opacity 0.5s ease-in-out; transition: visibility 0s ease-in-out 0.5s, opacity 0.5s ease-in-out; bottom: 0; left: 0; position: absolute; opacity: 0; right: 0; top: 0; visibility: hidden; background: #FFF; } body>.loading-overlay { position: fixed; z-index: 999999; } /* Bounce Loading */ .bounce-loader { -webkit-transition: all 0.2s; transition: all 0.2s; margin: -9px 0 0 -35px; text-align: center; width: 70px; left: 50%; position: absolute; top: 50%; z-index: 10000; } .bounce-loader .bounce1, .bounce-loader .bounce2, .bounce-loader .bounce3 { -webkit-animation: 1.4s ease-in-out 0s normal both infinite bouncedelay; animation: 1.4s ease-in-out 0s normal both infinite bouncedelay; background-color: #CCC; border-radius: 100%; -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); display: inline-block; height: 18px; width: 18px; } .bounce-loader .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .bounce-loader .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } html.safari.iphone .bounce-loader .bounce1, html.safari.iphone .bounce-loader .bounce2, html.safari.iphone .bounce-loader .bounce3 { -webkit-animation: 1.4s ease-in-out infinite bouncedelay; animation: 1.4s ease-in-out infinite bouncedelay; } /* Dropdowns */ .dropdown-menu { font-size: inherit; padding: 5px; border: 0; -webkit-box-shadow: 0 0 45px rgba(0, 0, 0, 0.08); box-shadow: 0 0 45px rgba(0, 0, 0, 0.08); background: #252A2C; text-align: left; } .dropdown-menu>li { border-bottom: 1px solid #303537; } .dropdown-menu>li>a { display: block; padding: 7px; line-height: 1.42857143; } .dropdown-menu>li:last-child { border-bottom: 0; } .dropdown-menu li a:not(.btn) { color: #9D9D9D; } .dropdown-menu li:hover a:not(.btn) { color: #FFF; } .dropdown-toggle:after { content: none; } /* Particles */ @-webkit-keyframes expandParticles { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes expandParticles { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .expandParticles { -webkit-animation-name: expandParticles; animation-name: expandParticles; } /* Particles */ .particles { position: relative; min-height: 380px; /* Rect */ /* Particles SVG */ /* Counter Style */ } .particles .particles-rect { position: absolute; right: 3%; width: 45%; min-width: 150px; height: 83%; } .particles .svg-particles { position: absolute; top: 50%; left: 47%; width: 114%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .particles .svg-particles .g-particles { -webkit-transform-origin: center; transform-origin: center; } .particles .particles-counter { position: relative; width: 100%; -webkit-box-shadow: 0px 4px 50px -19px rgba(28, 31, 33, 0.4); box-shadow: 0px 4px 50px -19px rgba(28, 31, 33, 0.4); } .particles .particles-counter .counters { padding: 28.8px; padding: 1.8rem; } .particles .particles-counter .counters [class*="col-"] { border-color: rgba(46, 50, 55, 0.1); border-style: solid; border-width: 0; } .particles .particles-counter .counters [class*="col-"]:nth-child(1) { border-right-width: 1px; border-bottom-width: 1px; } .particles .particles-counter .counters [class*="col-"]:nth-child(2) { border-bottom-width: 1px; } .particles .particles-counter .counters [class*="col-"]:nth-child(3) { border-right-width: 1px; } /* IE */ html.ie .particles .img-fluid { -ms-flex-negative: 0; flex-shrink: 0; } /* Particles Responsive */ @media (max-width: 1199px) { .particles .particles-rect { right: -6%; } .particles .svg-particles { width: 134%; } } @media (max-width: 991px) { .particles { min-height: 318px; } .particles>img { max-height: 181px; } .particles .particles-rect { height: 70%; } .particles .svg-particles { width: 114%; } .particles .particles-counter .counters { padding: 1rem; } } @media (max-width: 767px) { .particles { min-height: 50vw; margin: 6vw 0 0; } .particles>img { height: auto; max-height: none; } .particles .svg-particles { display: none; } } @media (max-width: 575px) { .particles .particles-counter .counters { padding: 1.8rem; } .particles .particles-counter .counters [class*="col-"]:nth-child(1) { border-right-width: 0; border-bottom-width: 1px; } .particles .particles-counter .counters [class*="col-"]:nth-child(2) { border-bottom-width: 1px; } .particles .particles-counter .counters [class*="col-"]:nth-child(3) { border-right-width: 0; border-bottom-width: 1px; } } /* Steps */ .steps { position: relative; min-height: 320px; /* Steps Style 2 */ /* Steps Style 3 */ /* Steps Style 4 */ } .steps .item { position: absolute; background-size: cover; top: 50%; padding: 1.5384615385em; text-align: center; width: 155px; height: 155px; border: 6px solid #000; border-color: #CCC; border-radius: 100%; overflow: hidden; -webkit-transition: ease all 300ms; transition: ease all 300ms; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .steps .item:not(.active):not(.no-bg-color) { background: #f1f3f7 !important; } .steps .item:nth-child(2) { left: 10.4%; } .steps .item:nth-child(3) { left: 50%; } .steps .item:nth-child(4) { left: 89.5%; } .steps .item .item-title { position: absolute; top: 63%; left: 50%; width: 100%; color: #1c1f21; font-size: 1.3076923077em; font-weight: 900; padding: 0.7692307692em 0; -webkit-transition: ease all 300ms; transition: ease all 300ms; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .steps .item .item-title:after { content: ''; display: block; position: absolute; top: 6px; right: 0; bottom: 0; left: 0; background: #f1f3f7; z-index: -1; } .steps .item .item-title span { position: absolute; top: -49px; left: 50%; font-size: 5.3846153846em; line-height: 1; font-weight: 700; color: #CCC; z-index: -2; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .steps .item p, .steps .item a { display: none; } .steps .item.active { width: 280px; height: 280px; border-color: #1c1f21; } .steps .item.active:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 6px solid #f1f3f7; border-radius: 100%; z-index: 1; } .steps .item.active:after { content: ''; display: block; position: absolute; background: #FFF; top: 40%; left: 0; width: 100%; height: 70%; z-index: 0; } .steps .item.active .item-title { top: 39%; color: #FFF; font-size: 2.6153846154em; z-index: 1; } .steps .item.active .item-title span { position: static; font-size: inherit; font-weight: 900; margin-right: 7px; } .steps .item.active .item-title:after { content: none; } .steps .item.active p, .steps .item.active a { display: block; } .steps .item.active p { position: relative; color: #707070; top: 50%; margin: 0; line-height: 1.8461538462em; z-index: 1; } .steps .item.active a { position: absolute; left: 50%; bottom: 32px; font-weight: bold; z-index: 1; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .steps .dots { position: absolute; top: 50%; left: 50%; width: 73%; overflow: hidden; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .steps .dots .dots-mask { position: relative; z-index: 2; } .steps .dots .dots-color { position: absolute; top: 7px; right: 0; bottom: 7px; left: 0; background: #CCC; } .steps .dots .dots-color-dark { position: absolute; top: 7px; bottom: 7px; left: 0; width: 190px; background: #1c1f21; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .steps .dots .dots-color-dark._left { left: 10%; } .steps .dots .dots-color-dark._center { left: 50%; } .steps .dots .dots-color-dark._right { left: 90%; } .steps.steps-style-2 .item { width: 280px; height: 280px; border: none; } .steps.steps-style-2 .item:before, .steps.steps-style-2 .item:after { content: none; } .steps.steps-style-2 .item:not(.active) { background: transparent !important; } .steps.steps-style-2 .item .item-title { top: 30%; color: #1c1f21; font-size: 16px; font-size: 1rem; } .steps.steps-style-2 .item .item-title span { position: static; font-size: 4em; font-weight: 900; margin-right: 7px; -webkit-transition: ease color 300ms; transition: ease color 300ms; } .steps.steps-style-2 .item .item-title:after { content: ''; right: 32px; left: 32px; background: #FFF; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .steps.steps-style-2 .item>i { position: absolute; top: 51.2px; top: 3.2rem; left: 50%; font-size: 33.6px; font-size: 2.1rem; z-index: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transition: ease color 300ms; transition: ease color 300ms; } .steps.steps-style-2 .item p, .steps.steps-style-2 .item a { display: block; } .steps.steps-style-2 .item p { position: relative; color: #707070; top: 50%; margin: 0; line-height: 1.8461538462em; z-index: 1; } .steps.steps-style-2 .item a { position: absolute; left: 50%; bottom: 32px; font-weight: bold; z-index: 1; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .steps.steps-style-2 .item.active .item-title { color: #CCC; } .steps.steps-style-2 .item.active .item-title span, .steps.steps-style-2 .item.active>i { color: #1c1f21; } .steps.steps-style-2 .dots { top: 38%; width: 85%; } .steps.steps-style-3 { min-height: 170px; } .steps.steps-style-3 .item { width: 280px; height: 180px; border: none; overflow: visible; } .steps.steps-style-3 .item:before, .steps.steps-style-3 .item:after { content: none; } .steps.steps-style-3 .item:not(.active) { background: transparent !important; } .steps.steps-style-3 .item .item-title { top: 50%; color: #1c1f21; font-size: 16px; font-size: 1rem; } .steps.steps-style-3 .item .item-title span { font-size: 5em; top: -73px; font-weight: 700; -webkit-transition: ease color 300ms; transition: ease color 300ms; } .steps.steps-style-3 .item .item-title:after { content: ''; right: 37px; left: 93px; background: #FFF; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .steps.steps-style-3 .item.active .item-title { color: #CCC; } .steps.steps-style-3 .item.active .item-title span { position: absolute; color: #1c1f21; } .steps.steps-style-3 .item:nth-child(2) .item-title { padding-left: 113px; } .steps.steps-style-3 .item:nth-child(3) .item-title { padding-left: 55px; } .steps.steps-style-3 .item:nth-child(4) .item-title { padding-left: 48px; } .steps.steps-style-3 .dots { top: 50%; width: 73%; left: 53%; } .steps.steps-style-4 .item { background-size: cover !important; background-position: center !important; } .steps.steps-style-4 .item:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 6px solid #f1f3f7; border-radius: 100%; z-index: 1; } .steps.steps-style-4 .item:after { content: none; } .steps.steps-style-4 .item:not(.active) { background: inherit; } .steps.steps-style-4 .item:nth-child(2) { left: 16.2%; } .steps.steps-style-4 .item:nth-child(4) { left: 84.3%; } /* Responsive */ @media (max-width: 991px) { .steps { min-height: 750px; margin-top: 70px; margin-bottom: 30px; /* Steps Style 2 */ /* Steps Style 3 */ } .steps .item { left: 50% !important; } .steps .item:nth-child(2) { top: 10%; } .steps .item:nth-child(3) { top: 50%; } .steps .item:nth-child(4) { top: 90%; } .steps .dots { top: 48%; -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .steps.steps-style-2 .item:after { content: ''; position: absolute; top: 30px; bottom: 30px; left: 0; width: 100%; height: 82%; background: #FFF; z-index: -1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .steps.steps-style-3 { min-height: 600px; margin-top: 0; margin-bottom: 2.2rem; } .steps.steps-style-3 .item { height: 130px; background-color: #FFF; } .steps.steps-style-3 .item:not(.active) { background: #FFF !important; } .steps.steps-style-3 .item .item-title { top: 80%; } .steps.steps-style-3 .dots { left: 50%; } } @media (max-width: 767px) { .steps { /* Steps Style 2 */ /* Steps Style 3 */ } .steps .dots { width: 510px; } .steps.steps-style-2 .dots { width: 590px; } .steps.steps-style-3 .dots { width: 430px; } } /* Steps Shadow */ @media (min-width: 992px) { .steps-shadow:before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(rgba(255, 255, 255, 0))); background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0)); visibility: hidden; opacity: 0; z-index: 1; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .steps-shadow.active:before { visibility: visible; opacity: 1; } } /* Learn More */ .learn-more { color: #1c1f21; } .learn-more:hover { color: #CCC; } .learn-more:hover i { margin-left: 8px; } .learn-more i { margin-left: 5px; -webkit-transition: ease margin-left 300ms; transition: ease margin-left 300ms; } /* IE */ html.ie .steps { /* Steps Style 2 */ } html.ie .steps.steps-style-2 .item .item-title span { position: relative; top: 0; left: 27px; z-index: 0; } /* Double Carousel */ .double-carousel { overflow: hidden; /* Default Style */ } .double-carousel .owl-carousel .owl-stage { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .double-carousel .owl-carousel .owl-item.active.current .card { -webkit-transform: scale(1); transform: scale(1); } .double-carousel .owl-carousel .owl-item .card { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #FFF; -webkit-transition: ease all 300ms; transition: ease all 300ms; -webkit-transform: scale(0.8); transform: scale(0.8); } .double-carousel .owl-carousel .owl-item .card>*:not([class*="col-"]) { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .double-carousel .owl-carousel .owl-item .card p { line-height: 1.7; } .double-carousel .owl-carousel .owl-item .card strong { font-size: 0.9em; line-height: 1; } @supports ((-o-object-fit: scale-down) or (object-fit: scale-down)) { .double-carousel .owl-carousel .owl-item .card>img { -o-object-fit: scale-down; object-fit: scale-down; } } .double-carousel .owl-carousel .owl-item .card.card-logo { height: 140px; width: 100%; } .double-carousel .owl-carousel .owl-item .card.card-logo .card-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .double-carousel .owl-carousel .owl-item .card.card-logo .card-body img { max-width: 80%; max-height: 80%; width: auto; margin: 0 auto; } .double-carousel .owl-carousel .owl-item:not(.current) .card { -webkit-filter: blur(2px); } .double-carousel .owl-carousel .owl-item:not(.current) .card.card-logo .card-body img { -webkit-transform: scale(0.8); transform: scale(0.8); } /* Edge */ html.edge .double-carousel .owl-carousel .owl-item .card { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } html.edge .double-carousel .owl-carousel .owl-item:not(.current) .card { -webkit-filter: none; } /* IE */ html.ie .double-carousel .owl-carousel .owl-item .card>*:not([class*="col-"]) { -ms-flex-preferred-size: auto; flex-basis: auto; } html.ie .double-carousel .owl-carousel .owl-item .card.card-logo .card-body img { width: 100%; } @media (min-width: 768px) { .double-carousel { min-height: 200px; /* If have animation on wrapper */ } .double-carousel .nav { position: absolute; top: 55.5%; left: 35vw; width: 30vw; margin-top: -10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .double-carousel .nav .title-left { position: absolute; width: 30%; left: 24%; top: 50%; text-align: right; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .double-carousel .nav .title-left span { color: #1c1f21; font-size: 1.2307692308em; font-family: "Source Sans Pro", regular; font-weight: 600; } .double-carousel .nav .title-left span>span { display: none; } .double-carousel .nav .title-right { position: absolute; width: 30%; left: 76%; top: 50%; text-align: left; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .double-carousel .nav .title-right span { color: #1c1f21; font-size: 1.2307692308em; font-family: "Source Sans Pro", regular; font-weight: 600; } .double-carousel .nav .arrows { position: absolute; width: 90%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .double-carousel .nav .arrows .arrow-left, .double-carousel .nav .arrows .arrow-right { color: #CCC; width: 2.3076923077em; height: 2.3076923077em; line-height: 2.3076923077em; text-align: center; cursor: pointer; font-size: 1.9230769231em; } .double-carousel .nav .arrows .arrow-left { float: left; } .double-carousel .nav .arrows .arrow-right { float: right; } .double-carousel .owl-carousel .owl-dots { position: absolute; top: 50%; left: -18vw; width: 6vw; margin-top: 0 !important; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .double-carousel .owl-carousel .owl-dots .owl-dot { margin-top: 8px; } .double-carousel .owl-carousel .owl-dots .owl-dot span { width: 7px; height: 7px; margin: 4px 4px; } .double-carousel .owl-carousel .owl-dots .owl-dot.active span { background: #CCC; } .double-carousel .wrapper-left { position: absolute; top: 50%; right: 65vw; width: 35vw; margin-top: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .double-carousel .wrapper-left .owl-carousel { opacity: 0; visibility: hidden; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .double-carousel .wrapper-left .owl-carousel.show-carousel { opacity: 1; visibility: visible; } .double-carousel .wrapper-left .owl-carousel .owl-dots { display: none !important; } .double-carousel .wrapper-right { position: absolute; top: 50%; left: 65vw; width: 35vw; margin-top: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .double-carousel .wrapper-right .owl-carousel { opacity: 0; visibility: hidden; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .double-carousel .wrapper-right .owl-carousel.show-carousel { opacity: 1; visibility: visible; } .double-carousel .wrapper-right.appear-animation .owl-carousel .owl-dots { opacity: 0; -webkit-transition: ease opacity 500ms; transition: ease opacity 500ms; -webkit-transition-delay: 900ms; transition-delay: 900ms; } .double-carousel .wrapper-right.appear-animation.appear-animation-visible .owl-carousel .owl-dots { opacity: 1; } /* Internet Explorer 10/11 */ html.ie10 .double-carousel .nav, html.ie11 .double-carousel .nav { min-height: 200px; z-index: 1; } } /* Double Carousel Responsive */ @media (min-width: 768px) and (max-width: 1199px) { .double-carousel .nav { top: 60%; } .double-carousel .nav .title-left { width: 80%; left: 50%; top: -62px; text-align: center; } .double-carousel .nav .title-left span>span { display: inline-block; } .double-carousel .nav .title-right { width: 80%; left: 50%; top: -40px; text-align: center; } .double-carousel .owl-carousel .owl-dots { top: 70%; left: -22.6vw; width: 15vw; } } @media (min-width: 768px) and (max-width: 991px) { .double-carousel .wrapper-left, .double-carousel .wrapper-right { width: 32vw; } } @media (max-width: 1199px) { .double-carousel .nav { margin-top: 10px; } } @media (max-width: 767px) { .double-carousel .nav { display: none; } .double-carousel .owl-carousel { margin-bottom: 0; } .double-carousel .owl-carousel .owl-item .card { min-height: 120px; margin-top: 20px; -webkit-box-align: unset; -ms-flex-align: unset; align-items: unset; } .double-carousel .owl-carousel .owl-dots { display: none; } } /* Slider Range */ .slider-range-wrapper { padding-top: 10px; } .slider-range-wrapper .slider-range { height: 3px; border: none; background: #f1f1f1; -webkit-box-shadow: none; box-shadow: none; } .slider-range-wrapper .slider-range .noUi-connect { background-color: #CCC; } .slider-range-wrapper .slider-range .noUi-handle { background-color: #CCC; width: 12px; height: 12px; border-radius: 100%; border: none; -webkit-box-shadow: none; box-shadow: none; top: -5px; left: -11px; right: -7px !important; cursor: pointer; outline: none; } .slider-range-wrapper .slider-range .noUi-handle:after, .slider-range-wrapper .slider-range .noUi-handle:before { content: none; } .slider-range-wrapper form input { background: transparent; border: none; max-width: 40px; color: #707070; font-size: 14.4px; font-size: 0.9rem; } /* Pagination */ .pagination .page-item+.page-item { margin-left: 5px; } .pagination .page-item+.page-item.active .page-link { background: #CCC; color: #FFF !important; } .pagination .page-link { color: #707070; background: transparent; font-weight: bold; } .pagination .page-link.next, .pagination .page-link.prev { border: none; } .pagination .page-link:hover:not(.next):not(.prev) { color: #CCC; border: 1px solid #CCC; } /* Shop */ .product-info-rate.product-info-rate-sm i { font-size: 11.2px; font-size: 0.7rem; } .product-info-rate.product-info-rate-lg i { font-size: 19.2px; font-size: 1.2rem; } /* Shop Cart */ .shop-cart .shop-cart-table thead tr>th { padding: 19.2px 0; padding: 1.2rem 0; color: #1c1f21; font-family: "Source Sans Pro", regular; } .shop-cart .shop-cart-table thead tr>th strong { font-weight: 700; } .shop-cart .shop-cart-table tbody { border-top: 1px solid #DAE2E6; } .shop-cart .shop-cart-table tbody>tr:first-child { border-top: 0; } .shop-cart .shop-cart-table tbody>tr+tr { border-top: 1px solid #DAE2E6; border-bottom: 1px solid #DAE2E6; } .shop-cart .shop-cart-table tbody>tr>td { padding: 22.4px 9.6px; padding: 1.4rem 0.6rem; } .shop-cart .shop-cart-table tbody .product-subtotal { color: #1c1f21; font-size: 14.4px; font-size: 0.9rem; font-family: "Source Sans Pro", regular; } .shop-cart .shop-cart-table .product-remove { width: 7%; text-align: center; } .shop-cart .shop-cart-table .product-thumbnail { width: 85px; } .shop-cart .shop-cart-table .product-name { width: 40%; } /* Cart Totals */ .cart-totals tbody { border-top: 1px solid #DAE2E6; } .cart-totals tbody>tr:first-child { border-top: 0; } .cart-totals tbody>tr+tr { border-top: 1px solid #DAE2E6; border-bottom: 1px solid #DAE2E6; } .cart-totals tbody>tr>td { padding: 14.4px 0; padding: 0.9rem 0; } .cart-totals tbody>tr>td:first-child { padding-left: 16px; padding-left: 1rem; } .cart-totals .cart-total-label { font-weight: 600; } .cart-totals .cart-total-value { font-weight: 700; font-size: 14.4px; font-size: 0.9rem; font-family: "Source Sans Pro", regular ; color: #1c1f21; } /* OFF Tag */ .off-tag-top-left { position: absolute; top: -11.2px; top: -0.7rem; left: -11.2px; left: -0.7rem; z-index: 1; } .off-tag-top-right { position: absolute; top: -11.2px; top: -0.7rem; right: -11.2px; right: -0.7rem; z-index: 1; } .off-tag-bottom-left { position: absolute; bottom: -11.2px; bottom: -0.7rem; left: -11.2px; left: -0.7rem; z-index: 1; } .off-tag-bottom-right { position: absolute; bottom: -11.2px; bottom: -0.7rem; right: -11.2px; right: -0.7rem; z-index: 1; } .shop-now-bottom { bottom: 29px; } /* Blog */ .blog-post .blog-post-header { position: relative; overflow: hidden; } .blog-post .blog-post-header:hover .post-format-icon { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .blog-post .blog-post-header .post-format-icon { position: absolute; left: 15px; bottom: 15px; opacity: 0; pointer-events: none; z-index: 2; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) transform 300ms 200ms, cubic-bezier(0.55, 0, 0.1, 1) opacity 300ms; transition: cubic-bezier(0.55, 0, 0.1, 1) transform 300ms 200ms, cubic-bezier(0.55, 0, 0.1, 1) opacity 300ms; } /* Comments */ ul.comments { list-style: none; margin: 0; padding: 0; } ul.comments li { padding: 10px 0 0 55px; } ul.comments li img.avatar { height: 55px; width: 55px; } ul.comments li ul.reply { margin: 0; } ul.comments li a { text-decoration: none; } ul.comments li .avatar { margin-left: -55px; margin-top: 16px; margin-top: 1rem; } ul.comments li .comment { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; } ul.comments .comment-block { border-radius: 5px; padding: 20px 20px 30px; position: relative; width: 100%; } ul.comments .comment-block p { font-size: 0.9em; line-height: 21px; margin: 0; padding: 0; } ul.comments .comment-block .comment-by { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1em; line-height: 21px; margin: 0; padding: 0 0 5px 0; } ul.comments .comment-block .comment-by .comment-date { padding: 0 16px; padding: 0 1rem; margin: 0 16px; margin: 0 1rem; border-right: 1px solid #dadada; border-left: 1px solid #dadada; } ul.comments .comment-block .comment-by .comment-rating { padding: 0 16px 0 0; padding: 0 1rem 0 0; margin: 0 16px 0 0; margin: 0 1rem 0 0; border-right: 1px solid #dadada; } /* Responsive */ @media (max-width: 991px) { ul.comments .comment-block .comment-by { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } ul.comments .comment-block .comment-by .comment-author { margin-bottom: 0.3rem; } ul.comments .comment-block .comment-by .comment-date { border: 0; margin: 0; padding: 0; } ul.comments .comment-block .comment-by .comment-reply { position: absolute; top: 1rem; right: 1rem; } } @media (max-width: 575px) { ul.comments li { border-left: 8px solid #DDDDDD; padding: 0 0 0 10px; } } /* Word Rotator */ .word-rotator i, .word-rotator em, .word-rotator b { font-style: normal; font-weight: inherit; } .word-rotator-words { display: inline-block; position: relative; text-align: left; } .word-rotator-words b { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; } .word-rotator-words b.is-visible { position: relative; } /* rotate-1 */ .word-rotator.rotate-1 .word-rotator-words { -webkit-perspective: 300px; perspective: 300px; } .word-rotator.rotate-1 b { opacity: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .word-rotator.rotate-1 b.is-visible { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-animation: word-rotator-rotate-1-in 1.2s; animation: word-rotator-rotate-1-in 1.2s; } .word-rotator.rotate-1 b.is-hidden { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); -webkit-animation: word-rotator-rotate-1-out 1.2s; animation: word-rotator-rotate-1-out 1.2s; } @-webkit-keyframes word-rotator-rotate-1-in { 0% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } 35% { -webkit-transform: rotateX(120deg); transform: rotateX(120deg); opacity: 0; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); opacity: 1; } } @keyframes word-rotator-rotate-1-in { 0% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } 35% { -webkit-transform: rotateX(120deg); transform: rotateX(120deg); opacity: 0; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); opacity: 1; } } @-webkit-keyframes word-rotator-rotate-1-out { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } 35% { -webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 1; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } } @keyframes word-rotator-rotate-1-out { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } 35% { -webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 1; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } } /* type */ .word-rotator.type .word-rotator-words { vertical-align: top; overflow: hidden; position: relative; padding-right: 3px; } .word-rotator.type .word-rotator-words::after { content: ' '; position: absolute; right: 0; top: 5%; height: 90%; width: 1px; display: block; background-color: transparent; } .word-rotator.type .word-rotator-words.waiting::after { -webkit-animation: 1s word-rotator-pulse step-end infinite; animation: 1s word-rotator-pulse step-end infinite; } .word-rotator.type .word-rotator-words.selected { background-color: #1c1f21; } .word-rotator.type .word-rotator-words.selected::after { visibility: hidden; } .word-rotator.type .word-rotator-words.selected b { color: #FFF; } .word-rotator.type b { visibility: hidden; } .word-rotator.type b.is-visible { visibility: visible; } .word-rotator.type i { position: absolute; visibility: hidden; } .word-rotator.type i.in { position: relative; visibility: visible; } @-webkit-keyframes word-rotator-pulse { from, to { background-color: transparent; } 50% { background-color: black; } } @keyframes word-rotator-pulse { from, to { background-color: transparent; } 50% { background-color: black; } } @-webkit-keyframes word-rotator-pulse-light { from, to { background-color: transparent; } 50% { background-color: white; } } @keyframes word-rotator-pulse-light { from, to { background-color: transparent; } 50% { background-color: white; } } /* rotate-2 */ .word-rotator.rotate-2 .word-rotator-words { -webkit-perspective: 300px; perspective: 300px; } .word-rotator.rotate-2 i, .word-rotator.rotate-2 em { display: inline-block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .word-rotator.rotate-2 b { opacity: 0; } .word-rotator.rotate-2 i { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); opacity: 0; } .is-visible .word-rotator.rotate-2 i { opacity: 1; } .word-rotator.rotate-2 i.in { -webkit-animation: word-rotator-rotate-2-in .4s forwards; animation: word-rotator-rotate-2-in .4s forwards; } .word-rotator.rotate-2 i.out { -webkit-animation: word-rotator-rotate-2-out .4s forwards; animation: word-rotator-rotate-2-out .4s forwards; } .word-rotator.rotate-2 em { -webkit-transform: translateZ(20px); transform: translateZ(20px); } .no-csstransitions .word-rotator.rotate-2 i { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 0; } .no-csstransitions .word-rotator.rotate-2 i em { -webkit-transform: scale(1); transform: scale(1); } .no-csstransitions .word-rotator.rotate-2 .is-visible i { opacity: 1; } @-webkit-keyframes word-rotator-rotate-2-in { 0% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(-10deg); transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0deg); transform: translateZ(-20px) rotateX(0deg); } } @keyframes word-rotator-rotate-2-in { 0% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(-10deg); transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0deg); transform: translateZ(-20px) rotateX(0deg); } } @-webkit-keyframes word-rotator-rotate-2-out { 0% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0); transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-100deg); transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-90deg); transform: translateZ(-20px) rotateX(-90deg); } } @keyframes word-rotator-rotate-2-out { 0% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0); transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-100deg); transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-90deg); transform: translateZ(-20px) rotateX(-90deg); } } /* loading-bar */ .word-rotator.loading-bar span { display: inline-block; padding: .2em 0; } .word-rotator.loading-bar .word-rotator-words { overflow: hidden; vertical-align: top; } .word-rotator.loading-bar .word-rotator-words::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #1c1f21; z-index: 2; -webkit-transition: width .3s -0.1s; transition: width .3s -0.1s; } .word-rotator.loading-bar .word-rotator-words.is-loading::after { width: 100%; -webkit-transition: width 3s; transition: width 3s; } .word-rotator.loading-bar b { top: .2em; opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; } .word-rotator.loading-bar b.is-visible { opacity: 1; top: 0; } /* slide */ .word-rotator.slide span { display: inline-block; padding: .2em 0; } .word-rotator.slide .word-rotator-words { overflow: hidden; vertical-align: top; } .word-rotator.slide b { opacity: 0; top: .2em; } .word-rotator.slide b.is-visible { top: 0; opacity: 1; -webkit-animation: slide-in .6s; animation: slide-in .6s; } .word-rotator.slide b.is-hidden { -webkit-animation: slide-out .6s; animation: slide-out .6s; } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } } /* clip */ .word-rotator.clip span { display: inline-block; padding: .2em 0; } .word-rotator.clip .word-rotator-words { overflow: hidden; vertical-align: top; } .word-rotator.clip .word-rotator-words::after { content: ''; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background-color: #1c1f21; } .word-rotator.clip b { opacity: 0; } .word-rotator.clip b.is-visible { opacity: 1; } /* zoom */ .word-rotator.zoom .word-rotator-words { -webkit-perspective: 300px; perspective: 300px; } .word-rotator.zoom b { opacity: 0; } .word-rotator.zoom b.is-visible { opacity: 1; -webkit-animation: zoom-in .8s; animation: zoom-in .8s; } .word-rotator.zoom b.is-hidden { -webkit-animation: zoom-out .8s; animation: zoom-out .8s; } @-webkit-keyframes zoom-in { 0% { opacity: 0; -webkit-transform: translateZ(100px); transform: translateZ(100px); } 100% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes zoom-in { 0% { opacity: 0; -webkit-transform: translateZ(100px); transform: translateZ(100px); } 100% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @-webkit-keyframes zoom-out { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } 100% { opacity: 0; -webkit-transform: translateZ(-100px); transform: translateZ(-100px); } } @keyframes zoom-out { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } 100% { opacity: 0; -webkit-transform: translateZ(-100px); transform: translateZ(-100px); } } .word-rotator.rotate-3 .word-rotator-words { -webkit-perspective: 300px; perspective: 300px; } .word-rotator.rotate-3 b { opacity: 0; } .word-rotator.rotate-3 i { display: inline-block; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .is-visible .word-rotator.rotate-3 i { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .word-rotator.rotate-3 i.in { -webkit-animation: word-rotator-rotate-3-in .6s forwards; animation: word-rotator-rotate-3-in .6s forwards; } .word-rotator.rotate-3 i.out { -webkit-animation: word-rotator-rotate-3-out .6s forwards; animation: word-rotator-rotate-3-out .6s forwards; } .no-csstransitions .word-rotator.rotate-3 i { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 0; } .no-csstransitions .word-rotator.rotate-3 .is-visible i { opacity: 1; } @-webkit-keyframes word-rotator-rotate-3-in { 0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes word-rotator-rotate-3-in { 0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @-webkit-keyframes word-rotator-rotate-3-out { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @keyframes word-rotator-rotate-3-out { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } /* scale */ .word-rotator.scale b { opacity: 0; } .word-rotator.scale i { display: inline-block; opacity: 0; -webkit-transform: scale(0); transform: scale(0); } .is-visible .word-rotator.scale i { opacity: 1; } .word-rotator.scale i.in { -webkit-animation: scale-up .6s forwards; animation: scale-up .6s forwards; } .word-rotator.scale i.out { -webkit-animation: scale-down .6s forwards; animation: scale-down .6s forwards; } .no-csstransitions .word-rotator.scale i { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } .no-csstransitions .word-rotator.scale .is-visible i { opacity: 1; } @-webkit-keyframes scale-up { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 60% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes scale-up { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 60% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes scale-down { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 60% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } } @keyframes scale-down { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 60% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } } /* push */ .word-rotator.push b { opacity: 0; } .word-rotator.push b.is-visible { opacity: 1; -webkit-animation: push-in .6s; animation: push-in .6s; } .word-rotator.push b.is-hidden { -webkit-animation: push-out .6s; animation: push-out .6s; } @-webkit-keyframes push-in { 0% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 60% { opacity: 1; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes push-in { 0% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 60% { opacity: 1; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes push-out { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 60% { opacity: 0; -webkit-transform: translateX(110%); transform: translateX(110%); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes push-out { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 60% { opacity: 0; -webkit-transform: translateX(110%); transform: translateX(110%); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } /* Content Rotator */ .owl-carousel-vertical .owl-item { position: relative; } .owl-carousel-vertical.owl-carousel-vertical-style-1:after { content: ' '; display: block; width: 100%; height: 70px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); position: absolute; bottom: 0; z-index: 10; } .owl-carousel-vertical.owl-carousel-vertical-style-1:before { content: ' '; display: block; width: 100%; height: 70px; background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0))); background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0)); position: absolute; top: 0; z-index: 10; } .owl-carousel-vertical.owl-carousel-vertical-style-1 .owl-stage-outer { padding-top: 70px; padding-bottom: 70px; } .owl-carousel-vertical.owl-carousel-vertical-style-1 .clone-inside { position: absolute; z-index: 1; } .owl-carousel-vertical.owl-carousel-vertical-style-1 .clone-inside.prev { top: -100%; } .owl-carousel-vertical.owl-carousel-vertical-style-1 .clone-inside.next { top: 100%; } .bg-light-1 .owl-carousel-vertical.owl-carousel-vertical-style-1:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(252, 253, 253, 0)), to(#fcfdfd)); background: linear-gradient(to bottom, rgba(252, 253, 253, 0), #fcfdfd); } .bg-light-1 .owl-carousel-vertical.owl-carousel-vertical-style-1:before { background: -webkit-gradient(linear, left top, left bottom, from(#fcfdfd), to(rgba(252, 253, 253, 0))); background: linear-gradient(to bottom, #fcfdfd, rgba(252, 253, 253, 0)); } .bg-light-2 .owl-carousel-vertical.owl-carousel-vertical-style-1:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(251, 251, 253, 0)), to(#fbfbfd)); background: linear-gradient(to bottom, rgba(251, 251, 253, 0), #fbfbfd); } .bg-light-2 .owl-carousel-vertical.owl-carousel-vertical-style-1:before { background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfd), to(rgba(251, 251, 253, 0))); background: linear-gradient(to bottom, #fbfbfd, rgba(251, 251, 253, 0)); } .bg-light-3 .owl-carousel-vertical.owl-carousel-vertical-style-1:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(247, 249, 251, 0)), to(#f7f9fb)); background: linear-gradient(to bottom, rgba(247, 249, 251, 0), #f7f9fb); } .bg-light-3 .owl-carousel-vertical.owl-carousel-vertical-style-1:before { background: -webkit-gradient(linear, left top, left bottom, from(#f7f9fb), to(rgba(247, 249, 251, 0))); background: linear-gradient(to bottom, #f7f9fb, rgba(247, 249, 251, 0)); } .bg-light-4 .owl-carousel-vertical.owl-carousel-vertical-style-1:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(244, 246, 249, 0)), to(#f4f6f9)); background: linear-gradient(to bottom, rgba(244, 246, 249, 0), #f4f6f9); } .bg-light-4 .owl-carousel-vertical.owl-carousel-vertical-style-1:before { background: -webkit-gradient(linear, left top, left bottom, from(#f4f6f9), to(rgba(244, 246, 249, 0))); background: linear-gradient(to bottom, #f4f6f9, rgba(244, 246, 249, 0)); } .bg-light-5 .owl-carousel-vertical.owl-carousel-vertical-style-1:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(241, 243, 247, 0)), to(#f1f3f7)); background: linear-gradient(to bottom, rgba(241, 243, 247, 0), #f1f3f7); } .bg-light-5 .owl-carousel-vertical.owl-carousel-vertical-style-1:before { background: -webkit-gradient(linear, left top, left bottom, from(#f1f3f7), to(rgba(241, 243, 247, 0))); background: linear-gradient(to bottom, #f1f3f7, rgba(241, 243, 247, 0)); } .bg-dark-1 .owl-carousel-vertical.owl-carousel-vertical-style-1:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(9, 10, 11, 0)), to(#090a0b)); background: linear-gradient(to bottom, rgba(9, 10, 11, 0), #090a0b); } .bg-dark-1 .owl-carousel-vertical.owl-carousel-vertical-style-1:before { background: -webkit-gradient(linear, left top, left bottom, from(#090a0b), to(rgba(9, 10, 11, 0))); background: linear-gradient(to bottom, #090a0b, rgba(9, 10, 11, 0)); } .bg-dark-2 .owl-carousel-vertical.owl-carousel-vertical-style-1:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(27, 30, 33, 0)), to(#1b1e21)); background: linear-gradient(to bottom, rgba(27, 30, 33, 0), #1b1e21); } .bg-dark-2 .owl-carousel-vertical.owl-carousel-vertical-style-1:before { background: -webkit-gradient(linear, left top, left bottom, from(#1b1e21), to(rgba(27, 30, 33, 0))); background: linear-gradient(to bottom, #1b1e21, rgba(27, 30, 33, 0)); } .bg-dark-3 .owl-carousel-vertical.owl-carousel-vertical-style-1:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(32, 35, 38, 0)), to(#202326)); background: linear-gradient(to bottom, rgba(32, 35, 38, 0), #202326); } .bg-dark-3 .owl-carousel-vertical.owl-carousel-vertical-style-1:before { background: -webkit-gradient(linear, left top, left bottom, from(#202326), to(rgba(32, 35, 38, 0))); background: linear-gradient(to bottom, #202326, rgba(32, 35, 38, 0)); } .bg-dark-4 .owl-carousel-vertical.owl-carousel-vertical-style-1:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(41, 45, 49, 0)), to(#292d31)); background: linear-gradient(to bottom, rgba(41, 45, 49, 0), #292d31); } .bg-dark-4 .owl-carousel-vertical.owl-carousel-vertical-style-1:before { background: -webkit-gradient(linear, left top, left bottom, from(#292d31), to(rgba(41, 45, 49, 0))); background: linear-gradient(to bottom, #292d31, rgba(41, 45, 49, 0)); } .bg-dark-5 .owl-carousel-vertical.owl-carousel-vertical-style-1:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(46, 50, 55, 0)), to(#2e3237)); background: linear-gradient(to bottom, rgba(46, 50, 55, 0), #2e3237); } .bg-dark-5 .owl-carousel-vertical.owl-carousel-vertical-style-1:before { background: -webkit-gradient(linear, left top, left bottom, from(#2e3237), to(rgba(46, 50, 55, 0))); background: linear-gradient(to bottom, #2e3237, rgba(46, 50, 55, 0)); } /* Portfolio List */ .portfolio-list { list-style: none; margin: -8px; margin: -0.5rem; padding: 0; } .portfolio-list .portfolio-item { position: relative; margin: 8px; margin: 0.5rem; } .portfolio-list .portfolio-item.portfolio-item-style-2 { margin: 8px 8px 32px; margin: 0.5rem 0.5rem 2rem; } .portfolio-list.portfolio-list-no-gap .portfolio-item { margin: 0; } .portfolio-list.portfolio-list-style-2 { margin: -16px; margin: -1rem; } .portfolio-list.portfolio-list-style-2 .portfolio-item { margin: 16px; margin: 1rem; } .portfolio-list.portfolio-list-style-3 { margin: -19.2px -16px; margin: -1.2rem -1rem; } .portfolio-list.portfolio-list-style-3 .portfolio-item { margin: 19.2px 16px; margin: 1.2rem 1rem; } .portfolio-list.portfolio-list-style-4 { margin: -22.4px; margin: -1.4rem; } .portfolio-list.portfolio-list-style-4 .portfolio-item { margin: 22.4px; margin: 1.4rem; } /* Portfolio Load More Loader */ .portfolio-load-more-loader { display: none; position: relative; height: 45px; } /* Portfolio Load More Button */ #portfolioLoadMore { margin-top: 20px; } /* Banner de Anuncios de Gobierno */ #banner_inf { background-color: #E9E9E9; position: relative; width: 100%; height: 120px; overflow: hidden; text-align: center; display: table; } // Timeline $timeline-color: $primary-color; // Mixins and Placeholders %clearfix { &:after, &:before { content: ''; display: block; width: 100%; clear: both; } } @mixin prefix($prop, $val) { @each $prefix in '-webkit-', '-moz-', '-ms-', '' { #{$prefix}#{$prop}: $val; } } *, *:before, *:after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } body, html { height: 100%; } body { background: $bg-body; background-size: cover; margin: 0; padding: 0; font-family: $base-font; line-height: 20px; font-size: 14px; color: $base-font-color; } img {max-width: 100%;} a { text-decoration: none; } .container { max-width: 1100px; margin: 0 auto; } h1, h2, h3, h4 { font:{ family: $base-font-title; weight: 500; } } .project-name { text-align: center; padding: 10px 0; } // Header header { background: $secondary-color; padding: 10px; @include prefix(box-shadow, 0 3px 3px rgba(0,0,0,0.05)); @extend %clearfix; .logo { color: $primary-color; float: left; font:{ family: $base-font-title; size: 22px; weight: 500; } > span { color: lighten($primary-color, 20%); font-weight: 300; } } .social { float: right; .btn { font-family: "Dosis"; font-size: 14px; margin: 10px 5px; } } } // Timeline #timeline { width: 100%; margin: 30px auto; position: relative; padding: 0 10px; @include prefix(transition, all .4s ease); &:before { content:""; width: 3px; height: 100%; background: $timeline-color; left: 50%; top: 0; position: absolute; } &:after { content: ""; clear: both; display: table; width: 100%; } .timeline-item { margin-bottom: 50px; position: relative; @extend %clearfix; .timeline-icon { background: $timeline-color; width: 50px; height: 50px; position: absolute; top: 0; left: 50%; overflow: hidden; margin-left: -23px; @include prefix(border-radius, 50%); svg { position: relative; top: 14px; left: 14px; } } .timeline-content { width: 45%; background: #fff; padding: 20px; @include prefix(box-shadow, 0 3px 0 rgba(0,0,0,0.1)); @include prefix(border-radius, 5px); @include prefix(transition, all .3s ease); h2 { padding: 15px; background: $timeline-color; color: #fff; margin: -20px -20px 0 -20px; font-weight: 300; @include prefix(border-radius, 3px 3px 0 0); } &:before { content: ''; position: absolute; left: 45%; top: 20px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left:7px solid $timeline-color; } &.right { float: right; &:before { content: ''; right: 45%; left: inherit; border-left: 0; border-right: 7px solid $timeline-color; } } } } } // Buttons .btn { padding: 5px 15px; text-decoration: none; background: transparent; border: 2px solid lighten($primary-color, 10%); color: lighten($primary-color, 10%); display: inline-block; position: relative; text-transform: uppercase; font-size: 12px; @include prefix(border-radius, 5px); @include prefix(transition, background .3s ease); @include prefix(box-shadow, 2px 2px 0 lighten($primary-color, 10%)); &:hover { box-shadow: none ; top: 2px; left: 2px; @include prefix(box-shadow, 2px 2px 0 transparent); } } @media screen and (max-width: 768px) { #timeline { margin: 30px; padding: 0px; width: 90%; &:before { left: 0; } .timeline-item { .timeline-content { width: 90%; float: right; &:before, &.right:before { left: 10%; margin-left: -6px; border-left: 0; border-right: 7px solid $timeline-color; } } .timeline-icon { left: 0; } } } }