/* papaya ads theme */ html { font: "Helvetica Neue",Helvetica,Arial,sans-serif;} h1, h2, h3, h4, h5, h6,a{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;} .uk-link, a{color:#444847; -o-transition:color .3s ease-out, background-color .3s ease-in; -ms-transition:color .3s ease-out, background-color .3s ease-in; -moz-transition:color .3s ease-out, background-color .3s ease-in; -webkit-transition:color .3s ease-out, background-color .3s ease-in; transition:color .3s ease-out, background-color .3s ease-in; } .uk-tab>li>a{color:#444;} .uk-tab>li.uk-open>a, .uk-tab>li>a:focus, .uk-tab>li>a:hover,.uk-tab>li.uk-active>a{color:#6fa470;} .uk-link:hover, a:hover,.uk-subnav>*>:focus, .uk-subnav>*>:hover{ color:#6fa470;} p{ color:#696c6b;} .uk-h1,h1{ font-size:2.57rem;} .uk-h2,h2{ font-size:1.88rem;} .uk-h3,h3{ font-size:1.14rem;} .uk-h4,h4{ font-size:1.14rem;} .uk-h5,h5{ font-size:1rem;} .uk-h6,h6{ font-size:0.85rem;} .uk-list-striped>li:nth-of-type(odd){ background-color:#fbfbfb;} .dx-no-border{ border:none !important;} .uk-grid-divider:empty.dx-cr-bd-top{ border-color:#444847} .dx-color-1{color:#444847 !important;} /* 深黑色 */ .dx-color-2{color:#848a8c !important;} /* 浅灰色 */ .dx-color-3{color:#fff !important;} /* 白色 */ .dx-color-4{color:#6fa47;} /* 主题色 */ .dx-img-flow{ height:140px !important; overflow:hidden !important; border-bottom:1px #f5f5f5 solid;} .uk-pagination>.uk-active>span{background:#6fa47;} .uk-navbar-nav>li>a{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;} .dx-weixin{ background-color:#e0e0e0; color:#fff;} .dx-weixin:hover{ background-color:#4cc02d; color:#fff;} .dx-qq{background-color:#e0e0e0; color:#fff;} .dx-qq:hover{ background-color:#1b94e9; color:#fff;} .dx-twitter { background: url(../images/nw/Twitter-icon.png) no-repeat center !important; color: #fff; width: 32px; height: 32px; background-size: 100% 100% !important; } .dx-linkedin { background: url(../images/nw/Linkedin-icon.png) no-repeat center !important; color: #fff; width: 32px; height: 32px; background-size: 100% 100% !important; } .dx-facebook { width: 32px; height: 32px; background: url(../images/nw/fb-icon.png) no-repeat center!important; background-size: 100% 100% !important; } .dx-linkedin:hover, .dx-twitter:hover, .dx-facebook:hover{ opacity: .8; } .uk-block-muted{ background-color:#fbfbfb;} .dx-slideset ul>li>.uk-vertical-align{ height:80px; text-align:center;} .dx-margin-left-remove{ margin-left:0 !important;} .dx-margin-right-remove{ margin-right:0 !important;} .dx-center{ margin-left:auto!important; margin-right:auto!important;} .dx-padding-40{ padding:40px;} .dx-padding-50 { padding:50px;} .dx-padding-20{ padding:20px;} .dx-padding-left-remove{ padding-left:0;} .dx-padding-right-remove{ padding-right:0;} .dx-btn{ background-color:#fff; border:1px #e0e0e0 solid; color:#6fa470; min-width: 18.75rem;height: 3.31rem;line-height: 3.31rem;border-radius: 0.75rem; font-size:1.13rem} .dx-btn:hover{background-color:#6fa470; color:#fff; border:1px #6fa470 solid;} .dx-btn-default{ padding: 5px 40px;border: 1px #ccc solid;border-radius: 6px; text-decoration: none;} .dx-btn-default:hover{background-color:#6fa470; color:#fff; border:1px #6fa470 solid; text-decoration: none;} .dx-btn-rever{background-color:#6fa470; color:#fff;} .dx-btn-rever:hover{background-color:#fff; color:#6fa470;} .dx-gray{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); filter: gray;} .dx-gray-hover .dx-gray:hover{-webkit-filter:none;-moz-filter:none;-ms-filter:none;-o-filter:none;filter:none; filter:none;} .dx-btn-240{ min-width:300px;} .dx-btn-dy{ border-radius: 15px;color: #fff;background-color: #6fa470; margin-top: 30px; padding: 0 30px;} .dx-form-search{ position: relative;} .dx-form-search >input{padding: 8px !important; height: 38px !important;border-radius: 6px;} .dx-form-search >button{position: absolute;right: 0;top: 0;height: 38px; color: #fff;background-color: #6fa470; border-radius: 0 6px 6px 0; padding: 5px 20px; border: none;outline: none;} .dx-position-ab{ position:absolute;} .dx-position-right{ position:absolute;right:0;} .dx-position-left{ position:absolute;left:0;} .dx-overflow-visible{ overflow:visible;} .dx-media-list .dx-weixin,.dx-media-list .dx-qq,.dx-media-list .dx-linkedin, .dx-media-list .dx-facebook{width:30px; height:30px; line-height:30px; margin-left:10px} .dx-icon-email{ width:26px; height:26px;background:url(../images/as/icon-c-1.png) no-repeat center center;background-size:80%;display: inline-block;} .dx-icon:hover .dx-icon-email{background-image:url(../images/as/icon-c-1-hove.png)} .dx-icon-addr{ width:21px; height:28px;background:url(../images/as/icon-c-2.png) no-repeat center center;background-size:80%;display: inline-block;} .dx-icon-phone{ width:21px; height:35px;background:url(../images/as/icon-c-3.png) no-repeat center center;background-size:80%;display: inline-block;} // #header .uk-navbar{background:#fff; border-top: 5px #6fa470 solid;} #header .uk-navbar{background:#fff;} #header .uk-navbar .dx-logo{padding:0;padding-top:30px; padding-bottom:30px;} #header .uk-navbar-nav>li>a{color:#666666!important;padding:35px 15px;line-height: 20px; height:90px; font-size:20px;} #header .uk-navbar-nav>li>a>i{ display:none;} #header .uk-navbar-nav>li.uk-active>a,#header .uk-navbar-nav>li>a:active{; color:#444847;} #header .uk-navbar-nav>li.uk-active>a {background: transparent;} #header .uk-navbar-nav>li>a:hover>i,#header .uk-navbar-nav .uk-open>a>i{ display:block;} #header .uk-navbar-nav>li>a:hover,#header .uk-navbar-nav .uk-open>a{color:#444847; background-color: transparent;} #header .dx-dropdown{ width:180px; font-size:14px; text-align: left;} #header .dx-dropdown {padding: 0;} #header .uk-navbar .uk-button {background: transparent; font-weight: bold;} #header .uk-navbar .uk-button:hover { color: #444847; font-weight: bold; background: transparent;} #header .uk-navbar .uk-dropdown-bottom { margin: 0; } #header .uk-navbar .uk-button-dropdown .dx-dropdown {width:180px; font-size:14px; text-align: left;} #header .uk-navbar .uk-button-dropdown .uk-nav-dropdown>li>a:focus { background-color: transparent; color: #444847;} #header .uk-navbar .uk-button-dropdown .uk-nav-dropdown>li>a:hover { background-color: transparent; color: #6fa470;} #header .uk-navbar .uk-button-dropdown.uk-open .uk-dropdown-bottom { padding: 9px 15px; font-size: 16px; color: #848a8c;} #header .dx-dropdown a{color: #848a8c; background-color:#f8f8f8; padding: 9px 15px;} #header .dx-dropdown.uk-dropdown-navbar {background-color: #fbfbfb;} #header .dx-dropdown a:hover{color: #6fa470; background-color: #fbfbfb;} #header .uk-dropdown .uk-nav {margin:0;} #header .dx-dropdown .uk-nav.uk-nav-navbar li:first-child{ border-top: 1px solid #e0e0e0;} #header .dx-dropdown .uk-nav.uk-nav-navbar li{ border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0;} #content .dx-slide .bottom-line{ background:url(../images/as/bottom-line.png) no-repeat center center; width:100%; height:3px; display:block} #content .dx-slide ul.uk-dotnav>li>a{ background-color:#ccc; width:10px; height:10px;} #content .dx-slide ul.uk-dotnav>li{ margin:0;} #content .dx-slide ul.uk-dotnav>.uk-active>a{background-color:#6fa470;} #content .dx-slide .dx-h1{font-size:3.42rem; line-height: 1.2em;margin-bottom: 1rem; color:#2b2e2d;} #content .dx-slide .dx-h2{ font-size:1.7rem; margin-bottom: 1.2rem;line-height: 1.4em; color:#848a8c; margin-top:0;float:left;} #content .dx-slide .dx-padding-top{ padding-top:5rem; height:100%;} #content .dx-slide .dx-thumbnail>.uk-grid .uk-position-relative{ height:140px; color:#444847; font-size:18px;} #content .dx-tx-lh{line-height: 25px;} #content .dx-fixed-tox{ width:5.72rem; height:100%; text-align:center; padding:0 20px; z-index:1;} #content .uk-slidenav:focus, .uk-slidenav:hover{color:#6fa470;} .dx-media-list{} .dx-media-list .dx-media-more{ line-height:2.15rem;} .dx-media-list .dx-thumbnail,.dx-media-list .dx-thumbnail>img{padding: 0; border:none;} .dx-media-list .dx-media-report .uk-panel{ border:1px #e0e0e0 solid;} .dx-media-list .dx-media-report .dx-rounded-top{border-radius: 5px 5px 0 0;} .dx-media-list .dx-media-report>div{ padding-left:20px;} .dx-academy-list .dx-thumbnail{ height:auto; overflow:hidden;} #content .dx-dsp-slide-bg{background:#009cde url(../images/as/dsp-splie-bg.gif) no-repeat center bottom;} #content .dx-dsp-how{ background:url(../images/as/dsp-btm-bg.png) repeat-x bottom center;} #content .dx-dsp-how .dx-how-ul>div{ padding-bottom:50px; padding-left:0; color:#848a8c;} #content .dx-dsp-how .dx-how-ul h2,#content .dx-dsp-how .dx-how-ul p{color:#848a8c;} #content .dx-dsp-how .dx-how-ul>div:hover{ color:#444847} #content .dx-dsp-how .dx-how-ul>div:hover h2,#content .dx-dsp-how .dx-how-ul>div:hover p{color:#444847} #content .dx-dsp-how .dx-how-ul>div:hover .dx-how-next{ background-image:url(../images/as/icon-next-org.png);} #content .dx-dsp-how .dx-how-ul>div:hover .dx-how-tl{color:#6fa470;} #content .dx-dsp-how .dx-how-ul>div:hover .dx-gray{-webkit-filter:none;-moz-filter:none;-ms-filter:none;-o-filter:none;filter:none; filter:none;} #content .dx-dsp-how .dx-how-ul .dx-how-tl{ position:absolute; bottom:0; width:100%; height:50px; line-height:50px;} #content .dx-dsp-how .dx-how-ul .dx-how-next{background-image:url(../images/as/icon-next-gray.png); background-position:right center; background-repeat:no-repeat;} #content .dx-dsp-custom{} #content .dx-dsp-custom .dx-dsp-cs1{left: 50%;top: 50%;margin-left: -14%;margin-top: -6%;} #content .dx-dsp-custom .dx-dsp-cs2{top: 50%;left: 50%;margin-top: -12%;margin-left: -27px;} #content .dx-dsp-custom .dx-ct-title{color:#848a8c;margin-top: 12px;} #content .dx-dsp-custom .dx-ct-li:hover .dx-gray{-webkit-filter:none;-moz-filter:none;-ms-filter:none;-o-filter:none;filter:none; filter:none;} #content .dx-dsp-custom .dx-ct-li:hover .dx-ct-title{color:#444847;} #content .dx-st-bg{ background:#00b3d1 url(../images/as/st-slide-bg.gif) no-repeat center bottom} #content .dx-st-bg-2{ background-image:url(../images/as/st-bg-2.png); background-repeat:no-repeat; background-position:center bottom;} #content .dx-st-box-6{ height:200px; padding:0;} #content .dx-st-box-7{ height:180px; padding:0;} .dx-contact-list{} .dx-contact-list .dx-over-box{ width:220px; height:220px;} .dx-contact-list .dx-over-title{ padding: 3.5rem 0; text-align:center;} .dx-contact-list .dx-over-title>h1{ line-height:100px;} .dx-contact-list .uk-icon-small{ width:2.5rem;} .dx-contact-list .dx-info-box{ margin-bottom:10px; display:block;} #content .dx-fixed-tox i{ font-size:5rem;} #content .dx-title-line{margin-bottom: 50px; line-height: 0px;} #content .dx-title-line>h1{ margin:0;font-size:2rem;} #content .dx-title-line>i{width:2.82rem; height: 4px;display:inline-block;background-color:#6fa470; margin-top:15px; } #content .dx-fixed-tox .uk-icon-button>i{font-size: 1.5rem;line-height: 3.5rem;} #content .dx-fixed-tox.dx-twitter-x-bg { background-color: #18A9E6; } #content .dx-fixed-tox.dx-twitter-x-bg > a { background-color: #18A9E6; } #content .dx-fixed-tox.dx-pinterest-x-bg { background-color: #CA0116; } #content .dx-fixed-tox.dx-pinterest-x-bg > a{ background-color: #CA0116; } #content .dx-fixed-tox.dx-linkedin-x-bg { background-color: #017BC6; } #content .dx-fixed-tox.dx-linkedin-x-bg > a{ background-color: #017BC6; } #content .dx-fixed-tox.dx-bing-x-bg { background-color: #FFAE04; } #content .dx-fixed-tox.dx-bing-x-bg > a{ background-color: #FFAE04; } #content .dx-fixed-tox.dx-networks-x-bg { background-color: #0169BD; } #content .dx-fixed-tox.dx-networks-x-bg > a{ background-color: #0169BD; } #content .dx-fixed-tox.dx-x-right > a{ color:#fff; position:absolute; right:-1.79rem; top:50%; width:3.57rem; height:3.57rem; margin-top:-1.79rem; z-index:-1; } #content .dx-fixed-tox.dx-x-left > a{ color:#fff; position:absolute; left:-1.79rem; top:50%; width:3.57rem; height:3.57rem; margin-top:-1.79rem;z-index:-1; } #content .dx-link-box .uk-slidenav-previous{ left:0;} #content .dx-link-box .uk-slidenav-next{ right:0;} #content .dx-link-box .uk-slideset>li{ padding-left:20px} #footer{ color:#444847; font-size:14px; } #footer .uk-block-secondary{color:#b7bdbf;} #footer .uk-icon-button{ background-color:#848a8c; margin-right:20px;border-radius: 0;} #footer .dx-weixin:hover{ background-color:#4cc02d; color:#fff;} #footer .dx-qq:hover{ background-color:#1b94e9; color:#fff;} #footer .dx-twitter:hover{background-color:#e6162d; color:#fff;} #footer .dx-linkedin:hover{ background-color:#18d0f7; color:#fff;} #footer .uk-subnav>*>*{color:#fff;} #footer .uk-subnav-line>:nth-child(n+2):before{border-left: 1px solid #525657;} .uk-panel-title {margin-bottom: 25px;} .uk-panel-title { font-size: 24px; font-weight: bold;} .uk-article {line-height: 25px;} @media (max-width: 768px) { html {font: 400 12px/20px "Arial", sans-serif;} p{font-size:12px;} #content .dx-slide .dx-h1{ font-size:2.5rem!important;} #content .dx-slide .dx-h2{ font-size:1.2rem!important;} .drop-down{position:absolute;top:50%;margin-top:-18px;margin-right: -26px;} .uk-dropdown, .uk-dropdown-blank { width: 520px; } .dropdown-navbar{ opacity: 0.95;z-index: 100; position: absolute; list-style: none; font-size: 16px; color: #2b2e2d; width: 272px; top: 58px; left: -242px; border: 1px solid #2b2e2d; border-radius: 5px; padding: 0; background: #fff;} .dropdown-navbar li{list-style: none; line-height: 40px; padding-left: 24px; border-bottom: 1px solid #2b2e2d} #footer .tel{font-size: 1.5rem;line-height: 35px} #footer .fonter-icon{ padding-top: 22px;margin: 20px auto;width: 85%;} .picture-text{height: 180px; line-height: 137px!important; text-align: center;} /*.uk-grid>* { padding-left: 10px; }*/ .dx-padding-20{padding: 20px} .dx-padding-5{padding: 5px} .nav-click{background-color: #6fa470;color:white} .bgwhite{background-color: white;} .colorwhite{color:white!important;} .color6fa470{color:#6fa470;} .color444847{color:#444847!important;} .product-list{margin-left: -54px;display: none} .product-list li{border-bottom: none;border-top:1px solid #2b2e2d;line-height: 35px ;} .product-list li a{color: #848a8c;display: inline-block; width: 100%; height: 35px;} .product-list li a:actived,.product-list li a:hover{ color: #6fa470 ;text-decoration: none!important;} .nav a{display: inline-block; width: 100%; height: 40px;} .nav:actived .nav a,.nav:hover .nav a{background-color: #6fa470;color: white;text-decoration: none!important;} .weixin-icon{width: 45%; margin-left: 20%; margin-top: 79px;} .log-box{border: 1px solid #e6e6e6;padding: 10px;list-style: none; margin-bottom: 10px;} #content .dx-link-box .uk-slideset>li { padding-left: 0; } #content .dx-link-box .uk-slideset>li ul{width: 96%; margin: 0; padding: 0;} .uk-dotnav>*>* { width: 10px; height: 10px;} .uk-dotnav>.uk-active>* { background: #6fa470; } a.nav-title.colorwhite,.uk-link:hover, a:hover { text-decoration: none; } .product-list .bgwhite a:hover,.product-list .bgwhite a:active{color:#6fa470} .uk-width-medium-1-2 {text-align: center;} .uk-list-striped>li { border-bottom: 1px solid #e2e2e2 } .solution-icon img { width:60px; height: auto; } #content .dx-slide .dx-padding-top { height: 100%; padding-top: 10px; } .solution-container{padding: 0} .solution-container ul, .solution-container ul li{padding: 0;list-style: none} .solution-container ul li{line-height: 27px} .width93{width: 93%} .dx-btn-dy {color: #6fa470; background-color: #f5f5f5;} .uk-list-line>li:nth-child(n+2) {margin-top:0px;padding-top: 0px; border: 1px solid #ddd; margin-bottom: 35px; } .uk-list-container,.uk-list-container li{list-style: none} .uk-list-container{padding: 0px;margin-bottom: 0px;} .uk-list-container li{padding: 20px 0px} .uk-list-container li img{margin-left: 57px; width: 55%; height: auto;} .uk-list-container li .uk-width-2-3{font-size: 16px;} .uk-list-container li.bgf8f8f8{background-color: #f8f8f8} .color6fa470{ line-height: 45px; background-color: #f8f8f8;} .dx-title-margin{margin-top: 5px;} .dx-font-size{ font-size: 15px;} .dx-margin-top{margin-top: 7%} .dx-small-contain .uk-grid+.uk-grid{margin-top: 0px} .dx-small-contain .uk-slideset>li { padding-left: 0; } .dx-small-contain .uk-slideset>li ul { width: 96%; margin: 0; padding: 0; } #mobile-header-nav .uk-button { background-color: transparent; } #mobile-header-nav .uk-button>i { margin-left: 8px; } #mobile-header-nav .uk-nav-dropdown>li>a { padding: 10px; } #mobile-header-nav .dx-mo-nav ul>li>a { padding:10px 20px; border-bottom: 1px #ccc solid; font-size: 16px; } #mobile-header-nav .dx-mo-nav ul>li.uk-active>a, #mobile-header-nav ul.uk-nav>li>a:hover, #mobile-header-nav ul.uk-nav>li>a:active { background-color: #6fa470; color: #fff; } #mobile-header-nav .dx-mo-nav { background-color: #fff; position: absolute; width: 100%; z-index: 100; overflow-y: auto; } #mobile-header-nav .dx-mo-nav ul { padding: 0; background-color: #fff; color: #000; } #mobile-header-nav .dx-mo-nav ul.uk-nav-sub>li>a { background-color: #f8f8f8; color: #444847; padding-left: 40px; } .uk-panel-title { font-size: 20px; font-weight: bold; line-height: 28px; } .dx-padding-40 { padding: 0px; } .uk-margin-large-top { margin-top: 30px!important; } .uk-margin-large-bottom { margin-bottom: 20px!important; } .dx-contact-list .dx-over-box { width: 170px; height: 170px; } .dx-contact-list .dx-over-title>h1 { line-height: 76px; font-size: 2.2rem; } #content .dx-title-line>i { width: 2.82rem; height: 4px; display: inline-block; background-color: #6fa470; margin-top: 4px; } #back-top{ cursor: default; display: block; margin: -125px 0 0; position: fixed; right: 20px; top: 110%; z-index: 11; } .uk-article p img{margin: 10px 0px} .uk-article-title{ font-size: 22px; line-height: 32px;margin-bottom: 6px;font-weight: bolder} .uk-article-meta{margin-top: 0px;font-size: 14px} .uk-article{font-size: 16px;line-height: 28px} .uk-article h2,.uk-article h2 b{font-size:1.4rem; } .uk-article img{margin: 10px 0px} .uk-article h2{margin-bottom: 0px} .uk-container { box-sizing: border-box; max-width: 980px; padding: 0 20px; } } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: 768px and max-width:992px) { #content .dx-slide .dx-h1{ font-size:3.5rem;} .uk-block{padding-top: 60px;padding-bottom: 60px;} .uk-align-medium-left{margin-right: 24px;} /*#content .dx-slide .dx-h2{ font-size:2rem} */ } /* 大屏幕（大桌面显示器，大于等于 1220px） */ @media (min-width: 1220px) { body{font-size:1.143em;} .uk-block{padding-top: 60px;padding-bottom: 60px;} .uk-panel-title{font-size: 24px;} .uk-align-medium-left{margin-right: 24px;} } /*! * animsition v4.0.1 * A simple and easy jQuery plugin for CSS animated page transitions. * http://blivesta.github.io/animsition * License : MIT * Author : blivesta (http://blivesta.com/) */ .animsition, .animsition-overlay { position: relative; opacity: 0; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animsition-overlay-slide { position: fixed; z-index: 1; width: 100%; height: 100%; background-color: #ddd; } .animsition-loading, .animsition-loading:after { width: 32px; height: 32px; position: fixed; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; border-radius: 50%; z-index: 2; } .animsition-loading { background-color: transparent; border-top: 5px solid rgba(0, 0, 0, 0.2); border-right: 5px solid rgba(0, 0, 0, 0.2); border-bottom: 5px solid rgba(0, 0, 0, 0.2); border-left: 5px solid #eee; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-name: animsition-loading; animation-name: animsition-loading; } @-webkit-keyframes animsition-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes animsition-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @-webkit-keyframes fade-in { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } to { opacity: 1; } } .fade-in { -webkit-animation-name: fade-in; animation-name: fade-in; } @-webkit-keyframes fade-out { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } to { opacity: 0; } } .fade-out { -webkit-animation-name: fade-out; animation-name: fade-out; } @-webkit-keyframes fade-in-up { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-up { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-up { -webkit-animation-name: fade-in-up; animation-name: fade-in-up; } @-webkit-keyframes swing { 15% { -webkit-transform: translateY(5px); transform: translateY(5px); } 30% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(3px); transform: translateY(3px); } 65% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 80% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes swing { 15% { -webkit-transform: translateY(5px); transform: translateY(5px); } 30% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(3px); transform: translateY(3px); } 65% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 80% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fade-out-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; } } @keyframes fade-out-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; } } .fade-out-up { -webkit-animation-name: fade-out-up; animation-name: fade-out-up; } @-webkit-keyframes fade-in-up-sm { 0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-up-sm { 0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-up-sm { -webkit-animation-name: fade-in-up-sm; animation-name: fade-in-up-sm; } @-webkit-keyframes fade-out-up-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } } @keyframes fade-out-up-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } } .fade-out-up-sm { -webkit-animation-name: fade-out-up-sm; animation-name: fade-out-up-sm; } @-webkit-keyframes fade-in-up-lg { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-up-lg { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-up-lg { -webkit-animation-name: fade-in-up-lg; animation-name: fade-in-up-lg; } @-webkit-keyframes fade-out-up-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } } @keyframes fade-out-up-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } } .fade-out-up-lg { -webkit-animation-name: fade-out-up-lg; animation-name: fade-out-up-lg; } @-webkit-keyframes fade-in-down { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-down { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-down { -webkit-animation-name: fade-in-down; animation-name: fade-in-down; } @-webkit-keyframes fade-out-down { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; } } @keyframes fade-out-down { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; } } .fade-out-down { -webkit-animation-name: fade-out-down; animation-name: fade-out-down; } @-webkit-keyframes fade-in-down-sm { 0% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-down-sm { 0% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-down-sm { -webkit-animation-name: fade-in-down-sm; animation-name: fade-in-down-sm; } @-webkit-keyframes fade-out-down-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } } @keyframes fade-out-down-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } } .fade-out-down-sm { -webkit-animation-name: fade-out-down-sm; animation-name: fade-out-down-sm; } .fade-in-down-lg { -webkit-animation-name: fade-in-down; animation-name: fade-in-down; } @-webkit-keyframes fade-out-down-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } } @keyframes fade-out-down-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } } .fade-out-down-lg { -webkit-animation-name: fade-out-down-lg; animation-name: fade-out-down-lg; } @-webkit-keyframes fade-in-left { 0% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-left { 0% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-left { -webkit-animation-name: fade-in-left; animation-name: fade-in-left; } @-webkit-keyframes fade-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } } @keyframes fade-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } } .fade-out-left { -webkit-animation-name: fade-out-left; animation-name: fade-out-left; } @-webkit-keyframes fade-in-left-sm { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-left-sm { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-left-sm { -webkit-animation-name: fade-in-left-sm; animation-name: fade-in-left-sm; } @-webkit-keyframes fade-out-left-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } } @keyframes fade-out-left-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } } .fade-out-left-sm { -webkit-animation-name: fade-out-left-sm; animation-name: fade-out-left-sm; } @-webkit-keyframes fade-in-left-lg { 0% { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-left-lg { 0% { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-left-lg { -webkit-animation-name: fade-in-left-lg; animation-name: fade-in-left-lg; } @-webkit-keyframes fade-out-left-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; } } @keyframes fade-out-left-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; } } .fade-out-left-lg { -webkit-animation-name: fade-out-left-lg; animation-name: fade-out-left-lg; } @-webkit-keyframes fade-in-right { 0% { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-right { 0% { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-right { -webkit-animation-name: fade-in-right; animation-name: fade-in-right; } @-webkit-keyframes fade-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; } } @keyframes fade-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; } } .fade-out-right { -webkit-animation-name: fade-out-right; animation-name: fade-out-right; } @-webkit-keyframes fade-in-right-sm { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-right-sm { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-right-sm { -webkit-animation-name: fade-in-right-sm; animation-name: fade-in-right-sm; } @-webkit-keyframes fade-out-right-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } } @keyframes fade-out-right-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } } .fade-out-right-sm { -webkit-animation-name: fade-out-right-sm; animation-name: fade-out-right-sm; } @-webkit-keyframes fade-in-right-lg { 0% { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-right-lg { 0% { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-right-lg { -webkit-animation-name: fade-in-right-lg; animation-name: fade-in-right-lg; } @-webkit-keyframes fade-out-right-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; } } @keyframes fade-out-right-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; } } .fade-out-right-lg { -webkit-animation-name: fade-out-right-lg; animation-name: fade-out-right-lg; } @-webkit-keyframes rotate-in { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transform-origin: center center; opacity: 0; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } } @keyframes rotate-in { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transform-origin: center center; opacity: 0; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } } .rotate-in { -webkit-animation-name: rotate-in; animation-name: rotate-in; } @-webkit-keyframes rotate-out { 0% { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(90deg); transform: rotate(90deg); transform-origin: center center; opacity: 0; } } @keyframes rotate-out { 0% { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(90deg); transform: rotate(90deg); transform-origin: center center; opacity: 0; } } .rotate-out { -webkit-animation-name: rotate-out; animation-name: rotate-out; } @-webkit-keyframes rotate-in-sm { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transform-origin: center center; opacity: 0; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } } @keyframes rotate-in-sm { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transform-origin: center center; opacity: 0; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } } .rotate-in-sm { -webkit-animation-name: rotate-in-sm; animation-name: rotate-in-sm; } @-webkit-keyframes rotate-out-sm { 0% { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center center; opacity: 0; } } @keyframes rotate-out-sm { 0% { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center center; opacity: 0; } } .rotate-out-sm { -webkit-animation-name: rotate-out-sm; animation-name: rotate-out-sm; } @-webkit-keyframes rotate-in-lg { 0% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); transform-origin: center center; opacity: 0; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } } @keyframes rotate-in-lg { 0% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); transform-origin: center center; opacity: 0; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } } .rotate-in-lg { -webkit-animation-name: rotate-in-lg; animation-name: rotate-in-lg; } @-webkit-keyframes rotate-out-lg { 0% { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(180deg); transform: rotate(180deg); transform-origin: center center; opacity: 0; } } @keyframes rotate-out-lg { 0% { -webkit-transform: rotate(0); transform: rotate(0); transform-origin: center center; opacity: 1; } 0%, to { -webkit-transform-origin: center center; } to { -webkit-transform: rotate(180deg); transform: rotate(180deg); transform-origin: center center; opacity: 0; } } .rotate-out-lg { -webkit-animation-name: rotate-out-lg; animation-name: rotate-out-lg; } @-webkit-keyframes flip-in-x { 0% { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; } to { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; } } @keyframes flip-in-x { 0% { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; } to { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; } } .flip-in-x { -webkit-animation-name: flip-in-x; animation-name: flip-in-x; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-x { 0% { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; } to { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; } } @keyframes flip-out-x { 0% { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; } to { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; } } .flip-out-x { -webkit-animation-name: flip-out-x; animation-name: flip-out-x; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-in-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; } to { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; } } @keyframes flip-in-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; } to { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; } } .flip-in-x-nr { -webkit-animation-name: flip-in-x-nr; animation-name: flip-in-x-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; } to { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; } } @keyframes flip-out-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; } to { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; } } .flip-out-x-nr { -webkit-animation-name: flip-out-x-nr; animation-name: flip-out-x-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-in-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } to { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; } } @keyframes flip-in-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } to { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; } } .flip-in-x-fr { -webkit-animation-name: flip-in-x-fr; animation-name: flip-in-x-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; } to { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @keyframes flip-out-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; } to { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } } .flip-out-x-fr { -webkit-animation-name: flip-out-x-fr; animation-name: flip-out-x-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-in-y { 0% { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; } to { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; } } @keyframes flip-in-y { 0% { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; } to { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; } } .flip-in-y { -webkit-animation-name: flip-in-y; animation-name: flip-in-y; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-y { 0% { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; } to { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; } } @keyframes flip-out-y { 0% { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; } to { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; } } .flip-out-y { -webkit-animation-name: flip-out-y; animation-name: flip-out-y; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-in-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; } to { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; } } @keyframes flip-in-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; } to { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; } } .flip-in-y-nr { -webkit-animation-name: flip-in-y-nr; animation-name: flip-in-y-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; } to { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; } } @keyframes flip-out-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; } to { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; } } .flip-out-y-nr { -webkit-animation-name: flip-out-y-nr; animation-name: flip-out-y-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-in-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; } to { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; } } @keyframes flip-in-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; } to { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; } } .flip-in-y-fr { -webkit-animation-name: flip-in-y-fr; animation-name: flip-in-y-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; } to { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; } } @keyframes flip-out-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; } to { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; } } .flip-out-y-fr { -webkit-animation-name: flip-out-y-fr; animation-name: flip-out-y-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes zoom-in { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; } to { opacity: 1; } } @keyframes zoom-in { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; } to { opacity: 1; } } .zoom-in { -webkit-animation-name: zoom-in; animation-name: zoom-in; } @-webkit-keyframes zoom-out { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.7); transform: scale(0.7); } 50%, to { opacity: 0; } } @keyframes zoom-out { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.7); transform: scale(0.7); } 50%, to { opacity: 0; } } .zoom-out { -webkit-animation-name: zoom-out; animation-name: zoom-out; } @-webkit-keyframes zoom-in-sm { 0% { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; } to { opacity: 1; } } @keyframes zoom-in-sm { 0% { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; } to { opacity: 1; } } .zoom-in-sm { -webkit-animation-name: zoom-in-sm; animation-name: zoom-in-sm; } @-webkit-keyframes zoom-out-sm { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50%, to { opacity: 0; } } @keyframes zoom-out-sm { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50%, to { opacity: 0; } } .zoom-out-sm { -webkit-animation-name: zoom-out-sm; animation-name: zoom-out-sm; } @-webkit-keyframes zoom-in-lg { 0% { -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0; } to { opacity: 1; } } @keyframes zoom-in-lg { 0% { -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0; } to { opacity: 1; } } .zoom-in-lg { -webkit-animation-name: zoom-in-lg; animation-name: zoom-in-lg; } @-webkit-keyframes zoom-out-lg { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.4); transform: scale(0.4); } 50%, to { opacity: 0; } } @keyframes zoom-out-lg { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.4); transform: scale(0.4); } 50%, to { opacity: 0; } } .zoom-out-lg { -webkit-animation-name: zoom-out-lg; animation-name: zoom-out-lg; } @-webkit-keyframes overlay-slide-in-top { 0% { height: 100%; } to { height: 0; } } @keyframes overlay-slide-in-top { 0% { height: 100%; } to { height: 0; } } .overlay-slide-in-top { top: 0; height: 0; -webkit-animation-name: overlay-slide-in-top; animation-name: overlay-slide-in-top; } @-webkit-keyframes overlay-slide-out-top { 0% { height: 0; } to { height: 100%; } } @keyframes overlay-slide-out-top { 0% { height: 0; } to { height: 100%; } } .overlay-slide-out-top { top: 0; height: 100%; -webkit-animation-name: overlay-slide-out-top; animation-name: overlay-slide-out-top; } @-webkit-keyframes overlay-slide-in-bottom { 0% { height: 100%; } to { height: 0; } } @keyframes overlay-slide-in-bottom { 0% { height: 100%; } to { height: 0; } } .overlay-slide-in-bottom { bottom: 0; height: 0; -webkit-animation-name: overlay-slide-in-bottom; animation-name: overlay-slide-in-bottom; } @-webkit-keyframes overlay-slide-out-bottom { 0% { height: 0; } to { height: 100%; } } @keyframes overlay-slide-out-bottom { 0% { height: 0; } to { height: 100%; } } .overlay-slide-out-bottom { bottom: 0; height: 100%; -webkit-animation-name: overlay-slide-out-bottom; animation-name: overlay-slide-out-bottom; } @-webkit-keyframes overlay-slide-in-left { 0% { width: 100%; } to { width: 0; } } @keyframes overlay-slide-in-left { 0% { width: 100%; } to { width: 0; } } .overlay-slide-in-left { width: 0; -webkit-animation-name: overlay-slide-in-left; animation-name: overlay-slide-in-left; } @-webkit-keyframes overlay-slide-out-left { 0% { width: 0; } to { width: 100%; } } @keyframes overlay-slide-out-left { 0% { width: 0; } to { width: 100%; } } .overlay-slide-out-left { left: 0; width: 100%; -webkit-animation-name: overlay-slide-out-left; animation-name: overlay-slide-out-left; } @-webkit-keyframes overlay-slide-in-right { 0% { width: 100%; } to { width: 0; } } @keyframes overlay-slide-in-right { 0% { width: 100%; } to { width: 0; } } .overlay-slide-in-right { right: 0; width: 0; -webkit-animation-name: overlay-slide-in-right; animation-name: overlay-slide-in-right; } @-webkit-keyframes overlay-slide-out-right { 0% { width: 0; } to { width: 100%; } } @keyframes overlay-slide-out-right { 0% { width: 0; } to { width: 100%; } } .overlay-slide-out-right { right: 0; width: 100%; -webkit-animation-name: overlay-slide-out-right; animation-name: overlay-slide-out-right; } /* ---------------------- Fonts & Text ---------------------- */ .proximanovaregular { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; } .proximanovaitalic { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; } .proximanovabold { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; } .proximanovaextrabold { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; } .proximanovalight { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; } .proximanovablack { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; } .oldstandard { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; } .oldstandardregular { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; } .intro-regular { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; } .intro-bold { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; } .olympian-italic { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; } .fontastic { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; } p a { color: #ff5242; } p:last-of-type { margin-bottom: 0; } p.italic { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; } a { text-decoration: none; } .first-paragraph { padding-right: 50px; } .first-paragraph p { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; margin-bottom: 0; line-height: 30px; font-size: 19px; } @media only screen and (max-width: 768px) { .editor .left.first-paragraph { width: 100%; margin-bottom: 30px; } .editor .right.col-1-2 { width: 100%; } } @media only screen and (max-width: 640px) { .left.first-paragraph { padding-right: 0; } } .editor { /* ---------------------- Unordered list ---------------------- */ /* ---------------------- Ordered list ---------------------- */ /* ---------------------- Blog article ---------------------- */ /* ---------------------- Blockquote ---------------------- */ /* ---------------------- Contact blocks ---------------------- */ } .editor p { float: left; width: 100%; padding: 0 20px; color: #83868a; } .editor p img { float: left; width: 100%; width: calc(100% + 160px); height: auto; margin-left: -80px; } .editor h1 { float: left; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; width: 100%; font-size: 44px; margin-bottom: 25px; text-transform: uppercase; padding: 0 20px; color: #2d3135; } .editor h1:before { float: left; width: 50px; height: 2px; background: #ff5242; margin: 20px 20px 0 0; content: ""; } .editor h2 { float: left; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; width: 100%; font-size: 44px; margin-bottom: 38px; text-transform: uppercase; color: #2d3135; padding: 0 20px; } .editor h2 span { font-size: 34px; color: #ff5242; margin: 0 4px; } .editor h3 { float: left; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; width: 100%; font-size: 24px; margin-bottom: 10px; text-transform: uppercase; color: #2d3135; padding: 0 20px; } .editor h4 { float: left; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; width: 100%; font-size: 22px; margin-bottom: 10px; color: #2d3135; padding: 0 20px; } .editor h5 { float: left; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; width: 100%; font-size: 18px; margin-bottom: 10px; color: #2d3135; padding: 0 20px; } .editor h6 { float: left; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; width: 100%; font-size: 16px; margin-bottom: 10px; color: #2d3135; padding: 0 20px; } .editor ul { float: left; width: 100%; margin-bottom: 26px; } .editor ul li { float: left; position: relative; width: 100%; padding: 0 20px 0 45px; color: #83868a; line-height: 26px; margin-bottom: 16px; } .editor ul li a { color: #ff5242; } .editor ul li:before { position: absolute; left: 20px; top: -2px; color: #ff5242; content: "•"; font-size: 26px; margin-right: 15px; } .editor ol li a { color: #ff5242; } .editor.black h1, .editor.black h2, .editor.black h3, .editor.black h4, .editor.black h5, .editor.black h6 { color: #FFF; } .editor.post-editor h1, .editor.post-editor h2, .editor.post-editor h3, .editor.post-editor h4, .editor.post-editor h5, .editor.post-editor h6 { margin-top: 28px; } .editor.post-editor h2 { font-size: 28px; margin-bottom: 10px; line-height: 28px; } .editor.post-editor h2:before { float: left; width: 20px; height: 2px; background: #ff5242; margin: 11px 15px 0 0; content: ""; } .editor.post-editor h3 { font-size: 24px; line-height: 28px; } .editor.post-editor ol { float: left; width: 100%; margin-bottom: 26px; counter-reset: li-counter; } .editor.post-editor ol li { float: left; position: relative; width: 100%; padding: 0 20px 0 45px; color: #83868a; line-height: 26px; margin-bottom: 16px; } .editor.post-editor ol li a { color: #ff5242; } .editor.post-editor ol li:before { position: absolute; left: 20px; color: #ff5242; content: counter(li-counter) "."; counter-increment: li-counter; font-size: 16px; margin-right: 15px; } .editor.post-editor .wp-caption { float: left; width: 100% !important; margin-bottom: 36px; padding: 0 20px; } .editor.post-editor .wp-caption img { float: left; width: 100%; width: calc(100% + 160px); height: auto; margin-left: -80px; } .editor.post-editor .wp-caption .wp-caption-text { margin-top: 10px; font-style: italic; padding: 0; } .editor blockquote p { position: relative; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; font-size: 28px; line-height: 1.3; padding-left: 60px; margin-bottom: 24px; } .editor blockquote p:before { position: absolute; left: 20px; font-size: 54px; content: "“"; color: #ff5242; } .editor.contact-editor p { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; margin-bottom: 26px; } .editor.contact-editor ul li { padding: 0 20px; margin-bottom: 0; } .editor.contact-editor ul li:before { display: none; } .blog-share { clear: both; } @media only screen and (max-width: 830px) { .editor p img { margin-left: -20px; width: calc(100% + 40px); } } @media only screen and (max-width: 640px) { .editor h1 { font-size: 38px; } .editor h1:before { width: 25px; margin: 16px 10px 0 0; } .editor h2 { font-size: 34px; } .editor h2 span { font-size: 26px; margin: 0; } } /* ---------------------- Big ordered list ---------------------- */ .big-list { float: left; width: 100%; counter-reset: li-counter; padding-left: 20px; margin-bottom: 100px; } .big-list li { float: left; width: 100%; position: relative; padding: 0 20px 0 80px; margin-bottom: 30px; } .big-list li:before { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; position: absolute; top: 0; left: 0; content: counter(li-counter) "."; counter-increment: li-counter; font-size: 36px; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); -webkit-transition: all 0.7s 0.15s ease-in-out; -moz-transition: all 0.7s 0.15s ease-in-out; -ms-transition: all 0.7s 0.15s ease-in-out; -o-transition: all 0.7s 0.15s ease-in-out; transition: all 0.7s 0.15s ease-in-out; } .big-list li:after { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; position: absolute; top: 0; left: 35px; content: "/"; counter-increment: ol-counter; font-size: 36px; color: #d2d3d4; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 0.7s 0.15s ease-in-out; -moz-transition: all 0.7s 0.15s ease-in-out; -ms-transition: all 0.7s 0.15s ease-in-out; -o-transition: all 0.7s 0.15s ease-in-out; transition: all 0.7s 0.15s ease-in-out; } .big-list li h5 { float: left; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; width: 100%; color: #ff5242; font-size: 28px; margin-top: 5px; padding: 0; } .big-list li p { padding: 0; } .big-list.scroll li:before { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .big-list.scroll li:after { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .big-list.scroll li:nth-child(2):before, .big-list.scroll li:nth-child(2):after { -webkit-transition: all 0.7s 0.35s ease-in-out; -moz-transition: all 0.7s 0.35s ease-in-out; -ms-transition: all 0.7s 0.35s ease-in-out; -o-transition: all 0.7s 0.35s ease-in-out; transition: all 0.7s 0.35s ease-in-out; } .big-list.scroll li:nth-child(3):before, .big-list.scroll li:nth-child(3):after { -webkit-transition: all 0.7s 0.55s ease-in-out; -moz-transition: all 0.7s 0.55s ease-in-out; -ms-transition: all 0.7s 0.55s ease-in-out; -o-transition: all 0.7s 0.55s ease-in-out; transition: all 0.7s 0.55s ease-in-out; } .big-list.scroll li:nth-child(4):before, .big-list.scroll li:nth-child(4):after { -webkit-transition: all 0.7s 0.75s ease-in-out; -moz-transition: all 0.7s 0.75s ease-in-out; -ms-transition: all 0.7s 0.75s ease-in-out; -o-transition: all 0.7s 0.75s ease-in-out; transition: all 0.7s 0.75s ease-in-out; } .big-list.steps { padding: 0; } .big-list.steps li { margin-bottom: 0; padding: 70px 20px; border-bottom: 1px solid #f2f3f3; } .big-list.steps li .cntr { position: relative; padding: 0 20px 0 80px; } .big-list.steps li .cntr:before { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; position: absolute; top: 0; left: 0; content: counter(li-counter) "."; counter-increment: li-counter; font-size: 36px; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); -webkit-transition: all 0.7s 0.15s ease-in-out; -moz-transition: all 0.7s 0.15s ease-in-out; -ms-transition: all 0.7s 0.15s ease-in-out; -o-transition: all 0.7s 0.15s ease-in-out; transition: all 0.7s 0.15s ease-in-out; } .big-list.steps li .cntr:after { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; position: absolute; top: 0; left: 35px; content: "/"; counter-increment: ol-counter; font-size: 36px; color: #d2d3d4; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); -webkit-transition: all 0.7s 0.15s ease-in-out; -moz-transition: all 0.7s 0.15s ease-in-out; -ms-transition: all 0.7s 0.15s ease-in-out; -o-transition: all 0.7s 0.15s ease-in-out; transition: all 0.7s 0.15s ease-in-out; } .big-list.steps li .cntr h5, .big-list.steps li .cntr p { clear: both !important; max-width: 520px; } .big-list.steps li:before, .big-list.steps li:after { display: none; } .big-list.steps li:first-child { border-top: 1px solid #f2f3f3; } .big-list.steps.scroll li .cntr:before { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .big-list.steps.scroll li .cntr:after { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .big-list.steps img { position: absolute; right: 0; } @media only screen and (max-width: 1180px) { .big-list.steps li { background-position-x: 50% !important; } } @media only screen and (max-width: 960px) { .big-list.steps li { background-position-x: 30% !important; } } @media only screen and (max-width: 640px) { .big-list { margin-bottom: 30px; } .big-list.steps { margin-bottom: 0; } .big-list.steps li { padding: 30px 0 30px 20px; background: #FFF !important; } .big-list.steps li .cntr { padding: 60px 20px 0; } .big-list.steps li .cntr:before { left: 20px; } .big-list.steps li .cntr:after { left: 55px; } } .editor.animate-this.animate .cursive { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .editor.animate-this.animate h2 { opacity: 1; -webkit-transform: translateY(0px) !important; -moz-transform: translateY(0px) !important; -ms-transform: translateY(0px) !important; -o-transform: translateY(0px) !important; transform: translateY(0px) !important; } .editor.animate-this.animate h2:before { opacity: 1; max-width: 26px; } .editor.animate-this.animate h2:after { opacity: 1; max-width: 26px; } .editor.animate-this.animate h3 { opacity: 1; -webkit-transform: translateY(0px) !important; -moz-transform: translateY(0px) !important; -ms-transform: translateY(0px) !important; -o-transform: translateY(0px) !important; transform: translateY(0px) !important; } .editor.animate-this.animate p { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .editor.animate-this { position: relative; z-index: 1; } .editor.animate-this .cursive { opacity: 0; -webkit-transform: translateY(-25px); -moz-transform: translateY(-25px); -ms-transform: translateY(-25px); -o-transform: translateY(-25px); transform: translateY(-25px); -webkit-transition: all 0.7s 0.2s ease-in-out; -moz-transition: all 0.7s 0.2s ease-in-out; -ms-transition: all 0.7s 0.2s ease-in-out; -o-transition: all 0.7s 0.2s ease-in-out; transition: all 0.7s 0.2s ease-in-out; } .editor.animate-this h2 { opacity: 0; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all 0.85s 0.2s ease-in-out; -moz-transition: all 0.85s 0.2s ease-in-out; -ms-transition: all 0.85s 0.2s ease-in-out; -o-transition: all 0.85s 0.2s ease-in-out; transition: all 0.85s 0.2s ease-in-out; } .editor.animate-this h2:before { max-width: 0; -webkit-transition: all 0.25s 1.3s ease-in-out; -moz-transition: all 0.25s 1.3s ease-in-out; -ms-transition: all 0.25s 1.3s ease-in-out; -o-transition: all 0.25s 1.3s ease-in-out; transition: all 0.25s 1.3s ease-in-out; } .editor.animate-this h2:after { max-width: 0; -webkit-transition: all 0.25s 1.3s ease-in-out; -moz-transition: all 0.25s 1.3s ease-in-out; -ms-transition: all 0.25s 1.3s ease-in-out; -o-transition: all 0.25s 1.3s ease-in-out; transition: all 0.25s 1.3s ease-in-out; } .editor.animate-this h3 { opacity: 0; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all 0.5s 2s ease-in-out; -moz-transition: all 0.5s 2s ease-in-out; -ms-transition: all 0.5s 2s ease-in-out; -o-transition: all 0.5s 2s ease-in-out; transition: all 0.5s 2s ease-in-out; } .editor.animate-this p { opacity: 0; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all 0.7s 0.35s ease-in-out; -moz-transition: all 0.7s 0.35s ease-in-out; -ms-transition: all 0.7s 0.35s ease-in-out; -o-transition: all 0.7s 0.35s ease-in-out; transition: all 0.7s 0.35s ease-in-out; } /* ---------------------- Buttons ---------------------- */ .button { position: relative; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; display: inline-block; color: #2d3135; font-size: 14px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } div.desktop .button:hover span:before { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } div.desktop .button:hover span:after { max-height: 3px; -webkit-transition: all 0.15s 0.15s ease-in-out; -moz-transition: all 0.15s 0.15s ease-in-out; -ms-transition: all 0.15s 0.15s ease-in-out; -o-transition: all 0.15s 0.15s ease-in-out; transition: all 0.15s 0.15s ease-in-out; } div.desktop .button:hover:before { width: 0; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } div.desktop .button:hover:after { width: 0; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .button:active span:before { -webkit-transform: translateX(23px); -moz-transform: translateX(23px); -ms-transform: translateX(23px); -o-transform: translateX(23px); transform: translateX(23px); } .button.white { border-bottom: 3px solid #FFF; color: #FFF; } .button.white span:after { border-left: 3px solid #FFF; border-right: 3px solid #FFF; } .button.white:before { background: #FFF; } .button.white:after { background: #FFF; } .button-wrapper { float: left; width: 100%; margin-top: 90px; } .wrapper div { height: 100%; } .wrapper { float: left; position: relative; width: 100%; height: 100%; background: #2d3135; } .wrapper .section { float: left; position: relative; width: 100%; background: #FFF; z-index: 9; } .wrapper .section .cntr { width: 100%; max-width: 1220px; margin: 0 auto; } .wrapper .section .cntr.narrow { max-width: 710px; } .wrapper .section.first { padding-top: 230px; } .wrapper .section.first h2 { position: relative; } .wrapper .section.first h2:before { position: absolute; height: 2px; width: 26px; background: #ff5242; right: 50%; margin-left: -26px; bottom: -17px; content: ""; } .wrapper .section.first h2:after { position: absolute; height: 2px; width: 26px; background: #ff5242; left: 50%; margin-right: -26px; bottom: -17px; content: ""; } .wrapper .section.first .cursive { float: left; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; width: 100%; color: #ff5242; font-size: 20px; margin-bottom: 10px; } .wrapper .section.header-work { position: fixed !important; padding-bottom: 150px; height: 570px; } .wrapper .section.top-white:before { position: absolute; width: 100%; height: 290px; top: 0; left: 0; background: #FFF; content: ""; } .wrapper .section.page-av .cntr { padding: 0 20px; } .wrapper .section.page-av .cntr h2 { position: relative; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; font-size: 60px; } .wrapper .section.page-av .cntr .button { margin-top: 60px; } .wrapper .section.tarieven { margin-top: 0px; padding-bottom: 50px; } .wrapper .section.check-content { margin-top: 350px; } @media only screen and (max-width: 1024px) { .wrapper .section { /* ---------------------- Content ---------------------- */ /* ---------------------- Work ---------------------- */ } .wrapper .section.content { margin-top: 0 !important; } .wrapper .section.content.single-post { /* margin-top: 570px !important; */ } .wrapper .section.content.single-post .cntr div { width: 100% !important; } .wrapper .section.content.single-post .cntr div img { width: 100%; height: auto; } .wrapper .section.header-work { position: relative !important; } } @media only screen and (max-width: 640px) { .wrapper .section { padding-top: 100px; /* ---------------------- First section (Header) ---------------------- */ /* ---------------------- Work ---------------------- */ /* ---------------------- Padding bottom ---------------------- */ /* ---------------------- Algemene voorwaarden ---------------------- */ } .wrapper .section.first { padding-top: 130px; height: auto; padding-bottom: 100px; } .wrapper .section.padding-bottom { padding-bottom: 100px; } .wrapper .section.page-av .cntr h2 { position: relative; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal !important; font-size: 32px; } } /* ---------------------- Clients ---------------------- */ .clients-wrapper { float: left; width: 100%; } .clients-wrapper ul { float: left; width: 100%; background: #fbfbfb; border-bottom: 1px solid #e0e0e0; } .clients-wrapper ul li { float: left; position: relative; text-align: center !important; width: 25%; height: 150px; border-top: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; overflow: hidden; } .clients-wrapper ul li img { position: absolute; z-index: 2; left: 50%; top: 50%; height: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */ } .clients-wrapper ul li img.hover { opacity: 0; top: 55%; } .clients-wrapper ul li .button { display: inline-block; margin-top: 100px; visibility: hidden; opacity: 0; z-index: 2; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .clients-wrapper ul li .background-client { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; -webkit-transform: translateY(10px) scale(1.1); -moz-transform: translateY(10px) scale(1.1); -ms-transform: translateY(10px) scale(1.1); -o-transform: translateY(10px) scale(1.1); transform: translateY(10px) scale(1.1); -webkit-transition: all 0.45s ease-in-out; -moz-transition: all 0.45s ease-in-out; -ms-transition: all 0.45s ease-in-out; -o-transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out; /* ---------------------- Clients ---------------------- */ } .clients-wrapper ul li .background-client:before { position: absolute; width: 200%; height: 200%; bottom: 0; left: 0; z-index: 2; content: ""; } div.desktop .clients-wrapper ul li:hover img { margin-top: -35px; } div.desktop .clients-wrapper ul li:hover img.regular { opacity: 0; } div.desktop .clients-wrapper ul li:hover img.hover { opacity: 1; } div.desktop .clients-wrapper ul li:hover .background-client { opacity: 1; -webkit-transform: translateY(0) scale(1); -moz-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); -o-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } div.desktop .clients-wrapper ul li:hover .button { visibility: visible; opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } a.animBtn:link, a.animBtn:visited { position: relative; display: block; width: 112px; height: 22px; line-height: 22px; border: 1px solid #fff; background: rgba(255, 255, 255, 0.2); border-radius: 3px; color: #fff; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; text-align: center; text-decoration: none; /*text-transform: uppercase;*/ overflow: hidden; letter-spacing: .08em; /*text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);*/ text-shadow:0 1px 1px rgba(0,0,0,0.2); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } a.animBtn:link:after, a.animBtn:visited:after { content: ""; position: absolute; background: none repeat scroll 0 0 #fff; height: 0%; left: 50%; top: 50%; width: 100%; z-index: -1; -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } a.animBtn:link:hover, a.animBtn:visited:hover { color: #2b2e2d; text-shadow: none; } a.animBtn:link:hover:after, a.animBtn:visited:hover:after { height: 420%; } a.animBtn.themeD:after { width: 0%; border-radius: 50%; opacity: .5; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } a.animBtn.themeD:hover:after { width: 110%; opacity: 1; } /* Commen */ .padding-top-50 { padding-top: 50px !important; } .padding-lr-30 { padding: 0 30px; } .fb-fade-in { animation-name: fade-in; -webkit-animation-name: fade-in; animation-duration: 1s; -webkit-animation-duration: 1s; transition-timing-function: linear; -webkit-transition-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .slide-fade-in { animation-name: fade-in; -webkit-animation-name: fade-in; animation-duration: 2s; -webkit-animation-duration: 2s; transition-timing-function: linear; -webkit-transition-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .fb-fade-out { animation-name: fade-out; -webkit-animation-name: fade-out; animation-duration: 1s; -webkit-animation-duration: 1s; transition-timing-function: linear; -webkit-transition-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #solution_fb { animation-name: fade-in; -webkit-animation-name: fade-in; animation-duration: 1s; -webkit-animation-duration: 1s; transition-timing-function: linear; -webkit-transition-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .box-shadow{ box-shadow:0 0 10px #ccc; -moz-box-shadow:0 0 10px #ccc; -webkit-box-shadow:0 0 10px #ccc; } /* home footer */ .home-footer { background: url(../images/nw/footer-line.png) top right no-repeat, #464646; font-size: 14px; text-align: center; } .home-footer_social { padding: 13px 0 1px 0; } .home-footer_content > * { margin: 15px 0; } .home-footer_social a { margin-left: 15px; line-height: 25px; font-size: 14px; } .home-footer_social a.uk-icon-button { color: #15181a; text-shadow: none; border: 0; background: #464648; } .home-footer_social a.dx-weixin:hover { color: #fff; background-color: #4cc02d; } .home-footer_social a.dx-twitter:hover { color: #fff; background-color: #e6162d; } .home-footer_social a.dx-linkedin:hover { color: #fff; background-color: #18d0f7; } .home-footer_contact { color: #b7bdbf; } .home-footer_contact-tel { color: #fff; } .home-footer_audit { font-size: 12px; color: #ffffff; } .home-footer_audit a { color: #ffffff; } .home-footer_audit a:hover { color: #6fa470; } /* facebook link */ .fb-link { border-bottom: 1px solid #ddd; font-size: 18px; height: 84px; margin-bottom: 50px; } .fb-link_item { background-color: #fbfbfb; border-left: 1px solid #ddd; color: #2b2e2d; font-weight: bold; line-height: 84px; text-align: center; } .fb-link_item-img, .fb-link_item-img--hover { width: 40px; } .fb-link_item:hover { background-color: #f8f8f8; color: #3b7bf2; font-weight: bold; } .fb-link_item:last-child { border-right: 1px solid #ddd; } /* social media */ .social-media { height: 420px; position: relative; } .social-media_header { height: 50px; text-align: center; } .social-media_header-title { text-align: center; color: #444847; font-size: 24px; } .social-media_content { height: 320px; text-align: center; } .social-media_number { color: #fff; } .social-media_number-title { font-size: 18px; } .social-media_number-title span { font-size: 60px; } .social-media_content-desc { font-size: 18px; line-height: 18px; margin-top: 10px; } /* fb-block-C */ .market-info {} .market-info_header { height: 50px; text-align: center; } .market-info_content { background-color: #fbfbfb; padding: 50px; height: 550px; } .market-info_desc { text-align: center; } .market-info_img-wrap{ height: 350px; } .market-info_img{ opacity: 0; } .market-info_header-title { color: #444847; font-size: 24px; } .market-info_number { border-bottom: 1px solid #ddd; display: inline-block; font-size: 70px; line-height: 70px; margin-bottom: 20px; padding-bottom: 10px; } .market-info_number > span:last-child { font-size: 40px; line-height: 40px; } .market-info_line { height: 550px; width: 1px; } .market-info_title { font-size: 30px; font-weight: bold; line-height: 30px; margin-bottom: 10px; } .market-info_number-title { } .market-info_intro span { display: block; font-size: 18px; line-height: 28px; } /* slide-block */ .slide-block_card { text-align: center; } .slide-block_card img { border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; max-width: none; } .slide-block_content > div:last-child img { border-right: 1px solid #ddd; } /* delivery service*/ .delivery-serv { margin-bottom: 20px; } .delivery-serv_header { height: 180px; text-align: center; } .delivery-serv_header-title { color: #444847; font-size: 24px; line-height: 24px; margin-bottom: 15px; } .delivery-serv_header-subtitle { color: #6fa470; font-size: 18px; line-height: 18px; } .delivery-serv_content { background-color: #fbfbfb; font-size: 12px; height: 246px; text-align: center; padding: 30px 0; } .delivery-serv_content-title { font-size: 24px; } .delivery-info {} .delivery-info_img { margin-bottom: 20px; } .delivery-info_title { font-weight: bold; margin-bottom: 5px; } .delivery-info-previous, .delivery-info-next { font-size: 30px; font-weight: normal; } .delivery-info-previous { left: 0 !important; } .delivery-info-next { right: 0 !important; } /* delivery tool */ .delivery-tool { background-color: #fbfbfb; color: #fff; padding-top: 30px; margin-bottom: 20px; } .delivery-tool_header { text-align: center; margin-bottom: 30px; } .delivery-tool_header-title { font-size: 24px; color: #444847; line-height: 24px; } .delivery-tool_content { background-color: #fbfbfb; height: 200px } .delivery-desc_info { padding-top: 40px; text-align: center; } .delivery-desc_info--left { background-color: #2485cd; } .delivery-desc_info--right { background-color: #fe6011; } .delivery-desc_info-title { font-size: 24px; line-height: 24px; margin-bottom: 10px; } .delivery-desc_info-subtitle { font-size: 18px; line-height: 18px; margin-bottom: 30px; } .delivery-desc_btn { background-color: #fff; border-radius: 8px; display: inline-block; height: 40px; line-height: 40px; text-decoration: none; width: 180px; } .delivery-desc_btn:hover { background-color: #6fa470; color: #fff; text-decoration: none; } /* information acquisition */ .info-acqui { background-color: #fbfbfb; margin-bottom: 20px; padding: 50px 0; } .info-acqui_header { text-align: center; } .info-acqui_header-title { color: #444847; font-size: 24px; line-height: 24px; margin-bottom: 10px; } .info-acqui_header-subtitle { color: #6fa470; font-size: 18px; line-height: 18px; } .info-acqui_content { margin-top: 50px; } /* contact desc */ .contact-desc {} .contact-desc_img-wrap { text-align: right; } .contact-desc_img-wrap img { width: 90px; } .contact-desc_info { margin-left: 20px; } .contact-desc_info-title { font-size: 18px; line-height: 24px; } /* contact form */ .contact-form { background-color:#FAFAFA; } .contact-form_control-label { display: inline-block; font-size: 16px; padding: 18px 20px; text-align: right; width: 106px; } .contact-form_control-input, .contact-form_control-select { border-radius: 5px !important; width: 60%; } .contact-form_control-select { color: #444847 !important; font-size: 12px !important; height: 26px !important; padding: 0 !important; } select.contact-form_control-select { color: #444847 !important; } .contact-form_control-select option { color: #444847 !important; } .contact-form_control-input { font-size: 14px !important; } .contact-form_btn-commit { background-color: #6fa470; border-radius: 8px; color: #fff; display: inline-block; height: 40px; line-height: 40px; margin-left: 8%; text-align: center; text-decoration: none; width: 180px; } .contact-form_btn-commit:hover { box-shadow: 0px 0px 5px gray; color: #fff; text-decoration: none; } .contact-desc:first-child { margin-top: -30px; margin-bottom: 60px; } .slogan-info { margin-top: 50px; text-align: center; } .slogan-info_header { height: 100px; } .slogan-info_header-title { font-size: 24px; } .slogan-item_deliver { margin-top: 20px; width: 1px; height: 50px; background-color: #ddd; } .ads-plat { padding: 50px 0; height: 400px; } .ads-plat_item { height: 450px; /*70px*/ padding: 110px 0; text-align: center; } .slogan-info_item-desc { margin-top: 15px; } .ads-plat_img-wrap { height: 160px; } .ads-plat_content { display: none; } .ads-plat_item-info { color: #fbfbfb; font-size: 14px; line-height: 24px; } /*service */ .serv-block li { border-top: 1px solid #ddd; border-left: 1px solid #ddd; height: 30px; line-height: 30px; overflow: hidden; padding: 5px 40px; text-align: center; } .serv-block > div + div > ul:hover { box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); position: relative; left: -1px; top: -1px; } .serv-block li:first-child { color: #fff; } .serv-block li:last-child { border-bottom-width: 20px; } .serv-block li img { height: 20px; width: 20px; } .serv-item_a > li:nth-child(even) { background: #f4f3f4; } .serv-item_a > li:first-child { background: #fe4710; border-left-width: 1px; border-top-left-radius: 5px; font-size: 20px; font-weight: bold; padding: 15px 0; } .serv-item_a > li:last-child { border-bottom: 20px solid #fe4710; border-bottom-left-radius: 5px; } .serv-item_b > li:first-child { background: #80d573; border-left-width: 0; font-size: 20px; padding: 15px 0; } .serv-item_b > li:last-child { border-bottom: 20px solid #80d573; } .serv-item_b li.is-checked { background: #eafae7; } .serv-item_c > li:first-child { background: #38c9fa; border-left-width: 0; font-size: 20px; padding: 15px 0; } .serv-item_c > li:last-child { border-bottom: 20px solid #38c9fa; } .serv-item_c li.is-checked { background: #d4f5fe; } .serv-item_d > li:first-child { background: #febf6c; border-left-width: 0; font-size: 20px; padding: 15px 0; } .serv-item_d > li:last-child { border-bottom: 20px solid #febf6c; } .serv-item_d li.is-checked { background: #fff2e2; } .serv-item_e > li { border-right: 1px solid #ddd; } .serv-item_e > li:first-child { background: #ff6b66; border-left-width: 0; border-top-right-radius: 5px; font-size: 20px; padding: 15px 0; } .serv-item_e > li:last-child { border-bottom: 20px solid #ff6b66; border-bottom-right-radius: 5px; } .serv-item_e li.is-checked { background: #ffeae4; } /* advantage */ .advant-home_item { background-color: #fff; height: 330px; } .advant-home_item-img { margin-top: 50px; margin-bottom: 50px; width: 100px; } .advant-home_item-title { color: #444847; font-size: 26px; font-weight: bold; margin-bottom: 20px; } .advant-home_item-subtitle { color: #848a8c; font-size: 18px; font-weight: normal; } .advant-home_item:hover { box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); } .wrapper-block { margin: 0 auto; text-align: center; width: 60%; } .wrapper-block_title { font-size: 32px; line-height: 32px; margin-bottom: 20px; } .wrapper-block_subtitle { color: #848a8c; font-size: 16px; line-height: 24px; margin-bottom: 50px; } // media query @media (max-width: 767px) { .info-acqui, .market-info_content, .ads-plat { height: auto; padding: 0; } .info-acqui_content { margin-top: 0; } .contact-form_btn-commit { margin-left: 0; } } #rocketmeluncur { position: fixed; bottom: 100px; z-index: 7; display: none; visibility: hidden; width: 26px; height: 48px; right: 30px; opacity: 0; -webkit-transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335); -moz-transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -moz-transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335); } #rocketmeluncur i { display: block; margin-top: 48px; height: 14px; opacity: .5; -webkit-transition: -webkit-transform .2s; -moz-transition: -moz-transform .2s; transition: transform .2s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0 } #rocketmeluncur:hover { background-position: 50% -62px } #rocketmeluncur:hover i { background-position: 50% 100%; -webkit-animation: flaming .7s infinite; -moz-animation: flaming .7s infinite; animation: flaming .7s infinite } #rocketmeluncur.showrocket { visibility: visible; opacity: 1 } #rocketmeluncur.launchrocket { background-position: 50% -62px; opacity: 0; -webkit-transform: translateY(-800px); -moz-transform: translateY(-800px); -ms-transform: translateY(-800px); transform: translateY(-800px); pointer-events: none } #rocketmeluncur.launchrocket i { background-position: 50% 100%; -webkit-transform: scale(1.4, 3.2); -moz-transform: scale(1.4, 3.2); transform: scale(1.4, 3.2) } .cookie-tips-modal { display: none; position: fixed; bottom: 0; left: 0; background: #fff; width: 100%; text-align: center; padding: 10px 0; color:#999999; z-index: 999; } .cookie-tips-modal .text { width: 550px; margin: 0 auto; font-size: 14px; position: relative; } .cookie-tips-modal .text span { position: absolute; right: -30px; top: 3px; width: 10px; height: 10px; content: ''; cursor: pointer; background: url('../images/close.png') no-repeat center; } .cookie-tips-modal a { font-weight: 700; text-decoration: underline; color:#999999; } /* building website */ .best-choice_block-item img:hover { -webkit-animation: swing 1s ease; animation: swing 1s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .service-block_mask--active { position: absolute; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.1); /* Black w/ opacity */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .budding-advant, .budding-feature { background-color: #fbfbfb; padding-bottom: 50px; } .budding-advant_header, .budding-feature_header { margin-top: 50px; } .budding-advant_header-title, .budding-feature_header-title { font-size: 32px; line-height: 38px; font-weight: bold; } .budding-advant_content, .budding-feature_content { color: #444847; margin-top: 80px; } .budding-feature_block { display: inline-block; margin-left: 20%; margin-top: 50px; } .budding-feature_block-title { margin-top: 20px; font-size: 46px; color: #006eb6 } .budding-feature_block-subtitle { margin-top: 50px; font-size: 24px; color: #797f81; } .budding-feature_block-btn-wrap { width: 270px; height: 50px; background: #0070ba; margin-top: 50px; } .budding-feature_block-btn { line-height: 50px; color: #fff; } .budding-feature_block-desc { font-size: 16px; margin-top: 20px; color: #797f81; } .service-plan { margin-top: 50px; margin-bottom: 100px; text-align: center; } .service-plan_block { position: relative; border: 1px solid #ddd; } .service-plan_block:last-child { } .service-plan_content { margin: 100px auto 0; max-width: 1120px; } .service-plan_block-header { height: 60px; text-align: center; position: relative; background: #f7f7f7; border-bottom: 1px solid #ddd; } .service-plan_block-header:after, .service-plan_block-header:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .service-plan_block-header:after { border-color: rgba(136, 183, 213, 0); border-top-color: #f7f7f7; border-width: 10px; margin-left: -10px; } .service-plan_block-header:before { border-color: rgba(221, 221, 221, 0); border-top-color: #ddd; border-width: 11px; margin-left: -11px; } .service-plan_block-content { position: relative; height: 320px; padding-left: 10%; padding-right: 10%; text-align: center; } .service-plan_block-header-title { display: inline-block; position: relative; top: 30%; } .service-plan_intro-desc { font-size: 22px; } .service-plan_intro { margin-top: 30px; } .service-plan_intro-title { font-size: 24px; line-height: 30px; } .service-plan_intro-subtitle { color: #6fa470; margin-top: 20px; font-size: 24px; line-height: 30px; } .service-plan_intro-desc { color: #2f95f2; font-size: 22px; line-height: 28px; margin-top: 20px; } .service-plan_intro-price { color: #2f95f2; margin-top: 20px; font-size: 60px; line-height: 70px; } .service-plan_intro-info { padding-top: 46px; color:#6fa470; font-size: 40px; line-height: 60px; } .service-plan_btn { margin-top: 30px; display: inline-block; width: 60%; color: #fff; height: 45px; border-radius: 12px; line-height: 45px; background: #6fa470; } .service-plan_dist { color: #848a8c; margin-top: 14px; font-size: 14px; line-height: 22px; } .service-plan_img { margin-top: 25px; } .service-plan_block-footer { padding: 20px 0; } .service-plan_btn:hover { box-shadow: 0 0 5px gray; } .service-plan_code-desc { line-height: 150%; } .service-list { height: 683px; margin-top: 50px; } .service-list_header-title { display: inline-block; padding-bottom: 10px; border-bottom: 1px solid #000; font-weight: normal; font-size: 24px; } .service-list_item { color: #848a8c; border-bottom: 1px solid #ddd; padding-bottom: 5px; padding-top: 10px; } .best-choice_block { margin-top: 60px; } .best-choice_header-title { font-weight: bold; margin-top: 50px; font-size: 30px; line-height: 38px; } .best-choice_header-subtitle { color: #444847; margin-top: 20px; font-size: 20px; line-height: 24px; } .best-choice_block-item { color: #444847; font-size: 16px; } .best-choice_content { background: #f7f7f7; padding-bottom: 30px; padding-top: 20px; background: #f7f7f7; margin-top: 50px; } .best-choice_content-title { color: #444847; font-size: 24px; line-height: 30px; } .best-choice_content-title-info { display: inline-block; padding-bottom: 10px; border-bottom: 1px solid #000; } .building-form_control { margin-bottom: 10px; } .building-form_control-input { border-radius: 10px !important; } .building-form_btn-commit { background-color: #6fa470; border-radius: 8px; color: #fff; display: inline-block; height: 40px; line-height: 40px; text-align: center; text-decoration: none; width: 180px; } .building-form_btn-commit:hover { box-shadow: 0px 0px 5px gray; color: #fff; text-decoration: none; } .budding-feature_block-btn-wrap:hover { box-shadow: 0px 0px 5px grey; color: #fff; text-decoration: none; } .budding-feature_block-btn-wrap a:hover { text-decoration: none; } .building-form_control { text-align: center; } .building-form_control-label { width: 112px; margin-right: 20px; font-size: 16px; text-align: right; display: inline-block; } .building-form_control-select, .building-form_control-input { width: 70%; } @media (max-width: 767px) { .cookie-tips-modal .text { width: 85%; font-size: 12px; } .cookie-tips-modal .text span { right: -10px; } .building-mo_header-title { font-size: 20px; font-weight: bold; padding-top: 40px; padding-bottom: 20px; text-align: center; } .building-mo_header-subtitle { font-size: 16px; text-align: center; margin-top: 10px; } .best-choice_mo-content-wrap { background-color: #f7f7f7; margin-top: 20px; padding: 20px 0; } .building-form_modal-content { padding: 0 10% !important; } .building-form_modal-dialog { padding-top: 20px !important; } .buidding-form_content-title { font-size: 24px !important; } .service-plan_mo-item-left { margin-left: -1px; } .service-plan_mo-item-right { margin-right: -1px; } .service-plan_mo-item-left:not(.uk-active) { border-top: 1px solid #ddd; border-left: 1px solid #ddd; } .service-plan_mo-item-middle:not(.uk-active) { border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } .service-plan_mo-item-right:not(.uk-active) { border-top: 1px solid #ddd; border-right: 1px solid #ddd; } .service-plan_mo-tab { margin: 0 !important; border: 0 !important; } .service-plan_mo-item { height: 40px; line-height: 40px; border-bottom: 1px solid #ddd; } .service-plan_mo-item.uk-active { border: 0 !important; color: #fff !important; background-color: #6fa470 !important; height: 42px; } } /* pc title line */ .title-line { width: 100px; height: 6px; background: #6fa470; margin: 0 auto; margin-top: 25px; } .sub-line { width:80px; height:4px; background:#6fa470; margin: 0 auto; margin: 30px auto; } .dx-container { padding-top: 70px; padding-bottom: 70px; } .container-p { margin: 0 auto; margin-top: 40px; font-size: 1.42rem; color: #666666; max-width: 580px; text-align: center; line-height: 32px; } /* banner 动画 */ .banner-animation { animation-name: zoomin; animation-duration: 3s; -webkit-animation-name: zoomin; -webkit-animation-duration: 3s; } @keyframes zoomin { from { transform: translate(-50px, 0); opacity: 0; filter: alpha(opacity=0); } to { transform: translate(0, 0); opacity: 1; filter: alpha(opacity=100); } } @-webkit-keyframes zoomin /* Safari and Chrome */ { from { -webkit-transform: translate(-50px, 0); opacity: 0; filter: alpha(opacity=0); } to { -webkit-transform: translate(0, 0); opacity: 1; filter: alpha(opacity=100); } } /* contact us */ .contact-team { color: rgba(112, 112, 112, 1); } .contact-team .contact-team-name { font-size: 1.71rem; } .contact-team .describe { width: 100%; height: 140px; padding: 48px 0; border: 1px solid rgba(242, 242, 242, 1); } .contact-team .describe:hover a { color: #5F6DF3; } .contact-team .describe:hover { box-shadow:0px 8px 50px 8px rgba(233, 233, 233, 1); } .contact-team .describe a { color: #707070; } .contact-team .describe a:hover { text-decoration: none; } .contact-team .uk-width-1-2 { margin-top: 38px; } .mobile-contact-team-box .panel .describe { width: 100% !important; margin-top: 15px; } /* link button */ .black-bg{text-align:center;} .for-papaya-button { cursor: pointer; padding:20px 40px; width:auto; display:inline-block; margin: 10px auto 100px; background: #6fa470; font-size: 20px; font-weight: bold; color: rgba(255, 255, 255, 1); border-radius: 30px; box-shadow: 0 10px 10px rgba(4, 76, 177, 0.3); } .for-papaya-button>a { display: block; width: 100%; height: 100%; color: rgba(255, 255, 255, 1); text-decoration: none; } /*.for-papaya-button:hover {*/ /* background: #FF911D!important;*/ /*}*/ .mobile-for-papaya-button { cursor: pointer; width: 80%; margin: 7.14rem auto; background: rgba(255, 172, 66, 1); line-height: 4; font-size: 1.7rem; font-weight: bold; color: rgba(255, 255, 255, 1); } .mobile-for-papaya-button>a { display: block; width: 100%; height: 100%; color: rgba(255, 255, 255, 1); text-decoration: none; } .uk-navbar { background: #fff; }