/* * jQuery FlexSlider v1.8 * http://flex.madebymufffin.com * * Copyright 2011, Tyler Smith * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ #container {width: 80%; max-width: 800px; margin: 0 auto;} /* Browser Resets */ .flex-container a:active, .flexslider a:active {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {width: 100%; margin: 0; padding: 0;} .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {max-width: 100%; width:100%; display:block; } .flex-pauseplay span {text-transform: capitalize;} /*.flexslider .slides > li::after { position: absolute; display: block; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.25); left: 0; top:0;}*/ /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider { position: relative; zoom: 1; z-index:0; } .flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative; } /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container {zoom: 1; position: relative;} /* Caption style */ /* IE rgba() hack */ .flex-caption {position:relative; width:100%; z-index: 1; float:left; } /* Direction Nav */ .banner-home .flex-direction-nav { display:block; } .banner-home .flex-direction-nav li a {width:34px; height:58px; margin: 0px 0 0; display: block; position: absolute; top: 40%; cursor: pointer; text-indent: -9999px; z-index:9999;background: url(../images/slide_arrow.png) no-repeat 0 0; } .banner-home .flex-direction-nav li .flex-next { right:2%; background-position: -34px 0; } .banner-home .flex-direction-nav li .flex-next:hover { background-position: -34px -62px;} .banner-home .flex-direction-nav li .flex-prev {left:2%; background-position: 0px 0; } .banner-home .flex-direction-nav li .flex-prev:hover { background-position: 0px -62px;} .banner-home .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;} /* Control Nav */ .banner-home .flex-control-nav { width:100%; position:absolute; bottom:85px; z-index:9999; text-align:center;} .banner-home .flex-control-nav li { margin:0px 5px 0 0; display: inline-block; zoom: 1; } .banner-home .flex-control-nav li a { width:14px; height:14px; display: block; background:transparent; cursor:pointer; text-indent:9999999px; border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; -moz-border-radius:50%; border:3px solid #fff;} .banner-home .flex-control-nav li a:hover, .flex-control-nav li a.flex-active {background:#31a3c6; } .caption-txt { width:65%; float:left;} .caption-right { float:right; text-align:right;} .banner-slide .flex-caption h1 { color:#fff; font-size:78px; font-family: 'helveticaneueheavy'; line-height:80px; margin-bottom:50px; } .banner-slide .flex-caption p { font-family: 'helveticaneuelight'; font-size: 48px; line-height: 48px; color: #fff; display: block; margin-bottom: 20px; border-bottom:1px solid #fff; padding-bottom:20px; padding-right:40px;} .banner-slide .flex-caption h3 { font-family: 'helveticaneuelight'; font-size: 40px; line-height: 48px; color: #fff; display: block; padding-bottom:35px; } .banner-slide .flex-caption h3 span{font-family: 'helveticaneuebold';} .banner-slide .flex-caption ul.buttons { float:left; } .banner-slide .flex-caption ul.buttons li { float:left; border:5px solid #1a1819; margin-right:20px; width:225px; } .banner-slide .flex-caption ul.buttons li a { padding:10px 40px; display:flex; height:70px; justify-content: center; align-items: center; background:#1a1819; transition:all .5s ease;} .banner-slide .flex-caption ul.buttons li.gpay span { background:url(../images/google-play.svg) no-repeat 0 0; width: 135px; height: 32px; display: inline-block;} .banner-slide .flex-caption ul.buttons li.gpay:hover span { background:transparent url(../images/google-play-hover.svg) no-repeat 0 0;} .banner-slide .flex-caption ul.buttons li.app-store a { background-color:transparent;} .banner-slide .flex-caption ul.buttons li a:hover { background:none;} .banner-slide .flex-caption ul.buttons li.app-store span { background:transparent url(../images/app-store-hover.svg) no-repeat 0 0; width: 135px; height: 35px; display: inline-block;} .banner-slide .flex-caption ul.buttons li.app-store:hover span { background:transparent url(../images/app-store.svg) no-repeat 0 0;} .banner-slide .flex-caption ul.buttons.app-btn li { border:5px solid #fff; } .banner-slide .flex-caption ul.buttons.app-btn li a { background:#fff; font-size:24px; font-family: 'helveticaneuebold'; color:#fff; transition:all .5s ease;} .banner-slide .flex-caption ul.buttons.app-btn li.app a { color:#1a1819;} .banner-slide .flex-caption ul.buttons.app-btn li.app:hover a { background:transparent; color:#fff;} .banner-slide .flex-caption ul.buttons.app-btn li.bot a { background:none;} .banner-slide .flex-caption ul.buttons li.chat-boot { border:5px solid #fff; margin-right:0px; width:225px; } .banner-slide .flex-caption ul.buttons li.chat-boot a { background-color:transparent;} .banner-slide .flex-caption ul.buttons li.chat-boot:hover a{ background: #000;} .banner-slide .flex-caption ul.buttons li.chat-boot:hover { border:5px solid #000;} .banner-slide .flex-caption ul.buttons li.chat-boot span { background:transparent url(../images/chatbot.svg) no-repeat 0 0; width: 132px; height: 28px; display: inline-block;} .banner-slide .flex-caption ul.buttons li.chat-boot:hover span { background:transparent url(../images/chatbot.svg) no-repeat 0 0;} .banner-slide .flex-caption ul.buttons li.custom-blanc { position: relative; width: auto; border:5px solid #fff; margin-right:0px;} .banner-slide .flex-caption ul.buttons li.custom-blanc:after, .banner-slide .flex-caption ul.buttons li.custom-blanc:before { content: ""; position: absolute;} .banner-slide .flex-caption ul.buttons li.custom-blanc:before { left: 10px; width: 23px; height: 26px; background-image: url(../images/form.svg); background-repeat: no-repeat; top: calc(100% - 48px);} .banner-slide .flex-caption ul.buttons li.custom-blanc:after { right: 15px; width: 11px; height: 15px; background-image: url(../images/download.svg);background-repeat: no-repeat; top: calc(100% - 42px);} .banner-slide .flex-caption ul.buttons li.custom-blanc a { background-color:transparent; padding: 10px 50px; font-size: 24px; color: white; font-family: 'helveticaneuebold';} /*.banner-slide .flex-caption ul.buttons li.custom-blanc:hover a{ background: #000;} .banner-slide .flex-caption ul.buttons li.custom-blanc:hover { border:5px solid #000;} */ .banner-slide .flex-caption ul.buttons li.custom-blanc:hover a { color: #e15c57; background: #ffffff; } .banner-slide .flex-caption ul.buttons li.custom-blanc:hover::before { background-image: url(../images/form_v.svg); left: 10px; width: 23px; height: 26px; background-repeat: no-repeat; top: calc(100% - 48px); } .banner-slide .flex-caption ul.buttons li.custom-blanc:hover::after { right: 15px; width: 11px; height: 15px; background-image: url(../images/download_v.svg);background-repeat: no-repeat; top: calc(100% - 42px);} .banner-slide .flex-caption ul.buttons li.custom-blanc:hover { border: 5px solid #ffffff; } /* Direction Nav */ #carousel.flexslider .flex-direction-nav { line-height: 0; height: 0;} #carousel.flexslider .flex-direction-nav li a {width:11px; height:24px; margin: 0px 0 0; display: block; position: absolute; top: 40%; cursor: pointer; text-indent: -9999px; z-index:9999;background: url(../images/carousel-arrow-home.png) no-repeat 0 0; } #carousel.flexslider .flex-direction-nav li .flex-next { right:0%; background-position: -14px 0; } #carousel.flexslider .flex-direction-nav li .flex-next:hover { background-position: -14px -25px;} #carousel.flexslider .flex-direction-nav li .flex-prev {left:0%; background-position: 0px 0; } #carousel.flexslider .flex-direction-nav li .flex-prev:hover { background-position: 0px -25px;} #carousel.flexslider .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;} #carousel.flexslider .flex-direction-nav li { padding: 0; border: none;} .flex-control-thumbs {margin: 5px 0 0;position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left;margin: 0; } .flex-control-thumbs img {width: 100%; height: auto; display: block; opacity: .7; cursor: pointer; -moz-user-select: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .flex-control-thumbs img:hover {opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } /* .banner-home .slides > li > img { transform: scale(1.1); } .banner-home li.flex-active-slide img { -webkit-animation:zoomout linear 1; -moz-animation:zoomout linear 1; -o-animation:zoomout linear 1; animation:zoomout linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:8s; -moz-animation-duration:8s; -o-animation-duration:8s; animation-duration:8s; } @-webkit-keyframes zoomout { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @-moz-keyframes zoomout { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @-o-keyframes zoomout { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @keyframes zoomout { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } .caption-txt h1, .caption-txt p, .caption-txt a.btn-rightbg{ opacity:0; } .flex-active-slide .caption-txt h1 { opacity:0; -webkit-animation:lfttxt ease-out 1; -moz-animation:lfttxt ease-out 1; animation:lfttxt ease-out 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.8s; -moz-animation-duration:0.8s; animation-duration:0.8s; } .flex-active-slide .caption-txt p { opacity:0; -webkit-animation:lfttxt ease-out 1; -moz-animation:lfttxt ease-out 1; animation:lfttxt ease-out 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; animation-delay:0.3s; } .flex-active-slide .caption-txt a { opacity:0; -webkit-animation:lfttxt ease-out 1; -moz-animation:lfttxt ease-out 1; animation:lfttxt ease-out 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.1s; -moz-animation-duration:1.1s; animation-duration:1.1s; animation-delay:0.3s; } @keyframes lfttxt { 0% { transform: translate3d(0px, 100px, 0px); transform-origin: 50% 50% 0px; } 100% { opacity:1; transform: translate3d(0px, 0px, 0px); transform-origin: 50% 50% 0px; } } @-webkit-keyframes lfttxt { 0% { transform: translate3d(0px, 100px, 0px); transform-origin: 50% 50% 0px; } 100% { opacity:1; transform: translate3d(0px, 0px, 0px); transform-origin: 50% 50% 0px; } } @-moz-keyframes lfttxt { 0% { transform: translate3d(0px, 100px, 0px); transform-origin: 50% 50% 0px; } 100% { opacity:1; transform: translate3d(0px, 0px, 0px); transform-origin: 50% 50% 0px; } } .flex-active-slide .caption-txt a.btn-rightbg { opacity:0; -webkit-animation:opa ease-out 1; -moz-animation:opa ease-out 1; animation:opa ease-out 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.8s; -moz-animation-duration:0.8s; animation-duration:0.8s; animation-delay:1.3s; } @-webkit-keyframes opa { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes opa { 0% { opacity:0; } 100% { opacity:1; } } @keyframes opa { 0% { opacity:0; } 100% { opacity:1; } } */ /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom:-60px; z-index:9; text-align:left; left:0; right:0; margin:0px auto; } .flex-control-nav li {margin:0 10px 0 0; display: inline-block; zoom: 1; *display: inline;} .flex-control-nav li a {width: 15px; height: 15px; display: block; cursor: pointer; text-indent: 99999px; border-radius:25px; background: rgba(255,255,255,0.3);} .flex-control-nav li a:hover, .flex-control-nav li a.flex-active {background: rgba(255,255,255,1);} .banner-slide .flexslider .slides > li .caption-txt .m-title, .banner-slide .flexslider .slides > li .caption-txt .title, .banner-slide .flexslider .slides > li .caption-txt .para { overflow: hidden; float: left; width: 100%; margin: 0; } .banner-slide .flexslider .slides > li .caption-txt .m-title p, .banner-slide .flexslider .slides > li .caption-txt .title h1, .banner-slide .flexslider .slides > li .caption-txt .para h3 { /*text-transform: none; letter-spacing: normal;*/ opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); /*-webkit-transform: translate3d(0, 102%, 0); transform: translate3d(0, 102%, 0); */ -webkit-transition: opacity 1s cubic-bezier(.215,.71,.355,1), -webkit-transform 1s cubic-bezier(.215,.71,.355,1); transition: opacity 1s cubic-bezier(.215,.71,.355,1), -webkit-transform 1s cubic-bezier(.215,.71,.355,1); transition: transform 1s cubic-bezier(.215,.71,.355,1), opacity 1s cubic-bezier(.215,.71,.355,1); transition: transform 1s cubic-bezier(.215,.71,.355,1), opacity 1s cubic-bezier(.215,.71,.355,1), -webkit-transform 1s cubic-bezier(.215,.71,.355,1); } .banner-slide .flexslider .slides > li.flex-active-slide .caption-txt .m-title p { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; } .banner-slide .flexslider .slides > li.flex-active-slide .caption-txt .title h1 { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; } .banner-slide .flexslider .slides > li.flex-active-slide .caption-txt .para h3 { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; } .banner-slide .flexslider .slides > li .flex-caption ul.buttons li { opacity:0; transition:all 0.4s ease; } .banner-slide .flexslider .slides > li.flex-active-slide .flex-caption ul.buttons li.gpay {background: #1a1819} .banner-slide .flexslider .slides > li.flex-active-slide .flex-caption ul.buttons li.gpay:hover a {background: #e15c57} .banner-slide .flexslider .slides > li.flex-active-slide .flex-caption ul.buttons li:first-child { opacity:1; transition-delay: 1.5s; } .banner-slide .flexslider .slides > li.flex-active-slide .flex-caption ul.buttons li:nth-child(2) { opacity:1; transition-delay: 1.8s; } .banner-slide .flexslider .slides > li.flex-active-slide .flex-caption ul.buttons li:nth-child(3) { opacity:1; transition-delay: 2s; } .abt-cnt.animation h2, .abt-cnt p, .abt-cnt ul li:first-child, .abt-cnt ul li:nth-child(2), .community-sec h2, .community-sec p, .community-sec ul li:first-child, .community-sec ul li:nth-child(2), .comm-center, .data.func h2, .data.func h3, .data.func p, .data.func .func-car { opacity: 0; -webkit-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px); -webkit-transition: opacity 1s cubic-bezier(.215,.71,.355,1), -webkit-transform 1s cubic-bezier(.215,.71,.355,1); transition: opacity 1s cubic-bezier(.215,.71,.355,1), -webkit-transform 1s cubic-bezier(.215,.71,.355,1); transition: transform 1s cubic-bezier(.215,.71,.355,1), opacity 1s cubic-bezier(.215,.71,.355,1); transition: transform 1s cubic-bezier(.215,.71,.355,1), opacity 1s cubic-bezier(.215,.71,.355,1), -webkit-transform 1s cubic-bezier(.215,.71,.355,1);} .abt-cnt.animation.start-animation h2, .community-sec.animation.start-animation h2, .data.func.animation.start-animation h2, .data.func.animation.start-animation h3, .data.func.animation.start-animation .func-car { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; } .abt-cnt.animation.start-animation p, .community-sec.animation.start-animation p, .data.func.animation.start-animation p { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; } .abt-cnt.animation.start-animation ul li:first-child, .community-sec.animation.start-animation ul li:first-child { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; } .abt-cnt.animation.start-animation ul li:nth-child(2), .community-sec.animation.start-animation ul li:nth-child(2){ opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; } .community-sec.animation.start-animation .comm-center { opacity:1; transform: none; transition-delay: 1.2s; -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s;}